/* DAYWORLD — shared styles
   Order: tokens · base · layout · header · buttons · type · sections · components · pages · footer · motion · responsive
   No external fonts or frameworks. All visuals are CSS, SVG, or canvas, so they stay sharp at any resolution. */

/* ---------- Tokens ---------- */
:root {
  /* Neutral greys are easier on the eyes than stark white and black: soft grey paper, white surfaces,
     graphite text, and a lighter graphite for large dark areas. */
  --paper: #f4f4f2;
  --paper-2: #ebebe8;
  --paper-3: #dfdfdb;
  --surface: #ffffff;
  --ink: #1d1f22;
  --graphite: #2b2e33;
  --ink-2: #3a3c40;
  --ink-3: #5d6066;
  --ink-4: #8e9196;
  --rule: rgba(29, 31, 34, .1);
  --rule-2: rgba(29, 31, 34, .2);
  /* Daylight yellow: the brand accent, used sparingly as small fills and highlights with dark text, never as text on white. */
  --sun: #ffd84a;
  --sun-2: #ffe680;
  --sun-3: #fff5c4;
  --sun-deep: #f0bb00;
  --sun-ink: #6f5400;
  --sun-rgb: 255, 216, 74;
  --glow-rgb: 255, 234, 150;
  --sun-gradient: radial-gradient(circle at 36% 30%, #ffffff 0%, #fffbe8 24%, #fff1a8 54%, #ffe36e 82%, #ffd640 100%);
  --sky: #eaf2f6;
  --sky-ink: #2c5a74;
  /* Viewfinder brackets for framed panels, drawn as gradient layers so they never affect layout.
     They sit just inside the corners, so they also work on rounded panels. */
  --brackets:
    linear-gradient(var(--ink), var(--ink)) left 8px top 8px / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 8px top 8px / 2px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 8px top 8px / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 8px top 8px / 2px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 8px bottom 8px / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 8px bottom 8px / 2px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 8px bottom 8px / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 8px bottom 8px / 2px 14px no-repeat;
  --cut: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  /* DAYWORLD's "day cycle" palette: the colours a day passes through. Dawn peach, daylight, sky, sea, and dusk,
     plus rose, leaf, and ocean for the video models. They appear only where things need telling apart
     (model families, categories), always as dots, rings, or bars next to dark text, never as text colours. */
  --h-dawn: 255, 143, 107;
  --h-sky: 92, 170, 230;
  --h-sea: 52, 170, 155;
  --h-dusk: 136, 126, 232;
  --h-rose: 228, 130, 170;
  --h-leaf: 150, 196, 72;
  --h-ocean: 64, 104, 200;
  /* The signature stripe runs through a day: dawn, daylight, sky, dusk. */
  --day: linear-gradient(90deg, rgb(var(--h-dawn)) 0 25%, var(--sun) 25% 50%, rgb(var(--h-sky)) 50% 75%, rgb(var(--h-dusk)) 75%);
  /* Soft shadows for things you read or touch. */
  --soft: 0 1px 2px rgba(29, 31, 34, .06), 0 10px 26px -12px rgba(29, 31, 34, .22);
  --soft-lg: 0 2px 6px rgba(29, 31, 34, .05), 0 30px 60px -30px rgba(29, 31, 34, .32);
  --pill: 999px;
  --halftone: radial-gradient(circle, rgba(29, 31, 34, .26) 1.1px, transparent 1.7px) 0 0 / 9px 9px;
  --hatch: repeating-linear-gradient(-45deg, var(--ink) 0 1.2px, transparent 1.2px 7px);

  /* Latin text uses the first fonts that exist; Chinese characters fall through to each platform's Simplified Chinese
     sans (PingFang on Apple devices, Microsoft YaHei on Windows, Noto or Source Han elsewhere), in labels too. */
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC";
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, var(--cjk), system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, var(--cjk), monospace;

  --wrap: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --gap: clamp(16px, 2vw, 32px);
  --header-h: 76px;
  /* Shape language: structure stays square; surfaces you read are softly rounded; controls are pills and circles. */
  --r-l: 16px;
  --r-m: 10px;
  --r-s: 6px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --lift: 0 30px 60px -42px rgba(29, 31, 34, .24), 0 2px 6px -3px rgba(29, 31, 34, .08);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  min-width: 300px;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Page atmosphere, fixed behind everything: two layout guide lines on the content edges,
   warm daylight from the upper right, and cool sky light from the lower left. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(29, 31, 34, .07), rgba(29, 31, 34, .07)) max(var(--gutter), calc(50% - 720px + var(--gutter))) 0 / 1px 100% no-repeat,
    linear-gradient(rgba(29, 31, 34, .07), rgba(29, 31, 34, .07)) min(calc(100% - var(--gutter)), calc(50% + 720px - var(--gutter))) 0 / 1px 100% no-repeat,
    radial-gradient(1200px 820px at 92% -12%, rgba(255, 242, 196, .32), transparent 64%),
    radial-gradient(980px 720px at -8% 112%, rgba(222, 232, 240, .5), transparent 66%);
}
/* Very fine film grain for material warmth. A small SVG tile, rendered at device resolution. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url("assets/grain.svg") repeat;
  background-size: 200px;
  opacity: .32;
  mix-blend-mode: soft-light;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--sun); }
[hidden] { display: none !important; }

/* Scrollbars are controls, so they are pills: a graphite thumb on a soft grey track ruled like an instrument scale.
   The page thumb turns daylight yellow while it is dragged. Inner panels get a slimmer grey pill on a clear track.
   Chromium and Safari draw the ::-webkit-scrollbar parts. Chromium ignores those parts on any element that sets the
   standard scrollbar-width or scrollbar-color, so the standard properties are set only for browsers without them (Firefox). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--pill); background: var(--ink-4) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--ink-3); }
::-webkit-scrollbar-thumb:active { background-color: var(--graphite); }
/* The page scrollbar takes its style from body, because body's overflow-x passes to the viewport; html covers the rest. */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 14px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  background: repeating-linear-gradient(rgba(29, 31, 34, .16) 0 1px, transparent 1px 10px) center / 6px 100% no-repeat, var(--paper-2);
  box-shadow: inset 1px 0 0 var(--rule-2);
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-left-width: 4px; background: var(--graphite) padding-box; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background-color: var(--ink); }
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active { background-color: var(--sun); box-shadow: inset 0 0 0 1.5px var(--ink); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--graphite) var(--paper-2); }
  .mobile-menu, .window-body, .matrix-wrap, .cmd code, .paper pre { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 200; padding: 12px 18px; background: var(--graphite); color: #fff; text-decoration: none; transform: translateY(-160%); transition: transform .3s var(--ease-out); }
.skip-link:focus { transform: none; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.section { position: relative; padding-block: clamp(88px, 11vw, 184px); }
.section.tight { padding-block: clamp(64px, 7vw, 112px); }
.section.flush-top { padding-top: 0; }
/* Tone sections carry a fine blueprint grid: the technical texture of the site. */
.section.tone {
  background:
    linear-gradient(rgba(29, 31, 34, .045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(29, 31, 34, .045) 1px, transparent 1px) 0 0 / 56px 56px,
    rgba(235, 235, 232, .86);
  border-block: 1px solid var(--rule);
}
.rule-top { border-top: 1px solid var(--rule); }

/* ---------- Hues ----------
   Each thing that needs telling apart carries one hue in --hue-rgb; components read it for dots, rings, and bars.
   Model families and video models each have their own. The tool compatibility section deliberately stays
   ink and white, with daylight yellow only for the selected tool; its groups differ by ring style and letter. */
:root { --hue-rgb: var(--sun-rgb); }
#deepseek, [href$="#deepseek"] { --hue-rgb: var(--h-sky); }
#glm, [href$="#glm"] { --hue-rgb: var(--h-dusk); }
#qwen, [href$="#qwen"] { --hue-rgb: var(--h-sea); }
#kimi, [href$="#kimi"] { --hue-rgb: var(--h-dawn); }
#seedance, [href$="#seedance"] { --hue-rgb: var(--h-rose); }
#wan, [href$="#wan"] { --hue-rgb: var(--h-leaf); }
#minimax, [href$="#minimax"] { --hue-rgb: var(--h-ocean); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 80; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(244, 244, 242, .86);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity .4s var(--ease), border-color .4s var(--ease);
}
.site-header.is-scrolled::before, .menu-open .site-header::before { opacity: 1; border-color: var(--rule); }
.progress { position: absolute; inset: 0 0 auto; height: 3px; overflow: hidden; z-index: 2; }
.progress span { display: block; height: 100%; background: var(--sun); box-shadow: inset 0 -1px 0 rgba(29, 31, 34, .25); transform: scaleX(0); transform-origin: 0 50%; }
.bar { position: relative; height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; border-radius: 2px; }
.brand svg { width: 34px; height: 34px; }
.brand-word { font-weight: 600; font-size: 1.0625rem; letter-spacing: .2em; }
.mark-sun { fill: var(--sun); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.mark-line { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; fill: none; }
.mark-line.soft { opacity: .5; }
/* The sunset has DAY's eyes: they blink now and then, and glance down at the wordmark on hover. */
.mark-eyes { fill: #1d1f22; transform-box: view-box; transform-origin: 18px 15px; animation: markBlink 7s infinite; transition: translate .35s var(--ease-out); }
.brand:hover .mark-eyes { translate: .9px 1.1px; }
@keyframes markBlink { 0%, 90%, 94%, 100% { transform: none; } 92% { transform: scaleY(.12); } }
.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--pill);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s, background-color .25s;
}
.nav a::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 3px;
  border-radius: 3px;
  background: var(--sun);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--ease-out);
}
.nav a:hover { color: var(--ink); background: rgba(29, 31, 34, .05); }
.nav a:hover::before { transform: scaleX(.35); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::before { transform: none; box-shadow: 0 1px 0 rgba(29, 31, 34, .3); }
.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 16px 0 20px;
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  background: var(--surface);
  box-shadow: var(--soft);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.menu-toggle .lines { position: relative; width: 18px; height: 10px; }
.menu-toggle .lines i { position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.menu-toggle .lines i:first-child { top: 0; }
.menu-toggle .lines i:last-child { top: 8.4px; }
.menu-toggle[aria-expanded="true"] .lines i:first-child { top: 4.2px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .lines i:last-child { top: 4.2px; transform: rotate(-45deg); }
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: var(--paper);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.mobile-menu nav { display: grid; }
.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.875rem, 8vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -.03em;
  text-decoration: none;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms + 60ms);
}
.mobile-menu nav a small { font: 400 .9375rem var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.mobile-menu nav a[aria-current="page"] { position: relative; padding-left: 28px; }
.mobile-menu nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1.5px var(--ink); }
.mobile-menu.is-open nav a { transform: none; opacity: 1; }
.mobile-menu .btn { align-self: stretch; }
.mobile-menu .tagline { font: 400 .9375rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.mobile-menu .lang { display: none; }

/* Language switch: a two-part pill beside the main navigation. The current language is graphite; the other is a link
   to the same page in that language. */
.lang { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--ink); border-radius: var(--pill); background: var(--surface); box-shadow: var(--soft); }
.lang > * { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 36px; padding: 0 12px; border-radius: var(--pill); font: 600 .9375rem/1 var(--mono); letter-spacing: .06em; color: var(--ink-2); text-decoration: none; transition: background-color .25s, color .25s; }
.lang a:hover { background: rgba(29, 31, 34, .07); color: var(--ink); }
.lang [aria-current] { background: var(--graphite); color: #fff; }

/* ---------- Buttons and links ---------- */
/* Buttons: softly rounded, with a small square marker; the primary keeps one cut corner.
   Hover sweeps daylight yellow in from the left. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px 0 22px;
  border: 1px solid var(--ink);
  border-radius: var(--r-s);
  background: linear-gradient(var(--sweep, var(--paper-3)), var(--sweep, var(--paper-3))) 0 0 / 0% 100% no-repeat;
  background-color: rgba(255, 255, 255, .8);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-size .5s var(--ease-out), color .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);
}
.btn::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1px; background: currentColor; transition: background-color .3s var(--ease), transform .5s var(--ease-out), border-radius .5s var(--ease-out); }
.btn:hover { background-size: 100% 100%; }
.btn:hover::before { transform: scale(1.15); border-radius: 50%; }
.btn:active { transform: translateY(1px); }
.btn-primary { --sweep: #43474e; background-color: var(--graphite); color: #fff; clip-path: var(--cut); padding-right: 30px; }
.btn-primary::before { background: var(--sun); }
.btn-quiet { border-color: var(--ink); }
.btn-sm { min-height: 44px; padding: 0 18px 0 16px; font-size: 1rem; }
.btn-sm.btn-primary { padding-right: 24px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.link {
  display: inline;
  justify-self: start;
  align-self: start;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--sun), var(--sun)) 0 88% / 0 42% no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  padding: 0 2px 3px;
  transition: background-size .45s var(--ease-out);
}
.link:hover { background-size: 100% 42%, 100% 1.5px; }
.ext-host { display: block; margin-top: 6px; font: 400 .9375rem var(--mono); color: var(--ink-3); }

/* ---------- Type ---------- */
/* Labels read like instrument tags: [ 01 ] SECTION NAME */
.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 .9375rem/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.label .num { color: var(--ink); white-space: nowrap; }
.label .num::before { content: "[ "; color: var(--ink-4); }
.label .num::after { content: " ]"; color: var(--ink-4); }
.label .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1.5px var(--ink); }
.display {
  font-size: clamp(2.6rem, 8.2vw, 9.5rem);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 600;
}
.h1 { font-size: clamp(2.5rem, 6.2vw, 6.75rem); line-height: .96; letter-spacing: -.048em; font-weight: 600; }
.h2 { font-size: clamp(2.25rem, 4.9vw, 5.25rem); line-height: 1; letter-spacing: -.045em; font-weight: 600; }
.h3 { font-size: clamp(1.5rem, 2.1vw, 2.125rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; }
.h4 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.012em; font-weight: 600; }
/* Highlighted words: a band of daylight yellow behind the lower half of the letters. */
.hl { background: linear-gradient(transparent 72%, var(--sun) 72%, var(--sun) 92%, transparent 92%); padding: 0 .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.muted { color: var(--ink-3); }
.lead { font-size: clamp(1.1875rem, 1.55vw, 1.5rem); line-height: 1.5; color: var(--ink-2); letter-spacing: -.008em; }
.body-l { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); }
.prose p + p { margin-top: 1em; }
.note { font-size: 1rem; color: var(--ink-3); line-height: 1.55; }
.ln { display: block; overflow: hidden; padding: 0 .12em .16em 0; margin-bottom: -.16em; }
.ln > span { display: block; }

/* ---------- Section heads ---------- */
.section-head {
  position: relative;
  margin-bottom: clamp(48px, 6vw, 104px);
  padding-top: 34px;
  border-top: 1px solid var(--rule-2);
  row-gap: 24px;
  /* A measuring ruler hangs from the top rule: fine ticks every 12px, long ticks every 96px. */
  background:
    repeating-linear-gradient(90deg, rgba(29, 31, 34, .55) 0 1px, transparent 1px 96px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(29, 31, 34, .28) 0 1px, transparent 1px 12px) 0 0 / 100% 6px no-repeat;
}
.section-head::before { content: ""; position: absolute; left: 0; top: -2px; width: 96px; height: 4px; background: var(--day); }
.section-head::after { content: ""; position: absolute; right: -6px; top: -6px; width: 11px; height: 11px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat; }
.section-head > .label { grid-column: 1 / span 3; align-self: start; }
.section-head > .head-body { grid-column: 4 / span 9; display: grid; gap: 28px; }
.section-head .lead { max-width: 46ch; }
.section-head.split > .head-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; column-gap: var(--gap); }
.section-head.split .lead { justify-self: end; }
.section-head.split .head-body > .h2:only-child { grid-column: 1 / -1; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; isolation: isolate; min-height: max(760px, 100svh); display: flex; flex-direction: column; padding-top: calc(var(--header-h) + clamp(40px, 8vh, 120px)); }
.hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%); mask-image: linear-gradient(180deg, #000 72%, transparent 98%); }
.hero-copy { position: relative; }
.hero-copy .label { margin-bottom: clamp(24px, 3vw, 40px); }
.hero-copy .display { max-width: 17ch; }
.hero-copy .lead { max-width: 40ch; margin-top: clamp(24px, 3vw, 36px); }
.hero-copy .actions { margin-top: clamp(28px, 3.4vw, 44px); }
/* Halftone field behind the sun: printed-dot texture that fades into the light. */
.hero::after { content: ""; position: absolute; z-index: -2; right: 0; top: calc(var(--header-h) + 10px); width: min(56vw, 900px); height: 62%; background: var(--halftone); -webkit-mask-image: radial-gradient(closest-side at 64% 56%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); mask-image: radial-gradient(closest-side at 64% 56%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%); opacity: .55; }
.hero-rail { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 36px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font: 600 .9375rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hero-rail .bars { display: flex; gap: 4px; }
.hero-rail .bars i { width: 22px; height: 6px; border-radius: 3px; background: rgb(var(--h-dawn)); }
.hero-rail .bars i:nth-child(2) { background: var(--sun); }
.hero-rail .bars i:nth-child(3) { background: rgb(var(--h-sky)); }
.hero-meta { margin-top: auto; padding-top: clamp(220px, 30vh, 380px); counter-reset: meta; }
.hero-meta .grid { padding-block: 0 34px; border-top: 1px solid var(--rule-2); }
.hero-meta .cell { grid-column: span 4; display: grid; gap: 6px; position: relative; padding-top: 22px; counter-increment: meta; }
.hero-meta .cell::before { content: "[ 0" counter(meta) " ]"; font: 600 .9375rem var(--mono); letter-spacing: .1em; color: var(--ink-3); margin-bottom: 4px; }
.hero-meta .cell::after { content: ""; position: absolute; left: 0; top: -2px; width: 48px; height: 3px; background: var(--graphite); }
.hero-meta .cell strong { font-weight: 600; font-size: 1.125rem; }
.hero-meta .cell span { color: var(--ink-2); }

/* ---------- Page hero (subpages) ---------- */
.page-hero { position: relative; isolation: isolate; padding-top: calc(var(--header-h) + clamp(48px, 9vh, 128px)); padding-bottom: clamp(64px, 8vw, 128px); overflow: hidden; }
.page-hero .grid { align-items: end; }
.page-hero .copy { grid-column: 1 / span 7; position: relative; z-index: 1; }
.page-hero .copy .label { margin-bottom: clamp(24px, 3vw, 36px); }
.page-hero .h1 { font-size: clamp(2.5rem, 5.5vw, 6rem); }
.page-hero .copy .lead { max-width: 38ch; margin-top: clamp(24px, 3vw, 36px); }
.page-hero .copy .actions { margin-top: 36px; }
.page-hero .visual { grid-column: 8 / span 5; position: relative; align-self: stretch; min-height: 420px; }
.page-hero .visual canvas { position: absolute; top: -12%; left: -18%; width: 148%; height: 120%; max-width: none; -webkit-mask-image: radial-gradient(closest-side at 50% 55%, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 55%, #000 62%, transparent 100%); }
/* Viewfinder frame around each page's figure: corner brackets and a crosshair. */
.page-hero .visual::before { content: ""; position: absolute; inset: 12% 2% 2% 6%; z-index: 1; pointer-events: none; background: var(--brackets); }
.page-hero::before { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: min(40vw, 620px); height: 70%; background: var(--halftone); -webkit-mask-image: radial-gradient(closest-side at 20% 80%, #000, transparent); mask-image: radial-gradient(closest-side at 20% 80%, #000, transparent); opacity: .35; }

/* ---------- Facts ---------- */
.facts { margin-top: clamp(72px, 9vw, 140px); border-top: 1px solid var(--rule-2); }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.mt-xl { margin-top: clamp(56px, 7vw, 112px); }
.fact { grid-column: span 3; padding-top: 28px; border-right: 1px solid var(--rule); padding-right: 24px; }
.fact:last-child { border-right: 0; }
/* Hatched outline numerals, drawn with live text so they stay sharp at any size. */
.outline-num, .fact b, .pstep .big { color: transparent; -webkit-text-stroke: 1.6px var(--ink); background: var(--hatch); -webkit-background-clip: text; background-clip: text; }
.fact b { display: block; font-size: clamp(4rem, 8vw, 8.5rem); line-height: .9; font-weight: 700; letter-spacing: -.04em; }
.fact span { display: block; margin-top: 14px; font-size: 1.0625rem; color: var(--ink-2); max-width: 22ch; }

/* ---------- Pillars ---------- */
.pillar { position: relative; grid-column: span 4; display: grid; align-content: start; gap: 18px; padding: 32px 0 0; border-top: 1px solid var(--rule-2); }
.pillar::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 3px; background: var(--graphite); }
.pillar .label { color: var(--ink); }
.pillar .label::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1.5px var(--ink); }
.pillar:nth-of-type(2) .label::before { background: rgb(var(--h-sea)); }
.pillar:nth-of-type(3) .label::before { background: rgb(var(--h-dusk)); }
.pillar p { color: var(--ink-2); max-width: 38ch; }

/* ---------- Tabs ---------- */
/* Tabs are a pill-shaped segmented control; the selected tab is a daylight pill that slides between options. */
.tablist { position: relative; display: inline-flex; gap: 4px; max-width: 100%; padding: 5px; border: 1px solid var(--ink); border-radius: var(--pill); background: rgba(255, 255, 255, .9); box-shadow: var(--soft); overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tab { position: relative; z-index: 1; flex: none; min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--pill); background: none; color: var(--ink-2); font-size: 1rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .35s var(--ease); }
.tab:hover { color: var(--ink); }
.tab { font-weight: 600; }
.tab[aria-selected="true"] { color: #fff; }
.tab-indicator { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); border-radius: var(--pill); background: var(--graphite); box-shadow: 0 4px 14px -6px rgba(29, 31, 34, .6); transform: translateX(var(--x, 0)); transition: transform .5s var(--ease-out), width .5s var(--ease-out); }
.tab-indicator.instant { transition: none; }
/* Every tab panel shares one grid cell, so the region is always as tall as its tallest panel and never jumps. */
.panels { display: grid; }
.panels > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease), transform .6s var(--ease-out), visibility 0s .45s; }
.panels > [role="tabpanel"].is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .06s, .06s, 0s; }
html:not(.js) .tablist { display: none; }
html:not(.js) .panels { gap: 48px; }
html:not(.js) .panels > [role="tabpanel"] { grid-area: auto; opacity: 1; visibility: visible; transform: none; }

/* ---------- Scenarios ---------- */
.scenarios .tablist { margin-bottom: 40px; }
.scene { grid-template-columns: repeat(12, minmax(0, 1fr)); display: grid; gap: var(--gap); align-items: stretch; }
.scene-copy { grid-column: 1 / span 5; display: grid; align-content: start; gap: 22px; padding-top: 8px; }
.scene-copy .h3 { font-size: clamp(1.75rem, 2.8vw, 2.75rem); }
.scene-copy p { color: var(--ink-2); }
.scene-copy h4 { font: 500 .9375rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--graphite); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: var(--pill); font-size: .9375rem; font-weight: 500; color: var(--ink-2); background: var(--surface); }
.scene-art { grid-column: 7 / span 6; position: relative; min-height: 460px; border-radius: var(--r-l); background: var(--brackets), linear-gradient(160deg, var(--surface), var(--paper-2)); border: 1px solid var(--rule-2); box-shadow: var(--soft-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.art-head, .art-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; font: 500 .9375rem var(--mono); color: var(--ink-3); }
.art-head { background: var(--graphite); color: #fff; letter-spacing: .06em; text-transform: uppercase; }
.art-foot { border-top: 1px solid var(--rule); }
.badge { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 14px 0 12px; border-radius: var(--pill); background: var(--paper-3); color: var(--ink); font: 600 .9375rem var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1.5px var(--ink); }
.flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: center; gap: 12px; padding: 28px 24px; background: radial-gradient(circle, rgba(20, 19, 17, .13) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.flow-col { display: grid; gap: 10px; align-content: center; }
.flow-tag { font: 500 .9375rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.doc { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--surface); font-size: 1rem; color: var(--ink-2); animation: docPulse 6s var(--ease) infinite; animation-delay: calc(var(--n, 0) * .35s); }
.doc i { flex: none; width: 16px; height: 20px; border: 1.5px solid var(--ink-3); border-radius: 3px; position: relative; }
.doc i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1.5px; background: var(--ink-3); box-shadow: 0 4px 0 var(--ink-3); }
.flow-mid { position: relative; height: 100%; display: grid; place-items: center; }
.flow-mid::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-4) 0 4px, transparent 4px 9px); }
.flow-core { position: relative; display: block; width: 72px; height: 72px; }
.flow-core canvas { position: absolute; left: -60%; top: -60%; width: 220%; height: 220%; max-width: none; }
.flow-spark { position: absolute; top: 50%; left: -8px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 12px 2px rgba(var(--sun-rgb), .6); animation: spark 3s linear infinite; }
.out { display: grid; gap: 10px; }
.out li { position: relative; min-height: 48px; display: flex; align-items: center; padding: 0 14px; border-radius: var(--r-s); background: var(--graphite); color: var(--paper); font-size: 1rem; clip-path: inset(0 100% 0 0); animation: typeIn 6s var(--ease-out) infinite; animation-delay: calc(var(--n, 0) * .45s + 1.1s); }
.out li.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule); }
.mono-out { font-family: var(--mono); font-size: .9375rem !important; }

