/* ---- tokens.css ---- */
/* QiHome web tokens — docs/qihome-web-brand-system.md. Shared with the app's dark theme and the logo. */
:root {
  color-scheme: dark;

  /* surfaces: a home at night */
  --ground: #0b0a09;
  --room: #121110;
  --room-2: #191715;
  --line: rgba(243, 235, 226, .10);
  --line-mid: rgba(243, 235, 226, .16);
  --line-strong: rgba(243, 235, 226, .26);

  /* ink: the logo's line colour */
  --ink: #f3ebe2;
  --ink-2: #b4aba0;
  --ink-3: #7d756c;

  /* lamplight: something is on, here, now */
  --lamp: #ffb45a;
  --lamp-deep: #ff9f43;
  --lamp-core: #ffd27a;
  --on-lamp: #1a1206;
  --calm: #9fc7b6;
  --attention: #ff8a5b;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --t-display: clamp(2rem, 1.15rem + 4.4vw, 4.5rem);
  --t-title: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
  --t-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-label: .78rem;

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --gutter: clamp(20px, 4vw, 40px);
  --page: 1240px;
  --measure: 34em;

  /* radius */
  --r-plan: 2px; --r-control: 10px; --r-panel: 18px; --r-pill: 999px;

  /* motion — docs/qihome-website-motion-system.md */
  --ease-light: cubic-bezier(.2, .7, .2, 1);
  --ease-space: cubic-bezier(.65, 0, .35, 1);
  --d-light-in: 900ms; --d-light-out: 600ms; --d-state: 240ms; --d-space: 1100ms; --d-focus: 400ms; --d-line: 700ms; --d-draw: 1600ms;
  /* Interface motion (nav, drawers, buttons, toggles): crisp, under 300 ms, strong ease-out. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press: 160ms; --d-ui: 200ms; --d-sheet: 240ms;

  --nav-h: 60px;

  /* theme-dependent helpers (dark values) */
  --ink-rgb: 243 235 226;
  --ground-rgb: 11 10 9;
  --room-rgb: 18 17 16;
  --accent: #ffb45a;          /* interactive and text uses of the lamp */
  --accent-hover: #ffd27a;
  --accent-line: rgba(255, 180, 90, .5);
  --on-accent: #1a1206;
  --calm-line: rgba(159, 199, 182, .5);
  --floor: #171513;
  --floor-on: #1f1a15;
  --lamp-off: #3a332c;
  --code-bg: #0f0e0d;
  --scrim: rgba(0, 0, 0, .55);
}

/* Daylight: the same home with the lights low. Follows the system unless the visitor chose (data-theme). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #f3f0eb; --room: #ffffff; --room-2: #ebe6df;
    --ink: #1f1a16; --ink-2: #4c443d; --ink-3: #6b6259;
    --ink-rgb: 31 26 22; --ground-rgb: 243 240 235; --room-rgb: 255 255 255;
    --accent: #a5520e; --accent-hover: #8e460b; --accent-line: rgba(165, 82, 14, .45); --on-accent: #ffffff;
    --calm: #2f7a5c; --calm-line: rgba(47, 122, 92, .45); --attention: #c2410c;
    --floor: #fbf9f6; --floor-on: #fff3df; --lamp-off: #cfc6bb; --code-bg: #171513; --scrim: rgba(31, 26, 22, .35);
    --line: rgba(31, 26, 22, .10); --line-mid: rgba(31, 26, 22, .16); --line-strong: rgba(31, 26, 22, .28);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f3f0eb; --room: #ffffff; --room-2: #ebe6df;
  --ink: #1f1a16; --ink-2: #4c443d; --ink-3: #6b6259;
  --ink-rgb: 31 26 22; --ground-rgb: 243 240 235; --room-rgb: 255 255 255;
  --accent: #a5520e; --accent-hover: #8e460b; --accent-line: rgba(165, 82, 14, .45); --on-accent: #ffffff;
  --calm: #2f7a5c; --calm-line: rgba(47, 122, 92, .45); --attention: #c2410c;
  --floor: #fbf9f6; --floor-on: #fff3df; --lamp-off: #cfc6bb; --code-bg: #171513; --scrim: rgba(31, 26, 22, .35);
  --line: rgba(31, 26, 22, .10); --line-mid: rgba(31, 26, 22, .16); --line-strong: rgba(31, 26, 22, .28);
}

/* Code stays dark in both themes (readable syntax colours, like a terminal). */
.code {
  color-scheme: dark;
  --ink: #f3ebe2; --ink-2: #c9c0b5; --ink-3: #8a8178; --line: rgba(243, 235, 226, .10); --line-mid: rgba(243, 235, 226, .18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-light-in: 1ms; --d-light-out: 1ms; --d-state: 1ms; --d-space: 1ms; --d-focus: 1ms; --d-line: 1ms; --d-draw: 1ms; --d-sheet: 1ms; --d-ui: 1ms; }
  .plan .sensor .ring { animation: none !important; }
}

