/* osmiummod.com. Direction: card 13 Depth-Led Glass, the in-game admin panel's material
   (docs/PANEL.md, managed/Osmium.Panel/Pure/Look.cs): a dark glass plate with a light-catch edge,
   under the mark, which draws itself and lights up the way the launch film does (tools/make-mark.py).
   Glass only where something real sits behind it (the mark's halo); below the fold the page is the
   panel's own dark steel with the seam light as the one colour, and the product itself (real renders)
   as the imagery. Dark only. */

@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/fonts/chakra-petch-700.89e30b418d.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block; /* the wordmark; a fallback face would read as a different brand */
}

@font-face {
  font-family: "Saira";
  src: url("/assets/fonts/saira-sc-var.608b3b9a7c.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* The teaser render's darkest far field: the page the mark's light falls on. */
  --canvas: #000102;

  /* palette '#2477b1' --name osmium --cast none: #2477b1 is the teaser's seam light at peak
     chroma (OKLCH h 244). Dark set. */
  --ink: #e8e8e8;
  /* Secondary and tertiary ink, raised and given the steel's cool cast in round 3 (the owner found
     grey text unreadable): 11.0:1 and 7.9:1 on the canvas. */
  --ink-2: #b6bdc6;
  --ink-3: #98a0aa;
  --ink-strong: #f7f7f7;

  /* The seam light as text and focus: the render's hue (244.2) at the most chroma sRGB allows, at
     the lowest lightness that reads 4.5:1 over luminance 0.0705, the brightest pixel then measured
     under any text on the plate (unblurred WebKit, the worst case). The shipped layout measures at
     most 0.0565 under its text; "Coming soon" itself sits at 10:1 or better, 10.8:1 on the canvas. */
  --accent: #75c2ff;

  /* In-game panel tokens: Look.Steel for the wordmark; the glass is the panel's Surface #0b0b0d
     mixed 10% toward the seam light in OKLCH (#0e151a, h 244), so what it covers stays blue
     instead of going grey. */
  --steel: #c9ced6;
  --glass: rgb(14 21 26 / 0.5);
  --glass-solid: rgb(14 21 26 / 0.92);
  --glass-doc: rgb(14 21 26 / 0.78);  /* the legal sheet: long reading wants a steadier ground */
  --glass-wash: rgb(36 119 177 / 0.07); /* #2477b1, the seam light, a trace on the plate's face */
  --bloom: rgb(36 119 177 / 0.12);
  --inset-low: rgb(0 0 0 / 0.4);
  --edge-hot: rgb(160 215 255 / 0.9);  /* the edge directly under the light */
  --edge-lo: rgb(255 255 255 / 0.22);
  --edge-faint: rgb(255 255 255 / 0.05);
  --sheen: rgb(255 255 255 / 0.05);
  --shadow: rgb(0 0 0 / 0.6);

  /* The mark's halo: the seam light (#2477b1) at stepped alpha, ending at zero slope so the fade
     leaves no ring (Mach band); the page grain dithers what 8-bit steps remain. */
  /* Black-Tron finish (owner, 2026-10-08: "more of a black tron look clean smooth modern"): the
     mark and the wordmark are black, drawn by thin lines of the seam light. --line-lit is the
     line itself (OKLCH h 244, the accent's hue, lighter); --line-glow its light on the page. */
  --line-lit: #a6d7ff;
  --line-glow: rgb(36 119 177 / 0.55);
  --ink-black: #05070a;

  /* The mark's ambient light: the seam light at stepped alpha, ending at zero slope so the fade
     leaves no ring (Mach band); the page grain dithers what 8-bit steps remain. Faint: black first. */
  --halo: radial-gradient(closest-side, rgb(36 119 177 / 0.3), rgb(36 119 177 / 0.2) 16%,
    rgb(36 119 177 / 0.11) 34%, rgb(36 119 177 / 0.05) 54%, rgb(36 119 177 / 0.015) 76%, transparent);

  /* Panel surfaces (Look.cs) for the steel sections below the fold. */
  --surface: #0b0b0d;
  --raised: #141417;
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.2);
  --hover: rgb(255 255 255 / 0.06);
  --field: rgb(36 119 177 / 0.22);    /* the seam light, carried below the fold */

  /* Data marks (dataviz skill, emphasis form): Osmium in the seam-light family, the others in a
     recessive grey. validate_palette.js --mode dark --surface #0a0f13: lightness band, CVD
     separation (17.1) and normal-vision floor (18.1) pass; the grey's chroma floor fails by design. */
  --mark-on: #3a8fd9;

  /* Primary buttons: deep seam-blue glass (owner: "buttons could be blue depending on the shade").
     #0274b6 is the lightest step at the render's hue 244 (max chroma) that keeps white text at 5:1;
     hover #027abf holds 4.6:1. The face is opaque so the corona behind the header cannot erode it. */
  --btn-deep: #0274b6;
  --btn-deep-hover: #027abf;
  --on-deep: #ffffff;
  --btn-rim: rgb(117 194 255 / 0.55);
  --btn-hi: rgb(207 230 255 / 0.5);
  --btn-glow: rgb(36 119 177 / 0.55);
  --on-accent: #04101c;
  --worse: #ffb547;  /* Look.Warning: a worse result, always written as the word "worse" */  /* Look.AccentInk: dark ink on the seam light (the panel's Light button) */
  --mark-ctx: #5f646c;
  --mark-worse: #bf8128; /* the plugin grid's two misses */
  /* One colour per framework on every chart: Osmium is --mark-on, Oxide aqua, Carbon orange
     (validate_palette.js --mode dark --pairs all with #3a8fd9: every check passes on #0a0f13 and #000102). */
  --series-oxide: #199e70;
  --series-carbon: #d95926;

  --radius-sheet: 28px; /* liquid glass (2026-10-19): the Dusk direction's sheet radius */
  --radius-ctl: 999px;  /* controls are pills */
  --wrap: 1200px;
  --gutter: 16px;

  /* Mark (hex) height on the home fold and the 404; the whole fold (mark, wordmark, plate) fits
     one 1440x900 or 393x852 screen. Sub-page mastheads set their own. */
  --mark: min(30svh, 56vw, 300px);
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  /* 430 on the variable axis: light text on near-black thins out at 400 in this semi-condensed face. */
  font: 430 1.0625rem/1.55 "Saira", ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.page > main { flex: 1 0 auto; }

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(20px, 5svh, 56px) clamp(16px, 3svh, 32px);
  min-width: 0;
}

