/* Hallmark · shape: Mission and hangar (full-screen chapters with the picture edge to edge, then each product shown on its own stand with a spec strip) · genre: modern-minimal · theme: custom · redesign: full · job: try · idea: "Announce AI products the way launches are announced: one picture, one sentence, one action per screen" · vibe: "black, engineered, full bleed, quiet confidence"
 * paper: oklch(9% 0.004 260) · accent: oklch(76% 0.12 236), the BOLATEK logo blue, only on what is live · display: Archivo condensed 600, capitals · body: Archivo · hero: the AI as a light in the dark, fine dust drifting into it; it breathes at rest and changes shape while it thinks, the headline low and left · nav: edge-aligned bar on a scrim · footer: colophon block · imagery: the AI light, then one photograph (Guangzhou at dusk from the office window) held still behind the last three chapters, the user's office photographs, real INOS and Filmily output, Frey and PiEv built as live interfaces · signature: Frey's replay full screen, the agent stopping to ask before it runs a command
 * axes: dark/display-condensed/neutral · posture: drenched (the black ground, pictures edge to edge, the blue only on live status and focus) · motion: the AI light (thinks on its own and when a visitor reaches for an action), the outsourcing flow (eight steps, the AI asking, splitting and pricing a quote), the Frey replay, the Filmily reel and the INOS voice line; one control in the nav stops all of it, phones get a lighter render, reduced motion keeps the posters · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V5 · weakest: S, a launch-page voice could fit any company; every chapter carries a real product and its real facts, and the hero is our own office view */