/* ---- base.css ---- */
/* Base: reset, type, links, focus. */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--font); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { line-break: strict; margin: 0; font-weight: 500; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: var(--accent); } }
ul, ol { margin: 0; padding: 0; }
code, pre, kbd { font-family: var(--mono); font-size: .92em; }
button { font: inherit; color: inherit; }
::selection { background: rgba(255, 180, 90, .32); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.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 { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: var(--r-control); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---- layout.css ---- */
/* Layout: page width, sections, grids. Mobile first. */
.wrap { width: min(var(--page), 100% - 2 * var(--gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); margin-inline: auto; }
.section { padding-block: var(--s8); position: relative; }
.section + .section { border-top: 1px solid var(--line); }
.section.flush { border-top: 0; }
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }
.grid { display: grid; gap: var(--s5); }
.split { display: grid; gap: var(--s6); }
.measure { max-width: var(--measure); }

@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .section { padding-block: var(--s9); }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
  .split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
main { display: block; }
/* A "picture left, words right" block keeps the picture first in the source for the desktop layout; on a phone the
   words come first, then the picture. */
@media (max-width: 959px) { .split.rev > :first-child { order: 2; } }

/* ---- components.css ---- */
/* Components shared by every page — docs/qihome-web-brand-system.md §6. */

/* ---------- navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgb(var(--ground-rgb) / .78); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in { height: var(--nav-h); display: flex; align-items: center; gap: var(--s5); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; letter-spacing: -.01em; }
.brand img { width: 26px; height: 26px; }
.nav-links { display: none; gap: 4px; margin-left: auto; list-style: none; }
.nav-links a { display: block; padding: 8px 12px; border-radius: var(--r-control); text-decoration: none; color: var(--ink-2); font-size: var(--t-small); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); background: var(--room-2); } }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { content: ""; display: block; height: 1px; margin-top: 3px; background: var(--accent); opacity: .8; }
.nav-actions { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.lang { min-width: 44px; height: 36px; padding: 0 10px; border: 1px solid var(--line-mid); border-radius: var(--r-pill); background: none; color: var(--ink-2); font: 500 var(--t-label)/1 var(--mono); cursor: pointer; }
.theme { min-width: 36px; width: 36px; padding: 0; display: grid; place-items: center; }
.theme, .menu-btn { color: var(--ink); border-color: var(--line-strong); } /* icons, not labels: full ink so they read on the dark bar */
@media (hover: hover) and (pointer: fine) { .lang:hover { color: var(--ink); border-color: var(--line-strong); } }
.menu-btn { width: 36px; min-width: 36px; padding: 0; display: grid; place-items: center; }
.nav .btn { display: none; }
@media (min-width: 980px) {
  .nav-links { display: flex; }
  .nav-actions { margin-left: var(--s3); }
  .menu-btn { display: none; }
  .nav .btn { display: inline-flex; }
}

/* mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.sheet[data-open] { display: block; }
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); }
.sheet-panel {
  position: absolute; left: 0; right: 0; top: 0; background: var(--room); border-bottom: 1px solid var(--line-mid);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom, 0px));
  border-radius: 0 0 var(--r-panel) var(--r-panel); max-height: 100dvh; overflow: auto; overscroll-behavior: contain;
  animation: sheet-in var(--d-sheet) var(--ease-drawer);
}
@keyframes sheet-in { from { transform: translateY(-12px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.sheet-links { list-style: none; margin-top: var(--s3); }
.sheet-links a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; text-decoration: none; font-size: 1.25rem; border-bottom: 1px solid var(--line); }
.sheet-links a::after { content: "→"; color: var(--ink-3); font-size: 1rem; }
.sheet .btn { width: 100%; margin-top: var(--s5); justify-content: center; }
.close-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; cursor: pointer; font-size: 26px; line-height: 1; color: var(--ink-2); }
.sheet-panel:focus { outline: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line-mid); background: transparent; color: var(--ink); text-decoration: none; font-size: var(--t-small); font-weight: 500;
  transition: background var(--d-state), border-color var(--d-state), color var(--d-state); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { border-color: var(--line-strong); background: var(--room-2); } }
.btn-lamp { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .btn-lamp:hover { background: var(--accent-hover); border-color: var(--accent-hover); } }
.btn-link { border: 0; padding: 0; min-height: 0; background: none; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .btn-link:hover { background: none; color: var(--ink); } }
.btn-link::after { content: "→"; transition: transform var(--d-state); }
.btn-link.ext::after { content: "↗"; } /* leaves the site */
@media (hover: hover) and (pointer: fine) { .btn-link:hover::after { transform: translateX(3px); } }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ---------- section header ---------- */
.label { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.label-lamp { color: var(--accent); }
.display { font-size: var(--t-display); letter-spacing: -.03em; line-height: 1.06; word-break: keep-all; overflow-wrap: anywhere; }
.title { font-size: var(--t-title); }
.lead { font-size: var(--t-lead); color: var(--ink-2); line-height: 1.55; }
.body-2 { color: var(--ink-2); }
.small { font-size: var(--t-small); color: var(--ink-2); }
.head { display: grid; gap: var(--s4); max-width: 40em; }
.head .lead { max-width: var(--measure); }

/* ---------- panels and plan surfaces ---------- */
.panel { background: var(--room); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s5); }
.panel-quiet { border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s5); }
.hair { height: 1px; background: var(--line); border: 0; margin: var(--s6) 0; }

/* ---------- state chips (measured labels) ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--line-mid); border-radius: var(--r-pill); font: 500 var(--t-label)/1 var(--mono); letter-spacing: .03em; color: var(--ink-2); background: rgb(var(--room-rgb) / .7); white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.chip.on i { background: var(--lamp); box-shadow: 0 0 10px 1px rgba(255, 180, 90, .55); }
.chip.ok i { background: var(--calm); }
.chip.look i { background: var(--attention); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- status badges ---------- */
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font: 500 .72rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line-mid); color: var(--ink-2); white-space: nowrap; }
.badge-now { border-color: var(--calm-line); color: var(--calm); }
.badge-preview { border-color: var(--accent-line); color: var(--accent); }
.badge-later { border-style: dashed; color: var(--ink-3); }

/* ---------- rule sentence (automations in words) ---------- */
.rule { display: grid; gap: 2px; font-size: var(--t-lead); line-height: 1.5; }
.rule span { display: block; padding: 10px 0 10px 16px; border-left: 1px solid var(--line-mid); color: var(--ink-2); transition: color var(--d-state), border-color var(--d-state); }
.rule b { font-weight: 500; color: var(--ink-3); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; margin-right: 10px; }
.rule span.lit { color: var(--ink); border-left-color: var(--accent); }

/* ---------- ask (the assistant as an interface to the home) ---------- */
.asks { display: grid; gap: var(--s3); }
.ask { display: grid; gap: var(--s2); }
.ask q { quotes: none; justify-self: start; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--room-2); border: 1px solid var(--line); }
.ask p { color: var(--ink-2); font-size: var(--t-small); padding-left: 14px; border-left: 1px solid var(--accent); }

/* ---------- capability rows (official plugins, systems) ---------- */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s3) var(--s4); align-items: start; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.rows h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.rows p { color: var(--ink-2); font-size: var(--t-small); grid-column: 2 / -1; }
.rows .badge { grid-column: 3; grid-row: 1; }
.ico { width: 22px; height: 22px; stroke: var(--ink-2); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }

/* ---------- facts (scoped numbers) ---------- */
.facts { display: grid; gap: var(--s4); }
.fact { border-top: 1px solid var(--line-mid); padding-top: var(--s4); }
.fact b { display: block; font-weight: 500; font-size: 1.375rem; letter-spacing: -.01em; }
.fact span { color: var(--ink-2); font-size: var(--t-small); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- code ---------- */
.code { position: relative; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 10px 16px; border-bottom: 1px solid var(--line); font: 500 var(--t-label)/1 var(--mono); color: var(--ink-3); }
.code pre { margin: 0; padding: 16px; overflow-x: auto; font-size: .82rem; line-height: 1.65; color: var(--ink-2); -webkit-overflow-scrolling: touch; }
.code .k { color: #e8c38e; } .code .s { color: #b9d3a8; } .code .c { color: var(--ink-3); } .code .f { color: var(--ink); }

/* ---------- light pool (the signature) ---------- */
.pool { position: absolute; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 122, .55), rgba(255, 180, 90, .18) 55%, rgba(255, 159, 67, 0)); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: var(--s8) 0 calc(var(--s7) + env(safe-area-inset-bottom, 0px)); color: var(--ink-2); font-size: var(--t-small); }
.footer-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer h2 { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--ink); } }
.footer-base { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; color: var(--ink-3); }
.footer-brand { grid-column: 1 / -1; display: grid; gap: var(--s3); max-width: 22em; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); } .footer-brand { grid-column: auto; } }

