/* ---------------------------------------------------------------------------
   Axiom Forge: the system home and /tracer share (WEBSITE-PLAN §1, AA), as
   redesigned by the taste-skill run (docs/experiments/taste-skill/).
   Light in every system theme, as every page in this project is.

   Colour: one cool neutral family, keyed to the ink, so the page's greys
   and the Excel renderings' greys are the same family. Two product
   colours: key blue (the shortcuts) and the Tracer's fill (#FFD97D). Two
   coloured rooms a page at most, in band blue or ink; a quiet room is a
   tint of the ground (mist), never a third colour.

   Shape, one rule:
     pill   999px  everything you press: buttons, the switch, chips, crumbs
     win     12px  every product window: Excel, the panel, the Tracer, the app
     card    24px  cards, desks, drawings
     room    36px  rooms (24px on a phone)

   Motion (§9): loops play on screen only; scroll-driven sections are drawn
   by site.js from the page's position, as transforms on the elements that
   show them; html.still (Reduce Motion,
   or ?still) shows every section as its still. With no script at all the
   page is its stills too, because nothing here hides at rest.
--------------------------------------------------------------------------- */
@font-face{font-family:"Archivo";src:url("fonts/archivo.woff2") format("woff2");font-weight:600 800;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-600.woff2") format("woff2");font-weight:600 700;font-display:swap}

:root{
  color-scheme:light;
  --paper:#F4F5F7; --card:#FFFFFF; --ink:#10151D; --dim:#5B6472; --body:#3A4250;
  --key:#0A66D6; --key-deep:#08479A; --band:#0B4FAF; --sky:#5CB0FF;
  --amber:#E8A33D; --amber-ink:#8A5A00; --fill:#FFD97D; --mist:#E7EBF1;
  --line:#DCE0E6; --line-soft:#ECEEF2;
  /* a surface's edge is ink at low alpha, drawn outside its own background
     (background-clip: padding-box), so it darkens whatever it sits on, as a
     shadow does, rather than drawing one fixed grey on every ground */
  --edge:rgba(16,21,29,.1); --edge-win:rgba(16,21,29,.15); --wash:#EEF3FB; --green:#107C41; --desk:#FAFBFC;
  --shadow-raised:0 1px 2px rgba(16,21,29,.06),0 10px 24px -14px rgba(16,21,29,.24);
  --shadow-float:0 1px 3px rgba(16,21,29,.08),0 24px 48px -22px rgba(16,21,29,.38);
  --shadow-stage:0 2px 4px rgba(16,21,29,.05),0 40px 80px -40px rgba(16,21,29,.42);
  --frost-fill:rgba(245,245,245,.66); --frost-border:rgba(10,15,28,.10); --specular:rgba(255,255,255,.90);
  --key-fill:rgba(10,102,214,.13); --key-stroke:rgba(10,102,214,.34);
  --display:"Archivo",system-ui,sans-serif;
  --ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pane-mono:Menlo,"IBM Plex Mono",ui-monospace,monospace;
  --r-pill:999px; --r-win:12px; --r-card:24px; --r-room:36px;
  --gutter:clamp(18px,4.5vw,56px);
  /* Motion (Emil Kowalski's skills, docs/experiments/emil-skills/): a strong
     ease-out for what enters and answers a press, a strong ease-in-out for
     what moves on screen, and the panel's own curve (GlassOverlay.swift) */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-panel:cubic-bezier(.2,.9,.25,1);
  --navh:86px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:var(--navh)}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--key);text-decoration:none}
/* :where() so an element's own radius wins: the ring follows a pill as a pill */
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--key);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:#fff}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0}
h1,h2,h3{font-family:var(--display);text-wrap:balance}
button{font:inherit;color:inherit}
a,button{touch-action:manipulation}
/* a control's label is not text to select on a long press; content stays selectable */
button,.btn,.switch a{-webkit-user-select:none;user-select:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}

/* ---- the one keycap -------------------------------------------------- */
/* The key's depth (--kd) is a skirt drawn under a box of fixed height, in
   the border's colour (--kb): at rest it looks as it always has, a 2 px rim
   and a 5 px bottom. A press moves the face down by the depth and the skirt
   goes to nothing, so nothing around the key moves. Down in 70 ms, up in
   160 ms: the press lands at once, the release settles. */
