/* Aesthetic+ — the interface of a design tool has to be worth looking at.
   An editorial studio rather than a dashboard: a display serif against a quiet
   grotesk, warm paper and ink, one terracotta accent, hairlines instead of
   boxes, and a dark mode that is a designed palette rather than an inversion.
   Fonts: Instrument Serif (display), Geist (interface), Geist Mono (numbers) —
   every stack falls back to system faces, so the app still reads offline. */
:root{
  --ink:#1b1916; --ink-2:#4a453f; --muted:#776f65; --line:#e4ddd2; --line-2:#eee9e1;
  --bg:#f5f2ec; --surface:#fffdfa; --surface-2:#f4f0e9;
  --accent:#c4552d; --accent-bright:#e8734a; --accent-ink:#fffdfa; --accent-soft:#f8e8df;
  --good:#2f7d57; --warn:#a36810; --bad:#b93b30;
  --radius:20px; --radius-sm:12px;
  --shadow-1:0 1px 2px rgba(62,44,26,.05), 0 2px 8px rgba(62,44,26,.04);
  --shadow-2:0 18px 48px -12px rgba(62,44,26,.18), 0 4px 12px rgba(62,44,26,.06);
  --step--1:13px; --step-0:15px; --step-1:18px; --step-2:26px; --step-3:clamp(36px,4.4vw,56px); --step-4:clamp(46px,6.6vw,92px);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:40px; --space-7:64px;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Geist",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#f1ece4; --ink-2:#c6beb3; --muted:#978e83; --line:#2e2a26; --line-2:#252220;
    --bg:#12110f; --surface:#1a1816; --surface-2:#211f1c;
    --accent:#ef8b5e; --accent-bright:#ef8b5e; --accent-ink:#1a1411; --accent-soft:#2f2019;
    --good:#5cbf8e; --warn:#e0a54a; --bad:#ee7063;
    --shadow-1:0 1px 2px rgba(0,0,0,.35);
    --shadow-2:0 22px 56px -16px rgba(0,0,0,.7), 0 4px 14px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100dvh;color:var(--ink);font:var(--step-0)/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 520px at 8% -8%, color-mix(in srgb,var(--accent-bright) 11%,transparent), transparent 70%),
    radial-gradient(700px 420px at 100% 0%, color-mix(in srgb,var(--accent-bright) 5%,transparent), transparent 70%),
    var(--bg);
  background-repeat:no-repeat}
/* Grain: paper, not a flat fill. Fixed, inert, and too faint to read as texture on its own. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background-image:var(--grain);
  opacity:.05;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body::after{opacity:.07;mix-blend-mode:screen} }
::selection{background:color-mix(in srgb,var(--accent-bright) 26%,transparent);color:var(--ink)}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.012em;text-wrap:balance}
p{margin:0 0 var(--space-3);text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:var(--step--1)}
.nom{margin-bottom:var(--space-5);max-width:78ch}
.row{display:flex;align-items:center;flex-wrap:wrap}
.row.gap{gap:var(--space-3)}
.row.between{justify-content:space-between;width:100%}
.top{margin-top:var(--space-5)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- app bar ---- */
.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--space-5);
  padding:14px 32px;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.brandmark{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.brandmark .mark{width:38px;height:38px;border-radius:11px;background:var(--ink);color:var(--bg);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font:400 24px/1 var(--serif);letter-spacing:-.02em;padding-top:2px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bg) 10%,transparent), 0 6px 16px -6px rgba(62,44,26,.45)}
.brandmark strong{display:block;font:400 24px/1 var(--serif);letter-spacing:-.01em}
.brandmark span{display:block;font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap}
/* More specific than the tagline rule above and its phone override, which
   would otherwise drop the "+" under the A, or hide it. */
.brandmark .mark span{display:inline;font-size:inherit;margin:0 0 0 1px;color:var(--accent-bright);font-style:italic}
@media (max-width:1480px){ .brandmark strong + span{display:none} }
.tabs{display:flex;gap:2px;margin-left:auto}
.tabs button{position:relative;border:0;background:transparent;padding:8px 13px;border-radius:9px;cursor:pointer;color:var(--muted);
  font-size:14px;font-weight:500;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)}