/* ---------- Model index (home) ---------- */
.model-index { border-top: 1px solid var(--rule-2); }
.model-index .group-label { padding: 26px 0 10px; }
.model-row {
  --mx: 50%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: var(--gap);
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  isolation: isolate;
}
.model-row::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: linear-gradient(90deg, rgba(var(--hue-rgb), .5), rgba(var(--hue-rgb), .16) 55%, rgba(var(--hue-rgb), 0)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.model-row:hover::before, .model-row:focus-visible::before { transform: none; }
.model-row .name { display: flex; align-items: center; gap: .3em; font-size: clamp(2rem, 4.4vw, 4.25rem); line-height: 1; letter-spacing: -.045em; font-weight: 600; transition: transform .5s var(--ease-out); }
/* Each family's own colour, as a dot before its name. */
.model-row .name::before { content: ""; flex: none; width: .22em; height: .22em; border-radius: 50%; background: rgb(var(--hue-rgb)); box-shadow: 0 0 0 2px var(--ink); transform: scale(.7); transition: transform .5s var(--ease-out); }
.model-row:hover .name::before, .model-row:focus-visible .name::before { transform: none; }
.model-row .uses { color: var(--ink-2); font-size: 1.0625rem; }
.model-row .flag { justify-self: end; text-align: right; font: 600 1rem var(--mono); color: var(--ink); }
.model-row .flag small { display: block; font-size: .9375rem; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }

/* ---------- Compatibility (required section) ---------- */
.compat { position: relative; isolation: isolate; overflow: hidden; }
.compat-ascii { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(52% 56% at 94% 38%, #000 22%, transparent 78%); mask-image: radial-gradient(52% 56% at 94% 38%, #000 22%, transparent 78%); }
/* Tool console: orbital map (left), detail stage (right), roster of icon tiles (below). */
.console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "map stage" "roster roster"; gap: clamp(32px, 4vw, 64px) var(--gap); align-items: start; }
.orbit { grid-area: map; display: grid; gap: 20px; width: 100%; max-width: 640px; margin-inline: auto; }
.orbit-map { position: relative; width: 100%; aspect-ratio: 1; }
/* Ring letters sit where each ring crosses the left axis; the icons orbit over them. */
.orbit-mark { position: absolute; left: calc(50% - var(--d) * .5%); top: 50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--graphite); color: #fff; font: 700 .9375rem var(--mono); }
.orbit-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0; font: 600 .9375rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.orbit-key span { display: inline-flex; align-items: center; gap: 8px; }
.orbit-key b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--graphite); color: #fff; }
.orbit-axis { position: absolute; inset: 0; background: linear-gradient(var(--rule-2), var(--rule-2)) center / 1px 100% no-repeat, linear-gradient(var(--rule-2), var(--rule-2)) center / 100% 1px no-repeat, var(--brackets); }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; }
.orbit-core canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-core span { position: relative; margin-top: 64%; padding: 3px 12px; border-radius: var(--pill); background: var(--graphite); color: #fff; font: 600 .9375rem var(--mono); letter-spacing: .14em; }
/* The rings are told apart by line style, not colour: B dashed, A solid, C dotted. */
.orbit-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--d) * 1%); aspect-ratio: 1; border: 1px dashed rgba(29, 31, 34, .32); border-radius: 50%; transform: translate(-50%, -50%); container-type: inline-size; animation: orbitSpin var(--dur) linear infinite; }
.orbit-ring.rev { animation-direction: reverse; }
.orbit-ring.ring-a { border-style: solid; border-color: rgba(29, 31, 34, .22); }
.orbit-ring.ring-c { border: 2px dotted rgba(29, 31, 34, .3); }
/* Tools are round white avatars. The selected one turns daylight yellow, with a dotted halftone halo and a glow. */
.orbit-sat { --s: clamp(40px, 9cqi, 60px); position: absolute; left: calc(50% + 50% * cos(var(--a))); top: calc(50% + 50% * sin(var(--a))); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.orbit-sat::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, var(--ink) 1.1px, transparent 1.6px) 0 0 / 5px 5px; -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask-image: radial-gradient(closest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); opacity: 0; transform: scale(.8); transition: opacity .4s, transform .5s var(--ease-out); }
.orbit-sat.is-on::before { opacity: .75; transform: none; }
.orbit-sat > span { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 1px solid var(--ink); box-shadow: var(--soft); animation: orbitCounter var(--dur) linear infinite; transition: background-color .3s, box-shadow .3s, transform .3s; }
.orbit-ring.rev .orbit-sat > span { animation-direction: reverse; }
.orbit-sat img { width: 58%; height: 58%; object-fit: contain; }
.orbit-sat:hover > span { transform: scale(1.12); }
.orbit-sat.is-on > span { background: var(--sun); box-shadow: 0 0 0 3px var(--ink), 0 0 22px 4px rgba(var(--sun-rgb), .85); }
/* The data beam: a dashed line from the selected tool to the DAYWORLD core, rotating with its ring. */
.orbit-sat i { position: absolute; left: 50%; top: 50%; width: 50cqi; height: 2px; transform-origin: 0 50%; transform: rotate(calc(var(--a) + 180deg)); background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); opacity: 0; transition: opacity .4s; animation: beamFlow 1.2s linear infinite; }
.orbit-sat.is-on i { opacity: .8; }
.orbit-map:hover .orbit-ring, .orbit-map:hover .orbit-sat > span { animation-play-state: paused; }
/* Decorative rings and beams must not intercept shortcuts on inner rings. */
.orbit-ring, .orbit-axis, .orbit-mark, .orbit-core, .orbit-sat i, .orbit-sat::before { pointer-events: none; }
.orbit-sat { pointer-events: auto; }
.orbit-sat:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.orbit-map:focus-within .orbit-ring, .orbit-map:focus-within .orbit-sat > span { animation-play-state: paused; }
@keyframes orbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbitCounter { to { transform: rotate(-360deg); } }
@keyframes beamFlow { to { background-position: 12px 0; } }
/* The three groups share their heading row, so tiles line up even when a heading wraps. */
.roster { grid-area: roster; display: grid; grid-template-columns: 6fr 2fr 3fr; grid-template-rows: auto auto; gap: 0 var(--gap); }
.roster-group { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
.roster-group .roster-label { align-self: end; }
/* Group headings: letter, name, and an ink count pill. */
.roster-label, .install-group { display: flex; align-items: center; gap: 10px; font: 600 .9375rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.roster-label { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.roster-label span, .install-group span { flex: none; white-space: nowrap; }
.roster-label b, .install-group b { margin-left: auto; min-width: 30px; padding: 1px 10px; border-radius: var(--pill); background: var(--graphite); color: #fff; text-align: center; }
.roster-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.tool-tile { position: relative; display: grid; justify-items: center; gap: 10px; padding: 24px 8px 14px; border: 1px solid var(--rule-2); border-radius: var(--r-m); background: rgba(255, 255, 255, .92); font-weight: 600; font-size: .9375rem; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease-out); }
.tool-tile:hover { border-color: var(--ink); box-shadow: var(--soft); transform: translateY(-2px); }
.tool-tile[aria-selected="true"] { background: var(--graphite); border-color: var(--graphite); color: #fff; box-shadow: var(--soft-lg); }
.tool-tile[aria-selected="true"] .tt-num { color: rgba(255, 255, 255, .72); }
.tt-icon, .tp-icon, .tool-glyph { position: relative; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--ink); box-shadow: 0 0 0 4px rgba(29, 31, 34, .06); }
.tt-icon { width: 54px; height: 54px; }
.tt-icon img { width: 32px; height: 32px; object-fit: contain; }
.tt-num { position: absolute; top: 4px; left: 6px; font: 600 .9375rem var(--mono); color: var(--ink-3); }
.pixel img { image-rendering: pixelated; }
.stage { grid-area: stage; position: relative; display: grid; gap: 16px; }
.stage-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.stage-count { margin-right: auto; font: 600 .9375rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tool-panel { position: relative; isolation: isolate; display: grid; gap: 28px; align-content: start; }
.tp-ghost { position: absolute; right: 0; top: -12px; z-index: -1; font-size: clamp(3rem, 6vw, 6rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px rgba(29, 31, 34, .4); background: var(--hatch); -webkit-background-clip: text; background-clip: text; opacity: .35; pointer-events: none; max-width: 100%; overflow: hidden; }
.tp-head { display: flex; align-items: center; gap: 20px; }
/* The selected tool's avatar: a large circle with a daylight ring, inside a dotted halftone halo. */
.tp-icon { flex: none; width: 112px; height: 112px; margin: 14px; box-shadow: 0 0 0 5px var(--sun), 0 0 0 6.5px var(--ink), var(--soft-lg); }
.tp-icon::before { content: ""; position: absolute; inset: -17px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--ink) 1.1px, transparent 1.6px) 0 0 / 5px 5px; -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask-image: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); opacity: .55; }
.tp-icon img { width: 64px; height: 64px; object-fit: contain; }
.tp-icon.pixel img { width: 80px; height: 80px; }
.tp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 .9375rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tp-meta span:first-child { padding: 1px 10px; border-radius: var(--pill); background: var(--graphite); color: #fff; }
.tp-name { margin-top: 6px; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1; letter-spacing: -.045em; font-weight: 700; }
.tp-maker { color: var(--ink-3); font-weight: 600; }
.tp-desc { color: var(--ink-2); }
.tp-note { color: var(--ink-3); font-size: 1rem; }
.tp-spec { display: grid; border-top: 1px solid var(--rule); }
.tp-spec > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.tp-spec dt { color: var(--ink-3); }
.tp-window .window-body { height: 190px; }
/* The compatibility section stays quiet: a plain ink heading bar and neutral window lights. */
.compat .section-head::before { background: var(--graphite); }
.compat .window-bar::before { box-shadow: 16px 0 0 rgba(255, 255, 255, .35), 32px 0 0 rgba(255, 255, 255, .35); }
.tool-glyph { width: 54px; height: 54px; }
.tool-glyph img { width: 32px; height: 32px; object-fit: contain; }
.install-group { padding: 28px 0 10px; border-bottom: 1px solid var(--ink); }
@media (max-width: 1040px) {
  .console { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "roster" "stage"; }
  .orbit { max-width: 520px; }
  .roster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 24px; }
  .roster-group { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 760px) {
  .tp-head { align-items: flex-start; }
  .tp-icon { width: 84px; height: 84px; margin: 12px; }
  .tp-icon img { width: 48px; height: 48px; }
  .tp-icon.pixel img { width: 60px; height: 60px; }
  .tp-spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .roster-tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}
.rail-note { padding-top: 24px; color: var(--ink-3); font-size: 1rem; }
/* Code windows: a softly rounded sheet with a black title bar, lifted on a daylight glow. */
.window { position: relative; border-radius: var(--r-m); background: var(--brackets), rgba(255, 255, 255, .97); border: 1px solid var(--ink); box-shadow: var(--soft-lg); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 10px 0 18px; background: var(--graphite); color: #fff; }
.window-bar::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 16px 0 0 rgb(var(--h-sky)), 32px 0 0 rgb(var(--h-dawn)); margin-right: 32px; }
.window-file { font: 600 .9375rem var(--mono); color: #fff; letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-bar .badge { margin-left: auto; }
.copy-btn { flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--pill); background: var(--surface); font-size: .9375rem; font-weight: 600; cursor: pointer; transition: border-color .25s, background-color .25s, color .25s; }
.copy-btn:hover { background: var(--paper-3); }
.copy-btn.is-done { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.window-bar .copy-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.window-bar .copy-btn:hover { background: rgba(255, 255, 255, .14); }
.window-bar .copy-btn.is-done { background: #fff; color: var(--ink); border-color: #fff; }
.window-body { height: 500px; overflow: auto; overscroll-behavior: contain; }
.window-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--rule); font: 400 .9375rem var(--mono); color: var(--ink-3); }

/* Code */
.code { margin: 0; padding: 22px 0; font: 400 .9375rem/1.75 var(--mono); color: var(--ink); white-space: normal; counter-reset: line; tab-size: 2; }
.code code { display: block; min-width: max-content; font: inherit; }
.l { display: block; white-space: pre; padding: 0 24px 0 0; }
.l::before { counter-increment: line; content: counter(line); display: inline-block; width: 3.4em; padding-right: 1.4em; text-align: right; color: var(--ink-4); user-select: none; -webkit-user-select: none; }
.k { color: #6a3f9c; }
.s { color: #9a4a00; }
.c { color: var(--ink-3); font-style: italic; }
.p { color: var(--ink-3); }
.v { color: #2c5a74; }
.js .is-active .l { animation: lineIn .55s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 32ms + 80ms); }
.caret { display: inline-block; width: .6em; height: 1.15em; margin-left: 2px; vertical-align: -.2em; background: var(--sun); animation: blink 1.1s steps(1) infinite; }

.tool-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Steps (home) ---------- */
.steps-line { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); display: grid; gap: var(--gap); padding-top: 52px; }
.steps-line.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps-line::before, .steps-line::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: var(--rule-2); }
.steps-line::after { height: 3px; top: 12px; border-radius: 3px; background: var(--graphite); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.2s var(--ease-out) .2s; }
.steps-line.is-in::after { transform: scaleX(1); }
html:not(.js) .steps-line::after { transform: scaleX(1); }
.step { position: relative; display: grid; gap: 14px; align-content: start; }
/* Step stations are circles that light up in turn as the line fills. */
.step::before { content: ""; position: absolute; top: -48px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); transition: background-color .5s, box-shadow .5s; transition-delay: calc(var(--n, 0) * .4s + .3s); }
.steps-line.is-in .step::before { background: var(--graphite); border-color: var(--graphite); box-shadow: inset 0 0 0 5px var(--graphite), inset 0 0 0 10px var(--sun); }
.steps-line.is-in .step:last-child::before { box-shadow: inset 0 0 0 4px var(--graphite), inset 0 0 0 10px var(--sun), 0 0 0 5px rgba(var(--sun-rgb), .35); }
html:not(.js) .step::before { background: var(--graphite); }
.step .num { font: 600 .9375rem var(--mono); color: var(--ink); letter-spacing: .08em; }
.step .num::before { content: "[ "; color: var(--ink-4); }
.step .num::after { content: " ]"; color: var(--ink-4); }
.step p { color: var(--ink-2); }

/* ---------- Closing call to action ---------- */
/* The closing band is calm grey, edged with graphite hatching and a halftone field. */
.closing { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(96px, 12vw, 180px); text-align: center; background: var(--paper-2); border-block: 1px solid var(--rule-2); --sweep: #fff; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgba(29, 31, 34, .22) 1.2px, transparent 1.8px) 0 0 / 10px 10px; -webkit-mask-image: radial-gradient(60% 90% at 100% 100%, #000, transparent 70%), radial-gradient(50% 80% at 0 0, #000, transparent 70%); mask-image: radial-gradient(60% 90% at 100% 100%, #000, transparent 70%), radial-gradient(50% 80% at 0 0, #000, transparent 70%); }
.closing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: -1; background: repeating-linear-gradient(-45deg, var(--graphite) 0 8px, transparent 8px 18px); }
.closing .label { justify-content: center; color: var(--ink); }
.closing .lead { color: var(--ink-2); }
.closing .btn-quiet { background-color: transparent; }
.closing .h1 { margin: 28px auto 0; max-width: 14ch; }
.closing .lead { margin: 28px auto 0; max-width: 40ch; }
.closing .actions { justify-content: center; margin-top: 40px; }

/* ---------- How it works ---------- */
.process { align-items: start; }
.process-index { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 4px; }
.process-index a { display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: baseline; padding: 10px 0; color: var(--ink-3); text-decoration: none; font-weight: 500; transition: color .3s; border-radius: 2px; }
.process-index a span { font: 500 .9375rem var(--mono); }
.process-index a:hover, .process-index a.is-current { color: var(--ink); }
.process-index a span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule-2); font-size: .9375rem; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.process-index a { align-items: center; }
.process-index a.is-current span { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.process-steps { grid-column: 4 / span 9; display: grid; }
.pstep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 48px 0 56px; border-top: 1px solid var(--rule-2); }
.pstep:first-child { padding-top: 0; border-top: 0; }
.pstep header { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; align-items: baseline; }
.pstep .big { font-size: clamp(3.5rem, 6vw, 6rem); line-height: .9; letter-spacing: -.04em; font-weight: 700; }
.pstep header p { grid-column: 2; color: var(--ink-2); font-size: 1.1875rem; max-width: 52ch; }
.pstep .box { padding: 24px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--rule-2); display: grid; gap: 12px; align-content: start; }
.pstep .box.receive { background: var(--brackets), var(--surface); border-color: var(--ink); box-shadow: inset 0 4px 0 var(--graphite), var(--soft); }
.pstep .box h4 { font: 600 .9375rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pstep .box.receive h4 { color: var(--ink); }
.deliverables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-2); border-left: 1px solid var(--rule); }
.deliverable { --mx: 50%; --my: 50%; position: relative; isolation: isolate; display: grid; gap: 14px; align-content: start; min-height: 280px; padding: 32px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* The six deliverables cycle through the accent hues: one colour per kind of document. */
.deliverable:nth-child(6n + 2) { --hue-rgb: var(--h-sea); }
.deliverable:nth-child(6n + 3) { --hue-rgb: var(--h-sky); }
.deliverable:nth-child(6n + 4) { --hue-rgb: var(--h-rose); }
.deliverable:nth-child(6n + 5) { --hue-rgb: var(--h-dusk); }
.deliverable:nth-child(6n) { --hue-rgb: var(--h-dawn); }
.deliverable::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: -1; background: rgb(var(--hue-rgb)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.deliverable:hover::before { transform: none; }
.deliverable .label { color: var(--ink); }
.deliverable .label::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--hue-rgb)); box-shadow: 0 0 0 1.5px var(--ink); }
.deliverable p { color: var(--ink-2); }
.bounds { grid-column: span 6; padding: 32px; border-radius: var(--r-l); border: 1px solid var(--rule-2); display: grid; gap: 18px; align-content: start; background: var(--surface); }
.bounds.does { background: var(--brackets), var(--surface); border-color: var(--ink); box-shadow: inset 0 4px 0 var(--graphite), var(--soft); }
.bounds ul { display: grid; gap: 12px; }
.bounds li { position: relative; padding-left: 28px; color: var(--ink-2); }
.bounds.does li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 12px; height: 7px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.bounds.not li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 12px; height: 1.8px; background: var(--ink-3); }

