/* Layout: slim navigation rail on the left; on the right a header, then a workbench where the live stage and code sit beside a scrolling controls panel, then the support table. 4px spacing scale. */
:root{
  --bg:#f5f6fa; --surface:#ffffff; --surface-2:#f0f2f8; --surface-3:#e4e8f2; --line:#e4e7f0; --line-strong:#cdd3e4;
  --fg:#0e1322; --fg-2:#3b4560; --muted:#69728f;
  --accent:#3a5bff; --accent-2:#2b46d8; --accent-fg:#ffffff; --accent-soft:#eaeeff; --accent-line:#c8d2ff; --mark:#ffb938;
  --ok:#136b42; --ok-bg:#dcf2e6; --no:#a02c2c; --no-bg:#fbe4e4; --warn:#7a4f00; --warn-bg:#fff0cc;
  --code-bg:#0f1527; --code-fg:#d9e2ff; --code-c:#7784ab; --code-p:#8fb4ff; --code-n:#ffc66d; --code-h:#7ee0b0; --code-f:#f49bd0; --code-a:#c9a6ff;
  --dot:#cfd5e5; --stage-bg:#f9fafd;
  --sh-1:0 1px 2px rgb(14 19 34 / .05);
  --sh-2:0 1px 1px rgb(14 19 34 / .05),0 4px 10px -4px rgb(14 19 34 / .1);
  --sh-3:0 1px 2px rgb(14 19 34 / .08),0 18px 44px -14px rgb(14 19 34 / .26);
  --sh-in:inset 0 1px 3px rgb(14 19 34 / .07),inset 0 0 0 1px rgb(14 19 34 / .03);
  --hair:inset 0 1px 0 rgb(255 255 255 / .7);
  --ring:0 0 0 3px var(--accent-soft),0 0 18px -4px color-mix(in srgb,var(--accent) 55%,transparent);
  --cat-l:52%; --cat-c:.17; --cat-sl:96.5%; --cat-sc:.03; --cat-ll:87%; --cat-lc:.08; --cat-h:262;
  --r-s:8px; --r-m:12px; --r-l:16px;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.5,.6,1);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0d16; --surface:#111522; --surface-2:#171c2c; --surface-3:#222940; --line:#212840; --line-strong:#313a5a;
    --fg:#eef1fb; --fg-2:#c3cae3; --muted:#8e98ba;
    --accent:#7d95ff; --accent-2:#6b83f5; --accent-fg:#0a0d16; --accent-soft:#19214a; --accent-line:#2c3a7a;
    --ok:#6fdca1; --ok-bg:#12382a; --no:#ff9b9b; --no-bg:#3d1b22; --warn:#ffd37a; --warn-bg:#3a2d0e;
    --code-bg:#080b16; --dot:#252d4a; --stage-bg:#0e1426;
    --sh-1:0 1px 2px rgb(0 0 0 / .35); --sh-2:0 1px 1px rgb(0 0 0 / .4),0 4px 12px -4px rgb(0 0 0 / .5); --sh-3:0 1px 2px rgb(0 0 0 / .5),0 20px 48px -14px rgb(0 0 0 / .75);
    --sh-in:inset 0 1px 3px rgb(0 0 0 / .45),inset 0 0 0 1px rgb(255 255 255 / .03); --hair:inset 0 1px 0 rgb(255 255 255 / .06);
    --cat-l:80%; --cat-c:.13; --cat-sl:25%; --cat-sc:.06; --cat-ll:40%; --cat-lc:.09;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0d16; --surface:#111522; --surface-2:#171c2c; --surface-3:#222940; --line:#212840; --line-strong:#313a5a;
  --fg:#eef1fb; --fg-2:#c3cae3; --muted:#8e98ba;
  --accent:#7d95ff; --accent-2:#6b83f5; --accent-fg:#0a0d16; --accent-soft:#19214a; --accent-line:#2c3a7a;
  --ok:#6fdca1; --ok-bg:#12382a; --no:#ff9b9b; --no-bg:#3d1b22; --warn:#ffd37a; --warn-bg:#3a2d0e;
  --code-bg:#080b16; --dot:#252d4a; --stage-bg:#0e1426;
  --sh-1:0 1px 2px rgb(0 0 0 / .35); --sh-2:0 1px 1px rgb(0 0 0 / .4),0 4px 12px -4px rgb(0 0 0 / .5); --sh-3:0 1px 2px rgb(0 0 0 / .5),0 20px 48px -14px rgb(0 0 0 / .75);
  --sh-in:inset 0 1px 3px rgb(0 0 0 / .45),inset 0 0 0 1px rgb(255 255 255 / .03); --hair:inset 0 1px 0 rgb(255 255 255 / .06);
  --cat-l:80%; --cat-c:.13; --cat-sl:25%; --cat-sc:.06; --cat-ll:40%; --cat-lc:.09;
  color-scheme:dark;
}
/* category hues — set --cat-h per category, derive the three usable colours here */
:root,[data-cat]{--cat:oklch(var(--cat-l) var(--cat-c) var(--cat-h));--cat-soft:oklch(var(--cat-sl) var(--cat-sc) var(--cat-h));--cat-line:oklch(var(--cat-ll) var(--cat-lc) var(--cat-h))}
[data-cat="shape-borders"]{--cat-h:262}[data-cat="color-backgrounds"]{--cat-h:338}[data-cat="layout"]{--cat-h:195}
[data-cat="text-fonts"]{--cat-h:75}[data-cat="effects"]{--cat-h:300}[data-cat="images-media"]{--cat-h:232}
[data-cat="transforms-motion"]{--cat-h:38}[data-cat="ui-interaction"]{--cat-h:148}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27140%27%20height%3D%27140%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3C/filter%3E%3Crect%20width%3D%27140%27%20height%3D%27140%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E") repeat}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::before{opacity:.22}}
:root[data-theme="dark"] body::before{opacity:.22}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--accent);color:var(--accent-fg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;box-shadow:0 0 20px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
svg{flex:none}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100%}
.side{--s-bg:#0b0e1b;--s-fg:#eef1fb;--s-fg2:#a7b1d2;--s-muted:#6e7899;--s-line:#1b2238;--s-hover:#161d31;--s-active:#1d2647;
  position:sticky;top:env(safe-area-inset-top,0px);align-self:start;height:100vh;max-height:100vh;overflow:auto;padding:24px 16px 32px;
  background:linear-gradient(180deg,#0d1122,var(--s-bg) 40%);color:var(--s-fg);border-right:1px solid var(--s-line);
  scrollbar-width:thin;scrollbar-color:#2b344f transparent}
.side::after{content:"";position:absolute;left:0;right:0;top:0;height:220px;pointer-events:none;background:radial-gradient(120% 80% at 18% 0,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%)}
.side>*{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:12px;padding:0 4px}
.brand .mark{width:36px;height:36px;border-radius:10px;box-shadow:0 4px 12px -2px color-mix(in srgb,var(--accent) 45%,transparent)}
.brand-name .tld{color:var(--accent)}
.foot-mark .tld{color:var(--accent)}
.brand-name{font:700 1.25rem/1.1 var(--font-display);font-variation-settings:'wdth' 84,'opsz' 40;letter-spacing:-.02em}
.brand-sub{margin-top:2px;font:400 .68rem/1.3 var(--font-mono);color:var(--s-muted);white-space:nowrap;letter-spacing:-.02em}
.search{position:relative;margin:24px 0 8px}
.search svg{position:absolute;left:12px;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none}
.side .search svg{color:var(--s-muted)}
.search kbd{position:absolute;right:10px;top:50%;translate:0 -50%;padding:1px 6px;border:1px solid var(--s-line);border-radius:6px;font:500 .7rem var(--font-mono);color:var(--s-muted);background:#121829;pointer-events:none}
.search:focus-within kbd{opacity:0}
#navq{width:100%;height:38px;padding:0 34px 0 36px;border:1px solid var(--s-line);border-radius:var(--r-m);background:#121829;color:var(--s-fg);transition:border-color .15s,background .15s,box-shadow .15s}
#navq::placeholder{color:var(--s-muted)}
#navq:hover{border-color:#2b344f}
#navq:focus{outline:none;background:#161d31;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.nav h3{display:flex;align-items:center;gap:8px;margin:24px 12px 8px;font:600 .64rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--s-muted)}
.nav h3::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cat,var(--accent));box-shadow:0 0 8px var(--cat,var(--accent))}
.nav a{position:relative;display:block;text-decoration:none;width:100%;height:34px;line-height:34px;padding:0 12px;border:0;border-radius:10px;background:none;text-align:left;font-size:.9rem;color:var(--s-fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.nav a:hover{background:var(--s-hover);color:var(--s-fg)}
.nav a[aria-current="page"]{background:var(--s-active);color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.main{min-width:0;padding-block:40px 0;padding-inline:clamp(16px,4vw,56px)}
.main>section{max-width:1280px;margin-inline:auto}
.enter{animation:rise .42s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
.head{display:flex;flex-wrap:wrap;gap:24px 32px;align-items:flex-end;justify-content:space-between}
.head>div:first-child{min-width:0;flex:1 1 380px}
.eyebrow{display:inline-block;margin:0 0 14px;padding:4px 11px;border-radius:99px;background:var(--cat-soft);color:var(--cat);box-shadow:inset 0 0 0 1px var(--cat-line);font:500 .68rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
h1,.h1{margin:0;font:700 clamp(2.1rem,3.8vw,3.1rem)/1.02 var(--font-display);font-variation-settings:'wdth' 84,'opsz' 72;letter-spacing:-.03em;text-wrap:balance}
.lede{margin:12px 0 0;max-width:60ch;font-size:1.0625rem;line-height:1.55;color:var(--muted);text-wrap:pretty}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--sh-1)}
.tools label{display:flex;align-items:center;gap:8px;padding-inline:8px;font-size:.84rem;color:var(--muted)}
.tools .sep{width:1px;height:20px;background:var(--line)}
#selector{width:9.5em;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);font:500 .8rem var(--font-mono);transition:border-color .15s,box-shadow .15s}
#selector:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* ---------- buttons, chips, switches ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--sh-1);font-weight:500;font-size:.85rem;color:var(--fg);transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}
.btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn:active{transform:translateY(1px)}
.btn.icon{width:34px;padding:0;border-color:transparent;box-shadow:none;background:none;color:var(--fg-2)}
.btn.icon:hover{background:var(--surface-2)}
.btn.ghost{border-color:transparent;box-shadow:none;background:none;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--fg)}
.btn.primary{border-color:transparent;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-fg);box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 4px 14px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn.primary:hover{filter:brightness(1.07)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
.chips:empty{display:none}
.chips::before{content:"Presets";margin-right:4px;font:600 .68rem var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.chip{height:30px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:var(--surface);box-shadow:var(--sh-1);font-size:.84rem;color:var(--fg-2);transition:background .15s,border-color .15s,color .15s,transform .15s}
.chip:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}
.chip.mine{display:inline-flex;align-items:center;padding:0;overflow:hidden;border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.chip.mine:hover{transform:none}
.chip-main{height:100%;padding:0 6px 0 14px;border:0;background:none;color:inherit;font-size:.84rem}
.chip-x{height:100%;padding:0 12px 0 4px;border:0;background:none;color:inherit;opacity:.6;font-size:1rem;line-height:1}
.chip-x:hover{opacity:1}
.chip.add{border-style:dashed;color:var(--muted);box-shadow:none}
.chip-input{width:160px;height:30px;padding:0 14px;border:1px solid var(--accent);border-radius:99px;background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft);font-size:.84rem}
.chip-input:focus{outline:none}
.tools input[type=checkbox],.ctl .f.check input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:34px;height:20px;margin:0;border:1px solid var(--line-strong);border-radius:99px;background:var(--surface-3);cursor:pointer;transition:background .2s,border-color .2s}
.tools input[type=checkbox]::after,.ctl .f.check input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .3);transition:transform .2s var(--ease)}
.tools input[type=checkbox]:checked,.ctl .f.check input:checked{background:var(--accent);border-color:var(--accent)}
.tools input[type=checkbox]:checked::after,.ctl .f.check input:checked::after{transform:translateX(14px)}

/* ---------- workbench ---------- */
.bench{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr);gap:24px;margin-top:24px;align-items:stretch}
.left{display:grid;gap:24px;min-width:0;align-content:start}
.panel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2),var(--hair);overflow:hidden}
.panel-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;min-height:50px;padding:8px 8px 8px 20px;border-bottom:1px solid var(--line);font:600 .84rem var(--font-body);color:var(--fg)}
.panel-h .meta{margin-left:8px;font:400 .72rem var(--font-mono);color:var(--muted)}
.panel-h .btn{height:32px;padding:0 12px}
.row{display:flex;gap:4px;align-items:center}
.stage{--stage-h:340px;position:relative;height:var(--stage-h);display:grid;place-items:center;overflow:hidden;box-shadow:var(--sh-in);background-color:var(--stage-bg);background-image:radial-gradient(var(--dot) 1px,transparent 1.6px);background-size:20px 20px}
.stage[data-bg="photo"]{background:radial-gradient(circle at 18% 28%,#ffb347 0 13%,transparent 14%),radial-gradient(circle at 82% 72%,#ff4d8d 0 17%,transparent 18%),radial-gradient(circle at 60% 18%,#18c5b0 0 9%,transparent 10%),linear-gradient(135deg,#2b5fe8,#5b3df0 60%,#ff6a3d)}
.stage .demo{width:140px;height:140px;border-radius:14px;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font:700 2.6rem var(--font-display)}
.stage .item{display:grid;place-items:center;min-width:44px;min-height:44px;padding:4px 10px;border-radius:8px;background:var(--accent);color:var(--accent-fg);font:600 .9rem var(--font-mono)}
.stage .item:nth-child(3n+2){background:#ff6a3d;color:#fff}
.stage .item:nth-child(3n+3){background:#18a888;color:#fff}
.stage-note{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:6px 12px;border-radius:var(--r-s);background:var(--warn-bg);color:var(--warn);font-size:.78rem}
.code{margin:0;padding:16px 20px;min-height:104px;max-height:300px;overflow:auto;background:var(--code-bg);color:var(--code-fg);font:400 .8rem/1.75 var(--font-mono);white-space:pre;tab-size:2;scrollbar-width:thin;scrollbar-color:#3a4570 transparent}
.code.wrap{white-space:pre-wrap;word-break:break-all}
.code i{font-style:normal}
.ph-cap{padding:3px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font:500 .72rem var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.code .c{color:var(--code-c)}.code .p{color:var(--code-p)}.code .n{color:var(--code-n)}.code .h{color:var(--code-h)}.code .f{color:var(--code-f)}.code .a{color:var(--code-a)}

/* ---------- preview contexts ---------- */
/* Two tiers on purpose: layout rules carry the #stage id so they beat each generator's
   preview sizing, while the looks sit one notch lower so the generated CSS wins. */
.cx-pick{display:flex;align-items:center;gap:8px;padding-left:4px}
.cx-lab{font-size:.8rem;color:var(--muted);white-space:nowrap}
.cx-pick select{height:32px;padding:0 30px 0 10px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238a93b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;-webkit-appearance:none;font-size:.82rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cx-pick select:hover{border-color:var(--line-strong)}
.cx-pick select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* layout tier */
#stage .demo.cx{position:relative;width:auto;height:auto;min-width:0;min-height:0;aspect-ratio:auto;font:400 .95rem/1.5 var(--font-body)}
#stage .demo.cx-card{display:grid;gap:9px;align-content:start;align-items:start;justify-items:stretch;width:258px;padding:16px;text-align:left}
#stage .demo.cx-btn{display:inline-grid;place-items:center;padding:13px 26px;font:600 .95rem var(--font-body)}
#stage .demo.cx-input{display:flex;align-items:center;gap:1px;width:min(300px,86%);height:46px;padding:0 15px;font:400 .9rem var(--font-body);text-align:left}
#stage .demo.cx-avatar{display:grid;place-items:center;width:96px;height:96px;font:600 1.7rem var(--font-display)}
#stage .demo.cx-img{width:min(260px,80%);aspect-ratio:3/2;overflow:hidden}
#stage .demo.cx-text{width:min(380px,86%);padding:14px 18px;text-align:left;text-wrap:pretty}
#stage .demo.cx-tile{display:grid;place-items:center;width:74px;height:74px;font:600 1.1rem var(--font-mono)}
#stage .cx-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:90%}

/* looks tier — one notch below the generated CSS, so the effect always wins */
.stage .demo.cx{color:var(--fg)}
.stage .demo.cx-card{border-radius:16px;background:var(--surface)}
.stage .demo.cx-btn{border-radius:11px;background:var(--accent);color:var(--accent-fg)}
.stage .demo.cx-input{border-radius:11px;background:var(--surface);color:var(--fg-2)}
.stage .demo.cx-avatar{border-radius:50%;background:linear-gradient(140deg,#5b3df0,#ff4d8d);color:#fff}
.stage .demo.cx-img{border-radius:14px}
.stage .demo.cx-text{border-radius:12px;background:none}
.stage .demo.cx-tile{border-radius:13px;background:var(--accent);color:var(--accent-fg)}

.cx-card .cx-thumb{display:block;height:64px;border-radius:9px;background:linear-gradient(135deg,#3a5bff,#18c5b0 70%,#ffd36a)}
.cx-card b{font:600 .95rem var(--font-body)}
.cx-card i{display:block;height:8px;border-radius:99px;background:var(--surface-3)}
.cx-card i:last-child{width:64%}
.cx-caret{width:1.5px;height:19px;background:var(--accent);animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.cx-photo{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 24% 26%,#ffd36a 0 16%,transparent 17%),radial-gradient(circle at 78% 70%,#ff4d8d 0 20%,transparent 21%),radial-gradient(circle at 62% 20%,#18c5b0 0 11%,transparent 12%),linear-gradient(145deg,#2b5fe8,#5b3df0 58%,#ff6a3d)}

/* ---------- output format tabs ---------- */
.seg{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);box-shadow:var(--sh-in)}
.seg:empty{display:none}
.seg button{height:26px;padding:0 10px;border:0;border-radius:7px;background:none;font:500 .76rem var(--font-body);color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
.seg button:hover{color:var(--fg)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--sh-1),var(--hair)}
.code-panel .panel-h{gap:8px 12px}
@media (max-width:560px){.seg button{padding:0 7px;font-size:.72rem}.cr{padding:0 8px;font-size:.68rem}}

/* ---------- controls ---------- */
.ctl-panel{position:relative;min-height:540px;display:flex;flex-direction:column}
.ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-content:start;padding:20px;overflow:auto;background:var(--surface-2);box-shadow:var(--sh-in);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.ctl>*{grid-column:1/-1}
.ctl>.half{grid-column:auto}
.ctl h4{display:flex;align-items:center;gap:12px;margin:8px 0 0;font:600 .64rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ctl h4::after{content:"";flex:1;height:1px;background:var(--line)}
.ctl h4:first-child{margin-top:0}
.ctl .f{display:grid;gap:8px;min-width:0}
.f-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.f-top label{font-size:.84rem;font-weight:500;color:var(--fg-2)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
.f-val.pop{animation:pop .22s var(--spring)}
span.f-val:empty{display:none}
.f-val{padding:1px 8px;border-radius:6px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:500 .72rem/1.6 var(--font-mono);color:var(--fg);font-variant-numeric:tabular-nums}
.ctl .f .f-top input.f-edit{flex:none;width:9ch;height:24px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);text-align:right;font:500 .72rem/1.6 var(--font-mono);color:var(--fg);cursor:text;font-variant-numeric:tabular-nums}
.ctl .f .f-top input.f-edit:hover{border-color:var(--line-strong)}
.ctl .f .f-top input.f-edit:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:var(--ring)}
.ctl input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:20px;margin:0;background:transparent;cursor:pointer}
.ctl input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--p,50%),var(--surface-3) var(--p,50%))}
.ctl input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--surface-3)}
.ctl input[type=range]::-moz-range-progress{height:4px;border-radius:99px;background:var(--accent)}
.ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:2px solid var(--accent);border-radius:50%;background:var(--surface);box-shadow:0 1px 4px rgb(0 0 0 / .25),0 0 12px -2px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .18s var(--spring)}
.ctl input[type=range]::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--accent);border-radius:50%;background:var(--surface);box-shadow:0 1px 4px rgb(0 0 0 / .25)}
.ctl input[type=range]:hover::-webkit-slider-thumb,.ctl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}
.ctl input[type=color]{width:100%;height:36px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.ctl input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.ctl input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
.ctl input[type=color]::-moz-color-swatch{border:0;border-radius:7px}
.ctl select,.ref-tools select,.ctl input[type=text],.ctl input[type=number]{width:100%;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.ctl select,.ref-tools select{appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238a93b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}
.ctl input[type=number]{font-variant-numeric:tabular-nums}
.ctl input[type=number]:hover,.ctl input[type=number]:focus{border-color:var(--line-strong)}
.ctl select:hover,.ctl input[type=text]:hover,.ctl input[type=color]:hover,.ref-tools select:hover{border-color:var(--line-strong)}
.ctl select:focus,.ctl input[type=text]:focus,.ctl input[type=number]:focus,.ref-tools select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.ctl .f.check{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:12px}
.ctl .f.check label{flex:1;font-size:.88rem;color:var(--fg-2);cursor:pointer}

/* ---------- the stack ---------- */
#st-sel{width:8em;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);font:500 .8rem var(--font-mono);transition:border-color .15s,box-shadow .15s}
#st-sel:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
#st-layers{display:flex;flex-direction:column;gap:10px;padding:14px;overflow:auto;background:var(--surface-2);box-shadow:var(--sh-in);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.lay{flex:none;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--sh-1),var(--hair);overflow:hidden}
.lay-h{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 0;border-left:3px solid var(--cat,var(--accent))}
.lay-t{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 4px 6px 11px;border:0;background:none;text-align:left;font:600 .88rem var(--font-body);color:var(--fg)}
.lay-t::before{content:"";flex:none;width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .2s var(--ease)}
.lay-t[aria-expanded="true"]::before{transform:rotate(45deg)}
.lay-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lay-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:none;color:var(--muted);font-size:.9rem;line-height:1;transition:background .15s,color .15s}
.lay-ic:hover{background:var(--surface-2);color:var(--fg)}
.lay-ic[disabled]{opacity:.3;cursor:default}
.lay-ic.rm:hover{background:var(--no-bg);color:var(--no)}
.lay .ctl{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px;border-top:1px solid var(--line);background:none;box-shadow:none}
.lay .ctl>.half{grid-column:1/-1}
.lay[hidden]{display:none}
.st-add{flex:none;display:grid;gap:8px}
.st-add select{width:100%;height:38px;padding:0 32px 0 12px;border:1px dashed var(--line-strong);border-radius:var(--r-m);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238a93b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;-webkit-appearance:none;font-size:.86rem;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.st-add select:hover{border-color:var(--accent);color:var(--accent);background-color:var(--accent-soft)}
.st-add select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.st-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:.88rem;text-wrap:pretty}
.st-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 14px;border-top:1px solid var(--line);background:var(--warn-bg);color:var(--warn);font-size:.8rem}
.st-note code{font:500 .78rem var(--font-mono)}

/* ---------- support ---------- */
.compat{margin-top:24px}
.compat-in{padding:20px;display:grid;gap:16px}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font:600 .72rem var(--font-body);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-W{background:var(--ok-bg);color:var(--ok)}.st-N{background:var(--warn-bg);color:var(--warn)}.st-L{background:var(--no-bg);color:var(--no)}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m)}
.panel>.tw{border:0;border-radius:0}
table.ct{width:100%;min-width:720px;border-collapse:collapse;font-size:.88rem}
.ct th{padding:12px 16px;background:var(--surface-2);text-align:left;font:600 .68rem var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.ct td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.ct tbody tr:last-child td{border-bottom:0}
.ct tbody tr{transition:background .15s}
.ct tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.ct td.k{font:500 .82rem var(--font-mono);white-space:nowrap}
.ct td.n{color:var(--muted);min-width:15em;line-height:1.5}
.v{display:inline-block;min-width:3.8em;padding:2px 8px;border-radius:6px;text-align:center;font:500 .76rem var(--font-mono);font-variant-numeric:tabular-nums}
.v.ok{background:var(--ok-bg);color:var(--ok)}.v.no{background:var(--no-bg);color:var(--no)}
.foot-note{margin:0;font-size:.82rem;color:var(--muted)}
.foot-note a{color:var(--accent)}
.foot-note code{padding:1px 6px;border-radius:5px;background:var(--surface-2);font:500 .78rem var(--font-mono);color:var(--fg-2)}
.ref-tools{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 16px}
.ref-tools input[type=search]{flex:1 1 260px;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.ref-tools input[type=search]:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.ref-tools select{width:auto;height:38px;box-shadow:none;border-radius:var(--r-m);font-weight:400;font-size:.9rem}
.ct tr.sn td{background:var(--surface-2)}
.ct tr.sn pre{margin:0;padding:12px 16px;border-radius:var(--r-s);background:var(--code-bg);color:var(--code-fg);white-space:pre-wrap;font:400 .8rem/1.7 var(--font-mono)}
.link-btn{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-weight:500}
.link-btn:hover{text-decoration:underline}

/* ---------- preset gallery ---------- */
.pgal-wrap{margin-top:24px}
.pgal-label{margin-bottom:8px;font:600 .68rem var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pgal{display:flex;gap:12px;overflow-x:auto;margin-inline:-4px;padding:6px 4px 12px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.pcard{position:relative;flex:none;width:124px}
.pbtn{display:grid;gap:6px;width:100%;padding:0;border:0;background:none;text-align:left;color:var(--fg-2)}
.pbtn:focus-visible{outline-offset:4px}
.pthumb{position:relative;display:block;width:100%;aspect-ratio:400/260;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--stage-bg);box-shadow:var(--sh-in);transition:border-color .15s,box-shadow .15s,transform .2s var(--ease)}
.pbtn:hover .pthumb{border-color:var(--cat,var(--accent));box-shadow:0 0 0 3px var(--cat-soft),0 10px 24px -12px var(--cat);transform:translateY(-2px)}
.plabel{display:block;overflow:hidden;font-size:.78rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.th{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pcard.mine .pthumb{border-color:var(--accent-line)}
.pdel{position:absolute;top:5px;right:5px;width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgb(14 19 34 / .72);color:#fff;font-size:.95rem;line-height:1;opacity:0;transition:opacity .15s}
.pcard:hover .pdel,.pdel:focus-visible{opacity:1}
@media (hover:none){.pdel{opacity:1}}
.padd{display:grid;place-items:center;width:100%;aspect-ratio:400/260;padding:0;border:1.5px dashed var(--line-strong);border-radius:10px;background:none;color:var(--muted);font-size:.8rem;font-weight:500;transition:border-color .15s,color .15s,background .15s}
.padd:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pinput{width:100%;aspect-ratio:400/260;padding:0 10px;border:1.5px solid var(--accent);border-radius:10px;background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft);font-size:.8rem}
.pinput:focus{outline:none}
.ctl .add-ctl{height:38px;border:1.5px dashed var(--line-strong);border-radius:10px;background:none;color:var(--muted);font-size:.85rem;font-weight:500;transition:border-color .15s,color .15s,background .15s}
.ctl .add-ctl:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ctl h4.sec .sec-t{display:flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.ctl h4.sec .sec-t::before{content:"";width:6px;height:6px;margin-right:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--ease)}
.ctl h4.sec .sec-t[aria-expanded="true"]::before{transform:rotate(45deg)}
.ctl h4.sec .sec-t:hover{color:var(--fg)}

/* ---------- home ---------- */
a.brand{color:inherit;text-decoration:none;border-radius:10px}
.hero{position:relative;isolation:isolate;display:grid;gap:16px;max-width:780px;padding-block:8px 4px}
.hero::before{content:"";position:absolute;inset:-28px 0 auto 0;height:320px;z-index:-1;pointer-events:none;opacity:.38;filter:blur(60px);
  background:radial-gradient(42% 60% at 12% 32%,oklch(68% .2 262/.85),transparent 70%),radial-gradient(38% 55% at 52% 18%,oklch(72% .17 300/.7),transparent 70%),radial-gradient(44% 62% at 88% 60%,oklch(74% .16 195/.7),transparent 70%);
  animation:aura 22s ease-in-out infinite alternate}
@keyframes aura{to{transform:translate3d(-3%,2%,0) scale(1.12)}}
.hero h1{font-size:clamp(2.4rem,5.4vw,4rem);line-height:.98}
.hero .eyebrow{justify-self:start;margin:0}
.hero .lede{margin:0;font-size:1.125rem}
.hero-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.search.big{flex:1 1 380px;max-width:580px;margin:0}
.search.big svg{left:16px}
.search.big input{width:100%;height:48px;padding:0 16px 0 46px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s}
.search.big input:hover{border-color:var(--line-strong)}
.search.big input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.hero-tools .btn{height:48px;border-radius:14px}
.hero-tools .btn.icon{width:48px}
.catbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.cat{height:32px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:.84rem;color:var(--fg-2);transition:border-color .15s,color .15s,background .15s}
.cat:hover{border-color:var(--accent-line);color:var(--accent)}
.cat[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.cat[data-cat]{--cat-chip:var(--cat)}
.cat[data-cat]:hover{border-color:var(--cat-line);color:var(--cat);background:var(--cat-soft)}
.cat[data-cat]::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--cat);vertical-align:1px}
.cat[aria-pressed="true"]::before{background:var(--bg)}
#home-body{display:grid;gap:48px;margin-top:48px}
.hsec-t{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;font:700 1.45rem/1.2 var(--font-display);font-variation-settings:'wdth' 88,'opsz' 32;letter-spacing:-.015em}
.hsec-n{font:400 .72rem var(--font-mono);letter-spacing:0;color:var(--muted)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.gcard{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-width:0;padding:0;border:1px solid var(--line);border-radius:var(--r-l);background:linear-gradient(180deg,var(--cat-soft),var(--surface) 42%);box-shadow:var(--sh-1),var(--hair);overflow:hidden;text-align:left;color:var(--fg);transition:transform .3s var(--spring),border-color .15s,box-shadow .3s}
.gcard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--cat);opacity:.85}
.gcard:hover{transform:translateY(-4px);border-color:var(--cat-line);box-shadow:var(--sh-3),0 14px 40px -20px var(--cat)}
.gname{transition:color .15s}.gcard:hover .gname{color:var(--cat)}
.gcat{color:var(--cat)!important;font-weight:500}
@media (min-width:900px){
  .ggrid.bento>:first-child{grid-column:span 2;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .ggrid.bento>:first-child .gthumb{grid-row:1/3;aspect-ratio:auto;min-height:230px;border-bottom:0;border-right:1px solid var(--line)}
  .ggrid.bento>:first-child .gbody{align-content:end;padding:24px 22px 10px}
  .ggrid.bento>:first-child .gname{font-size:1.5rem}
  .ggrid.bento>:first-child .gdesc{-webkit-line-clamp:4;line-clamp:4;font-size:.9rem}
  .ggrid.bento>:first-child .gfoot{padding:0 22px 22px}
}
.gcard:focus-visible{outline-offset:3px;border-radius:var(--r-l)}
.gthumb{position:relative;display:block;aspect-ratio:400/260;overflow:hidden;border-bottom:1px solid var(--line);background:var(--stage-bg);box-shadow:var(--sh-in)}
.gbody{display:grid;align-content:start;gap:4px;padding:16px 16px 12px}
.gname{font:700 1.05rem/1.2 var(--font-display);font-variation-settings:'wdth' 90,'opsz' 24;letter-spacing:-.01em}
.gdesc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:.84rem;line-height:1.45;color:var(--muted)}
.gfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:0 16px 16px}
.gcat{font:400 .7rem var(--font-mono);color:var(--muted)}
.empty{margin:0;color:var(--muted)}

/* ---------- crawlable copy: the definition, the full index and the FAQ ---------- */
.hero-def{max-width:72ch;margin:0;font-size:.95rem;line-height:1.7;color:var(--muted);text-wrap:pretty}
.seo-index{margin-top:48px}
.seo-index h2,.seo-faq h2{margin:0 0 8px;font:700 1.45rem/1.2 var(--font-display);font-variation-settings:'wdth' 88,'opsz' 32;letter-spacing:-.015em}
.seo-index h3{margin:24px 0 8px;font:600 .68rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--cat,var(--muted))}
.seo-index ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:4px 24px;margin:0;padding:0;list-style:none}
.seo-index li{font-size:.88rem;line-height:1.6;color:var(--muted)}
.seo-index a{color:var(--fg);font-weight:500;text-decoration:none;border-bottom:1px solid var(--line-strong)}
.seo-index a:hover{color:var(--accent);border-color:var(--accent)}
.seo-faq{margin-top:64px;max-width:860px}
.faq-list{display:grid;gap:8px;margin-top:16px}
.seo-faq details{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--sh-1),var(--hair)}
.seo-faq summary{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;list-style:none}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:"";flex:none;margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s var(--ease)}
.seo-faq details[open] summary::after{transform:rotate(225deg)}
.seo-faq summary h3{margin:0;font:600 .95rem/1.4 var(--font-body)}
.seo-faq details p{margin:0;padding:0 18px 16px;max-width:70ch;font-size:.9rem;line-height:1.7;color:var(--muted);text-wrap:pretty}
.seo-faq details:hover{border-color:var(--line-strong)}

