/* BORING 官网 · 第八版 · 全站共用样式（site.css）
   来源：第六版首页（r6/yi，用户已确认）抽出的设计 token、导航、按钮、文字链接、字阶、通用卡片与组件。各页先引 site.css，再引自己的页面样式。
   字体：英文/数字 Martian Mono，中文 HarmonyOS Sans SC（本机回退 Noto Sans SC），点阵 5R（MIST.dot / MIST.dotWall；点径:点距 = .64:.90）。
   彩色只有：信号橙（字标 G、焦点、极少量提示）与五种状态灯色（功能语义，不挪作装饰）。全站近黑；暖白用于少数卡片。
   组件说明与 HTML 片段见 COMPONENTS.md。 */
:root{
  --ink:#0e0c0a;
  --ink-2:#181512;
  --ink-3:#26221d;
  --line:#3a342d;
  --paper:#ece6da;
  --paper-2:#ddd6c8;
  --mute:#b3ab9d;           /* 近黑上的次要字 9:1 */
  --mute-p:#4d463d;         /* 暖白上的次要字 7.6:1 */
  --signal:#ff6a00;
  --blue:#304ffe;
  --cn:"HarmonyOS Sans SC","HarmonyOS Sans","Noto Sans SC",sans-serif;
  --mix:"Martian Mono","HarmonyOS Sans SC","HarmonyOS Sans","Noto Sans SC",sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --out:cubic-bezier(.2,.8,.2,1);
  --snap:cubic-bezier(.23,1,.32,1);
  --spring:cubic-bezier(.24,1.2,.32,1);
  --pad:clamp(16px,2.8vw,40px);
  /* 第八版：板块节奏。--gap-section 桌面板块间留白，--gap-section-m 手机；--gs 是当前生效值（窄屏切到 -m）。
     首页各大板块等高 --sec-h（内容垂直居中）；内页分节不强制等高，相邻分节上下留白一律 --gs。数值待 Maverick 看过后再定 */
  --gap-section:32px;   /* 第九版：Maverick 10-13 定 */
  --gap-section-m:48px;
  --gs:var(--gap-section);
  --sec-h:min(100vh,960px);
  --sec:72px;
  --r:22px;
  /* 5R 点阵小数字的最小尺寸：字形高 ≈ .943em → 15px 时 ≈ 14.1px（点距 3px）；放在序号框里时框 34px。全站点阵数字不得小于此 */
  --dotnum:15px;
  --numbox:34px;
  --h3s:clamp(21px,1.8vw,26px);   /* 卡内小标题（比 .h3 低一级）：setup 步骤标题、guide 问题标题与入口卡 */
  --glass:rgba(30,26,22,.36);          /* 首屏顶部：透出背后的点阵墙 */
  --glass-c:rgba(26,23,20,.66);       /* 滚动后（compact）略加深，保证文字可读 */
  --glass-solid:rgba(26,23,20,.94);
  --rim:inset 0 1px 1px rgba(255,246,232,.2),inset 0 -1px 1px rgba(255,246,232,.03),inset 1px 0 1px rgba(255,246,232,.07),0 18px 50px rgba(0,0,0,.2);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:108px}
html.motion-reduce{scroll-behavior:auto}
/* 页面大底来自 bg.js（<div class="bg" data-bg>，position:fixed z-index:0）；html 只留同色兜底（橡皮筋回弹 / 脚本未起时）。
   主体与页脚 z-index:1 压在背景之上；暗场块（舞台、卡片）各自的实色底不变 */
html{background:#0a0908}
main,.foot{position:relative;z-index:1}
body{margin:0;color:var(--paper);font:300 16px/1.7 var(--mix);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
[hidden]{display:none!important}   /* 全站：hidden 一律不显示（要“隐身占位”的叠放容器自己用更高权重的 !important 覆盖，见 .stack） */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;z-index:90;left:12px;top:12px;transform:translateY(-300%);padding:10px 16px;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:900;text-decoration:none}
.skip:focus{transform:none}
.sq{display:inline-block;width:.5em;height:.5em;background:currentColor;margin-right:.6em;vertical-align:.12em}
.sq--sig{background:var(--signal)}
.dot-svg{display:block;height:1em;width:auto;fill:currentColor}
.dot-svg .g{fill:var(--signal)}
.tag{position:fixed;z-index:60;bottom:10px;right:12px;padding:7px 11px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line);font:500 11px/1.2 var(--mix);color:var(--mute);pointer-events:none}
/* ══ 导航：V6 式居中磨砂玻璃条。字标｜四项｜Download ══
   Download 悬停/聚焦：按钮向右展开露出「BORING Console」；导航条同一条曲线、同一时长把宽度加上同样的差值，
   左缘不动（left 由静止宽度决定），所以四项主导航一像素都不动。滚过 80px 收窄（compact）。 */
.nav{--nw:min(1110px,calc(100% - 80px));--dx:0px;position:fixed;z-index:55;top:24px;left:calc(50% - var(--nw) / 2);width:calc(var(--nw) + var(--dx));height:68px;display:flex;align-items:center;gap:10px;padding:0 12px 0 26px;border-radius:24px;
  --_fill:var(--glass);   /* 材质：liquid-glass.css 的 .lg-glass（磨砂 + 折射 + 暖白高光边）；这里只给着色 */
  transition:width .38s var(--snap),left .38s var(--snap),background-color .3s ease}