.tabs button:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;border-radius:2px;background:var(--accent-bright)}
.pills{display:flex;gap:var(--space-2);align-items:center;font-size:12px;color:var(--muted);flex:0 0 auto}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:99px;white-space:nowrap;
  background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);font-weight:500}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5}
.pill.ok::before{background:var(--good);opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent)}
.pill.bad{color:var(--bad)} .pill.bad::before{background:var(--bad);opacity:1}
.pill.warn{color:var(--warn)} .pill.warn::before{background:var(--warn);opacity:1}
/* Below this the status pills start wrapping to three lines and push the whole
   bar out of shape. The tabs are what the bar is for; the pills are status. */
@media (max-width:1180px){ .pills .pill:not(.bad):not(.warn){display:none} }
@media (max-width:900px){
  .appbar{flex-wrap:wrap;gap:var(--space-3);padding:12px 16px 0}
  .brandmark span{display:none}
  .tabs{margin:0 -16px;padding:0 12px 8px;order:3;width:calc(100% + 32px);overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .pills{margin-left:auto}
}

main{max-width:1240px;margin:0 auto;padding:var(--space-7) 32px 160px}
@media (max-width:700px){ main{padding:var(--space-6) 16px 120px} }
.view{display:none;animation:in .45s var(--ease)}
.view.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.view{animation:none}*{transition:none!important;animation:none!important}}

/* ---- hero ---- */
.hero{margin:0 0 var(--space-7)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 12px/1 var(--mono);letter-spacing:.02em;color:var(--muted);
  margin-bottom:var(--space-5)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-bright);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-bright) 20%,transparent)}
.hero h1{font:400 var(--step-4)/.96 var(--serif);letter-spacing:-.025em;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-7);margin-top:var(--space-6);
  padding-top:var(--space-6);border-top:1px solid var(--line)}
.hero .lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-2);max-width:40ch;margin:0}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:var(--space-3);align-items:baseline}
.steps span{font:italic 400 26px/1 var(--serif);color:var(--accent)}
.steps b{display:block;font-weight:600;font-size:15px;margin-bottom:2px}
.steps p{margin:0;font-size:14px;line-height:1.6;color:var(--muted);max-width:52ch}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:var(--space-6)} }

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-1);margin-bottom:28px}
.card-body{padding:var(--space-6) 44px 44px}
@media (max-width:700px){ .card{border-radius:18px} .card-body{padding:24px 20px 28px} }
h2.sec{font:400 var(--step-2)/1.15 var(--serif);letter-spacing:-.01em;margin:var(--space-6) 0 var(--space-4);
  padding-top:var(--space-6);border-top:1px solid var(--line-2)}
.card-body>h2.sec:first-child{margin-top:0;padding-top:0;border:0}
h3{font-size:var(--step-0);font-weight:600;margin:var(--space-4) 0 var(--space-2)}
h4{font-weight:600}

/* ---- form ---- */
label{display:block;font-size:var(--step--1);font-weight:500;color:var(--ink-2);margin-bottom:var(--space-5)}
.lbl{font-size:var(--step--1);font-weight:500;color:var(--ink-2);margin-bottom:var(--space-2)}
input,select,textarea{width:100%;margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);font-size:15px;font-weight:400;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-bright) 16%,transparent);outline:none}
input[type="checkbox"],input[type="radio"]{accent-color:var(--a,var(--accent))}
input[type="number"]{font-family:var(--mono);font-variant-numeric:tabular-nums}
textarea{font-family:var(--sans);resize:vertical}
.req{color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-5)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--space-4)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--space-4)}
@media (max-width:900px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
#comps input{margin-top:0;margin-bottom:var(--space-3)}
.toggleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) 0;border-top:1px solid var(--line-2);font-weight:500;color:var(--ink)}
.toggleRow input{width:auto;margin:4px 0 0}
.toggleRow input[type="checkbox"]{width:18px;height:18px}
.toggleRow span span{display:block;font-weight:400;margin-top:2px}
.uploadrow{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap;margin:var(--space-4) 0 var(--space-5);
  padding:var(--space-5);border:1px dashed color-mix(in srgb,var(--ink) 18%,var(--line));border-radius:16px;background:var(--surface-2)}
.upload{display:flex;align-items:center;gap:var(--space-4);margin:0;cursor:pointer;flex-wrap:wrap}
.guideout{flex:1;min-width:260px;font-size:var(--step--1)}
.guideout .tag{display:inline-block;padding:2px 9px;border-radius:6px;background:var(--accent-soft);
  color:var(--accent);margin:2px 4px 2px 0;font:500 12px/1.6 var(--mono)}