/* A faint grain (+0 to 3 levels, same-origin tile) over the halo and the canvas: it dithers the
   8-bit steps of the halo's gradient. Above the halo, under the mark and the plate. */
.page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/grain.577ea17515.png");
  pointer-events: none;
}

/* ---- The mark: inline SVG from tools/make-mark.py (viewBox 180 x 206, the hex 173.2 x 200) ---- */
.lockup { position: relative; display: grid; justify-items: center; }

.mark {
  display: block;
  width: calc(var(--mark) * 0.8738);
  height: calc(var(--mark) * 1.03);
  overflow: visible; /* the bloom and the glints paint past the hex */
}

/* The light behind the mark, on the page layer (under the grain, which dithers it). */
.halo {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(var(--mark) * 0.515);
  width: calc(var(--mark) * 3.4);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--halo);
  pointer-events: none;
}

/* The lit state the animation settles into, and what reduced motion shows at once. */
.m-line { opacity: 0.9; stroke-dasharray: 1 1; }
.m-ridge { opacity: 0.16; }
.m-seam-glow { opacity: 0.6; }
.m-glow { opacity: 0.4; }
.m-back { opacity: 0.35; }
.m-flare { opacity: 0; mix-blend-mode: screen; }
.halo { opacity: 0.85; }

/* Home and 404: the lines trace each piece, the black steel fills in under them, the three pieces
   clip shut, then the seams light and the lines glow, and everything settles. */
@media (prefers-reduced-motion: no-preference) {
  .draw .m-line { animation: m-trace 1.1s cubic-bezier(0.55, 0, 0.3, 1) 0.1s both; }
  .draw .m-p1 .m-line { animation-delay: 0.22s; }
  .draw .m-p2 .m-line { animation-delay: 0.34s; }
  .draw :is(.m-metal, .m-hole, .m-gaps) { animation: m-fade-in 0.7s ease-out 0.95s both; }
  .draw .m-p0 { animation: m-clip-0 0.42s cubic-bezier(0.2, 1.25, 0.4, 1) 1.35s both; }
  .draw .m-p1 { animation: m-clip-1 0.42s cubic-bezier(0.2, 1.25, 0.4, 1) 1.35s both; }
  .draw .m-p2 { animation: m-clip-2 0.42s cubic-bezier(0.2, 1.25, 0.4, 1) 1.35s both; }
  .draw :is(.m-seam, .m-seam-glow, .m-glow, .m-back),
  .lockup .halo { animation: m-pop 1.5s ease-out 1.8s both; }
  .draw .m-flare { animation: m-flare 1s ease-out 1.8s both; }
  .lockup .wordmark { animation: m-word 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.6s both; }

  /* Sub-pages: the seams light only. */
  .glow :is(.m-seam, .m-seam-glow, .m-glow, .m-back),
  .mast-mark .halo { animation: m-pop 1.3s ease-out 0.15s both; }
  .glow .m-flare { animation: m-flare 0.9s ease-out 0.15s both; }
}

@keyframes m-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-fade-in { from { opacity: 0; } }
/* Each piece starts out along its centroid (make-mark.py prints these). */
@keyframes m-clip-0 { from { transform: translate(-5.87px, -1.25px); } }
@keyframes m-clip-1 { from { transform: translate(1.85px, 5.71px); } }
@keyframes m-clip-2 { from { transform: translate(4.02px, -4.46px); } }
/* Dark, a pop to full, then down to the element's own resting level (no "to": the base value). */
@keyframes m-pop { from { opacity: 0; } 12% { opacity: 1; } }
@keyframes m-flare { from { opacity: 0; } 14% { opacity: 0.7; } to { opacity: 0; } }
@keyframes m-word { from { opacity: 0; letter-spacing: 0.34em; } }

/* The glass plate. Same build as the panel's Sheet: surface tint over the blurred scene, soft
   outer shadow, a 1px edge that catches the light above it (brighter on top). */
.glass {
  position: relative;
  container-type: inline-size;
  width: min(100%, 38rem);
  --pad: clamp(24px, 4vw, 36px);
  margin-top: clamp(24px, 4svh, 40px);
  padding: var(--pad);
  border-radius: var(--radius-sheet);
  background:
    radial-gradient(130% 90% at 50% 0%, var(--glass-wash), transparent 72%),
    linear-gradient(to bottom, var(--sheen), transparent 35%),
    var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.08);
  backdrop-filter: blur(26px) saturate(180%) brightness(1.08);
  box-shadow: inset 0 -1px 0 var(--inset-low), 0 30px 80px -20px var(--shadow), 0 40px 140px var(--bloom);
  text-align: center;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  /* Lit from the mark: hottest directly under it, fading along the top edge to the corners and
     down the sides, over a faint rim that still gives the plate a footprint. */
  background:
    radial-gradient(55% 140% at 50% 0%, var(--edge-hot), transparent 70%),
    linear-gradient(to bottom, var(--edge-lo), var(--edge-faint) 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* The wordmark under the mark, as in the logo lockup: "OSMIUM" in Chakra Petch Bold is 3.915em of
   advances plus five 0.14em gaps = 4.615em, about 1.6 times the hex's width. Black letters drawn by
   one line of light, like the mark's pieces. */
.wordmark {
  margin: calc(var(--mark) * 0.17) -0.14em 0 0; /* the right margin takes back the last letter's gap */
  /* line-height 0.72 makes the line box run from cap top (0.70em) to the baseline in this face
     (ascent 0.992, descent 0.308), so the gaps are measured from the letters. */
  font: 700 calc(var(--mark) * 0.3) / 0.72 "Chakra Petch", ui-sans-serif, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel); /* where text stroke is missing, plain steel letters */
}

@supports (-webkit-text-stroke: 1px black) {
  .wordmark {
    -webkit-text-fill-color: var(--ink-black);
    -webkit-text-stroke: max(1px, calc(var(--mark) * 0.0045)) var(--line-lit);
    filter: drop-shadow(0 0 calc(var(--mark) * 0.03) var(--line-glow));
  }
}

