/* apex.css — hoopgram.ai, the family's front door (V0.2.3 B). One stylesheet for the home
   page and its four product pages: apple.com's "one screen, one product" rhythm on a
   paper-and-serif home like anthropic.com. No build, no framework, no third party. */
@font-face{font-family:"HoopGram Wordmark";font-style:normal;font-weight:400;font-display:swap;
  src:url("/hoopgram-wordmark-v1.woff2") format("woff2");unicode-range:U+0047-0048,U+0061,U+006D,U+006F-0070,U+0072}
:root{
  --bg:#FBF9F2; --surface:#FFFFFF; --paper:#FFFDF8; --fg:#211E16; --dim:#8C887B; --ink:#15130E; --on-ink:#F3EFE3; --on-ink-dim:#A9A494;
  --line:rgba(33,30,22,.09); --line-2:rgba(33,30,22,.16);
  --brand:#F5B301; --brand-600:#E0A200; --brand-ink:#9C7500; --on-brand:#231A00; --soft:rgba(245,179,1,.12); --ring:rgba(245,179,1,.30);
  --glass-bg:color-mix(in oklab, var(--surface) 76%, transparent); --glass-blur:blur(20px) saturate(1.6);
  --glass-rim:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.04), 0 0 0 1px color-mix(in oklab, var(--fg) 7%, transparent);
  --shadow-1:0 1px 2px rgba(40,33,10,.04), 0 8px 24px rgba(40,33,10,.06);
  --shadow-2:0 2px 6px rgba(40,33,10,.06), 0 18px 48px rgba(40,33,10,.10);
  --shadow-key:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.10), 0 1px 0 color-mix(in oklab, var(--brand-600) 45%, transparent), 0 8px 20px -8px color-mix(in oklab, var(--brand) 55%, transparent);
  --serif:"Source Serif 4","Source Han Serif SC",Georgia,"Songti SC","Noto Naskh Arabic",serif;
  --sans:"Inter","Source Han Sans SC","Noto Sans Arabic",system-ui,-apple-system,"PingFang SC","Segoe UI",sans-serif;
  --mono:"Maple Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wordmark:"HoopGram Wordmark","Marcellus","Source Serif 4",Georgia,serif;
  --r-2xl:28px; --max:68rem;
}
html[data-theme="dark"], html[data-theme="dark"] body{color-scheme:dark}
html[data-theme="dark"]{
  --bg:#131210; --surface:#1D1B15; --paper:#211E18; --fg:#EAE7DE; --dim:#94907F; --ink:#0B0A08; --on-ink:#EAE7DE; --on-ink-dim:#8F8B7E;
  --line:rgba(234,231,222,.10); --line-2:rgba(234,231,222,.18);
  --brand-600:#FFC426; --brand-ink:#F5B301; --soft:rgba(245,179,1,.14); --ring:rgba(245,179,1,.34);
  --glass-bg:color-mix(in oklab, var(--surface) 55%, transparent); --glass-rim:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-1:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.40); --shadow-2:0 2px 8px rgba(0,0,0,.35), 0 22px 60px rgba(0,0,0,.55);
  --shadow-key:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.25), 0 8px 22px -8px color-mix(in oklab, var(--brand) 40%, transparent);
}
@media (prefers-color-scheme: dark){ html:not([data-theme]){
  --bg:#131210; --surface:#1D1B15; --paper:#211E18; --fg:#EAE7DE; --dim:#94907F; --ink:#0B0A08; --on-ink:#EAE7DE; --on-ink-dim:#8F8B7E;
  --line:rgba(234,231,222,.10); --line-2:rgba(234,231,222,.18);
  --brand-600:#FFC426; --brand-ink:#F5B301; --soft:rgba(245,179,1,.14); --ring:rgba(245,179,1,.34);
  --glass-bg:color-mix(in oklab, var(--surface) 55%, transparent); --glass-rim:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-1:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.40); --shadow-2:0 2px 8px rgba(0,0,0,.35), 0 22px 60px rgba(0,0,0,.55);
  --shadow-key:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.25), 0 8px 22px -8px color-mix(in oklab, var(--brand) 40%, transparent);
}}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--fg); font:16px/1.7 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
a{color:inherit; text-underline-offset:3px}
.serif{font-family:var(--serif)}
.wordmark{font-family:var(--wordmark); font-weight:400; font-synthesis:none; font-kerning:normal; letter-spacing:.005em}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
:focus-visible{outline:2px solid var(--brand-ink); outline-offset:3px; border-radius:6px}
.skip{position:absolute; inset-inline-start:-200vw; top:8px; background:var(--paper); padding:8px 14px; border-radius:999px; z-index:20}
.skip:focus{inset-inline-start:16px}

