:root{--bg:#090c12;--surface-lowest:#090d13;--surface:#0c1017;--surface-low:#0d121a;--surface-raised:#111721;--surface-high:#111924;--surface-highest:#1a2633;--line-soft:#17202b;--line:#273241;--line-strong:#314154;--outline:#3b566f;--crosshair:#536170;--text:#e7edf5;--muted:#8c98a8;--faint:#596779;--accent:#60a5fa;--on-accent:#fff;--highlight:#facc15;--green:#22c55e;--red:#ef4444;--amber:#f59e0b;--c1:#60a5fa;--c2:#f59e0b;--c3:#c084fc;--c4:#2dd4bf;--c5:#fb7185;--c6:#a3e635;--c7:#a78bfa;--c8:#facc15;--c9:#64748b;--shape-s:6px;--shape-m:10px;--shape-l:16px;--glass-fill:color-mix(in srgb,var(--surface) 72%,transparent);--glass-fill-nested:color-mix(in srgb,var(--surface-high) 70%,transparent);--glass-edge:color-mix(in srgb,var(--line) 75%,transparent);--glass-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),0 18px 48px -28px #000}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{color:var(--text);font:13px 'JetBrains Mono',ui-monospace,monospace;overflow-x:hidden;background:radial-gradient(55vmax 45vmax at 0 0,color-mix(in srgb,var(--accent) 15%,transparent),transparent 65%),radial-gradient(45vmax 45vmax at 100% 100%,color-mix(in srgb,var(--c3) 11%,transparent),transparent 65%),var(--bg)}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}.app-shell{min-height:100vh}.topbar{align-items:center;background:color-mix(in srgb,var(--surface-lowest) 88%,transparent);border-bottom:1px solid var(--line);display:flex;gap:20px;min-height:56px;padding:0 24px}.wordmark{font-size:17px;font-weight:700;letter-spacing:-.8px;white-space:nowrap}.primary-nav{align-self:stretch;display:flex;flex:1;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:none}.primary-nav a{align-items:center;color:var(--muted);display:flex;font-size:11px;padding:0 10px;white-space:nowrap}.primary-nav a:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent)}.main-content{margin:0 auto;max-width:900px;padding:30px 24px}.page-head{margin-bottom:18px}.eyebrow{color:var(--faint);font-size:10px;letter-spacing:1.2px;margin:0 0 8px;text-transform:uppercase}h1,h2,h3{letter-spacing:-.5px;margin:0 0 12px}h1{font-size:25px}h2{font-size:18px}h3{font-size:14px}p{line-height:1.6}.muted{color:var(--muted)}.panel{background:var(--glass-fill);border:1px solid var(--glass-edge);border-radius:var(--shape-l);box-shadow:var(--glass-shadow);margin:12px 0;padding:20px}.panel--narrow{margin:7vh auto;max-width:410px}.panel>p:first-child{margin-top:0}.stack{display:grid;gap:12px}.split{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.row{align-items:center;display:flex;flex-wrap:wrap;gap:9px}.status{background:color-mix(in srgb,var(--green) 14%,transparent);border:1px solid color-mix(in srgb,var(--green) 45%,transparent);border-radius:99px;color:var(--text);font-size:11px;padding:4px 9px}label{color:var(--muted);display:grid;font-size:11px;gap:6px}input,select,textarea{background:var(--glass-fill-nested);border:1px solid var(--glass-edge);border-radius:var(--shape-m);color:var(--text);font:inherit;min-height:38px;padding:9px 10px;width:100%}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}button,.button{background:var(--glass-fill-nested);border:1px solid var(--glass-edge);border-radius:var(--shape-m);color:var(--text);cursor:pointer;font:inherit;font-size:11px;min-height:36px;padding:8px 11px}button:hover,.button:hover{border-color:var(--accent);color:var(--text)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--highlight);outline-offset:2px}.button--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}.button--danger{border-color:color-mix(in srgb,var(--red) 60%,var(--line));color:var(--red)}form{display:grid;gap:12px}form .row{margin-top:3px}table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid var(--line-soft);padding:10px;text-align:left}th{color:var(--muted);font-size:10px;font-weight:500;text-transform:uppercase}.table-wrap{overflow-x:auto}.skin-presets{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.preset{align-items:center;display:grid;gap:9px;grid-template-columns:64px 1fr}.preset img{border:1px solid var(--line);border-radius:var(--shape-s)}
/* AlgoHQ's theme picker, retained verbatim in structure and behaviour. */
.theme-picker{flex-shrink:0;margin-left:auto;position:relative}.theme-picker__trigger{background:transparent;border:1px solid var(--line);border-radius:var(--shape-m);color:var(--muted);cursor:pointer;font-size:13px;height:28px;min-height:0;padding:0;width:30px}.theme-picker__trigger:hover,.theme-picker__trigger[aria-expanded="true"]{border-color:var(--outline);color:var(--text)}.theme-picker__panel{background:color-mix(in srgb,var(--surface-low) 82%,transparent);border:1px solid var(--line-strong);border-radius:var(--shape-l);box-shadow:0 14px 34px #0009;padding:10px;position:absolute;right:0;top:36px;width:232px;z-index:30}.theme-picker__title{font-size:11px;font-weight:600;margin-bottom:8px}.theme-picker__title small{color:var(--faint);font-size:9px;font-weight:400;margin-left:4px}.theme-picker__modes{display:grid;gap:4px;grid-template-columns:1fr 1fr;margin-bottom:10px}.theme-picker__modes button{background:var(--surface);border:1px solid var(--line);border-radius:var(--shape-m);color:var(--muted);font-size:10px;min-height:0;padding:5px}.theme-picker__modes button[aria-pressed="true"]{border-color:var(--accent);color:var(--text)}.theme-picker__modes button:disabled{cursor:default;opacity:.45}.theme-picker__swatches{display:grid;gap:7px;grid-template-columns:repeat(5,1fr)}.theme-picker__swatch{aspect-ratio:1;border:2px solid transparent;border-radius:50%;cursor:pointer;outline:1px solid var(--line);padding:0;position:relative}.theme-picker__swatch[aria-pressed="true"]{border-color:var(--text);outline-color:var(--text)}.theme-picker__swatch:disabled{cursor:default}.theme-picker__swatch--custom{align-items:center;background:var(--surface);color:var(--muted);display:flex;justify-content:center;overflow:hidden}.theme-picker__swatch--custom input{cursor:pointer;inset:0;opacity:0;position:absolute}.theme-picker__note{color:var(--muted);font-size:10px;margin:8px 0 0}.theme-picker__note--error{color:var(--red)}
@media(max-width:640px){.topbar{gap:10px;padding:0 12px}.wordmark{font-size:15px}.primary-nav a{padding:0 7px}.main-content{padding:20px 14px}.panel{padding:15px}.panel--narrow{margin:4vh auto}h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- skin builder ---- */
.sb-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}@media(min-width:900px){.sb-layout{grid-template-columns:minmax(0,1fr) 300px}}
.sb-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}.sb-sep{width:1px;align-self:stretch;background:var(--line)}
.sb-btn{background:var(--surface-high);border:1px solid var(--line);border-radius:8px;color:var(--text);cursor:pointer;font:inherit;font-size:12px;padding:7px 10px}.sb-btn:disabled{opacity:.4;cursor:default}
.sb-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.sb-file{position:relative;display:inline-block;overflow:hidden}.sb-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sb-stage{position:relative;width:100%;max-width:512px;aspect-ratio:1;touch-action:none;border:1px solid var(--line);border-radius:8px;overflow:hidden;background-color:var(--surface-low);background-image:linear-gradient(45deg,var(--surface-high) 25%,transparent 25%,transparent 75%,var(--surface-high) 75%),linear-gradient(45deg,var(--surface-high) 25%,transparent 25%,transparent 75%,var(--surface-high) 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.sb-stage canvas{position:absolute;inset:0;width:100%;height:100%}.sb-canvas{image-rendering:pixelated;cursor:crosshair;touch-action:none}.sb-guides,.sb-grid{pointer-events:none}
.sb-box{margin-bottom:14px}.sb-box h2{font-size:13px;margin:0 0 8px}.sb-palette,.sb-recent{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.sb-sw{width:22px;height:22px;border-radius:5px;border:1px solid var(--line-strong);background:var(--c);cursor:pointer;padding:0}
#sb-color{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface-high);padding:2px}
.sb-previews{display:flex;gap:18px;align-items:flex-end}.sb-previews canvas{width:96px;height:192px;image-rendering:pixelated;background:var(--surface-low);border:1px solid var(--line);border-radius:8px}
.sb-radio{display:block;font-size:13px;margin:4px 0}.sb-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.sb-thumb{background:var(--surface-low);border:1px solid var(--line);border-radius:8px;padding:2px;cursor:pointer}.sb-thumb img{display:block;image-rendering:pixelated}
.sb-save{margin-right:8px}.sb-status{font-size:12px;min-height:1.4em;margin:10px 0 0;color:var(--muted)}.sb-status.sb-bad{color:var(--red)}
.sb-radio{display:flex;align-items:center;gap:8px}.sb-radio input{width:auto;height:auto;margin:0;flex:none}