/* ---------- page hero (inner pages) ---------- */
.page-hero { position: relative; padding-block: var(--s8) var(--s7); overflow: hidden; }
.page-hero .pool { width: 520px; height: 520px; right: -160px; top: -200px; opacity: .55; }
@media (min-width: 960px) { .page-hero { padding-block: var(--s9) var(--s8); } }

/* ---------- reveal (progressive: content is visible without JS) ---------- */
.reveal-ready [data-reveal]:not(.in) { opacity: 0; transform: translateY(10px); } .reveal-ready [data-reveal] { transition: opacity 600ms var(--ease-light), transform 600ms var(--ease-light); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* ---------- real product media (screenshots, clips) ---------- */
.shot { position: relative; margin: 0; }
.shot-frame { position: relative; border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--line-mid); background: var(--room); box-shadow: 0 1px 0 rgb(var(--ink-rgb) / .04) inset, 0 24px 60px -32px rgb(0 0 0 / .6); }
.shot-frame img, .shot-frame video { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; display: block; background: var(--room); }
.shot figcaption { margin-top: var(--s3); font-size: .875rem; color: var(--ink-3); display: flex; gap: 8px; align-items: baseline; }
.shot figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }
/* the light a lit screen casts on the surface below it */
.shot-lit::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -36px; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 180, 90, .16), rgba(255, 180, 90, 0)); pointer-events: none; z-index: -1; }
.clip-failed video { display: none; }

/* ---------- interface motion (assets/js-6786cff7d9/motion.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* English pages wait (briefly) for their translation; a safety timer shows them anyway */
  .i18n-wait main, .i18n-wait [data-footer] { opacity: 0; animation: qi-show 1ms 1.6s forwards; }
  main, [data-footer] { transition: opacity 260ms var(--ease-light); }
  .leaving main, .leaving [data-footer], .leaving .nav-links { opacity: 0; transition: opacity 180ms var(--ease-light); }
  .theme-fade, .theme-fade * { transition: background-color var(--d-ui) ease, color var(--d-ui) ease, border-color var(--d-ui) ease, fill var(--d-ui) ease, stroke var(--d-ui) ease !important; }
  .sheet-scrim { animation: qi-fade-in var(--d-focus) var(--ease-light); }
  .sheet[data-closing] .sheet-panel { animation: qi-sheet-out 220ms var(--ease-light) forwards; }
  .sheet[data-closing] .sheet-scrim { animation: qi-fade-out 220ms var(--ease-light) forwards; }
}
@keyframes qi-show { to { opacity: 1; } }
@keyframes qi-fade-in { from { opacity: 0; } }
@keyframes qi-fade-out { to { opacity: 0; } }
@keyframes qi-sheet-out { to { transform: translateY(-10px); opacity: 0; } }
/* theme switch (same-document): the new theme is revealed by a growing circle, nothing else moves */
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt-theme::view-transition-group(*) { animation: none; }
html.vt-theme .nav, html.vt-theme .subnav, html.vt-theme .subnav a { view-transition-name: none !important; } /* the whole page follows the circle */
/* moving between pages (cross-document): the bar stays, the page settles in, the current tab slides to its place */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html:not(.vt-theme)::view-transition-old(root) { animation: qi-vt-out 110ms var(--ease-out) both; } /* fade through: the old words leave before the new ones arrive, so they never overlap */
  html:not(.vt-theme)::view-transition-new(root) { animation: qi-vt-in 220ms 90ms var(--ease-light) both; }
  html:not(.vt-theme)::view-transition-old(qi-subnav), html:not(.vt-theme)::view-transition-new(qi-subnav) { animation-duration: 160ms; }
  html:not(.vt-theme)::view-transition-group(qi-tab) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
}
@keyframes qi-vt-out { to { opacity: 0; } }
@keyframes qi-vt-in { from { opacity: 0; transform: translateY(4px); } }
.nav { view-transition-name: qi-bar; }
.subnav a[aria-current="page"] { view-transition-name: qi-tab; }
.subnav:not(.stepnav) { view-transition-name: qi-subnav; }
/* anchors land below the sticky bars */
main [id] { scroll-margin-top: calc(var(--nav-h) + 72px); }

/* Touch: press feedback that is felt (no grey tap flash, see base.css), no label selection on long-press. */
.btn, .lang, .close-btn, .copy, .more > summary, .subnav a, details > summary { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.btn { transition-property: background-color, border-color, color, box-shadow, transform; }
.btn:active, .lang:active, .close-btn:active, .copy:active { transform: scale(0.97); transition: transform var(--d-press) var(--ease-out); }
.subnav a:active, .more > summary:active, details > summary:active { background: var(--room-2); }
@media (prefers-reduced-motion: reduce) { .btn:active, .lang:active, .close-btn:active, .copy:active { transform: none; } }
.copy { transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), filter 120ms var(--ease-out); }
.copy.swap { opacity: 0; transform: scale(0.9); filter: blur(2px); }
@media (prefers-reduced-motion: reduce) { .copy.swap { transform: none; filter: none; } }

/* ---- stage.css ---- */
/* The plan stage: an isometric line drawing of one home; light means something is on. */
.stage { position: relative; width: 100%; aspect-ratio: 760 / 520; max-width: 100%; }
.stage svg { width: 100%; height: 100%; overflow: visible; }
.plan .view { transition: transform var(--d-space) var(--ease-space); transform-origin: 0 0; }

/* floors and walls */
.plan .floor { fill: var(--floor); stroke: none; transition: fill var(--d-light-in) var(--ease-light); }
.plan .floor.on { fill: var(--floor-on); }
.plan .face { fill: rgb(var(--ink-rgb) / .05); stroke: none; }
.plan .wall { fill: none; stroke: rgb(var(--ink-rgb) / .78); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--d-draw) var(--ease-space); }
.plan.drawn .wall { stroke-dashoffset: 0; }
.no-js .plan .wall { stroke-dashoffset: 0; }