.glass > :first-child { margin-top: 0; }

.what {
  margin: clamp(18px, 6cqi, 30px) 0 0;
  color: var(--ink);
  font-size: clamp(1.0625rem, 4.6cqi, 1.25rem);
  line-height: 1.4;
  text-wrap: balance;
}

.soon {
  margin: clamp(10px, 3cqi, 16px) 0 0;
  color: var(--accent);
  font-size: clamp(1.5rem, 7.4cqi, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
}

/* Wide-gamut screens get the seam light at the most chroma P3 allows at the same lightness
   (OKLCH 0.7875, so every measured contrast holds). */
@media (color-gamut: p3) {
  @supports (color: oklch(0 0 0)) {
    :root { --accent: oklch(0.7875 0.126 244.2); }
  }
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  width: min(100%, var(--wrap));
  margin-inline: auto;
  margin-top: clamp(32px, 6vw, 64px);
  border-top: 1px solid var(--line);
  padding-block: 8px max(16px, env(safe-area-inset-bottom));
  font-size: 0.875rem;
  color: var(--ink-3);
}

.foot nav { display: flex; flex-wrap: wrap; column-gap: 24px; }
.foot p { margin: 0; padding-block: 12px; }

a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 150ms ease-out;
}

a:hover { color: var(--ink); }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  margin-inline: -8px; /* a 44px target without moving the text off the axis */
  text-decoration: none;
}

.foot a:hover { text-decoration: underline; }

/* Sub-pages and legal: the masthead starts under the header, the lit mark inside its plate. */
.doc .stage { justify-content: flex-start; padding-bottom: 0; }

.sheet {
  width: min(100%, 46rem);
  background:
    radial-gradient(120% 55% at 50% 0%, var(--glass-wash), transparent 65%),
    var(--glass-doc);
  text-align: start;
  padding: clamp(24px, 5vw, 48px) clamp(20px, 5vw, 56px) clamp(28px, 5vw, 48px);
}

.sheet h1,
.sheet h2 {
  font-family: "Chakra Petch", ui-sans-serif, sans-serif;
  font-weight: 700;
  color: var(--steel);
  line-height: 1.15;
}

.sheet h1 { margin: 0; font-size: clamp(1.75rem, 6cqi, 2.5rem); }
.sheet-head { display: flex; align-items: center; gap: clamp(14px, 3cqi, 22px); --mark: clamp(44px, 9cqi, 60px); }

.sheet h2 {
  margin: 2.2em 0 0.6em;
  font-size: clamp(1.25rem, 3.6cqi, 1.5rem);
}

.sheet h2 span { color: var(--accent); margin-right: 0.5em; }

.stamp { margin: 0.6em 0 0; color: var(--ink-2); }

/* Numbered clauses of the Terms of Use (legal/TERMS.md): the number hangs left of the text. */
.sheet p.cl { display: grid; grid-template-columns: 2.9em minmax(0, 1fr); }
.sheet p.cl .n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sheet code { font-family: ui-monospace, monospace; font-size: 0.9em; color: var(--ink); overflow-wrap: anywhere; }

.sheet p,
.sheet li { max-width: 68ch; }

.sheet p { margin: 0.75em 0 0; }

.sheet ul { margin: 0.75em 0 0; padding-left: 1.25em; }

.sheet li + li { margin-top: 0.4em; }

.sheet strong { font-weight: 600; color: var(--ink); }

.lost .what { margin-top: 0; font: 700 clamp(1.375rem, 5cqi, 1.75rem)/1.25 "Chakra Petch", ui-sans-serif, sans-serif; color: var(--ink-strong); }

.soon a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
}

/* ---- Header ---- */
.top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(16px, 3vw, 40px);
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding-top: max(8px, env(safe-area-inset-top));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--steel);
  text-decoration: none;
  font: 700 1.0625rem/1 "Chakra Petch", ui-sans-serif, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand .mark-mini { width: 25px; height: 28px; flex: none; overflow: visible; }
.brand:hover { color: var(--ink-strong); }

.nav { display: flex; flex-wrap: wrap; column-gap: clamp(16px, 2.4vw, 28px); }

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
}

.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink-strong); font-weight: 600; }

.act { display: flex; align-items: center; gap: 16px; }

.signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 759px) {
  .top { grid-template-columns: 1fr auto; }
  .nav { grid-column: 1 / -1; grid-row: 2; }
  /* A greyed control is dead weight in a phone header (none is put there today). */
  .top .btn.off { display: none; }
}

/* ---- Buttons: white is the working highlight, as in the panel ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-ctl);
  font: 600 0.9375rem/1 "Saira", ui-sans-serif, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.btn.primary {
  background: var(--btn-deep);
  color: var(--on-deep);
  box-shadow: inset 0 1px 0 var(--btn-hi), inset 0 0 0 1px var(--btn-rim), 0 10px 28px -12px var(--btn-glow);
}

.btn.primary:hover {
  background: var(--btn-deep-hover);
  color: var(--on-deep);
  box-shadow: inset 0 1px 0 var(--btn-hi), inset 0 0 0 1px var(--accent), 0 12px 32px -10px var(--btn-glow);
}

/* Greyed, not a link (no href, not focusable): the egg buttons until downloads open. */
.btn.off {
  color: var(--ink-3);
  background: var(--hover);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: default;
}

.soon-note { flex-basis: 100%; margin: 2px 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.cta.start { justify-content: flex-start; align-items: center; margin-top: 20px; }
.cta.start .soon-note { flex-basis: auto; margin: 0; }
.btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.ghost:hover { background: var(--hover); color: var(--ink-strong); }

@media (max-width: 359px) {
  .top .btn { padding: 0 12px; font-size: 0.875rem; }
}

/* ---- Home: the mark's fold ---- */
.hero { min-height: min(calc(100svh - 72px), 60rem); }

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(20px, 6cqi, 28px);
}

@media (max-width: 419px) {
  .cta .btn { flex: 1 1 8rem; }
}

.status {
  margin: clamp(14px, 4cqi, 20px) 0 0;
  color: var(--accent);
  font-weight: 600;
}