/* ── the top bar: wordmark · products · sovereignty · account · Get Your Hoop ── */
.bar-glass{background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--line)}
.top{position:sticky; top:0; z-index:10}
.top .wrap{display:flex; align-items:center; gap:18px; min-height:58px}
.top .brand{font-size:20px; line-height:1; text-decoration:none; color:var(--fg); flex:none; white-space:nowrap}
.top nav{display:flex; align-items:center; gap:14px; flex:1; min-width:0}
.nav-links{display:flex; align-items:center; gap:2px; min-width:0}
.nav-links a{text-decoration:none; color:var(--dim); font-size:14px; padding:7px 10px; border-radius:999px; white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg); background:var(--soft)}
.nav-actions{display:flex; align-items:center; justify-content:flex-end; gap:7px; margin-inline-start:auto; min-width:0}
.mobile-label,.top-theme{display:none}
.seg{display:inline-flex; align-items:center; padding:2px; border:1px solid var(--line); border-radius:999px; background:color-mix(in oklab,var(--paper) 76%,transparent)}
.seg button{border:0; background:none; color:var(--dim); font:inherit; font-size:12px; line-height:1; cursor:pointer; min-width:32px; height:26px; padding:0 9px; border-radius:999px; white-space:nowrap}
.seg button:hover{color:var(--fg)} .seg button.on{background:var(--fg); color:var(--bg)}
.btn-ghost{display:inline-block; text-decoration:none; border:1px solid var(--line-2); color:var(--fg); font-size:14px; padding:6px 14px; border-radius:999px; white-space:nowrap}
.btn-ghost:hover{background:var(--soft); border-color:var(--brand-ink)}
.btn-ink{display:inline-block; text-decoration:none; background:var(--fg); color:var(--bg); font-size:14px; font-weight:500; padding:8px 16px; border-radius:999px; white-space:nowrap;
  transition:transform .06s, filter .16s}
.btn-ink:hover{filter:brightness(1.1)} .btn-ink:active{transform:translateY(1px)}
.btn-key{display:inline-block; text-decoration:none; font-size:16px; font-weight:500; padding:13px 28px; border:1px solid transparent; border-radius:999px; color:var(--on-brand); white-space:nowrap;
  background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 86%, white) 0%, var(--brand) 45%, var(--brand-600) 100%); box-shadow:var(--shadow-key); transition:filter .16s, transform .06s}
.btn-key:hover{filter:brightness(1.03)} .btn-key:active{transform:translateY(1px); box-shadow:none}
.menu-btn{display:none; width:40px; height:40px; border:0; background:none; color:var(--fg); border-radius:50%; padding:10px; cursor:pointer}
.menu-btn span{display:block; width:20px; height:1px; background:currentColor; transition:transform .2s; margin:5px 0}
.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)}
@media (max-width:960px){
  .top .wrap{min-height:54px; padding-inline:18px; gap:10px}
  .top .brand{font-size:19px; flex:1; overflow:visible}
  .menu-btn{display:inline-grid; place-content:center}
  .top nav{position:fixed; inset:54px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; padding:10px 18px 20px;
    transform:translateY(-115%); visibility:hidden; pointer-events:none; transition:transform .2s,visibility 0s .2s; z-index:9}
  .top nav.open{transform:none; visibility:visible; pointer-events:auto; transition-delay:0s}
  .nav-links{display:flex; flex-direction:column; align-items:stretch}
  .nav-links a{font-size:16px; padding:11px 10px; border-radius:12px}
  .nav-actions{display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:10px 0 0; padding-top:12px; border-top:1px solid var(--line)}
  .mobile-label{display:block; color:var(--dim); font-size:12px; margin:4px 2px -2px}
  .top-theme{display:inline-flex}
  .seg{align-self:flex-start}
  .nav-actions .btn-ghost,.nav-actions .btn-ink{text-align:center; padding:10px 16px}
}

