/* BORING 官网 · 第八版 · 首页独有样式（home.css）——先引 site.css 再引本文件。
   视觉与第六版首页（r6/yi）一致：点阵墙首屏、主角 Agent 状态灯（舞台 + 灯组）、亮点轮播三张卡的内容（震动 / 语音 / 模式演示）、Console 段、下一步区。
   通用部分（token、导航、按钮、字阶、选择组卡片、轮播外壳、步骤清单、分段进度、2U 键帽、圆屏、旋钮、页脚）在 site.css。 */
/* ══ 首屏 ══ */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}   /* 第八版：不再铺实色底，点阵墙直接压在 bg.js 光带上 */
.hero__wallbox{position:absolute;inset:0;overflow:hidden}
.hero__wall{position:absolute;left:0;top:0;width:100%;height:100%;display:block;--dw-base:#221e1a;--dw-lit:#ece6da;--dw-signal:#ff6a00;touch-action:pan-y}
.hero__devwrap{position:absolute;z-index:1;right:calc(var(--pad) + 1.6vw);bottom:-3svh;width:min(54vw,90svh);pointer-events:none;user-select:none;will-change:transform}
.hero__dev{width:100%}
.hero__copy{position:absolute;z-index:2;left:var(--pad);bottom:var(--pad);width:min(580px,calc(100% - 2*var(--pad)));padding:32px 36px 28px;border-radius:var(--r);background:var(--paper);color:var(--ink)}
.sub{margin-top:12px;font:300 18px/1.6 var(--mix);color:var(--mute-p)}
html.js.motion-ok .hero__dev{animation:devIn 1.1s var(--out) both}
html.js.motion-ok .hero__copy{animation:copyIn .9s .1s var(--out) both}
@keyframes devIn{from{transform:translateY(5%)}to{transform:none}}
@keyframes copyIn{from{transform:translateY(18px)}to{transform:none}}


/* ══ 主角：Agent 状态灯 ══
   左：标题 + 暖白状态卡片栏；右：纯黑舞台（灯组 + 巨型状态名），说明只在选中卡片里出现一次。 */
/* ══ 第八版 · 板块等高节奏 ══ hero 之后的四个板块统一 min-height --sec-h，内容垂直居中；板块之间 --gs（桌面大、手机小）。
   内容比 --sec-h 高时只按内容撑开，不压缩；内容少时居中留白，不拉伸 */
.agent,.hl,.console,.next{min-height:var(--sec-h);margin-top:var(--gs);box-sizing:border-box}
.foot{margin-top:0}
.agent{padding:0 var(--pad);display:grid;align-content:center;gap:18px clamp(24px,3.4vw,52px);grid-template-columns:minmax(360px,32fr) 68fr;grid-template-areas:"head head" "pick stage"}
.agent__head{grid-area:head;padding:4px 0 10px}
.agent__head .h2{margin-top:10px}
.agent__head .lead{margin-top:10px}
.agent__pick{grid-area:pick;display:flex;flex-direction:column;gap:12px;min-width:0}
.agent__stage{grid-area:stage;display:flex;flex-direction:column;gap:12px;min-width:0}
.agent .demo{padding-inline:1.1em 4px}


/* 舞台 */
.stage{flex:1;container-type:inline-size;position:relative;min-height:360px;background:#000;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.8vw,44px);display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:clamp(24px,4cqw,56px);overflow:hidden}
.stage{--lw:clamp(190px,34cqw,320px)}
.stage .reel{--fmax:min(19cqw,190px);--rw:calc(100cqw - var(--lw) - 8cqw);flex:1}
[data-lamp="running"] .stage .reel__track{--i:1}
[data-lamp="waiting"] .stage .reel__track{--i:2}
[data-lamp="error"] .stage .reel__track{--i:3}
[data-lamp="done"] .stage .reel__track{--i:4}
.reel--v .reel__track{--i:var(--vi,0)}
.reel--s .reel__track{--i:var(--si,0)}

/* 六颗灯：2 + 4（上排两颗在第 2–3 列）。上排左起第一颗随所选卡片变色——它不是按钮，不响应指针；其余五颗固定蓝色 */


/* 卡 1 · 震动：深灰底 + 浅灰等距点阵（点径:点距 = .64:.90，与首屏点阵墙同比例），黑色机身俯视抠图压在涟漪上面；
   涟漪是从机身外缘向外扩散的同心圆（第六轮：圆角方形 → 圆形，间距拉宽），画在机身下层，机身不动 */
/* 震动卡底色用 site.css 的 .dotfield；机身 .devtop；涟漪 .rings（.is-ringing 循环）——都在共用层 */
/* 第八版第二步：点阵改为 canvas（.vibe__cv，铺满卡片、压在最底），指针靠近时圆点互斥（home.js，物理与页脚球体同一套 SITE.repel），
   位移硬钳制在卡片内缩边界内；卡片 overflow:hidden + 圆角只是兜底。文案与设备图在画布之上 */
.hlc--vibe{--dp:20px;background-color:#2a2622}
.vibe__cv{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
.hlc--vibe>.hlc__copy,.hlc--vibe>.hlc__fig{position:relative;z-index:1}
.hlc--vibe .hlc__copy{justify-content:flex-end}
.hlc--vibe .hlc__title{font-size:clamp(30px,3vw,44px);line-height:1.18}
.hlc--vibe .hlc__body{color:#cdc5b7}
.vibe{display:grid;place-items:center}



/* 卡 2 · 语音舞台 */
.vstage{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:clamp(20px,2.2vw,30px);border-radius:20px;background:#000;box-shadow:inset 0 0 0 1px var(--line);container-type:inline-size}
.vstage .reel{--fmax:min(19cqw,150px);--rw:100cqw}
.vstage__row{display:flex;align-items:flex-end;gap:clamp(18px,4cqw,32px)}
.vstage__row .vbox{flex:1;min-width:0}
.vbox{position:relative;display:grid;gap:8px;justify-items:end}
.vbox p{font:500 19px/1.3 var(--mix)}
.vbox__sent{position:absolute;right:0;bottom:calc(100% + 10px);padding:9px 16px;border-radius:14px 14px 4px 14px;background:var(--paper);color:var(--ink);visibility:hidden;transform:translateY(34px) scale(.9);transform-origin:100% 100%}
.vbox__field{display:flex;align-items:center;gap:8px;width:100%;height:58px;padding-inline:20px;border-radius:14px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.vbox__caret{width:2px;height:24px;background:var(--signal)}
html.motion-ok .vbox__caret{animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.vbox__listen{display:none;gap:6px;align-items:center}
.vbox__listen i{width:9px;height:9px;border-radius:50%;background:var(--paper)}
html.motion-ok .vbox__listen i{animation:listen 1s ease-in-out infinite}
.vbox__listen i:nth-child(2){animation-delay:.15s}
.vbox__listen i:nth-child(3){animation-delay:.3s}
@keyframes listen{0%,100%{transform:scale(.55);opacity:.45}50%{transform:scale(1);opacity:1}}
.vbox p.vbox__fine{justify-self:start;font:500 13px/1.6 var(--mix);color:var(--mute);padding-left:2px}
.vstage[data-step="1"] .vbox__txt{display:none}
.vstage[data-step="1"] .vbox__listen{display:flex}
.vstage[data-step="3"] .vbox__txt{display:none}
.vstage[data-step="3"] .vbox__sent{visibility:visible;transform:none}
html.motion-ok .vstage[data-step="3"] .vbox__sent{transition:transform .5s var(--spring) .38s,visibility 0s .38s}

/* 卡 3 · 模式演示（占位）：巨型模式名 + 真实固件圆屏 + 旋钮示意（双击或点按，循环 NORMAL → Codex → Claude Code） */
.sstage{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:clamp(20px,2.2vw,30px);border-radius:20px;background:#000;box-shadow:inset 0 0 0 1px var(--line);container-type:inline-size}
.sstage .reel{--fmax:min(14cqw,110px);--rw:100cqw;align-self:stretch;font-family:var(--mono);font-weight:800;letter-spacing:-.04em}
.sstage__dev{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}


/* ══ Console 与下载 ══ */
.console{padding:0 var(--pad);display:grid;align-content:center;grid-template-columns:minmax(320px,32fr) 68fr;gap:24px clamp(24px,3.4vw,52px);align-items:center}
.console__copy{display:flex;flex-direction:column;align-items:flex-start}
.console .lead{max-width:22em}
.console .fine{margin-top:10px;max-width:27em}
.cfig{min-width:0;display:grid;gap:12px}
.cfig__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 26px 48px -14px rgba(0,0,0,.75);cursor:zoom-in;transition:transform .3s var(--snap)}
.cfig__shot img{width:100%;border-radius:10px}
.cfig__zoom{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:40px;height:40px;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){.cfig__shot:hover{transform:translateY(-2px)}.cfig__shot:hover .cfig__zoom{background:var(--paper);color:var(--ink)}}
.cfig__shot:active{transform:scale(.99)}
.cfig__shot:focus-visible{outline-offset:5px}

/* ══ 下一步 ══ */
.next{padding:0 var(--pad);display:flex;flex-direction:column;justify-content:center;align-items:stretch}
.next__grid{margin-top:26px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.route{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px clamp(20px,2.4vw,34px) 22px;border-radius:var(--r);border:1px solid var(--line);transition:border-color .24s ease}
.route--go{background:var(--ink-2)}
.route p{font:300 16px/1.75 var(--mix);color:var(--mute);max-width:32em}
.route__links{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;max-width:none!important}
@media (hover:hover){.route:hover{border-color:#6b6357}}
.route:focus-within{border-color:#6b6357}



/* ══ 中屏 ══ */
@media (max-width:1100px){
  .agent{grid-template-columns:minmax(320px,38fr) 62fr}
  .console{grid-template-columns:minmax(280px,36fr) 64fr}
  .next__grid{grid-template-columns:1fr 1fr}
}
/* ══ 窄屏 ══ */
@media (max-width:760px){

  .hero{height:auto;min-height:max(100svh,700px);display:flex;flex-direction:column;justify-content:flex-end;padding:12px}
  .hero__devwrap{right:auto;left:50%;bottom:auto;top:max(74px,10svh);width:min(90vw,44svh);margin-left:calc(min(90vw,44svh) / -2)}
  .hero__copy{position:relative;left:auto;bottom:auto;width:100%;padding:20px 20px 18px;border-radius:18px}
  .sub{margin-top:8px;font-size:16px}

  .agent,.hl,.console,.next{min-height:0}
  .agent{display:flex;flex-direction:column;gap:14px;padding:0 12px}
  .agent__head{padding:0 8px 4px}
  .agent__stage{order:2}
  .agent__pick{order:3}
  .stage{min-height:0;border-radius:18px;padding:18px;gap:14px}
  .stage .reel{--fmax:19cqw}
  .lamps{width:46cqw}
  .agent .demo{padding-inline:calc(8px + 1.1em) 8px}
  .agent .cap{padding-inline:8px}

  .hlc--vibe .hlc__copy{padding:0;justify-content:flex-start}
  .hlc--vibe .hlc__fig{order:-1;flex:1}
  .hlc--vibe{--dp:14px}
  .vibe__dev{width:min(52%,200px);margin:70px auto}
  .hlc--screen{padding-top:34px}
  .hlc--vibe .hlc__title{font-size:clamp(24px,6.6vw,28px)}
  .hlc__fig.vstage,.hlc__fig.sstage{order:-1;padding:16px;border-radius:16px}
  .vstage .reel{--fmax:15cqw}
  .vbox p{font-size:16px}
  .vstage__row{padding-top:26px;align-items:center}
  .sstage .reel{--fmax:12cqw}
  .console{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:0 12px}
  .console__copy{padding:0 8px}
  .cfig .cap{padding-inline:8px}

  .next{padding:0 12px}
  .next .h2--wide{padding:0 8px;font-size:clamp(27px,7.6vw,34px)}
  .next__grid{grid-template-columns:1fr}
  .route{border-radius:18px;padding:22px 20px 18px}
}

/* ══ 首屏悬浮玻璃坞（2026-10-13 Maverick 选定）══ 标题区删除（h1 只留给读屏器）；底部居中一条玻璃条：
   左＝六颗状态灯图标（排布同 #agent：上排 2 颗在第 2、3 列，下排 4 颗；上排左起第一颗缓慢轮换五种状态色），点它跳到状态灯板块；
   右＝「开始使用」。 */
.hero__dock{position:absolute;z-index:3;left:50%;bottom:calc(var(--pad) + 8px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:7px;border-radius:999px;
  background:rgba(30,27,23,.5);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,250,240,.16),inset 0 1px 0 rgba(255,250,240,.18),0 18px 40px rgba(0,0,0,.45)}
.hero__dock .btn{min-height:52px}
.hero__lamps{display:grid;grid-template-columns:repeat(4,10px);gap:2.5px;align-content:center;height:52px;padding:0 15px 0 17px;border-radius:999px;text-decoration:none;transition:background-color .2s ease}
.hero__lamps i{display:block;width:10px;aspect-ratio:1/1.08;border-radius:22%;background:#fff}
.hero__lamps i:nth-child(1){grid-column:2;animation:heroLamp 10s steps(1) infinite}
.hero__lamps i:nth-child(3){grid-column:1}
@keyframes heroLamp{0%{background:#ffffff}20%{background:#304ffe}40%{background:#ff6d00}60%{background:#ff0033}80%{background:#00ff4c}}
@media (hover:hover){.hero__lamps:hover{background:rgba(255,250,240,.1)}}
.hero__lamps:focus-visible{outline:2px solid var(--signal,#ff6a00);outline-offset:2px}
html.js.motion-ok .hero__dock{animation:dockIn .9s .1s var(--out) both}
@keyframes dockIn{from{transform:translate(-50%,18px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero__lamps i:nth-child(1){animation:none}}
@media (max-width:760px){
  .hero__dock{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .hero__dock .btn{min-height:48px}
  .hero__lamps{height:48px}
}