:root{--bg: #f6f7f8;--panel: #ffffff;--text: #1c1f23;--muted: #5d6670;--border: #dde1e5;--accent: #2f6fde;--accent-text: #ffffff;--warn: #a15c00;--pressed: #e8effc;color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px}@media(prefers-color-scheme:dark){:root{--bg: #111315;--panel: #1a1d20;--text: #e8eaed;--muted: #9aa3ad;--border: #2e3338;--accent: #5b8ff0;--accent-text: #0b0d10;--warn: #f0a640;--pressed: #23324d}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}.app{display:grid;grid-template-columns:var(--sidebar-width, 340px) 1fr;height:100vh;position:relative}.sidebar-resizer{position:absolute;top:0;bottom:0;width:9px;margin-left:-5px;cursor:col-resize;touch-action:none;z-index:2}.sidebar-resizer:after{content:"";position:absolute;top:0;bottom:0;left:3px;width:3px;background:transparent;transition:background .15s}.sidebar-resizer:hover:after,.sidebar-resizer:focus-visible:after,.sidebar-resizer[data-dragging]:after{background:var(--accent)}.sidebar-resizer:focus-visible{outline:none}body.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.panel{background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:18px}h1{font-size:1.25rem;margin:0}h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}.sub,.hint,footer{color:var(--muted);font-size:.85rem;margin:4px 0 0}.hint:empty{display:none}.hint.warn{color:var(--warn)}section{display:flex;flex-direction:column;gap:10px}.field{display:flex;flex-direction:column;gap:6px;font-size:.9rem}.field output{float:right;color:var(--muted);font-variant-numeric:tabular-nums}.row{display:flex;gap:12px;flex-wrap:wrap}textarea{font:inherit;font-size:1rem;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);resize:vertical}input[type=range]{width:100%;accent-color:var(--accent)}.segmented{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;align-self:flex-start}.segmented button{font:inherit;font-size:.85rem;border:0;border-right:1px solid var(--border);background:transparent;color:var(--text);padding:6px 12px;cursor:pointer}.segmented button:last-child{border-right:0}.segmented button[aria-pressed=true]{background:var(--pressed);color:var(--accent);font-weight:600}.check{display:flex;gap:8px;align-items:center;font-size:.9rem}.check:has(input:disabled){color:var(--muted)}.colors .color{display:flex;align-items:center;gap:8px;font-size:.9rem}input[type=color]{width:36px;height:28px;padding:0;border:1px solid var(--border);border-radius:6px;background:none}.export{flex-direction:row}.export button{font:inherit;padding:9px 14px;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer}.export .primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600;flex:1}footer{margin-top:auto}footer a{color:inherit}.viewer{position:relative;min-height:0}#preview{position:absolute;inset:0}.status{position:absolute;left:16px;bottom:12px;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}.row-controls{display:flex;gap:16px;margin-bottom:8px}.row-controls label{display:flex;flex-direction:column;gap:2px;width:160px}.row-controls output{float:right;font-variant-numeric:tabular-nums}@media(max-width:760px){.app{grid-template-columns:1fr;grid-template-rows:45vh auto;height:auto}.sidebar-resizer{display:none}.viewer{order:-1;height:45vh}.panel{border-right:0;padding:16px}}.symbol-palette{display:grid;grid-template-columns:repeat(auto-fill,70px);gap:6px}.symbol-palette button{font:inherit;font-size:.72rem;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);cursor:pointer;line-height:1.15}.symbol-palette button:hover:not(:disabled){border-color:var(--accent)}.symbol-palette .symbol-icon{height:22px;width:100%}.symbol-icon{fill:currentColor;flex:none}.symbol-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.symbol-list li{border:1px solid var(--border);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px}.symbol-head{display:flex;align-items:center;gap:8px;font-size:.9rem}.symbol-head .symbol-icon{height:20px;width:36px}.symbol-head .grow{margin-left:auto;gap:4px;font-size:.8rem;color:var(--muted)}.symbol-head .grow+.symbol-actions{margin-left:4px}.symbol-actions{margin-left:auto;display:flex;gap:2px}.symbol-actions button{font:inherit;font-size:.85rem;width:28px;height:26px;border:1px solid var(--border);border-radius:5px;background:transparent;color:var(--text);cursor:pointer}.symbol-actions button:disabled{opacity:.35;cursor:default}.field.inline{flex-direction:row;align-items:center;gap:10px}input[type=number]{font:inherit;width:72px;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text)}.icon-picker{display:flex;flex-wrap:wrap;gap:4px}.icon-picker button{width:38px;height:34px;padding:5px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center}.icon-picker.wide button{width:50px}.icon-picker .symbol-icon{width:100%;height:100%}.icon-picker button[aria-pressed=true]{background:var(--pressed);border-color:var(--accent);color:var(--accent)}.label-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto}.label-list li{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:6px;padding:4px 6px 4px 4px}.label-list li[aria-current=true]{background:var(--pressed);border-color:var(--accent)}.label-pick{font:inherit;font-size:.9rem;flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:2px;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left}.label-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swatch{flex:none;font-size:.7rem;font-weight:600;width:30px;padding:3px 0;border-radius:4px;text-align:center}.add-label{font:inherit;font-size:.9rem;padding:7px 12px;border:1px dashed var(--border);border-radius:6px;background:transparent;color:var(--text);cursor:pointer}.add-label:hover{border-color:var(--accent)}.clone-dialog{width:min(420px,calc(100vw - 32px));padding:20px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text)}.clone-dialog::backdrop{background:#00000059}.clone-dialog form{display:flex;flex-direction:column;gap:10px}.clone-dialog h2{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.dialog-actions button{font:inherit;padding:8px 14px;border-radius:6px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer}.dialog-actions .primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}.dialog-actions .primary:disabled{opacity:.5;cursor:default}