/* ============================================================================
   WALLPAPIFY — design language: "AFTERGLOW"
   The interface is a colorist's suite at night: the UI is the dark room,
   the imagery is the only light. Dark-only by intent — wallpapers are judged
   on lit screens in dim rooms, so the product meets them there.

   Signatures:
   - void black base, hairline panels, no cards-with-shadows anywhere
   - "lumen": interactive light — primary actions are pure light on dark
   - "glow" #FF5CA8: the single live-signal accent (values, links, focus)
   - one spectral hairline (amber→pink→violet→cyan) reserved for brand moments
   - viewfinder corner-ticks on the stage and primary CTA
   - type = system stack at extreme weights: 200 display vs 700 micro-caps;
     mono is reserved EXCLUSIVELY for pixel numbers
   No webfonts, no frameworks, no build step, zero external requests.
   ============================================================================ */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --void:        #07080b;
  --panel:       #0d0f14;
  --panel-2:     #12151d;
  --panel-3:     #181c26;
  --line:        #1e222d;
  --line-strong: #2c3140;
  --text:        #eef0f6;
  --dim:         #a2a8b8;
  --faint:       #838a9c;
  --lumen:       #f4f5f8;   /* interactive light */
  --lumen-ink:   #0a0b0e;
  --glow:        #ff5ca8;   /* live signal */
  --glow-soft:   rgba(255,92,168,.13);
  --glow-line:   rgba(255,92,168,.45);
  --spectral:    linear-gradient(90deg,#ffb35c 0%,#ff5ca8 34%,#7c6cff 68%,#4cc9f0 100%);

  --r-sm: 8px;
  --r-md: 13px;
  --r-lg: 20px;
  --container: 1200px;
  --pad: clamp(18px, 4vw, 28px);

  --font: ui-sans-serif, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", "Segoe UI Mono", Consolas, monospace;

  color-scheme: dark;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px; line-height:1.6;
  background:var(--void); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; line-height:1.1; letter-spacing:-0.015em; }
h1{ font-weight:200; }
h2{ font-weight:250; }
h3,h4{ font-weight:600; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
svg{ display:block; }
img{ max-width:100%; height:auto; }
::selection{ background:var(--glow); color:#14060d; }
:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; border-radius:4px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--pad); top:-52px; z-index:100;
  background:var(--lumen); color:var(--lumen-ink);
  padding:11px 18px; border-radius:0 0 var(--r-sm) var(--r-sm);
  text-decoration:none; font-size:14px; font-weight:600; transition:top .15s ease;
}
.skip-link:focus{ top:0; }

/* the pixel voice — mono for numbers only */
.mono, .px{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* section tag: spectral tick + caps — replaces any eyebrow pattern */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint); margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:var(--spectral); flex:none;
}
.eyebrow .n{ display:none; }