/* The six aspects, each wearing its own colour from the first screen on. */
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-3);margin-top:var(--space-4)}
.check{--a:var(--accent);--a-soft:var(--accent-soft);
  display:flex;gap:var(--space-3);align-items:flex-start;padding:18px 20px;border:1px solid var(--line);color:var(--ink);
  border-radius:16px;cursor:pointer;background:var(--surface);margin:0;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.check:hover{border-color:color-mix(in srgb,var(--a) 45%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow-1)}
.check.on{border-color:color-mix(in srgb,var(--a) 55%,var(--line));background:color-mix(in srgb,var(--a-soft) 70%,var(--surface))}
.check input{width:18px;height:18px;margin:5px 0 0;flex:0 0 auto}
.check b{display:block;font:400 21px/1.2 var(--serif);letter-spacing:-.005em}
.check em{display:block;font-style:normal;color:var(--muted);font-size:13px;line-height:1.55;margin-top:6px}

.chip{border:1px solid var(--line);background:var(--surface);padding:7px 14px;border-radius:99px;cursor:pointer;
  font-size:var(--step--1);font-weight:500;color:var(--ink);white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease)}
.chip:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--line));background:var(--surface-2)}
.chip:active{transform:scale(.97)}
.chip.danger:hover{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent);color:var(--bad)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn,button.primary,dialog button{display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;
  background:var(--ink);color:var(--bg);padding:13px 24px;border-radius:99px;cursor:pointer;font-weight:500;font-size:var(--step-0);
  box-shadow:0 10px 24px -12px rgba(62,44,26,.55);
  transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
button.primary span{transition:transform .25s var(--ease)}
button.primary:hover,.btn:hover,dialog button:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--ink) 86%,var(--accent-bright));
  box-shadow:0 16px 32px -14px rgba(62,44,26,.6)}
button.primary:hover span{transform:translateX(3px)}
button.primary:active,.btn:active,dialog button:active{transform:translateY(0) scale(.98)}
button.primary[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:none;font-size:14px;padding:10px 18px}
.btn.ghost:hover{background:var(--surface);border-color:color-mix(in srgb,var(--ink) 35%,var(--line))}
.link{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-size:var(--step--1);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.link:hover{text-decoration-thickness:2px}
.actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--line-2)}
details.adv{margin-top:var(--space-5);border-top:1px solid var(--line-2);padding-top:var(--space-4)}
details.adv summary{cursor:pointer;font-weight:600;font-size:14px;margin-bottom:var(--space-4);list-style:none;
  display:flex;align-items:center;gap:10px}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  border:1px solid var(--line);font:400 16px/1 var(--mono);color:var(--muted);transition:transform .25s var(--ease)}
details.adv[open] summary::before{transform:rotate(45deg)}

/* ---- studio ---- */
.empty{padding:120px 20px;text-align:center;color:var(--muted);font:400 clamp(26px,3vw,34px)/1.3 var(--serif);
  max-width:24ch;margin:0 auto;text-wrap:balance}
.runtitle{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);flex-wrap:wrap}
.runtitle h1{font:400 var(--step-3)/1 var(--serif);letter-spacing:-.02em;margin-bottom:var(--space-3)}
.runtitle p{font-size:14px;max-width:80ch;overflow-wrap:anywhere}
.runactions{display:flex;gap:6px;flex-wrap:wrap}
.runactions .chip{padding:6px 12px;font-size:12.5px}
.phasebar{position:relative;height:36px;margin:var(--space-5) 0;background:var(--surface-2);border-radius:12px;overflow:hidden;
  display:flex;align-items:center;border:1px solid var(--line-2)}
.phasefill{position:absolute;inset:0 auto 0 0;width:0;transition:width .6s var(--ease);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent-bright) 6%,transparent),color-mix(in srgb,var(--accent-bright) 15%,transparent))}
.phasebar span{position:relative;padding:0 16px;font:500 13px/1 var(--mono);letter-spacing:.01em}
.scorerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);margin-top:var(--space-4)}
/* The scorecards are the same six aspects as the chapters below, so they wear
   the same colours — otherwise the eye has to learn the set twice. */