/* ── the product screens (apple.com: eyebrow · headline · two links · a picture) ── */
.screen{padding:clamp(64px,12vh,128px) 0; text-align:center}
.screen + .screen{border-top:1px solid var(--line)}
.eyebrow{color:var(--brand-ink); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
.eyebrow.code{font-family:var(--mono); text-transform:none; letter-spacing:0; font-size:14px; color:var(--fg); background:var(--paper); border:1px solid var(--line); padding:6px 12px; border-radius:999px}
.screen h1, .screen h2{font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.08; margin:14px auto 0; max-width:22ch}
.screen h1{font-size:clamp(2.6rem,7vw,5.2rem)} .screen h2{font-size:clamp(2.1rem,5.2vw,3.6rem)}
.sub{font-family:var(--serif); color:var(--dim); font-size:clamp(1.1rem,2.2vw,1.45rem); line-height:1.5; margin:16px auto 0; max-width:34ch}
.links{display:flex; gap:26px; justify-content:center; margin-top:24px; flex-wrap:wrap}
.links a{color:var(--brand-ink); text-decoration:none; font-size:17px}
.links a:hover{text-decoration:underline}
.links a::after{content:" ›"}
html[dir="rtl"] .links a::after{content:" ‹"}
/* the machine frame: a Hoop OS desktop in a laptop-like slab */
.machine{margin:54px auto 0; width:min(62rem,100%); background:var(--ink); border-radius:22px; padding:10px 10px 18px; box-shadow:var(--shadow-2); position:relative}
.machine::after{content:""; position:absolute; left:50%; bottom:7px; width:54px; height:4px; border-radius:2px; background:rgba(255,255,255,.14); transform:translateX(-50%)}
.machine img{display:block; width:100%; height:auto; border-radius:14px; background:var(--surface)}
.machine .placeholder{aspect-ratio:16/10; border-radius:14px; background:radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--brand) 12%, var(--bg)) 0%, var(--bg) 55%); display:grid; place-items:center; color:var(--dim); font-family:var(--serif); font-size:1.4rem}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:44px auto 0; width:min(56rem,100%); text-align:start}
.trio div{border:1px solid var(--line); border-radius:18px; padding:18px 20px; background:var(--paper); box-shadow:var(--shadow-1)}
.trio b{display:block; font-weight:500; font-size:15px}
.trio span{display:block; color:var(--dim); font-size:14px; margin-top:4px; line-height:1.55}
@media (max-width:760px){.trio{grid-template-columns:1fr}}
pre.cmd{display:inline-block; margin:26px auto 0; font:15px/1.6 var(--mono); background:var(--ink); color:var(--on-ink); padding:14px 22px; border-radius:14px; text-align:start; max-width:100%; overflow:auto}
pre.cmd .p{color:var(--on-ink-dim)}

/* ── the creed: the black box that grows as you scroll ── */
.creed-wrap{padding:clamp(40px,8vh,96px) 0}
.creed{--w:92%; --r:var(--r-2xl); width:var(--w); margin:0 auto; border-radius:var(--r); background:var(--ink); color:var(--on-ink); position:relative; overflow:hidden;
  padding:clamp(72px,14vh,150px) 24px; text-align:center; transition:width .6s cubic-bezier(.2,.7,.2,1), border-radius .6s cubic-bezier(.2,.7,.2,1)}