/* light pools */
.plan .lp { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.72); transition: opacity var(--d-light-out) var(--ease-light), transform var(--d-light-out) var(--ease-light); }
.plan .lp[data-room="bath"].on { opacity: 1; filter: brightness(1.25); }
.plan .lp.on { opacity: 1; transform: none; transition-duration: var(--d-light-in); }
.plan .lamp { fill: var(--lamp-off); transition: fill var(--d-light-in) var(--ease-light); }
.plan .lamp.on { fill: var(--lamp-core); }

/* sensors and the person (presence) */
.plan .sensor circle { fill: var(--ink-3); }
.plan .sensor .ring { fill: none; stroke: var(--lamp); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.plan.presence .sensor[data-id="bath-presence"] circle:not(.ring) { fill: var(--lamp); }
.plan[data-step="auto"].presence .sensor[data-id="bath-presence"] .ring { animation: ping 1200ms var(--ease-light) 1; }
@keyframes ping { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
.plan .person { opacity: 0; transition: opacity var(--d-state); }
.plan .person ellipse { fill: rgba(255, 180, 90, .14); }
.plan .person circle, .plan .person path { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.plan.presence .person { opacity: 1; }

/* labels: room names, measured sizes */
.plan .labels, .plan .live, .plan .systems, .plan .cover { opacity: 0; transition: opacity var(--d-focus) var(--ease-light); }
.plan .rn { font: 500 12.5px var(--font); fill: var(--ink-2); text-anchor: middle; letter-spacing: .02em; }
.plan .rm { font: 500 9.5px var(--mono); fill: var(--ink-3); text-anchor: middle; letter-spacing: .04em; opacity: 0; transition: opacity var(--d-focus); }
.plan[data-step="space"] .labels, .plan[data-step="space"] .rm { opacity: 1; }
.plan[data-step="live"] .labels, .plan[data-step="one"] .labels, .plan[data-step="ask"] .labels, .plan[data-step="auto"] .labels, .plan[data-step="systems"] .labels, .plan[data-step="plugins"] .labels { opacity: 1; }

/* live state chips */
.plan .lv rect { fill: rgb(var(--room-rgb) / .9); stroke: rgb(var(--ink-rgb) / .2); stroke-width: .8; }
.plan .lv circle { fill: var(--ink-3); }
.plan .lv[data-room="bath"] circle, .plan .lv[data-room="living"] circle { fill: var(--lamp); }
.plan .lv[data-room="study"] circle { fill: var(--calm); }
.plan .lv text { font: 500 10px var(--mono); fill: var(--ink-2); letter-spacing: .03em; }
.plan[data-step="live"] .live, .plan[data-step="one"] .live { opacity: 1; }

/* systems around the home */
.plan .sys rect { fill: var(--room); stroke: rgb(var(--ink-rgb) / .3); stroke-width: .9; }
.plan .sys text { font: 500 9.5px var(--font); fill: var(--ink); text-anchor: middle; }
.plan .sys .link { fill: none; stroke: rgba(255, 180, 90, .55); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--d-line) var(--ease-light) 200ms; }
.plan[data-step="systems"] .systems, .plan[data-step="one"] .systems { opacity: 1; }
.plan[data-step="systems"] .link, .plan[data-step="one"] .link { stroke-dashoffset: 0; }

/* plugin overlay: sensor coverage (what Spatial+ draws on the plan) */
.plan .cover circle { fill: rgba(159, 199, 182, .07); stroke: rgba(159, 199, 182, .45); stroke-width: .03; stroke-dasharray: .12 .1; }
.plan[data-step="plugins"] .cover { opacity: 1; }

/* focus one room (ask) */
.plan .floor, .plan .rl { transition: opacity var(--d-focus), fill var(--d-light-in) var(--ease-light); }
.plan.focus-bath .floor:not([data-room="bath"]), .plan.focus-bath .rl:not([data-room="bath"]), .plan.focus-bath .lp:not([data-room="bath"]) { opacity: .35; }

/* story layout: steps scroll normally, the stage follows (sticky); scroll changes state, never position */
.story { position: relative; }
.story-stage { overflow: hidden; position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 2; height: 36vh; height: 36svh; display: grid; place-items: center; background: linear-gradient(var(--ground) 82%, rgb(var(--ground-rgb) / 0)); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.story-stage .stage { width: min(100%, 36svh * 760 / 520); height: auto; }
.story-steps { position: relative; z-index: 1; }
.step { min-height: 64svh; padding-block: var(--s6) var(--s8); display: grid; align-content: start; gap: var(--s4); }
.step:first-child { padding-top: var(--s3); }
.step .title { max-width: 16em; }
.step p { max-width: var(--measure); }
.step-hero { min-height: auto; padding-bottom: var(--s8); }

@media (min-width: 960px) {
  .story-stage { overflow: hidden; }
  .story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); }
  .story-stage { order: 2; height: calc(100svh - var(--nav-h)); margin: 0; padding: 0; background: none; }
  .story-stage .stage { height: auto; width: 100%; }
  .story-steps { order: 1; }
  .step { min-height: calc(100svh - var(--nav-h)); align-content: center; padding-block: var(--s8); }
  .step:first-child { padding-top: var(--s8); }
}
@media (max-width: 959px) and (max-height: 700px) { .story-stage { height: 32svh; } }
@media (max-width: 959px) {
  .stage svg { overflow: hidden; }
  .step { min-height: 58svh; padding-block: var(--s5) var(--s7); }
  .step-hero { min-height: auto; padding-top: var(--s4); }
}

/* daylight: the lines carry the drawing; light pools stay warm */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .plan .cover circle { fill: rgba(47, 122, 92, .06); stroke: rgba(47, 122, 92, .5); } }
:root[data-theme="light"] .plan .cover circle { fill: rgba(47, 122, 92, .06); stroke: rgba(47, 122, 92, .5); }

/* ---- pages.css ---- */
/* Page-specific pieces. Home first; other pages add their sections below. */

/* home: the story's hero step sits a little lower on large screens */
.step-hero .display { max-width: 9em; }
.step-hero .lead { max-width: 30em; }
.step { transition: opacity var(--d-focus); }
@media (min-width: 960px) { .js .story-steps .step:not(.active) { opacity: .42; } }

/* home: end call to action with the one large light pool */
.cta-end { overflow: hidden; }
.cta-end .pool { width: 640px; height: 640px; left: 50%; top: 40%; transform: translate(-50%, -50%); opacity: .42; }
.cta-end .head { justify-items: start; }