/* ---- Sections below the fold: the panel's steel, the seam light as the one colour ---- */
.band {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding-top: clamp(64px, 7vw, 96px);
}

.hero + .band { padding-top: clamp(40px, 5vw, 64px); } /* the fold's own bottom padding is the rest of the gap */

.band > h2,
.sec > h2,
.feat > h2 {
  margin: 0;
  max-width: 32ch;
  color: var(--steel);
  font: 700 clamp(1.75rem, 3.4vw, 2.625rem)/1.1 "Chakra Petch", ui-sans-serif, sans-serif;
  text-wrap: balance;
}

.lead {
  margin: 16px 0 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
}

.lead strong, .facts strong, .readout strong, .table strong { color: var(--ink); font-weight: 600; }

/* The measured readout: each number is the headline of its own sentence. */
.readout { margin: clamp(28px, 4vw, 44px) 0 0; }

.readout > div {
  display: grid;
  grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr);
  gap: 8px clamp(24px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--line);
}

.readout dt {
  color: var(--accent);
  font: 700 clamp(2.5rem, 5vw, 4.25rem)/0.95 "Chakra Petch", ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums;
}

.readout dt small { display: block; margin-top: 0.3em; color: var(--ink-2); font-size: max(0.36em, 1.0625rem); line-height: 1.2; }
.readout dd { margin: 0; padding-top: 0.35em; max-width: 60ch; color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.125rem); }
.readout .equal dt { color: var(--steel); }

@media (max-width: 719px) {
  .readout > div { grid-template-columns: 1fr; }
}

/* A readout with charts: the number and its sentence share the first line, the chart runs the full
   width of the row under both (the number's column was otherwise empty below it). The dd spans the
   row and repeats its columns, so its sentence lines up with the sentences of rows without a chart. */
.readout.charted dd {
  display: grid;
  grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr);
  column-gap: clamp(24px, 4vw, 56px);
  grid-column: 1 / -1;
  grid-row: 1;
  max-width: none;
  padding-top: 0;
}

.readout.charted dt { grid-row: 1; grid-column: 1; }

/* A readout of several claims about one test (Performance): a step down in display size and air. */
.readout.compact > div { padding-block: clamp(16px, 2vw, 22px); }
.readout.compact dt { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
.readout.charted .say { grid-column: 2; margin: 0; padding-top: 0.35em; max-width: 64ch; }
.readout.charted dd > :not(.say) { grid-column: 1 / -1; }
.readout.charted .bars { max-width: 52rem; }

@media (max-width: 719px) {
  .readout.charted dd { grid-template-columns: minmax(0, 1fr); grid-row: auto; }
  .readout.charted .say { grid-column: 1; }
}

/* Real renders of the product. */
.shots {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 44px);
  align-items: start;
}

.shot { margin: 0; }
.shots > .full { grid-column: 1 / -1; }
.shot img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px var(--line-strong), 0 24px 64px -24px var(--shadow); }
.shot figcaption { margin-top: 12px; max-width: 72ch; color: var(--ink-2); font-size: 0.9375rem; }

.shots h3, .feat h3 {
  margin: 0;
  color: var(--ink);
  font: 700 1.1875rem/1.25 "Chakra Petch", ui-sans-serif, sans-serif;
}

@media (max-width: 859px) {
  .shots { grid-template-columns: 1fr; }
}

.facts { list-style: none; margin: 18px 0 0; padding: 0; }
.facts.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: clamp(24px, 4vw, 48px); margin-top: 8px; }
.facts li { padding-block: 11px; border-top: 1px solid var(--line); color: var(--ink-2); max-width: 72ch; }

/* The feature index: names and one concrete line each, densely, every row a link. */
.feats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  column-gap: clamp(24px, 4vw, 56px);
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
}

.feats a {
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  padding-block: 18px 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
}

.feats a:hover { color: var(--ink); }
.feats a:hover .name { color: var(--ink-strong); }
.feats .name { color: var(--steel); font: 700 1.1875rem/1.25 "Chakra Petch", ui-sans-serif, sans-serif; }
.feats .desc { line-height: 1.5; }
.word { color: var(--accent); font-weight: 600; } /* a status, as a word in its colour */

.access p { max-width: 62ch; color: var(--ink-2); }


/* ---- Sub-pages: a glass masthead with the lit mark beside its heading, as wide as the content ---- */
.mast {
  --mark: clamp(72px, 8vw, 104px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(20px, 3vw, 40px);
  width: min(100%, var(--wrap));
  margin-top: clamp(8px, 2vw, 24px);
  text-align: start;
}

.mast-mark { position: relative; display: grid; place-items: center; }
.mast-mark .halo { top: 50%; width: calc(var(--mark) * 2.6); }

@media (max-width: 599px) {
  /* The mark sits beside the heading, and the lead runs under both. */
  .mast { --mark: 52px; column-gap: 16px; row-gap: 4px; }
  .mast-text { display: contents; }
  .mast p { grid-column: 1 / -1; }
}

.mast h1 {
  margin: 0;
  color: var(--steel);
  font: 700 clamp(2rem, 7cqi, 3.25rem)/1.05 "Chakra Petch", ui-sans-serif, sans-serif;
}

.mast p { margin: 14px 0 0; max-width: 65ch; color: var(--ink); font-size: clamp(1.0625rem, 2.6cqi, 1.25rem); }

.wrap { width: min(100%, var(--wrap)); margin-inline: auto; }

.split {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(40px, 6vw, 72px);
}

.toc { position: sticky; top: 24px; align-self: start; }
.toc-m { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }

.toc a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-left: 16px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
}

.toc a:hover { color: var(--ink); }

@media (max-width: 899px) {
  .split { grid-template-columns: minmax(0, 1fr); } /* bare 1fr would grow to the code block's width */
  .toc { display: none; }
  .toc-m { display: block; margin-bottom: 32px; border-block: 1px solid var(--line); }
  .toc-m summary { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; cursor: pointer; }
  .toc-m ol { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .toc-m a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; }
  .toc a { min-height: 44px; }
}