.nav.is-compact{--nw:min(900px,calc(100% - 80px));--_fill:var(--glass-c)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{--_fill:var(--glass-solid)}}
.nav__brand{flex:none;display:flex;align-items:center;min-height:44px;padding:0 6px;margin-left:-6px;color:var(--paper);text-decoration:none;border-radius:10px}
.nav__brand .wm{font-size:17px;display:block}
.nav__nav{margin-left:auto}
.nav__menu{display:none}
.nav__list{display:flex;align-items:center;gap:2px}
.nav__list a{display:flex;align-items:center;min-height:42px;padding:0 15px;border-radius:999px;font:500 14px/1 var(--mix);color:#ece6da;text-shadow:0 1px 6px rgba(0,0,0,.55);text-decoration:none;white-space:nowrap;transition:color .2s ease,background-color .2s ease}
.nav__list a[aria-current]{background:var(--paper);color:var(--ink);font-weight:900;cursor:default;text-shadow:none}
@media (hover:hover){.nav__list a[href]:hover{color:var(--paper);background:rgba(236,230,218,.08)}}

/* Download：玻璃胶囊（.lg-button）。宽度在 --w0（只有 Download）与 --w1（Download BORING Console）之间，JS 量好写进来 */
.dl{--w0:124px;--w1:282px;--_fill:rgba(236,230,218,.16);position:relative;flex:none;display:flex;align-items:center;width:var(--w0);height:44px;padding:0 0 0 20px;border-radius:999px;overflow:hidden;white-space:nowrap;
  font:800 13.5px/1 var(--mono);letter-spacing:-.01em;text-decoration:none}
.dl.lg-button{transition:width .38s var(--snap),--lg-glow var(--lg-dur-smooth) var(--lg-ease-out),transform var(--lg-dur-bouncy) var(--lg-ease-bouncy),background-color .2s ease,color .2s ease}
.dl__a{flex:none}
.dl__b{flex:none;display:block;overflow:hidden;padding-left:.62em;clip-path:inset(0 100% 0 0);transition:clip-path .38s var(--snap)}
.dl__b>span{display:block;opacity:0;transform:translateX(-10px);transition:opacity .2s ease,transform .38s var(--snap)}
.nav.is-dl{--dx:calc(var(--w1,282px) - var(--w0,124px))}
.nav.is-dl .dl{width:var(--w1);--_fill:var(--paper);--_fg:var(--ink)}
.nav.is-dl .dl__b{clip-path:inset(0 0 0 0)}
.nav.is-dl .dl__b>span{opacity:1;transform:none;transition:opacity .26s ease .06s,transform .38s var(--snap)}
.dl:focus-visible{outline-offset:2px}
/* ── 按钮：实底 / 闭合线框 / 文字链接 ── */
/* .btn 只管尺寸、字与箭头；材质（玻璃、按压鼓起、按压点发光、高光边）来自 liquid-glass.css 的 .lg-button：
   主 lg-button--prominent（暖白着色玻璃）/ 次 --clear（透明玻璃）/ 暖白卡上 --ink（暖黑玻璃）与 --clear-ink */
.btn{position:relative;display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:0 22px;border-radius:999px;font:900 16px/1 var(--mix);text-decoration:none;white-space:nowrap}
.btn i,.lk i{font-style:normal;font-family:var(--mono);font-weight:500;display:inline-block;transition:transform .18s var(--out)}
.btn--sm{min-height:44px;padding:0 18px;font-size:14.5px}
.btn--dl{font-family:var(--mono);font-weight:800;letter-spacing:-.01em;padding-inline:26px}
@media (hover:hover){
  .btn:hover i,.lk:hover i{transform:translateX(5px)}
  .btn:hover i.dn{transform:translateY(4px)}
}
.lk{position:relative;display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 2px;font:900 15px/1.35 var(--mix);color:var(--paper);text-decoration:none}
/* 文字链接：下划线是一排等径圆点（点径 2.4px、同文字色），宽度 = 文字宽（不含箭头）。
   点数 n = floor(文字宽 / 6px)，点距 p = (文字宽 − 点径) / (n − 1)，首点与文字首对齐、末点与文字尾对齐（JS 写 --n --p）。
   静止不显示；悬停 / 聚焦时 --rv 以 steps(n) 从 0 走到 n，一次揭示一整颗点（不出现半颗；每颗约 15ms，总长 ≤ 300ms），离开时反向收回。 */
@property --rv{syntax:"<number>";inherits:false;initial-value:0}
.lk span{position:relative;padding-block:5px 7px}
.lk span::after,.orb__lb span::after{--rv:0;content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:radial-gradient(circle,currentColor 1.2px,transparent 1.7px) calc(1.2px - var(--p,6px) / 2) 50%/var(--p,6px) 3px repeat-x;
  clip-path:inset(0 calc(100% - var(--rv) * var(--p,6px)) 0 0);transition:--rv var(--lt,180ms) steps(var(--n,12),end)}
@media (hover:hover){.lk:hover span::after{--rv:var(--n,12)}}
.lk:focus-visible span::after{--rv:var(--n,12)}
.lk--sm{min-height:36px;font-size:13px}
/* 返回链接：箭头在前、朝左，悬停向左推；外链型（target）箭头 ↗ 朝右上推 */
.lk--back{flex-direction:row}
@media (hover:hover){.lk--back:hover i{transform:translateX(-4px)}.lk--back[target]:hover i{transform:translate(3px,-3px)}}
/* ── 字 ── */
.eye,.kind{font:900 14px/1.3 var(--mix);letter-spacing:.03em}
.h1,.h2,.h3,.hlc__title{font-family:var(--mix);font-weight:900;font-feature-settings:"palt";letter-spacing:-.01em}
.h1>span,.h2>span,.hlc__title>span{display:block}
.h2{margin-top:14px;font-size:clamp(26px,2.62vw,38px);line-height:1.22}
.h2--big{font-size:clamp(30px,3.9vw,58px);line-height:1.14}

.h3{font-size:clamp(22px,2vw,29px);line-height:1.28}
.lead{margin-top:14px;font:300 19px/1.6 var(--mix);color:var(--mute)}
.fine,.cap{font:500 13px/1.65 var(--mix);color:var(--mute)}
.demo{font:500 13px/1.65 var(--mix);color:var(--mute);padding-left:1.1em;text-indent:-1.1em}
/* 眉标逐字打出（全页只此一处）：字先透明占位，打到才显；块光标不占宽，打完闪一次即移除 */
.tc{opacity:0}
.tc.on{opacity:1}
.cur{position:relative;display:inline-block;width:0;height:1em;vertical-align:-.12em}
.cur::after{content:"";position:absolute;left:.1em;top:.05em;width:.5em;height:.95em;background:var(--signal)}
/* 5R 点阵读数（time-scrubber 的数字滚动列）：只剩语音的 n/3 */
.readout{display:inline-flex;align-items:center;gap:.14em;font-size:20px;line-height:1;color:var(--paper);white-space:nowrap}
.readout--sm{font-size:17px}
.readout__of{display:inline-flex;color:var(--mute)}
.roll{display:inline-flex;gap:.14em}
.dg{display:inline-block;width:1em;height:1.5em;margin:-.25em 0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.dg[hidden]{display:none}
.dg-s{display:flex;flex-direction:column;transition:transform 220ms cubic-bezier(.3,1.15,.4,1)}
.dg-s>span{height:1.5em;display:grid;place-items:center}
.dg-s .dot-svg{vertical-align:0!important}
html.motion-reduce .dg-s{transition:none}
.h1{margin-top:12px;font-size:clamp(28px,2.95vw,43px);line-height:1.2}
.ctas{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* 标题进入视野：很轻的淡入上移（只在尚未看到的标题上，JS 加 .is-pending） */
html.motion-ok [data-rise].is-pending{opacity:0;transform:translateY(14px)}
html.motion-ok [data-rise].is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .7s var(--snap)}
.hint{font:500 14px/1.5 var(--mix);color:var(--mute-p)}
/* 状态卡片：选中卡撑满整宽、变高、出现说明行（卡底 clip-path 横向先撑开，说明行随后展开）；
   其余卡不再错峰弹开、不再朝指针倾斜——它们只随卡槽高度同步平移，同一条曲线、同一时长。 */
.deck{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:16px 10px 10px}
.deck .hint{padding:0 14px 10px}
.cards{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;overflow:visible}
.cards.is-measure .card,.cards.is-measure .card *{transition:none!important}
.card{--side:12px;position:relative;display:grid;grid-template-columns:22px 1fr auto;grid-template-rows:auto 0fr;column-gap:12px;align-items:center;width:100%;min-height:50px;padding:9px calc(var(--side) + 16px) 9px calc(var(--side) + 12px);
  border:0;border-radius:15px;background:none;text-align:left;color:var(--ink);transition:padding .34s var(--snap),grid-template-rows .34s var(--snap),color .2s ease}
.card__bg{position:absolute;inset:0;border-radius:15px;background:var(--paper-2);clip-path:inset(0 var(--side) round 13px);transition:clip-path .28s var(--snap),background-color .22s ease;pointer-events:none}
.card>:not(.card__bg){position:relative}
/* 状态色块：一块实心圆角正方形，不加外框 */
.led{width:18px;height:18px;border-radius:5px;background:var(--dot,#fff);justify-self:center}
.card__name{font:900 16.5px/1.3 var(--mix)}
.card__color{font:500 12.5px/1 var(--mix);color:var(--mute-p);letter-spacing:.06em;transition:color .2s ease}
.card__desc{grid-column:2/-1;min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .34s}
.card__desc>span{display:block;padding-top:5px;font:300 15px/1.5 var(--mix);color:var(--paper);opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .3s var(--snap)}
@media (hover:hover){.card:not(.is-selected):hover .card__bg{background:#d1c9ba}}
.card:not(.is-selected):active .card__bg{clip-path:inset(2px calc(var(--side) + 3px) round 12px);transition-duration:.08s}
.card.is-selected{--side:0px;grid-template-rows:auto 1fr;padding-block:14px 15px;color:var(--paper);cursor:default}
.card.is-selected .card__bg{background:var(--ink);clip-path:inset(0 0 round 15px)}
.card.is-selected .card__name{font-size:19px}
.card.is-selected .card__color{color:var(--mute)}
.card.is-selected .card__desc{visibility:visible;transition:none}
.card.is-selected .card__desc>span{opacity:1;transform:none;transition:opacity .32s ease .1s,transform .36s var(--snap) .1s}
.card:focus-visible{outline-offset:2px}
/* 裁切窗口滚轮（共用）：每个词按字数自适应字号，窗口高度固定，换词 = 整条轨道上下滑 */
.reel{--lh:1.14;min-width:0;height:calc(var(--fmax) * var(--lh));overflow:hidden;font-family:var(--mix);font-weight:900;white-space:nowrap;letter-spacing:-.02em;font-feature-settings:"palt"}
.reel__track{display:block;transform:translateY(calc(var(--i,0) * -1 * var(--fmax) * var(--lh)));transition:transform .75s cubic-bezier(.7,0,.15,1)}
.reel__track span{display:flex;align-items:center;height:calc(var(--fmax) * var(--lh));font-size:min(var(--fmax),calc(var(--rw) / var(--n) * .985));line-height:1}
html.motion-reduce .reel__track{transition:none}
/* ══ 亮点：横向轮播 ══
   原生横向滚动（触屏轻扫、触控板横滑）+ scroll-snap proximity；圆点 / 自动播放 / 键盘 / 鼠标拖拽都走同一条
   Bencho carousel 的 glide（quart-out 620ms），拖拽 1:1、甩出看 150ms 惯性。卡片左缘对齐页面栏线，右侧露出下一张。 */
.hl{padding:0;display:flex;flex-direction:column;justify-content:center;--cw:min(1180px,calc(100vw - 2 * var(--pad) - 140px));--gap:20px}
.hl__viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none;cursor:grab}
.hl__viewport::-webkit-scrollbar{display:none}
.hl__viewport img{-webkit-user-drag:none;user-select:none}
.hl__viewport.is-gliding{scroll-snap-type:none}
.hl__viewport.is-drag{cursor:grabbing;user-select:none;scroll-snap-type:none}
.hl__viewport:focus-visible .hl__slot.is-cur .hlc{outline:3px solid var(--signal);outline-offset:-3px}
.hl__row{display:flex;gap:var(--gap);padding:0 var(--pad);width:max-content}
.hl__row::after{content:"";flex:none;width:var(--tailw,calc(100vw - var(--pad) * 2 - var(--cw) - var(--gap)))}
.hl__slot{flex:none;width:var(--cw);scroll-snap-align:start;display:flex}
.hl__slot:not(.is-cur){cursor:pointer}
.hlc{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,40fr) 60fr;gap:clamp(24px,3vw,44px);min-height:530px;padding:clamp(26px,3vw,44px);border-radius:28px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
  transition:opacity .5s ease}
.hlc::after{content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.hl__slot:not(.is-cur) .hlc{opacity:.42}
@media (hover:hover){.hl__slot:not(.is-cur):hover .hlc{opacity:.62}}
.hlc__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hlc__title{margin-top:12px;font-size:clamp(26px,2.5vw,36px);line-height:1.2}
.hlc__copy>.hlc__title:first-child{margin-top:0}
.hlc__body{margin-top:14px;font:300 17px/1.7 var(--mix);color:var(--mute);max-width:24em}
.hlc__fig{min-width:0;position:relative}
/* 步骤 / 模式清单：可直接点选；当前项提亮、序号块反白，其余压暗 */
.steps{margin-top:22px;align-self:stretch;display:grid;gap:2px}
.steps button{display:grid;grid-template-columns:var(--numbox) 1fr;align-items:center;column-gap:14px;width:calc(100% + 20px);min-height:50px;padding:6px 10px;margin-left:-10px;border:0;border-radius:12px;background:none;text-align:left;color:#7d7468;font:300 15.5px/1.45 var(--mix);transition:color .3s ease,background-color .2s ease}
.steps b{font-weight:900;color:#958b7d;transition:color .3s ease}
.steps__n{display:grid;place-items:center;width:var(--numbox);height:var(--numbox);border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);font-size:var(--dotnum);color:#958b7d;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
@media (hover:hover){.steps button:not([aria-current]):hover{background:rgba(236,230,218,.05);color:var(--mute)}.steps button:not([aria-current]):hover b{color:var(--paper)}}
.steps button:active{background:rgba(236,230,218,.08)}
.steps button[aria-current]{color:var(--mute);cursor:default}
.steps button[aria-current] b{color:var(--paper)}
.steps button[aria-current] .steps__n{background:var(--paper);color:var(--ink);box-shadow:none}
.steps button:focus-visible{outline-offset:0}
.steps--scr button{grid-template-columns:40px 1fr;min-height:56px}
.steps--scr b{font:800 15px/1 var(--mono);letter-spacing:-.01em}
.steps__glyph{display:block;width:40px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line);opacity:.5;transition:opacity .3s ease,box-shadow .3s ease}
.steps__glyph img{width:100%;height:100%;image-rendering:pixelated}
.steps button[aria-current] .steps__glyph{opacity:1;box-shadow:0 0 0 2px var(--paper)}
.steps__k{margin-top:22px;font:900 13px/1.3 var(--mix);color:var(--mute);letter-spacing:.04em}
.steps__k+.steps{margin-top:8px}
.seqnum{margin-top:16px}
.seqnum .readout{font-size:19px}
/* 分段进度（step-player）：药丸两条边各自走 520ms easeOut，再临界阻尼回弹；当前段拉宽并随进度填充 */
.spl{display:flex;align-items:center}
.spl__slab{display:flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.spl__track{position:relative;flex:none;height:10px}
.spl__dot{position:absolute;left:0;top:0;height:100%;padding:0;border:0;border-radius:999px;background:var(--ink-3);cursor:pointer;transition:background-color .2s ease}
.spl__dot::after{content:"";position:absolute;inset:-17px -7px}   /* 第九版：命中区 ≥24px 宽 */
@media (hover:hover){.spl__dot:hover{background:#4a433a}}
.spl__dot:focus-visible{outline:2px solid var(--signal);outline-offset:5px}
.spl__ink{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:var(--paper)}
/* 2U 语音键：宽:高 = 2:1 的暖白键帽坐在深色键位里。--d = 按下深度 0..1（JS 用弹簧驱动）：
   键帽下沉 6px、侧壁阴影由 6px 收到 1px、轻压 2%；松开按弹簧回弹 */
.vkey{--d:0;flex:none;position:relative;width:clamp(170px,38cqw,252px);aspect-ratio:2/1;padding:0;border:0;border-radius:18%/36%;background:#0a0908;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.vkey__cap{position:absolute;inset:5px 5px 11px;display:grid;place-items:center;border-radius:16%/34%;background:linear-gradient(#f3eee4,#e3dccf);
  box-shadow:0 calc(6px - var(--d) * 5px) 0 #b9b1a3,inset 0 1px 0 rgba(255,255,255,.7);transform:translateY(calc(var(--d) * 6px)) scale(calc(1 - var(--d) * .02))}
.vkey__icon{position:absolute;left:50%;top:50%;height:44%;width:auto;translate:-50% -50%;-webkit-user-drag:none;pointer-events:none}
.vkey:focus-visible{outline-offset:5px}
@media (hover:hover){.vkey:hover .vkey__cap{background:linear-gradient(#f8f4ec,#e9e3d7)}}
.notes{margin-top:auto;padding-top:18px;display:grid;gap:6px}
.req{font:500 14.5px/1.65 var(--mix);color:var(--paper);padding-left:1.1em;text-indent:-1.1em}
.hlc__tag{position:absolute;z-index:4;top:16px;right:24px;font:500 11.5px/1 var(--mix);color:#8a8174;letter-spacing:.04em}
.scr{flex:none;width:min(46cqw,270px);aspect-ratio:1;border-radius:50%;background:#000;box-shadow:0 0 0 1px var(--line),0 0 0 10px #000,0 0 0 11px var(--line);margin:11px}
.scr__img{display:block;width:100%;height:100%;border-radius:50%;background-repeat:no-repeat;background-size:3200% 100%;background-position:100% 0;image-rendering:pixelated;background-image:url(shared/assets/strip-boring.png)}
.knobwrap{display:grid;justify-items:center;gap:12px;padding-bottom:6px}
.knob{--rot:0deg;position:relative;width:clamp(96px,22cqw,132px);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2e2a25,#121010 72%);box-shadow:0 0 0 1px #3d3731,0 10px 24px -8px #000,inset 0 1px 0 rgba(255,255,255,.08);cursor:pointer;touch-action:manipulation;transition:transform .32s var(--spring)}
.knob__tick{position:absolute;left:50%;top:50%;width:2px;height:20%;margin-left:-1px;background:#cfc7b8;border-radius:1px;transform-origin:50% 0;transform:rotate(var(--a)) translateY(115%)}
.knob__tick:nth-child(1){--a:180deg}.knob__tick:nth-child(2){--a:300deg}.knob__tick:nth-child(3){--a:60deg}
.knob:active{transform:scale(.95);transition-duration:.08s}
@media (hover:hover){.knob:hover{box-shadow:0 0 0 1px #6b6357,0 10px 24px -8px #000,inset 0 1px 0 rgba(255,255,255,.08)}}
.knob:focus-visible{outline-offset:5px}
.knob__hint{font:500 12.5px/1.4 var(--mix);color:var(--mute);text-align:center}
/* 轮播底部：圆点（step-player，当前卡拉宽并随演示填充）+ 暂停 / 继续 */
.hl__ctl{margin-top:22px;display:flex;justify-content:center;align-items:center;gap:10px}
.spl--hl .spl__slab{height:52px;padding:0 22px;background:rgba(236,230,218,.08);box-shadow:inset 0 0 0 1px rgba(255,246,232,.12)}
.eye--icon{display:flex;align-items:center;gap:12px}
.eye--icon img{width:36px;height:36px;border-radius:9px}
.h2--wide{margin-top:0;font-size:clamp(30px,4.4vw,64px);line-height:1.14}
.gap{font:500 14px/1.7 var(--mix);color:var(--paper);padding-left:1.1em;text-indent:-1.1em;padding-right:1em}
/* ══ 页脚：Obsidian 式三维球形关系图。canvas 画节点、连线与装饰粒子；中心 5R 字标与六个入口是 DOM（入口是真 <a>，跟随节点投影） ══ */
.foot{padding:var(--gs) var(--pad) 22px}
.orb{position:relative;height:clamp(460px,37vw,540px);overflow:hidden;touch-action:pan-y}
.orb__cv{position:absolute;inset:0;width:100%;height:100%;display:block;color:var(--paper);cursor:grab}
.orb.is-drag .orb__cv{cursor:grabbing}
.orb__nav ul{display:contents}
.orb__lb{position:absolute;left:0;top:0;z-index:3;display:inline-flex;align-items:center;min-height:38px;padding:0 10px;border-radius:10px;font:900 14.5px/1 var(--mix);color:var(--paper);text-decoration:none;white-space:nowrap;
  transform:translate(var(--x,-999px),var(--y,0px)) scale(var(--s,1));transform-origin:0 0;opacity:var(--o,1);will-change:transform;transition:opacity .2s ease}
.orb__lb.is-under{pointer-events:none}   /* 压在中心字标上时不接指针，键盘仍可聚焦 */
.orb__lb span{position:relative;padding-block:4px 6px}
.orb__lb.is-hot span::after,.orb__lb:focus-visible span::after{--rv:var(--n,8)}
.orb__lb[aria-current]{color:var(--mute)}
.orb__lb:focus-visible{outline-offset:2px;--o:1}
.mist-lightbox::backdrop{background:rgba(0,0,0,.8)}
.mist-lightbox-close{min-height:44px;padding:0 18px;border-radius:999px;font:900 14px/1 var(--mix)}   /* 材质：liquid-glass.css 透明玻璃胶囊 */


/* ══ 通用卡片 / 面板（新页面用）══
   .panel        暗面卡：ink-2 底 + 闭合细线框（首页「已经有一台 MIST」那张路径卡的样子）
   .panel--paper 暖白卡：首屏文案块 / 状态卡片栏那种暖白实底，里面的次要字用 --mute-p
   .panel--black 纯黑舞台：放产品图、圆屏、灯组
   .frame        只有闭合圆角细线框、透明底（首页「还在了解 MIST」与按主题链接那种）
   不要用单独一条横线分隔板块——要分隔就用闭合的圆角框。 */
.panel,.panel--paper,.panel--black,.frame{position:relative;border-radius:var(--r);padding:clamp(20px,2.4vw,34px)}
.panel{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.panel--paper{background:var(--paper);color:var(--ink)}
.panel--paper .lead,.panel--paper .fine,.panel--paper .cap,.panel--paper .demo,.panel--paper .hint{color:var(--mute-p)}
.panel--paper .lk{color:var(--ink)}
.panel--black{background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.frame{border:1px solid var(--line)}
.panel>:first-child,.panel--paper>:first-child,.panel--black>:first-child,.frame>:first-child{margin-top:0}

/* 页面通用板块：上留白 = --gs（相邻分节间距一致），左右 = --pad，下 0；板块之间不画横线 */
.sec{padding:var(--gs) var(--pad) 0}
.sec__head{max-width:46em;margin-bottom:26px}
.sec__head .h2{margin-top:10px}
.text{font:300 16px/1.75 var(--mix);color:var(--mute);max-width:36em}
.text b,.text strong{font-weight:900;color:var(--paper)}

/* 内页页首：给固定导航留出位置（导航 24px + 68px 高）；内页没有点阵墙首屏，用 .page-head 起头 */
.page-head{padding:140px var(--pad) 28px;max-width:calc(52em + 2 * var(--pad))}
.page-head .h1{margin-top:12px}
.page-head .lead{max-width:34em}

/* ══ 分段选择（.segs + .lg-segmented）══
   Tab、macOS / Windows、Host 1/2/3 等“一排并列、选一个”的控件。这里只管轨道与字；
   药丸 / 拖动透镜来自 liquid-glass.css + liquid-glass.js（Liquid Glass Kit 分段控件）。选择逻辑仍交给 mist.js（data-select / data-tabs / data-os-set）。 */
.segs{position:relative;display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.segs>button,.segs>a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5em;min-height:42px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--mute);font:900 14px/1 var(--mix);text-decoration:none;white-space:nowrap;transition:color .2s ease}
/* 悬停只提亮“非当前项”（之前当前项也被提亮成暖白，和暖白滑块同色，字就看不见了） */
@media (hover:hover){.segs>:not(.is-selected):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-current]):hover{color:var(--paper)}}
.segs>.is-selected,.segs>[aria-pressed="true"],.segs>[aria-selected="true"],.segs>[aria-current]{color:var(--ink)}
.segs:not(.is-ready)>.is-selected,.segs:not(.is-ready)>[aria-pressed="true"],.segs:not(.is-ready)>[aria-selected="true"],.segs:not(.is-ready)>[aria-current]{background:var(--paper)}
.segs>:focus-visible{outline-offset:1px}
.segs--block{display:flex;border-radius:18px;--lgs-r:14px}
.segs--block>button,.segs--block>a{flex:1 1 0;justify-content:center;border-radius:14px}
/* 暖白卡上的版本：凹槽 paper-2、滑块近黑、当前项字反白 */
.segs--paper{background:var(--paper-2);box-shadow:none}
.segs--paper>button,.segs--paper>a{color:var(--mute-p)}
@media (hover:hover){.segs--paper>:not(.is-selected):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-current]):hover{color:var(--ink)}}
.segs--paper>.is-selected,.segs--paper>[aria-pressed="true"],.segs--paper>[aria-selected="true"],.segs--paper>[aria-current]{color:var(--paper)}
.segs--paper:not(.is-ready)>.is-selected,.segs--paper:not(.is-ready)>[aria-pressed="true"],.segs--paper:not(.is-ready)>[aria-selected="true"],.segs--paper:not(.is-ready)>[aria-current]{background:var(--ink)}
/* 竖排（选项名较长时）与 2×2 网格（四项） */
.segs--col{display:flex;flex-direction:column;flex-wrap:nowrap;border-radius:18px;--lgs-r:14px}
.segs--col>button,.segs--col>a{justify-content:flex-start;width:100%;min-height:46px;padding:0 16px;border-radius:14px}
.segs--grid{display:grid;grid-template-columns:1fr 1fr;border-radius:18px;--lgs-r:14px}
.segs--grid>button,.segs--grid>a{justify-content:center;border-radius:14px}

/* 序号块（步骤号用 5R 点阵数字）：<i class="num" data-dot="1"></i> */
.num{display:inline-grid;place-items:center;width:var(--numbox);height:var(--numbox);border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);font-size:var(--dotnum);color:var(--paper);flex:none;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.panel--paper .num,.on-paper .num{box-shadow:inset 0 0 0 1px #b2a998;color:var(--ink)}
.num--on{background:var(--paper);color:var(--ink);box-shadow:none}

/* ══ 可展开（.xp）：全站唯一一种「展开」══
   原生 <details class="xp"> + <summary class="xp__sum"> + <div class="xp__body">（内容放在 .xp__body 里）。
   手感：Bencho image-accordion 的弹簧（springOf(10)：k .096 / 每帧阻尼 .64），被点的那一行钉在原位；图标 .pm 加号竖杠转平 = 收起。
   同组一次只开一项：外层容器写 [data-xp]；再写 data-xp-hash 则展开时地址栏改成该项 #id（可分享）。#id 直达会自动展开（含隐藏 Tab 里的项）。
   键盘：summary 上下 / Home / End 换项，Enter / Space 开合，Esc 收起回到标题。减少动态：瞬时开合。外观由各页给容器加样式（.more / .fold / .qa__item）。 */
.xp>summary{list-style:none;cursor:pointer}
.xp>summary::-webkit-details-marker{display:none}
.xp__body{overflow:hidden}
.pm{position:relative;flex:none;display:inline-block;width:14px;height:14px}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:1px;background:currentColor}
.pm::after{transform:rotate(90deg);transition:transform .34s var(--snap)}
.xp.is-open>summary .pm::after{transform:rotate(0deg)}
html.motion-ok .xp:not(.is-open) .xp__body>*{opacity:0;transition:opacity .14s ease}
html.motion-ok .xp.is-open .xp__body>*{opacity:1;transition:opacity .26s ease .08s}

/* ══ 截图卡（点开放大，mist.js data-zoom）：与首页 Console 截图同一外观；暖白卡里用 .shot--light ══ */
.shot{position:relative;display:block;width:100%;padding:0;border:0;border-radius:10px;background:#000;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 20px 40px -16px rgba(0,0,0,.75);cursor:zoom-in;transition:transform .3s var(--snap)}
.shot img{width:100%;border-radius:10px}
.shot--light{background:#f5f5f3;box-shadow:0 0 0 1px rgba(14,12,10,.14),0 14px 30px -18px rgba(14,12,10,.5)}
.shot__zoom{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(14,12,10,.78);box-shadow:inset 0 0 0 1px var(--line);color:var(--paper);transition:background-color .2s ease,color .2s ease}
@media (hover:hover){.shot:hover{transform:translateY(-2px)}.shot:hover .shot__zoom{background:var(--paper);color:var(--ink)}}
.shot:active{transform:scale(.99)}
.shot:focus-visible{outline-offset:4px}

/* ══ 成功判断（.ok）：闭合圆角框 + 对勾 + 一句「应该看到什么」。不用状态绿（状态色只表示 MIST 的灯色）══
   <div class="ok"><span class="ok__ic"></span><p>…</p></div>；可带小标题：<div><p class="ok__k">应看到</p><p class="ok__v">…</p></div>；暖白版 .ok--paper */
.ok{display:flex;align-items:center;gap:14px;max-width:38em;padding:12px 16px 12px 12px;border-radius:14px;background:rgba(236,230,218,.05);box-shadow:inset 0 0 0 1px var(--line)}
.ok p{font:500 15px/1.65 var(--mix);color:var(--paper)}
.ok__ic{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper)}
.ok__ic::after{content:"";position:absolute;left:9px;top:6px;width:6px;height:11px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ok p.ok__k{font:500 12.5px/1.3 var(--mix);color:var(--mute);letter-spacing:.04em}
.ok p.ok__v{margin-top:3px;font:900 16px/1.55 var(--mix)}
.ok--paper{background:var(--paper);box-shadow:none}
.ok--paper p,.ok--paper p.ok__v{color:var(--ink)}
.ok--paper p.ok__k{color:var(--mute-p)}
.ok--paper .ok__ic{background:var(--ink)}
.ok--paper .ok__ic::after{border-color:var(--paper)}

/* ══ 状态灯组（六颗：上排 2 + 下排 4）══ 上排左起第一颗随所选状态变色（--lamp，mist.js 写），不可点；其余五颗固定白色（用户确认）。
   宽度由所在舞台决定（首页 .stage --lw；设备操作 .lt__stage） */
.lamps{flex:none;width:var(--lw,clamp(190px,34cqw,320px));display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2.4cqw,13px)}
.lamp{display:block;aspect-ratio:1/1.08;border-radius:22%;background:#fff}
.lamps>:nth-child(1){grid-column:2}
.lamps>:nth-child(3){grid-column:1}
.lamp--live{position:relative;background:var(--lamp,#fff);transition:background-color .2s ease}
.lamp__ring{position:absolute;inset:0;border-radius:22%;border:2px solid var(--lamp,#fff);opacity:0}

/* ══ 震动涟漪舞台 ══ .dotfield 深灰底 + 浅灰等距点阵（点径:点距 = .64:.90）；.devtop 黑色机身俯视抠图压在 .rings 上面。
   .is-ringing（循环，3s 一轮三道错开 1s）/ .is-playing（mist.js data-demo 单次，一轮 2.4s）挂在 .rings 的祖先上；静止时三道圆停在机身外 */
.dotfield{--dp:20px;background-color:#2a2622;background-image:radial-gradient(circle,#3a352f calc(var(--dp) * .356),transparent calc(var(--dp) * .356 + .6px));background-size:var(--dp) var(--dp);background-position:center}
.devtop{position:relative;width:min(100%,270px);aspect-ratio:1200/1194}
.devtop img{position:relative;z-index:1;width:100%;height:auto;-webkit-user-drag:none;filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))}
.rings{position:absolute;z-index:0;left:50%;top:50%;width:110%;aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.rings i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--paper);opacity:0}
.rings i:nth-child(1){opacity:.8;scale:1.15}
.rings i:nth-child(2){opacity:.5;scale:1.4}
.rings i:nth-child(3){opacity:.25;scale:1.65}
/* 第八版第二步：涟漪改为缓慢循环（7.5s 一轮、三道错开 2.5s），减少常驻动画；减少动态：静止三道圆 */
html.motion-ok .is-ringing .rings i{opacity:0;scale:1;animation:ring 7.5s cubic-bezier(.25,.6,.45,1) infinite}
html.motion-ok .is-ringing .rings i:nth-child(2){animation-delay:-2.5s}
html.motion-ok .is-ringing .rings i:nth-child(3){animation-delay:-5s}
@keyframes ring{0%{transform:scale(1);opacity:0}6%{opacity:.95}60%{opacity:.6}92%,100%{transform:scale(1.75);opacity:0}}
html.motion-ok .is-playing .rings i{opacity:0;scale:1;animation:ringOnce 1.4s cubic-bezier(.25,.6,.45,1) both}
html.motion-ok .is-playing .rings i:nth-child(2){animation-delay:.5s}
html.motion-ok .is-playing .rings i:nth-child(3){animation-delay:1s}
@keyframes ringOnce{0%{transform:scale(1);opacity:0}8%{opacity:.95}60%{opacity:.55}100%{transform:scale(1.75);opacity:0}}
/* .rings--once：静止时不显示，只在播放（.is-playing）时推出一轮；减少动态：播放中 / 播放后显示静止三道圆 */
.rings.rings--once i{opacity:0}
html.motion-reduce :is(.is-playing,.is-done) .rings--once i:nth-child(1){opacity:.8}
html.motion-reduce :is(.is-playing,.is-done) .rings--once i:nth-child(2){opacity:.5}
html.motion-reduce :is(.is-playing,.is-done) .rings--once i:nth-child(3){opacity:.25}

/* ══ 中屏 ══ */
@media (max-width:1100px){
  .hl{--cw:calc(100vw - 2 * var(--pad) - 80px)}
}
/* ══ 窄屏 ══ */
@media (max-width:760px){
  :root{--h3s:clamp(19px,5.4vw,22px)}
  :root{--sec:60px;--gs:var(--gap-section-m)}
  html{scroll-padding-top:88px}
  .tag{right:10px;font-size:10.5px;padding:6px 9px}
  .nav,.nav.is-compact{--nw:calc(100% - 28px);top:14px;height:58px;gap:8px;padding:0 7px 0 16px;border-radius:20px}
  .nav.is-dl{--dx:0px}
  .nav__brand .wm{font-size:15px}
  .dl{margin-left:auto;height:42px;padding:0 16px;width:auto!important}
  .dl__b{display:none}
  .nav__menu{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:999px;font:900 13px/1 var(--mix)}
  .nav__menu[aria-expanded="true"]{--_fill:var(--paper);--_fg:var(--ink)}
  .nav__nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;padding:8px;border-radius:20px;background:var(--glass-solid);box-shadow:var(--rim)}   /* 第八版：去 backdrop-filter，实色 .94 底视觉一致 */
  html.nav-open .nav__nav{display:block}
  .nav__list{flex-direction:column;align-items:stretch}
  .nav__list a{min-height:46px;font-size:15px;padding:0 16px}
  .kind,.eye{font-size:13px}
  .h1{margin-top:8px;font-size:clamp(23px,6.6vw,28px)}
  .ctas{margin-top:14px;gap:8px}
  .btn{min-height:48px;padding:0 17px;font-size:14.5px}
  .h2,.h2--big{font-size:clamp(25px,7vw,30px)}
  .lead{font-size:16px}
  .deck{padding:14px 6px 6px;border-radius:18px}
  .deck .hint{padding:0 12px 8px}
  .card{--side:8px}
  .card.is-selected{--side:0px}
  .hl{padding:0;--pad:12px;--cw:calc(100vw - 24px - 26px);--gap:10px}
  .hlc,.hlc--vibe{display:flex;flex-direction:column;gap:18px;min-height:0;height:100%;padding:18px;border-radius:20px}
  .hlc__title{font-size:clamp(22px,6.2vw,26px)}
  .hlc__body{font-size:15.5px}
  .hlc__tag{top:10px;right:16px;font-size:10.5px}
  .vkey{width:150px}
  .scr{width:40cqw;margin:8px}
  .knob{width:80px}
  .steps{margin-top:14px}
  .steps button{min-height:40px;padding:4px 10px;font-size:14px}
  .steps--scr button{min-height:46px}
  .steps__glyph{width:36px}
  .notes .req{font-size:13.5px}
  .hl__ctl{margin-top:16px;padding-inline:12px}
  .spl--hl .spl__slab{height:48px;padding:0 18px}

  .lk{white-space:normal}
  .foot{padding:var(--gs) 12px 22px}
  .orb{height:380px}
  .orb__lb{font-size:13.5px;min-height:40px;padding:0 8px}
  .panel,.panel--paper,.panel--black,.frame{border-radius:18px;padding:18px}
  .sec{padding:var(--gs) 12px 0}
  .page-head{padding:112px 20px 20px}
  .sec__head{padding-inline:8px}
  .segs{border-radius:18px}
  .segs--grid>button,.segs--grid>a{padding:0 8px}
  .ok{padding:10px 12px 10px 10px;gap:12px}
  .ok p{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 第九版 */
html.font-mm body{word-spacing:-.28em}
.steps--scr .steps__d{display:block;margin-top:6px;font:300 14px/1.5 var(--mix);color:inherit}