/* =====================================================================
   Drawn To - one screen, one content model, nine locked directions.
   Locks: docs/design-locks/2026-08-21-drawn-to-site.md (revisions R1, R2)
   ===================================================================== */
:root{
  --sans:Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono","SF Mono",Menlo,Consolas,monospace;
  --serif:"Instrument Serif",Georgia,serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --success:#35C56A;
}
/* ---------- A · narrow dark sharp (F1 80 + F4 15 + F8 5) ---------- */
[data-variant="a"]{
  --bg:#0A0C10;--surface:#0F1217;--ink1:#EDEDEE;--ink2:#8B8E93;--ink3:#5D5E63;
  --rule:rgba(255,255,255,.08);--rule-hot:rgba(255,255,255,.16);--wash:rgba(255,255,255,.06);
  --accent:#5B8CFF;--col:1120px;--pad:28px;--r:0;
  --display-w:500;--display-track:-.025em;
}
/* ---------- B · wide light pastel (F6 70 + F3 30) ---------- */
[data-variant="b"]{
  --bg:#F4F6FB;--surface:#FFFFFF;--ink1:#1B2A50;--ink2:#5E6A8A;--ink3:#8E97B3;
  --rule:rgba(27,42,80,.08);--rule-hot:rgba(27,42,80,.14);--wash:rgba(27,42,80,.05);
  --accent:#2349DA;--col:1400px;--pad:32px;--r:28px;
  --display-w:500;--display-track:-.03em;
}
/* ---------- C · paper & print (F5 70 + F4 30) ---------- */
[data-variant="c"]{
  --bg:#F3F2EE;--surface:#FFFFFF;--ink1:#2E2E2E;--ink2:#6B6B6B;--ink3:#9C9A94;
  --rule:#E3E1DB;--rule-hot:#C9C6BD;--wash:#EFEDE7;
  --accent:#7A4EC9;--col:1200px;--pad:32px;--r:0;
  --display-w:400;--display-track:-.01em;
}
/* ---------- D · dark atmosphere, one light (F3 60 + F8 25 + F1 15) ---------- */
[data-variant="d"]{
  --bg:#05070A;--surface:rgba(255,255,255,.04);--ink1:#F2F4F6;--ink2:#8C949E;--ink3:#5A6370;
  --rule:rgba(255,255,255,.08);--rule-hot:rgba(255,255,255,.16);--wash:rgba(255,255,255,.06);
  --accent:#35C9D6;--col:1232px;--pad:28px;--r:12px;
  --display-w:600;--display-track:-.025em;
}
/* ---------- E · Vercel-home (F1-wide 85 + F8 15) ---------- */
[data-variant="e"]{
  --bg:#000;--surface:#0A0A0A;--ink1:#EDEDED;--ink2:#A1A1A1;--ink3:#666;
  --rule:rgba(255,255,255,.10);--rule-hot:rgba(255,255,255,.18);--wash:rgba(255,255,255,.07);
  --accent:#fff;--col:1400px;--pad:24px;--r:6px;
  --display-w:500;--display-track:-.06em;
}
/* ---------- F · ink & air (F2 85 + F4 15) ---------- */
[data-variant="f"]{
  --bg:#FAFAFA;--surface:#FFFFFF;--ink1:#3A3A3A;--ink2:#6B7280;--ink3:#9AA0A8;
  --rule:#E8E8E8;--rule-hot:#DBDBDB;--wash:#F1F1F1;
  --accent:#3770E9;--col:1200px;--pad:40px;--r:10px;
  --display-w:600;--display-track:-.022em;
}
/* ---------- G · isometric blueprint (F4 75 + F1 25) ---------- */
[data-variant="g"]{
  --bg:#1A1A1C;--surface:#131315;--ink1:#EDEDEE;--ink2:#8A8A8E;--ink3:#5A5A5E;
  --rule:rgba(255,255,255,.09);--rule-hot:rgba(255,255,255,.17);--wash:rgba(255,255,255,.06);
  --accent:#FFFFFF;--col:1280px;--pad:32px;--r:0;
  --display-w:500;--display-track:-.025em;
}
/* ---------- H · emissive signal (F8 80 + F1 20) ---------- */
[data-variant="h"]{
  --bg:#08080A;--surface:#0C0C0F;--ink1:#C6C6CE;--ink2:#5E5E68;--ink3:#43434C;
  --rule:rgba(255,255,255,.06);--rule-hot:rgba(255,255,255,.11);--wash:rgba(255,255,255,.05);
  --accent:#FFB43C;--col:1120px;--pad:28px;--r:8px;
  --display-w:500;--display-track:-.03em;
}
/* ---------- I · tactile instrument (F7 70 + F2 30) ---------- */
[data-variant="i"]{
  --bg:#F2F1EE;--surface:#FBFAF7;--ink1:#1F2326;--ink2:#6A6E71;--ink3:#9B9C99;
  --rule:#DEDCD5;--rule-hot:#CBC8BF;--wash:#E9E7E0;
  --accent:#E8622A;--col:1120px;--pad:32px;--r:14px;
  --display-w:500;--display-track:-.028em;
}