.creed.wide{--w:100%; --r:0}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .creed{animation:creed-grow linear both; animation-timeline:view(); animation-range:entry 10% cover 45%; transition:none}
    @keyframes creed-grow{from{width:92%; border-radius:var(--r-2xl)} to{width:100%; border-radius:0}}
  }
}
@media (prefers-reduced-motion:reduce){.creed{width:100%; border-radius:0; transition:none; animation:none}}
.creed-in{position:relative; z-index:1; max-width:46rem; margin:0 auto}
.creed h2{font-family:var(--serif); font-weight:400; font-size:clamp(2rem,5.4vw,4rem); line-height:1.15; letter-spacing:-.015em; margin:0}
.creed p{font-family:var(--serif); color:var(--on-ink-dim); font-size:clamp(1.05rem,2vw,1.35rem); margin:18px auto 0; max-width:30ch}
.creed .btn-key{margin-top:30px}
.creed .q{position:absolute; font-family:var(--serif); color:var(--on-ink-dim); font-size:clamp(.95rem,1.5vw,1.15rem); opacity:.75; text-decoration:none; max-width:16ch; line-height:1.4; text-align:start}
.creed .q:hover{color:var(--on-ink); opacity:1}
.creed .q1{left:6%; top:14%} .creed .q2{right:7%; top:18%} .creed .q3{left:9%; bottom:22%} .creed .q4{right:6%; bottom:26%} .creed .q5{left:22%; top:8%} .creed .q6{right:22%; bottom:10%}
.creed .qs-list{display:none}
@media (max-width:720px){
  .creed .q{display:none}
  .creed .qs-list{display:grid; gap:8px; margin:34px auto 0; text-align:start; max-width:26rem}
  .creed .qs-list a{color:var(--on-ink-dim); text-decoration:none; font-family:var(--serif); font-size:1.05rem; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.1)}
}

/* ── document sections (about · sovereignty · price · gate) ── */
section.doc{padding:clamp(56px,9vh,100px) 0}
section.doc + section.doc{border-top:1px solid var(--line)}
section.doc h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.6vw,2.4rem); letter-spacing:-.01em; max-width:24ch}
section.doc p{max-width:60ch; margin-top:14px; color:var(--fg)}
section.doc p.dim{color:var(--dim)}
.names{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:14px; margin-top:26px}
.names div{border:1px solid var(--line); border-radius:18px; padding:18px 20px; background:var(--paper)}
.names b{display:block; font-family:var(--serif); font-weight:400; font-size:1.35rem}
.names span{display:block; color:var(--dim); font-size:14px; margin-top:6px; line-height:1.55}
.price{font-size:1.25rem; font-weight:500; margin-top:18px}
.gate{display:flex; gap:12px; margin-top:22px; max-width:32rem}
.gate input{flex:1; min-width:0; font:inherit; font-size:16px; padding:12px 18px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--fg); outline:none; box-shadow:var(--shadow-1)}
.gate input:focus{border-color:var(--ring); box-shadow:var(--shadow-1), 0 0 0 4px var(--ring)}
.gate button{font:inherit; font-size:15px; font-weight:500; padding:12px 24px; border:1px solid transparent; border-radius:999px; color:var(--on-brand); cursor:pointer; white-space:nowrap;
  background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 86%, white) 0%, var(--brand) 45%, var(--brand-600) 100%); box-shadow:var(--shadow-key)}
