:root{color-scheme:light;--bg:#f6f7f9;--surface:#fff;--surface-raised:#fff;--surface-sunken:#f0f2f5;--border:#dfe3e8;--border-strong:#c3c9d1;--text:#16191d;--text-muted:#5c6672;--text-faint:#8b94a0;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-soft:#e8efff;--accent-text:#fff;--danger:#c0392b;--danger-soft:#fdecea;--success:#15803d;--warning:#b45309;--highlight:#fef3c7;--radius:7px;--radius-sm:5px;--gap:0.75rem;--shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);--shadow-lg:0 8px 24px rgba(16,24,40,.14);--viewport-bg:#fff;--grid-line:#8fb4ff;--sidebar-width:340px}:root[data-theme=dark]{color-scheme:dark;--bg:#14171b;--surface:#1c2025;--surface-raised:#23282f;--surface-sunken:#101317;--border:#2f3641;--border-strong:#454e5b;--text:#e8ebef;--text-muted:#a3adba;--text-faint:#78828f;--accent:#4b86f5;--accent-hover:#6b9cf8;--accent-soft:#1e2a41;--accent-text:#0d1117;--danger:#f0776a;--danger-soft:#3a211f;--success:#4ade80;--warning:#fbbf24;--highlight:#3a3216;--shadow:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.45);--shadow-lg:0 10px 30px rgba(0,0,0,.6);--viewport-bg:#1a1e24;--grid-line:#3b5a8a}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#14171b;--surface:#1c2025;--surface-raised:#23282f;--surface-sunken:#101317;--border:#2f3641;--border-strong:#454e5b;--text:#e8ebef;--text-muted:#a3adba;--text-faint:#78828f;--accent:#4b86f5;--accent-hover:#6b9cf8;--accent-soft:#1e2a41;--accent-text:#0d1117;--danger:#f0776a;--danger-soft:#3a211f;--success:#4ade80;--warning:#fbbf24;--highlight:#3a3216;--shadow:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.45);--shadow-lg:0 10px 30px rgba(0,0,0,.6);--viewport-bg:#1a1e24;--grid-line:#3b5a8a}}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}h1{font-size:1.5rem;letter-spacing:-.01em}h2{font-size:1.15rem}h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0 0 .6rem}button,input,select,textarea{font:inherit;color:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.42em .85em;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text);font-size:.875rem;line-height:1.3;cursor:pointer;white-space:nowrap;transition:background .12s ease,border-color .12s ease,color .12s ease}.btn:hover:not(:disabled){background:var(--surface-sunken);border-color:var(--text-faint)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:focus-visible,.input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-danger{color:var(--danger);border-color:var(--border)}.btn-danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger)}.btn-ghost{background:transparent;border-color:transparent}.btn-ghost:hover:not(:disabled){background:var(--surface-sunken);border-color:transparent}.btn-sm{padding:.22em .5em;font-size:.78rem}.btn-icon{padding:.25em .45em;line-height:1}.btn-toggle[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}.input,input[type=number],input[type=text],select{padding:.38em .55em;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.875rem;min-width:0}input[type=range]{accent-color:var(--accent)}input[type=color]{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);padding:2px;height:2rem}.field{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted)}.field .input,.field select{flex:1 1}.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.muted{color:var(--text-muted);font-size:.8rem;line-height:1.5}.faint{color:var(--text-faint);font-size:.75rem}.danger-text{color:var(--danger)}.page{max-width:940px;margin:0 auto;padding:2rem 1.25rem 4rem}.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.section{margin-bottom:1.5rem}.section-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap}.list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}.list>li+li{border-top:1px solid var(--border)}.list-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .85rem}.list-row:hover{background:var(--surface-sunken)}.empty{padding:1.25rem;text-align:center;color:var(--text-muted);font-size:.875rem;border:1px dashed var(--border-strong);border-radius:var(--radius)}.editor{display:grid;grid-template-columns:var(--sidebar-width) 1fr;height:100dvh;overflow:hidden}.editor-side{overflow-y:auto;padding:1rem;border-right:1px solid var(--border);background:var(--surface)}.editor-view{position:relative;min-width:0;background:var(--viewport-bg)}.editor-toggle{display:none}.panel{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem}.panel+.panel{margin-top:.5rem}.tree{list-style:none;margin:0;padding:0;font-size:.85rem}.tree .tree{margin-left:.75rem;border-left:1px solid var(--border);padding-left:.35rem}.tree-row{gap:.25rem;padding:.12rem 0}.tree-label,.tree-row{display:flex;align-items:center}.tree-label{flex:1 1;gap:.4rem;padding:.25rem .4rem;border:1px solid transparent;border-radius:var(--radius-sm);background:none;text-align:left;cursor:pointer;color:var(--text);min-width:0}.tree-label:hover{background:var(--surface-sunken)}.tree-label.is-selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}.tree-label.is-picked{background:var(--highlight);border-color:var(--warning);color:var(--text);font-weight:600}.tree-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-twisty{width:1.15rem;border:none;background:none;color:var(--text-faint);cursor:pointer;font-size:.7rem;padding:0;line-height:1}.tree-twisty.is-empty{visibility:hidden}.swatch{width:.6rem;height:.6rem;border-radius:2px;flex:none}.badge{font-size:.68rem;padding:.1rem .35rem;border-radius:999px;background:var(--surface-sunken);border:1px solid var(--border);color:var(--text-muted);white-space:nowrap}.viewport-surface{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.viewport-surface input,.viewport-surface textarea{-webkit-user-select:text;-moz-user-select:text;user-select:text}@media (pointer:coarse){input,select,textarea{font-size:max(16px,1em)}}.viewport-toolbar{position:absolute;top:8px;right:8px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:70%;z-index:2}.viewport-btn{background:rgba(15,18,22,.72);color:#fff;border:1px solid hsla(0,0%,100%,.12);border-radius:var(--radius-sm);padding:.3em .65em;font-size:.78rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap}.viewport-btn:hover{background:rgba(15,18,22,.88)}.viewport-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}.viewport-legend{bottom:8px;display:flex;gap:10px;background:rgba(15,18,22,.6);padding:4px 10px;font-size:.7rem;pointer-events:none}.viewport-legend,.viewport-note{position:absolute;left:8px;color:#fff;border-radius:var(--radius-sm);z-index:2}.viewport-note{top:8px;max-width:min(80%,30rem);background:rgba(15,18,22,.78);padding:.35rem .7rem;font-size:.78rem}@media (max-width:820px){.editor{grid-template-columns:1fr;position:relative}.editor-view{height:100dvh}.editor-side{position:absolute;inset:0 auto 0 0;width:min(88vw,var(--sidebar-width));z-index:5;box-shadow:var(--shadow-lg);transform:translateX(-102%);transition:transform .2s ease;padding-bottom:5rem}.editor.is-open .editor-side{transform:none}.editor-toggle{display:inline-flex;position:absolute;left:8px;bottom:8px;z-index:6;box-shadow:var(--shadow-lg)}.editor.is-open .editor-toggle{left:auto;right:8px}.viewport-toolbar{max-width:calc(100% - 16px)}.viewport-legend{left:auto;right:8px}.page{padding:1.25rem 1rem 3rem}.sketch-prompt{position:absolute!important;top:auto!important;left:0!important;right:0!important;bottom:calc(52px + env(safe-area-inset-bottom, 0px))!important;transform:none!important;display:flex;justify-content:center;pointer-events:none}.sketch-prompt>*{position:static!important;transform:none!important;pointer-events:auto}}