.kc{--kd:3px;--kb:var(--ink);display:inline-grid;place-items:center;min-width:1.2em;height:calc(1.32em - var(--kd));margin-bottom:var(--kd);padding:0 .34em;font:600 .86em/1 var(--mono);color:var(--ink);background:#fff;border:2px solid var(--kb);border-radius:.28em;box-shadow:0 var(--kd) 0 var(--kb);vertical-align:-.1em;white-space:nowrap;transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.kc.opt{--kb:var(--key-deep);background:var(--key);color:#fff}
.kc.down{transform:translateY(var(--kd));box-shadow:0 0 0 var(--kb);transition-duration:70ms}
.kc.xs{--kd:1.5px;font-size:11px;height:17.5px;min-width:19px;padding:0 4px;border-width:1.5px;border-radius:4px;vertical-align:-3px}
/* in a headline: keys sit on the baseline, smaller than the words */
.hk{display:inline-flex;gap:.12em;vertical-align:.04em;white-space:nowrap}
.hk .kc{--kd:.065em;font-size:.56em;border-width:.045em;border-radius:.2em;height:calc(1.36em - .065em);min-width:1.24em;padding:0 .26em}
/* on a dark room the blue key gets a white rim, around its face and skirt */
.on-dark .kc.opt{box-shadow:0 var(--kd) 0 var(--kb),0 0 0 2px rgba(255,255,255,.9),0 var(--kd) 0 2px rgba(255,255,255,.9)}
.on-dark .hk .kc.opt{box-shadow:0 var(--kd) 0 var(--kb),0 0 0 .05em rgba(255,255,255,.92),0 var(--kd) 0 .05em rgba(255,255,255,.92)}

/* ---- the highlighter: the Tracer's fill behind the words that land ---- */
/* --hp is how much of the swipe is drawn, 0 to 1. It is 1 unless site.js is
   drawing it, so without script, and under Reduce Motion, it is there. */
.hl{--hp:1;background-image:linear-gradient(100deg,rgba(255,217,125,0) 0,var(--fill) .25em,var(--fill) calc(100% - .2em),rgba(255,217,125,0) 100%);background-repeat:no-repeat;background-size:calc(var(--hp)*100%) 78%;background-position:0 62%;padding:0 .14em;margin:0 -.06em;border-radius:.18em;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--ink)}
.on-dark .hl{color:var(--ink)}
.on-dark .hl{background-color:transparent}
.room.ink .hl{color:#fff;transition:color .2s}
.room.ink .hl.drawn{color:var(--ink)}
html.still .room.ink .hl,html.nojs .room.ink .hl{color:var(--ink)}

/* ---- type ---------------------------------------------------------------- */
/* No eyebrows (E6, 2026-10-05): a headline stands on its own, and a
   card's label is plain small text (BRAND-VOICE). */
.h1{font-size:clamp(44px,6.9vw,100px);font-weight:800;font-stretch:125%;line-height:.9;letter-spacing:-.04em}
.h2{font-size:clamp(36px,4.5vw,66px);font-weight:700;font-stretch:112%;line-height:1;letter-spacing:-.03em}
.h3{font-size:clamp(23px,2vw,29px);font-weight:700;font-stretch:108%;line-height:1.12;letter-spacing:-.015em}
.line{font-size:clamp(18px,1.42vw,21px);line-height:1.48;font-weight:450;color:var(--body);max-width:32em}
.h1+.line,.h2+.line{margin-top:24px}
.center{text-align:center}
.center .line{margin-left:auto;margin-right:auto}

/* ---- the button: one, everywhere ------------------------------------------- */
/* The button is drawn as a key, its inset lip at the bottom, so it does
   what a key does: nothing on hover but darken, and on a press it goes
   down a pixel, the lip thins and the glow under it tightens. 80 ms down,
   160 ms back. */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--key);color:#fff;font:600 17px/1 var(--ui);border-radius:var(--r-pill);padding:16px 26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(8,71,154,.55),0 1px 2px rgba(16,21,29,.10),0 12px 24px -12px rgba(10,102,214,.65);white-space:nowrap;transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background-color 160ms ease}
.btn:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(8,71,154,.55),0 1px 2px rgba(16,21,29,.12),0 6px 12px -8px rgba(10,102,214,.55);transition-duration:80ms}
.btn svg{width:15px;height:18px}
.btn.small{font-size:15px;padding:10px 18px}
.btn.small svg{width:13px;height:15px}
/* the microline: three facts, set apart by hairlines, not dots */
.micro{display:flex;flex-wrap:wrap;gap:6px 0;font-size:13.5px;line-height:1.3;color:var(--dim);margin-top:16px}
.micro>span+span{border-left:1px solid currentColor;margin-left:12px;padding-left:12px}
.center .micro{justify-content:center}
/* on a phone the three stack, so no hairline starts a line */
@media (max-width:600px){.micro{flex-direction:column;gap:3px}.center .micro{align-items:center}.micro>span+span{border-left:0;margin-left:0;padding-left:0}}
.on-dark .micro{color:rgba(255,255,255,.62)}
.more{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink);border-bottom:1.5px solid currentColor;padding-bottom:1px;transition:color 160ms ease}
.more .ch{display:inline-block;transition:transform 180ms var(--ease-out)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:36px}
.center .ctas{justify-content:center}