/* one-time power-on (CSS only, no JS dependency) */
@keyframes power-on{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
main{ animation:power-on .5s ease both; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(7,8,11,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; gap:24px; height:58px;
}
.brand{
  display:flex; align-items:center; gap:0; text-decoration:none;
  font-weight:650; letter-spacing:-0.01em; font-size:16.5px;
}
.brand .mark{ color:var(--text); margin-right:9px; }
.brand .mark .dot{ fill:var(--glow); }
.brand .tld{ color:var(--faint); font-weight:400; }
.nav-toggle{
  display:none; margin-left:auto; width:40px; height:40px; flex:none;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--panel-2); color:var(--text);
  align-items:center; justify-content:center;
}
.nav-toggle[aria-expanded="true"]{ background:var(--lumen); color:var(--lumen-ink); border-color:var(--lumen); }
.site-nav{ margin-left:auto; display:flex; gap:2px; align-items:center; }
.site-nav a{
  text-decoration:none; font-size:13.5px; color:var(--dim);
  padding:7px 13px; border-radius:999px; border:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.site-nav a:hover{ color:var(--text); border-color:var(--line-strong); }
.site-nav a[aria-current="page"]{
  color:var(--text); border-color:var(--line-strong); background:var(--panel-2);
}

/* ==========================================================================
   4. MASTHEAD (compact — the studio is the hero)
   ========================================================================== */
.masthead{ position:relative; }
.masthead .container{ padding-block:clamp(30px, 5vw, 52px) clamp(18px, 3vw, 28px); }
.masthead h1{
  font-size:clamp(30px, 4.6vw, 52px); max-width:24ch; letter-spacing:-0.02em;
}
.masthead h1 strong{ font-weight:600; }
.masthead h1 em{ font-style:normal; color:var(--glow); font-weight:350; }
.masthead .lede{
  margin-top:14px; font-size:clamp(15px, 1.8vw, 17.5px); font-weight:350;
  color:var(--dim); max-width:60ch;
}
.masthead .props{
  margin:20px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:6px 0;
  font-size:12.5px; letter-spacing:.04em; color:var(--faint);
}
.masthead .props li{ display:flex; align-items:center; }
.masthead .props li + li::before{
  content:""; width:3px; height:3px; border-radius:50%;
  background:var(--glow); margin-inline:14px; opacity:.8;
}
.masthead::after{
  content:""; display:block; height:1px; margin-top:clamp(16px,2.5vw,26px);
  background:var(--spectral); opacity:.55;
}

/* page-head for inner pages */
.page-head{ padding-block:clamp(36px, 6vw, 60px) 10px; }
.page-head h1{ font-size:clamp(28px, 4.2vw, 46px); max-width:26ch; }
.page-head .lede{ margin-top:16px; color:var(--dim); max-width:64ch; font-size:16px; font-weight:350; }
.page-head .lede strong{ color:var(--text); font-weight:600; }

/* ==========================================================================
   5. STUDIO — stage + console
   ========================================================================== */
.studio{ padding-block:clamp(18px, 3vw, 30px) 8px; }
.studio-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:18px;
  align-items:start;
}
@media (max-width: 940px){
  .studio-grid{ grid-template-columns:1fr; }
}

/* --- the stage: a viewfinder --- */
.stage{
  position:relative;
  background:#000;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  min-height:440px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* viewfinder corner ticks */
.stage::before, .stage::after{
  content:""; position:absolute; width:18px; height:18px; z-index:4;
  border:0 solid var(--line-strong); pointer-events:none;
  transition:border-color .2s ease;
}
.stage::before{ top:10px; left:10px; border-top-width:2px; border-left-width:2px; border-top-left-radius:6px; }
.stage::after{ bottom:10px; right:10px; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:6px; }
.stage:hover::before, .stage:hover::after{ border-color:var(--glow-line); }
@media (min-width: 941px){
  .stage{ position:sticky; top:74px; height:calc(100vh - 94px); min-height:500px; }
}
.stage canvas{
  max-width:100%; max-height:100%; display:block;
  touch-action:none; cursor:grab;
}
.stage canvas.dragging{ cursor:grabbing; }
.stage-meta{
  position:absolute; left:14px; top:12px; z-index:3;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:11.5px; color:var(--dim);
  background:rgba(0,0,0,.82); border:1px solid var(--line);
  padding:6px 11px; border-radius:999px;
  pointer-events:none; max-width:calc(100% - 28px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stage-hint{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:11.5px; letter-spacing:.06em; color:var(--dim);
  background:rgba(0,0,0,.82); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px; pointer-events:none;
  white-space:nowrap;
}

/* --- empty state --- */
.dropzone{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* `safe` keeps the first item from being clipped if content ever exceeds
     the stage; the sizing rules below should prevent that in the first place */
  justify-content:safe center;
  gap:15px; text-align:center; padding:24px;
  color:var(--dim);
}
.dropzone[hidden]{ display:none; }
.dropzone .dz-frame{
  /* sized by the scarce axis (height), width follows the aspect ratio —
     a fixed width here clipped the frame on short viewports */
  height:min(240px, 30vh); width:auto; aspect-ratio:9/19;
  max-width:38%; flex:0 1 auto; min-height:88px;
  border:1px solid var(--line-strong);
  border-radius:22px; display:flex; align-items:center; justify-content:center;
  color:var(--faint); position:relative;
  box-shadow:0 0 60px rgba(255,92,168,.06) inset;
}
.dropzone .dz-frame::before{
  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:34%; height:4px; border-radius:4px; background:var(--line-strong);
}
.dropzone h2{ font-size:20px; font-weight:500; color:var(--text); letter-spacing:-.01em; }
.dropzone p{ font-size:13.5px; max-width:36ch; color:var(--dim); font-weight:350; }
.dropzone .dz-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.stage.dragover{ border-color:var(--glow); box-shadow:0 0 0 1px var(--glow), 0 0 44px rgba(255,92,168,.18) inset; }
.dz-note{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }

/* --- console (control rail) --- */
.rail{ display:grid; gap:12px; min-width:0; }
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px;
}
.panel > .panel-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); margin-bottom:13px; font-weight:700;
}
.panel > .panel-title .n{
  color:var(--glow); font-family:var(--mono); font-weight:500;
  letter-spacing:0; margin-right:8px;
}

.field{ display:grid; gap:7px; margin-bottom:13px; }
.field:last-child{ margin-bottom:0; }
.field > label, .field > .flabel{
  font-size:13px; font-weight:550; color:var(--text);
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
}
.field .fval{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:12px; color:var(--glow); font-weight:500;
}

select, input[type="text"]{
  width:100%; padding:10px 34px 10px 12px; font:inherit; font-size:14px;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a2a8b8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
select:hover{ border-color:var(--faint); }

/* sliders: hairline track, lumen thumb, glow ring on press */
input[type="range"]{
  width:100%; margin:6px 0 2px; background:transparent;
  -webkit-appearance:none; appearance:none; height:18px;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--line-strong), var(--line-strong));
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--lumen); border:none; margin-top:-6.5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6);
  transition:box-shadow .15s ease;
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px var(--glow-soft), 0 0 0 1px var(--glow-line);
}
input[type="range"]::-moz-range-track{
  height:3px; border-radius:2px; background:var(--line-strong);
}
input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--lumen); border:none;
}
input[type="range"]:hover::-moz-range-thumb{
  box-shadow:0 0 0 4px var(--glow-soft), 0 0 0 1px var(--glow-line);
}
input[type="range"]:disabled{ opacity:.4; }