/* Integration example */
.integration { align-items: start; }
.integration .copy { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; }
.integration .code-tabs { grid-column: 6 / span 7; display: grid; gap: 20px; }
.integration .window-body { height: 470px; }

/* FAQ */
.faq-head { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.faq { grid-column: 4 / span 9; border-top: 1px solid var(--rule-2); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 84px; padding: 20px 0; font-size: clamp(1.1875rem, 1.6vw, 1.5rem); font-weight: 500; letter-spacing: -.015em; cursor: pointer; list-style: none; border-radius: 2px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; background: var(--graphite); transition: transform .4s var(--ease-out); }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm { background: var(--graphite); border-color: var(--graphite); }
.faq details[open] summary .pm::before, .faq details[open] summary .pm::after { background: #fff; }
.faq summary:hover .pm { background: var(--paper-3); }
.faq details[open] summary .pm::after { transform: rotate(0deg); }
.faq .answer { padding: 0 64px 32px 0; color: var(--ink-2); max-width: 68ch; font-size: 1.0625rem; }

/* ---------- Models ---------- */
.status { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 28px; align-items: center; padding: 22px 28px; border-radius: var(--r-l); border: 1px solid var(--ink); background: var(--surface); box-shadow: var(--soft); }
.status .pulse { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1.5px var(--ink); }
.status .pulse::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(var(--sun-rgb), .8); animation: ping 2.6s var(--ease-out) infinite; }
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 12px rgba(var(--sun-rgb), 0); } }
.status p { color: var(--ink-2); }
.status p strong { color: var(--ink); font-weight: 600; }
.status .date { font: 500 1rem var(--mono); color: var(--ink); white-space: nowrap; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 36px; }
.filter-bar .label { margin-right: 10px; }
.filter { min-height: 44px; padding: 0 20px; border: 1px solid var(--rule-2); border-radius: var(--pill); background: var(--surface); color: var(--ink-2); font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter { font-weight: 600; }
.filter[aria-pressed="true"] { background: var(--graphite); border-color: var(--graphite); color: #fff; box-shadow: var(--soft); }
.filter-status { min-height: 1.6em; margin: -20px 0 28px; color: var(--ink-3); font-size: 1rem; }
.families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
/* Family cards: soft sheets, each with its family colour as a top band and a soft wash in the corner. */
.family { --mx: 50%; --my: 50%; position: relative; isolation: isolate; display: grid; gap: 22px; align-content: start; padding: clamp(28px, 3vw, 44px); border-radius: var(--r-l); border: 1px solid var(--rule-2); background: radial-gradient(420px 260px at 100% 0, rgba(var(--hue-rgb), .2), transparent 70%), var(--surface); box-shadow: var(--soft); overflow: hidden; transition: opacity .5s var(--ease), filter .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.family::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: -1; background: rgb(var(--hue-rgb)); }
.family:hover { border-color: var(--ink); }
.family.is-dim { opacity: .38; filter: grayscale(1); }
.family.is-match { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(var(--hue-rgb), .45), 0 24px 48px -24px rgba(var(--hue-rgb), 1); }
.family-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.family-top .label { color: var(--ink-2); }
.family-top .label::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--hue-rgb)); box-shadow: 0 0 0 1.5px var(--ink); }
.family h3 { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.05em; font-weight: 600; }
.family .tagline-s { font-size: 1.1875rem; color: var(--ink-2); max-width: 36ch; }
.spec { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.spec > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.spec dt { color: var(--ink-3); font-size: 1rem; }
.spec dd { font-size: 1rem; color: var(--ink); }
.spec dd code { font: 500 .9375rem var(--mono); background: var(--paper-2); padding: 2px 10px; border-radius: var(--pill); white-space: nowrap; }
.family .fits { display: flex; flex-wrap: wrap; gap: 8px; }
.family .fits .chip.on { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.matrix-wrap { overflow-x: auto; border-radius: var(--r-m); border: 1px solid var(--ink); background: var(--surface); box-shadow: var(--soft); }
/* Matrix columns follow the family colours: DeepSeek, GLM, Qwen, Kimi. */
.matrix tr > :nth-child(2) { --hue-rgb: var(--h-sky); }
.matrix tr > :nth-child(3) { --hue-rgb: var(--h-dusk); }
.matrix tr > :nth-child(4) { --hue-rgb: var(--h-sea); }
.matrix tr > :nth-child(5) { --hue-rgb: var(--h-dawn); }
.matrix thead th:not(:first-child)::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: rgb(var(--hue-rgb)); vertical-align: 1px; }
.matrix thead th { background: var(--graphite); color: #fff !important; }
.matrix { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 1.0625rem; }
.matrix th, .matrix td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--rule); }
.matrix thead th { font: 500 .9375rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.matrix tbody th { font-weight: 500; }
.matrix td { text-align: center; }
.matrix thead th:not(:first-child) { text-align: center; }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }
.mdot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--hue-rgb)); box-shadow: 0 0 0 1.5px var(--ink), 0 4px 10px -2px rgba(var(--hue-rgb), .9); vertical-align: middle; }
.mnone { display: inline-block; width: 14px; height: 1.6px; background: var(--ink-4); vertical-align: middle; }
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.video { display: grid; gap: 20px; align-content: start; }
.reel { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--ink); background: radial-gradient(70% 60% at 85% 10%, rgba(var(--hue-rgb), .28), transparent 70%), linear-gradient(180deg, #ffffff, #f4f3ee); box-shadow: inset 0 5px 0 rgb(var(--hue-rgb)), var(--soft); }
.reel::after { content: ""; position: absolute; inset: 0; background: var(--brackets), repeating-linear-gradient(90deg, transparent 0 19.6%, rgba(29, 31, 34, .1) 19.6% 20%); pointer-events: none; }
.reel i, .reel b { position: absolute; display: block; }
.reel .reel-sun { position: absolute; display: block; max-width: none; height: auto; aspect-ratio: 1 / 1; }
.reel.wave .reel-sun { left: 22%; top: 0; width: 56%; animation: rise 9s var(--ease) infinite alternate; }
.reel.sphere .reel-sun { left: 50%; top: 50%; width: 60%; margin: -30% 0 0 -30%; animation: orbit 9s var(--ease) infinite; }
.reel.ribbon i { inset: 30% -20% 30% -20%; border-radius: 50%; border: 1.5px solid rgba(20, 19, 17, .35); border-left-color: transparent; border-right-color: transparent; animation: ribbon 9s var(--ease) infinite alternate; }
.reel.ribbon b { inset: 36% -10% 36% -10%; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(var(--sun-rgb), .55), rgba(255, 226, 170, .9), rgba(255, 250, 238, .95), transparent); filter: blur(10px); animation: ribbon 9s var(--ease) infinite alternate-reverse; }
.reel.wave i { left: -10%; right: -10%; top: 48%; height: 40%; background: repeating-linear-gradient(0deg, rgba(20, 19, 17, .28) 0 1px, transparent 1px 9px); -webkit-mask-image: radial-gradient(60% 100% at 50% 0, #000, transparent); mask-image: radial-gradient(60% 100% at 50% 0, #000, transparent); animation: drift 12s linear infinite; }
.reel.wave b { left: 32%; top: 22%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--sun-gradient); box-shadow: 0 0 0 1px rgba(255, 250, 238, .9) inset, 0 0 60px 12px rgba(var(--glow-rgb), .5); animation: rise 9s var(--ease) infinite alternate; }
.reel.sphere i { left: 50%; top: 50%; width: 58%; aspect-ratio: 1; margin: -29% 0 0 -29%; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(20, 19, 17, .2) 9px 10px); animation: spin 26s linear infinite; }
.reel.sphere b { left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%; background: var(--sun-gradient); box-shadow: 0 0 0 1px rgba(255, 250, 238, .9) inset, 0 0 50px 14px rgba(var(--glow-rgb), .5); animation: orbit 9s var(--ease) infinite; }
.reel .reel-label { position: absolute; left: 16px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font: 600 .9375rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--graphite); padding: 4px 14px 4px 10px; border-radius: var(--pill); }
.reel .reel-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--hue-rgb)); }
.video h3 { font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -.04em; line-height: 1; }
.video .spec > div { grid-template-columns: 8.5rem minmax(0, 1fr); }
.usecases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.usecase { padding: 28px 28px 32px 0; display: grid; gap: 14px; align-content: start; border-right: 1px solid var(--rule); }
.usecase + .usecase { padding-left: 28px; }
.usecase:last-child { border-right: 0; }
.usecase p { color: var(--ink-2); }
.usecase .consider { font-size: 1rem; color: var(--ink-3); }
.usecase .consider b { color: var(--ink); font-weight: 500; }
.sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); border-top: 1px solid var(--rule-2); }
.sources li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.sources li span { color: var(--ink-3); font-size: 1rem; }
.sources a { word-break: break-word; }