/* ---- the announcement bar and the nav ------------------------------------ */
.announce{background:var(--fill);color:var(--ink);font:500 14px/1.3 var(--ui);text-align:center;padding:9px 16px}
.announce b{font-weight:700}
.announce a{color:var(--ink);font-weight:700;margin-left:6px;white-space:nowrap;border-bottom:1.5px solid rgba(16,21,29,.35)}
.nav{position:sticky;top:0;z-index:30;padding:12px var(--gutter) 0}
.navbox{position:relative;max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:22px;height:62px;padding:0 9px 0 18px;background:rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(16,21,29,.08);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 30px -22px rgba(16,21,29,.5)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:800 19px/1 var(--display);font-stretch:112%;letter-spacing:-.015em;white-space:nowrap}
.mark{width:28px;height:28px;border-radius:7px;background:var(--key);display:grid;place-items:center;flex:none;box-shadow:inset 0 -2px 0 rgba(8,71,154,.6)}
.mark svg{width:17px;height:15px}
.switch{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--mist);gap:2px}
.switch a{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);font:600 14.5px/1 var(--ui);color:var(--dim);transition:color .18s var(--ease-out),background-color .18s var(--ease-out)}
.switch a[aria-current]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,21,29,.08),0 4px 10px -6px rgba(16,21,29,.3)}
.navlinks{display:flex;gap:26px;margin-left:auto;font:500 15px/1 var(--ui)}
.navlinks a{color:var(--dim);transition:color .18s var(--ease-out)}
/* G20: the page shown among the links (the cheatsheet's Cheatsheet) is a
   pill, as the switch's chosen one is, on a ring of the switch's track */