/* keys (choice chips) */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  border:1px solid var(--line-strong); background:var(--panel-2);
  border-radius:var(--r-sm); padding:6px 12px; font-size:13px;
  color:var(--dim); font-weight:500;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
}
.chip:hover{ color:var(--text); border-color:var(--faint); }
.chip[aria-pressed="true"]{
  background:var(--lumen); color:var(--lumen-ink); border-color:var(--lumen);
  font-weight:600;
}
.chip:disabled{ opacity:.38; cursor:not-allowed; }
.chip .k{
  font-size:10.5px; letter-spacing:.06em; opacity:.72; margin-left:5px;
  text-transform:uppercase;
}

/* toggles */
.toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.toggle-row:last-child{ border-bottom:0; }
.toggle-row .t-label{ font-size:13.5px; font-weight:500; }
.toggle-row .t-sub{ display:block; font-size:11.5px; color:var(--faint); font-weight:400; margin-top:2px; }
.switch{
  position:relative; width:40px; height:23px; flex:none;
  border-radius:999px; border:1px solid var(--line-strong);
  background:var(--panel-3); transition:background .18s ease, border-color .18s ease;
  padding:0;
}
.switch::after{
  content:""; position:absolute; top:3px; left:3px; width:15px; height:15px;
  border-radius:50%; background:var(--faint);
  transition:transform .18s ease, background .18s ease;
}
.switch[aria-checked="true"]{ background:var(--lumen); border-color:var(--lumen); }
.switch[aria-checked="true"]::after{ transform:translateX(17px); background:var(--lumen-ink); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 17px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:transparent; color:var(--text); font-size:14px; font-weight:550;
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{ border-color:var(--faint); background:var(--panel-2); }
.btn--primary{
  position:relative;
  background:var(--lumen); border-color:var(--lumen); color:var(--lumen-ink);
  font-weight:650;
}
.btn--primary:hover{ box-shadow:0 0 0 3px var(--glow-soft), 0 0 24px rgba(255,92,168,.22); }
.btn--ink{
  background:var(--panel-3); border-color:var(--line-strong); color:var(--text);
}
.btn--ink:hover{ border-color:var(--faint); }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-row{ display:flex; gap:8px; }
.btn-row .btn{ flex:1; }

/* batch list */
.batch-list{ display:grid; gap:3px; max-height:230px; overflow:auto; padding-right:2px; }
.batch-item{
  display:flex; align-items:center; gap:9px; padding:6px 8px;
  border-radius:var(--r-sm); font-size:13px; color:var(--dim);
}
.batch-item:hover{ background:var(--panel-2); color:var(--text); }
.batch-item input{ accent-color:var(--glow); width:15px; height:15px; flex:none; }
.batch-item .dim{
  margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:11px; color:var(--faint); white-space:nowrap;
}

/* progress + status */
.progress{ height:4px; border-radius:999px; background:var(--panel-3); overflow:hidden; margin-top:10px; }
.progress > div{ height:100%; width:0%; background:var(--spectral); transition:width .2s ease; }
.status-line{
  font-size:12.5px; color:var(--dim);
  margin-top:10px; min-height:19px; font-weight:400;
}
.status-line.err{ color:var(--glow); }

details > summary.flabel{ color:var(--text); }
details[open] > summary.flabel{ margin-bottom:2px; }

/* ==========================================================================
   6. MARKETING SECTIONS
   ========================================================================== */
.section{ padding-block:clamp(48px, 8vw, 88px); }
.section + .section{ border-top:1px solid var(--line); }
.section h2{ font-size:clamp(26px, 3.6vw, 38px); max-width:26ch; letter-spacing:-0.02em; }
.section h2 strong{ font-weight:600; }
.section .sub{ margin-top:14px; color:var(--dim); max-width:62ch; font-weight:350; font-size:15.5px; }

/* process rail — ghost numerals, no cards */
.process{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 4vw, 44px);
  margin-top:44px;
}
@media (max-width: 860px){ .process{ grid-template-columns:1fr; gap:34px; } }
.step{ position:relative; padding-top:74px; }
.step .ghost{
  position:absolute; top:-10px; left:-4px;
  font-size:72px; font-weight:100; line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px var(--line-strong);
  user-select:none; pointer-events:none;
}
.step h3{ font-size:17px; font-weight:600; }
.step p{ margin-top:9px; font-size:14.5px; color:var(--dim); font-weight:350; max-width:44ch; }
.step p a{ color:var(--glow); }