.feat { scroll-margin-top: 24px; padding-bottom: clamp(32px, 4vw, 48px); }
.feat + .feat { padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line-strong); }
.feat > h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); }
.feat .lead { color: var(--ink); }
.feat .shot { margin-top: 28px; }
.feat h3 { margin-top: 28px; }
.shots h3.next { margin-top: 28px; }
.sec h3 { margin: 28px 0 0; color: var(--ink); font: 700 1.1875rem/1.25 "Chakra Petch", ui-sans-serif, sans-serif; }
.feat .sheet-shot { max-width: 544px; }

.sec { padding-top: clamp(48px, 6vw, 80px); }

.steps { list-style: none; counter-reset: step; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px clamp(16px, 2vw, 28px); }
.steps li { counter-increment: step; padding-top: 12px; border-top: 1px solid var(--line-strong); color: var(--ink-2); font-size: 1rem; }
.steps li::before { content: counter(step); display: block; margin-bottom: 6px; color: var(--accent); font: 700 1.5rem/1 "Chakra Petch", ui-sans-serif, sans-serif; }
.steps strong { display: block; color: var(--ink); font-weight: 600; }

.code { margin: 20px 0 0; padding: 16px 18px; overflow-x: auto; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 0.875rem/1.6 ui-monospace, monospace; }
.code code { font-size: inherit; overflow-wrap: normal; white-space: pre; }
.code .c { color: var(--ink-3); }
.codefig { margin: 0; }
.codefig figcaption { margin-top: 10px; color: var(--ink-2); font-size: 0.9375rem; }

.table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 1rem; }
.table th, .table td { padding: 12px 20px 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: var(--ink); font-weight: 600; }
.table td { color: var(--ink-2); }
.table thead th { color: var(--ink-3); font-weight: 400; border-top: 0; padding-top: 0; }
.table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv th { width: 1%; white-space: nowrap; }
.table.narrow { width: auto; min-width: min(100%, 26rem); }
.zoom { display: block; border-radius: 18px; }

/* Screenshots open full size (on a phone their UI text is too small to read in the page): the
   link ends the caption line, on the shot's right edge, never over the picture. */
.shot figcaption:has(.fullsize) { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; max-width: none; }
.shot figcaption > span { max-width: 72ch; }
.fullsize { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--ink); }
.kv th code { overflow-wrap: normal; }

@media (max-width: 599px) {
  .kv th, .kv td { display: block; width: auto; padding-right: 0; }
  .kv td { border-top: 0; padding-top: 0; }
}

h2 .word { margin-left: 0.3em; font: 600 0.5em/1 "Saira", ui-sans-serif, sans-serif; vertical-align: 0.35em; }

.scroll-x { overflow-x: auto; }
.swipe { display: none; margin: 16px 0 0; color: var(--ink-2); font-size: 0.9375rem; }

@media (max-width: 1023px) {
  .swipe { display: block; } /* the table is wider than the screen from here down */
  .swipe + .scroll-x .table { margin-top: 8px; }
}

code { color: var(--ink); font-family: ui-monospace, monospace; font-size: 0.9em; overflow-wrap: anywhere; }

.note { color: var(--ink-2); font-size: 1rem; max-width: 72ch; }

/* The seam light carried below the fold: a soft field behind a section, so the glass there has
   something real behind it. */
.lit { position: relative; }

.lit::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: min(160%, 1800px);
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(55% 45% at 50% 38%, var(--field), transparent 72%);
  pointer-events: none;
}

/* A glass sheet below the fold: the panel's Sheet over that light. */
.pane {
  position: relative;
  margin-top: clamp(28px, 4vw, 44px);
  padding: 4px clamp(20px, 3.4vw, 40px) clamp(8px, 1.6vw, 16px);
  border-radius: var(--radius-sheet);
  background: linear-gradient(to bottom, var(--sheen), transparent 30%), var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  box-shadow: inset 0 -1px 0 var(--inset-low), 0 30px 80px -20px var(--shadow);
}

.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--edge-lo), var(--edge-faint) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.pane .readout { margin-top: 0; }
.pane .readout > div:first-child { border-top: 0; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pane { background: var(--glass-solid); }
}

/* The archive as cells: every plugin that loads, lit; the two that do not, outlined and last. */
.cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, 6px);
  gap: 2px;
  margin-top: 16px;
}

.cells i { width: 6px; height: 6px; border-radius: 1px; background: var(--mark-on); }
.cells i.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mark-worse); }
.cells-key { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; color: var(--ink); font-size: 0.9375rem; }
.cellnote { margin: 6px 0 0; color: var(--ink-2); font-size: 0.9375rem; }

/* Chart keys: the mark beside its word (the word carries the meaning, the colour the identity). */
.k { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: -0.05em; }
.k.sq { border-radius: 2px; }
.k-better { background: var(--mark-on); }
.k-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mark-worse); }
.k-oxide, .k-carbon { width: 18px; height: 3px; border-radius: 2px; vertical-align: 0.2em; }
.k-oxide { background: var(--series-oxide); }
.k-carbon { background: var(--series-carbon); }
.k-solid { background: var(--ink-2); }
.k-hollow { box-shadow: inset 0 0 0 2px var(--ink-2); }

/* Hook-call cost as bars on one axis (0 to 8 us); a measured range is the bar's lighter end. */
.bars { margin: 20px 0 0; max-width: 44rem; }
.bars figcaption { color: var(--ink-2); font-size: 0.9375rem; margin-bottom: 8px; }

.bar-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 7.5rem;
  align-items: center;
  column-gap: 14px;
}