/* ---------- Downloads ---------- */
.installs { border-top: 1px solid var(--rule-2); }
.install { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: 28px var(--gap); padding: 44px 0; border-bottom: 1px solid var(--rule); }
.install .who { display: grid; gap: 10px; align-content: start; }
.install .who .tool-glyph { margin-bottom: 8px; }
.install .who h3 { font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -.04em; line-height: 1; }
.install .who .muted { font-size: 1rem; }
.install .how { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.install .how > * { min-width: 0; }
.install .who, .install .go { min-width: 0; }
.install .how p { color: var(--ink-2); }
.cmd { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: var(--r-m); border: 1px solid var(--ink); background: var(--surface); box-shadow: inset 4px 0 0 var(--graphite), var(--soft); }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 400 .9375rem/1.6 var(--mono); }
.cmd-label { font-size: .9375rem; font-weight: 500; color: var(--ink-3); margin-bottom: -8px; }
.install .go { display: grid; gap: 14px; align-content: start; justify-items: start; }
.install .go .btn { width: 100%; }
.fits-in { align-items: stretch; }
.slot-diagram { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; align-items: stretch; border-radius: var(--r-l); border: 1px solid var(--ink); background: var(--brackets), var(--surface); box-shadow: var(--soft-lg); overflow: hidden; }
.slot-end { padding: 36px; display: grid; gap: 14px; align-content: center; }
.slot-end .h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.slot-end p { color: var(--ink-2); }
.slots { position: relative; display: grid; gap: 14px; padding: 36px; border-inline: 1px solid var(--ink); background: var(--paper-2); }
.slot { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; padding: 16px 18px; border-radius: var(--r-m); border: 1px solid var(--ink); background: var(--surface); box-shadow: var(--soft); }
.slot b { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--graphite); color: var(--sun); font: 700 .9375rem var(--mono); }
.slot strong { font-weight: 600; }
.slot span { color: var(--ink-3); font-size: 1rem; }
.safety { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.safety li { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 24px; border-top: 1px solid var(--rule-2); }
.safety li::before { content: ""; position: absolute; left: 0; top: -2px; width: 48px; height: 3px; background: var(--graphite); }
.safety li p { color: var(--ink-2); }

/* ---------- Contact ---------- */
.channels { display: grid; gap: 18px; padding: 32px; border-radius: var(--r-l); border: 1px solid var(--rule-2); background: var(--surface); }
.channels [data-contact-list] { display: flex; flex-wrap: wrap; gap: 12px; }
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.topic { position: relative; display: grid; gap: 14px; align-content: start; padding-top: 26px; border-top: 1px solid var(--ink); }
.topic::before { content: ""; position: absolute; left: 0; top: -3px; width: 64px; height: 5px; border-radius: 3px; background: rgb(var(--hue-rgb)); }
.topic:nth-child(2) { --hue-rgb: var(--h-sea); }
.topic:nth-child(3) { --hue-rgb: var(--h-dusk); }
.topic p { color: var(--ink-2); }
.topic .link { justify-self: start; }
.brief { align-items: start; }
.brief-form { grid-column: 1 / span 7; display: grid; gap: 40px; }
.brief-side { grid-column: 8 / span 5; position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 16px; }
legend, .field-label { padding: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; }
.field-hint { margin-top: -8px; color: var(--ink-3); font-size: 1rem; }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option span { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border: 1px solid var(--rule-2); border-radius: var(--pill); background: var(--surface); font-size: 1rem; font-weight: 500; color: var(--ink-2); transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
.option span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-4); transition: background-color .25s, border-color .25s, box-shadow .25s; }
.option input:hover + span { border-color: var(--ink); }
.option span { font-weight: 600; }
.option input:checked + span { background: var(--graphite); color: #fff; border-color: var(--ink); box-shadow: 0 8px 20px -10px rgba(29, 31, 34, .6); }
.option input:checked + span::before { background: var(--sun); border-color: var(--sun); }
.option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--sun); }
.field { display: grid; gap: 10px; }
/* "Another tool" opens a text box under the tool options for the tool's name. Without scripts it is always shown. */
.other-field { display: grid; gap: 8px; max-width: 560px; animation: lineIn .4s var(--ease-out); }
.other-field label { font-size: 1rem; font-weight: 600; color: var(--ink-2); }
html:not(.js) .other-field[hidden] { display: grid !important; }
.input, .select, .textarea { width: 100%; min-height: 56px; padding: 14px 18px; border: 1px solid var(--rule-2); border-radius: var(--r-m); background: var(--surface); font-size: 1.0625rem; transition: border-color .25s, box-shadow .25s; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--sun); }
.select { appearance: none; -webkit-appearance: none; background-image: none; }
.textarea { min-height: 168px; resize: vertical; line-height: 1.55; }
.textarea[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 4px rgba(179, 38, 30, .12); }
.field-foot { display: flex; justify-content: space-between; gap: 16px; font-size: 1rem; color: var(--ink-3); }
.field-error { color: #b3261e; font-weight: 500; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.paper { position: relative; border-radius: var(--r-l); background: var(--brackets), #ffffff; border: 1px solid var(--ink); box-shadow: var(--soft-lg); overflow: hidden; }
.paper-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--graphite); font: 600 .9375rem var(--mono); color: #fff; letter-spacing: .04em; }
.paper pre { margin: 0; height: min(548px, calc(100svh - 360px)); min-height: 320px; overflow: auto; padding: 22px 24px; font: 400 .9375rem/1.7 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.paper pre .ph { color: var(--ink-4); }
.brief-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.brief-actions .btn { width: 100%; padding-inline: 16px; }
.brief-status { min-height: 1.6em; font-size: 1rem; color: var(--ink-2); }
.local-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-m); background: var(--sky); color: var(--sky-ink); font-size: 1rem; }
.local-note::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .45em; border-radius: 50%; background: var(--sky-ink); }