/* spec ledger — term / description rows */
.spec{ margin-top:40px; border-top:1px solid var(--line); }
.spec-row{
  display:grid; grid-template-columns:minmax(150px, 240px) 1fr; gap:14px 36px;
  padding-block:22px; border-bottom:1px solid var(--line);
}
@media (max-width: 720px){ .spec-row{ grid-template-columns:1fr; gap:8px; } }
.spec-term{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text); padding-top:3px;
}
.spec-term::before{ content:"▸ "; color:var(--glow); }
.spec-desc{ color:var(--dim); font-size:15px; font-weight:350; max-width:72ch; }
.spec-desc a{ color:var(--glow); }
.spec-desc strong{ color:var(--text); font-weight:550; }

/* FAQ ledger */
.faq{ margin-top:34px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; padding:18px 0; font-weight:550; font-size:15.5px;
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  transition:color .15s ease;
}
.faq summary:hover{ color:var(--glow); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; color:var(--faint); font-weight:300; font-size:19px; flex:none;
  transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); color:var(--glow); }
.faq .a{ padding:0 0 20px; color:var(--dim); font-size:14.5px; max-width:72ch; font-weight:350; }
.faq .a a{ color:var(--glow); }

/* cross-link band */
.band{
  margin-top:10px; border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--panel) 0%, var(--void) 100%);
  padding:20px 22px; position:relative; overflow:hidden;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
}
.band::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--spectral);
}
.band .b-copy{ font-size:14.5px; color:var(--dim); max-width:58ch; font-weight:350; }
.band .b-copy strong{ color:var(--text); font-weight:600; }
.band .btn{ margin-left:auto; }
@media (max-width:700px){ .band .btn{ margin-left:0; } }