.miss{color:var(--dim); font-size:14px; margin-top:10px; min-height:1.5em}
.faq{margin-top:26px; display:grid; gap:10px}
.faq details{border:1px solid var(--line); border-radius:16px; background:var(--paper); padding:4px 18px}
.faq summary{cursor:pointer; font-family:var(--serif); font-size:1.15rem; padding:12px 0; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::after{content:"+"; color:var(--dim)} .faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:14px; color:var(--dim); max-width:none}
.table{width:100%; border-collapse:collapse; margin-top:22px; font-size:15px}
.table th, .table td{text-align:start; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.table th{color:var(--dim); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
.tblw{overflow-x:auto}

/* ── /upgrade: the reactor (a version charging in the forge) — calm, SVG only, palette only ── */
.upg{display:grid; gap:22px; margin-top:8px}
.ver{border:1px solid var(--line); border-radius:var(--r-2xl); background:var(--paper); padding:clamp(22px,3.5vw,40px); box-shadow:var(--shadow-1)}
.ver-head{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(18px,4vw,44px)}
.ver .reactor{width:clamp(176px,26vw,264px); height:auto; display:block}
.ver:not(.lead) .reactor{width:clamp(140px,18vw,184px)}
.ver-meta h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,3.2vw,2.2rem); letter-spacing:-.01em; line-height:1.2; margin-top:6px; max-width:none}
.ver-meta dl{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin-top:14px; font-size:15px}
.ver-meta dt{color:var(--dim)} .ver-meta dd{margin:0}
.reactor .rim{fill:none; stroke:var(--line); stroke-width:1}
.reactor .ticks circle{fill:none; stroke:var(--line-2); stroke-width:7; stroke-dasharray:1.2 7.8}
.reactor .ticks{transform-origin:100px 100px; animation:reactor-turn 120s linear infinite}
.reactor .track{fill:none; stroke:var(--line); stroke-width:8}
.reactor .charge{fill:none; stroke:var(--brand); stroke-width:8; stroke-linecap:round; transform:rotate(-90deg); transform-origin:100px 100px; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1)}
.reactor .seg{fill:none; stroke:var(--line); stroke-width:9}
.reactor .seg.on{stroke:var(--brand-600)}
.reactor .core,.reactor .halo{opacity:var(--o,1); animation:reactor-breathe 5s ease-in-out infinite}
.reactor .core{fill:var(--brand)}
.reactor .num{font-family:var(--serif); font-size:40px; fill:var(--fg); letter-spacing:-.02em}
.reactor .unit{font-size:18px; fill:var(--dim)}
.ver.done .reactor .charge{stroke:var(--brand-ink)}
.reactor .num.full{font-size:30px; letter-spacing:-.03em}
html[dir="rtl"] .reactor .charge{transform:rotate(-90deg) scale(1,-1)}   /* the charge runs the reading direction */
@keyframes reactor-turn{to{transform:rotate(360deg)}}
@keyframes reactor-breathe{0%,100%{opacity:var(--o,1)} 50%{opacity:calc(var(--o,1) * .72)}}

/* ── 0.2.10 矢志不渝 — the shi reactor: ten double armour plates, a campaign arrow on the
   charge ring, the Loulan mark at the top. The ticks march on; the core never wavers. ── */