/* ---------- Privacy ---------- */
.legal { align-items: start; }
.legal-index { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 2px; }
.legal-index a { padding: 8px 0; color: var(--ink-3); text-decoration: none; font-weight: 500; }
.legal-index a:hover { color: var(--ink); }
.legal-body { grid-column: 5 / span 7; display: grid; gap: 0; }
.legal-body section { padding: 36px 0 40px; border-top: 1px solid var(--rule-2); display: grid; gap: 16px; }
.legal-body section:first-child { border-top: 0; padding-top: 0; }
.legal-body h2 { font-size: clamp(1.625rem, 2.4vw, 2.25rem); letter-spacing: -.03em; line-height: 1.1; }
.legal-body p { color: var(--ink-2); font-size: 1.125rem; max-width: 64ch; }
.legal-body h3 { font-size: 1.25rem; margin-top: 8px; }
.legal-body ul, .legal-body ol { display: grid; gap: 8px; max-width: 64ch; padding-left: 1.3em; color: var(--ink-2); font-size: 1.125rem; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body a:not(.btn) { color: var(--ink); text-underline-offset: 3px; }
/* Values still to be filled in, such as [Effective date], are marked so they cannot be mistaken for final text. */
.ph { padding: 0 6px; border-radius: 4px; background: var(--paper-3); color: var(--ink); font-family: var(--mono); font-size: .9375em; -webkit-box-decoration-break: clone; box-decoration-break: clone; overflow-wrap: anywhere; }
.doc-table { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 1rem; }
.doc-table th, .doc-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule-2); text-align: left; vertical-align: top; }
.doc-table th { font: 600 .9375rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.doc-table code { font: 500 .9375rem var(--mono); }
.table-wrap { overflow-x: auto; max-width: 100%; }
/* Every draft page opens with this notice. */
.draft-banner { display: flex; align-items: flex-start; gap: 12px; max-width: 760px; margin-bottom: 28px; padding: 14px 18px; border: 1px solid var(--ink); border-radius: var(--r-m); background: var(--sun-3); color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.5; box-shadow: var(--soft); }
.draft-banner::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: .4em; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 1.5px var(--ink); }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; padding-top: clamp(72px, 8vw, 120px); border-top: 1px solid var(--rule); background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.footer-top { row-gap: 48px; }
.footer-lead { grid-column: 1 / span 5; display: grid; gap: 28px; align-content: start; justify-items: start; }
.footer-statement { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 500; }
.footer-col { grid-column: span 2; display: grid; gap: 4px; align-content: start; }
.footer-col:first-of-type { grid-column: 7 / span 2; }
.footer-col h2 { margin-bottom: 12px; }
.footer-col a { justify-self: start; padding: 6px 0; color: var(--ink-2); text-decoration: none; font-size: 1.0625rem; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-col p { color: var(--ink-2); }
.footer-word { position: relative; margin-top: clamp(56px, 7vw, 112px); padding-inline: var(--gutter); max-width: calc(var(--wrap) + 0px); margin-inline: auto; }
.footer-word span {
  display: block;
  font-size: clamp(4rem, 17vw, 16.5rem);
  line-height: .78;
  font-weight: 800;
  letter-spacing: -.055em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  background: var(--hatch);
  background-size: 100px 100px;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hatchDrift 18s linear infinite;
  transform: translateY(8%);
  white-space: nowrap;
}
/* The footer closes on a black instrument bar. */
.footer-bottom-bar { background: var(--graphite); color: rgba(255, 255, 255, .78); position: relative; }
.footer-bottom-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--day); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; padding-block: 30px 34px; font: 500 .9375rem var(--mono); letter-spacing: .08em; text-transform: uppercase; position: relative; }
.copyright { margin: 0; font: inherit; text-transform: none; letter-spacing: .02em; }
.footer-lang { display: flex; align-items: center; gap: 12px; }
.filing { display: flex; flex-wrap: wrap; gap: 8px 20px; text-transform: none; letter-spacing: 0; }
.filing a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.filing a:hover { text-decoration: underline; }
.filing img { width: 18px; height: 18px; }