.scorecard{--a:var(--accent);--a-soft:var(--accent-soft);
  padding:18px 18px 16px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface-2);
  cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.scorecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);background:var(--surface);border-color:color-mix(in srgb,var(--a) 35%,var(--line))}
.scorecard b{display:block;font:400 48px/1 var(--serif);letter-spacing:-.03em;color:var(--a);font-variant-numeric:tabular-nums}
.scorecard span{display:block;font-size:12px;color:var(--muted)}
.scorecard .lbl{color:var(--ink);font-weight:600;font-size:13.5px;margin:8px 0 1px}
.scorecard .bar{height:3px;border-radius:99px;margin-top:14px;background:color-mix(in srgb,var(--a) 15%,transparent);overflow:hidden}
.scorecard .bar i{display:block;height:100%;background:var(--a);border-radius:99px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-5);align-items:start}
@media (max-width:1080px){.split{grid-template-columns:minmax(0,1fr)}}
.col-side{position:sticky;top:88px}
.col-side h3{font:400 22px/1.2 var(--serif);margin:0}
.log{height:440px;overflow:auto;font:11.5px/1.65 var(--mono);background:var(--surface-2);border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);margin-top:var(--space-3);border:1px solid var(--line-2)}
.log:empty{display:grid;place-items:center;text-align:center}
.log:empty::before{content:"The log fills in while a study runs.";font:italic 400 18px/1.4 var(--serif);color:var(--muted);max-width:18ch}
.log div{padding:2px 0;border-bottom:1px solid var(--line-2);white-space:pre-wrap;word-break:break-word}
.log .phase{color:var(--accent);font-weight:600}
.log .warn{color:var(--warn)} .log .error{color:var(--bad)}

/* ===========================================================================
   The studio.
   Six aspects, six identities. A page of grey accordions makes six different
   design disciplines look like one list of rows; giving each its own colour,
   mark and rhythm is what lets someone scan the work and know where they are.
   The hues are muted to sit on paper: identity, not a traffic light.
   =========================================================================== */