/* home: All in AI */
.ai-layers { display: grid; gap: var(--s4); }
.ai-layer { border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s5); display: grid; gap: var(--s3); background: var(--room); }
.ai-layer h3 { font-size: 1.25rem; }
.ai-layer:last-child { position: relative; overflow: hidden; }
.ai-layer:last-child::before { content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 122, .22), rgba(255, 180, 90, 0)); pointer-events: none; }
.ai-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ai-grid li { padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.ai-grid h3 { font-size: var(--t-small); font-weight: 500; color: var(--ink); letter-spacing: 0; }
.ai-grid q { quotes: "“" "”"; color: var(--ink-3); font-size: .875rem; }
@media (min-width: 760px) { .ai-layers { grid-template-columns: 1fr 1fr; } .ai-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ai-grid li { padding-right: var(--s5); } }

/* rows without icons, in two columns on wide screens */
.rows.two-col li { grid-template-columns: minmax(0, 1fr); }
.rows.two-col li > span { display: none; }
.rows.two-col p { grid-column: 1; }
@media (min-width: 760px) { .rows.two-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s7); } }
.models { align-content: start; }

/* checks (network demo) */
.checks { list-style: none; display: grid; gap: 10px; font-size: var(--t-small); }
.checks li { display: flex; gap: 10px; align-items: center; }
.checks li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--calm); flex: none; }
.checks li.look::before { background: var(--attention); }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-panel); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 560px; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--room); }
.table td:first-child { color: var(--ink); white-space: nowrap; }
.table td { color: var(--ink-2); }
.table tr:last-child td { border-bottom: 0; }