/* ---------- per-page editorial copy ---------- */
.seo-copy{max-width:860px;margin-top:72px}
.seo-copy h2{margin:48px 0 12px;font:700 1.45rem/1.2 var(--font-display);font-variation-settings:'wdth' 88,'opsz' 32;letter-spacing:-.015em}
.seo-copy h2:first-child{margin-top:0}
.seo-copy h2 code{font:600 1.2rem var(--font-mono);color:var(--cat,var(--accent))}
.seo-lede{margin:0;font-size:1.0625rem;line-height:1.7;color:var(--fg-2);text-wrap:pretty}
.seo-lede code{padding:2px 7px;border-radius:6px;background:var(--surface-2);font:500 .92rem var(--font-mono);color:var(--fg)}
.syn{margin:0 0 20px;padding:16px 20px;border-radius:var(--r-m);overflow-x:auto;background:var(--code-bg);color:var(--code-p);font:400 .88rem/1.6 var(--font-mono)}
.note-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.note-card{padding:18px;border:1px solid var(--line);border-left:3px solid var(--cat,var(--accent));border-radius:var(--r-m);background:var(--surface);box-shadow:var(--sh-1),var(--hair)}
.note-card h3{margin:0 0 7px;font:600 .95rem/1.35 var(--font-body)}
.note-card p{margin:0;font-size:.88rem;line-height:1.65;color:var(--muted);text-wrap:pretty}
.seo-copy .seo-faq{margin-top:48px}
.seo-copy .seo-faq h2{margin-top:0}
.col-list{columns:2;column-gap:32px;margin:0;padding:0 0 0 18px}
.col-list li{font-size:.9rem;line-height:1.75;color:var(--fg-2);break-inside:avoid}
@media (max-width:620px){.col-list{columns:1}}
.rel-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.rel-list li{font-size:.9rem;line-height:1.6;color:var(--muted)}
.rel-list a{color:var(--fg);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-strong)}
.rel-list a:hover{color:var(--accent);border-color:var(--accent)}
.seo-copy .foot-note{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}

