/* Omega Terminal — site. One dark world on purpose. The brand is black and white; each product line has its own colour,
   set per page with data-acc on the root (the --gold family is the page's accent). */
/* ——— type, served from this site (SIL Open Font License 1.1: /assets/fonts/OFL-*.txt). Archivo is variable in width and
   weight; IBM Plex Sans is variable in weight; IBM Plex Mono is 400/500/600. Each file covers one script subset. ——— */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 800; font-stretch: 100% 125%; font-display: swap; src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 800; font-stretch: 100% 125%; font-display: swap; src: url("/assets/fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --bg: #070706; --bg-1: #0b0a09; --bg-2: #100f0d; --panel: #151411; --panel-2: #1a1915; --chrome: #1e1c18; --control: #29261f;
  --line: #24211c; --line-2: #332f28; --text: #ede7d7; --muted: #a29a89; --faint: #69635a;
  --gold: #c5b358; --gold-hi: #ead77d; --gold-lo: #7d7136; --on-gold: #14130d;
  --up: #3fb27f; --down: #e0563e; --blue: #3fa7d6; --ice: #9fd0e0; --orange: #e8823a; --sand: #d9b36c; --slate: #6b7787; --silver: #b4b8c0;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gut: clamp(16px, 4vw, 56px); --max: 1380px; --nav: 58px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  /* the product lines' colours, used by the menu wherever it opens */
  /* one family: equal lightness, low chroma (steel, lilac, sage, clay, sand) */
  --c-eq: #93b8e0; --c-op: #bbabdb; --c-mm: #80c3ba; --c-pm: #daa88d; --c-fu: #c5b381;
}
/* big screens: let the page breathe wider than the laptop cap */
@media (min-width: 1700px) { :root { --max: 1560px; } }
/* each page's accent and the ground it sits on (a slight hue bias toward the accent) */
:root[data-acc="mono"] { --bg: #000; --bg-1: #060606; --bg-2: #0b0b0b; --panel: #0e0e0e; --panel-2: #141414; --chrome: #1b1b1b; --control: #262626; --line: #222; --line-2: #343434; --text: #ededed; --muted: #8f8f8f; --faint: #5c5c5c; --gold: #ededed; --gold-hi: #fff; --gold-lo: #9a9a9a; --on-gold: #000; --silver: #8a8a8a; }
/* the product pages share the brand's neutral black ground; only the accent changes */
:root[data-acc="eq"], :root[data-acc="op"], :root[data-acc="mm"], :root[data-acc="pm"], :root[data-acc="fu"] { --bg: #000; --bg-1: #060606; --bg-2: #0b0b0b; --panel: #0e0e0e; --panel-2: #141414; --chrome: #1b1b1b; --control: #262626; --line: #222; --line-2: #343434; --text: #ededed; --muted: #8f8f8f; --faint: #5c5c5c; --silver: #8a8a8a; }
:root[data-acc="eq"] { --gold: #93b8e0; --gold-hi: #bcd8f5; --gold-lo: #496684; --on-gold: #0b121a; }
:root[data-acc="op"] { --gold: #bbabdb; --gold-hi: #d9cdf1; --gold-lo: #685c81; --on-gold: #131019; }
:root[data-acc="mm"] { --gold: #80c3ba; --gold-hi: #b0e0d8; --gold-lo: #376f68; --on-gold: #071413; }
:root[data-acc="pm"] { --gold: #daa88d; --gold-hi: #f0cbb8; --gold-lo: #7f5944; --on-gold: #190f0a; }
:root[data-acc="fu"] { --gold: #c5b381; --gold-hi: #e1d3af; --gold-lo: #71623a; --on-gold: #151107; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); color: #fff; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* cross-page transition: the nav stays, the page slides under it */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
.nav { view-transition-name: site-nav; }

/* ——— type ——— */
.display { font-family: var(--display); font-stretch: 118%; font-weight: 720; letter-spacing: -.028em; line-height: .94; text-wrap: balance; margin: 0; }
.h1 { font-size: clamp(44px, 7.4vw, 118px); }
.h2 { font-size: clamp(34px, 4.8vw, 76px); }
.h3 { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.02; }
.lede { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--muted); max-width: 46ch; margin: 0; }
.body { color: var(--muted); max-width: 58ch; margin: 0; }
.stamp { font: 500 12.5px/1 var(--mono); letter-spacing: .02em; color: var(--gold); display: inline-flex; align-items: center; gap: 10px; }
.stamp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent); }
.stamp.dim { color: var(--muted); }
.stamp.dim::before { background: var(--faint); box-shadow: none; }
.gold { color: var(--gold); }
/* SplitText's line masks clip at the line box; give descenders (g, y, p) room below it */
.ln-mask, .display > [style*="clip"] { padding-bottom: .16em !important; margin-bottom: -.16em !important; }
.line-mask { overflow: hidden; display: block; padding-bottom: .06em; margin-bottom: -.06em; }

/* ——— layout ——— */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(88px, 13vw, 190px); position: relative; }
.section.tight { padding-block: clamp(64px, 8vw, 120px); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.split > * { min-width: 0; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(40px, 6vw, 84px); }
.head > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 900px) { .split, .head { grid-template-columns: minmax(0, 1fr); } }

/* ——— buttons ——— */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 3px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: 500 15px var(--sans); cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--text) 26%, var(--bg)); }
.btn:active { transform: translateY(1px); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.btn.gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn svg { width: 16px; height: 16px; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.link { color: var(--gold); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.link::after { content: "→"; transition: transform .25s var(--ease); }
.link:hover::after { transform: translateX(4px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ——— nav ——— */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(var(--nav) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.nav .wrap { height: var(--nav); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 15px var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.brand svg { width: 19px; height: auto; }
.nav-links { display: flex; gap: 4px; }
.nav-links { align-items: center; align-self: stretch; }
.nav-dd { align-self: stretch; display: flex; align-items: center; }
.nav-links a, .dd-trigger { padding: 7px 11px; border-radius: 3px; color: var(--muted); font-size: 14px; transition: color .2s, background .2s; }
.nav-links a:hover, .dd-trigger:hover, .dd-trigger[aria-expanded="true"] { color: var(--text); background: rgba(255, 255, 255, .045); }
.nav-links a[aria-current="page"], .dd-trigger[aria-current="page"] { color: var(--text); }
.dd-trigger { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; font-family: var(--sans); }
.dd-trigger svg { width: 9px; height: auto; transition: transform .25s var(--ease); }
.dd-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav { transition: background .2s var(--ease); }
.nav.dd-open { background: var(--bg-1); }
/* the menu under "Terminal": five product tiles on hairlines; a product's colour appears only on hover, in its icon */
.mega { position: absolute; inset: 100% 0 auto 0; background: var(--bg-1); border-bottom: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85); opacity: 0; transform: translateY(-6px); transition: opacity .18s var(--ease), transform .24s var(--ease); }
.mega.in { opacity: 1; transform: none; }
.nav .mega .mega-in { height: auto; display: block; padding-block: 18px 0; }
.mega-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mega-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 176px; padding: 20px 20px 22px; background: var(--bg-1); min-width: 0; transition: background .2s; }
.mega-tile svg { width: 26px; height: 26px; color: var(--muted); margin-bottom: auto; transition: color .2s, transform .35s var(--ease); }
.mega-tile b { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--sans); color: var(--text); }
.mega-tile b::after { content: "\2192"; color: var(--c); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s var(--ease); }
.mega-tile em { font-style: normal; font-size: 13.5px; line-height: 1.45; color: var(--muted); min-height: 2.9em; }
.mega-tile:hover, .mega-tile:focus-visible, .mega-tile[aria-current="page"] { background: var(--panel); outline: none; }
.mega-tile:hover svg, .mega-tile:focus-visible svg, .mega-tile[aria-current="page"] svg { color: var(--c); transform: translateY(-2px); }
.mega-tile:hover b::after, .mega-tile:focus-visible b::after { opacity: 1; transform: none; }
.mega.in .mega-tile { animation: mega-tile .38s var(--ease) both; }
.mega.in .mega-tile:nth-child(2) { animation-delay: .03s; } .mega.in .mega-tile:nth-child(3) { animation-delay: .06s; } .mega.in .mega-tile:nth-child(4) { animation-delay: .09s; } .mega.in .mega-tile:nth-child(5) { animation-delay: .12s; }
@keyframes mega-tile { from { opacity: 0; transform: translateY(6px); } }
.mega-foot { display: flex; align-items: center; gap: 16px; padding: 14px 2px 18px; font-size: 13.5px; color: var(--muted); }
.mega-foot .sp { flex: 1; }
.mega-new { display: inline-flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.mega-new .pill { font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); }
.mega-new i { font-style: normal; color: var(--muted); transition: transform .25s var(--ease), color .2s; }
.mega-new:hover i { transform: translateX(3px); color: var(--text); }
.mega-all { color: var(--muted); transition: color .2s; } .mega-all:hover { color: var(--text); }
@media (max-width: 1180px) { .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega-tile { min-height: 150px; } .mega-tile:last-child { grid-column: span 2; } }
@media (max-width: 900px) { .mega { display: none !important; } }
.sheet-h { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 14px 0 4px; }
.sheet a.sheet-p { display: flex; align-items: center; gap: 12px; }
.sheet a.sheet-p svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.nav-sp { flex: 1; }
.tape { display: flex; align-items: center; gap: 14px; font: 500 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.tape b { color: var(--text); font-weight: 500; }
.tape .chg.up { color: var(--up); } .tape .chg.dn { color: var(--down); }
.tape .clock { color: var(--gold); min-width: 9.6ch; }
.tape .sep { width: 1px; height: 14px; background: var(--line-2); }
.nav-burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 3px; background: none; cursor: pointer; align-items: center; justify-content: center; }
.nav-burger span { width: 16px; height: 1.5px; background: var(--text); box-shadow: 0 5px 0 var(--text), 0 -5px 0 var(--text); }
.sheet { position: fixed; z-index: 49; inset: calc(var(--nav) + env(safe-area-inset-top, 0px)) 0 auto 0; background: color-mix(in srgb, var(--bg) 97%, transparent); border-bottom: 1px solid var(--line); padding: 10px var(--gut) 22px; display: grid; gap: 2px; }
.sheet a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
@media (max-width: 1100px) { .tape .sym-wrap, .tape .sep.a { display: none; } }
@media (max-width: 900px) { .nav-links, .nav .btn { display: none; } .nav-burger { display: inline-flex; } .tape .clock { min-width: 0; } }

/* ——— the terminal's own chrome, drawn in code: the app's 2.0 pane, in its black-and-white theme ———
   As the terminal frames every panel: a 1 px chrome rim inside a 2 px ring of the gap colour, square; the 21 px title row —
   ≡ 7 px in, the panel's name and what it shows, then the window's own glyphs bare on a 20 px pitch, the last 6 px from the
   rim; stacked panels' tabs on the plot colour, the front tab cut from the chrome; a panel's 30 px toolbar straight under the
   title row (one chrome block, no line between) holding 20 px boxed controls; a drawing toolbox is a 30 px chrome column of
   20 px boxed tools. What is on is the theme's white with black ink. */
:root { --w-edge: var(--line-2); --w-on: #ededed; --w-on-ink: #000; --w-hover: color-mix(in srgb, var(--text) 10%, var(--control)); }
.win { background: var(--panel); border: 1px solid var(--chrome); border-radius: 0; outline: 2px solid #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.win-bar { height: 21px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0; background: var(--chrome); border: 0; font: 400 12px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; }
/* ≡, the panel's menu: three 9 px bars, 7 px in from the rim */
.win-bar::before { content: ""; flex: none; width: 9px; height: 7px; margin: 0 1px 0 7px; background: linear-gradient(currentColor 0 1px, transparent 1px 3px, currentColor 3px 4px, transparent 4px 6px, currentColor 6px 7px); }
.win-bar .t { color: var(--text); font-weight: 400; }
.win-bar .g { color: var(--text); font-variant-numeric: tabular-nums; }
.win-bar .m { font: 400 11px var(--sans); color: var(--muted); }
.win-bar .sp { flex: 1; }
/* the window's glyphs: minimise, maximise, close — a 1 px line, a 10 px box, an 8 px cross — bare, in the text ink */
.win-ctl { display: flex; align-self: stretch; height: auto; margin-left: auto; padding-right: 1px; }
.win-ctl i { width: 20px; flex: none; display: block; padding: 6px 5px 0; box-sizing: border-box; color: var(--text); transition: color .12s; }
.win-ctl i::before { content: ""; display: block; width: 10px; height: 10px; box-sizing: border-box; }
.win-ctl i:first-child::before { background: linear-gradient(currentColor, currentColor) 0 9px / 10px 1px no-repeat; }
.win-ctl i:nth-child(2)::before, .win-ctl i:first-child:nth-last-child(2)::before { background: none; border: 1px solid currentColor; }
.win-ctl i:last-child::before { border: 0; background: linear-gradient(45deg, transparent calc(50% - .55px), currentColor calc(50% - .55px) calc(50% + .55px), transparent calc(50% + .55px)) 1px 1px / 8px 8px no-repeat, linear-gradient(-45deg, transparent calc(50% - .55px), currentColor calc(50% - .55px) calc(50% + .55px), transparent calc(50% + .55px)) 1px 1px / 8px 8px no-repeat; }
.win-ctl i:only-child::before { border: 0; }
/* stacked panels: the title row becomes their tab row, on the plot colour; the front tab is chrome, running straight into the
   toolbar under it, with its own ≡ and ✕; the others are their muted name and ✕ */
.win-bar:has(> .win-tabs) { background: var(--panel); }
.win-bar:has(> .win-tabs)::before { display: none; }
.win-bar:has(> .win-tabs) > :first-child:not(.win-tabs) { margin-left: 8px; }
.win-tabs { display: flex; align-self: stretch; align-items: flex-end; gap: 0; min-width: 0; height: auto; }
.win-tabs span { position: relative; flex: none; height: 18px; display: flex; align-items: center; gap: 0; padding: 0 6px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font: 400 12px var(--sans); white-space: nowrap; }
.win-tabs span:hover { color: var(--text); }
.win-tabs span.on { background: var(--chrome); color: var(--text); box-shadow: none; }
.win-tabs span.on::before { content: ""; flex: none; align-self: flex-start; width: 9px; height: 7px; margin: 5px 5px 0 0; background: linear-gradient(currentColor 0 1px, transparent 1px 3px, currentColor 3px 4px, transparent 4px 6px, currentColor 6px 7px); color: var(--text); }
.win-tabs span::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 6px; color: var(--text); background: linear-gradient(45deg, transparent calc(50% - .55px), currentColor calc(50% - .55px) calc(50% + .55px), transparent calc(50% + .55px)), linear-gradient(-45deg, transparent calc(50% - .55px), currentColor calc(50% - .55px) calc(50% + .55px), transparent calc(50% + .55px)); opacity: .9; }
.win-tabs span:not(.on)::after { color: var(--muted); }
/* a panel's toolbar: 30 px of chrome under the title row, 20 px controls 5 px apart; and the controls themselves */
.win-tool { height: 30px; flex: none; display: flex; align-items: center; gap: 5px; padding: 5px 6px; box-sizing: border-box; background: var(--chrome); border: 0; overflow: hidden; white-space: nowrap; }
.wbtn { flex: none; height: 20px; min-width: 20px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid var(--w-edge); border-radius: 1px; background: var(--control); color: var(--text); font: 700 10px var(--sans); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.wbtn.ico { width: 20px; padding: 0; background: transparent; }
.wbtn svg { width: 12px; height: 12px; flex: none; }
.wbtn.on, .wbtn[aria-pressed="true"] { background: var(--w-on); border-color: var(--w-on); color: var(--w-on-ink); }
.wfield { flex: none; height: 20px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; border: 1px solid var(--w-edge); border-radius: 1px; background: var(--panel); color: var(--text); font: 400 12px var(--sans); white-space: nowrap; }
.wfield b { font-weight: 700; }
.wsep { flex: none; width: 1px; height: 20px; background: var(--w-edge); }
.win-body { position: relative; flex: 1; min-height: 0; }
.win-body canvas { width: 100%; height: 100%; }
.win-strip { height: 22px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 8px; border-top: 0; background: var(--chrome); font: 400 11px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; }
.win-strip b { color: var(--text); font-weight: 500; }
/* a small label: the chart's scale-mode chip — 16 px, the control edge */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 16px; padding: 0 5px; border: 1px solid var(--w-edge); border-radius: 1px; background: var(--chrome); font: 500 10px var(--mono); color: var(--text); }
.chip.gold { border-color: color-mix(in srgb, var(--gold) 45%, var(--w-edge)); background: var(--chrome); color: var(--gold-hi); }
/* the drawing toolbox (and any tool column): a 30 px chrome column, 20 px boxed tools 5 px apart, groups ruled off */
.wrail { width: 30px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 5px 0; box-sizing: border-box; background: var(--chrome); border: 0; overflow: hidden; }
.wrail > i { position: relative; width: 20px; height: 20px; flex: none; box-sizing: border-box; display: grid; grid-template-columns: none; gap: 0; place-items: center; border: 1px solid var(--w-edge); border-radius: 1px; background: transparent; color: var(--text); transition: background .15s, color .15s; }
.wrail > i svg { width: 14px; height: 14px; }
.wrail > i.on { background: var(--w-on); border-color: var(--w-on); color: var(--w-on-ink); }
.wrail > i.hit { background: var(--w-hover); color: #fff; }
.wrail > i.end { margin-top: auto; }
.wrail > i.rule::before, .wrail > i.end::before { content: ""; position: absolute; left: -6px; right: -6px; top: -4px; height: 1px; background: var(--w-edge); }

/* ——— rows of figures (label · value on hairlines, never tiles) ——— */
.figs { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.figs > div { padding: 18px 18px 20px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.figs span { display: block; font-size: 13px; color: var(--muted); }
.figs b { display: block; margin-top: 6px; font: 500 clamp(22px, 2.3vw, 34px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--text); }
@media (max-width: 700px) { .figs { --cols: 2 !important; } }

/* ——— feature list rows ——— */
.rows { border-top: 1px solid var(--line); }
.rows > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rows > div > * { min-width: 0; }
.rows h4 { margin: 0; font: 600 17px/1.35 var(--sans); }
.rows p { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .rows > div { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ——— the page's end ——— */
.footer { border-top: 1px solid var(--line); padding-block: 56px 40px; color: var(--muted); font-size: 14px; }
.footer .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer .legal a { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.footer h5 { margin: 0 0 12px; font: 600 13px var(--sans); color: var(--text); }
.footer a { display: block; padding: 4px 0; }
.footer .ft-brand { display: inline-flex; align-items: center; gap: 10px; padding: 0; color: var(--text); font: 600 16px var(--sans); }
.footer .ft-brand svg { width: 20px; height: auto; }
.footer a:hover { color: var(--text); }
.footer .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }
@media (max-width: 800px) { .footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ——— access ——— */
.access { position: relative; overflow: hidden; }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; max-width: 640px; }
.form label { display: grid; gap: 7px; font-size: 13px; color: var(--muted); min-width: 0; }
.form input, .form select { height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--bg-2); color: var(--text); font: 15px var(--sans); min-width: 0; width: 100%; }
.form input:focus, .form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 15%, transparent); }
.form .full { grid-column: 1 / -1; }
.form .done { grid-column: 1 / -1; font: 500 14px var(--mono); color: var(--gold); }
@media (max-width: 600px) { .form { grid-template-columns: minmax(0, 1fr); } }

/* reveal defaults: visible at rest; the script hides only what it is about to animate */
[data-reveal] { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ——— the notice each visit opens with ——— */
.notice { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 0 var(--gut) calc(16px + env(safe-area-inset-bottom, 0px)); pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity .26s var(--ease), transform .3s var(--ease); }
.notice.in { opacity: 1; transform: none; }
.notice-in { pointer-events: auto; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 16px 18px; background: color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); }
.notice p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); min-width: 0; }
.notice p b { color: var(--text); font-weight: 600; }
.notice p a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.notice-act { display: flex; gap: 8px; }
@media (max-width: 700px) { .notice-in { grid-template-columns: minmax(0, 1fr); } }


/* no step strips over the pinned scenes; their scripts still run, unseen */
#ct-steps, #sp-steps, #st-steps, #eng-steps, #res-steps, #step-bars, #ws-steps { display: none !important; }

/* ——— edge to edge on notched phones (viewport-fit=cover) ——— */
:root { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }

/* ——— sign-up: until it opens, one honest line where the form goes ——— */
p.soon { display: inline-flex; align-items: center; gap: 12px; margin: 0; min-height: 50px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--panel); font: 500 14px var(--mono); color: var(--text); }
p.soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.access p.soon { justify-self: start; }
[data-turnstile] { flex-basis: 100%; }
[data-turnstile]:empty, form.done [data-turnstile] { display: none; }