/* plugins */
.plugin-groups { display: grid; gap: var(--s6); }
.plugin-groups h3 { margin-bottom: var(--s3); }
.plist { list-style: none; border-top: 1px solid var(--line); }
.plist li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 52px; border-bottom: 1px solid var(--line); }
.plist b { font-weight: 500; }
@media (min-width: 760px) { .plugin-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* developers */
.dev-hero .split { align-items: center; }
.dev-hero .code pre { max-height: 420px; }
.doc-index { display: grid; gap: var(--s6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-index h3 { margin-bottom: var(--s3); }
.doc-index ul { list-style: none; display: grid; gap: 10px; font-size: var(--t-small); }
.doc-index a { text-decoration: none; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .doc-index a:hover { color: var(--ink); } }
@media (min-width: 960px) { .doc-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* developer docs: readability first, brand restrained */
.docs { display: grid; gap: var(--s6); padding-block: var(--s6) var(--s8); }
.docs-side { display: grid; gap: var(--s3); align-content: start; }
.docs-back { font-size: var(--t-small); color: var(--ink-2); text-decoration: none; }
.docs-filter { width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-control); border: 1px solid var(--line-mid); background: var(--room); color: var(--ink); font: inherit; font-size: max(16px, var(--t-small)); }
.docs-nav { list-style: none; display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.docs-nav a { display: block; white-space: nowrap; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-size: .875rem; }
@media (hover: hover) and (pointer: fine) { .docs-nav a:hover { background: var(--room-2); color: var(--ink); } }
.docs-nav a[aria-current="page"] { background: var(--room-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.docs-toc { display: none; }
.doc { min-width: 0; max-width: 46em; font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.doc h1 { font-size: var(--t-title); color: var(--ink); margin-bottom: var(--s4); }
.doc h2 { font-size: 1.4rem; color: var(--ink); margin: var(--s7) 0 var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.doc h3 { font-size: 1.1rem; color: var(--ink); margin: var(--s5) 0 var(--s2); }
.doc h4 { font-size: 1rem; color: var(--ink); margin: var(--s4) 0 var(--s2); }
.doc p, .doc ul, .doc ol, .doc .code, .doc .table-wrap, .doc blockquote { margin: 0 0 var(--s4); }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li + li { margin-top: 4px; }
.doc a { color: var(--ink); text-decoration-color: var(--accent-line); }
.doc :not(pre) > code { background: var(--room-2); border: 1px solid var(--line); border-radius: 5px; padding: .08em .35em; color: var(--ink); font-size: .86em; }
.doc blockquote { border-left: 2px solid var(--accent); padding: 10px 16px; background: var(--room); border-radius: 0 var(--r-control) var(--r-control) 0; color: var(--ink); }
.doc .table { min-width: 0; }
.doc .table td:first-child { white-space: normal; }
.doc-path { color: var(--ink); font-family: var(--mono); font-size: .9em; }
.copy { border: 1px solid var(--line-mid); background: none; color: var(--ink-3); border-radius: 6px; padding: 3px 8px; font: 500 .7rem var(--mono); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .copy:hover { color: var(--ink); } }
@media (min-width: 960px) {
  .docs { grid-template-columns: 230px minmax(0, 1fr); gap: var(--s7); }
  .docs-side { position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100dvh - var(--nav-h) - 48px); overflow: auto; }
  .docs-nav { flex-direction: column; overflow: visible; }
  .docs-nav a { white-space: normal; }
}
@media (min-width: 1240px) {
  .docs { grid-template-columns: 230px minmax(0, 1fr) 190px; }
  .docs-toc { display: block; position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
  .docs-toc ul { list-style: none; display: grid; gap: 6px; margin-top: var(--s3); font-size: .82rem; }
  .docs-toc a { color: var(--ink-3); text-decoration: none; } .docs-toc a:hover { color: var(--ink); }
}

/* official plugins catalogue: a quiet list, not a store grid */
.off { display: grid; gap: var(--s8); padding-bottom: var(--s9); }
.off-group h2 { margin-bottom: var(--s4); }
.off-list { list-style: none; border-top: 1px solid var(--line); }
.off-list li { display: grid; gap: var(--s2); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.off-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.off-head h3 { font-size: 1.125rem; }
.off-list p { color: var(--ink-2); font-size: var(--t-small); max-width: 46em; }
.off-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s1) 0 0; font-size: .82rem; }
.off-meta div { display: flex; gap: 6px; }
.off-meta dt { color: var(--ink-3); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; padding-top: 1px; }
.off-meta dd { margin: 0; color: var(--ink-2); }
@media (min-width: 960px) { .off-list li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s7); align-items: start; } .off-list li p, .off-list li .off-meta { grid-column: 2; } .off-head { grid-row: 1 / span 2; align-self: start; flex-direction: column; align-items: flex-start; } }

/* get started */
.avail td:nth-child(2) { white-space: nowrap; }
.paths { display: grid; gap: var(--s5); }
.path { border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s5); display: grid; gap: var(--s3); align-content: start; background: var(--room); }
.path h3 { font-size: 1.25rem; }
.steps { padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-2); font-size: var(--t-small); }
.dl { list-style: none; border-top: 1px solid var(--line); }
.dl li { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.dl li > div { display: grid; gap: 2px; min-width: 0; }
.dl b { font-weight: 500; }
.dl span { font-size: .85rem; color: var(--ink-3); }
.dl .btn { flex: none; min-height: 38px; }
@media (min-width: 960px) { .paths { grid-template-columns: 1fr 1fr; } }
/* QiHome Box: only the light, no hardware render */
.box { align-items: center; }
.box-light { display: grid; place-items: center; aspect-ratio: 1.6; max-width: 100%; border-radius: var(--r-panel); background: radial-gradient(ellipse at 50% 70%, rgba(255, 180, 90, .10), transparent 60%); }
.ring { width: min(48%, 220px); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 180, 90, .55); box-shadow: 0 0 40px 2px rgba(255, 180, 90, .22), inset 0 0 26px rgba(255, 180, 90, .18); }

/* 1.0: timeline and notes */
.timeline { list-style: none; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.tl-n { font: 500 var(--t-label)/1.8 var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.timeline li:nth-child(1) .tl-n { color: var(--accent); }
.timeline h3 { font-size: 1.2rem; margin-bottom: 6px; }
.timeline p { color: var(--ink-2); max-width: 40em; }
.notes { display: grid; gap: var(--s6) var(--s7); }
.notes h3 { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.notes ul { list-style: none; display: grid; gap: 10px; }
.notes li { color: var(--ink-2); font-size: var(--t-small); padding-left: 14px; position: relative; }
.notes li::before { content: ""; position: absolute; left: 0; top: .7em; width: 5px; height: 1px; background: var(--ink-3); }
@media (min-width: 760px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* legal: long-form reading */
.legal { display: grid; gap: var(--s6); padding-block: var(--s8) var(--s9); max-width: 46em; }
.legal-head { display: grid; gap: var(--s3); }
.legal-toc { border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s5); margin: var(--s5) 0 var(--s6); }
.legal-toc ol { margin-top: var(--s3); padding-left: 1.4em; display: grid; gap: 6px; font-size: var(--t-small); }
.legal-body section h2 { font-size: 1.25rem; }

/* 404: a door left ajar, light coming through */
.nf { min-height: calc(100svh - var(--nav-h) - 200px); display: grid; align-items: center; }
.nf-door { position: absolute; right: 8%; top: 50%; width: 120px; height: 220px; transform: translateY(-50%); border: 1.5px solid var(--line-strong); border-radius: 3px; display: none; }
.nf-door::after { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 22px; background: linear-gradient(90deg, rgba(255, 210, 122, .75), rgba(255, 180, 90, .05)); box-shadow: 0 0 60px 10px rgba(255, 180, 90, .2); }
@media (min-width: 760px) { .nf-door { display: block; } }
.step-media { margin-top: var(--s2); max-width: 34em; }
.real .shot { max-width: 1100px; }

/* tables become stacked rows on phones (no sideways scrolling for the availability list) */
@media (max-width: 640px) {
  .avail { min-width: 0; }
  .avail thead { display: none; }
  .avail tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .avail tr:last-child { border-bottom: 0; }
  .avail td { padding: 0; border: 0; }
  .avail td:nth-child(3) { grid-column: 1 / -1; font-size: .875rem; }
}
.page-hero + .section.flush { padding-top: 0; }

/* ---------- product depth: secondary nav, workflows, drawers, explore, limits ---------- */
.subnav { border-bottom: 1px solid var(--line); }
.subnav ul { list-style: none; display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; padding: var(--s2) 0; }
/* The end fade is an overlay, not a mask: iOS Safari won't let a finger scroll a masked scroller. */
.subnav ul { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
@media (max-width: 899px) {
  .subnav .wrap { position: relative; }
  .subnav .wrap::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 36px; pointer-events: none; background: linear-gradient(90deg, rgb(var(--ground-rgb) / 0), rgb(var(--ground-rgb) / .95)); }
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); font: 500 var(--t-label)/1 var(--mono); letter-spacing: .03em; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { color: var(--ink); background: rgb(var(--room-rgb) / .8); } }
.subnav a[aria-current="page"] { color: var(--accent); background: rgb(var(--room-rgb) / .9); box-shadow: inset 0 0 0 1px var(--accent-line); }

.flow { list-style: none; counter-reset: flow; display: grid; gap: var(--s2); }
.flow li { counter-increment: flow; position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); background: rgb(var(--room-rgb) / .55); }
.flow li::before { content: counter(flow, decimal-leading-zero); font: 500 var(--t-label)/1.9 var(--mono); color: var(--ink-3); }
.flow li b { display: block; font-weight: 500; font-size: 1rem; }
.flow li span { color: var(--ink-2); font-size: var(--t-small); }
.flow li.lit { border-color: var(--accent-line); }
.flow li.lit::before { color: var(--accent); }
@media (min-width: 980px) { .flow.h { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .flow.h li { grid-template-columns: minmax(0, 1fr); } }

.more { border-top: 1px solid var(--line); }
.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) 0; font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; font-size: 1.1rem; color: var(--ink-3); transition: transform var(--d-ui) var(--ease-out); }
.more[open] > summary::after { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .more > summary:hover { color: var(--ink); } }
.more > div { padding-bottom: var(--s5); color: var(--ink-2); font-size: var(--t-small); display: grid; gap: var(--s3); max-width: 46em; }
.more ul { list-style: none; display: grid; gap: 8px; }
.more li { padding-left: 14px; position: relative; }
.more li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 1px; background: var(--ink-3); }
.more code { font: .86em var(--mono); color: var(--ink); }

.notyet { border: 1px dashed var(--line-mid); border-radius: var(--r-control); padding: var(--s4) var(--s5); display: grid; gap: var(--s2); }
.notyet h3 { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.notyet ul { list-style: none; display: grid; gap: 6px; color: var(--ink-2); font-size: var(--t-small); }
.notyet li { padding-left: 14px; position: relative; }
.notyet li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }

.explore { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .explore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .explore { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-panel); background: rgb(var(--room-rgb) / .5); }
.ex h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
.ex h2 a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ex h2 a:hover { color: var(--accent); } }
.ex > p { color: var(--ink-2); font-size: var(--t-small); }
.ex ul { list-style: none; display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: var(--s3); }
.ex li { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-small); color: var(--ink-2); }
.ex li .badge { height: 20px; font-size: .64rem; padding: 0 8px; flex: none; }

.outcomes { list-style: none; display: grid; gap: var(--s2); }
.outcomes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s3); align-items: baseline; font-size: var(--t-small); color: var(--ink-2); }
.outcomes li i { font-style: normal; font: 600 .95rem/1 var(--mono); text-align: center; }
.outcomes .ok i { color: var(--calm); } .outcomes .sent i { color: var(--ink-3); } .outcomes .warn i { color: var(--attention); } .outcomes .no i { color: var(--ink-3); }
.outcomes b { color: var(--ink); font-weight: 500; }