/* ==========================================================================
   7. SIZES TABLE
   ========================================================================== */
.table-wrap{
  overflow-x:auto; margin-top:24px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel);
}
table.sizes{ border-collapse:collapse; width:100%; min-width:640px; font-size:14px; }
table.sizes th, table.sizes td{
  text-align:left; padding:11px 18px; border-top:1px solid var(--line);
}
table.sizes thead th{
  border-top:0; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); font-weight:700;
}
table.sizes td.dim{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--text);
}
table.sizes td .models{ display:block; color:var(--faint); font-size:12.5px; margin-top:2px; font-weight:350; }
table.sizes a.open{
  font-size:12.5px; color:var(--glow); text-decoration:none; white-space:nowrap; font-weight:550;
}
table.sizes a.open:hover{ text-decoration:underline; }
table.sizes tbody tr{ transition:background .12s ease; }
table.sizes tbody tr:hover{ background:var(--panel-2); }
table.sizes tbody tr:target{ background:var(--glow-soft); }

/* ==========================================================================
   8. PROSE / GUIDE
   ========================================================================== */
.prose{ max-width:72ch; }
.prose h2{ font-size:25px; margin-top:52px; scroll-margin-top:84px; font-weight:350; letter-spacing:-.015em; }
.prose h3{ font-size:18px; margin-top:30px; }
.prose p{ margin-top:15px; color:var(--dim); font-size:15.5px; font-weight:350; }
.prose p strong, .prose li strong{ color:var(--text); font-weight:600; }
.prose p em{ color:var(--text); }
.prose p.muted, .prose li.muted{ color:var(--faint); }
.prose ul, .prose ol{ margin:15px 0 0; padding-left:22px; }
.prose li{ margin-top:9px; font-size:15.5px; color:var(--dim); font-weight:350; }
.prose a{ color:var(--glow); }
.prose .callout{
  margin-top:20px; border:1px solid var(--line-strong);
  border-left:2px solid var(--glow);
  background:var(--panel); border-radius:var(--r-sm);
  padding:15px 18px; font-size:14.5px; color:var(--dim);
}
.prose .callout .mono{
  font-family:var(--font); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--glow); display:block; margin-bottom:7px; font-weight:700;
}
.prose code{
  font-family:var(--mono); font-size:.9em; background:var(--panel-2);
  border:1px solid var(--line); padding:1px 6px; border-radius:5px; color:var(--text);
}
.toc{
  border:1px solid var(--line); background:var(--panel); border-radius:var(--r-md);
  padding:18px 20px; margin-top:28px; max-width:72ch;
}
.toc .t{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); margin-bottom:12px; font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.toc .t::before{ content:""; width:20px; height:2px; border-radius:2px; background:var(--spectral); }
.toc ol{ margin:0; padding-left:20px; }
.toc li{ margin-top:7px; font-size:14.5px; color:var(--dim); }
.toc li::marker{ color:var(--glow); font-family:var(--mono); font-size:12px; }
.toc a{ color:var(--dim); text-decoration:none; }
.toc a:hover{ color:var(--glow); text-decoration:underline; }

/* ==========================================================================
   9. GENERATOR
   ========================================================================== */