.aspects{display:flex;flex-direction:column;gap:var(--space-4)}
.aspect{--a:var(--accent); --a-soft:var(--accent-soft);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-bottom:var(--space-4);
  box-shadow:var(--shadow-1);transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.aspect:hover{box-shadow:var(--shadow-2)}
.aspect.open{border-color:color-mix(in srgb,var(--a) 38%,var(--line))}
/* The same six identities, as a scope that carries ONLY the colours. The sheet
   used .aspect for this and inherited its `overflow:hidden`, which silently
   killed `position:sticky` on the tab bar — the close control scrolled away
   after a page of specification. */
:is(.aspect,.sheet-scope,.check,.scorecard)[data-key="type"]        {--a:#5d4fbf;--a-soft:#eeebf9}
:is(.aspect,.sheet-scope,.check,.scorecard)[data-key="rhythm"]      {--a:#2b7d62;--a-soft:#e4f0ea}
:is(.aspect,.sheet-scope,.check,.scorecard)[data-key="cta"]         {--a:#c4552d;--a-soft:#f8e8df}
:is(.aspect,.sheet-scope,.check,.scorecard)[data-key="transitions"] {--a:#a9436f;--a-soft:#f6e6ed}
:is(.aspect,.sheet-scope,.check,.scorecard)[data-key="buttons"]     {--a:#34669f;--a-soft:#e6edf6}
:is(.aspect,.sheet-scope,.check,.scorecard)[data-key="aesthetics"]  {--a:#9a7012;--a-soft:#f4ebd4}
:is(.aspect,.sheet-scope)[data-key="brand"]        {--a:#6f675d;--a-soft:#efebe4}
:is(.aspect,.sheet-scope)[data-key="reference"]    {--a:#6f675d;--a-soft:#efebe4}
:is(.aspect,.sheet-scope)[data-key="artdirection"] {--a:#1b1916;--a-soft:#ece7df}
:is(.aspect,.sheet-scope)[data-key="critic"]       {--a:#b23a2e;--a-soft:#f6e3e0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope,.check,.scorecard)[data-key="type"]        {--a:#a497f5;--a-soft:#231f38}
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope,.check,.scorecard)[data-key="rhythm"]      {--a:#5cc49c;--a-soft:#152720}
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope,.check,.scorecard)[data-key="cta"]         {--a:#ef8b5e;--a-soft:#2f2019}
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope,.check,.scorecard)[data-key="transitions"] {--a:#e584ae;--a-soft:#2d1b24}
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope,.check,.scorecard)[data-key="buttons"]     {--a:#79aeea;--a-soft:#17222f}
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope,.check,.scorecard)[data-key="aesthetics"]  {--a:#e0b454;--a-soft:#2b2416}
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope)[data-key="brand"],
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope)[data-key="reference"]    {--a:#b3aa9e;--a-soft:#26231f}
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope)[data-key="artdirection"] {--a:#f1ece4;--a-soft:#26231f}
  :root:not([data-theme="light"]) :is(.aspect,.sheet-scope)[data-key="critic"]       {--a:#ee7063;--a-soft:#2e1a17}
}

.aspect-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);cursor:pointer;width:100%;text-align:left;
  padding:18px 24px;border:0;background:transparent;color:var(--ink);transition:background .2s var(--ease)}
button.aspect-head:hover{background:color-mix(in srgb,var(--a-soft) 55%,transparent)}
.aspect-head h3{margin:0}
.aspect-head .meta{display:flex;gap:var(--space-3);align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.aspect-mark{flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:var(--a-soft);color:var(--a);
  display:grid;place-items:center;font:400 22px/1 var(--serif);border:1px solid color-mix(in srgb,var(--a) 20%,transparent)}
.aspect-title{flex:1 1 auto;min-width:0}
.aspect-title h3{margin:0;font:400 26px/1.1 var(--serif);letter-spacing:-.01em}
.aspect-title p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.aspect-meta{display:flex;align-items:center;gap:var(--space-4);flex:0 0 auto}
.aspect-meta>span:not(.badge):not(.ring){font:12px/1 var(--mono);color:var(--muted)}
.aspect-chev{color:var(--muted);transition:transform .3s var(--ease);font-size:12px}
.aspect.open .aspect-chev{transform:rotate(90deg)}
@media (max-width:700px){
  .aspect-head{padding:16px;flex-wrap:wrap}
  .aspect-meta{width:100%;justify-content:flex-end;gap:var(--space-3)}
  .aspect-title h3{font-size:22px}
}

/* The score, as a ring rather than a number in a row. */
.ring{--v:0;--c:var(--a);flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--c) calc(var(--v)*1%), color-mix(in srgb,var(--c) 13%,transparent) 0);position:relative}
.ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--surface)}
.ring b{position:relative;font:400 19px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ring.na{background:color-mix(in srgb,var(--muted) 14%,transparent)}
.ring.na b{color:var(--muted);font-size:13px}

.aspect-body{padding:0 28px 28px;border:0;background:transparent}
@media (max-width:700px){ .aspect-body{padding:0 16px 20px} }
.aspect-body h3,.aspect-body h4{font-weight:600}
.aspect-lead{padding:var(--space-5) 0 var(--space-2);border-top:1px solid var(--line-2)}
.aspect-lead p{font-size:15.5px;color:var(--ink-2);max-width:72ch}
.aspect-lead p strong{display:block;font:400 clamp(19px,1.7vw,23px)/1.35 var(--serif);color:var(--ink);letter-spacing:-.005em;
  max-width:52ch;padding-left:20px;border-left:2px solid var(--a)}

/* The three readings, side by side: today, the benchmark, the gap. */
.readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--space-3);margin:var(--space-5) 0}
.reading{padding:18px 20px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2)}
.reading h4{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--a);margin:0 0 8px}
.reading p{font-size:var(--step--1);color:var(--ink-2);margin:0;line-height:1.6}

.opts-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
  margin:var(--space-6) 0 var(--space-3);flex-wrap:wrap}
.opts-head h4{font:400 24px/1.2 var(--serif);margin:0}
.opts-head .rec-line{font-size:var(--step--1);color:var(--muted);max-width:60ch}
.badge{padding:3px 9px;border-radius:6px;font:500 11px/1.5 var(--mono);background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.badge.running{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)}
.badge.done{color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,transparent);background:color-mix(in srgb,var(--good) 8%,transparent)}
.badge.error{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent)}