.deep { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .deep { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; } }
.tag-line { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.off-list details.more { margin-top: var(--s3); }
.off-list details.more > summary { padding: var(--s3) 0; }

/* ---------- platforms: real client surfaces inside the home's light ---------- */
.windows { position: relative; display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; padding-top: var(--s6); }
.windows::before { content: ""; position: absolute; inset: 8% 10% 0; background: radial-gradient(closest-side, rgba(255, 180, 90, .16), transparent 70%); pointer-events: none; }
.win { position: relative; display: grid; gap: var(--s2); justify-items: center; margin: 0; }
.win figcaption { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-3); text-align: center; }
.win img.ui { width: 100%; height: auto; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .35)); }
.win-web { grid-column: 1 / -1; width: 100%; }
.win-web .shot-frame { width: 100%; }
.windows .win-phone { max-width: 260px; justify-self: center; }
@media (min-width: 900px) {
  .windows { grid-template-columns: minmax(0, 5fr) minmax(0, 2.2fr) minmax(0, 6fr); gap: var(--s6); }
  .win-web { grid-column: auto; }
  .windows .win-phone { max-width: 240px; }
}
.pf-note { text-align: center; margin-top: var(--s5); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.pair .win-phone { max-width: 240px; justify-self: center; }
.mx td.y { color: var(--ink); }
.mx td.p { color: var(--ink-2); }
.mx td { white-space: nowrap; font-size: var(--t-small); }
.mx td:first-child { white-space: normal; color: var(--ink-2); min-width: 8.5em; } /* the row label keeps a readable width; the table scrolls sideways instead */
.dl { margin-top: var(--s4); }
.windows-home { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; padding-top: var(--s4); }
.windows-home .win-phone { max-width: 200px; }
@media (min-width: 900px) { .windows-home { grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) minmax(0, 1.3fr); max-width: 980px; margin-inline: auto; } }
@media (min-width: 1100px) { .explore.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.path-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.path-head .badge { max-width: 100%; white-space: normal; height: auto; min-height: 24px; padding-block: 4px; line-height: 1.3; }
.path, .path > *, .more > *, .more > div > * { min-width: 0; }
.more > div { grid-template-columns: minmax(0, 1fr); } /* grid items may shrink below their content: a long line inside a drawer wraps instead of widening the card */
.path .dl { margin-top: 0; }
.path .more { margin-top: calc(-1 * var(--s1)); }
.path .actions { margin-top: var(--s1); }
.others { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.others .win img.ui { max-width: 150px; margin-inline: auto; display: block; }
@media (min-width: 900px) { .others { grid-template-columns: 0.6fr 1fr 1fr 1fr; } }
@media (min-width: 960px) {
  .paths.apps #apple { grid-column: 1 / -1; }
  .paths.apps #apple .dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s5); }
}
.faqs { display: grid; gap: var(--s6); }
@media (min-width: 1100px) { .faqs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); align-items: start; } }
.faq { display: grid; }
.faq > h3 { margin-bottom: var(--s2); }
.faq .more > summary { text-transform: none; letter-spacing: 0; font: 500 var(--t-small)/1.45 var(--font); color: var(--ink); }
#edge { margin-top: var(--s5); }
/* steps inside a drawer: the drawer's list bullet must not replace the step number (it collapsed the text column) */
.more .flow li { padding: var(--s3) var(--s4); }
.more .flow li::before { content: counter(flow, decimal-leading-zero); position: static; width: auto; height: auto; background: none; top: auto; }