/* Hallmark · waive 84 · Frey and PiEv are shown as built live interfaces · the owner asked for products expressed in their own interfaces rather than screenshots */
/* Hallmark · waive 37 · Archivo for Latin plus one system face per page picked by :lang and a code face for the replay · eleven languages each need their own script, and each page renders only one fallback */
/* Hallmark · waive 49b · the BOLATEK office address on a phone wraps to two lines · a postal address cannot shorten and stays one link to the map for every visitor to BOLATEK */
/* Hallmark · waive 83 · full-screen photographs and product pictures edge to edge · the owner asked for the SpaceX manner, where the picture is each chapter */
/* Hallmark · dropped the outsourcing record (50+ clients, 100+ projects, 6 teams, 500+ consulting clients), the client logo wall, the service list and 塔洛数智人 (intro.pdf, dhintro.pptx) · the owner is retiring the outsourcing story and the digital human product for the AI products; outsourcing returns on its own page as software built with Claude Code and priced by the token, at the owner's request (2026-11-02), with no client record */
/* Hallmark · dropped assets/js/jquery.min.js, assets/js/jquery.dropotron.min.js, assets/js/jquery.scrollex.min.js, assets/js/browser.min.js, assets/js/breakpoints.min.js, assets/js/util.js, assets/js/main.js, #navPanel · the template's jQuery menu chrome; the new nav is plain links and details menus */
/* Hallmark · dropped /images/bolatek/dhintro.pptx, /images/bolatek/intro.pdf, index.html, logow.png, #banner, 2024 as a figure · 塔洛数智人 is retired at the owner's request, the wordmark links to /, the logo banner gave way to the headline and 2024 is now a timeline year */
/* Hallmark · dropped headings BOLATEK INC., 联系我们, 关于我们, 产品及技术储备, 项目经验, mov, takiroki ai, 塔洛数智人, OSZERO 手表应用, 公司简介, 技术人才储备, 解决方案, 企业文化 and images logow.png, mov.png, logo1.png, dh.jpg, oszero-default.png, 20241209124154.png, 20241209123721.png, 20241209114642.png, 20241209130200.png, 20241207162046.jpg · the owner asked to retire the outsourcing story and 塔洛数智人; mov, takiroki ai and OSZERO were links under earlier work until the owner removed that column (2026-11-02) */
/* Hallmark · dismissed kept · BOLATEK INC., 企业文化, the 2024 figure and #banner are on the record as dropped above; 2024 survives as a timeline year */
/* Hallmark · waive 39b · the outsourcing steps are step cards 55 to 99px tall, each one full-width target · each holds a step name and its one sentence, which a 52px button cannot */
/* Hallmark · dismissed 49 · the outsourcing steps are cards that each hold a step name and its one sentence; they wrap by design and every one is a full-width target */
/* Hallmark · waive 59 · full-screen AI chapters meet edge to edge on the home page · each chapter is its own picture, so the change of photograph is the seam */
/* Hallmark · dismissed 77 · the about page is a short record of BOLATEK: the banner, the timeline with the office, and the contact chapter */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- type ---------- */
body { background: var(--color-paper); color: var(--color-ink); }
h1, h2 { font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: uppercase; line-height: 1.02; letter-spacing: var(--tracking-display); }
h1 { font-size: clamp(2.75rem, 6vw, 6rem); max-width: 14ch; }
h2 { font-size: clamp(2.25rem, 4.2vw, 4.25rem); max-width: 18ch; }
h3 { font-size: var(--text-title); font-weight: 600; line-height: 1.25; }
:lang(zh) h1, :lang(zh) h2, :lang(ja) h1, :lang(ja) h2, :lang(ko) h1, :lang(ko) h2 { line-height: 1.18; letter-spacing: 0.02em; font-weight: 600; }
:lang(zh) h1, :lang(ja) h1, :lang(ko) h1 { max-width: 10em; }
:lang(zh) h2, :lang(ja) h2, :lang(ko) h2 { max-width: 14em; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) .stand__tag, :lang(ja) h1, :lang(ja) h2, :lang(ja) .stand__tag { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ko) { word-break: keep-all; }
:lang(zh) .chapter__body .lead, :lang(ja) .chapter__body .lead, :lang(ko) .chapter__body .lead { max-width: 28em; }
:lang(zh) body, :lang(ja) body, :lang(ko) body { line-height: 1.75; }
:lang(ar) h1, :lang(ar) h2 { line-height: 1.3; letter-spacing: 0; }
:lang(ar) body { line-height: 1.8; }
p { margin: 0; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.caption, figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.muted { color: var(--color-muted); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-xl); border: 2px solid var(--color-ink); border-radius: 0; background: none; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
.btn--ghost { border-color: var(--color-rule-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.link { color: var(--color-ink); text-decoration-line: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-ink); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.skip { position: absolute; inset-inline-start: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- nav ---------- */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-sticky-nav); background: linear-gradient(180deg, var(--color-shade), transparent); transition: background-color var(--dur-short) var(--ease-out); }
.nav.is-solid { background: var(--color-scrim); }
.nav__bar { display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark__en { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; font-stretch: 78%; text-transform: uppercase; letter-spacing: 0.02em; }
.wordmark { align-items: center; }
.mark { width: auto; height: 26px; aspect-ratio: 698 / 774; flex-shrink: 0; }
.wordmark__en--ai { text-transform: none; font-stretch: 85%; letter-spacing: 0; }
.mark--light { width: 28px; height: 28px; aspect-ratio: 1; border-radius: 50%; }
.wordmark__ai { font-size: var(--text-sm); color: var(--color-muted); padding-inline-start: var(--space-sm); border-inline-start: var(--rule-hair) solid var(--color-rule-2); }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__primary { margin-inline-start: var(--space-xl); }
.nav__links { display: flex; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--color-ink); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.nav__tools { display: flex; align-items: center; gap: var(--space-2xs); margin-inline-start: auto; }
.nav__tools .btn { min-height: 40px; padding: 0 var(--space-lg); }
.pop { position: relative; }
.pop > summary { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; list-style: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.pop > summary::-webkit-details-marker { display: none; }
.pop > summary:hover, .pop[open] > summary { color: var(--color-ink); }
.pop > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.pop > summary svg { width: 16px; height: 16px; flex-shrink: 0; }
.pop__panel { color: var(--color-ink); position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); min-width: 16rem; margin: 0; padding: var(--space-xs); list-style: none; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.pop__panel--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 30rem; }
.pop__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.pop__panel a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.pop__panel a[aria-current] { color: var(--color-accent); }
.pop__panel a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.menu { display: none; }
.fx-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--color-ink-2); cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.fx-toggle:hover { color: var(--color-ink); }
.fx-toggle:active { transform: translateY(1px); }
.fx-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.fx-toggle svg { width: 16px; height: 16px; }
.fx-toggle .i-play, .fx-toggle[aria-pressed="true"] .i-pause { display: none; }
.fx-toggle[aria-pressed="true"] .i-play { display: block; }
html:not(.js) .fx-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .fx-toggle { display: none; } }

/* ---------- chapters: one picture, one sentence, one action ---------- */
.chapter { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--color-paper); scroll-margin-top: 0; }
.chapter__media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.chapter__media > img, .chapter__media .reel img { width: 100%; height: 100%; object-fit: cover; }
.chapter__media > img { filter: brightness(0.62) saturate(0.9); }
.hero .chapter__media > img { filter: brightness(0.82); }
.chapter__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-shade) 0%, transparent 50%), linear-gradient(90deg, var(--color-shade) 0%, var(--color-shade) 30%, transparent 72%); pointer-events: none; }
[dir="rtl"] .chapter__media::after { background: linear-gradient(0deg, var(--color-shade) 0%, transparent 50%), linear-gradient(270deg, var(--color-shade) 0%, var(--color-shade) 30%, transparent 72%); }
.chapter__body { display: grid; gap: var(--space-lg); justify-items: start; max-width: 40rem; padding-block: var(--space-4xl) var(--space-3xl); }
.chapter__body .lead { max-width: 45ch; }
/* the AI light and the horizon: a poster picture, and a canvas that fades in over it once WebGL is running */
.scene picture, .scene img, .scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene img { object-fit: cover; }
.scene canvas { display: block; opacity: 0; transition: opacity 1200ms var(--ease-out); }
.scene canvas.is-live { opacity: 1; }
[dir="rtl"] .hero .scene img { transform: scaleX(-1); }
.hero .chapter__media::after { background: linear-gradient(0deg, var(--color-shade) 0%, transparent 40%), linear-gradient(90deg, var(--color-shade) 0%, transparent 55%); }
[dir="rtl"] .hero .chapter__media::after { background: linear-gradient(0deg, var(--color-shade) 0%, transparent 40%), linear-gradient(270deg, var(--color-shade) 0%, transparent 55%); }
.kicker { font-size: var(--text-md); font-weight: 500; color: var(--color-ink-2); }
/* the run: one photograph held still behind the last chapters while their content scrolls over it */
.run { position: relative; isolation: isolate; }
.backdrop { position: sticky; top: 0; z-index: -1; height: 100svh; margin: 0; overflow: hidden; }
.backdrop + .chapter { margin-top: -100svh; }
.backdrop > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.9); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-shade) 0%, transparent 50%), linear-gradient(90deg, var(--color-shade) 0%, var(--color-shade) 30%, transparent 72%); pointer-events: none; }
[dir="rtl"] .backdrop::after { background: linear-gradient(0deg, var(--color-shade) 0%, transparent 50%), linear-gradient(270deg, var(--color-shade) 0%, var(--color-shade) 30%, transparent 72%); }
.chapter--clear { background: transparent; }
.settle { animation: settle 900ms var(--ease-out) both; }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .settle { animation: none; } }