/* ---- the option card ------------------------------------------------------
   Preview, then what it is, then the numbers that decide it, then the three
   things anyone actually wants: the full case, the specs to build to, and the
   code. A card that stops at a name and a mood is a mood board, not a brief. */
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--space-4);margin-top:var(--space-3)}
.opt{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;cursor:pointer;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.opt-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
/* The card thumbnail is the option's real preview page, rendered at desktop
   width and scaled down — so what you scan is the design, not a description. */
.opt-thumb{position:relative;height:196px;overflow:hidden;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.opt-thumb iframe{position:absolute;top:0;left:0;width:1200px;height:860px;border:0;
  transform:scale(.3);transform-origin:top left;pointer-events:none;transition:transform .6s var(--ease)}
.opt:hover .opt-thumb iframe{transform:scale(.3) translateY(-40px)}
.opt-thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 62%,color-mix(in srgb,var(--surface) 90%,transparent))}
.opt:hover{border-color:color-mix(in srgb,var(--a,var(--accent)) 50%,var(--line));transform:translateY(-3px);
  box-shadow:0 22px 44px -18px color-mix(in srgb,var(--a,var(--accent)) 35%,rgba(62,44,26,.25))}
.opt.chosen{border-color:var(--a,var(--accent));background:color-mix(in srgb,var(--a-soft,var(--accent-soft)) 60%,var(--surface))}
.opt .ref{font:500 11px var(--mono);color:var(--a,var(--accent));letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.opt .rec-pill{font:600 9.5px/1 var(--mono);letter-spacing:.08em;padding:4px 7px;border-radius:5px;
  background:var(--a,var(--accent));color:var(--surface)}
.opt .descriptor{font-size:var(--step--1);color:var(--ink-2);line-height:1.6;margin:0 0 var(--space-3)}
/* The numbers that decide the choice, on the face of the card. */
.specchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--space-3)}
.specchips span{font:11px/1.5 var(--mono);padding:3px 8px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.specchips span b{font-weight:600;color:var(--a,var(--accent))}
.opt-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto;padding-top:var(--space-3)}
.opt-actions button{border:1px solid var(--line-2);background:var(--surface-2);border-radius:11px;padding:10px 6px;
  cursor:pointer;font:600 11.5px/1.2 var(--sans);color:var(--ink);display:flex;flex-direction:column;
  align-items:center;gap:3px;transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease)}
.opt-actions button:hover{border-color:color-mix(in srgb,var(--a,var(--accent)) 45%,var(--line));background:var(--a-soft,var(--surface-2))}
.opt-actions button:active{transform:scale(.97)}
.opt-actions button i{font-style:normal;font-size:14px;line-height:1}
.opt-actions button small{font-weight:400;font-size:9.5px;color:var(--muted);letter-spacing:.02em}
.opt h4{font:400 24px/1.15 var(--serif);letter-spacing:-.01em;margin:6px 0 8px}
.opt p{font-size:var(--step--1);color:var(--ink-2);margin-bottom:var(--space-3)}
.opt .mood{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--space-3)}
.opt .mood span{font-size:11px;padding:2px 9px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2)}
.opt .foot{display:flex;justify-content:space-between;font:11px/1.5 var(--mono);color:var(--muted);border-top:1px solid var(--line-2);padding-top:var(--space-2)}
.rec{display:inline-block;font:600 11px/1 var(--mono);color:var(--accent);letter-spacing:.08em;text-transform:uppercase}

/* ---- the sheet, as three tabs -------------------------------------------- */
.sheet-tabs{position:sticky;top:0;z-index:2;display:flex;gap:6px;padding:var(--space-3) 0;
  background:var(--surface);border-bottom:1px solid var(--line-2);margin-bottom:var(--space-5)}
.sheet-tabs button{flex:1;border:1px solid var(--line-2);background:var(--surface-2);border-radius:12px;
  padding:11px 12px;cursor:pointer;font:600 var(--step--1)/1.3 var(--sans);color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .2s var(--ease)}