/* drawers: the + turns as the drawer moves, not after it */
.more > summary::after { transition: transform 260ms var(--ease-light), color 200ms; }
.more[data-anim="closing"] > summary::after { transform: none; }
.more > summary { transition: color 200ms; }
/* step navigation: sticks under the bar on long pages and lights the current step */
.subnav { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 40; background: rgb(var(--ground-rgb) / .86); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
.subnav a { transition: color 200ms var(--ease-light), background 200ms var(--ease-light), box-shadow 260ms var(--ease-light); }
.table.vs td { white-space: normal; vertical-align: top; font-size: var(--t-small); }
.table.vs td:first-child { color: var(--ink-3); white-space: nowrap; }
.table.vs th:not(:first-child), .table.vs td:not(:first-child) { width: 44%; }
@media (max-width: 699px) {
  .table.vs, .table.vs tbody, .table.vs tr, .table.vs td { display: block; width: auto; }
  .table.vs thead { display: none; }
  .table.vs tr { padding: 14px 16px; display: grid; grid-template-columns: 1fr; gap: 10px; border-top: 1px solid var(--line); }
  .table.vs tr:first-child { border-top: 0; }
  .table.vs { min-width: 0; }
  .table.vs td, .table.vs td:not(:first-child) { padding: 0; border: 0; width: auto; white-space: normal; }
  .table.vs td:first-child { grid-column: 1 / -1; color: var(--ink); font-weight: 600; }
  .table.vs td[data-h]::before { content: attr(data-h); display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
}
/* Design page: a single app window beside its story */
.split > .win-phone { max-width: 270px; justify-self: center; }
.split > .win-pad { max-width: 440px; justify-self: center; }
/* Pairing: three manual ways side by side; the approve way carries a tiny check-code picture */
.ways { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.way { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: var(--r-panel); background: var(--room); border: 1px solid var(--line); }
.way h4 { margin: 0; font-size: 1.05rem; font-weight: 500; }
.way p { color: var(--ink-2); font-size: var(--t-small); }
.check-mini { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.check-mini span { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--room-2); border: 1px solid var(--line); }
.check-mini small { font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.check-mini b { font: 400 20px/1.1 var(--font); letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--accent); }
.check-mini i { font-style: normal; color: var(--ink-3); }
.check-mini em { font-style: normal; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--t-small); }
/* Plain tables on a phone: each row becomes a small card, the first cell its title, the others labelled with their
   column heading (data-h). */
@media (max-width: 699px) {
  .table.cards { min-width: 0; }
  .table.cards, .table.cards tbody, .table.cards tr, .table.cards td { display: block; width: auto; }
  .table.cards thead { display: none; }
  .table.cards tr { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
  .table.cards tr:first-child { border-top: 0; }
  .table.cards td { padding: 0; border: 0; white-space: normal; }
  .table.cards td:first-child { color: var(--ink); font-weight: 600; }
  .table.cards td[data-h]::before { content: attr(data-h); display: block; font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
}
.win figcaption .cap-sub { display: block; opacity: .75; }
@media (min-width: 900px) { .win figcaption .cap-sub { display: inline; } .win figcaption .cap-sub::before { content: "· "; } }

/* ---- 2.0 Alpha: the test-build notice ---- */
.alpha-warn { border-color: var(--accent-line); display: grid; gap: var(--s3); }
.alpha-warn .badge { justify-self: start; }
.alpha-list { padding-left: 1.2em; display: grid; gap: 8px; color: var(--ink-2); }

/* ---- QiHome 2.0 page: chapters with small live-looking scenes (vignettes) drawn in the site's own tokens ---- */
.v2-hero .split { align-items: center; }
.v2-ver { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.v2-chapter .split { align-items: center; }
@media (min-width: 900px) { .v2-chapter.flip .split > :first-child { order: 2; } }
.v2-points { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4); }
.v2-points li { display: grid; gap: 2px; padding-left: var(--s4); border-left: 1px solid var(--line-mid); }
.v2-points b { font-weight: 500; color: var(--ink); }
.v2-points span { color: var(--ink-2); font-size: var(--t-small); }
.v2-icons { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .v2-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .v2-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-icon-card { display: grid; gap: var(--s2); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-panel); background: rgb(var(--room-rgb) / .5); color: inherit; text-decoration: none;
  transition: border-color var(--d-ui) ease, transform var(--d-press) var(--ease-out); }
.v2-icon-card svg { width: 28px; height: 28px; color: var(--accent); }
.v2-icon-card .n { font: 500 var(--t-label)/1 var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.v2-icon-card h3 { margin: 0; font-size: 1.1rem; font-weight: 500; letter-spacing: -.01em; }
.v2-icon-card p { margin: 0; color: var(--ink-2); font-size: var(--t-small); }
@media (hover: hover) and (pointer: fine) { .v2-icon-card:hover { border-color: var(--accent-line); } }
.v2-icon-card:active { transform: scale(0.98); }

.vg { display: grid; gap: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--room);
  box-shadow: 0 30px 70px rgb(0 0 0 / .22); font-size: var(--t-small); position: relative; isolation: isolate; }
.vg::before { content: ""; position: absolute; inset: -18% -10% auto; height: 70%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 180, 90, .14), transparent 70%); pointer-events: none; }
.vg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-bottom: var(--s3); }
.vg-title { font-weight: 500; color: var(--ink); }
.vg-meta { font: 500 var(--t-label)/1.3 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.vg-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.vg-row b { font-weight: 500; color: var(--ink); display: block; }
.vg-row small { display: block; color: var(--ink-3); font-size: .8rem; line-height: 1.45; }
.vg-time { font: 500 var(--t-label)/1 var(--mono); color: var(--ink-3); min-width: 3.2em; }
.vg-dot { width: 8px; height: 8px; flex: none; align-self: center; border-radius: 50%; background: var(--ink-3); }
.vg-dot.on { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-line); }
.vg-dot.idle { background: transparent; border: 1px solid var(--ink-3); }
.vg-pill { font-size: .76rem; padding: 3px 10px; border: 1px solid var(--line-mid); border-radius: var(--r-pill); color: var(--ink-2); white-space: nowrap; }
.vg-pill.lamp { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.vg-pill.ok { color: var(--accent); border-color: var(--accent-line); }
.vg-row.dim { opacity: .5; }
.vg-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.vg-col { display: grid; gap: 6px; align-content: start; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-control); background: rgb(var(--room-rgb) / .6); }
.vg-col .vg-meta { padding-bottom: 4px; }
.vg-col span { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: .78rem; }
.vg-col span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.vg-stack { position: relative; padding-top: 18px; }
.vg-stack::before, .vg-stack::after { content: ""; position: absolute; left: 6%; right: 6%; height: 18px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-control) var(--r-control) 0 0; background: rgb(var(--room-rgb) / .6); }
.vg-stack::before { top: 0; left: 12%; right: 12%; } .vg-stack::after { top: 8px; }
.vg-note { position: relative; padding: var(--s4); border: 1px solid var(--line-mid); border-radius: var(--r-control); background: var(--room); display: grid; gap: 4px; }
.vg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: var(--s3); }
.vg-actions { display: flex; gap: var(--s2); justify-content: flex-end; padding-top: var(--s3); }
.vg-foot { padding-top: var(--s3); font: 500 var(--t-label)/1.4 var(--mono); color: var(--ink-3); letter-spacing: .04em; border-top: 1px solid var(--line); }

/* rows of a scene come in one after another when it scrolls into view; nothing moves with reduced motion */
.reveal-ready .vg[data-reveal]:not(.in) .vg-row, .reveal-ready .vg[data-reveal]:not(.in) .vg-col, .reveal-ready .vg[data-reveal]:not(.in) .vg-note { opacity: 0; transform: translateY(6px); }
.vg[data-reveal] .vg-row, .vg[data-reveal] .vg-col, .vg[data-reveal] .vg-note { transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.vg .vg-row:nth-of-type(2), .vg .vg-col:nth-child(2) { transition-delay: 60ms; }
.vg .vg-row:nth-of-type(3), .vg .vg-col:nth-child(3) { transition-delay: 120ms; }
.vg .vg-row:nth-of-type(4) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .vg .vg-row, .vg .vg-col, .vg .vg-note { opacity: 1 !important; transform: none !important; transition: none !important; } }

.v2-road { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s4); counter-reset: road; }
@media (min-width: 900px) { .v2-road { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-road li { display: grid; gap: var(--s2); align-content: start; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-panel); }
.v2-road li .n { font: 500 var(--t-label)/1 var(--mono); color: var(--ink-3); letter-spacing: .06em; }
.v2-road li.lit { border-color: var(--accent-line); background: rgb(var(--room-rgb) / .5); }
.v2-road li.lit .n { color: var(--accent); }
.v2-road h3 { margin: 0; font-size: 1.1rem; font-weight: 500; }
.v2-road p { margin: 0; color: var(--ink-2); font-size: var(--t-small); }

/* ---------- inner page heroes: words on the grid, a small real scene beside them ---------- */
.page-hero .wrap.head { max-width: none; justify-items: start; }
.page-hero .wrap.head > * { max-width: 40em; }
.hero-split { align-items: center; }
@media (min-width: 960px) { .hero-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.hero-split .display { font-size: clamp(2rem, 1.1rem + 3.4vw, 3.75rem); }
.hero-split .stage { min-height: 0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .vg { box-shadow: 0 1px 0 rgb(0 0 0 / .02), 0 24px 60px -28px rgb(60 40 20 / .28); } }
:root[data-theme="light"] .vg { box-shadow: 0 1px 0 rgb(0 0 0 / .02), 0 24px 60px -28px rgb(60 40 20 / .28); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .vg::before { opacity: .45; } }
:root[data-theme="light"] .vg::before { opacity: .45; }