/* ---------- site footer ---------- */
/* keeps the navigation rail's dark palette in both themes, so it reads as one frame */
.site-foot{--f-fg:#eef1fb;--f-fg2:#a7b1d2;--f-muted:#7b85a6;--f-line:#222a44;
  max-width:1280px;margin:96px auto 0;padding:44px 40px 32px;border-radius:var(--r-l) var(--r-l) 0 0;
  background:linear-gradient(180deg,#0d1122,#0b0e1b 60%);color:var(--f-fg2);box-shadow:0 -1px 0 var(--f-line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px 32px}
.foot-brand p{margin:0 0 14px;max-width:46ch;font-size:.9rem;line-height:1.65;text-wrap:pretty}
.foot-mark{display:flex;align-items:center;gap:11px;margin-bottom:16px;color:var(--f-fg);font:700 1.3rem/1 var(--font-display);font-variation-settings:'wdth' 84,'opsz' 40;letter-spacing:-.02em}
.foot-mark svg{width:30px;height:30px;border-radius:9px;box-shadow:0 4px 14px -3px color-mix(in srgb,var(--accent) 60%,transparent)}
.foot-by{color:var(--f-muted);font-size:.85rem!important}
.foot-by a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.foot-by a:hover{border-color:var(--accent)}
.foot-by strong{color:inherit;font-weight:600}
.foot-mail{font:400 .82rem var(--font-mono);color:var(--f-fg2);user-select:all}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.foot-col h2{margin:0 0 4px;font:600 .68rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--f-fg)}
.foot-col a{color:var(--f-fg2);text-decoration:none;font-size:.9rem;border-radius:4px;transition:color .15s,transform .15s var(--ease)}
.foot-col a:hover{color:var(--f-fg);transform:translateX(2px)}
.foot-col a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.foot-bar{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid var(--f-line)}
.foot-bar p{margin:0;font-size:.82rem;color:var(--f-muted)}
#v-gen:not([hidden]) ~ .site-foot{padding-bottom:92px}
@media (max-width:899px){
  .site-foot{margin-top:64px;padding:36px 24px 28px;border-radius:var(--r-l) var(--r-l) 0 0}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-bar{flex-direction:column;gap:6px}
}

/* ---------- dock ---------- */
.dock{box-shadow:var(--sh-3);position:sticky;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;margin-top:24px;padding:10px 10px 10px 20px;border:1px solid var(--line);border-radius:var(--r-l);background:color-mix(in srgb,var(--surface) 95%,transparent);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:var(--sh-2)}
.dock-sup{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;min-width:0}
.dk{display:inline-flex;align-items:center;gap:8px}
.dk-n{font-size:.8rem;color:var(--muted)}
.dock .short{display:none}
.dock .btn.primary{height:36px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:10;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:var(--fg);color:var(--bg);font-size:.875rem;font-weight:500;box-shadow:0 12px 32px -8px rgb(0 0 0 / .4);opacity:0;translate:-50% 12px;pointer-events:none;transition:opacity .2s,translate .25s var(--ease)}
.toast.on{opacity:1;translate:-50% 0}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  .bench{grid-template-columns:minmax(0,1fr)}
  .left{display:contents}
  .pv-panel{position:sticky;top:env(safe-area-inset-top,0px);z-index:4;order:0;box-shadow:0 12px 28px -12px rgb(14 19 34 / .35)}
  .ctl-panel{order:1;min-height:0}
  .code-panel{order:2}
  .stage{--stage-h:min(36vh,280px)}
}
@media (min-width:1100px){
  .ctl-panel>.ctl,.ctl-panel>#st-layers{position:absolute;inset:50px 0 0 0}
}
@media (max-width:899px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--s-line);padding:16px}
  .side::after{height:100%}
  .search{margin:16px 0 8px}
  .search kbd{display:none}
  .nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav .grp{display:contents}
  .nav h3{display:none}
  .nav a{width:auto;height:32px;line-height:30px;flex:none;padding:0 14px;border:1px solid var(--s-line);border-radius:99px;background:#121829}
  .nav a[aria-current="page"]::before{display:none}
  .main{padding-block:24px 0}
  .dock{padding-left:12px}
  .tools{width:100%;flex-wrap:nowrap}
  .tools .sep{display:none}
  .tools label:first-child{flex:1;min-width:0}
  #selector{flex:1;min-width:0;width:auto}
}
@media (max-width:640px){
  .pcard{width:108px}
  .dock .dk{display:none}
  .dock #dock-details{display:none}
  .dock{flex-wrap:nowrap;justify-content:space-between}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}