.sheet-tabs button small{font-weight:400;font-size:10.5px}
.sheet-tabs button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.sheet-tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sheet-tabs button.on small{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.tabpane{display:none}
.tabpane.on{display:block;animation:in .3s var(--ease)}

/* ---- the design-spec sheet ----------------------------------------------- */
.specgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--space-3);margin:var(--space-3) 0}
.specbox{padding:18px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface-2)}
.specbox .k{font:500 10.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.specbox .v{font:500 var(--step-1)/1.2 var(--mono);letter-spacing:-.02em;word-break:break-word;font-variant-numeric:tabular-nums}
.specbox .n{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.swatchrow{display:flex;gap:12px;flex-wrap:wrap;margin:var(--space-3) 0}
.swatchrow figure{margin:0;width:104px}
.swatchrow i{display:block;height:72px;border-radius:12px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.swatchrow figcaption{font:11px/1.5 var(--mono);margin-top:6px;color:var(--muted);word-break:break-all}
.swatchrow figcaption b{display:block;color:var(--ink);font-weight:600;font-family:var(--sans);font-size:11.5px}
.rule{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0;border-bottom:1px solid var(--line-2)}
.rule .num{flex:0 0 28px;height:28px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line-2);
  display:grid;place-items:center;font:500 11px var(--mono);color:var(--muted)}
.rule div{flex:1;font-size:var(--step--1);line-height:1.65}
.callout{padding:18px 20px;border-radius:14px;margin:var(--space-4) 0;font-size:var(--step--1);line-height:1.65;
  border:1px solid var(--line-2);background:var(--surface-2)}
.callout.good{border-color:color-mix(in srgb,var(--good) 30%,transparent);background:color-mix(in srgb,var(--good) 7%,transparent)}
.callout.warn{border-color:color-mix(in srgb,var(--warn) 30%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.callout b{display:block;margin-bottom:4px}

/* ---- code ---------------------------------------------------------------- */
.codeblock{position:relative;margin:var(--space-3) 0}
.codeblock .bar{display:flex;align-items:center;gap:var(--space-3);padding:9px 14px;background:#1d1a17;
  border-radius:12px 12px 0 0;border:1px solid #2e2a25;border-bottom:0}
.codeblock .bar .path{font:11.5px/1 var(--mono);color:#a39a8e;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codeblock .bar .lang{font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:#1d1a17;background:#b3a998;padding:3px 7px;border-radius:5px}
.codeblock .bar button{border:1px solid #3a352f;background:#26221e;color:#dcd4c8;border-radius:7px;
  padding:4px 10px;font:500 11px var(--sans);cursor:pointer;transition:background .2s var(--ease)}
.codeblock .bar button:hover{background:#322d27;color:#fff}
.codeblock pre{margin:0;border-radius:0 0 12px 12px;border:1px solid #2e2a25;max-height:460px}
.stackline{display:flex;align-items:center;gap:10px;padding:var(--space-3) var(--space-4);border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line-2);font-size:var(--step--1);margin-bottom:var(--space-4)}
.stackline .tag{font:500 11px var(--mono);padding:3px 9px;border-radius:6px;background:var(--ink);color:var(--bg)}

/* The full preview in the option sheet. */
.pv{margin:var(--space-4) 0 var(--space-5)}
.pv-bar{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-3)}
.seg{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:var(--surface)}
.seg .chip{border:0;border-radius:0;padding:7px 15px}
.seg .chip+.chip{border-left:1px solid var(--line)}
.pv-stage{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface-2);
  height:520px;position:relative;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent)}
.pv-stage iframe{width:1200px;height:1790px;border:0;transform:scale(.6875);transform-origin:top left;display:block}
.pv-stage.phone{max-width:420px;margin:0 auto;border-radius:28px}
.pv-stage.phone iframe{width:390px;height:1490px;transform:scale(1)}

.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3);margin:var(--space-3) 0}
.shots a{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.shots a:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow-2)}
.shots img{display:block;width:100%;height:170px;object-fit:cover;object-position:top center}

table.data{width:100%;border-collapse:collapse;font-size:var(--step--1);margin:var(--space-3) 0;font-variant-numeric:tabular-nums}
table.data th,table.data td{border-bottom:1px solid var(--line-2);padding:10px 12px;text-align:left;vertical-align:top}
table.data th{font:500 10.5px/1.4 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  border-bottom-color:var(--line)}
table.data tr:hover td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
/* On a phone a findings table is wider than its card, which clips it: let the table scroll on its own. */
@media (max-width:700px){ table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} }
pre{background:#161412;color:#ece6dc;padding:var(--space-4);border-radius:var(--radius-sm);overflow:auto;
  font:12px/1.65 var(--mono);margin:var(--space-3) 0}