/* ---------- Section band and marquee ----------
   The band is a full-width strip of daylight yellow that announces a key section.
   The marquee is a slow ribbon of oversized type; both are decorative and hidden from screen readers. */
.band { position: relative; overflow: hidden; background: var(--sun); border-block: 1px solid var(--ink); }
.band::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: max(28px, 4%); background: repeating-linear-gradient(-45deg, rgba(29, 31, 34, .9) 0 2px, transparent 2px 12px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.band .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: clamp(132px, 15vw, 196px); }
.band-text { display: grid; gap: 8px; }
.band-kicker { display: flex; align-items: center; gap: 10px; font: 600 .9375rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.band-kicker::before { content: ""; width: 10px; height: 10px; background: var(--graphite); }
.band-title { font-size: clamp(2.5rem, 6vw, 5.75rem); font-weight: 800; letter-spacing: -.05em; line-height: .88; text-transform: uppercase; }
.band-art { width: clamp(150px, 19vw, 270px); height: auto; margin-block: 4px; margin-right: clamp(8px, 3vw, 48px); }
/* Small isometric line drawings, in the same style as the band art, that open the pillars and contact topics. */
.mini-art { width: 132px; height: auto; margin: -10px 0 -4px -14px; }
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--ink); background: var(--surface); padding-block: clamp(14px, 2vw, 26px); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 56s linear infinite; }
.marquee-track span { flex: none; padding-right: .45em; font-size: clamp(3.5rem, 9vw, 9rem); font-weight: 800; line-height: .95; letter-spacing: -.05em; white-space: nowrap; }
.marquee-track .ghost { color: transparent; -webkit-text-stroke: 1.6px var(--ink); background: var(--hatch); -webkit-background-clip: text; background-clip: text; }
.marquee-track .tick { width: .42em; height: .42em; padding: 0; margin-right: .45em; border-radius: 50%; background: rgb(var(--h-dawn)); box-shadow: 0 0 0 2px var(--ink); }
.marquee-track .tick:nth-of-type(3n + 2) { background: var(--sun); }
.marquee-track .tick:nth-of-type(3n) { background: rgb(var(--h-sky)); }