/* ---------- 21 · proof diptych (comparison · dark) ---------- */
[data-variant="u"]{--bg:#0A0A0C;--surface:#101013;--ink1:#EDEDEE;--ink2:#8A8D92;--ink3:#5A5C61;
  --rule:rgba(255,255,255,.09);--rule-hot:rgba(255,255,255,.17);--wash:rgba(255,255,255,.06);
  --accent:#5B8CFF;--col:1240px;--pad:28px;--r:0;--display-w:500;--display-track:-.03em}
/* ---------- 22 · the refusals (ledger · light) ---------- */
[data-variant="v"]{--bg:#F6F5F1;--surface:#FFFFFF;--ink1:#26251F;--ink2:#67655D;--ink3:#9D9A90;
  --rule:#E2DFD6;--rule-hot:#CBC7BB;--wash:#EDEBE4;
  --accent:#B23A2E;--col:1080px;--pad:32px;--r:0;--display-w:400;--display-track:-.01em}
/* ---------- 23 · two registers (metrics · dark) ---------- */
[data-variant="w"]{--bg:#08090C;--surface:#0E0F13;--ink1:#E4E4EA;--ink2:#7E8189;--ink3:#4F525A;
  --rule:rgba(255,255,255,.08);--rule-hot:rgba(255,255,255,.14);--wash:rgba(255,255,255,.05);
  --accent:#5BE49B;--col:1120px;--pad:28px;--r:6px;--display-w:500;--display-track:-.03em}
/* ---------- 24 · stop conditions (instrument · light) ---------- */
[data-variant="x"]{--bg:#F1F0EC;--surface:#FBFAF7;--ink1:#1F2326;--ink2:#6A6E71;--ink3:#9B9C99;
  --rule:#DEDCD5;--rule-hot:#C9C6BC;--wash:#E8E6DF;
  --accent:#E8622A;--col:1080px;--pad:32px;--r:14px;--display-w:500;--display-track:-.028em}

/* ---------- 25 · contact sheet (gallery · light) ---------- */
[data-variant="y"]{--bg:#F4F3EF;--surface:#FFFFFF;--ink1:#26251F;--ink2:#65635B;--ink3:#9B988E;
  --rule:#DFDCD2;--rule-hot:#C7C3B7;--wash:#EAE8E0;
  --accent:#B23A2E;--col:1300px;--pad:32px;--r:0;--display-w:400;--display-track:-.01em}
/* ---------- 26 · clash matrix (matrix · dark) ---------- */
[data-variant="z"]{--bg:#0A0A0D;--surface:#101014;--ink1:#EDEDEE;--ink2:#8A8D92;--ink3:#55575C;
  --rule:rgba(255,255,255,.09);--rule-hot:rgba(255,255,255,.17);--wash:rgba(255,255,255,.06);
  --accent:#5B8CFF;--col:1180px;--pad:28px;--r:0;--display-w:500;--display-track:-.028em}
/* ---------- 27 · a real run (frozen interaction · dark) ---------- */
[data-variant="A"]{--bg:#07080A;--surface:#0D0F12;--ink1:#E6E8EA;--ink2:#7E838A;--ink3:#4E535A;
  --rule:rgba(255,255,255,.08);--rule-hot:rgba(255,255,255,.14);--wash:rgba(255,255,255,.05);
  --accent:#5BE49B;--col:1080px;--pad:28px;--r:10px;--display-w:500;--display-track:-.03em}

/* ---------- 28 · works with (marquee · light) ---------- */
[data-variant="B"]{--bg:#F7F7F8;--surface:#FFFFFF;--ink1:#2C2C2E;--ink2:#6B7280;--ink3:#A0A4AC;
  --rule:#E6E6E9;--rule-hot:#D4D4D9;--wash:#EFEFF1;
  --accent:#3770E9;--col:1400px;--pad:0px;--r:999px;--display-w:500;--display-track:-.026em}
/* ---------- 29 · the measured page (spec sheet · light) ---------- */
[data-variant="C"]{--bg:#FAFAFA;--surface:#FFFFFF;--ink1:#3A3A3A;--ink2:#6B7280;--ink3:#9AA0A8;
  --rule:#E8E8E8;--rule-hot:#D8D8D8;--wash:#F1F1F1;
  --accent:#3770E9;--col:1120px;--pad:36px;--r:0;--display-w:600;--display-track:-.022em}
/* ---------- 30 · both modes (comparison · light shell) ---------- */
[data-variant="D"]{--bg:#EFEFF1;--surface:#FFFFFF;--ink1:#26262A;--ink2:#6A6D75;--ink3:#9A9DA5;
  --rule:#E0E0E4;--rule-hot:#CDCDD3;--wash:#E7E7EB;
  --accent:#3770E9;--col:1240px;--pad:32px;--r:12px;--display-w:500;--display-track:-.026em}

*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
html{background:var(--bg);color-scheme:dark}
[data-variant="b"],[data-variant="c"],[data-variant="f"],[data-variant="i"]{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink1);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
a{color:inherit;text-decoration:none}
button{font:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* grain: every large gradient carries it (C9) */
.grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- the screen: one 100 svh poster ---------- */
.screen{position:relative;height:100svh;width:100%;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.col{position:relative;width:100%;max-width:var(--col);margin:0 auto;padding:0 var(--pad);display:flex;flex-direction:column;flex:1;min-height:0;z-index:1}
.top{display:flex;align-items:center;justify-content:space-between;height:56px;flex:none}
.brand{font-weight:500;letter-spacing:-.01em;font-size:15px}
.gh{font-size:13px;color:var(--ink2);transition:color 150ms ease-in-out}
.gh:hover{color:var(--ink1)}
.bottom{display:flex;align-items:center;gap:18px;height:58px;flex:none;padding-right:132px;font:400 11px/1 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
.label{letter-spacing:.08em;text-transform:uppercase}
.nums{font-size:12px;letter-spacing:0}
.nums b{font-weight:500;color:var(--ink2);font-variant-numeric:tabular-nums}
.body{flex:1;min-height:0;display:flex;flex-direction:column}

h1{margin:0;font-family:var(--sans);font-weight:var(--display-w);letter-spacing:var(--display-track);line-height:1.04;text-wrap:balance;font-size:64px}
.sub{margin:16px 0 0;color:var(--ink2);font-size:17px;line-height:1.5;max-width:60ch;text-wrap:pretty}
.w{display:inline-block}
.first .w{opacity:0;filter:blur(12px);transform:translateY(8px);animation:reveal 480ms var(--ease-out) forwards}
@keyframes reveal{to{opacity:1;filter:blur(0);transform:none}}

/* ---------- command + copy (reserved width, text+icon swap, success, quiet revert) ---------- */
.cmd{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 14px 0 16px;border:1px solid var(--rule-hot);border-radius:var(--r);font:400 13px/1 var(--mono);color:var(--ink1);background:var(--surface);white-space:nowrap;max-width:100%}
.cmd .p{color:var(--ink3)}
.copy{all:unset;cursor:pointer;display:inline-grid;grid-template-columns:6ch 14px;align-items:center;gap:8px;color:var(--ink3);font:inherit;padding-left:12px;border-left:1px solid var(--rule);transition:color 150ms ease-in-out;-webkit-tap-highlight-color:transparent}
.copy:hover,.copy:focus-visible{color:var(--ink1)}
.copy .swap{display:inline-grid}
.copy .swap>span{grid-area:1/1;transition:opacity 150ms ease-in-out,transform 150ms ease-in-out,filter 150ms ease-in-out}
.copy .w2{opacity:0;transform:translateY(4px);filter:blur(2px)}
.copy[data-state="done"] .w1{opacity:0;transform:translateY(-4px);filter:blur(2px)}
.copy[data-state="done"] .w2{opacity:1;transform:none;filter:none}
.copy .ico{display:inline-grid;width:14px;height:14px}
.copy .ico svg{grid-area:1/1;width:14px;height:14px;transition:opacity 250ms ease-in-out,filter 250ms ease-in-out,transform 250ms ease-in-out}
.copy .i-check{opacity:0;transform:scale(.25);filter:blur(2px);stroke-dasharray:14;stroke-dashoffset:14}
.copy[data-state="done"]{color:var(--success)}
.copy[data-state="done"] .i-copy{opacity:0;transform:scale(.25);filter:blur(2px)}
.copy[data-state="done"] .i-check{opacity:1;transform:none;filter:none;animation:draw 500ms cubic-bezier(.22,1,.36,1) 80ms forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- transport: fixed viewport chrome, ONE position, ONE skin (lock R3) ----------
   It is chrome, not content: it never takes a direction's palette and never moves. */
.ctl{position:fixed;right:24px;bottom:20px;z-index:50;display:inline-flex;align-items:center;gap:2px;padding:3px;
  border-radius:999px;background:rgba(128,128,134,.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(128,128,134,.32)}
.cb{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
  color:#8E8E94;transition:background 150ms ease-in-out;-webkit-tap-highlight-color:transparent}
.cb:hover,.cb:focus-visible{background:rgba(128,128,134,.20)}
.cb svg{width:14px;height:14px;display:block}
.cb .ico{display:grid;width:14px;height:14px}
.cb .ico svg{grid-area:1/1;transition:opacity 250ms ease-in-out,filter 250ms ease-in-out,transform 250ms ease-in-out}
.cb .i-play{opacity:0;transform:scale(.25);filter:blur(2px)}
.ctl[data-paused="1"] .i-pause{opacity:0;transform:scale(.25);filter:blur(2px)}
.ctl[data-paused="1"] .i-play{opacity:1;transform:none;filter:none}

/* ---------- catalog primitives: heads, cells, ledgers, plates ---------- */
.head{margin:0;font-family:var(--sans);font-weight:var(--display-w);letter-spacing:var(--display-track);font-size:34px;line-height:1.1}
.headsub{margin:10px 0 0;color:var(--ink2);font-size:15px;max-width:56ch}
.stage{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:26px}
.trio{display:grid;grid-template-columns:repeat(3,1fr)}
.cell{display:flex;flex-direction:column;gap:12px;min-width:0}
.cell h3{margin:0;font:500 16px/1.3 var(--sans);letter-spacing:-.01em}
.cell p{margin:0;color:var(--ink2);font-size:13.5px;line-height:1.5}
.spec{margin:0;padding:0;list-style:none;display:grid;gap:7px;font:400 11.5px/1.4 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
.spec b{font-weight:400;color:var(--ink2);margin-right:8px}
.rows{display:grid;gap:0}
.r{display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:14px;padding:9px 0;font-size:13.5px}
.r .k{font:500 11px/1.4 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums slashed-zero}
.r .t{display:flex;align-items:baseline;gap:12px;min-width:0;white-space:nowrap}
.r .t i{flex:1;border-bottom:1px dotted var(--rule-hot);transform:translateY(-5px)}
.r .v{font:400 11.5px/1.4 var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums}
.sw{display:flex;gap:4px}
.sw i{display:block;width:26px;height:34px;border-radius:2px}

/* ===================== A · narrow dark sharp ===================== */
[data-variant="a"] .screen{background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:64px 64px;background-position:center top}
/* the 43 measured grounds, thrown out of focus into one shaft from the upper right -
   the same direction the object is lit from, so the screen has one light */
[data-variant="a"] .atmos,[data-variant="a"] .atmos.sharp{position:absolute;inset:-16%;z-index:0;pointer-events:none;background:linear-gradient(112deg,#f9f9f9 0.000%,#f9f9f9 2.273%,#1A1A1A 2.273%,#1A1A1A 4.545%,#f7f7f7 4.545%,#f7f7f7 6.818%,#FAFAFA 6.818%,#FAFAFA 9.091%,#d9d9d9 9.091%,#d9d9d9 11.364%,#ffffff 11.364%,#ffffff 13.636%,#F2F1EE 13.636%,#F2F1EE 15.909%,#dbf3ff 15.909%,#dbf3ff 18.182%,#202020 18.182%,#202020 20.455%,#F9FAFC 20.455%,#F9FAFC 22.727%,#ffffff 22.727%,#ffffff 25.000%,#dbdbdb 25.000%,#dbdbdb 27.273%,#232323 27.273%,#232323 29.545%,#ececec 29.545%,#ececec 31.818%,#e5e6eb 31.818%,#e5e6eb 34.091%,#D9D9D9 34.091%,#D9D9D9 36.364%,#101012 36.364%,#101012 38.636%,#1f2326 38.636%,#1f2326 40.909%,#F7F7F7 40.909%,#F7F7F7 43.182%,#131316 43.182%,#131316 45.455%,#101010 45.455%,#101010 47.727%,#FBFBFB 47.727%,#FBFBFB 50.000%,#101113 50.000%,#101113 52.273%,#121212 52.273%,#121212 54.545%,#fafafa 54.545%,#fafafa 56.818%,#09090B 56.818%,#09090B 59.091%,#F7F7F7 59.091%,#F7F7F7 61.364%,#040607 61.364%,#040607 63.636%,#E5E5E5 63.636%,#E5E5E5 65.909%,#101012 65.909%,#101012 68.182%,#F3F7F8 68.182%,#F3F7F8 70.455%,#0F0F0F 70.455%,#0F0F0F 72.727%,#dde1e2 72.727%,#dde1e2 75.000%,#FBFBFC 75.000%,#FBFBFC 77.273%,#ececf0 77.273%,#ececf0 79.545%,#F0F5FE 79.545%,#F0F5FE 81.818%,#1f1f1f 81.818%,#1f1f1f 84.091%,#ececec 84.091%,#ececec 86.364%,#050408 86.364%,#050408 88.636%,#f7f6f2 88.636%,#f7f6f2 90.909%,#151515 90.909%,#151515 93.182%,#FFFFFF 93.182%,#FFFFFF 95.455%,#EDEDED 95.455%,#EDEDED 97.727%,#F3F3F3 97.727%,#F3F3F3 100.000%)}
[data-variant="a"] .atmos{filter:blur(84px) saturate(4.2) contrast(1.12);opacity:.50;
  -webkit-mask-image:radial-gradient(122% 118% at 84% -12%,#000 0%,rgba(0,0,0,.66) 40%,rgba(0,0,0,.22) 70%,transparent 96%);
  mask-image:radial-gradient(122% 118% at 84% -12%,#000 0%,rgba(0,0,0,.66) 40%,rgba(0,0,0,.22) 70%,transparent 96%)}
/* the same corpus in focus, so the bands are discoverable at twenty centimetres */
[data-variant="a"] .atmos.sharp{filter:none;opacity:.05;
  -webkit-mask-image:radial-gradient(100% 96% at 84% -12%,#000 0%,transparent 68%);
  mask-image:radial-gradient(100% 96% at 84% -12%,#000 0%,transparent 68%)}
[data-variant="a"] .grain{opacity:.06;z-index:1}
[data-variant="a"] .col{background:transparent;border-inline:1px solid var(--rule)}
[data-variant="a"] .top{border-bottom:1px solid var(--rule)}
[data-variant="a"] .bottom{border-top:1px solid var(--rule)}
[data-variant="a"] .copyblock{min-width:0}
[data-variant="a"] .cmd{margin-top:28px}
[data-variant="a"] .body{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:36px;padding-bottom:1vh}
[data-variant="a"] h1{font-size:44px}
[data-variant="a"] .sub{font-size:16.5px;max-width:34ch}
[data-variant="a"] .cmd{margin-top:32px}
[data-variant="a"] .copyblock{min-width:0}
[data-variant="a"] .plate{min-width:0;display:flex;align-items:center;justify-content:center;overflow:visible}
[data-variant="a"] .core{width:100%;max-width:540px;height:auto;max-height:76vh;display:block}
[data-variant="a"] .core *{vector-effect:non-scaling-stroke}
[data-variant="a"] .core .v{font:500 12px/1 var(--mono);fill:var(--accent);font-variant-numeric:tabular-nums}
[data-variant="a"] .core .lb{font:400 10.5px/1 var(--mono);fill:#9296A0;font-variant-numeric:tabular-nums;letter-spacing:.02em}
[data-variant="a"] .core .lb.dim{fill:#666A73}
[data-variant="a"] .core .lb.hot{fill:#C9CCD4}
[data-variant="a"] .core .ro .k{font:400 10px/1 var(--mono);fill:#5D616B;letter-spacing:.09em}
[data-variant="a"] .core .ro .d{font:500 12px/1 var(--mono);fill:#C9CCD4;font-variant-numeric:tabular-nums}
[data-variant="a"] .core .ro .d.hot{fill:var(--accent)}


/* ===================== B · wide light pastel ===================== */
[data-variant="b"] .screen{background:
  radial-gradient(125% 60% at 50% 112%,#D8E1FF 0%,#E6ECFF 36%,rgba(230,236,255,0) 72%),
  linear-gradient(180deg,#FBF7FF 0%,#F6F5FD 52%,#EEF1FC 100%)}
[data-variant="b"] .screen::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(126% 61% at 50% 112%,transparent 58.5%,rgba(255,255,255,.9) 60.6%,rgba(255,255,255,0) 65%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 74%,transparent 100%)}
[data-variant="b"] .body{align-items:center;justify-content:center;text-align:center;padding-bottom:4vh}
[data-variant="b"] h1{font-size:84px;letter-spacing:-.03em}
[data-variant="b"] .sub{margin-top:20px;font-size:18px}
[data-variant="b"] .pebble{margin-top:40px;background:#fff;border-radius:28px;corner-shape:squircle;box-shadow:0 24px 48px -12px rgba(50,70,130,.14);padding:10px}
[data-variant="b"] .cmd{border:0;background:transparent;height:44px;padding:0 6px 0 14px;font-size:14px}

/* ===================== C · paper & print ===================== */
[data-variant="c"] .col{padding-bottom:0}
[data-variant="c"] .body{padding:22px 0 26px}
[data-variant="c"] .mat{position:relative;flex:1;min-height:0;background:var(--surface);border:1px solid var(--rule);display:flex;flex-direction:column}
[data-variant="c"] .mat .in{position:relative;flex:1;min-height:0;padding:76px 56px 48px;display:flex;flex-direction:column;justify-content:flex-start}
[data-variant="c"] h1{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:72px;line-height:1;color:#2E2E2E}
[data-variant="c"] .sub{margin-top:18px;color:#6B6B6B;font-size:17px}
[data-variant="c"] .cmd{margin-top:32px;align-self:flex-start;border-color:var(--rule);background:#fff}
[data-variant="c"] .meta{position:absolute;right:56px;top:84px;font:400 11px/1 var(--mono);color:#9C9A94;font-variant-numeric:tabular-nums slashed-zero;letter-spacing:0}
[data-variant="c"] .meta b{font-weight:500;color:#6B6B6B}
[data-variant="c"] .slab{position:relative;flex:none;height:28%;min-height:120px;overflow:hidden;background:linear-gradient(118deg,#F27BB4 0%,#D86AB8 38%,#A757C4 70%,#7A4EC9 100%)}
[data-variant="c"] .slab::before{content:"";position:absolute;inset:-40% 0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.065) 0 38px,rgba(255,255,255,0) 38px 84px);pointer-events:none}
[data-variant="c"] .slab .ht{position:absolute;inset:0;background-image:radial-gradient(rgba(28,10,40,.62) .85px,transparent 1.35px);background-size:4px 4px;mix-blend-mode:multiply;clip-path:inset(0 0 0 54%);opacity:.85}
[data-variant="c"] .slab .grain{opacity:.035}
[data-variant="c"] .cm{position:absolute;width:22px;height:22px;pointer-events:none}
[data-variant="c"] .cm::before,[data-variant="c"] .cm::after{content:"";position:absolute;background:#B9B6AD}
[data-variant="c"] .cm::before{width:16px;height:1px}
[data-variant="c"] .cm::after{width:1px;height:16px}
[data-variant="c"] .cm.tl{left:-23px;top:-23px}[data-variant="c"] .cm.tl::before{left:0;top:22px}[data-variant="c"] .cm.tl::after{left:22px;top:0}
[data-variant="c"] .cm.tr{right:-23px;top:-23px}[data-variant="c"] .cm.tr::before{right:0;top:22px}[data-variant="c"] .cm.tr::after{right:22px;top:0}
[data-variant="c"] .cm.bl{left:-23px;bottom:-23px}[data-variant="c"] .cm.bl::before{left:0;bottom:22px}[data-variant="c"] .cm.bl::after{left:22px;bottom:0}
[data-variant="c"] .cm.br{right:-23px;bottom:-23px}[data-variant="c"] .cm.br::before{right:0;bottom:22px}[data-variant="c"] .cm.br::after{right:22px;bottom:0}
[data-variant="c"] .label{color:#9C9A94}

/* ===================== D · dark atmosphere, one light ===================== */
[data-variant="d"] .screen{background:var(--bg)}
[data-variant="d"] .beam{position:absolute;top:-30vh;left:calc(100% - 5vw);width:36vw;min-width:340px;height:190vmax;transform-origin:50% 0;transform:translateX(-50%) rotate(43deg);pointer-events:none;z-index:0;
  background:linear-gradient(90deg,rgba(53,201,214,0) 0%,rgba(53,201,214,0) 33.5%,rgba(168,232,238,.38) 35.8%,rgba(110,210,222,.19) 47%,rgba(53,201,214,.075) 72%,rgba(53,201,214,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.55) 60%,transparent 90%);mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.55) 60%,transparent 90%);
  filter:blur(2.5px)}
[data-variant="d"] .dust{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.45;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='1' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 14 -9.6'/></filter><rect width='100%' height='100%' filter='url(%23d)'/></svg>");
  background-size:260px 260px;
  -webkit-mask-image:linear-gradient(227deg,rgba(0,0,0,.9) 4%,rgba(0,0,0,.34) 26%,transparent 52%);mask-image:linear-gradient(227deg,rgba(0,0,0,.9) 4%,rgba(0,0,0,.34) 26%,transparent 52%)}
[data-variant="d"] .grain{opacity:.05;z-index:0}
[data-variant="d"] .gh{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink1)}
[data-variant="d"] .body{align-items:center;justify-content:center;text-align:center;padding-bottom:5vh}
[data-variant="d"] h1{font-size:80px}
[data-variant="d"] .sub{margin-top:20px;font-size:17px}
[data-variant="d"] .cmd{margin-top:36px;border:0;background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(255,255,255,.07),0 0 48px rgba(53,201,214,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ===================== E · Vercel-home ===================== */
[data-variant="e"] .body{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:32px;padding-bottom:3vh}
[data-variant="e"] h1{font-size:40px;letter-spacing:-.06em;line-height:1.05}
[data-variant="e"] .sub{margin-top:14px;font-size:15px;max-width:38ch}
[data-variant="e"] .cmd{margin-top:28px;border:0;box-shadow:0 0 0 1px rgba(255,255,255,.12);background:var(--surface)}
[data-variant="e"] .ring{width:min(420px,46vh);height:min(420px,46vh);display:block;justify-self:center}
[data-variant="e"] .ring .spin{transform-origin:200px 200px;animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
[data-variant="e"] .lines{justify-self:end;display:grid;gap:14px;font:400 14px/1.4 var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums;min-width:15ch}
[data-variant="e"] .lines b{font-weight:500;color:var(--ink1)}

/* ===================== F · ink & air ===================== */
[data-variant="f"] .screen{background:var(--bg)}
[data-variant="f"] .scaffold{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;justify-content:center}
[data-variant="f"] .scaffold::before,[data-variant="f"] .scaffold::after{content:"";position:absolute;top:0;bottom:0;width:48px;
  background:repeating-linear-gradient(45deg,#E9E9E9 0 1px,transparent 1px 10px)}
[data-variant="f"] .scaffold::before{right:calc(50% + 600px)}
[data-variant="f"] .scaffold::after{left:calc(50% + 600px)}
[data-variant="f"] .scaffold i{position:relative;width:100%;max-width:1200px;height:100%;
  border-right:1px solid var(--rule);
  background-image:linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:25% 100%}
[data-variant="f"] .scaffold i::before,[data-variant="f"] .scaffold i::after{content:"";position:absolute;left:-5px;width:11px;height:11px;
  background:linear-gradient(var(--accent),var(--accent)) center/11px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) center/1px 11px no-repeat;opacity:.6}
[data-variant="f"] .scaffold i::before{top:56px}
[data-variant="f"] .scaffold i::after{bottom:58px}
[data-variant="f"] .top{border-bottom:1px solid var(--rule)}
[data-variant="f"] .body{justify-content:center}
[data-variant="f"] h1{font-size:64px}
[data-variant="f"] .sub{margin-top:20px;font-size:18px;max-width:52ch}
[data-variant="f"] .cmd{margin-top:36px;align-self:flex-start;background:#fff;border-color:var(--rule)}

/* ===================== G · isometric blueprint ===================== */
[data-variant="g"] .screen{background:var(--bg)}
[data-variant="g"] .body{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:24px;padding-bottom:2vh}
[data-variant="g"] h1{font-size:44px}
[data-variant="g"] .sub{margin-top:18px;font-size:16px;max-width:38ch}
[data-variant="g"] .cmd{margin-top:30px}
[data-variant="g"] .iso{justify-self:center;width:100%;max-width:640px;height:100%;max-height:100%;display:block}
[data-variant="g"] .iso .lb{font:500 10px/1 var(--mono);fill:#6E6E72;font-variant-numeric:tabular-nums;letter-spacing:.06em}
[data-variant="g"] .iso .lb.hot{fill:#BDBDC1}

/* ===================== H · emissive signal ===================== */
[data-variant="h"] .screen{background:var(--bg);
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:40px 40px}
[data-variant="h"] .body{align-items:center;justify-content:center;text-align:center;padding-bottom:6vh}
[data-variant="h"] h1{font-size:76px;color:#C6C6CE}
[data-variant="h"] .sub{margin-top:20px;font-size:17px;color:#5E5E68}
[data-variant="h"] .lit{position:relative;margin-top:54px;display:flex;justify-content:center}
[data-variant="h"] .lit::before{content:"";position:absolute;left:50%;top:50%;width:560px;height:250px;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(45% 44% at 31% 52%,rgba(255,180,60,.32) 0%,rgba(255,160,50,.10) 38%,rgba(255,150,40,0) 72%);filter:blur(6px)}
[data-variant="h"] .cmd{position:relative;border:0;background:#0D0C0B;box-shadow:inset 0 0 0 1px rgba(255,180,60,.22),0 0 26px rgba(255,170,50,.15);color:#F4EFE6}
[data-variant="h"] .cmd .p{color:var(--accent);text-shadow:0 0 10px rgba(255,180,60,.9),0 0 3px rgba(255,205,130,.9)}
[data-variant="h"] .lit .fill{position:absolute;left:50%;bottom:-10px;width:112%;height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,180,60,0) 4%,rgba(255,180,60,.8) 27%,rgba(255,180,60,.24) 64%,rgba(255,180,60,0) 100%)}
[data-variant="h"] .lit .fill::after{content:"";position:absolute;left:27%;top:-2.5px;width:6px;height:6px;border-radius:50%;background:#FFD79A;box-shadow:0 0 10px rgba(255,180,60,.9)}
[data-variant="h"] .copy{border-left-color:rgba(255,255,255,.09)}
[data-variant="h"] .grain{opacity:.05;z-index:0}

/* ===================== I · tactile instrument ===================== */
[data-variant="i"] .screen{background:var(--bg);
  background-image:radial-gradient(rgba(31,35,38,.15) 1px,transparent 1.4px);background-size:19px 19px}
[data-variant="i"] .body{align-items:center;justify-content:center;text-align:center;padding-bottom:4vh}
[data-variant="i"] h1{font-size:68px}
[data-variant="i"] .sub{margin-top:18px;font-size:17px}
[data-variant="i"] .hw{margin-top:50px;position:relative;display:inline-flex;align-items:center;padding:12px 20px;border-radius:22px;
  background:linear-gradient(#EDEBE4,#E4E1D9);box-shadow:inset 0 1px 0 #FCFBF8,inset 0 0 0 1px #D6D3CA,0 1px 2px rgba(31,35,38,.10)}
[data-variant="i"] .hw::before,[data-variant="i"] .hw::after{content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;transform:translateY(-50%);
  background:#D2CFC6;box-shadow:inset 0 1px 1px rgba(31,35,38,.38),0 1px 0 #FCFBF8}
[data-variant="i"] .hw::before{left:7px}
[data-variant="i"] .hw::after{right:7px}
[data-variant="i"] .hw .track{display:inline-flex;align-items:center;padding:5px;border-radius:16px;background:#D5D2C9;box-shadow:inset 0 3px 6px rgba(31,35,38,.22),inset 0 0 0 1px #C6C2B8}
[data-variant="i"] .cap{all:unset;cursor:pointer;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:18px;height:56px;padding:0 16px 0 20px;border-radius:12px;
  background:linear-gradient(#FDFCFA,#F5F3EE);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #E0DDD4,0 3px 0 #CBC8BF,0 5px 8px rgba(31,35,38,.13);
  font:400 14px/1 var(--mono);color:var(--ink1);white-space:nowrap;transition:box-shadow 180ms var(--ease-out),transform 180ms var(--ease-out)}
[data-variant="i"] .cap:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #E0DDD4,0 0 0 #CBC8BF,0 1px 2px rgba(31,35,38,.10);transition-duration:0ms}
[data-variant="i"] .cap:focus-visible{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px var(--accent),0 3px 0 #CBC8BF,0 5px 8px rgba(31,35,38,.13)}
[data-variant="i"] .cap .p{color:var(--ink3)}
[data-variant="i"] .win{display:inline-grid;place-items:center;width:52px;height:30px;border-radius:7px;background:#25272A;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),inset 0 0 0 1px #17191B,0 1px 0 #FCFBF8}
[data-variant="i"] .win i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px rgba(232,98,42,.5);transition:background 220ms ease-in-out,box-shadow 220ms ease-in-out}
[data-variant="i"] .cap[data-state="done"] .win i{background:#3FD07A;box-shadow:0 0 11px rgba(63,208,122,.85)}


/* ===================== J · divider-cut trio (F1 70 + F4 30) ===================== */
[data-variant="j"]{--bg:#060608;--surface:#0B0B0D;--ink1:#EDEDEE;--ink2:#8A8D92;--ink3:#55575C;
  --rule:rgba(255,255,255,.09);--rule-hot:rgba(255,255,255,.16);--wash:rgba(255,255,255,.05);
  --accent:#A9E494;--col:1240px;--pad:0px;--r:0;--display-w:500;--display-track:-.025em}
[data-variant="j"] .top,[data-variant="j"] .bottom{padding-inline:32px}
[data-variant="j"] .stage{gap:0;justify-content:stretch}
[data-variant="j"] .head{padding:0 32px 22px}
[data-variant="j"] .trio{flex:1;min-height:0;border-top:1px solid var(--rule)}
[data-variant="j"] .cell{padding:26px 32px 30px;border-right:1px solid var(--rule);display:grid;grid-template-rows:auto 1fr auto auto auto;gap:0;align-content:stretch}
[data-variant="j"] .cell h3{margin-top:20px}
[data-variant="j"] .cell p{margin-top:8px;min-height:42px}
[data-variant="j"] .cell .spec{margin-top:16px}
[data-variant="j"] .cell:last-child{border-right:0}
[data-variant="j"] .cell .fig{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
[data-variant="j"] .cell svg{width:100%;max-width:340px;height:auto}
[data-variant="j"] .cell svg *{vector-effect:non-scaling-stroke}
[data-variant="j"] .cell svg text{font-family:var(--mono);font-variant-numeric:tabular-nums slashed-zero}
[data-variant="j"] .cell .n{font:500 10px/1 var(--mono);color:var(--ink3);letter-spacing:.1em}
[data-variant="j"] .cell svg .lb{font:400 10px/1 var(--mono);fill:#8A8D92;font-variant-numeric:tabular-nums}
[data-variant="j"] .cell svg .lb.dim{fill:#55575C}
[data-variant="j"] .cell svg .lb.hot{fill:var(--accent)}
[data-variant="j"] .cell svg .wire{animation:march 3.1s linear infinite}
@keyframes march{to{stroke-dashoffset:-16}}
[data-variant="j"] .spec b{color:var(--ink3)}

/* ===================== K · pebble trio (F6 70 + F2 30) ===================== */
[data-variant="k"]{--bg:#F0F3FB;--surface:#FFFFFF;--ink1:#1B2A50;--ink2:#5E6A8A;--ink3:#939CB6;
  --rule:rgba(27,42,80,.07);--rule-hot:rgba(27,42,80,.12);--wash:rgba(27,42,80,.05);
  --accent:#2349DA;--col:1300px;--pad:32px;--r:26px;--display-w:500;--display-track:-.028em}
[data-variant="k"] .trio{gap:26px;flex:1;min-height:0;max-height:440px}
[data-variant="k"] .peb{position:relative;display:flex;flex-direction:column;border-radius:26px;corner-shape:squircle;background:#fff;
  box-shadow:0 24px 48px -12px rgba(50,70,130,.14);overflow:hidden;gap:0}
[data-variant="k"] .peb .viz{position:relative;flex:none;height:250px;overflow:hidden}
[data-variant="k"] .peb .viz svg{display:block;width:100%;height:100%}
[data-variant="k"] .peb .viz svg *{vector-effect:non-scaling-stroke}
[data-variant="k"] .peb .viz::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>");
  -webkit-mask-image:linear-gradient(#000,transparent 86%);mask-image:linear-gradient(#000,transparent 86%)}
[data-variant="k"] .peb .viz svg text{font-family:var(--mono);font-variant-numeric:tabular-nums slashed-zero}
[data-variant="k"] .peb .txt{padding:0 26px 26px;display:grid;gap:6px}
[data-variant="k"] .peb h3{margin:0;font:600 18px/1.3 var(--sans);letter-spacing:-.015em}
[data-variant="k"] .peb p{margin:0;color:var(--ink2);font-size:14px;line-height:1.5}

/* ===================== L · print ledger (F5 60 + F4 40) ===================== */
[data-variant="l"]{--bg:#ECEAE4;--surface:#FFFFFF;--ink1:#2E2E2E;--ink2:#65635E;--ink3:#9C9A94;
  --rule:#DEDCD5;--rule-hot:#C7C4BC;--wash:#E6E4DD;
  --accent:#B23A2E;--col:1080px;--pad:0px;--r:0;--display-w:400;--display-track:-.01em}
[data-variant="l"] .top,[data-variant="l"] .bottom{padding-inline:28px}
[data-variant="l"] .sheet{position:relative;flex:1;min-height:0;margin:14px 0 18px;background:#fff;border:1px solid var(--rule);
  padding:34px 46px 26px;display:flex;flex-direction:column}
[data-variant="l"] .sheet .hd{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--ink1);padding-bottom:12px}
[data-variant="l"] .sheet .hd h2{margin:0;font-family:var(--serif);font-weight:400;font-size:36px;line-height:1;letter-spacing:-.01em}
[data-variant="l"] .sheet .hd span{font:400 11px/1 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums slashed-zero}
[data-variant="l"] .rows{flex:1;min-height:0;display:grid;grid-auto-rows:1fr;margin-top:4px}
[data-variant="l"] .r{border-bottom:1px solid #EFEDE7;align-items:center}
[data-variant="l"] .r:last-child{border-bottom:0}
[data-variant="l"] .r .k{color:var(--accent)}

[data-variant="l"] .band{flex:none;height:26px;margin-top:14px;background-image:radial-gradient(#2E2E2E .9px,transparent 1.4px);background-size:4px 4px;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,#000 0 62%,transparent 100%);mask-image:linear-gradient(90deg,#000 0 62%,transparent 100%)}

/* ===================== M · mosaic gallery (F3 70 + F2 30) ===================== */
[data-variant="m"]{--bg:#0E0E12;--surface:rgba(255,255,255,.05);--ink1:#F2F2F4;--ink2:#A0A0AA;--ink3:#6C6C76;
  --rule:rgba(255,255,255,.10);--rule-hot:rgba(255,255,255,.17);--wash:rgba(255,255,255,.06);
  --accent:#fff;--col:1300px;--pad:32px;--r:10px;--display-w:500;--display-track:-.028em}
[data-variant="m"] .mosaic{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 55% at 18% 30%,#6B4BD6 0%,rgba(107,75,214,0) 62%),
    radial-gradient(46% 60% at 78% 22%,#D64B8A 0%,rgba(214,75,138,0) 60%),
    radial-gradient(52% 62% at 62% 84%,#2E8FD6 0%,rgba(46,143,214,0) 62%),
    radial-gradient(40% 50% at 8% 88%,#D68A2E 0%,rgba(214,138,46,0) 58%),
    #0E0E12;
  opacity:.62}
[data-variant="m"] .mosaic::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(14,14,18,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(14,14,18,.55) 1px,transparent 1px);
  background-size:9px 9px}
[data-variant="m"] .label{color:#C6C6D0}
[data-variant="m"] .plates{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
[data-variant="m"] .pl{padding:16px;border-radius:10px;background:rgba(10,10,14,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;gap:12px}
[data-variant="m"] .pl .id{font:500 10px/1 var(--mono);color:var(--ink3);letter-spacing:.1em}
[data-variant="m"] .pl h3{margin:0;font:500 14.5px/1.25 var(--sans);letter-spacing:-.01em}
[data-variant="m"] .pl small{font:400 10.5px/1.4 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}

/* ===================== N · emissive metrics (F8 70 + F1 30) ===================== */
[data-variant="n"]{--bg:#0B0B0F;--surface:#101016;--ink1:#D2D2DA;--ink2:#6E6E7A;--ink3:#4A4A56;
  --rule:rgba(255,255,255,.07);--rule-hot:rgba(255,255,255,.12);--wash:rgba(255,255,255,.05);
  --accent:#4D9FFF;--col:1080px;--pad:28px;--r:8px;--display-w:500;--display-track:-.03em}
[data-variant="n"] .screen{background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px);background-size:100% 44px}
[data-variant="n"] .plot{display:grid;grid-template-columns:auto auto auto;justify-content:start;align-items:center;gap:15px 22px;font-variant-numeric:tabular-nums}
[data-variant="n"] .plot .fid{font:500 11px/1 var(--mono);color:var(--ink2);letter-spacing:.08em}
[data-variant="n"] .plot .dots{display:flex;gap:7px;align-items:center}
[data-variant="n"] .plot .dots i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px rgba(77,159,255,.55)}
[data-variant="n"] .plot .nm{font:400 12px/1 var(--mono);color:var(--ink3)}
[data-variant="n"] .plot .ct{font:500 12px/1 var(--mono);color:var(--ink1)}

/* ===================== O · frozen interaction (F1 60 + F3 40) ===================== */
[data-variant="o"]{--bg:#0A0710;--surface:#141019;--ink1:#EDEDEE;--ink2:#8B8895;--ink3:#5C5866;
  --rule:rgba(255,255,255,.07);--rule-hot:rgba(255,255,255,.13);--wash:rgba(255,255,255,.05);
  --accent:#A78BFA;--col:1080px;--pad:28px;--r:12px;--display-w:500;--display-track:-.03em}
[data-variant="o"] .screen::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 42%,rgba(167,139,250,.16) 0%,rgba(167,139,250,.04) 42%,transparent 74%)}
[data-variant="o"] .frag{width:min(620px,100%);margin:0 auto;border-radius:12px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--rule),0 30px 70px -30px rgba(0,0,0,.9);overflow:hidden}
[data-variant="o"] .frag .bar{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--rule);
  font:400 11px/1 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
[data-variant="o"] .frag .q{padding:20px 18px 6px;font:500 16px/1.4 var(--sans);letter-spacing:-.01em}
[data-variant="o"] .frag .opts{padding:8px 12px 12px;display:grid;gap:6px}
[data-variant="o"] .frag .op{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:12px;padding:10px 8px;border-radius:8px;font-size:14px}
[data-variant="o"] .frag .op.on{background:rgba(167,139,250,.10);box-shadow:inset 0 0 0 1px rgba(167,139,250,.34)}
[data-variant="o"] .frag .box{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--rule-hot)}
[data-variant="o"] .frag .op.on .box{background:var(--accent);box-shadow:none;position:relative}
[data-variant="o"] .frag .op.on .box::after{content:"";position:absolute;left:4px;top:2px;width:4px;height:7px;border:solid #140F1E;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
[data-variant="o"] .frag .wt{font:500 12px/1 var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums}
[data-variant="o"] .frag .op.on .wt{color:var(--ink1)}
[data-variant="o"] .frag .ft{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--rule);
  font:400 11.5px/1 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
[data-variant="o"] .frag .ft b{color:#5BE49B;font-weight:500}
[data-variant="o"] .cur{position:absolute;width:14px;height:19px;pointer-events:none}

/* ===================== P · chapters (F2 70 + F3 30) ===================== */
[data-variant="p"]{--bg:#F7F7F8;--surface:#FFFFFF;--ink1:#2C2C2E;--ink2:#6B7280;--ink3:#A0A4AC;
  --rule:#E6E6E9;--rule-hot:#D6D6DA;--wash:#EFEFF1;
  --accent:#3770E9;--col:1240px;--pad:36px;--r:14px;--display-w:500;--display-track:-.024em}
[data-variant="p"] .chap{display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:center;flex:1;min-height:0}
[data-variant="p"] .rail{display:grid;gap:0;position:relative}
[data-variant="p"] .rail::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--rule)}
[data-variant="p"] .rail .st{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:11px 0 11px 20px;position:relative}
[data-variant="p"] .rail .st::before{content:"";position:absolute;left:0;top:16px;width:1px;height:20px;background:transparent}
[data-variant="p"] .rail .st.on::before{background:var(--accent)}
[data-variant="p"] .rail .st .ix{font:500 11px/1.4 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
[data-variant="p"] .rail .st .lb{font:500 15px/1.4 var(--sans);color:var(--ink3);letter-spacing:-.01em}
[data-variant="p"] .rail .st.on .lb{color:var(--ink1)}
[data-variant="p"] .rail .st.on .ix{color:var(--accent)}
[data-variant="p"] .panel{position:relative;border-radius:14px;background:#fff;box-shadow:0 8px 30px rgba(16,24,40,.06),inset 0 0 0 1px var(--rule);
  padding:30px 32px;display:grid;gap:16px;align-content:center;min-height:270px}
[data-variant="p"] .rail .st{cursor:pointer;transition:color 200ms ease-in-out}
[data-variant="p"] .rail .st::after{content:"";position:absolute;left:0;top:16px;width:1px;height:20px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
[data-variant="p"] .rail .st.on::after{transform:scaleY(1)}
[data-variant="p"] .rail .st.on::before{background:transparent}
[data-variant="p"] .panel .swapzone{display:grid}
[data-variant="p"] .panel .swapzone>div{display:grid;gap:16px;align-content:center}
[data-variant="p"] .panel .swapzone>*{grid-area:1/1;transition:opacity 180ms ease-in-out,transform 180ms ease-in-out,filter 180ms ease-in-out}
[data-variant="p"] .panel[data-swap="out"] .swapzone>*{opacity:0;transform:translateY(-5px);filter:blur(2px)}
[data-variant="p"] .panel h3{margin:0;font:500 22px/1.25 var(--sans);letter-spacing:-.018em}
[data-variant="p"] .panel p{margin:0;color:var(--ink2);font-size:15px;line-height:1.55;max-width:52ch}
[data-variant="p"] .panel .spec{color:var(--ink3)}
[data-variant="p"] .panel .spec b{color:var(--ink2)}

/* ===================== Q · outlined bento (F1-wide 85 + F8 15) ===================== */
[data-variant="q"]{--bg:#000;--surface:#0A0A0A;--ink1:#EDEDED;--ink2:#A1A1A1;--ink3:#666;
  --rule:rgba(255,255,255,.10);--rule-hot:rgba(255,255,255,.16);--wash:rgba(255,255,255,.06);
  --accent:#fff;--col:1300px;--pad:24px;--r:12px;--display-w:500;--display-track:-.05em}
[data-variant="q"] .bento{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0;max-height:470px}
[data-variant="q"] .bc{border-radius:12px;background:#0A0A0A;box-shadow:0 0 0 1px rgba(255,255,255,.10);padding:24px;display:grid;gap:14px;align-content:start;min-height:0}
[data-variant="q"] .bc h3{margin:0;font:500 18px/1.3 var(--sans);letter-spacing:-.03em}
[data-variant="q"] .bc p{margin:0;color:var(--ink2);font-size:14px;line-height:1.5}
[data-variant="q"] .bc .ml{margin:0;padding:0;list-style:none;display:grid;gap:8px;font:400 12px/1.4 var(--mono);color:var(--ink3)}
[data-variant="q"] .bc .ml li::before{content:"- ";color:#3A3A3A}
[data-variant="q"] .bc{position:relative;transition:box-shadow 230ms cubic-bezier(.22,1,.36,1),background 230ms cubic-bezier(.22,1,.36,1)}
[data-variant="q"] .bc::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:0;
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,0) 46%);
  transition:opacity 230ms cubic-bezier(.22,1,.36,1)}
[data-variant="q"] .bc:hover::after,[data-variant="q"] .bc:focus-within::after{opacity:1;transition-duration:230ms}
[data-variant="q"] .bc:hover,[data-variant="q"] .bc:focus-within{box-shadow:0 0 0 1px rgba(255,255,255,.26)}
[data-variant="q"] .bc:hover .ml,[data-variant="q"] .bc:focus-within .ml{color:var(--ink2)}
[data-variant="q"] .bc .ml{transition:color 230ms cubic-bezier(.22,1,.36,1)}
[data-variant="q"] .bc.focal{box-shadow:0 0 0 1px rgba(255,255,255,.20)}
[data-variant="q"] .bc.focal p,[data-variant="q"] .bc.focal .ml{color:var(--ink2)}
[data-variant="q"] .bc:not(.focal) h3{color:#B4B4B4}

/* ===================== R · instrument HUD (F7 60 + F8 40) ===================== */
[data-variant="r"]{--bg:#040607;--surface:#0A0D0F;--ink1:#E6E2D8;--ink2:#7C7A72;--ink3:#4E4C46;
  --rule:rgba(255,255,255,.07);--rule-hot:rgba(255,255,255,.12);--wash:rgba(255,255,255,.05);
  --accent:#FFB43C;--col:1080px;--pad:28px;--r:10px;--display-w:500;--display-track:-.03em}
[data-variant="r"] .screen{background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:40px 40px}
[data-variant="r"] .gauge{display:block;width:min(660px,100%);height:auto;margin:0 auto}
[data-variant="r"] .gauge .tk{stroke:#2E3033}
[data-variant="r"] .gauge .tk.on{stroke:var(--accent)}
[data-variant="r"] .gauge .rd{font:500 76px/1 var(--mono);fill:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
[data-variant="r"] .gauge .un{font:400 12px/1 var(--mono);fill:#7C7A72;letter-spacing:.14em}
[data-variant="r"] .gauge .sp{font:400 11px/1 var(--mono);fill:#4E4C46;letter-spacing:.06em}
[data-variant="r"] .br{stroke:#3A3C3E;stroke-width:1;fill:none}
[data-variant="r"] .reads{display:flex;justify-content:center;gap:44px;font:400 11px/1 var(--mono);color:var(--ink3);letter-spacing:.08em;font-variant-numeric:tabular-nums}
[data-variant="r"] .reads b{font-weight:500;color:var(--ink2)}

/* ===================== S · paper slips (F5 55 + F6 45) ===================== */
[data-variant="s"]{--bg:#F2EFE8;--surface:#FFFFFF;--ink1:#26251F;--ink2:#6B6960;--ink3:#9C998E;
  --rule:#E0DCD1;--rule-hot:#CBC7BA;--wash:#EAE6DC;
  --accent:#937D46;--col:1240px;--pad:32px;--r:6px;--display-w:400;--display-track:-.01em}
[data-variant="s"] .slips{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-items:center}
[data-variant="s"] .slip{position:relative;background:#fff;border:1px solid var(--rule);padding:24px 22px 20px;display:grid;gap:10px;
  box-shadow:0 12px 26px -18px rgba(38,37,31,.4)}
[data-variant="s"] .slip:nth-child(1){transform:rotate(-2.2deg)}
[data-variant="s"] .slip:nth-child(2){transform:rotate(1.4deg)}
[data-variant="s"] .slip:nth-child(3){transform:rotate(-.8deg)}
[data-variant="s"] .slip .rv{font:500 11px/1 var(--mono);color:var(--accent);letter-spacing:.1em;font-variant-numeric:tabular-nums slashed-zero}
[data-variant="s"] .slip h3{margin:0;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;letter-spacing:-.01em}
[data-variant="s"] .slip p{margin:0;color:var(--ink2);font-size:13.5px;line-height:1.5}
[data-variant="s"] .slip .cm2{position:absolute;width:16px;height:16px}
[data-variant="s"] .slip .cm2::before,[data-variant="s"] .slip .cm2::after{content:"";position:absolute;background:#C0BCAF}
[data-variant="s"] .slip .cm2::before{width:12px;height:1px}
[data-variant="s"] .slip .cm2::after{width:1px;height:12px}
[data-variant="s"] .slip .cm2.a{left:-15px;top:-15px}[data-variant="s"] .slip .cm2.a::before{left:0;top:16px}[data-variant="s"] .slip .cm2.a::after{left:16px;top:0}
[data-variant="s"] .slip .cm2.b{right:-15px;bottom:-15px}[data-variant="s"] .slip .cm2.b::before{right:0;bottom:16px}[data-variant="s"] .slip .cm2.b::after{right:16px;bottom:0}
[data-variant="s"] .grain{opacity:.05}

/* ===================== T · editorial close (F1 85 + F8 15) ===================== */
[data-variant="t"]{--bg:#0A0C10;--surface:#0F1217;--ink1:#EDEDEE;--ink2:#8B8E93;--ink3:#5D5E63;
  --rule:rgba(255,255,255,.08);--rule-hot:rgba(255,255,255,.16);--wash:rgba(255,255,255,.06);
  --accent:#5B8CFF;--col:1120px;--pad:28px;--r:0;--display-w:500;--display-track:-.03em}
[data-variant="t"] .body{align-items:center;justify-content:center;text-align:center}
[data-variant="t"] h1{font-size:72px}
[data-variant="t"] .cmd{margin-top:38px}
[data-variant="t"] .lit2{position:absolute;left:50%;bottom:16%;width:min(420px,60%);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);filter:blur(.4px);opacity:.85}
[data-variant="t"] .lit2::after{content:"";position:absolute;left:50%;top:-30px;width:60%;height:60px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(91,140,255,.20),transparent 70%);filter:blur(8px)}

/* ===================== U · proof diptych ===================== */
[data-variant="u"] .body{justify-content:center;gap:22px}
[data-variant="u"] h2.head{font-size:38px}
[data-variant="u"] .diptych{position:relative;width:100%;aspect-ratio:3276/1602;max-height:56vh;overflow:hidden;border:1px solid var(--rule);align-self:center}
[data-variant="u"] .diptych img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-variant="u"] .diptych .cut{position:absolute;inset:0;clip-path:inset(0 var(--wipe,50%) 0 0)}
[data-variant="u"] .diptych .cut::after{content:"";position:absolute;inset:0;background:rgba(10,10,12,.55)}
[data-variant="u"] .diptych .bar{position:absolute;top:0;bottom:0;left:calc(100% - var(--wipe,50%));width:1px;background:var(--accent);box-shadow:0 0 14px rgba(91,140,255,.6)}
[data-variant="u"] .diptych{animation:wipe 6.5s linear infinite}
@keyframes wipe{0%{--wipe:66%}50%{--wipe:34%}100%{--wipe:66%}}
@property --wipe{syntax:'<percentage>';inherits:true;initial-value:50%}
[data-variant="u"] .dcap{display:flex;justify-content:space-between;font:400 11px/1.5 var(--mono);color:var(--ink3);letter-spacing:.06em}
[data-variant="u"] .dcap b{font-weight:500;color:var(--ink2)}

/* ===================== V · the refusals ===================== */
[data-variant="v"] .body{justify-content:center}
[data-variant="v"] h2.head{font-family:var(--serif);font-weight:400;font-size:44px;letter-spacing:-.01em}
[data-variant="v"] .no{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
[data-variant="v"] .no i{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule);font-style:normal;font-size:15px;color:var(--ink2)}
[data-variant="v"] .no i s{position:relative;text-decoration:none}
[data-variant="v"] .no i s::after{content:"";position:absolute;left:-2px;right:-2px;top:calc(50% - .5px);height:1px;background:var(--accent);opacity:.7}
[data-variant="v"] .no i em{font-style:normal;font:400 10.5px/1 var(--mono);color:var(--ink3);min-width:22px;font-variant-numeric:tabular-nums}
[data-variant="v"] .nofoot{margin-top:22px;font:400 11px/1 var(--mono);color:var(--ink3);letter-spacing:.05em}

/* ===================== W · two registers ===================== */
[data-variant="w"] .body{justify-content:center;gap:0}
[data-variant="w"] h2.head{font-size:38px}
[data-variant="w"] .reg{margin-top:34px;display:grid;gap:26px;max-width:820px}
[data-variant="w"] .reg .tr{position:relative;height:56px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
[data-variant="w"] .reg .tr .tk{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.10)}
[data-variant="w"] .reg .dot{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;margin-left:-6px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px rgba(91,228,155,.55)}
[data-variant="w"] .reg .a .dot{animation:runlin 4s linear infinite}
[data-variant="w"] .reg .b .dot{background:#EDEDEE;box-shadow:0 0 16px rgba(255,255,255,.4);animation:runease 2.6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes runlin{to{left:100%}}
@keyframes runease{0%{left:0}45%{left:100%}55%{left:100%}100%{left:0}}
[data-variant="w"] .reg .lab{display:flex;justify-content:space-between;margin-bottom:9px;font:400 11px/1 var(--mono);color:var(--ink3);letter-spacing:.06em}
[data-variant="w"] .reg .lab b{font-weight:500;color:var(--ink1);letter-spacing:0}
[data-variant="w"] .reg .a .lab b{color:var(--accent)}
[data-variant="w"] .regfoot{margin-top:30px;font:400 12px/1 var(--mono);color:var(--ink3)}

/* ===================== X · stop conditions ===================== */
[data-variant="x"] .screen{background-image:radial-gradient(rgba(31,35,38,.14) 1px,transparent 1.4px);background-size:19px 19px}
[data-variant="x"] .body{display:grid;grid-template-columns:300px minmax(0,420px);align-items:center;gap:80px;justify-content:center;align-content:center}
[data-variant="x"] .knob{position:relative;width:300px;height:300px;justify-self:center}
[data-variant="x"] .knob svg{width:100%;height:100%;display:block}
[data-variant="x"] .knob .face{fill:#FBFAF7;stroke:#DBD8D0}
[data-variant="x"] .knob .det{stroke:#B4AFA3}
[data-variant="x"] .knob .det.on{stroke:var(--accent);stroke-width:2}
[data-variant="x"] .knob .ptr{stroke:var(--ink1);stroke-width:2.5;stroke-linecap:round;transition:transform 420ms cubic-bezier(.34,1.28,.64,1);transform-box:view-box;transform-origin:119px 119px}
[data-variant="x"] .stops{display:grid;gap:2px;margin-top:22px}
[data-variant="x"] .stops button{all:unset;cursor:pointer;display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:baseline;padding:12px 12px;border-radius:9px;transition:background 200ms ease-in-out}
[data-variant="x"] .stops button:hover,[data-variant="x"] .stops button:focus-visible{background:var(--wash)}
[data-variant="x"] .stops button i{font-style:normal;font:400 10.5px/1.4 var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
[data-variant="x"] .stops button span{font:500 15px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink3)}
[data-variant="x"] .stops button small{display:block;font:400 13px/1.45 var(--sans);color:var(--ink3);opacity:0;max-height:0;transition:opacity 220ms ease-in-out}
[data-variant="x"] .stops button[aria-pressed="true"] span{color:var(--ink1)}
[data-variant="x"] .stops button[aria-pressed="true"] i{color:var(--accent)}
[data-variant="x"] .stops button[aria-pressed="true"] small{opacity:1;max-height:60px;margin-top:5px}

/* ===================== Y · contact sheet ===================== */
[data-variant="y"] .body{justify-content:center}
[data-variant="y"] h2.head{font-family:var(--serif);font-weight:400;font-size:42px;letter-spacing:-.01em}
[data-variant="y"] .sheetgrid{position:relative;margin-top:30px;display:grid;grid-template-columns:repeat(19,1fr);gap:9px;overflow:hidden}
[data-variant="y"] .sheetgrid .t{position:relative;aspect-ratio:62/48;border:1px solid var(--rule);display:grid;place-items:center}
[data-variant="y"] .sheetgrid .t.l{background:#FFFDF9}
[data-variant="y"] .sheetgrid .t.d{background:#26251F;border-color:#26251F}
[data-variant="y"] .sheetgrid .t.b{background:linear-gradient(135deg,#FFFDF9 0 50%,#26251F 50% 100%)}
[data-variant="y"] .sheetgrid .t.m{background:#FFFDF9;background-image:repeating-linear-gradient(45deg,#C7C3B7 0 1px,transparent 1px 5px)}
[data-variant="y"] .sheetgrid .t i{display:block;background:#9B988E}
[data-variant="y"] .sheetgrid .t.d i{background:#7E7C72}
[data-variant="y"] .sheetgrid .scan{position:absolute;top:0;bottom:0;width:120px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(178,58,46,.13),transparent);animation:scanx 7s linear infinite}
@keyframes scanx{from{left:-120px}to{left:100%}}
[data-variant="y"] .leg{margin-top:26px;display:flex;gap:30px;font:400 11px/1 var(--mono);color:var(--ink3);letter-spacing:.04em;flex-wrap:wrap}
[data-variant="y"] .leg span{display:inline-flex;align-items:center;gap:8px}
[data-variant="y"] .leg em{font-style:normal;width:16px;height:12px;border:1px solid var(--rule)}
[data-variant="y"] .leg b{font-weight:500;color:var(--ink2)}

/* ===================== Z · clash matrix ===================== */
[data-variant="z"] .body{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;align-content:center}
[data-variant="z"] .mx{display:grid;grid-template-columns:168px repeat(8,40px);gap:2px}
[data-variant="z"] .mx .hd{font:400 9.5px/1 var(--mono);color:var(--ink3);height:64px;display:flex;align-items:flex-end;justify-content:center}
[data-variant="z"] .mx .hd span{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.05em}
[data-variant="z"] .mx .rw{font:400 10.5px/1 var(--mono);color:var(--ink2);display:flex;align-items:center;justify-content:flex-end;padding-right:12px;height:40px;white-space:nowrap}
[data-variant="z"] .mx .c{all:unset;box-sizing:border-box;height:40px;cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow 180ms ease-in-out,background 180ms ease-in-out}
[data-variant="z"] .mx .c:hover,[data-variant="z"] .mx .c.on{box-shadow:inset 0 0 0 1px var(--rule-hot);background:var(--wash)}
[data-variant="z"] .mx .c.self{box-shadow:none;background:rgba(255,255,255,.02)}
[data-variant="z"] .mx .c.ok i{width:12px;height:12px;background:var(--accent);display:block}
[data-variant="z"] .mx .c.no{position:relative}
[data-variant="z"] .mx .c.no::before,[data-variant="z"] .mx .c.no::after{content:"";position:absolute;left:11px;right:11px;top:19.5px;height:1px;background:#C25B52}
[data-variant="z"] .mx .c.no::before{transform:rotate(45deg)}
[data-variant="z"] .mx .c.no::after{transform:rotate(-45deg)}
[data-variant="z"] .read{max-width:380px}
[data-variant="z"] .read .k{font:400 10.5px/1 var(--mono);color:var(--ink3);letter-spacing:.08em}
[data-variant="z"] .read h3{margin:12px 0 0;font:500 20px/1.3 var(--sans);letter-spacing:-.02em;min-height:52px}
[data-variant="z"] .read p{margin:10px 0 0;color:var(--ink2);font-size:14px;line-height:1.55;min-height:66px}
[data-variant="z"] .read .tag{margin-top:16px;display:inline-block;font:400 10.5px/1 var(--mono);letter-spacing:.06em;padding:6px 10px;box-shadow:inset 0 0 0 1px var(--rule-hot);color:var(--ink3)}
[data-variant="z"] .read .tag.ok{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(91,140,255,.4)}
[data-variant="z"] .read .tag.no{color:#C25B52;box-shadow:inset 0 0 0 1px rgba(194,91,82,.4)}

/* ===================== A · a real run ===================== */
[data-variant="A"] .body{justify-content:center;align-items:center}
[data-variant="A"] .term{width:min(760px,100%);border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule),0 30px 70px -30px rgba(0,0,0,.9);overflow:hidden}
[data-variant="A"] .term .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--rule)}
[data-variant="A"] .term .bar i{width:8px;height:8px;border-radius:50%;background:#2A2E33}
[data-variant="A"] .term .bar span{margin-left:8px;font:400 11px/1 var(--mono);color:var(--ink3)}
[data-variant="A"] .term .log{padding:18px 20px 22px;display:grid;gap:7px;font:400 12.5px/1.6 var(--mono);min-height:280px;align-content:start}
[data-variant="A"] .term .log div{opacity:0;transform:translateY(3px);transition:opacity 260ms ease-out,transform 260ms ease-out}
[data-variant="A"] .term .log div.in{opacity:1;transform:none}
[data-variant="A"] .term .log .p{color:var(--ink1)}
[data-variant="A"] .term .log .p em{font-style:normal;color:var(--ink3);margin-right:8px}
[data-variant="A"] .term .log .o{color:var(--ink2);padding-left:16px}
[data-variant="A"] .term .log .o b{font-weight:400;color:var(--ink3);display:inline-block;min-width:78px}
[data-variant="A"] .term .log .o u{text-decoration:none;color:var(--accent)}
[data-variant="A"] .term .log .sp{height:6px}

/* ===================== B · works with ===================== */
[data-variant="B"] .top,[data-variant="B"] .bottom{padding-inline:32px}
[data-variant="B"] .body{justify-content:center;gap:22px}
[data-variant="B"] h2.head{padding-inline:32px;font-size:38px;max-width:22ch}
[data-variant="B"] .headsub{padding-inline:32px}
[data-variant="B"] .belt{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent)}
[data-variant="B"] .belt .track{display:flex;gap:14px;width:max-content;animation:belt 34s linear infinite}
[data-variant="B"] .belt.r .track{animation-duration:44s;animation-direction:reverse}
[data-variant="B"] .belt i{flex:none;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;background:#fff;
  box-shadow:0 1px 0 rgba(16,24,40,.04),0 8px 22px -14px rgba(16,24,40,.35),inset 0 0 0 1px var(--rule);
  font:500 16px/1 var(--sans);letter-spacing:-.01em;color:var(--ink1);font-style:normal;white-space:nowrap}
[data-variant="B"] .belt i b{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.5}
[data-variant="B"] .belt i.q{background:transparent;box-shadow:inset 0 0 0 1px var(--rule-hot);color:var(--ink3);font:400 14px/1 var(--mono)}
@keyframes belt{to{transform:translateX(-50%)}}

/* ===================== C · the measured page ===================== */
[data-variant="C"] .body{justify-content:center}
[data-variant="C"] h2.head{font-size:38px}
[data-variant="C"] .meas{margin-top:34px;display:grid;gap:15px}
[data-variant="C"] .meas .m{display:grid;grid-template-columns:96px 1fr 68px;align-items:center;gap:20px}
[data-variant="C"] .meas .m .s{font:500 12px/1 var(--mono);color:var(--ink2);letter-spacing:.04em}
[data-variant="C"] .meas .m .v{font:400 12px/1 var(--mono);color:var(--ink3);text-align:right;font-variant-numeric:tabular-nums}
[data-variant="C"] .meas .m .ch{position:relative;height:15px}
[data-variant="C"] .meas .m .ch i{position:absolute;top:7px;left:0;height:1px;background:var(--rule-hot)}
[data-variant="C"] .meas .m .ch i::before,[data-variant="C"] .meas .m .ch i::after{content:"";position:absolute;top:-6px;width:1px;height:13px;background:var(--rule-hot)}
[data-variant="C"] .meas .m .ch i::before{left:0}
[data-variant="C"] .meas .m .ch i::after{right:0}
[data-variant="C"] .meas .m.hot .ch i,[data-variant="C"] .meas .m.hot .ch i::before,[data-variant="C"] .meas .m.hot .ch i::after{background:var(--accent)}
[data-variant="C"] .meas .m.hot .s,[data-variant="C"] .meas .m.hot .v{color:var(--accent)}
[data-variant="C"] .cfoot{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule);display:flex;gap:34px;flex-wrap:wrap;font:400 11.5px/1 var(--mono);color:var(--ink3)}
[data-variant="C"] .cfoot b{font-weight:500;color:var(--ink2)}

/* ===================== D · both modes ===================== */
[data-variant="D"] .body{justify-content:center}
[data-variant="D"] h2.head{font-size:36px}
[data-variant="D"] .pair{margin-top:28px;display:grid;grid-template-columns:1fr 236px 1fr;gap:0;align-items:stretch}
[data-variant="D"] .sk{border-radius:12px;padding:22px;display:grid;gap:12px;align-content:start}
[data-variant="D"] .sk.lt{background:#fff;box-shadow:0 10px 30px -16px rgba(16,24,40,.3)}
[data-variant="D"] .sk.dk{background:#0C0D10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
[data-variant="D"] .sk .cap{font:400 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--ink3)}
[data-variant="D"] .sk.dk .cap{color:#5E6168}
[data-variant="D"] .sk .row{border-radius:8px;padding:12px 14px;display:grid;gap:7px;transition:box-shadow 200ms ease-in-out,background 200ms ease-in-out}
[data-variant="D"] .sk.lt .row{background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 16px -10px rgba(16,24,40,.3)}
[data-variant="D"] .sk.dk .row{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
[data-variant="D"] .sk .row b{display:block;height:7px;border-radius:3px;background:#D3D6DE}
[data-variant="D"] .sk.dk .row b{background:#2A2C31}
[data-variant="D"] .sk .row .ac{background:var(--accent)}
[data-variant="D"] .sk.dk .row .ac{background:#93A7CE}
[data-variant="D"] .sk .row.on{box-shadow:0 0 0 1.5px var(--accent)}
[data-variant="D"] .sk.dk .row.on{box-shadow:inset 0 0 0 1.5px #93A7CE}
[data-variant="D"] .mid{display:grid;align-content:center;gap:2px;padding:0 16px}
[data-variant="D"] .mid button{all:unset;cursor:pointer;display:grid;gap:3px;padding:10px 12px;border-radius:8px;text-align:center;transition:background 200ms ease-in-out}
[data-variant="D"] .mid button:hover,[data-variant="D"] .mid button[aria-pressed="true"]{background:var(--wash)}
[data-variant="D"] .mid button i{font-style:normal;font:400 10px/1 var(--mono);letter-spacing:.07em;color:var(--ink3)}
[data-variant="D"] .mid button span{font:500 13px/1.3 var(--sans);color:var(--ink2);letter-spacing:-.01em}
[data-variant="D"] .mid button[aria-pressed="true"] span{color:var(--ink1)}
[data-variant="D"] .mid button[aria-pressed="true"] i{color:var(--accent)}
[data-variant="D"] .dfoot{margin-top:24px;font:400 11.5px/1 var(--mono);color:var(--ink3);text-align:center}

/* ---------- the transition between directions: cross-fade + 2px blur, 700ms ---------- */
::view-transition-old(root){animation:vt-out 700ms cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:vt-in 700ms cubic-bezier(.22,1,.36,1) both}
@keyframes vt-out{to{opacity:0;filter:blur(2px)}}
@keyframes vt-in{from{opacity:0;filter:blur(2px)}}

/* ---------- 1280x720 and below: tighten the vertical budget ---------- */
@media (max-height:760px){
  h1{font-size:56px}
  [data-variant="a"] h1{font-size:38px}
  [data-variant="b"] h1{font-size:72px}
  [data-variant="c"] h1{font-size:64px}
  [data-variant="c"] .mat .in{padding:44px 48px 32px}
  [data-variant="c"] .meta{top:52px}
  [data-variant="c"] .body{padding:16px 0 22px}
  [data-variant="d"] h1{font-size:68px}
  [data-variant="e"] .ring{width:min(320px,44vh);height:min(320px,44vh)}
  [data-variant="f"] h1{font-size:58px}
  [data-variant="g"] h1{font-size:40px}
  [data-variant="h"] h1{font-size:64px}
  [data-variant="h"] .lit{margin-top:40px}
  [data-variant="i"] h1{font-size:60px}
  [data-variant="i"] .hw{margin-top:38px}
}
/* ---------- 390x844: stack ---------- */
@media (max-width:720px){
  .col{padding:0 16px}
  .top{height:52px}
  .bottom{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;row-gap:10px;height:auto;padding:14px 0 18px}
  .right{display:contents}
  .label{grid-column:1;grid-row:1}
  .nums{grid-column:1/-1;grid-row:2}
  .ctl{grid-column:2;grid-row:1;justify-self:end}
  h1{font-size:40px}
  .sub{font-size:15px}
  .cmd{font-size:12px;gap:10px;padding:0 12px}
  .cmd .p{display:none}
  .copy{grid-template-columns:14px;gap:0;padding-left:10px}
  .copy .swap{display:none}
  .cb{width:38px;height:38px}
  .label{font-size:10px}
  [data-variant="a"] .body{grid-template-columns:1fr;gap:16px;align-content:center;padding-bottom:0}
  [data-variant="a"] h1{font-size:34px}
  [data-variant="a"] .sub{font-size:14.5px;max-width:none}
  [data-variant="a"] .cmd{margin-top:22px}
  [data-variant="a"] .plate{overflow:hidden;justify-content:flex-start}
  [data-variant="a"] .core{max-width:none;width:100%;max-height:40vh;transform:scale(1.32) translateX(-5%);transform-origin:left center}
  [data-variant="a"] .core .ro{display:none}
  [data-variant="b"] h1{font-size:44px}
  [data-variant="b"] .sub{font-size:16px}
  [data-variant="b"] .pebble{margin-top:28px;border-radius:22px}
  [data-variant="c"] .body{padding:10px 0 16px}
  [data-variant="c"] .mat .in{padding:24px 20px}
  [data-variant="c"] h1{font-size:44px}
  [data-variant="c"] .sub{font-size:15px}
  [data-variant="c"] .cmd{margin-top:22px}
  [data-variant="c"] .meta{position:static;margin-top:22px;font-size:11px}
  [data-variant="c"] .slab{height:24%}
  [data-variant="c"] .cm{display:none}
  [data-variant="d"] h1{font-size:44px}
  [data-variant="d"] .beam{left:calc(100% - 2vw);width:70vw;min-width:0;top:-10vh;transform:translateX(-50%) rotate(40deg)}
  [data-variant="e"] .body{grid-template-columns:1fr;gap:20px;align-content:center;justify-items:start;padding-bottom:0}
  [data-variant="e"] h1{font-size:34px}
  [data-variant="e"] .ring{width:min(220px,28vh);height:min(220px,28vh);justify-self:center}
  [data-variant="e"] .lines{justify-self:start;grid-auto-flow:column;gap:18px;font-size:12px;min-width:0}
  [data-variant="f"] h1{font-size:42px;max-width:none}
  [data-variant="f"] .sub{font-size:16px}
  [data-variant="f"] .scaffold i{background-size:50% 100%}
  [data-variant="f"] .scaffold i::before,[data-variant="f"] .scaffold i::after{display:none}
  [data-variant="g"] .body{grid-template-columns:1fr;gap:14px;align-content:center}
  [data-variant="g"] h1{font-size:38px;max-width:none}
  [data-variant="g"] .iso{max-width:100%;height:auto;max-height:36vh}
  [data-variant="h"] h1{font-size:42px}
  [data-variant="h"] .lit{margin-top:36px}
  [data-variant="h"] .lit::before{width:120vw;height:210px}
  [data-variant="i"] h1{font-size:42px}
  [data-variant="i"] .hw{margin-top:32px;padding:10px 14px;border-radius:18px}
  [data-variant="i"] .hw::before{left:4px}
  [data-variant="i"] .hw::after{right:4px}
  [data-variant="i"] .hw .track{padding:4px;border-radius:13px}
  [data-variant="i"] .cap{height:44px;padding:0 10px;gap:10px;font-size:11px;border-radius:10px}
  [data-variant="i"] .cap .p{display:none}
  [data-variant="i"] .win{width:34px;height:22px}
  [data-variant="i"] .win i{width:7px;height:7px}
  /* catalog kinds: the grids collapse, the dense kinds show fewer items */
  .head{font-size:26px}
  .stage{gap:18px}
  [data-variant="j"] .top,[data-variant="j"] .bottom,[data-variant="l"] .top,[data-variant="l"] .bottom{padding-inline:16px}
  [data-variant="j"] .head{padding:0 16px 14px}
  [data-variant="j"] .trio{grid-template-columns:1fr;grid-auto-rows:1fr}
  [data-variant="j"] .cell{padding:16px;border-right:0;border-bottom:1px solid var(--rule);grid-template-rows:auto auto auto auto}
  [data-variant="j"] .cell:last-child{border-bottom:0}
  [data-variant="j"] .cell .fig{display:none}
  [data-variant="j"] .cell h3{margin-top:0}
  [data-variant="j"] .cell p{min-height:0}
  [data-variant="k"] .trio{grid-template-columns:1fr;gap:14px;max-height:none;overflow:hidden}
  [data-variant="k"] .peb:nth-child(3){display:none}
  [data-variant="k"] .peb .viz{min-height:96px}
  [data-variant="k"] .peb .txt{padding:0 18px 18px}
  [data-variant="l"] .sheet{padding:20px 18px 16px}
  [data-variant="l"] .sheet .hd h2{font-size:24px}
  [data-variant="l"] .sheet .hd span{display:none}
  [data-variant="l"] .r{grid-template-columns:30px 1fr auto;gap:8px;font-size:12.5px}
  [data-variant="l"] .band{height:16px}
  [data-variant="m"] .plates{grid-template-columns:1fr 1fr;gap:10px}
  [data-variant="m"] .pl{padding:12px;gap:8px}
  [data-variant="m"] .pl h3{font-size:12.5px}
  [data-variant="m"] .sw i{width:18px;height:24px}
  [data-variant="n"] .plot{gap:11px 14px}
  [data-variant="n"] .plot .dots i{width:7px;height:7px}
  [data-variant="n"] .plot .dots{gap:5px}
  [data-variant="o"] .frag .q{font-size:15px}
  [data-variant="o"] .frag .op{font-size:13px;padding:9px 6px}
  [data-variant="p"] .chap{grid-template-columns:1fr;gap:22px}
  [data-variant="p"] .rail{grid-auto-flow:row}
  [data-variant="p"] .rail .st{padding:7px 0 7px 16px}
  [data-variant="p"] .panel{min-height:0;padding:20px}
  [data-variant="p"] .panel h3{font-size:19px}
  [data-variant="p"] .panel p{font-size:14px}
  [data-variant="q"] .bento{grid-template-columns:1fr;gap:10px;max-height:none}
  [data-variant="q"] .bc{padding:16px;gap:10px}
  [data-variant="q"] .bc .ml{gap:5px;font-size:11px}
  [data-variant="r"] .gauge{width:100%}
  [data-variant="r"] .reads{gap:20px;font-size:10px}
  [data-variant="s"] .slips{grid-template-columns:1fr;gap:20px}
  [data-variant="s"] .slip{padding:16px 16px 14px}
  [data-variant="s"] .slip h3{font-size:20px}
  [data-variant="s"] .slip:nth-child(3){display:none}
  [data-variant="t"] h1{font-size:40px}
  /* screens 21-30 */
  [data-variant="u"] h2.head,[data-variant="w"] h2.head,[data-variant="B"] h2.head,[data-variant="C"] h2.head,[data-variant="D"] h2.head{font-size:26px}
  [data-variant="v"] h2.head,[data-variant="y"] h2.head{font-size:30px}
  [data-variant="u"] .diptych{max-height:34vh}
  [data-variant="u"] .dcap{font-size:9.5px}
  [data-variant="v"] .no{grid-template-columns:1fr;gap:0}
  [data-variant="v"] .no i{font-size:13.5px;padding:10px 0}
  [data-variant="v"] .no i:nth-child(n+7){display:none}
  [data-variant="w"] .reg .lab{flex-direction:column;gap:3px;font-size:10px}
  [data-variant="w"] .reg .tr{height:44px}
  [data-variant="w"] .regfoot{font-size:10.5px;line-height:1.6}
  [data-variant="x"] .body{grid-template-columns:1fr;gap:22px;justify-items:center}
  [data-variant="x"] .knob{width:170px;height:170px}
  [data-variant="x"] .stops{margin-top:0}
  [data-variant="x"] .stops button{padding:9px 8px}
  [data-variant="x"] .stops button span{font-size:14px}
  [data-variant="y"] .sheetgrid{grid-template-columns:repeat(9,1fr);gap:6px}
  [data-variant="y"] .leg{gap:14px;font-size:10px}
  [data-variant="z"] .body{grid-template-columns:1fr;gap:22px;align-content:center}
  [data-variant="z"] .mx{grid-template-columns:84px repeat(8,1fr)}
  [data-variant="z"] .mx .rw{font-size:8px;padding-right:6px;height:30px;white-space:normal;line-height:1.2;text-align:right}
  [data-variant="z"] .mx .hd{height:44px;font-size:8px}
  [data-variant="z"] .mx .c{height:30px}
  [data-variant="z"] .mx .c.ok i{width:9px;height:9px}
  [data-variant="z"] .mx .c.no::before,[data-variant="z"] .mx .c.no::after{left:8px;right:8px;top:14.5px}
  [data-variant="z"] .read h3{font-size:17px;min-height:0}
  [data-variant="z"] .read p{font-size:13px;min-height:0}
  [data-variant="A"] .term .log{font-size:10.5px;padding:14px;min-height:220px}
  [data-variant="A"] .term .log .o b{min-width:60px}
  [data-variant="B"] .top,[data-variant="B"] .bottom,[data-variant="B"] h2.head,[data-variant="B"] .headsub{padding-inline:16px}
  [data-variant="B"] .belt i{height:42px;padding:0 16px;font-size:14px}
  [data-variant="B"] .belt i.q{font-size:12px}
  [data-variant="C"] .meas .m{grid-template-columns:64px 1fr 46px;gap:10px}
  [data-variant="C"] .meas .m .s,[data-variant="C"] .meas .m .v{font-size:10px}
  [data-variant="C"] .cfoot{gap:12px;font-size:10px}
  [data-variant="D"] .pair{grid-template-columns:1fr;gap:12px}
  [data-variant="D"] .mid{grid-auto-flow:column;padding:0;gap:4px}
  [data-variant="D"] .mid button{padding:8px 4px}
  [data-variant="D"] .mid button span{font-size:11px}
  [data-variant="D"] .sk .row:nth-child(n+4){display:none}
  [data-variant="D"] .dfoot{font-size:10px;line-height:1.6}
}
@media (prefers-reduced-motion:reduce){
  .first .w{animation:none;opacity:1;filter:none;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  [data-variant="e"] .ring .spin{animation:none}
  [data-variant="a"] .core .sweep{animation:none}
  [data-variant="j"] .cell svg .wire,[data-variant="k"] .peb .fan,[data-variant="k"] .peb .runner{animation:none}
  *{transition-duration:0ms!important}
}