/* ---------- the hangar: products on their own stand ---------- */
.hangar-head { padding-block: var(--section-gap-s) var(--space-2xl); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md) var(--gap-columns); align-items: end; }
.hangar-head .lead { max-width: 40ch; }
.index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 var(--space-2xl); padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.index .brand-link { display: grid; gap: var(--space-2xs); padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: 2px solid transparent; color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.index .brand-link:hover { border-color: var(--color-ink); }
.index .brand-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.index b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; font-stretch: 78%; text-transform: uppercase; }
.index span { font-size: var(--text-sm); color: var(--color-muted); }

.stand { position: relative; isolation: isolate; scroll-margin-top: 72px; border-top: var(--rule-hair) solid var(--color-rule); }
.stand__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: min(100svh, 860px); padding-block: var(--section-gap-s); }
.stand--flip .stand__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stand--flip .stand__text { order: 2; }
.stand__text { display: grid; gap: var(--space-md); justify-items: start; }
.stand h3 { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 5.25rem); font-weight: 600; font-stretch: 72%; text-transform: uppercase; line-height: 1.02; letter-spacing: 0; }
.status { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.status--live { color: var(--color-accent); }
.stand__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.stand__tag { font-size: var(--text-xl); font-weight: 600; color: var(--color-ink); line-height: 1.3; max-width: 22ch; }
:lang(zh) .stand__tag, :lang(ja) .stand__tag, :lang(ko) .stand__tag { max-width: 16em; }
.stand__body { color: var(--color-ink-2); max-width: 46ch; }
.points { display: grid; gap: var(--space-sm); width: 100%; margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.points li { display: grid; gap: var(--space-3xs); padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--color-rule-2); }
.points b { font-weight: 600; color: var(--color-ink); }
.points span { font-size: var(--text-sm); color: var(--color-ink-2); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); width: 100%; margin: var(--space-sm) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.specs > div { display: grid; align-content: start; gap: var(--space-2xs); }
.specs dd { order: 1; margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--color-ink); line-height: 1.35; }
.specs dt { order: 2; font-size: var(--text-sm); color: var(--color-muted); }
.stand__visual { margin: 0; position: relative; }
.stage { position: relative; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); overflow: hidden; }
.stage__bar, .stage__foot { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); color: var(--color-muted); font-family: var(--font-outlier); font-size: var(--text-xs); direction: ltr; }
.stage__bar { border-bottom: var(--rule-hair) solid var(--color-rule); }
.stage__foot { border-top: var(--rule-hair) solid var(--color-rule); }
.stage__foot .on { color: var(--color-accent); }

