/* QiHome 3.0 website. Brand: qihome-os/docs/qihome-web-brand-system.md (warm light inside a dark home; plan lines;
   measured mono labels; one lit element per view). Motion follows the emil-design-eng rules:
   - only transform, opacity (and clip-path for reveals) animate; never `all`, never scale(0);
   - interface motion < 300 ms with a strong ease-out; marketing/explanatory motion may be longer;
   - hover is gated by (hover: hover) and (pointer: fine); every pressable element answers :active with scale(.97);
   - reduced motion = fewer, gentler changes (opacity only), not none. */

:root {
  color-scheme: dark;
  --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: #f3ebe2;
  --ink-2: #b4aba0;
  --ink-3: #8a8178;
  --lamp: #ffb45a;
  --lamp-deep: #ff9f43;
  --lamp-core: #ffd27a;
  --on-lamp: #1a1206;
  --calm: #9fc7b6;

  --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(2.5rem, 1.1rem + 5.6vw, 5.25rem);
  --t-title: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --t-sub: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-body: 1rem;
  --t-small: .9375rem;
  --t-label: .75rem;

  --gutter: clamp(16px, 4vw, 40px);
  --page: 1240px;
  --nav-h: 60px;
  --r-control: 10px; --r-panel: 18px; --r-pill: 999px;

  /* motion tokens */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entering, UI response */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* things moving on screen */
  --ease-light: cubic-bezier(.2, .7, .2, 1);       /* light warming up (brand) */
  --d-press: 160ms; --d-ui: 220ms; --d-reveal: 700ms; --d-light: 1400ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-body)/1.65 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
html.i18n-wait body { opacity: 0; }
html.ready body { transition: opacity 260ms ease; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
kbd { font: 500 .8em/1 var(--mono); padding: 2px 5px; border: 1px solid var(--line-mid); border-radius: 5px; color: var(--ink-2); }
code { font: .9em var(--mono); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(255, 180, 90, .3); }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-left)); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--lamp); color: var(--on-lamp); padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* One language at a time: the other picture is display:none, and lazy images that are not displayed are never fetched. */
html:not(.en) [data-l="en"], html.en [data-l="zh"] { display: none !important; }
picture img { width: 100%; }

/* ---------- type ---------- */
.display { font-size: var(--t-display); font-weight: 500; line-height: 1.04; letter-spacing: -.03em; word-break: keep-all; text-wrap: balance; }
.title { font-size: var(--t-title); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; word-break: keep-all; text-wrap: balance; }
.subtitle { font-size: var(--t-sub); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; word-break: keep-all; text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.label { display: flex; align-items: center; gap: 10px; font: 500 var(--t-label)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html:not(.en) .label { letter-spacing: .12em; }
/* A plan line: the section's label sits in a gap of a wall, like a door */
.label.rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-mid), transparent 80%); }
.label.rule .mono { color: var(--lamp); }
.small { font-size: var(--t-small); color: var(--ink-2); }
.note { font-size: var(--t-small); color: var(--ink-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border-radius: var(--r-pill); border: 1px solid var(--line-mid); background: rgba(243, 235, 226, .04);
  font-size: var(--t-small); font-weight: 500; text-decoration: none; cursor: pointer; user-select: none;
  transition: transform var(--d-press) var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn-lamp { background: var(--lamp); color: var(--on-lamp); border-color: transparent; }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: .875rem; }
.btn-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--lamp); text-decoration: none; font-size: var(--t-small); font-weight: 500; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--line-strong); background: rgba(243, 235, 226, .08); }
  .btn-lamp:hover { background: var(--lamp-core); border-color: transparent; }
  .btn-link:hover { color: var(--lamp-core); }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-mid); font: 500 .72rem/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.badge-now { border-color: rgba(159, 199, 182, .45); color: var(--calm); }
.badge-preview { border-color: rgba(255, 180, 90, .5); color: var(--lamp); }

/* ---------- bar ---------- */
.bar { position: sticky; top: 0; z-index: 40; height: var(--nav-h); padding-top: env(safe-area-inset-top); box-sizing: content-box;
  background: rgba(11, 10, 9, .72); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color 240ms ease; }
