/* CROSSTAB shell — build width 1920, everything scales with --u (=100vw/1920). Tokens from DESIGN.md §0–§5, §10. */
:root{
  --u:calc(100vw / 1920);
  --paper:#CFF2FD; --ink:#11102B; --muted:#5D6174;
  --cream:#FFF4E8; --lilac:#EEE5FF; --mint:#D8FAE7; --cyan:#C9F7FA; --rose:#FFD7EC;
  --green:#2F9837; --pink:#FC6EC7; --rule:#D7D4E7;
  --font-display:"Sora",system-ui,sans-serif; --font-num:"Poppins",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --gl:calc(30*var(--u)); --gr:calc(28*var(--u));           /* the one page frame: 30 / 28 @1920 */
  --shadow:0 calc(8*var(--u)) calc(30*var(--u)) rgba(35,25,80,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* border tokens — widths/colours from BORDER_TABLE (DESIGN §4) */
  --rule-w:max(1px,1px); --rule-w2:max(1px,calc(2*var(--u)));
  --rule-c:var(--rule);
  --rule-c-cell-hl:#A6CCDB; --rule-c-cell:#EBCDF2; --rule-c-metric:#FA55A8; --rule-c-tool:#FB86F8;
  --rule-c-resp:#D9DAF4; --rule-c-config:#CDE1F6; --rule-c-row:#F6E6DF;
  /* type */
  --fs-body:max(12px,calc(16*var(--u))); --fs-small:max(12px,calc(14*var(--u)));
  --fs-nav:max(12px,calc(17*var(--u)));
}
@media (max-width:1023px){:root{--u:.85px;--gl:16px;--gr:16px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;color:var(--ink);font:500 var(--fs-body)/1.35 var(--font-body);
  background:
    linear-gradient(135deg,rgba(201,247,250,.85) 0%,rgba(238,229,255,.55) 55%,rgba(216,250,231,.9) 100%),
    var(--paper);}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
:where(button,input,select,textarea){border:0;font:inherit;color:inherit;background:none;margin:0}
:where(button){cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
table{border-collapse:separate;border-spacing:0;width:100%}
td,th{font-variant-numeric:tabular-nums}
.wide{overflow-x:auto;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== PAGE ATMOSPHERE (DESIGN §3b) — shared by every route ===== */
.atmos{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(circle at 92% 6%,rgba(252,110,199,.26),transparent calc(420*var(--u))) 0 0/100% calc(1500*var(--u)) repeat-y,
    radial-gradient(circle at 4% 38%,rgba(150,110,255,.20),transparent calc(460*var(--u))) 0 0/100% calc(1500*var(--u)) repeat-y,
    radial-gradient(circle at 80% 78%,rgba(47,152,55,.18),transparent calc(480*var(--u))) 0 0/100% calc(1500*var(--u)) repeat-y;}
.atm-dots{position:absolute;inset:0;background:radial-gradient(circle,rgba(40,190,215,.12) calc(1.4*var(--u)),transparent calc(2*var(--u))) 0 0/calc(22*var(--u)) calc(22*var(--u));
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 45%,transparent 60%,#000 100%);mask-image:linear-gradient(90deg,#000 0,transparent 45%,transparent 60%,#000 100%)}
.atm-ribbon{position:absolute;display:block;border-radius:calc(90*var(--u));opacity:.34;filter:blur(calc(2*var(--u)));will-change:transform;
  background:linear-gradient(100deg,var(--pink),var(--lilac) 40%,var(--cyan) 70%,var(--mint));
  transform:translate(calc(var(--mx,0)*14px),calc(var(--my,0)*8px)) rotate(var(--rot))}
.atm-ribbon.r1{--rot:-24deg;width:calc(640*var(--u));height:calc(170*var(--u));right:calc(-120*var(--u));top:calc(210*var(--u))}
.atm-ribbon.r2{--rot:-24deg;width:calc(520*var(--u));height:calc(120*var(--u));right:calc(-60*var(--u));top:calc(400*var(--u));opacity:.24}
@media (prefers-reduced-motion:no-preference){
  .atm-ribbon.r1{animation:drift 14s ease-in-out infinite alternate}
  .atm-ribbon.r2{animation:drift 18s ease-in-out infinite alternate-reverse}
}
@keyframes drift{from{translate:0 0}to{translate:calc(-1.5*var(--u)*10) calc(1*var(--u)*10)}}

/* ===== PAGE FRAME — one container for every route ===== */
main{flex:1 0 auto;width:100%;padding:calc(12*var(--u)) var(--gr) calc(48*var(--u)) var(--gl);position:relative}
main.is-leaving{opacity:.0;transform:translateY(calc(8*var(--u)));transition:opacity .16s,transform .16s}
.route-stub{min-height:calc(400*var(--u))}

/* ===== BORDERS: one class per framed component (BORDER_TABLE / DESIGN §4). Routes never write border/outline. ===== */
.rule-panel{border:var(--rule-w) solid var(--rule-c);border-radius:calc(24*var(--u));box-shadow:var(--shadow)}
.rule-chip{border:var(--rule-w) solid var(--rule-c);border-radius:999px}
.rule-input{border:var(--rule-w) solid var(--rule-c);border-radius:999px}
.rule-nav{border:var(--rule-w) solid var(--rule-c);border-radius:999px}
.rule-cell-hl{border:var(--rule-w2) solid var(--rule-c-cell-hl);border-radius:calc(14*var(--u));box-shadow:0 calc(4*var(--u)) calc(14*var(--u)) rgba(35,25,80,.1)}
.rule-cell{border:var(--rule-w2) solid var(--rule-c-cell);border-radius:calc(14*var(--u))}
.rule-metric-active{border:var(--rule-w2) solid var(--rule-c-metric);border-radius:calc(16*var(--u))}
.rule-tool-active{border:var(--rule-w2) solid var(--rule-c-tool);border-radius:calc(20*var(--u))}
.rule-code-response{border:var(--rule-w2) solid var(--rule-c-resp);border-radius:calc(20*var(--u))}
.rule-code-config{border:var(--rule-w2) solid var(--rule-c-config);border-radius:calc(20*var(--u))}
.rule-row{border:var(--rule-w2) solid var(--rule-c-row);border-radius:calc(12*var(--u))}
.rule-hair{border-top:var(--rule-w) solid var(--rule-c)}          /* row hairline inside tables: draw ONE side only */
.rule-hair-b{border-bottom:var(--rule-w) solid var(--rule-c)}

/* surfaces + type helpers for route bodies */
.s-cream{background:var(--cream)}.s-lilac{background:var(--lilac)}.s-mint{background:var(--mint)}.s-cyan{background:var(--cyan)}.s-rose{background:var(--rose)}
.s-white{background:rgba(255,255,255,.78)}
.t-hero{font:700 calc(96*var(--u))/.98 var(--font-display);letter-spacing:-.02em;margin:0}
.t-route{font:700 calc(64*var(--u))/1.02 var(--font-display);letter-spacing:-.015em;margin:0}
.t-section{font:700 calc(26*var(--u))/1.1 var(--font-body);margin:0}
.t-body{font:500 var(--fs-body)/1.35 var(--font-body)}
.t-small{font:500 var(--fs-small)/1.35 var(--font-body);color:var(--muted)}
.t-num{font:700 calc(22*var(--u))/1.1 var(--font-num);font-variant-numeric:tabular-nums}
.t-mono{font:400 max(12px,calc(14*var(--u)))/1.4 var(--font-mono)}
.t-grad{background:linear-gradient(90deg,var(--pink),#8a5cf6 50%,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:calc(8*var(--u));min-height:max(32px,calc(44*var(--u)));padding:0 calc(20*var(--u));border-radius:999px;font:700 var(--fs-body)/1 var(--font-body);background:rgba(255,255,255,.85);transition:background .2s,transform .2s var(--ease)}
.btn:hover{background:var(--lilac);transform:translateY(calc(-2*var(--u)))}
.btn.is-primary{background:var(--green);color:#fff}.btn.is-primary:hover{background:#278030}
.chip{display:inline-flex;align-items:center;gap:calc(8*var(--u));padding:calc(8*var(--u)) calc(16*var(--u));border-radius:999px;font:500 var(--fs-small)/1.2 var(--font-body);background:rgba(255,255,255,.7);transition:background .2s,transform .2s var(--ease)}
.chip:hover,.chip.is-on{background:var(--mint)}
.art-slot{position:relative}.art-slot img{width:100%;height:100%;object-fit:contain}

/* ===== NAV (chrome/nav.html — single source) ===== */
.site-nav{position:relative;z-index:20;padding:calc(12*var(--u)) var(--gr) 0 var(--gl)}
.nav-bar{display:flex;align-items:center;gap:calc(22*var(--u));height:calc(72*var(--u));min-height:56px;padding:0 calc(14*var(--u)) 0 calc(22*var(--u));border-radius:calc(36*var(--u));background:rgba(255,255,255,.74);box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:calc(12*var(--u));text-decoration:none;font:800 calc(30*var(--u))/1 var(--font-display);letter-spacing:.01em;white-space:nowrap}
.brand img{height:calc(44*var(--u));min-height:36px;width:auto;aspect-ratio:2048/1226}
.nav-div{width:1px;height:calc(36*var(--u));background:var(--rule);flex:none}
.nav-desktop{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));height:calc(56*var(--u));padding:0 calc(6*var(--u));background:rgba(238,229,255,.4)}
.nav-desktop a,.nav-mobile a{display:inline-flex;align-items:center;gap:calc(9*var(--u));padding:calc(11*var(--u)) calc(20*var(--u));border-radius:999px;text-decoration:none;font:500 var(--fs-nav)/1 var(--font-body);white-space:nowrap;transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s}
.nav-desktop a svg,.soc svg{width:calc(19*var(--u));min-width:14px;height:calc(19*var(--u));min-height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.soc svg.fill{fill:currentColor;stroke:none}
.nav-desktop a:hover{background:var(--lilac);transform:translateY(calc(-2*var(--u)))}
.nav-desktop a.is-active,.nav-mobile a.is-active{background:var(--rose);box-shadow:0 calc(5*var(--u)) calc(14*var(--u)) rgba(171,61,124,.16);font-weight:700}
.launch{display:flex;gap:calc(10*var(--u))}
.soc{display:inline-flex;align-items:center;gap:calc(9*var(--u));padding:calc(11*var(--u)) calc(18*var(--u));border-radius:999px;background:var(--cyan);text-decoration:none;font:500 var(--fs-nav)/1 var(--font-body);transition:background .22s,transform .22s var(--ease)}
.soc:hover{background:var(--mint);transform:translateY(calc(-2*var(--u)))}
.soc.is-soon{opacity:.72;cursor:default}
.burger,.nav-mobile{display:none}
@media (prefers-reduced-motion:no-preference){.nav-desktop a.is-active{animation:tabpop .34s var(--ease)}}
@keyframes tabpop{0%{transform:translateY(calc(-5*var(--u)))}100%{transform:none}}
@media (max-width:1023px){
  .nav-desktop,.nav-div,.launch{display:none}
  .nav-bar{height:56px;padding:0 10px 0 14px;justify-content:space-between}
  .brand{font-size:20px}.brand img{height:36px}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;align-items:center;border-radius:50%;background:var(--lilac)}
  .burger i{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s var(--ease),opacity .2s}
  .burger[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded=true] i:nth-child(2){opacity:0}
  .burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-mobile{position:absolute;left:16px;right:16px;top:calc(100% + 6px);flex-direction:column;gap:4px;padding:10px;border-radius:24px;background:rgba(255,255,255,.96);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .22s var(--ease),visibility .2s}
  .site-nav.is-open .nav-mobile{display:flex;opacity:1;visibility:visible;transform:none}
  .nav-mobile a{font-size:16px;padding:14px 18px}
  .sheet-soc{display:flex;gap:8px;margin-top:4px}.sheet-soc a{background:var(--cyan);flex:1;justify-content:center}
}

/* ===== FOOTER (chrome/footer.html — source ledger) ===== */
.site-foot{padding:0 var(--gr) calc(20*var(--u)) var(--gl)}
.foot-card{padding:calc(24*var(--u)) calc(30*var(--u)) calc(22*var(--u));border-radius:calc(26*var(--u));background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(238,249,255,.8) 45%,rgba(239,255,246,.8));box-shadow:var(--shadow)}
.foot-brand{display:flex;align-items:center;gap:calc(12*var(--u));margin-bottom:calc(14*var(--u))}
.foot-brand img{height:calc(44*var(--u));min-height:36px;width:auto;aspect-ratio:2048/1226}
.foot-brand b{font:800 calc(24*var(--u))/1 var(--font-display);letter-spacing:.01em}
.foot-ca{margin-left:auto;padding:calc(8*var(--u)) calc(16*var(--u));border-radius:999px;background:var(--lilac);font:500 var(--fs-small)/1 var(--font-body)}
.ledger{display:grid;gap:calc(6*var(--u))}
.lg-row{display:grid;grid-template-columns:1.2fr 1.5fr .9fr 1.2fr;gap:calc(6*var(--u));min-width:640px}
.lg-row>*{padding:calc(10*var(--u)) calc(14*var(--u));border-radius:calc(10*var(--u));background:var(--cyan);font:500 var(--fs-small)/1.3 var(--font-body);text-decoration:none;overflow-wrap:anywhere}
.lg-row>a{background:var(--mint)}.lg-row>a:hover{text-decoration:underline}
.lg-head>*{background:#B9ECF3;font-weight:700}
.lg-row [data-updated].is-bad{color:#a02a52}
.foot-line{margin:calc(14*var(--u)) calc(6*var(--u)) 0;font:700 var(--fs-body)/1.3 var(--font-body)}
@media (max-width:1023px){.foot-brand{flex-wrap:wrap}.foot-ca{margin-left:0}}

/* ===== §10 MOTION — "index cards drawn from a catalogue drawer" =====
   One easing (--ease) and one duration family (220 / 450 / 500 ms). Transform + opacity only. */
@keyframes draw{from{opacity:0;transform:perspective(900px) translateY(calc(18*var(--u))) rotateX(-8deg)}to{opacity:1;transform:none}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes flipv{0%{opacity:.2;transform:perspective(500px) rotateX(-70deg)}100%{opacity:1;transform:none}}
@keyframes stamp{0%{background-color:var(--mint);transform:scale(1.06)}100%{transform:none}}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .js-motion [data-draw]:not(.is-in){opacity:0}
  .js-motion [data-draw].is-in{animation:draw 450ms var(--ease) calc(var(--i,0)*40ms) backwards;transform-origin:50% 0}
  .js-motion [data-grow]:not(.is-in){transform:scaleX(0)}
  .js-motion [data-grow].is-in{animation:growx 500ms var(--ease) calc(var(--i,0)*40ms) backwards;transform-origin:0 50%}
  .js-motion [data-countup].is-in{animation:stamp 600ms var(--ease) 650ms backwards}
  .tab-flip{animation:flipv 220ms var(--ease);transform-origin:50% 0}
  .dot-live{position:relative}
  .dot-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.2s ease-out infinite}
  [data-lift]{transition:transform .22s var(--ease),box-shadow .22s,background .22s}
  [data-lift]:hover{transform:translateY(calc(-3*var(--u)))}
}
.dot-live{display:inline-block;width:calc(10*var(--u));min-width:8px;height:calc(10*var(--u));min-height:8px;border-radius:50%;background:var(--green)}