.bar-row .who { color: var(--ink); font-size: 0.9375rem; }
.bar-row .val { color: var(--ink); font-size: 0.9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row .track {
  position: relative;
  height: 32px;
  /* Gridlines at 0, 2, 4, 6 and 8 us; rows stack without gaps, so the lines run through. */
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 25% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 75% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 0 / 1px 100% no-repeat;
}

.bar { position: absolute; top: 10px; height: 12px; }
.bar { left: 0; border-radius: 0 4px 4px 0; background: var(--mark-ctx); }
.b-osm { width: 25%; background: var(--mark-on); box-shadow: 0 0 12px rgb(58 143 217 / 0.45); } /* about 2 of 8 */
.b-car { width: 76.25%; background: var(--series-carbon); } /* 6.1, the middle of 5.8 to 6.4 */
.b-oxi { width: 90%; background: var(--series-oxide); }      /* 7.2, the middle of 6.9 to 7.5 */

.bar-row.axis .track { height: 24px; background: none; border-top: 1px solid var(--line-strong); color: var(--ink-2); font-size: 0.8125rem; }
.t { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.t0 { left: 0; transform: none; }
.t2 { left: 25%; }
.t4 { left: 50%; }
.t6 { left: 75%; }
.t8 { left: 100%; transform: translateX(-100%); }

@media (max-width: 479px) {
  .bar-row { grid-template-columns: 3.75rem minmax(0, 1fr) 6.5rem; column-gap: 8px; }
  .bar-row .who, .bar-row .val { font-size: 0.875rem; }
  .t2, .t6 { display: none; }
  .cells { grid-template-columns: repeat(auto-fill, 4px); gap: 1px; }
  .cells i { width: 4px; height: 4px; border-radius: 0; }
}

/* The load test: every comparison with its interval and its verdict as a word. */
.lt { font-size: 0.9375rem; }
.lt th, .lt td { padding-right: 16px; white-space: nowrap; }
.lt thead th { vertical-align: bottom; }
.lt tr.grp > * { border-top-color: var(--line-strong); }
.ci { color: var(--ink-2); font-size: 0.875rem; }
.v { font-weight: 600; }
.v-better { color: var(--accent); }
.v-equal { color: var(--ink-2); }
.v-worse { color: var(--worse); }

/* The load test as line charts: Osmium's advantage over each reference across 50, 100 and 200
   players, up is better; a panel per plugin set, side by side (on a phone, swiped). */
.lines-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 24px 0 0; color: var(--ink); font-size: 0.9375rem; }
.lines { margin: 18px 0 0; }
.lines figcaption { color: var(--ink-2); font-size: 0.9375rem; }
.lines figcaption strong { margin-right: 0.4em; color: var(--ink); font-weight: 600; }
.lines-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.lp { padding: 12px 10px 4px; border-radius: 10px; background: rgb(255 255 255 / 0.015); box-shadow: inset 0 0 0 1px var(--line); }
.lp-h { margin: 0 0 4px 4px; color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.lines-svg { display: block; width: 100%; height: auto; overflow: visible; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.lines-svg .grid { stroke: var(--line); stroke-width: 1; }
.lines-svg .zero { stroke: var(--line-strong); stroke-width: 1.5; }
.lines-svg .tick { fill: var(--ink-2); }
.lines-svg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lines-svg .ln-oxide { stroke: var(--series-oxide); }
.lines-svg .ln-carbon { stroke: var(--series-carbon); }
.lines-svg .dot { stroke-width: 2; }
.lines-svg .dot.solid { stroke: var(--canvas); }
.lines-svg .dot-oxide.solid { fill: var(--series-oxide); }
.lines-svg .dot-carbon.solid { fill: var(--series-carbon); }
.lines-svg .dot.hollow { fill: var(--canvas); }
.lines-svg .dot-oxide.hollow { stroke: var(--series-oxide); }
.lines-svg .dot-carbon.hollow { stroke: var(--series-carbon); }
.lines-svg .end { fill: var(--ink); font-weight: 600; }

@media (max-width: 899px) {
  .lines-panels { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(92%, 380px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .lp { scroll-snap-align: start; }
  /* The panel draws at about 0.9 of its viewBox here: 14 units is about 13 px on screen. */
  .lines-svg { font-size: 14px; }
  .lines-svg .end { font-size: 13.5px; }
}

/* The table behind the chart, folded: every number, for reading or for a screen reader. */
.numbers { margin-top: 24px; border-block: 1px solid var(--line); }
.numbers summary { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; }
.numbers summary::-webkit-details-marker { display: none; }
.numbers summary::before {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 4px 0 2px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 150ms ease-out;
}
.numbers[open] summary::before { transform: rotate(45deg); }
.numbers summary span { color: var(--ink-2); font-weight: 400; }
.numbers summary:hover { color: var(--ink-strong); }
.numbers[open] summary { border-bottom: 1px solid var(--line); }
.numbers .table { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  a, .btn { transition: none; }
}

@media (forced-colors: active) {
  .wordmark { -webkit-text-fill-color: CanvasText; -webkit-text-stroke: 0; filter: none; }
  .halo { display: none; }
  .glass, .pane { border: 1px solid CanvasText; }
  .glass::before, .pane::before { display: none; }
  .cells i, .bar, .k, .lines-svg { forced-color-adjust: none; }
}


/* ==== Liquid glass (2026-10-19, owner: "darker yet vibrant liquid glass") ======================
   The Dusk direction (glass.zircon.studio/dusk, also the Osmium Admin web panel): a darker canvas lit by
   calm fields of the seam light and two cool companions, panes of glass with a specular rim, pill
   controls. Nothing decorative moves; the mark's draw on load is the only motion. */
:root {
  --canvas: #010307;
  --g-tint: rgb(13 20 30 / 0.5);
  --g-tint-dense: rgb(10 16 25 / 0.72);
  --g-blur: blur(26px) saturate(165%) brightness(0.92);
  --g-hair: rgb(255 255 255 / 0.1);
  --g-spec: rgb(255 255 255 / 0.4);
  --g-spec-2: rgb(255 255 255 / 0.12);
  --g-rim: inset 0 0 0 1px var(--g-hair), inset 1.5px 1.5px 1px -1px var(--g-spec), inset -1px -1px 1px -0.5px var(--g-spec-2),
    inset 0 0 18px -6px rgb(255 255 255 / 0.06);
  --g-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.8), 0 2px 8px -2px rgb(0 0 0 / 0.35);
  --fill: rgb(255 255 255 / 0.06);
  --fill-hover: rgb(255 255 255 / 0.1);
  --cyan: rgb(0 178 214);
  --seam-hot: #d6efff; /* the lit seam's core on the fold's line-drawn mark */
}

/* The scene: fixed behind every page. */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 50% 14%, rgb(2 116 182 / 0.2), transparent 72%),
    radial-gradient(38% 42% at 4% 62%, rgb(0 178 214 / 0.09), transparent 72%),
    radial-gradient(44% 40% at 96% 84%, rgb(14 92 160 / 0.14), transparent 72%),
    var(--canvas);
}

/* The material, on the fold's plate, the panes and the sub-page sheets. */
.glass,
.pane {
  border-radius: var(--radius-sheet);
  background: radial-gradient(120% 70% at 50% 0%, var(--glass-wash), transparent 70%), var(--g-tint);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow), var(--g-rim);
}
.glass::before,
.pane::before {
  background: linear-gradient(135deg, var(--g-spec) 0%, transparent 32%, transparent 64%, var(--g-spec-2) 100%);
  opacity: 0.55;
}
.sheet {
  background: radial-gradient(120% 55% at 50% 0%, var(--glass-wash), transparent 65%), var(--g-tint-dense);
}

/* Header: one floating glass bar. The name in the web panel's type, like the fold (round 7). */
.brand {
  gap: 10px;
  color: var(--ink-strong);
  font: 700 1.125rem/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
  text-transform: none;
}
.top {
  margin-top: max(12px, env(safe-area-inset-top));
  padding: 6px 8px 6px 20px;
  border-radius: var(--radius-ctl);
  background: var(--g-tint-dense);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow), var(--g-rim);
}
.nav a { padding-inline: 12px; border-radius: var(--radius-ctl); transition: background-color 150ms ease-out, color 150ms ease-out; }
.nav { column-gap: 2px; }
.nav a:hover { background: var(--fill-hover); }
.nav a[aria-current="page"] { background: var(--fill); }
.signin { padding-inline: 14px; border-radius: var(--radius-ctl); }
.signin:hover { background: var(--fill-hover); }
.act { gap: 4px; }
@media (max-width: 759px) {
  .top { border-radius: 26px; padding: 6px 6px 4px 16px; }
  .nav { flex-wrap: nowrap; margin-left: -12px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; padding-inline: 10px; }
}