/* ---------- Instrument decoration ----------
   Section numbers, tags, barcodes, rulers, crosshairs, and the section rail.
   All of it is decorative except the rail, which is real navigation. */
.barcode {
  display: inline-block;
  flex: none;
  width: 72px;
  height: 16px;
  vertical-align: middle;
  background: linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 7px, var(--ink) 7px 10px, transparent 10px 11px,
    var(--ink) 11px 12px, transparent 12px 15px, var(--ink) 15px 17px, transparent 17px 18px, var(--ink) 18px 19px, transparent 19px 22px,
    var(--ink) 22px 25px, transparent 25px 27px, var(--ink) 27px 28px, transparent 28px 29px, var(--ink) 29px 31px, transparent 31px 34px,
    var(--ink) 34px 35px, transparent 35px 37px, var(--ink) 37px 40px, transparent 40px 41px, var(--ink) 41px 42px, transparent 42px 45px,
    var(--ink) 45px 47px, transparent 47px 48px, var(--ink) 48px 51px, transparent 51px 53px, var(--ink) 53px 54px, transparent 54px 56px,
    var(--ink) 56px 57px, transparent 57px 60px, var(--ink) 60px 63px, transparent 63px 64px, var(--ink) 64px 65px, transparent 65px 68px,
    var(--ink) 68px 70px, transparent 70px 72px);
}
.sec-num { position: absolute; right: 0; bottom: calc(100% - 2px); font-size: clamp(5rem, 11vw, 11rem); font-weight: 800; line-height: .78; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.4px rgba(29, 31, 34, .55); background: var(--hatch); -webkit-background-clip: text; background-clip: text; opacity: .45; pointer-events: none; user-select: none; }
.sec-tag { position: absolute; left: 0; bottom: calc(100% + 16px); display: inline-flex; align-items: center; gap: 12px; font: 600 .9375rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); pointer-events: none; }
.flush-top .sec-num, .flush-top .sec-tag { display: none; }
.hero-rail .rail-page { padding: 4px 10px; border-radius: 4px; background: var(--paper-3); color: var(--ink); }
.page-hero > .hero-rail { top: calc(var(--header-h) + 22px); z-index: 2; }
.band-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font: 600 .9375rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
/* Vertical measuring scales on the left content edge of every hero. */
.hero::before, .page-hero::after {
  content: "";
  position: absolute;
  left: max(var(--gutter), calc(50% - 720px + var(--gutter)));
  top: calc(var(--header-h) + 24px);
  bottom: 24px;
  width: 12px;
  transform: translateX(-100%);
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(29, 31, 34, .55) 0 1px, transparent 1px 48px) right 0 / 12px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(29, 31, 34, .3) 0 1px, transparent 1px 8px) right 0 / 6px 100% no-repeat;
}
/* Crosshairs in the four corners of every tone section. */
.section.tone::before {
  content: "";
  position: absolute;
  inset: 24px max(var(--gutter), calc(50% - 720px + var(--gutter)));
  pointer-events: none;
  background:
    linear-gradient(rgba(29, 31, 34, .6), rgba(29, 31, 34, .6)) left 0 top 6px / 13px 1px no-repeat,
    linear-gradient(rgba(29, 31, 34, .6), rgba(29, 31, 34, .6)) left 6px top 0 / 1px 13px no-repeat,
    linear-gradient(rgba(29, 31, 34, .6), rgba(29, 31, 34, .6)) right 0 top 6px / 13px 1px no-repeat,
    linear-gradient(rgba(29, 31, 34, .6), rgba(29, 31, 34, .6)) right 6px top 0 / 1px 13px no-repeat,
    linear-gradient(rgba(29, 31, 34, .6), rgba(29, 31, 34, .6)) left 0 bottom 6px / 13px 1px no-repeat,
    linear-gradient(rgba(29, 31, 34, .6), rgba(29, 31, 34, .6)) left 6px bottom 0 / 1px 13px no-repeat,
    linear-gradient(rgba(29, 31, 34, .6), rgba(29, 31, 34, .6)) right 0 bottom 6px / 13px 1px no-repeat,
    linear-gradient(rgba(29, 31, 34, .6), rgba(29, 31, 34, .6)) right 6px bottom 0 / 1px 13px no-repeat;
}
.closing .wrap { position: relative; }
.closing .wrap::before { content: ""; position: absolute; inset: -56px var(--gutter); background: var(--brackets); pointer-events: none; }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(40px, 5vw, 64px); padding-top: 18px; border-top: 1px dashed var(--rule-2); font: 600 .9375rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.footer-meta .crosses { margin-left: auto; display: flex; gap: 16px; }
.footer-meta .crosses i { width: 13px; height: 13px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat; }
/* Section rail: numbered jump links on the right edge of wide screens. */
.side-rail { position: fixed; z-index: 70; right: max(10px, calc((100vw - var(--wrap)) / 2 - 44px)); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 6px; }
.side-rail::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -28px; bottom: -28px; width: 1px; background: var(--rule-2); }
.side-rail a { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); background: rgba(255, 255, 255, .92); color: var(--ink); text-decoration: none; box-shadow: var(--soft); transition: background-color .3s, box-shadow .3s; }
.side-rail .n { font: 600 .9375rem var(--mono); }
.side-rail a:hover { background: var(--paper-3); }
.side-rail a[aria-current] { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.side-rail .t { position: absolute; right: calc(100% + 10px); top: 50%; padding: 4px 12px; border-radius: var(--pill); background: var(--graphite); color: #fff; white-space: nowrap; font: 600 .9375rem var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity .3s, transform .3s; }
.side-rail a:hover .t, .side-rail a:focus-visible .t { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 1280px) { .side-rail { display: flex; } }

/* ---------- Chinese pages ----------
   Chinese characters need their full width and more leading: no negative tracking, taller lines,
   and less spacing in the monospace labels, which were tracked out for Latin capitals. */
:lang(zh) body { line-height: 1.75; }
:lang(zh) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4, .lead, .mobile-menu nav a, .model-row .name, .tp-name, .family h3, .video h3, .install .who h3, .faq summary, legend, .field-label, .legal-body h2, .footer-statement, .band-title, .marquee-track span) { letter-spacing: 0; }
:lang(zh) .display { line-height: 1.12; }
:lang(zh) :is(.h1, .h2) { line-height: 1.18; }
:lang(zh) .h3 { line-height: 1.32; }
:lang(zh) .h4 { line-height: 1.45; }
:lang(zh) .lead { line-height: 1.7; }
:lang(zh) .band-title { line-height: 1.04; }
/* Chinese can break between any two characters, so a highlighted phrase stays on one line.
   Keep Chinese highlights to about six characters so they fit a 320-pixel phone. */
:lang(zh) .hl { white-space: nowrap; }
:lang(zh) :is(.label, .badge, .flow-tag, .scene-copy h4, .pstep .box h4, .roster-label, .install-group, .orbit-key, .tp-meta, .matrix thead th, .reel .reel-label, .side-rail .t, .model-row .flag small, .art-head) { letter-spacing: .04em; }

/* ---------- Reveal motion ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-out), transform 1.15s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .rise .ln > span { transform: translateY(105%); transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0) * 110ms + 120ms); }
.js .rise.is-in .ln > span { transform: none; }

/* Pause decorative CSS animation when it is off-screen or the tab is hidden. */
.is-offscreen *, .page-hidden * { animation-play-state: paused !important; }

@keyframes lineIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes docPulse { 0%, 100% { border-color: var(--rule); box-shadow: none; } 8%, 18% { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(29, 31, 34, .1); } }
@keyframes corePulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) inset, 0 0 0 14px rgba(var(--glow-rgb), .2), 0 0 60px 10px rgba(var(--glow-rgb), .55); } }
@keyframes hatchDrift { to { background-position: 100px 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spark { 0% { left: -8px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% + 0px); opacity: 0; } }
@keyframes typeIn { 0%, 6% { clip-path: inset(0 100% 0 0); } 22%, 86% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes ribbon { from { transform: rotate(-8deg) translateY(-6%); } to { transform: rotate(6deg) translateY(6%); } }
@keyframes drift { to { background-position: 0 90px; } }
@keyframes rise { from { transform: translateY(18%); } to { transform: translateY(-6%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit { 0%, 100% { transform: translate(-18%, 8%); } 50% { transform: translate(18%, -8%); } }
@keyframes sweep { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .rise .ln > span { opacity: 1; transform: none; }
  .out li { clip-path: none; }
  .steps-line::after { transform: scaleX(1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .nav a { padding: 0 12px; }
  .bar { gap: 16px; }
  .page-hero .copy { grid-column: 1 / span 8; }
  .page-hero .visual { grid-column: 9 / span 4; }
  .install { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .install .who { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; column-gap: 20px; }
  .install .who .tool-glyph { grid-row: span 2; margin: 0; }
  .install .who > :not(.tool-glyph) { grid-column: 2; }
  .safety { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usecase { padding: 28px 28px 32px 0 !important; border-right: 0; border-bottom: 1px solid var(--rule); }
  .usecase:nth-child(odd) { border-right: 1px solid var(--rule); }
  .usecase:nth-child(even) { padding-left: 28px !important; }
}

/* Just above the menu breakpoint the header holds brand, nav, language switch, and button, so it tightens slightly. */
@media (max-width: 1120px) {
  .nav { gap: 0; }
  .nav a { padding: 0 10px; }
  .nav a::before { left: 10px; right: 10px; }
  .bar { gap: 12px; }
}

@media (max-width: 1040px) {
  :root { --header-h: 68px; }
  .nav, .header-cta, .hero-rail { display: none; }
  .menu-toggle { display: inline-flex; }
  .bar .lang { margin-left: auto; }
  .bar .lang ~ .menu-toggle { margin-left: 0; }
  html:not(.js) .nav { display: flex; overflow-x: auto; margin: 0; }
  html:not(.js) .menu-toggle { display: none; }
  .section-head > .label, .section-head > .head-body { grid-column: 1 / -1; }
  .section-head.split > .head-body { grid-template-columns: 1fr; }
  .section-head.split .lead { justify-self: start; }
  .scene-copy { grid-column: 1 / -1; }
  .scene-art { grid-column: 1 / -1; }
  .tool-glyph { width: 46px; height: 46px; }
  .tool-glyph img { width: 28px; height: 28px; }
  .rail-note { padding-top: 0; }
  .steps-line, .steps-line.three { grid-template-columns: 1fr; padding-top: 0; padding-left: 40px; gap: 36px; }
  .steps-line::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .steps-line::after { left: 6.5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; transform: scaleY(0); transform-origin: 50% 0; }
  .steps-line.is-in::after { transform: scaleY(1); }
  .step::before { top: 2px; left: -42.5px; }
  .process-index { display: none; }
  .process-steps, .faq { grid-column: 1 / -1; }
  .faq-head { grid-column: 1 / -1; position: static; margin-bottom: 24px; }
  .integration .copy, .integration .code-tabs { grid-column: 1 / -1; }
  .families { grid-template-columns: 1fr; }
  .videos { grid-template-columns: 1fr; }
  .video { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--gap); }
  .video .reel { grid-row: span 4; }
  .brief-form, .brief-side { grid-column: 1 / -1; }
  .brief-side { position: static; }
  .legal-index { display: none; }
  .legal-body { grid-column: 1 / -1; }
  .footer-lead { grid-column: 1 / -1; }
  .footer-col, .footer-col:first-of-type { grid-column: span 4; }
  .slot-diagram { grid-template-columns: 1fr; }
  .slots { border-inline: 0; border-block: 1px solid var(--rule); }
  .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bounds { grid-column: 1 / -1; }
  .topics { grid-template-columns: 1fr; }
  .page-hero .copy { grid-column: 1 / -1; }
  .page-hero .visual { grid-column: 1 / -1; min-height: 300px; margin-top: 8px; }
  .page-hero .visual canvas { top: -10%; left: -12%; width: 124%; height: 120%; }
}

@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: 1 / -1 !important; }
  .hero { min-height: max(700px, 100svh); }
  .hero-meta { padding-top: clamp(200px, 34vh, 300px); }
  .hero-meta .grid { gap: 18px; }
  .fact { border-right: 0; border-bottom: 1px solid var(--rule); padding: 22px 0 24px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
  .fact span { margin: 0; }
  .facts { border-top: 0; }
  .pillar { padding-top: 24px; }
  .scene-art { min-height: 0; }
  .flow { grid-template-columns: 1fr; padding: 22px 18px; }
  .flow-mid { height: 64px; }
  .flow-mid::before { left: 50%; right: auto; top: -6px; bottom: -6px; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--ink-4) 0 4px, transparent 4px 9px); }
  .flow-spark { left: 50%; margin-left: -4px; top: -6px; animation-name: sparkV; }
  .art-head, .art-foot { padding: 14px 18px; flex-wrap: wrap; }
  .model-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .model-row .flag { justify-self: start; text-align: left; }
  .window-body { height: 380px; }
  .integration .window-body { height: 400px; }
  .window-bar { padding: 10px 10px 10px 16px; flex-wrap: wrap; row-gap: 8px; min-height: 0; }
  .window-bar .badge { margin-left: 0; order: 3; }
  .copy-btn { margin-left: auto; }
  .compat-ascii { opacity: .45; }
  .band .wrap { grid-template-columns: 1fr; min-height: 112px; }
  .band-art { display: none; }
  .band-title { font-size: clamp(2rem, 9.4vw, 3rem); }
  .band::after { width: 30%; }
  .tool-actions .btn { flex: 1 1 auto; }
  .pstep { grid-template-columns: 1fr; padding: 36px 0 40px; }
  .pstep header { grid-template-columns: 1fr; }
  .pstep header p { grid-column: 1; }
  .deliverables { grid-template-columns: 1fr; }
  .deliverable { min-height: 0; padding: 26px 22px; }
  .faq .answer { padding-right: 0; }
  .status { grid-template-columns: auto 1fr; padding: 20px; }
  .status .date { grid-column: 1 / -1; }
  .spec > div, .video .spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .video { grid-template-columns: 1fr; }
  .video .reel { grid-row: auto; }
  .usecases { grid-template-columns: 1fr; }
  .usecase, .usecase:nth-child(odd), .usecase:nth-child(even) { padding: 24px 0 !important; border-right: 0; }
  .sources { grid-template-columns: 1fr; }
  .install { grid-template-columns: minmax(0, 1fr); padding: 36px 0; }
  .safety { grid-template-columns: 1fr; }
  .slot-end, .slots { padding: 26px 22px; }
  .two { grid-template-columns: 1fr; }
  .paper pre { height: 360px; }
  .footer-col, .footer-col:first-of-type { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .closing .h1 { max-width: 11ch; }
}

/* On narrow phones the language switch moves from the header bar into the menu, beside the tagline. */
@media (max-width: 460px) {
  .bar .lang { display: none; }
  .bar .lang ~ .menu-toggle { margin-left: auto; }
  .mobile-menu .lang { display: inline-flex; }
}

@media (max-width: 420px) {
  .btn { padding: 10px 22px 10px 18px; white-space: normal; text-align: left; }
  .bar { gap: 12px; }
  .brand-word { letter-spacing: .12em; }
  .menu-toggle { padding: 0 12px; gap: 8px; }
  .actions .btn { flex: 1 1 100%; }
  .brief-actions { grid-template-columns: 1fr; }
}

@keyframes sparkV { 0% { top: -6px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% + 0px); opacity: 0; } }

@media (hover: none) {
  .model-row:hover .name { transform: none; }
}

@media print {
  .site-header, .site-footer, canvas, body::after { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
/* The console entry is also present inside the mobile menu. */
.bar > .dayworld-console, .menu-toggle { flex-shrink: 0; white-space: nowrap; }
/* Keep the full intro navigation readable when account labels expand after sign-in. */
@media (min-width: 1281px) {
  .site-header .bar { gap: 16px; }
  .site-header .nav { gap: 0; }
  .site-header .nav a { font-size: .9375rem; padding-inline: 12px; }
  .site-header .nav a::before { left: 12px; right: 12px; }
}
@media (max-width: 1280px) {
  .site-header .nav, .site-header .header-cta { display: none; }
  .site-header .menu-toggle { display: inline-flex; }
  .site-header .bar .lang { margin-left: auto; }
  .site-header .bar .lang ~ .menu-toggle { margin-left: 0; }
  html:not(.js) .site-header .nav { display: flex; overflow-x: auto; min-width: 0; }
  html:not(.js) .site-header .menu-toggle { display: none; }
}
@media (max-width: 460px) {
  .site-header .bar .lang ~ .menu-toggle { margin-left: auto; }
}
@media (max-width: 640px) {
  .bar > .dayworld-console { display: none; }
}

/* Keep short ideas together; break longer headings at meaningful clauses.
   Phrases can still wrap internally when a narrow screen cannot fit them. */
.phrase { display: inline-block; max-width: 100%; vertical-align: top; }
.title-clause { display: block; }
.editorial-title { overflow-wrap: anywhere; }
.editorial-title .hl { white-space: normal; }
:lang(zh) .editorial-title { max-width: 12em; }
:lang(zh) .lead { max-width: 30em; line-break: strict; }
:lang(zh) .hero-copy .lead { max-width: 25em; }
:lang(zh) .page-hero .copy .lead { max-width: 24em; }
:lang(zh) :is(p, li, summary) { line-break: strict; }

/* Product entrances share the site's paper, ink and sunlight palette. */
.dw-products { border-bottom: 1px solid var(--rule-2); }
.dw-products > .wrap > .h2 { margin-top: 24px; max-width: 15em; }
.dw-products > .wrap > .lead { margin-top: 24px; }
.dw-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; border: 1px solid var(--rule-2); }
.dw-product { min-width: 0; }
.dw-product + .dw-product { border-left: 1px solid var(--rule-2); }
.dw-product > div:last-child { padding: clamp(24px, 3vw, 48px); }
.dw-product p { max-width: 28em; margin: 20px 0 28px; line-height: 1.8; }
.dw-product-art { height: 240px; position: relative; overflow: hidden; border-bottom: 1px solid var(--rule-2); background: #ebece7; }
.dw-art-chat span { position: absolute; left: 20%; top: 22%; display: grid; place-items: center; font: 100px/1 var(--sans); width: 45%; height: 50%; border: 2px solid var(--ink); border-radius: 28px 28px 28px 0; background: var(--sun); }
.dw-art-chat i { position: absolute; right: 22%; bottom: 16%; display: grid; place-items: center; width: 70px; height: 70px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); font: normal 44px/1 var(--sans); }
.dw-art-canvas { background-image: radial-gradient(#bfc1ba 1px, transparent 1px); background-size: 18px 18px; }
.dw-art-canvas span, .dw-art-canvas i { position: absolute; width: 128px; height: 148px; top: 42px; border: 2px solid var(--ink); background: var(--paper); }
.dw-art-canvas span { left: 24%; transform: rotate(-12deg); }
.dw-art-canvas i { right: 24%; transform: rotate(9deg); background: #ff957a; }
.dw-art-canvas b { position: absolute; left: 40%; top: 50px; font: 112px/1 var(--sans); color: var(--ink); }
@media (max-width: 1000px) { .header .nav a { padding-inline: 10px; } }
@media (max-width: 700px) {
  .dw-product-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .dw-product + .dw-product { border-left: 0; border-top: 1px solid var(--rule-2); }
  .dw-product-art { height: 210px; }
}
/* Site edition and regional availability. */
.brand-word .site-edition{display:block;font:500 9px/1.2 var(--font-sans,system-ui,sans-serif);letter-spacing:.1em;margin-top:3px;color:var(--muted,#676b73)}
.regional-sites{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 24px;max-width:var(--wrap);margin-inline:auto;padding:22px var(--gutter);font-size:14px;line-height:1.6;border-top:1px solid rgba(255,255,255,.18);text-align:center}
.regional-sites a{text-decoration:underline;text-underline-offset:3px}
.model-cover{display:block;aspect-ratio:16/9;overflow:hidden;background:#101014;border:1px solid var(--rule);border-radius:10px;margin-bottom:22px}
.model-cover img{display:block;width:100%;height:100%;object-fit:contain}
.model-cover-minimax{background:#742cf5}
.model-cover:focus-visible{outline:3px solid var(--ink);outline-offset:5px}

.regional-china{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.regional-status{font-size:12px;opacity:.8}
select { appearance: none; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Desktop release: permanent download entry, same day-cycle palette. */
.app-download-meta { display:inline-block; margin:24px 0 12px; padding:8px 14px; border-radius:999px; background:rgba(136,126,232,.14); font-size:13px; font-weight:600; }
.app-download-note { max-width:44ch; margin:0 0 14px; font-size:14px; line-height:1.7; color:var(--muted,#5d6066); }
.app-download-links { display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13px; }
.app-download-links a { text-underline-offset:4px; }