code{font:inherit;font-family:var(--mono)}
.runlist .runrow{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  padding:16px 14px;margin:0 -14px;border-radius:12px;border-bottom:1px solid var(--line-2);cursor:pointer;
  transition:background .2s var(--ease)}
.runlist .runrow:hover{background:var(--surface-2)}
.runlist .runrow b{font:400 21px/1.2 var(--serif);letter-spacing:-.005em}
.sysinfo{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line-2);font:12px/1.8 var(--mono);color:var(--muted);overflow-wrap:anywhere}

/* ---- sheet (option detail) ---- */
.sheet{position:fixed;inset:0;background:color-mix(in srgb,#1b1612 45%,transparent);display:none;z-index:60;padding:var(--space-5);
  overflow:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sheet.on{display:block;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-inner{max-width:960px;margin:40px auto;background:var(--surface);border-radius:28px;border:1px solid var(--line);
  box-shadow:var(--shadow-2);padding:calc(var(--space-6) + 8px) 48px 48px;position:relative;animation:rise .35s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
@media (max-width:700px){ .sheet{padding:8px} .sheet-inner{margin:8px auto;padding:56px 18px 24px;border-radius:20px} }
/* The close control sits INSIDE the sticky tab bar. Floated at the top of the
   content it drifted under tables as the sheet scrolled, and pinned to the
   sheet it scrolled away entirely after a page of specification. */
.sheet-close{position:absolute;top:var(--space-4);right:var(--space-4);z-index:3;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:7px 16px;border-radius:99px;cursor:pointer;font-size:var(--step--1);font-weight:500;
  box-shadow:var(--shadow-1);transition:border-color .2s var(--ease),background .2s var(--ease)}
.sheet-close:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--line));background:var(--surface-2)}
.sheet h2{padding-right:96px}
.sheet-scope{--a:var(--accent);--a-soft:var(--accent-soft)}
.sheet-tabs .tab-close{flex:0 0 auto;width:44px;padding:0;font-size:15px;color:var(--muted);
  align-items:center;justify-content:center}
.sheet-tabs .tab-close:hover{color:var(--bad);border-color:var(--bad);background:var(--surface)}
.sheet h2{font:400 clamp(32px,4vw,44px)/1.05 var(--serif);letter-spacing:-.018em;margin-bottom:var(--space-2)}
.sheet h3{font:500 11px/1.4 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin-top:var(--space-6)}

/* The sign-in dialog of a deployed copy. */
dialog{border:1px solid var(--line);border-radius:24px;padding:36px 36px 32px;background:var(--surface);color:var(--ink);
  width:min(440px,calc(100vw - 32px));box-shadow:var(--shadow-2)}
dialog::backdrop{background:color-mix(in srgb,#1b1612 40%,transparent);backdrop-filter:blur(8px)}
dialog p{color:var(--ink-2);font-size:14px}
dialog p b{display:block;font:400 32px/1.1 var(--serif);color:var(--ink);margin-bottom:6px}
dialog .err{color:var(--bad);font-size:13px}

/* The connection banner. Deliberately calm and deliberately persistent: it is
   telling you to wait, not that something went wrong. */
.conn{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:var(--space-3);max-width:min(620px,92vw);
  padding:12px 16px;border-radius:16px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);font-size:var(--step--1);
  animation:connIn .3s var(--ease)}
.conn strong{font-weight:600}
.conn .chip{flex:0 0 auto}
@keyframes connIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.conn .spin{flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.conn{animation:none}.conn .spin{animation:none;border-top-color:var(--accent)}}
/* While the connection is gone, anything that would start new work says so
   rather than looking clickable and doing nothing. */
body.is-offline button.primary{opacity:.5;pointer-events:none}
body.is-offline .conn{bottom:28px}
body.is-offline .toast{bottom:92px}

/* Hidden by moving past the edge by its full height plus the gap, and fading:
   a percentage of its own height alone left a sliver of the pill on screen. */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,calc(100% + 40px));opacity:0;background:var(--ink);color:var(--bg);
  padding:12px 22px;border-radius:99px;font-size:var(--step--1);font-weight:500;z-index:80;pointer-events:none;
  transition:transform .4s var(--ease),opacity .3s var(--ease);max-width:80vw;box-shadow:var(--shadow-2)}
.toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast.bad{background:var(--bad);color:#fff}