.reactor.shi .plate{fill:none; stroke:var(--line); stroke-width:9}
.reactor.shi .plate2{fill:none; stroke:var(--line); stroke-width:2.5}
.reactor.shi .plate.on{stroke:var(--brand-600)}
.reactor.shi .plate2.on{stroke:var(--brand)}
.reactor.shi .shi-target{fill:none; stroke:var(--line-2); stroke-width:1.5}
.reactor.shi.full .shi-target{fill:var(--brand-600); stroke:var(--brand-ink)}
.reactor.shi .shi-arrow{transform-origin:100px 100px; transform:rotate(var(--deg,0deg)); transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.reactor.shi .shi-arrow path{fill:var(--brand-ink)}
html[dir="rtl"] .reactor.shi .shi-arrow{transform:scale(-1,1) rotate(var(--deg,0deg))}
.reactor.shi .core,.reactor.shi .halo{animation:none}   /* the will does not waver */
.pk-h{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:500; margin-top:28px; padding-top:20px; border-top:1px solid var(--line)}
.pks{list-style:none; padding:0; margin:10px 0 0; display:grid}
.pk{display:grid; grid-template-columns:2.1rem 1fr auto 7rem 3.2rem; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px}
.pk:last-child{border-bottom:0}
.pk-id{display:inline-grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; border:1px solid var(--line-2); font-family:var(--mono); font-size:12px; color:var(--dim)}
.pk.progress .pk-id{border-color:var(--brand-ink); color:var(--brand-ink)} .pk.done .pk-id{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.pk-name{min-width:0; overflow-wrap:anywhere}
.pk-state{font-size:12px; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:2px 10px; white-space:nowrap}
.pk.progress .pk-state{color:var(--brand-ink); border-color:var(--ring); background:var(--soft)} .pk.hold .pk-state{opacity:.7; text-decoration:line-through}
.pk-bar{height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.pk-bar i{display:block; height:100%; background:var(--brand); border-radius:2px}
.pk.done .pk-bar i{background:var(--brand-ink)}
.pk-pct{font-family:var(--mono); font-size:13px; color:var(--dim); text-align:end}
.up-updated{margin-top:4px; color:var(--dim); font-size:13px; text-align:center}
.up-fine{text-align:center; max-width:none}
@media (max-width:760px){
  .ver-head{grid-template-columns:1fr; justify-items:center; text-align:center}
  .ver-meta dl{justify-content:center; text-align:start}
  .pk{grid-template-columns:2.1rem 1fr auto; gap:10px}
  .pk-bar{grid-column:2 / 3; margin-top:-2px} .pk-pct{grid-column:3 / 4}
}
@media (prefers-reduced-motion:reduce){.reactor .ticks,.reactor .core,.reactor .halo{animation:none} .reactor .charge{transition:none} .reactor.shi .shi-arrow{transition:none}}

/* ── S6.1: the trimmed top bar (no language/theme up here) ── */
.acct-btn{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); color:var(--fg); background:transparent}
.acct-btn:hover{background:var(--soft)}
.lang-pick{position:relative; display:inline-block}
.lang-pick > button{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  border-radius:999px; background:transparent; color:var(--dim); font-size:12px; padding:4px 12px; cursor:pointer}
.lang-pick > button:hover{color:var(--fg)}
.lang-pick > button i{font-style:normal; transform:rotate(90deg); display:inline-block; line-height:1}
.lang-pick-menu{position:absolute; inset-block-end:calc(100% + 8px); inset-inline-start:0; min-width:9rem;
  background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-pop);
  padding:6px; display:grid; z-index:60}
.lang-pick-menu button{border:0; background:transparent; color:var(--fg); text-align:start; font-size:13px;
  padding:7px 10px; border-radius:8px; cursor:pointer}
.lang-pick-menu button:hover{background:var(--soft)}
.foot-sep{color:var(--dim)}
.theme-foot{flex-wrap:wrap}

/* ── the foot: the engraving, then the family ── */
footer{margin-top:clamp(40px,8vh,80px); border-top:1px solid var(--line); padding:56px 0 64px}
.engrave{text-align:center; color:var(--brand-ink); font-family:var(--serif); font-size:19px}
html[lang="zh-CN"] .engrave{letter-spacing:.5em; text-indent:.5em}
html[lang="en"] .engrave{font-family:var(--sans); font-size:12px; letter-spacing:.24em; text-transform:uppercase; text-indent:.24em}
.theme-foot{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:28px; color:var(--dim); font-size:12px}
.foot{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; margin-top:40px; font-size:13px; color:var(--dim)}
.foot a{text-decoration:none} .foot a:hover{color:var(--fg)}
.fine{text-align:center; color:var(--dim); font-size:12px; margin-top:18px}
@media (prefers-reduced-transparency:reduce){.bar-glass{background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none}}

/* ── /buy: the configurator ── */
.buy-pricebar{position:sticky; top:58px; z-index:9; background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--line)}
.buy-pricebar-in{display:flex; gap:24px; flex-wrap:wrap; align-items:center; min-height:44px; font-size:14px}
.buy-pricebar-item b{font-weight:500; color:var(--dim); margin-inline-end:6px}
.buy-hero{padding-top:clamp(40px,7vh,72px); padding-bottom:clamp(28px,5vh,48px)}
.buy-wrap{display:grid; grid-template-columns:minmax(0,44%) minmax(0,1fr); gap:56px; align-items:start; padding-bottom:64px}
.buy-visual{position:sticky; top:120px}
.buy-visual .machine{margin:0}
.buy-steps{display:grid; grid-template-columns:minmax(0,1fr); gap:56px}
.buy-step{min-width:0; border:1px solid var(--line); border-radius:var(--r-2xl); background:var(--paper); padding:clamp(22px,3vw,36px); box-shadow:var(--shadow-1); scroll-margin-top:150px; text-align:start}
.buy-step h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,2.6vw,1.8rem); letter-spacing:-.01em; margin-top:4px; max-width:none}
.buy-review h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.buy-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:12px; margin-top:20px}
.buy-card{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:start; border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:16px 18px; cursor:pointer; font:inherit; color:var(--fg); width:100%}
.buy-card:hover{border-color:var(--brand-ink)}
.buy-card.on{border-color:var(--brand-ink); box-shadow:0 0 0 3px var(--ring)}
.buy-card b{font-weight:500; font-size:15px}
.buy-card span{color:var(--dim); font-size:13px; line-height:1.5}
.buy-card .buy-price{margin-top:6px; font-weight:500; color:var(--brand-ink); font-size:14px}
.buy-note{color:var(--dim); font-size:13px; margin-top:14px; max-width:52ch}
.buy-note a{color:var(--brand-ink)}
.buy-gpu-detail{margin-top:16px; display:grid; gap:10px}
.buy-gpu-card{display:flex; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:14px; background:var(--surface)}
.buy-gpu-card b{font-weight:500}
.buy-gpu-meta{color:var(--dim); font-size:12px; margin-top:8px}
.buy-pay-card{margin-top:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:18px 20px}
.buy-pay-card b{font-size:15px; font-weight:500}
.buy-name{margin-top:22px}
.buy-name label{display:block; font-size:13px; color:var(--dim); margin-bottom:6px}
.buy-name-row{display:flex; align-items:center; gap:8px; max-width:26rem; flex-wrap:wrap}
.buy-name-row input{flex:1; min-width:8rem; font:inherit; font-size:16px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--fg); outline:none}
.buy-name-row input:focus{border-color:var(--ring); box-shadow:0 0 0 4px var(--ring)}
.buy-name-suffix{color:var(--dim); font-size:14px; white-space:nowrap}
.buy-name-status{margin-top:8px; font-size:13px; color:var(--dim); min-height:1.4em}
.buy-name-status.ok{color:var(--brand-ink)}
.buy-summary{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin-top:24px; font-size:14px}
.buy-summary dt{color:var(--dim)}
.buy-summary dd{margin:0; text-align:end}
.buy-total{display:grid; gap:6px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:15px}
.buy-total div{display:flex; justify-content:space-between; gap:12px}
.buy-total b{font-weight:500}
.buy-cta{margin-top:22px; width:100%; text-align:center; border:0; cursor:pointer}
.buy-cta[disabled]{cursor:not-allowed; opacity:.55; filter:grayscale(.2)}
.buy-cta[disabled]:hover{filter:grayscale(.2)}
.buy-dots{position:fixed; inset-inline-end:20px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; z-index:8}
.buy-dot{width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center}
.buy-dot::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--line-2); border:1px solid var(--line-2); display:block}
.buy-dot.on::after{background:var(--brand-ink); border-color:var(--brand-ink); width:11px; height:11px}
.buy-mobilebar{display:none}
@media (max-width:960px){.buy-pricebar{top:54px}}
@media (max-width:720px){
  .buy-wrap{grid-template-columns:1fr; gap:36px}
  .buy-visual{display:none}
  .buy-dots{display:none}
  .buy-steps{padding-bottom:76px}
  .buy-mobilebar{display:flex; position:fixed; inset-inline:0; bottom:0; z-index:11; align-items:center; justify-content:space-between; gap:14px;
    background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-top:1px solid var(--line);
    padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .buy-mobilebar span{font-size:14px; font-weight:500}
  .buy-mobilebar button{font:inherit; font-size:14px; font-weight:500; padding:10px 20px; min-height:28px; border:0; border-radius:999px; color:var(--on-brand); cursor:pointer;
    background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 86%, white) 0%, var(--brand) 45%, var(--brand-600) 100%)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── /who ── */
.who-decl{list-style:none; padding:0; margin-top:22px; display:grid; gap:10px}
.who-decl li{font-family:var(--serif); font-size:1.25rem; color:var(--fg)}
.who-decl li::before{content:"— "; color:var(--brand-ink)}
.who-h3{font-family:var(--serif); font-weight:400; font-size:1.3rem; letter-spacing:-.005em; margin-top:36px; max-width:none}
section.doc .who-h3:first-of-type{margin-top:22px}
.who-list{margin-top:14px; padding-inline-start:1.4em; display:grid; gap:8px; color:var(--fg)}
.who-list.dim{color:var(--dim)}
.who-full{margin-top:26px}
.who-full-body{padding-bottom:6px}
.who-full-body .who-h3{font-size:1.15rem; margin-top:26px}
.who-full-body .who-h3:first-of-type{margin-top:4px}
.who-full-body p{margin-top:8px; color:var(--dim); max-width:none}
.who-note{margin-top:14px}
.cta-row{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:26px}