.navlinks a[aria-current]{margin:-8px -14px;padding:8px 14px;border-radius:var(--r-pill);background:#fff;color:var(--ink);box-shadow:0 0 0 4px var(--mist),0 1px 2px rgba(16,21,29,.08),0 4px 10px -6px rgba(16,21,29,.3)}
.menukey{display:none;margin-left:auto;background:none;border:0;padding:4px;cursor:pointer}
.menukey .kc{font-size:15px;height:27px;min-width:34px}
/* the menu's ⌥ is a key, so a tap presses it */
.menukey:active .kc{transform:translateY(var(--kd));box-shadow:0 0 0 var(--kb);transition-duration:70ms}
/* G32: .navbox>.menu, so .panel (later, position:relative) cannot win: it
   did, and the open menu sat in the nav's row, 44 px wide, its items cut
   and out of a finger's reach. Solid, as it opens over the hero's words. */
.navbox>.menu{position:absolute;right:8px;top:66px;width:250px;transform-origin:top right;background:#F7F7F7}
.menu[hidden]{display:none}
/* the phone menu is a popover from its ⌥ key, so it grows from the key's
   corner: in 180 ms on --ease-out from scale(.96), out in 120 ms
   (emil-design-eng: origin-aware, the exit quicker than the entrance).
   Where @starting-style or discrete display transitions are unknown, it
   simply appears, as before. */
html.motion .menu{transition:opacity 120ms ease-out,transform 120ms ease-out,display 120ms allow-discrete}
html.motion .menu:not([hidden]){transition-duration:180ms;transition-timing-function:var(--ease-out)}
html.motion .menu[hidden]{opacity:0;transform:scale(.96)}
@starting-style{html.motion .menu:not([hidden]){opacity:0;transform:scale(.96)}}
.menu .r{cursor:pointer;color:var(--ink)}
@media (max-width:860px){
  .navlinks{display:none}
  .navbox{gap:10px;padding:0 8px 0 12px;height:56px}
  .brand .word{display:none}
  .navbox>.btn{display:none}
  .menukey{display:inline-grid}
  .switch a{padding:7px 12px;font-size:14px}
}

/* ---- sections and rooms ------------------------------------------------- */
section{position:relative}
/* The paper between two sections is their padding, nothing else (AA2: "too
   much space between the different pages"). tools/test-website-layout.js
   measures it, and test-website.js caps these lengths. */
.sec{padding:clamp(56px,7vw,96px) 0}
.room{margin:0 16px;border-radius:var(--r-room);padding:clamp(60px,7vw,104px) 0}
.room.ink{background:var(--ink);color:#fff}
.room.blue{background:var(--band);color:#fff}
.room.mist{background:var(--mist)}
.room.ink .line,.room.blue .line{color:rgba(255,255,255,.78)}
.room.ink .more,.room.blue .more{color:#fff}
.room+.room{margin-top:16px}
@media (max-width:600px){.room{margin:0 8px;border-radius:24px}}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,88px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}

/* ---- drawings: printed cards, on their own paper ------------------------- */
.art{width:100%;height:auto;border-radius:var(--r-card);background:#F7F5EE;box-shadow:0 0 0 6px #fff,var(--shadow-raised)}

/* ---- the struck sheet: the desk every product rendering sits on ------- */
.sheetdesk{position:relative;border-radius:var(--r-card);border:1px solid var(--edge);overflow:hidden;background:linear-gradient(var(--line-soft) 1px,transparent 1px) 0 0/100% 26px,linear-gradient(90deg,var(--line-soft) 1px,transparent 1px) 0 0/36px 100%,var(--desk);background-clip:padding-box}

/* ---- Excel: the window, the ribbon strip, the grid ---------------------- */
.xl{position:relative;background:#fff;border:1px solid var(--edge-win);border-radius:var(--r-win);overflow:hidden;box-shadow:var(--shadow-stage);font:12.5px/1.2 var(--mono);color:#343C48;text-align:left;background-clip:padding-box}
.xl .tb{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:#F3F4F6;border-bottom:1px solid #E6E8EB;font:500 12px var(--ui);color:#5B6472}
.xl .tb i{width:11px;height:11px;border-radius:50%;background:#D9DCE0}
.xl .tb i:nth-child(1){background:#FF5F57}.xl .tb i:nth-child(2){background:#FEBC2E}.xl .tb i:nth-child(3){background:#28C840}
.xl .tb span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl .rb{display:flex;gap:18px;height:30px;align-items:center;padding:0 14px;background:var(--green);color:#fff;font:500 12.5px var(--ui);white-space:nowrap;overflow:hidden}
.xl .rb span.on{font-weight:700;text-decoration:underline;text-underline-offset:9px;text-decoration-thickness:2px}
.xl .fb{display:flex;height:26px;border-bottom:1px solid #E6E8EB;font:11.5px/26px var(--mono)}
.xl .fb .nb{width:62px;flex:none;padding:0 8px;border-right:1px solid #E6E8EB;color:var(--ink)}
.xl .fb .fx{padding:0 8px;border-right:1px solid #E6E8EB;color:#6B7280;font-style:italic}
.xl .fb .fv{padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid{width:100%;border-collapse:collapse;table-layout:fixed}
.grid th,.grid td{border-right:1px solid #ECEEF1;border-bottom:1px solid #ECEEF1;height:28px;padding:0 8px;white-space:nowrap;overflow:hidden;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.grid th{background:#F6F7F9;color:#646C79;text-align:center;font-weight:500;padding:0}
.grid th.rn{width:32px}
.grid td.l{text-align:left;font:500 12.5px var(--ui);color:var(--ink)}
.grid td.l.sub{color:var(--dim);font-style:italic;padding-left:18px}
.grid td.l.ttl{font-weight:700}
.grid td.in{color:#1F4FD6}
.grid td.lk{color:#137A3A}
.grid tr.hd td{font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--ink)}
.grid tr.tot td{font-weight:700;color:var(--ink)}
.grid tr.tot td:not(.l){border-top:1px solid var(--ink)}
.grid td i.cur{float:left;font-style:normal}
.grid tr.sel td{background:#E6F0FC}
.grid tr.sel td.l{box-shadow:inset 2px 0 0 var(--key)}
.grid td.cur{box-shadow:inset 0 0 0 2px var(--key);background:#fff}
.grid td.lit{background:var(--fill)!important;box-shadow:inset 0 0 0 1.5px #C99A2E}
.grid td.ants{box-shadow:inset 0 0 0 1.5px var(--key)}
.xl .tabs{display:flex;gap:2px;align-items:flex-end;height:32px;padding:0 10px;background:#F6F7F9;border-top:1px solid #E6E8EB;font:500 12px var(--ui);color:var(--dim);white-space:nowrap;overflow:hidden}
.xl .tabs span{padding:7px 12px}
.xl .tabs span.on{background:#fff;color:var(--green);font-weight:700;box-shadow:inset 0 -2px 0 var(--green)}
.xl .tabs span.trace{color:#8A6520;background:#FBF3E2}

/* ---- the panel (Frost): GlassOverlay's tokens ---------------------------- */
.panel{border-radius:var(--r-win);border:1px solid var(--frost-border);background:var(--frost-fill);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);box-shadow:var(--shadow-float);font-family:var(--ui);overflow:hidden;position:relative;color:var(--ink);text-align:left}
.panel::before{content:"";position:absolute;inset:0 14px auto;height:1px;background:var(--specular)}
.panel .ph{display:flex;align-items:baseline;gap:8px;padding:11px 14px 9px;border-bottom:1px solid rgba(10,15,28,.07)}
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font:600 13px/1 var(--ui);letter-spacing:-.01em}
.crumb .sep{color:var(--dim);font-weight:400}
.crumb .k{display:inline-grid;place-items:center;min-width:19px;height:18px;padding:0 4px;border-radius:4px;background:var(--key-fill);box-shadow:inset 0 0 0 1px var(--key-stroke);font:600 11px var(--mono);color:var(--key)}
.panel .pb{padding:10px 14px 4px;columns:2;column-gap:18px}
.panel .pb.one{columns:1}
.grp{break-inside:avoid;margin:0 0 10px}
.grp .gh{font:700 9.5px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.r{display:flex;gap:8px;align-items:baseline;padding:2.5px 0;font-size:12.5px;line-height:1.25}
.r .k{display:inline-grid;place-items:center;min-width:19px;height:18px;padding:0 4px;border-radius:4px;background:var(--key-fill);box-shadow:inset 0 0 0 1px var(--key-stroke);font:600 11px var(--mono);color:var(--key);flex:none}
.r.hit{background:var(--key-fill);margin:0 -6px;padding:2.5px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--key-stroke)}
.r .chev{color:var(--key);opacity:.6;margin-left:3px}
.panel .pf{display:flex;justify-content:space-between;gap:12px;padding:7px 14px 9px;border-top:1px solid rgba(10,15,28,.07);font:10.5px/1.3 var(--ui);color:var(--dim)}

/* ---- the Tracer's pane: tracer-demo.json's look ------------------------- */
.tracer{background:#FCFBF6;border:1px solid #E2DEC9;border-radius:var(--r-win);overflow:hidden;box-shadow:var(--shadow-float);font-family:var(--ui);color:#18202C;text-align:left}
.tracer .tt{background:#18202C;color:#fff;font:700 13px/1 var(--ui);padding:10px 12px}
.tracer .tf{padding:9px 12px 4px;font:12.5px/1.3 var(--pane-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tracer .tf b{color:var(--key);font-weight:700}
.tracer .ttabs{display:flex;gap:16px;padding:6px 12px 0;font:500 12.5px/1 var(--ui);color:#5F6875;border-bottom:1px solid #E2DEC9}
.tracer .ttabs span{padding:4px 0 7px}
.tracer .ttabs span.on{color:var(--key);box-shadow:inset 0 -2px 0 var(--key)}
.tracer table{width:100%;border-collapse:collapse;table-layout:fixed;font:12.5px/24px var(--pane-mono)}
.tracer th{font:700 10px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#9AA1AB;background:#FCFBF6;text-align:left;padding:9px 8px 7px;border-bottom:1px solid #E2DEC9}
.tracer td{padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #F2F0E8;background:#fff}
.tracer td.v,.tracer th.v{text-align:right}
.tracer td.info{font:500 12px/24px var(--ui);color:#5F6875}
.tracer td.x{color:#8A6520;background:#FBF3E2}
.tracer tr.sel td{background:var(--key);color:#fff}
.tracer tr.sel td.info{color:#fff}
.tracer .g{color:#9AA1AB;display:inline-block;width:14px}
.tracer .i1{padding-left:22px}.tracer .i2{padding-left:36px}
.tracer tr.sel .g{color:#fff}
.chip{display:inline-block;font:700 10px/1 var(--ui);letter-spacing:.02em;padding:3px 6px;border-radius:5px;background:#FDE7B8;color:#7A4F00;border:1px solid #E8B85C;margin-left:4px;vertical-align:1px}
.tracer tr.sel .chip{background:#FFE6A8;color:#5A3A00;border-color:#FFE6A8}

/* ---- the Axiom Forge window (Discover, Favorites) -------------------------- */
/* The app's own ground is the warm paper, so its window keeps it: the page
   is cool, the product is what it is. */
.afw{display:grid;grid-template-columns:64px 1fr;background:#F7F5EE;border:1px solid #E4E0D3;border-radius:var(--r-win);overflow:hidden;box-shadow:var(--shadow-stage);font-family:var(--ui);color:var(--ink);text-align:left;position:relative}
.afw .side{background:#F1EEE4;border-right:1px solid #E4E0D3;padding:12px 6px;display:grid;align-content:start;gap:6px}
.afw .side span{display:grid;justify-items:center;gap:4px;font:600 9.5px/1 var(--ui);color:var(--dim);padding:7px 0;border-radius:9px}
.afw .side span i{width:16px;height:14px;border-radius:4px;border:1.6px solid #A8A08B;background:transparent}
.afw .side span.on{background:#fff;color:var(--key);box-shadow:var(--shadow-raised)}
.afw .side span.on i{border-color:var(--key);background:var(--key-fill)}
.afw .main{padding:18px 18px 16px;display:grid;gap:12px;align-content:start;min-width:0;min-height:360px}
.afw .main>h5{margin:0;font:800 22px/1 var(--display);font-stretch:112%}
.afw .main>p{font-size:12.5px;color:var(--dim);margin-top:-6px}
.dcard{background:#fff;border:1px solid #E4E0D3;border-radius:14px;padding:12px 14px 6px;box-shadow:var(--shadow-raised)}
.dcard.focus{box-shadow:0 0 0 2px var(--key),var(--shadow-raised)}
.dcard h6{margin:0;display:flex;align-items:center;gap:9px;font:800 15px/1.1 var(--display);font-stretch:108%}
.dcard h6 .ic{width:24px;height:24px;border-radius:7px;background:var(--wash);flex:none;box-shadow:inset 0 0 0 1.5px var(--key-stroke)}
.dcard .ex{font-size:11.5px;color:var(--dim);margin:6px 0 4px}
.drow{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #EEEBE1}
.drow .keys{display:inline-flex;gap:3px;flex:none}
.drow .keys .kc{--kd:1.5px;font-size:10.5px;height:16.5px;min-width:18px;padding:0 3px;border-width:1.5px;border-radius:4px}
.drow .nm{font:600 12.5px/1.2 var(--ui)}
.drow .why{display:block;font:400 11px/1.3 var(--ui);color:var(--dim);margin-top:2px}
.drow .star{margin-left:auto;font-size:15px;color:#B8B1A0}
.drow .star.on{color:var(--amber)}
.drow.new{background:linear-gradient(90deg,rgba(10,102,214,.07),transparent);margin:0 -14px;padding:7px 14px}
.rmap{display:grid;grid-template-columns:62px 1fr;gap:5px 8px;align-items:center;font:600 11px/1 var(--ui);margin:6px 0 8px}
.rmap .tiles{display:flex;gap:3px}
.rmap .tiles i{height:18px;border-radius:3px;background:#ECE8DC;flex:1}
.rmap .tiles i.s1{background:#CFE0F6}.rmap .tiles i.s2{background:#9EC3F0}.rmap .tiles i.s3{background:#5E9BE6}.rmap .tiles i.s4{background:var(--key)}
.rmap .tiles i.pick{box-shadow:0 0 0 2px var(--ink)}
.toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:#fff;font:600 12.5px/1 var(--ui);border-radius:var(--r-pill);padding:10px 14px;box-shadow:var(--shadow-float);white-space:nowrap}

/* ---- the pinned chapters (Learn, the Tracer's How) ---------------------- */
/* One structure, two layouts. Motion: the frames share one sticky stage in
   one column while the steps scroll past in the other, and the step in the
   middle of the screen is the one shown (data-step, from site.js).
   Still (Reduce Motion, ?still, phones, no script): each step is its frame
   above its words.
   Each step's words are put on their own row by site.js (--row, read
   only here, so a stacked step keeps its picture over its words):
   auto-placed, they went below the bar, which holds rows 1 to n of the same
   column, so the chapter was twice as tall as its steps (AA2). */
.chapter{margin-top:clamp(40px,4.4vw,56px)}
.chapter .steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(36px,5vw,56px)}
/* minmax(0,1fr): an implicit column grew to the sheet's widest content, and
   at 320 px pushed each step's words past the screen (break-ui) */
.chapter .step{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.chapter .frame{position:relative}
.chapter .txt{display:grid;gap:12px;align-content:start}
.chapter .txt p{font-size:17.5px;color:var(--body);max-width:28em}
.chapter .h3 .hk .kc{font-size:.7em}
.chapter .bar{display:none}
html.motion .chapter.pin[data-step]{position:relative}
@media (min-width:901px){
  html.motion .chapter.pin[data-step] .steps{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 clamp(40px,5vw,88px);grid-auto-rows:minmax(36vh,auto)}
  html.motion .chapter.pin[data-step] .step{display:contents}
  /* The swap is asymmetric (improve-animations, plan 004): the frame that
     leaves goes in 120 ms and does not move; the one that arrives waits
     50 ms for it, then rises 8 px in 260 ms. Before, both crossed in 300 ms
     on one curve, and two app windows sat half-seen in one place. */
  html.motion .chapter.pin[data-step] .frame{grid-column:1;grid-row:1/span var(--n,4);align-self:start;position:sticky;top:calc(var(--navh) + 6vh);transition:opacity 260ms var(--ease-out) 50ms,transform 260ms var(--ease-out) 50ms}
  html.motion .chapter.pin[data-step] .txt{grid-column:2;grid-row:var(--row);align-self:center;transition:opacity 200ms ease,transform 260ms var(--ease-out);padding-left:32px;position:relative}
  /* only once site.js has chosen a step (data-step) are the others put away */
  html.motion .chapter.pin[data-step] .frame:not(.on){opacity:0;visibility:hidden;transform:translateY(8px) scale(.99);transition:opacity 120ms ease-out,transform 0s 120ms,visibility 0s 120ms}
  html.motion .chapter.pin[data-step] .txt:not(.on){opacity:.3}
  html.motion .chapter.pin[data-step] .txt.on{transform:translateX(4px)}
  html.motion .chapter.pin[data-step] .bar{display:block;grid-column:2;grid-row:1/span var(--n,4);position:relative;width:3px;border-radius:3px;background:var(--line);justify-self:start;margin:8vh 0}
  /* the fill is drawn by its scale, set by site.js on this element alone */
  html.motion .chapter.pin[data-step] .bar i{position:absolute;inset:0;border-radius:3px;background:var(--key);transform:scaleY(0);transform-origin:top}
}


/* ---- the questions: the panel, and a letter opens its answer ---------- */
.faqdesk{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;padding:clamp(18px,3vw,44px);margin-top:clamp(40px,4vw,56px);align-items:start;background:linear-gradient(var(--line-soft) 1px,transparent 1px) 0 0/100% 26px,linear-gradient(90deg,var(--line-soft) 1px,transparent 1px) 0 0/36px 100%,#fff;box-shadow:var(--shadow-raised)}
.faqdesk .panel{background:rgba(255,255,255,.82)}
.faqdesk .r{font-size:15.5px;padding:8px 0;cursor:pointer;width:100%;border:0;background:none;text-align:left;border-radius:6px;transition:background-color .15s ease;text-wrap:balance}
/* a key's name never breaks at its hyphen (Left- / Option?, the website review of g-web-final) */
.faqdesk .nowrap{white-space:nowrap}
.faqdesk .r.hit{padding:8px;margin:0 -8px;width:calc(100% + 16px)}
.faqdesk .r .k{min-width:22px;height:21px;font-size:12px}
.faqdesk .pb{columns:1;padding:10px 16px 8px}
.answer .pb{padding:18px 20px 20px}
.answer h3{margin:0 0 10px;font:700 19px/1.3 var(--ui)}
.answer p{font-size:16.5px;line-height:1.6;color:var(--body)}
.answer p b{color:var(--ink)}
.faqdesk .pf{justify-content:flex-start;gap:16px}
@media (max-width:900px){.faqdesk{grid-template-columns:minmax(0,1fr)}}

/* ---- the line, and the two product cards ------------------------------ */
/* G36 (the user, 2026-10-14): "Build faster, Read clearer", for Q3's
   longer line. "Read clearer" and its key are 9.1 em wide, so the rows can
   be the hero's size, up to 100 px from 1304 up; Q3's 15.9 em stopped at
   72 px. test-website-layout.js holds both rows inside the column at
   every width. */
.theline{display:grid;justify-items:start;gap:6px;width:fit-content;max-width:100%;margin:0 auto}
.lrow{display:flex;align-items:center;gap:.32em;white-space:nowrap;font:800 clamp(30px,calc(8vw - 4px),100px)/1.06 var(--display);font-stretch:118%;letter-spacing:-.035em;padding:.06em .22em}
.lrow .hk .kc{font-size:.5em}
.final .line{margin-top:30px}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);max-width:1000px;margin:clamp(56px,6vw,88px) auto 0}
.pcard{position:relative;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-card);padding:20px;display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:center;text-align:left;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out)}
.pcard img{border-radius:16px;background:#F7F5EE}
.pcard h3{font:800 22px/1.1 var(--display);font-stretch:112%;letter-spacing:-.015em}
.pcard p{font-size:15.5px;color:rgba(255,255,255,.72);margin-top:8px}
.pcard a{display:inline-flex;margin-top:12px;font-weight:600;color:var(--sky)}
@media (max-width:760px){.prod{grid-template-columns:1fr}.pcard{grid-template-columns:96px 1fr;padding:16px}}

/* ---- quotes: an empty slot draws nothing --------------------------------- */
.quote[hidden]{display:none!important}
.quote{margin:0}
.quote blockquote{margin:0;font:600 clamp(22px,2.4vw,34px)/1.25 var(--display);font-stretch:106%}
.quote figcaption{margin-top:12px;font:500 14px/1.3 var(--ui);color:var(--dim)}

/* ---- footer -------------------------------------------------------------- */
footer{padding:56px 0 64px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center;color:var(--dim);font-size:14.5px}
footer .sign{display:flex;align-items:center;gap:14px}
footer .sign b{display:block;color:var(--ink);font:800 18px/1.2 var(--display);font-stretch:112%}
footer nav{display:flex;flex-wrap:wrap;gap:22px}
footer nav a{color:var(--dim);transition:color .18s var(--ease-out)}
footer small{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 20px;font-size:12.5px;color:var(--dim);padding-top:22px;border-top:1px solid var(--line)}

/* ---- hover, where there is a pointer to hover with ----------------------
   (hover: hover) and (pointer: fine): a tap on a phone fakes a hover and
   leaves it on until the next tap (mobile-native). Touch gets :active. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#0B5FC6}
  .more:hover{color:var(--key)}
  .more:hover .ch{transform:translateX(3px)}
  .announce a:hover{border-bottom-color:var(--ink)}
  .switch a:hover{color:var(--ink)}
  .navlinks a:hover{color:var(--ink)}
  .faqdesk .r:not(.hit):hover{background:rgba(10,102,214,.05)}
  .pcard:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
  .pcard a:hover{color:#fff}
  footer nav a:hover{color:var(--ink)}
}
.switch a:not([aria-current]):active{background:rgba(255,255,255,.55)}
.faqdesk .r:not(.hit):active{background:rgba(10,102,214,.09)}

/* ---- the hero's entrance: the claim, then its proof ----------------------
   Once, on load, never on scroll: the headline settles, then the demo
   arrives under it. Transform and opacity only; still mode skips it. */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.motion .enter{animation:rise .7s var(--ease-out) both}
/* the headline only settles, never fades: it paints at once, so it stays
   the page's largest paint (LCP) and is read before anything moves */
@keyframes settle{from{transform:translateY(14px)}to{transform:none}}
html.motion .enter.e2{animation-name:settle;animation-delay:0s}
html.motion .enter.e3{animation-delay:.18s}
html.motion .enter.e4{animation-delay:.3s}

/* ---- Reduce Transparency: every frosted surface turns solid (the skill's §5) */
@media (prefers-reduced-transparency:reduce){
  .panel,.navbox{backdrop-filter:none;-webkit-backdrop-filter:none}
  .panel{background:#F5F5F5}
  .navbox{background:#fff}
}

/* ---- loops: paused off screen; still mode holds the still --------------- */
.loop.paused *,html.still:not(.gentle) .loop *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.kc,.btn,.more,.more .ch{transition:none}.enter{animation:none!important}}

/* ---- phones ---------------------------------------------------------------- */
@media (max-width:600px){
  .xl{font-size:11px}
  .grid td.l{font-size:11.5px}
  .grid th,.grid td{padding:0 5px;height:26px}
  .afw{grid-template-columns:1fr}
  .afw .side{display:none}
  .tracer table{font-size:11.5px}
  /* The line's rows never wrap, so on a phone they size to the screen:
     at a 30 px floor, 355 px of "Read them faster." ran past a 320 px
     screen (break-ui). G36's 9.1 em fit larger than Q3's 15.9 did (S2:
     20 px at 390, smaller than the cards under it): 27 px at 320, 33 at
     390, 44 at 600, where the wider rule takes over at the same size. */
  .lrow{font-size:clamp(26px,calc(9vw - 2px),44px)}
  /* display tracking eases as the type gets smaller (apple-design: tracking
     is size-specific; -.04em is for 112 px, not 46) */
  .h1{letter-spacing:-.03em}
  .h2{letter-spacing:-.022em}
}

/* ---- touch targets: 44 px where a finger is the pointer (website v3) ----
   At the phone and tablet nav, and at phone widths below it, every link
   and button a reader taps is at least 44 by 44 px (Apple's HIG; the
   reviewer checks it at 390). The brand and the ⌥ key grow only their hit
   box; the switch, the questions, the products' links and the footer's
   grow to the size. */
@media (max-width:860px){
  .brand{min-width:44px;min-height:44px}
  .menukey{min-width:44px;min-height:44px;place-items:center}
  .switch{padding:3px}
  .switch a{min-height:44px}
  .menu .r{min-height:44px;align-items:center}
}
@media (max-width:600px){
  .faqdesk .r{min-height:44px}
  .pcard a{min-height:44px;align-items:center;margin-top:2px}
  /* its underline is its border: the box grows upward, and the margin gives the room back */
  .ctas .more{padding-top:16px;margin-top:-16px}
  footer nav{gap:0 10px}
  footer nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
}