.swatches{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.swatch{
  aspect-ratio:1; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  padding:0; overflow:hidden; position:relative; background:none;
  transition:transform .12s ease, border-color .12s ease;
}
.swatch:hover{ transform:translateY(-2px); border-color:var(--faint); }
.swatch[aria-pressed="true"]{
  border-color:var(--lumen);
  box-shadow:0 0 0 2px var(--void), 0 0 0 3.5px var(--lumen);
}
.swatch span{ position:absolute; inset:0; }

/* style keys with live mini previews */
.style-keys{ display:grid; grid-template-columns:repeat(6, 1fr); gap:7px; }
@media (max-width: 420px){ .style-keys{ grid-template-columns:repeat(3, 1fr); } }
.style-key{
  display:grid; gap:6px; justify-items:center;
  background:none; border:none; padding:0; border-radius:var(--r-sm);
}
.style-key canvas{
  width:100%; aspect-ratio:9/16; border-radius:7px;
  border:1px solid var(--line-strong); display:block;
  transition:border-color .12s ease, transform .12s ease;
}
.style-key:hover canvas{ border-color:var(--faint); transform:translateY(-2px); }
.style-key[aria-pressed="true"] canvas{
  border-color:var(--lumen);
  box-shadow:0 0 0 2px var(--void), 0 0 0 3.5px var(--lumen);
}
.style-key .sk-label{ font-size:11.5px; color:var(--dim); font-weight:550; letter-spacing:.03em; }
.style-key[aria-pressed="true"] .sk-label{ color:var(--text); }

/* ==========================================================================
   10. FOOTER — colophon
   ========================================================================== */
.site-footer{ margin-top:84px; position:relative; }
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--spectral); opacity:.5;
}
.site-footer .cols{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px;
  padding-block:44px 30px;
}
.site-footer h4{
  font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint); margin-bottom:14px; font-weight:700;
}
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.site-footer a{ text-decoration:none; color:var(--dim); font-size:14px; transition:color .12s ease; }
.site-footer a:hover{ color:var(--glow); }
.footer-blurb{ color:var(--faint); font-size:13.5px; max-width:34ch; margin-top:12px; font-weight:350; }
.footer-meta{
  border-top:1px solid var(--line);
  padding-block:18px; display:flex; flex-wrap:wrap; gap:8px 18px;
  font-size:11.5px; letter-spacing:.05em; color:var(--faint);
}
.footer-meta a{ color:inherit; }

/* ==========================================================================
   11. ERROR PAGE + MISC
   ========================================================================== */
.err-page{ text-align:center; padding-block:110px; }
.err-page .code{
  font-family:var(--mono); font-size:13px; color:var(--glow); letter-spacing:.3em;
}
.err-page h1{ margin-top:16px; font-size:38px; font-weight:200; }
.err-page p{ margin-top:12px; color:var(--dim); font-weight:350; }
.err-page .btn{ margin-top:28px; }

@media (max-width: 940px){
  .stage{ height:56vh; min-height:400px; }
}
@media (max-width: 860px){
  .site-footer .cols{ grid-template-columns:1fr; gap:28px; }
}
/* hamburger navigation below 720px */
@media (max-width: 719px){
  .nav-toggle{ display:inline-flex; }
  .site-nav{
    position:absolute; top:58px; left:0; right:0; z-index:60;
    display:none; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--void); border-bottom:1px solid var(--line);
    padding:10px var(--pad) 16px;
    box-shadow:0 24px 40px -20px rgba(0,0,0,.7);
  }
  .site-nav.open{ display:flex; }
  .site-nav a{
    padding:13px 14px; font-size:15.5px; border-radius:var(--r-sm);
    border:1px solid transparent;
  }
  .site-nav a[aria-current="page"]{ border-color:var(--line-strong); background:var(--panel-2); }
  .chip{ padding:8px 13px; }
  .panel{ padding:14px; }
  .masthead .container{ padding-block:26px 16px; }
  /* the empty-state must fit the stage box on short phones, never clip */
  .dropzone{ gap:12px; padding:22px 18px; }
  .dropzone .dz-frame{ height:min(200px, 24vh); }
  .dropzone .dz-frame svg{ width:26px; height:26px; }
  .dropzone h2{ font-size:18px; }
  .dropzone p{ font-size:13px; max-width:32ch; }
  .dz-note{ font-size:10.5px; }
  .studio{ padding-bottom:18px; }
  .studio-grid{ gap:16px; }
  .step .ghost{ font-size:58px; top:-8px; }
  .step{ padding-top:58px; }
}
/* bigger touch targets on coarse pointers */
@media (pointer: coarse){
  input[type="range"]::-webkit-slider-thumb{ width:20px; height:20px; margin-top:-8.5px; }
  input[type="range"]::-moz-range-thumb{ width:20px; height:20px; }
  .switch{ width:46px; height:26px; }
  .switch::after{ width:18px; height:18px; }
  .switch[aria-checked="true"]::after{ transform:translateX(19px); }
}

@media print{
  body{ background:#fff; color:#000; }
  .site-header, .site-footer, .stage-hint{ display:none; }
}