.bar.scrolled { border-bottom-color: var(--line); }
.bar-in { height: var(--nav-h); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.brand-ver { font: 500 .72rem/1 var(--mono); color: var(--lamp); border: 1px solid rgba(255, 180, 90, .4); border-radius: 6px; padding: 3px 5px; }
.bar nav { flex: 1; min-width: 0; }
.bar-links { display: flex; gap: 4px; justify-content: center; }
.bar-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); font-size: .875rem; color: var(--ink-2); text-decoration: none; transition: color 200ms ease, background-color 200ms ease; }
.bar-links a[aria-current="true"], .bar-links a[aria-current="page"] { color: var(--ink); background: rgba(243, 235, 226, .06); }
@media (hover: hover) and (pointer: fine) { .bar-links a:hover { color: var(--ink); } }
.bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lang { min-width: 44px; min-height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-mid); background: transparent; font: 500 .8rem var(--mono); cursor: pointer; transition: transform var(--d-press) var(--ease-out), border-color 200ms ease; }
.lang:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .lang:hover { border-color: var(--line-strong); } }
.menu-btn { display: none; position: relative; width: 44px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-mid); background: transparent; cursor: pointer;
  transition: transform var(--d-press) var(--ease-out), border-color 200ms ease; }
.menu-btn:active { transform: scale(.97); }
.menu-btn span { position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 1px; background: var(--ink); transition: transform 220ms var(--ease-out); }
.menu-btn span:first-child { top: 14px; }
.menu-btn span:last-child { top: 20px; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.menu { position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; background: #0b0a09;
  border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-8px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.menu.open { opacity: 1; transform: none; }
.menu-links { display: grid; padding-top: 8px; padding-bottom: 16px; }
.menu-links a { display: flex; align-items: center; min-height: 52px; font-size: 1.05rem; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-links li:last-child a { border-bottom: 0; }
.menu-links a[aria-current="page"] { color: var(--ink); }
@media (max-width: 1080px) { .bar nav:not(.menu) { display: none; } .menu-btn { display: inline-block; } }
@media (min-width: 1081px) { .menu { display: none; } }
@media (max-width: 400px) { .brand-ver { display: none; } .bar-in { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .menu { transform: none; } .menu-btn span { transition: none; } }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(72px, 9vw, 128px) 0; overflow-x: clip; }
.section-tight { padding-top: 0; }
.head { display: grid; gap: 18px; max-width: 44rem; margin-bottom: clamp(36px, 5vw, 64px); }
.head-center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.head-center .label.rule::before { content: ""; flex: 1; height: 1px; background: linear-gradient(270deg, var(--line-mid), transparent 80%); }
.head-center .label { width: min(100%, 28rem); }
.split { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split-rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split-top { align-items: start; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  #intelligence .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.split-text .head { margin-bottom: 32px; }

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

/* ---------- frames ---------- */
.frame { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line-mid); background: #050505;
  box-shadow: 0 1px 0 rgba(243, 235, 226, .06) inset, 0 40px 80px -30px rgba(0, 0, 0, .85), 0 12px 24px -12px rgba(0, 0, 0, .6); }
.frame-desk { aspect-ratio: 16 / 10; }
.frame-desk picture, .frame-desk img { width: 100%; height: 100%; }
.frame-win { border-radius: 12px; }
.phone { position: relative; overflow: hidden; border-radius: 13.5% / 6.2%; background: #000;
  box-shadow: 0 0 0 1px rgba(243, 235, 226, .16), 0 0 0 6px #0f0e0d, 0 0 0 7px rgba(243, 235, 226, .10), 0 40px 70px -24px rgba(0, 0, 0, .9); }
.phone-android { border-radius: 9% / 4%; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(48px, 8vw, 104px) 0 clamp(72px, 9vw, 120px); overflow: clip; }
.hero-plan { position: absolute; top: 0; right: -3%; width: min(46%, 640px); height: auto; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 60% 40%, #000 35%, transparent 80%); mask-image: radial-gradient(ellipse 75% 75% at 60% 40%, #000 35%, transparent 80%); }
.hero .hero-plan .plan-walls path { stroke: rgba(243, 235, 226, .085); stroke-width: 5px; }
.hero .hero-plan .plan-floor { display: none; }
@media (max-width: 999px) { .hero-plan { width: 92%; right: -34%; top: -2%; } }
.hero-in { position: relative; display: grid; gap: 28px; align-items: end; }
.hero-copy { display: grid; gap: 22px; }
.hero-side { display: grid; gap: 22px; }
.hero .meta { font-size: .75rem; color: var(--ink-3); letter-spacing: .04em; }
.dot-lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 10px 2px rgba(255, 180, 90, .55); }
.hero .label { color: var(--ink-2); }
@media (min-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .hero-side { padding-bottom: 10px; }
}
.hero-stage { position: relative; margin-top: clamp(44px, 6vw, 80px); }
.pool-hero { width: 90%; height: 120%; left: 5%; top: -22%; opacity: .9; }
.hero-fig { position: relative; padding-right: clamp(0px, 8vw, 110px); }
.phone-hero { position: absolute; right: 0; bottom: -7%; width: clamp(104px, 19vw, 232px); }
.dim { display: flex; align-items: center; gap: 14px; margin-top: 22px; margin-right: clamp(0px, 8vw, 110px); color: var(--ink-3); font-size: .72rem; }
.dim-line { flex: 1; height: 9px; border-left: 1px solid var(--line-strong); position: relative; }
.dim-line::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line-mid); }
.dim-line:last-child { border-left: 0; border-right: 1px solid var(--line-strong); }
@media (max-width: 640px) {
  /* the phone hangs below the desktop; the measured caption sits under both */
  .hero-fig { padding-right: 0; }
  .phone-hero { width: 30%; top: 28vw; bottom: auto; right: 4%; }
  .dim { margin-right: 0; margin-top: 34vw; }
  .hero .actions .btn { flex: 1 1 140px; }
}

/* ---------- desktop viewer ---------- */
.viewer { display: grid; gap: 22px; }
.tabs { position: relative; justify-self: center; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); padding: 0 16px; }
.tabs::-webkit-scrollbar { display: none; }
.tab-list { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(243, 235, 226, .03); width: max-content; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: .9rem; white-space: nowrap; cursor: pointer; transition: transform var(--d-press) var(--ease-out), color 200ms ease; }
.tab kbd { font-size: .7rem; padding: 2px 4px; }
.tab:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--ink); } }
/* The lit copy of the tab list (made by script) sits exactly on top; only the current tab is let through its clip. */
.tab-lit { position: absolute; top: 0; left: 16px; pointer-events: none; border-color: transparent; background: var(--ink); clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 260ms var(--ease-in-out); }
.tab-lit .tab { color: var(--ground); }
.tab-lit .tab kbd { color: var(--ground); border-color: rgba(11, 10, 9, .3); }
.tab-lit.instant { transition: none; }
.viewer-frame { position: relative; }
.no-js .tabs, .no-js .swatches { display: none; }
.panel, .wall { position: absolute; inset: 0; opacity: 0; filter: blur(2px); transition: opacity var(--d-ui) ease, filter var(--d-ui) ease; }
.panel.on, .wall.on { opacity: 1; filter: none; }
.viewer.instant .panel, .viewer.instant .wall { transition: none; }
.viewer-foot { display: grid; gap: 14px; justify-items: center; text-align: center; }
.caps { display: grid; max-width: 40em; }
.cap { grid-area: 1 / 1; color: var(--ink-2); opacity: 0; transition: opacity 240ms ease; }
.cap.on { opacity: 1; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.swatches[hidden] { display: none; }
.sw { padding: 0; border: 1px solid var(--line-mid); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; width: 58px; height: 37px; transition: transform var(--d-press) var(--ease-out), border-color 200ms ease; }
.sw img { width: 100%; height: 100%; object-fit: cover; }
.sw:active { transform: scale(.95); }
.sw.on { border-color: var(--lamp); box-shadow: 0 0 0 1px var(--lamp); }

.facts { display: grid; gap: 28px; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts li, .points li { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.facts p, .points p, .cards p, .more p, .status p { color: var(--ink-2); font-size: var(--t-small); }

/* ---------- files ---------- */
.points { display: grid; gap: 22px; }
.split-media { position: relative; }
.media-files { padding-bottom: 14%; padding-right: 8%; }
.media-files .phone { position: absolute; right: 0; bottom: 0; width: 28%; }

/* ---------- room automations ---------- */
.explain { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1000px) { .explain { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.plan-panel { position: relative; border: 1px solid var(--line); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(243, 235, 226, .025), rgba(243, 235, 226, 0)); padding: clamp(10px, 2vw, 24px); }
/* The standard flat drawn by tools/plan.py (units: cm). Shared by every plan on the site. */
.qplan .plan-floor path { fill: rgba(243, 235, 226, .022); }
.qplan .plan-walls path { fill: none; stroke: rgba(243, 235, 226, .62); stroke-linecap: square; }
.qplan .plan-doors .leaf, .qplan .plan-doors .slide { stroke: rgba(243, 235, 226, .5); stroke-width: 3; fill: none; }
.qplan .plan-doors .swing { stroke: rgba(243, 235, 226, .22); stroke-width: 1.6; stroke-dasharray: 6 6; fill: none; }
.qplan .plan-wins path { stroke: rgba(159, 199, 182, .55); stroke-width: 1.6; fill: none; }
.qplan .plan-furn .f { fill: none; stroke: rgba(243, 235, 226, .16); stroke-width: 1.8; }
.qplan .plan-furn .f2 { fill: none; stroke: rgba(243, 235, 226, .1); stroke-width: 1.5; }
.qplan .plan-labels .rn { fill: var(--ink-2); font: 500 27px var(--font); text-anchor: middle; letter-spacing: .04em; }
.qplan .plan-labels .ra { fill: var(--ink-3); font: 19px var(--mono); text-anchor: middle; }
.plan { width: 100%; height: auto; overflow: visible; }
.plan .link { fill: none; stroke: var(--lamp); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .85; stroke-linecap: round; }
.plan .sensor .core { fill: var(--calm); }
.plan .sensor .ring { fill: none; stroke: var(--calm); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.plan .lamp circle { fill: var(--lamp); }
.plan .lamp-pool { transform-box: fill-box; transform-origin: center; }
.plan .tag rect { fill: #1a1816; stroke: var(--line-strong); stroke-width: 2; }
.plan .tag text { fill: var(--ink); font: 500 24px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.plan .tag.lit rect { stroke: rgba(255, 180, 90, .7); }
.plan .tag.lit text { fill: var(--lamp-core); }
.plan .tag { transform-box: fill-box; transform-origin: center; }
.plan .person circle { fill: var(--ink); }
.plan .person .halo { fill: rgba(243, 235, 226, .14); }
@media (max-width: 640px) {
  .plan .plan-labels .rn { font-size: 44px; }
  .plan .plan-labels .ra { display: none; }
  .plan .tag text { font-size: 40px; }
  .plan .plan-furn { opacity: .7; }
}
.plan-note { margin-top: 10px; font-size: .7rem; color: var(--ink-3); text-align: center; }
/* states the script moves between (the markup's default is the finished picture: no script, still complete) */
.plan [data-k].off { opacity: 0; }
.plan .lamp.off { opacity: .25; }
.plan .lamp-pool.off { opacity: 0; transform: scale(.85); }
.plan .tag.off { transform: translateY(4px); }
.plan.anim [data-k]:not(.person) { transition: opacity 400ms ease, transform 400ms var(--ease-out); }
.plan.anim .lamp-pool { transition: opacity var(--d-light) var(--ease-light), transform var(--d-light) var(--ease-light); }
.plan.anim .lamp { transition: opacity 600ms var(--ease-light); }
.plan.anim .link { transition: stroke-dashoffset 700ms var(--ease-in-out), opacity 300ms ease; }
.plan .link.off { stroke-dashoffset: 1; opacity: .8; }
.explain-side { display: grid; gap: 24px; justify-items: start; }
.steps { display: grid; gap: 4px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); opacity: .42; transition: opacity 240ms ease; }
.steps li.on { opacity: 1; }
.step-n { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-mid); font-size: .72rem; color: var(--ink-2); transition: border-color 240ms ease, color 240ms ease; }
.steps li.now .step-n { border-color: var(--lamp); color: var(--lamp); }
.steps p { color: var(--ink-2); font-size: var(--t-small); margin-top: 4px; }
.replay { transition: transform var(--d-press) var(--ease-out), opacity 240ms ease, border-color 200ms ease; }
.replay.wait { opacity: 0; visibility: hidden; } /* keeps its place: showing it later moves nothing */

.model { margin-top: clamp(64px, 8vw, 112px); }
.model .split-text { display: grid; gap: 16px; }
.model .split-text > p { color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.chips li { font-size: .72rem; color: var(--ink-2); padding: 6px 10px; border: 1px solid var(--line-mid); border-radius: var(--r-pill); }
.stack-shots { display: grid; }
.stack-shots .shot-2 { width: 76%; justify-self: end; margin-top: -3%; margin-right: -3%; }
.cap-small { margin-top: 14px; font-size: .7rem; color: var(--ink-3); text-align: right; }
@media (min-width: 1000px) { .split-rev .split-text { order: 0; } }

/* ---------- intelligence ---------- */
.media-intel { display: grid; place-items: center; }
@media (max-width: 999px) { .media-intel { order: 2; } }
.media-intel .phone { width: min(300px, 64vw); }
.pool-side { width: 130%; aspect-ratio: 1; left: -15%; top: 50%; translate: 0 -50%; }
.cards { display: grid; gap: 12px; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.cards li { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 14px; border: 1px solid var(--line); background: rgba(243, 235, 226, .025); }
.row-note { display: flex; gap: 12px; align-items: baseline; margin-top: 20px; color: var(--ink-2); font-size: var(--t-small); }

/* ---------- apps ---------- */
.devices { display: grid; gap: 28px; align-items: end; grid-template-columns: 1fr 1fr; }
.dev figcaption { margin-top: 16px; font-size: .72rem; color: var(--ink-3); text-align: center; }
.dev-web { grid-column: 1 / -1; }
.dev-phone .phone { width: min(100%, 220px); margin: 0 auto; }
@media (min-width: 1000px) { .devices { grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 2fr); gap: 40px; } .dev-web { grid-column: auto; } }
.center-note { text-align: center; color: var(--ink-3); font-size: var(--t-small); margin-top: 40px; }

/* ---------- family & privacy ---------- */
.trio { display: grid; gap: 48px; align-items: center; }
.trio-col { display: grid; gap: 22px; align-content: start; }
.trio-media .phone { width: min(260px, 54vw); margin: 0 auto; }
@media (min-width: 1000px) { .trio { grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); gap: 56px; } }

/* ---------- more ---------- */
.more { display: grid; gap: 1px; margin-top: 32px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
@media (min-width: 640px) { .more { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .more { grid-template-columns: repeat(3, 1fr); } }
.more li { display: grid; gap: 8px; align-content: start; padding: 26px; background: var(--ground); }
.more svg { width: 22px; height: 22px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }

/* ---------- plugins ---------- */
.status { display: grid; gap: 12px; }
.status li { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
.status .badge { justify-self: start; }
@media (max-width: 520px) { .status li { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- start ---------- */
.section-start { overflow: clip; }
.pool-start { width: 70%; aspect-ratio: 1.6; left: 15%; top: 18%; opacity: .55; }
.paths { position: relative; display: grid; gap: 16px; }
@media (min-width: 1000px) { .paths { grid-template-columns: 1.25fr 1fr 1fr; } }
.path { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--r-panel); border: 1px solid var(--line-mid); background: rgba(18, 17, 16, .82); min-width: 0; }
.path > p { color: var(--ink-2); font-size: var(--t-small); }
.path .btn-link { margin-top: auto; }
.path-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.path-head h3 { font-size: 1.25rem; }
.path-lit { border-color: rgba(255, 180, 90, .32); }
.code { border-radius: 12px; border: 1px solid var(--line); background: #0f0e0d; overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--line); font-size: .7rem; color: var(--ink-3); }
.code pre { margin: 0; padding: 14px; overflow-x: auto; font-size: .8rem; line-height: 1.6; color: var(--ink); }
.copy { min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-mid); background: transparent; font-size: .75rem; cursor: pointer; transition: transform var(--d-press) var(--ease-out), border-color 200ms ease, color 200ms ease; }
.copy:active { transform: scale(.97); }
.copy.done { color: var(--calm); border-color: rgba(159, 199, 182, .45); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); }
.foot .wrap { display: grid; gap: 22px; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.foot-tag { color: var(--ink-2); font-size: var(--t-small); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { display: inline-flex; min-height: 40px; align-items: center; color: var(--ink-2); text-decoration: none; font-size: var(--t-small); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--ink); } }
.foot-note { color: var(--ink-3); font-size: .8rem; max-width: 52em; }

/* ---------- inner pages ---------- */
.page-hero { position: relative; padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 6vw, 72px); overflow: clip; }
.page-hero .wrap { position: relative; display: grid; gap: 22px; }
.page-hero .display { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem); max-width: 14em; }
.page-hero .lead { max-width: 40em; }
.pool-page { width: 70%; aspect-ratio: 2; right: -10%; top: -30%; opacity: .55; }
.badge-later { border-style: dashed; color: var(--ink-3); }
/* in-page sections: a calm second bar that sticks under the first and follows the reader */
.subnav { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top)); z-index: 30; background: rgba(11, 10, 9, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 8px 0; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); color: var(--ink-3); font-size: .85rem; text-decoration: none; white-space: nowrap; transition: color 200ms ease, background-color 200ms ease; }
.subnav a[aria-current="true"] { color: var(--ink); background: rgba(243, 235, 226, .07); }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { color: var(--ink); } }
html:has(.subnav) { scroll-padding-top: calc(var(--nav-h) + 72px); }
.bar-links a[aria-current="page"] { color: var(--ink); background: rgba(243, 235, 226, .06); }
.feature + .feature { border-top: 1px solid var(--line); }
.feature .split-text .points { margin-top: 8px; }
.stack-gap { display: grid; gap: 20px; }
.grid2 { display: grid; gap: 16px; }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.grid3 { display: grid; gap: 16px; }
@media (min-width: 760px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.card { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 14px; border: 1px solid var(--line); background: rgba(243, 235, 226, .025); min-width: 0; }
.card p, .card li { color: var(--ink-2); font-size: var(--t-small); }
.card .badge { justify-self: start; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ticks { display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: var(--t-small); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink-3); }
.flow { display: grid; gap: 0; counter-reset: f; }
.flow > li { counter-increment: f; display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.flow > li::before { content: counter(f); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-mid); font: 500 .72rem var(--mono); color: var(--ink-2); }
.flow b { display: block; font-weight: 500; }
.flow span { color: var(--ink-2); font-size: var(--t-small); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.table thead th { font: 500 .75rem var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td:first-child { color: var(--ink); white-space: nowrap; }
.table td { color: var(--ink-2); }
@media (max-width: 640px) {
  .table-stack thead { display: none; }
  .table-stack tr { display: grid; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .table-stack td { padding: 0; border: 0; white-space: normal !important; }
  .table-stack td[data-h]::before { content: attr(data-h); display: block; font: 500 .7rem var(--mono); color: var(--ink-3); margin-top: 6px; }
}
details.drawer { border-top: 1px solid var(--line); }
details.drawer:last-of-type { border-bottom: 1px solid var(--line); }
details.drawer > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; font-weight: 500; }
details.drawer > summary::-webkit-details-marker { display: none; }
details.drawer > summary::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform 200ms var(--ease-out); flex: none; }
details.drawer[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.drawer > div { display: grid; gap: 14px; padding: 2px 0 20px; color: var(--ink-2); font-size: var(--t-small); }
/* the drawer's content settles in (opening is occasional: a short fade and 4 px rise; closing is instant) */
@media (prefers-reduced-motion: no-preference) {
  details.drawer[open] > div { animation: drawer 220ms var(--ease-out); }
}
@keyframes drawer { from { opacity: 0; transform: translateY(-4px); } }
.dl { display: grid; gap: 0; }
.dl li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.dl b { display: block; font-weight: 500; }
.dl span { display: block; color: var(--ink-3); font: .78rem var(--mono); }
.placeholder { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); color: var(--ink-3); font: .78rem var(--mono); white-space: nowrap; }
.inline-code { font: .85em var(--mono); padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.prose p { color: var(--ink-2); }
.prose p + p { margin-top: 12px; }
.cta-band { display: grid; gap: 18px; justify-items: center; text-align: center; padding: clamp(48px, 7vw, 88px) 0; }
.code-big pre { font-size: .82rem; }
.plist { display: grid; }
.plist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.kv { display: grid; gap: 0; }
.kv li { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.kv li > span:first-child { color: var(--ink); }
.kv li > span:last-child { color: var(--ink-2); }
@media (max-width: 520px) { .kv li { grid-template-columns: 1fr; gap: 4px; } }
/* legal */
.legal { max-width: 46rem; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 0; }
.legal-head { display: grid; gap: 14px; margin-bottom: 32px; }
.legal-toc { margin: 28px 0 40px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; }
.legal-toc ol { display: grid; gap: 6px; margin-top: 12px; }
.legal-toc a { color: var(--ink-2); text-decoration: none; font-size: var(--t-small); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .legal-toc a:hover { color: var(--ink); } }
.legal-body section { padding-top: 28px; }
.legal-body h2 { font-size: 1.25rem; font-weight: 500; margin-bottom: 12px; }
.legal-body p, .legal-body li { color: var(--ink-2); line-height: 1.75; }
.legal-body p + p, .legal-body ul { margin-top: 12px; }
.legal-body ul { display: grid; gap: 8px; padding-left: 0; }
.legal-body li { position: relative; padding-left: 18px; }
.legal-body li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.legal-body strong { color: var(--ink); font-weight: 500; }
.legal-toc li { padding-left: 0; }
.legal-toc li::before { display: none; }
.legal-intro p { color: var(--ink-2); line-height: 1.75; }
.legal-intro p + p { margin-top: 12px; }
/* 404 */
.lost { min-height: 64vh; display: grid; align-content: center; gap: 22px; padding: 80px 0; }
.lost .qplan { width: min(420px, 80vw); opacity: .9; }

/* ---------- apps ---------- */
.phones { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 3vw, 32px); flex-wrap: wrap; }
.phones .phone-ios { width: min(250px, 44vw); }
.phones .phone-android { width: min(230px, 40vw); margin-top: 8%; }
.phones .dim { flex-basis: 100%; }
.split .phones { flex-wrap: nowrap; }
.split .phones .phone-ios { width: 47%; max-width: 250px; }
.split .phones .phone-android { width: 43%; max-width: 230px; }
.apps-hero-in { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .apps-hero-in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.apps-hero-copy { display: grid; gap: 22px; }

/* ======================================================================
   Motion. Everything below only applies with script (html.js); without it the page is complete and still.
   ====================================================================== */

/* Hero, on first paint (rare, once per visit: allowed some delight). Lines rise 12px, 60 ms apart. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes frame-in { from { opacity: 0; transform: translateY(28px) scale(.985); } }
@keyframes phone-in { from { opacity: 0; transform: translateY(40px); } }
@keyframes warm { from { opacity: 0; transform: scale(.92); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
.js [data-hero], .js [data-hero-frame], .js [data-hero-phone], .js .pool-hero { opacity: 0; }
.ready [data-hero] { opacity: 1; animation: rise 640ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ready [data-hero-frame] { opacity: 1; animation: frame-in 1000ms var(--ease-out) 220ms both; }
.ready [data-hero-phone] { opacity: 1; animation: phone-in 1000ms var(--ease-out) 380ms both; }
/* the lamp warms up after the picture lands (light change: slow in, brand ease) */
.ready .pool-hero { opacity: .9; animation: warm 1800ms var(--ease-light) 600ms both; }
.js .hero-plan path { stroke-dasharray: 1; }
.ready .hero-plan path { animation: draw 2200ms var(--ease-in-out) 100ms both; }

/* Scroll reveals: once, when 12% of the element is in view. Text rises 16px; frames unveil from the top with
   clip-path (a shade lifting) while rising; groups stagger 60 ms. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal="frame"] { transform: translateY(32px); clip-path: inset(0 0 22% 0 round 14px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), clip-path 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal="phone"] { transform: translateY(48px); transition-duration: 1000ms; transition-delay: calc(120ms + var(--i, 0) * 80ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* ends beyond the box, so the frame's shadow is not cut off once it has landed */
.js [data-reveal="frame"].in { clip-path: inset(-120px round 14px); }

@media (prefers-reduced-motion: reduce) {
  /* Gentler, not gone: things still fade in, nothing travels, scales or draws. */
  .ready [data-hero], .ready [data-hero-frame], .ready [data-hero-phone] { animation: fade 400ms ease both; animation-delay: 0ms; }
  .ready .pool-hero { animation: fade 900ms ease both; }
  .ready .hero-plan path { animation: none; }
  .js [data-reveal], .js [data-reveal="frame"], .js [data-reveal="phone"] { transform: none; clip-path: none; transition: opacity 400ms ease; transition-delay: 0ms; }
  .tab-lit { transition: none; }
  .plan.anim [data-k]:not(.person) { transition: opacity 300ms ease; }
  .plan .tag.off, .plan .lamp-pool.off { transform: none; }
  .plan.anim .link { transition: opacity 300ms ease; }
}
@keyframes fade { from { opacity: 0; } }

/* 在线体验: the product hero's line under its buttons, the apps hero's link to the demo */
.page-hero .demo-meta { margin: 0; font-size: .75rem; color: var(--ink-3); letter-spacing: .04em; }
.apps-demo { margin: 2px 0 0; }