/* Buttons: pills. */
.btn { padding: 0 22px; font-weight: 600; }
.btn.ghost { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgb(255 255 255 / 0.06); }
.btn.ghost:hover { background: var(--fill-hover); }

/* ---- Home ---- */
/* The fold's mark (round 7, owner: "closer to what you did on the web admin page"): the Osmium mark as the web panel
   draws it, in lines (outline, chamfer, bevels, the ring of light, light in the three seams), and the name in the panel's
   own type. On load the outlines trace, the chamfers follow, the bevels and ring fade in and the seams light, then
   everything settles (about 2.6 s; reduced motion shows the rest state at once: keyframes have no "to"). */
.lockup.lines { gap: 0; }
.hero-mark {
  display: block;
  width: calc(var(--mark) * 1.25);
  height: calc(var(--mark) * 1.25);
  margin: calc(var(--mark) * -0.1) 0;
  overflow: visible;
}
.hero-mark path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.hm-ring { stroke: rgb(140 196 245 / 0.16); stroke-width: 0.6; }
.hero-mark .hm-out { fill: rgb(120 180 240 / 0.035); stroke: rgb(170 215 252 / 0.85); stroke-width: 0.95; stroke-dasharray: 1 1; }
.hm-cham { stroke: rgb(150 205 250 / 0.42); stroke-width: 0.6; stroke-dasharray: 1 1; }
.hm-bevel { stroke: rgb(150 205 250 / 0.38); stroke-width: 0.55; }
.hm-glow { stroke: rgb(64 168 242 / 0.75); stroke-width: 3.4; filter: blur(2.6px); opacity: 0.75; }
.hm-seam { stroke: var(--seam-hot); stroke-width: 1.15; }
/* Beside a sub-page heading the mark is small: strokes keep their screen width instead of scaling down with it. */
:is(.mast-mark, .sheet-head) .hero-mark path { vector-effect: non-scaling-stroke; }
:is(.mast-mark, .sheet-head) .hm-out { stroke-width: 1.4; }
:is(.mast-mark, .sheet-head) :is(.hm-cham, .hm-bevel) { stroke-width: 1; }
:is(.mast-mark, .sheet-head) .hm-ring { stroke-width: 0.8; }
:is(.mast-mark, .sheet-head) .hm-seam { stroke-width: 1.6; }
:is(.mast-mark, .sheet-head) .hm-glow { stroke-width: 4; filter: blur(2px); }
.hero-name {
  margin: calc(var(--mark) * 0.04) 0 0;
  color: #fff;
  font: 700 calc(var(--mark) * 0.24) / 1 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.035em;
  text-shadow: 0 0 calc(var(--mark) * 0.12) rgb(64 168 242 / 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .lines .hm-out { animation: m-trace 1.2s cubic-bezier(0.55, 0, 0.3, 1) 0.1s both; }
  .lines .hm-out.hm-p1 { animation-delay: 0.22s; }
  .lines .hm-out.hm-p2 { animation-delay: 0.34s; }
  .lines .hm-cham { animation: m-trace 1s cubic-bezier(0.55, 0, 0.3, 1) 0.6s both; }
  .lines :is(.hm-bevel, .hm-ring) { animation: m-fade-in 0.8s ease-out 1.2s both; }
  .lines :is(.hm-seam, .hm-glow),
  .lockup.lines .halo { animation: m-pop 1.5s ease-out 1.6s both; }
  .lockup.lines .hero-name { animation: m-fade-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.3s both; }
}

.home .glass { width: min(100%, 40rem); }
.home .what { margin-top: 0; font-size: clamp(1.25rem, 5cqi, 1.5rem); line-height: 1.35; color: var(--ink-strong); }
.state { margin: clamp(14px, 4cqi, 18px) 0 0; color: var(--accent); font-size: 0.9375rem; font-weight: 600; }
.home .band > h2 { color: var(--steel); }

/* Light fields carried down the page with the sections (on top of the fixed scene), so each band's glass
   has blue light behind it at any scroll position and in a full-page capture. Brand hue and cyan only. */
.field-a, .field-b, .field-c { position: relative; isolation: isolate; }
.field-a::before, .field-b::before, .field-c::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -120px -40vw;
  pointer-events: none;
}
.field-a::before { background: radial-gradient(38% 46% at 30% 58%, rgb(2 116 182 / 0.2), transparent 72%), radial-gradient(30% 40% at 82% 30%, rgb(0 178 214 / 0.08), transparent 72%); }
.field-b::before { background: radial-gradient(36% 50% at 64% 55%, rgb(2 116 182 / 0.18), transparent 72%); }
.field-c::before { background: radial-gradient(40% 60% at 50% 50%, rgb(2 116 182 / 0.22), transparent 72%); }