/* Frey: the replay */
.replay { display: grid; grid-template-rows: auto 1fr auto; min-height: 540px; font-family: var(--font-outlier); font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); }
.replay__log { display: grid; align-content: start; gap: var(--space-md); margin: 0; padding: var(--space-xl); list-style: none; direction: ltr; text-align: left; }
.replay__log li { overflow-wrap: anywhere; }
.replay__log code { font: inherit; }
.replay__log .t { color: var(--color-ink); font-weight: 600; margin-inline-end: var(--space-sm); }
.replay__log .p { color: var(--color-accent); margin-inline-end: var(--space-xs); }
.replay__log .l-prompt { color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-lg); padding-bottom: var(--space-xs); }
.replay__log .diff { color: var(--color-muted); margin-inline-start: var(--space-sm); }
.replay__log .l-ok { color: var(--color-success); }
.replay__log .l-say { color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-lg); padding-top: var(--space-xs); }
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); padding: var(--space-md); background: var(--color-paper-3); font-family: var(--font-body); }
.ask__q { color: var(--color-ink); margin-inline-end: auto; }
.choices { display: inline-flex; gap: var(--space-sm); white-space: nowrap; }
.choice { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-muted); font-size: var(--text-sm); }
.choice.is-on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
:lang(ar) .replay__log .l-prompt, :lang(ar) .replay__log .l-say, :lang(ar) .ask { direction: rtl; text-align: right; }
.js .replay.is-live .replay__log li:not(.l-prompt) { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.js .replay.is-live .replay__log li.is-shown { opacity: 1; transform: none; }
.js .replay.is-live .choice.is-on { background: transparent; border-color: var(--color-rule-2); color: var(--color-muted); }
.js .replay.is-live .choice.is-on.is-picked { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
@media (prefers-reduced-motion: reduce) { .js .replay.is-live .replay__log li:not(.l-prompt) { opacity: 1; transform: none; } }
.vendors { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 46ch; }

/* PiEv: a proposal */
.proposal { display: grid; gap: var(--space-lg); padding: var(--space-xl); }
.proposal dl { display: grid; gap: var(--space-sm); margin: 0; }
.proposal__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-family: var(--font-outlier); font-size: var(--text-sm); direction: ltr; text-align: left; }
.proposal__row dt { color: var(--color-muted); } .proposal__row dd { margin: 0; color: var(--color-ink); }
.versions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline; font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); direction: ltr; }
.versions b { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; font-stretch: 78%; color: var(--color-ink); }

/* Filmily: the reel */
.film { aspect-ratio: 16 / 9; }
.reel { position: absolute; inset: 0; }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel img { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--ease-in-out); }
.reel img.is-on { opacity: 1; }
html:not(.js) .reel img:first-child { opacity: 1; }
.tracks { container-type: inline-size; position: relative; display: grid; gap: var(--space-2xs); margin-top: var(--space-md); direction: ltr; width: 100%; }
.track-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-ink-2); }
.lane { position: relative; height: 14px; background: var(--color-paper-2); }
.lane span { position: absolute; top: 0; bottom: 0; background: var(--color-ink-2); }
.lane--voice span { background: var(--color-accent); }
.playhead { position: absolute; top: -4px; bottom: -4px; left: calc(4.5rem + var(--space-sm)); width: 2px; background: var(--color-ink); animation: play 20s linear infinite; }
@keyframes play { from { transform: translateX(0); } to { transform: translateX(calc(100cqi - 4.5rem - var(--space-sm))); } }
html:not(.js) .playhead, html.fx-off .playhead { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .playhead { animation: none; } }

/* INOS: the product on its stand, voice line over it */
.screen { position: relative; margin: 0 0 var(--space-xl); aspect-ratio: 1568 / 720; overflow: visible; }
.screen > img { border: var(--rule-hair) solid var(--color-rule); }
.voice { z-index: 2; position: absolute; inset-inline-end: var(--space-lg); bottom: calc(-1 * var(--space-xl)); display: grid; gap: var(--space-sm); width: min(24rem, 80%); }
.bubble { padding: var(--space-md) var(--space-lg); font-size: var(--text-md); }
.bubble--you { justify-self: end; background: var(--color-ink); color: var(--color-paper); }
.bubble--ai { justify-self: start; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink); }
.wave { display: flex; gap: var(--space-2xs); align-items: center; height: 24px; }
.wave i { width: 3px; height: 100%; background: var(--color-accent); transform: scaleY(0.25); animation: wave 1.2s var(--ease-in-out) infinite alternate; animation-delay: calc(var(--d) * 90ms); }
@keyframes wave { to { transform: scaleY(1); } }
html.fx-off .wave i, html:not(.js) .wave i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; transform: scaleY(0.6); } }

/* INOS Platform: one definition, six ways in */
.diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 0.8fr) minmax(0, 1.1fr); align-items: center; align-content: center; min-height: 460px; margin: 0; padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); direction: ltr; }
.diagram__core { justify-self: end; padding: var(--space-md) var(--space-lg); border: 2px solid var(--color-ink); color: var(--color-ink); font-family: var(--font-outlier); font-size: var(--text-md); }
.diagram__out { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.diagram__out code { font: inherit; }
.diagram__out li { padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); font-size: var(--text-sm); }
.diagram__lines { align-self: stretch; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.diagram__lines path { fill: none; stroke: var(--color-rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- method ---------- */
.method { padding-block: var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.method .head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-3xl); }
.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: seat; }
.seats li { counter-increment: seat; display: grid; align-content: start; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 2px solid var(--color-rule-2); }
.seats li:first-child { border-top-color: var(--color-ink); }
.seats li::before { content: counter(seat, decimal-leading-zero); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; font-stretch: 78%; color: var(--color-muted); font-variant-numeric: tabular-nums; line-height: 1; }
.seats h3 { font-size: var(--text-xl); }
.seats p { color: var(--color-ink-2); }
.method__note { margin-top: var(--space-2xl); max-width: 60ch; color: var(--color-muted); }

/* ---------- enterprise and contact chapters ---------- */
.offers { display: grid; gap: 0; margin: var(--space-sm) 0 0; padding: 0; list-style: none; width: 100%; border-top: var(--rule-hair) solid var(--color-rule-2); }
.offers li { display: grid; gap: var(--space-3xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.offers h3 { font-size: var(--text-lg); }
.offers p { color: var(--color-ink-2); font-size: var(--text-md); }
.contacts { display: grid; width: 100%; margin: var(--space-sm) 0 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.contacts > div { display: grid; grid-template-columns: minmax(5rem, 1fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.contacts dt { color: var(--color-ink-2); font-size: var(--text-sm); padding-top: 0.15em; }
.contacts dd { margin: 0; overflow-wrap: anywhere; }
.contacts a { color: var(--color-ink); text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.contacts a:hover { text-decoration-color: var(--color-ink); }

/* ---------- about ---------- */
.banner { padding-block: calc(72px + var(--space-4xl)) var(--space-xl); }
.banner__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-md) var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.timeline li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.timeline .year { font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 600; font-stretch: 72%; text-transform: uppercase; line-height: 1; font-variant-numeric: tabular-nums; }
.timeline p { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 46ch; }
.section { padding-block: var(--space-2xl) var(--section-gap); }
.banner + .section { padding-top: var(--space-xl); }
.gallery { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.gallery [data-slot] { min-height: 560px; height: 100%; }
.gallery figure { margin: 0; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md) var(--gap-columns); align-items: end; }

/* ---------- software outsourcing: eight steps, the first three the AI at work ---------- */
.banner__side { display: grid; gap: var(--space-lg); justify-items: start; }
.flow-sec { padding-block: var(--space-2xl) var(--section-gap); }
.flow-sec .head { margin-bottom: var(--space-2xl); }
.flow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.flow__steps { display: grid; margin: 0; padding: 0; list-style: none; }
/* the rail: eight steps down the side; the running one opens and its line fills */
.flow__step { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; gap: var(--space-3xs) var(--space-sm); width: 100%; height: 100%; padding: var(--space-sm) 0 var(--space-sm) var(--space-md); border: 0; border-inline-start: 2px solid var(--color-rule-2); background: none; color: var(--color-ink-2); font: inherit; text-align: start; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.flow__step:hover { color: var(--color-ink); }
.flow__step:hover .flow__n { color: var(--color-ink-2); }
.flow__step:active { transform: translateY(1px); }
.flow__step:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.flow__n { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; font-stretch: 78%; font-variant-numeric: tabular-nums; line-height: 1; color: var(--color-muted); }
.flow__step b { font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.flow__d { grid-column: 2; font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.flow.is-live .flow__step:not([aria-current]) .flow__d { display: none; }
.flow__now { display: none; }
.flow__step.is-done, .flow__step[aria-current] { border-color: var(--color-ink); }
.flow__step[aria-current] .flow__n { color: var(--color-accent); }
.flow__step[aria-current] .flow__d { color: var(--color-ink-2); }
.flow__bar { position: absolute; inset-block: 0; inset-inline-start: -2px; width: 2px; background: var(--color-accent); transform: scaleY(0); transform-origin: top; pointer-events: none; }
.flow.is-playing .flow__step[aria-current] .flow__bar { animation: flowbar var(--dur) linear forwards; }
@keyframes flowbar { to { transform: none; } }
.flow__stage { display: grid; grid-template-rows: auto 1fr auto; margin: 0; }
.flow__stage .stage__bar { direction: inherit; font-family: var(--font-body); font-size: var(--text-sm); }
.flow__stage .stage__bar > span:first-child { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); }
.orb { display: inline-block; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, var(--color-ink) 0%, var(--color-ink) 24%, color-mix(in oklch, var(--color-ink) 40%, transparent) 48%, transparent 72%); }
.flow.is-thinking .orb { animation: orb 1.4s var(--ease-in-out) infinite alternate; }
@keyframes orb { to { transform: scale(1.4); opacity: 0.7; } }
/* every panel sits in the same cell, so the stage keeps the height of the tallest and never jumps */
.flow__panels { display: grid; padding: var(--space-lg) var(--space-xl); }
.flow__panel { grid-area: 1 / 1; display: none; }
.flow__panel.is-static { display: grid; }
.flow.is-live .flow__panel { display: grid; visibility: hidden; }
.flow.is-live .flow__panel.is-on { visibility: visible; }
.flow__note { padding: var(--space-sm) var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.flow [data-t] { transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.flow.is-playing .is-on [data-t]:not(.is-shown) { opacity: 0; transform: translateY(6px); }
.flow.is-playing .choice.is-on:not(.is-picked) { background: transparent; border-color: var(--color-rule-2); color: var(--color-muted); }
.flow__who, .flow__h { font-size: var(--text-sm); color: var(--color-muted); }
.flow__ai { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); justify-self: start; font-size: var(--text-sm); color: var(--color-ink-2); }
.tag { display: inline-flex; gap: var(--space-xs); font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.tag .model, .tag .effort { direction: ltr; unicode-bidi: isolate; }
.tag .model { color: var(--color-ink-2); }
.ticks { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: baseline; gap: var(--space-sm); color: var(--color-ink); }
.tick { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-ink-2); transform: translateY(2px); }
/* 1: the request */
.p-need { align-content: start; justify-items: end; gap: var(--space-md); padding-top: var(--space-xl); }
.p-need .bubble { width: min(34rem, 100%); min-height: 7.5em; font-size: var(--text-lg); line-height: 1.6; }
/* 2: questions, then the plan and the tasks */
.p-assess { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.qs { display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.qs li { display: grid; gap: var(--space-sm); }
.qs p { font-size: var(--text-md); color: var(--color-ink); }
.qs .choices { flex-wrap: wrap; white-space: normal; }
.plan { display: grid; gap: var(--space-sm); align-content: start; }
.plan .ticks { margin-bottom: var(--space-md); font-size: var(--text-sm); }
.tasks { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.tasks li { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
/* 3: the quote */
.quote { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.quote th, .quote td { padding: 0.4rem var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 400; text-align: start; }
.quote thead th { color: var(--color-muted); }
.quote tbody th { color: var(--color-ink); }
.quote .m { white-space: nowrap; }
.quote .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink); }
.quote tfoot th { color: var(--color-ink-2); }
.quote tfoot tr:first-child > * { padding-top: var(--space-md); }
.quote .total > * { padding-top: var(--space-md); border-top: 2px solid var(--color-ink); border-bottom: 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); }
.quote .total .num { font-family: var(--font-display); font-size: var(--text-2xl); font-stretch: 78%; font-variant-numeric: tabular-nums; }
/* 4 to 8: the state of the job */
.p-state { align-content: center; gap: var(--space-xl); }
.flow__big { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 600; font-stretch: 72%; text-transform: uppercase; line-height: 1; color: var(--color-ink); }
.p-state .ticks { gap: var(--space-sm); font-size: var(--text-lg); }
.meter { position: relative; display: block; height: 4px; overflow: hidden; background: var(--color-paper-3); }
.meter > i { position: absolute; inset: 0; background: var(--color-ink-2); transform-origin: left; transition: transform 450ms var(--ease-out); }
[dir="rtl"] .meter > i { transform-origin: right; }
.flow.is-playing .is-on [data-t]:not(.is-shown) .meter > i { transform: scaleX(0); }
.meter--slow > i { transition-duration: 2600ms; transition-timing-function: linear; }
.care { display: grid; gap: var(--space-sm); max-width: 32rem; color: var(--color-ink-2); }
.care b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.p-build { align-content: start; gap: var(--space-lg); }
.build { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.build li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 16px; gap: var(--space-md); align-items: center; font-size: var(--text-sm); color: var(--color-ink-2); }
.build .tick { transform: none; color: var(--color-success); }
.flow.is-playing .p-build [data-t]:not(.is-shown) { opacity: 1; transform: none; }
.flow.is-playing .p-build li:not(.is-shown) .tick { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .orb, .flow__bar { animation: none; } .flow [data-t], .meter > i { transition: none; } }
/* how the quote is built */
.prices { display: grid; gap: var(--space-md); margin-top: var(--space-3xl); }
.prices__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.prices__head h3 { margin-inline-end: auto; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.prices__unit { display: none; font-size: var(--text-sm); color: var(--color-muted); }
html:not(.js) .prices__unit { display: block; }
html:not(.js) .seg { display: none; }
.seg { display: inline-flex; border: var(--rule-hair) solid var(--color-rule-2); }
.seg button { min-height: 44px; padding: 0 var(--space-md); white-space: nowrap; border: 0; background: none; color: var(--color-ink-2); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg button:hover { color: var(--color-ink); }
.seg button:active { transform: translateY(1px); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg button[aria-pressed="true"] { background: var(--color-paper-3); color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); }
.prices__scroll { overflow-x: auto; }
.ptable { width: 100%; min-width: 34rem; border-collapse: collapse; }
.ptable th, .ptable td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 400; text-align: start; }
.ptable thead th { font-size: var(--text-sm); color: var(--color-muted); }
.ptable tbody th { display: grid; gap: var(--space-3xs); }
.ptable tbody th b { font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.ptable tbody th span { font-size: var(--text-sm); color: var(--color-muted); }
.ptable tbody th span:nth-of-type(1) { color: var(--color-ink-2); }
.ptable .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable td { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; font-stretch: 78%; color: var(--color-ink); }
@media (max-width: 64rem) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .flow__step { grid-template-columns: minmax(0, 1fr); padding: var(--space-sm) 0 0; border-inline-start: 0; border-top: 2px solid var(--color-rule-2); }
  .flow__d { grid-column: 1; }
  .flow.is-live .flow__step:not([aria-current]) .flow__d { display: block; }
  .flow__bar { inset-block: -2px auto; inset-inline: 0; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
  [dir="rtl"] .flow__bar { transform-origin: right; }
}
@media (max-width: 40rem) {
  .flow { gap: var(--space-md); }
  .flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow.is-live .flow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); }
  .flow.is-live .flow__steps .flow__step:not(.is-x) .flow__d { display: none; }
  .tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); }
  .flow.is-live .flow__now { display: block; min-height: 3em; color: var(--color-ink-2); }
  .p-assess { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .qs { gap: var(--space-md); }
  .tasks .tag { display: none; }
  .flow__panels { padding: var(--space-md); }
  .p-need { padding-top: 0; }
  .p-need .bubble { font-size: var(--text-md); }
  .quote th, .quote td { padding-inline: var(--space-2xs); }
  .quote .m .effort { display: none; }
  .quote tfoot th { white-space: normal; }
  .quote .total .num { font-size: var(--text-2xl); }
  .build li { grid-template-columns: minmax(0, 1fr) 16px; }
  .build .meter { grid-column: 1 / -1; grid-row: 2; }
  .flow__note { padding: var(--space-sm) var(--space-md); }
  /* the price table restacks: each model a block, its four prices two by two, each with its own label */
  .ptable, .ptable tbody { display: block; min-width: 0; }
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ptable tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .ptable tbody th { grid-column: 1 / -1; padding: 0; border: 0; }
  .ptable td { display: grid; gap: var(--space-3xs); padding: 0; border: 0; text-align: start; font-size: var(--text-xl); }
  .ptable td::before { content: attr(data-label); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; font-stretch: 100%; color: var(--color-muted); }
  .seg { width: 100%; }
  .seg button { flex: 1 1 0; padding: 0 var(--space-xs); }
}

/* ---------- footer ---------- */
.footer { padding-block: var(--space-3xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__statement { max-width: 24ch; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; font-stretch: 78%; text-transform: uppercase; line-height: 1.15; }
:lang(zh) .footer__statement, :lang(ja) .footer__statement, :lang(ko) .footer__statement { max-width: 20em; line-height: 1.4; }
.footer__cols { display: grid; grid-template-columns: minmax(0, 6fr) repeat(2, minmax(0, 2fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-2xl); }
.footer__brand { display: grid; gap: var(--space-xs); align-content: start; }
.footer__cols h2 { margin-bottom: var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; font-stretch: 100%; text-transform: none; letter-spacing: 0; color: var(--color-muted); }
.footer__cols ul { display: grid; margin: 0; padding: 0; list-style: none; }
.footer__cols a { display: inline-flex; align-items: center; min-height: 36px; color: var(--color-ink-2); text-decoration: none; }
.footer__cols a:hover { color: var(--color-ink); text-decoration: underline; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.footer__legal a { color: var(--color-muted); }
.footer__legal a:hover { color: var(--color-ink); }

/* ---------- one reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- tablet ---------- */
@media (max-width: 64rem) {
  .nav__primary { display: none; }
  .menu { display: block; }
  .hangar-head, .stand__grid, .stand--flip .stand__grid, .method .head, .banner__grid, .head { grid-template-columns: minmax(0, 1fr); }
  .stand--flip .stand__text { order: 0; }
  .stand__grid { min-height: 0; gap: var(--space-2xl); padding-block: var(--space-3xl); }
  .index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .screen { margin-bottom: 0; }
  .voice { position: absolute; inset-inline: var(--space-sm); bottom: auto; top: calc(100% + var(--space-sm)); width: auto; }
  .stand:has(.screen) .stand__visual { padding-bottom: 13rem; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 40rem) {
  .nav__bar { gap: var(--space-xs); min-height: 64px; }
  .wordmark__ai { display: none; }
  .nav__tools .btn { display: none; }
  .pop__panel--grid { grid-template-columns: minmax(0, 1fr); min-width: 0; width: 15rem; max-height: 70svh; overflow-y: auto; }
  .chapter__body { padding-block: var(--space-4xl) var(--space-2xl); }
  .chapter__media::after, [dir="rtl"] .chapter__media::after, .backdrop::after, [dir="rtl"] .backdrop::after { background: linear-gradient(0deg, var(--color-paper) 0%, var(--color-shade) 45%, transparent 75%); }
  .backdrop > img { filter: brightness(0.42) saturate(0.9); }
  .chapter .actions .btn { flex: 1 1 auto; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .replay { font-size: var(--text-xs); min-height: 0; }
  .replay__log { padding: var(--space-md); gap: var(--space-sm); }
  .replay__log .l-prompt, .replay__log .l-say { font-size: var(--text-md); }
  .proposal { padding: var(--space-lg); }
  .proposal__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .diagram { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-lg); min-height: 0; padding: var(--space-lg); }
  .diagram__lines { display: none; }
  .diagram__core { justify-self: center; }
  .diagram__out { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seats { grid-template-columns: minmax(0, 1fr); }
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery [data-slot] { min-height: 0; aspect-ratio: 4 / 3; }
  .gallery figure:last-child [data-slot] { aspect-ratio: 3 / 4; }
  .contacts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}