/* Why: the four claims as numerals on one glass pane, the frame-rate chart under them as the proof. */
.pane.proof { padding: clamp(22px, 3vw, 36px); }
.claims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px clamp(28px, 5vw, 72px);
  margin: 0;
}
.claims > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.claims dt {
  color: var(--accent);
  font: 700 clamp(3rem, 6vw, 4.5rem)/1 "Chakra Petch", ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgb(36 119 177 / 0.6);
}
.claims dt small { display: block; margin-top: 8px; color: var(--ink-2); font: 500 0.9375rem/1.2 "Saira", ui-sans-serif, sans-serif; text-shadow: none; }
.claims dd { margin: 0; max-width: 48ch; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.claims dd strong { display: block; margin-bottom: 4px; color: var(--ink-strong); font: 700 1.125rem/1.25 "Chakra Petch", ui-sans-serif, sans-serif; }
.claims dd a { display: block; width: fit-content; margin-top: 10px; color: var(--accent); font-weight: 600; text-decoration: none; }
.claims dd a:hover { text-decoration: underline; }
.proof-chart { margin-top: clamp(28px, 3.4vw, 40px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.proof-chart h3, .how h3, .caps-h { margin: 0; color: var(--steel); font: 700 1.25rem/1.25 "Chakra Petch", ui-sans-serif, sans-serif; }
.proof-chart .note { margin: 8px 0 0; }
.home .lp { background: none; box-shadow: none; padding-inline: 0; }
@media (max-width: 719px) { .claims { grid-template-columns: minmax(0, 1fr); } }

/* Built in: the real in-game panel beside a compact list. */
.builtin { margin-top: clamp(28px, 4vw, 40px); }
.shot.ingame {
  padding: 10px;
  border-radius: 28px;
  background: var(--g-tint);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow), var(--g-rim);
}
.shot.ingame figcaption { margin: 0; padding: 10px 8px 2px; font-size: 0.875rem; color: var(--ink-3); }
.featlist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 36px);
  list-style: none;
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: 0;
}
.featlist a {
  display: grid;
  gap: 2px;
  padding: 14px 4px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.45;
  text-decoration: none;
}
.featlist strong { color: var(--ink-strong); font: 700 1.0625rem/1.3 "Chakra Petch", ui-sans-serif, sans-serif; }
.featlist a:hover strong { color: var(--accent); }
@media (max-width: 1023px) { .featlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .featlist { grid-template-columns: minmax(0, 1fr); } }

/* Osmium Admin: the mark drawn in lines behind it, as in the panel itself, faded out at the section's ends. */
.admin { position: relative; isolation: isolate; }
.mark-lines {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 60%;
  width: min(1240px, 160vw);
  height: auto;
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
  mask-image: radial-gradient(closest-side, #000 62%, transparent);
}
.mark-lines path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ml-ring { stroke: rgb(140 196 245 / 0.06); stroke-width: 1; }
.ml-out { stroke: rgb(140 196 245 / 0.18); stroke-width: 1.25; }
.ml-cham { stroke: rgb(140 196 245 / 0.09); stroke-width: 1; }
.ml-seam { stroke: rgb(191 230 255 / 0.42); stroke-width: 1.5; filter: drop-shadow(0 0 6px rgb(64 168 242 / 0.7)); }
.admin-shot {
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: 10px;
  border-radius: 30px;
  background: var(--g-tint);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow), var(--g-rim);
}
.admin-shot img { display: block; width: 100%; height: auto; border-radius: 20px; }
.how { margin-top: clamp(28px, 4vw, 40px); }
.how .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; gap: 16px clamp(20px, 3vw, 40px); }
.how .steps li { border-top: 1px solid var(--line-strong); padding-top: 14px; font-size: 1rem; }
.how .steps li::before { font-size: 1.25rem; text-shadow: 0 0 14px rgb(36 119 177 / 0.7); }
.how .steps strong { margin-bottom: 2px; }
.caps-h { margin-top: clamp(28px, 4vw, 40px); }
.caps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px clamp(16px, 2vw, 28px);
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.caps li { position: relative; padding-left: 18px; color: var(--ink); font-size: 0.9375rem; line-height: 1.4; }
.caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  rotate: 45deg;
  background: var(--accent);
  box-shadow: 0 0 8px rgb(117 194 255 / 0.6);
}
.offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.offer p { margin: 0; color: var(--ink-2); }
.offer strong { color: var(--ink-strong); }
.offer .cta.start { margin: 0; }
@media (max-width: 1023px) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .offer .cta.start { width: 100%; }
}

/* Documentation: what arrives with the launch, on the scene. */
.docs-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 36px); margin: clamp(24px, 3vw, 32px) 0 0; }
.docs-list > div { padding-top: 14px; border-top: 1px solid var(--line-strong); }
.docs-list dt { color: var(--ink-strong); font: 700 1.0625rem/1.3 "Chakra Petch", ui-sans-serif, sans-serif; }
.docs-list dd { margin: 4px 0 0; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 1023px) { .docs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(20px, 3vw, 36px); } }
@media (max-width: 559px) { .docs-list { grid-template-columns: minmax(0, 1fr); } }

/* Launching soon. */
.launch .pane {
  margin-top: 0;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px);
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgb(2 116 182 / 0.3), transparent 70%),
    radial-gradient(50% 80% at 100% 100%, rgb(0 178 214 / 0.1), transparent 70%),
    var(--g-tint);
}
.launch h2 { margin: 0 auto; max-width: none; color: var(--steel); font: 700 clamp(1.75rem, 3.4vw, 2.625rem)/1.1 "Chakra Petch", ui-sans-serif, sans-serif; }
.launch p { margin: 14px auto 0; max-width: 56ch; color: var(--ink-2); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }
.launch .cta.start { justify-content: center; margin-top: 24px; }

@media (prefers-reduced-transparency: reduce) {
  .top, .shot.ingame, .admin-shot { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
}