/* BORING 官网 · 第八版 · 配置引导（setup.css）——先引 site.css 再引本文件。
   UI 树：页首（标题 + 一句问题）→ 入口两张路径卡（= Tab：语音与输入 / 接入 Agent）→ 所选教程。
   语音与输入：左侧暖白选项卡（系统 / 输入方式 / 语音软件，桌面停驻）+ 右侧步骤（准备 → 1 选择并保存 → 2 实体练习 → 结束）。
   接入 Agent：资料缺口说明 + 两张卡（接入前准备 / 接入后检查反馈）。
   只用 site.css 的 token；彩色只有信号橙（缺口小方块、焦点）与状态灯图例。 */

/* ══ 页首 + 入口 ══ */
.setup__head{padding-bottom:22px}
.pick{padding:0 var(--pad)}
.pick__tip{font:500 14px/1.5 var(--mix);color:var(--mute);margin-bottom:12px;padding-left:2px}
.pick__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* 路径卡 = Tab。未选：暗面卡 + 闭合细线框；已选：暖白实底（与导航当前项、首页文案块同一种“选中即暖白”） */
.path{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:18px;row-gap:4px;align-items:center;
  width:100%;min-height:132px;padding:24px clamp(20px,2.4vw,32px);border:0;border-radius:var(--r);text-align:left;
  background:var(--ink-2);color:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  transition:background-color .28s var(--snap),color .28s var(--snap),box-shadow .2s ease,transform .3s var(--snap)}
.path__ic{grid-row:1/3;display:grid;place-items:center;width:78px;height:52px;border-radius:14px;background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.path__t{grid-column:2;align-self:end;font:900 clamp(19px,1.7vw,24px)/1.25 var(--mix);letter-spacing:-.01em}
.path__d{grid-column:2;align-self:start;font:300 15px/1.6 var(--mix);color:var(--mute);transition:color .28s ease}
.path__go{grid-column:3;grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font:500 16px/1 var(--mono);font-style:normal;color:var(--mute);
  transition:transform .3s var(--snap),background-color .28s ease,color .28s ease,box-shadow .28s ease}
/* 图标：2U 语音键的小键帽 / 六颗灯 2＋4（与首页灯组同一画法） */
.path__cap{display:grid;place-items:center;width:58px;height:29px;border-radius:9px/14px;background:linear-gradient(#f3eee4,#e3dccf);box-shadow:0 3px 0 #b9b1a3}
.path__cap img{height:18px;width:auto}
.path__ic--lamps{grid-template-columns:repeat(4,8px);grid-template-rows:8px 8px;gap:4px;align-content:center;justify-content:center}
.path__ic--lamps i{display:block;width:8px;height:8px;border-radius:2px;background:#fff}
.path__ic--lamps i:nth-child(1){grid-column:2}
.path__ic--lamps i:nth-child(3){grid-column:1}
@media (hover:hover){
  .path:not([aria-selected="true"]):hover{box-shadow:inset 0 0 0 1px #6b6357}
  .path:not([aria-selected="true"]):hover .path__go{transform:translateY(3px);color:var(--paper)}
}
.path:not([aria-selected="true"]):active{transform:scale(.99);transition-duration:.08s}
.path[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:none;cursor:default}
.path[aria-selected="true"] .path__d{color:var(--mute-p)}
.path[aria-selected="true"] .path__go{background:var(--ink);color:var(--paper);box-shadow:none;transform:translateY(0)}
.path:focus-visible{outline-offset:3px}
.pick__foot{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;padding-inline:2px}
.pick__foot .demo{max-width:40em}

/* 入口状态（#choose，还没选）：两张卡都是邀请态；Tab 面板全收起 */
.setup.is-choose .path__go{color:var(--paper)}

/* ══ 面板切换：只在切换那一下淡入上移（解释“内容换了”），减少动态时直接出现 ══ */
html.motion-ok .setup>[data-panel]:not([hidden]){animation:setupIn .55s var(--snap) both}
@keyframes setupIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.motion-ok .st__swap:not([hidden]){animation:swapIn .34s var(--snap) both}
@keyframes swapIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ══ 语音与输入 ══ */
.tut__grid{display:grid;grid-template-columns:minmax(300px,32fr) 68fr;gap:18px clamp(24px,3.4vw,52px);align-items:start}

/* 左：暖白选项卡（Atlas sticky：读右侧步骤时停驻，到本节末尾自然离开） */
.opts{position:sticky;top:108px}
.opts__card{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:18px 12px 14px}
.opts__grp+.opts__grp,.opts__mac>.opts__grp:first-child{margin-top:20px}
.opts__mac>.opts__grp+.opts__grp{margin-top:20px}
.opts__k{font:900 13.5px/1.3 var(--mix);color:var(--mute-p);letter-spacing:.03em;padding:0 8px 9px}
.opts__req{margin-top:14px;padding-inline:calc(8px + 1.1em) 8px;font-size:13.5px;color:var(--ink)}

/* 分段选择暖白版 .segs--paper、竖排 .segs--col、网格 .segs--grid 已收编进 site.css */

/* 右：步骤 */
.flow{display:grid;gap:14px;min-width:0;container-type:inline-size}
.st{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,32cqw,290px);gap:24px clamp(24px,3cqw,40px);align-items:center;
  padding:clamp(22px,2.6vw,34px);border-radius:var(--r);background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.st--pre{background:none}
.st__body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.st__body>.text,.st__body>.fine,.st__swap>.text,.st__swap>.fine{max-width:34em}
.st__swap{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.st__h{font-size:var(--h3s);line-height:1.3}
.st__hd{display:flex;align-items:center;gap:14px}
.st__h>.st__swap{display:block}
.st__help{margin-top:2px}

/* 成功判断 .ok 已收编进 site.css；这里只留带真实固件画面的变体 */
/* 带真实固件画面的成功判断：USB 图标（strip-usb 进入视野播一次，停在末帧） */
.ok__scr{flex:none;display:block;width:60px;height:60px;border-radius:50%;background:#000;box-shadow:0 0 0 1px var(--line),0 0 0 4px #000,0 0 0 5px var(--line);margin:5px}
.ok__strip{display:block;width:100%;height:100%;border-radius:50%;background:url(shared/assets/strip-usb.png) 100% 0/3200% 100% no-repeat;image-rendering:pixelated}

/* 语音软件分支：随选择换字；左上角是当前软件名 */
.prov{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:38em;padding:14px 18px 16px;border-radius:16px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.prov__n{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--ink-3);font:800 12px/1 var(--mono);color:var(--paper);letter-spacing:.01em}
.prov .text{color:var(--paper)}

/* 图 */
.st__fig{min-width:0;display:grid;gap:10px}
.st__fig--usb{padding:10px;border-radius:18px;background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.st__fig--usb img{width:100%;-webkit-user-drag:none}
.keybox{container-type:inline-size;display:grid;place-items:center;padding:34px 16px;border-radius:18px;background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.keybox .vkey{width:min(76cqw,210px)}

/* 结束：暖白卡（与首页首屏文案块同一种暖白） */
.st--end{grid-template-columns:1fr auto;padding-block:26px;background:var(--paper);color:var(--ink);box-shadow:none}
.st--end .ctas{margin-top:0}
.st--win{grid-template-columns:1fr}
.st--win .ctas{margin-top:8px}

/* ══ 接入 Agent ══ */
.ag__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.ag__card{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ag__card>.text{max-width:34em}
.ag__end{margin-top:auto;padding-top:12px;display:grid;gap:10px}
.ag__end .ctas{margin-top:0;gap:8px 22px}
/* 状态灯图例：纯黑凹槽里五行（只表示状态，不可点） */
.legend{align-self:stretch;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:8px;border-radius:16px;background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.legend li{display:grid;justify-items:start;gap:4px;padding:12px 12px 10px;border-radius:11px}
.legend .led{justify-self:start;margin-bottom:6px}
.legend b{font:900 14.5px/1.3 var(--mix);color:var(--paper)}
.legend span{font:500 12px/1 var(--mix);color:var(--mute);letter-spacing:.06em}

/* ══ 中屏 ══ */
@media (max-width:1100px){
  .tut__grid{grid-template-columns:minmax(280px,36fr) 64fr}
  .legend{grid-template-columns:1fr 1fr}
  .legend li{grid-template-columns:18px 1fr auto;align-items:center;column-gap:10px;padding:8px 10px}
  .legend .led{margin:0}
}
/* 步骤卡窄于 640：图放到文字下方 */
@container (max-width:640px){
  .st{grid-template-columns:1fr}
  .st__fig--usb{max-width:250px}
  .st__fig--shot{max-width:440px}
  .keybox{max-width:300px;padding:26px 16px}
  .st--end{grid-template-columns:1fr}
}
@media (max-width:900px){
  .ag__grid{grid-template-columns:1fr}
  .legend{grid-template-columns:repeat(5,minmax(0,1fr))}
  .legend li{grid-template-columns:none;align-items:start;padding:12px 10px 10px}
  .legend .led{margin-bottom:6px}
}
/* ══ 窄屏 ══ */
@media (max-width:760px){
  .setup__head{padding-bottom:16px}
  .pick{padding:0 12px}
  .pick__tip{padding-inline:8px;font-size:13.5px}
  .pick__row{gap:8px}
  .path{grid-template-columns:1fr auto;grid-template-rows:auto auto auto;row-gap:6px;column-gap:8px;min-height:0;padding:16px 14px 16px 16px;border-radius:18px;align-items:start}
  .path__ic{grid-row:1;grid-column:1;width:58px;height:40px;border-radius:11px;margin-bottom:6px}
  .path__cap{width:42px;height:21px;border-radius:7px/10px;box-shadow:0 2px 0 #b9b1a3}
  .path__cap img{height:13px}
  .path__ic--lamps{grid-template-columns:repeat(4,6px);grid-template-rows:6px 6px;gap:3px}
  .path__ic--lamps i{width:6px;height:6px;border-radius:1.5px}
  .path__t{grid-column:1/-1;grid-row:2;font-size:17px}
  .path__d{grid-column:1/-1;grid-row:3;font-size:13.5px;line-height:1.55}
  .path__go{grid-column:2;grid-row:1;width:32px;height:32px;font-size:14px}
  .pick__foot{flex-direction:column;align-items:flex-start;padding-inline:8px}
  .tut__grid{grid-template-columns:1fr;gap:12px}
  .opts{position:static}
  .opts__card{border-radius:18px;padding:16px 8px 10px}
  .st{padding:20px 18px;border-radius:18px;gap:18px}
  .st__fig{justify-self:center;width:100%}
  .st__fig--usb{max-width:230px}
  .keybox{max-width:none}
  .prov{padding:12px 14px 14px}
  .legend{grid-template-columns:1fr;padding:6px}
  .legend li{grid-template-columns:18px 1fr auto;align-items:center;column-gap:12px;padding:9px 10px}
  .legend .led{margin:0}
  .ag__end .ctas{flex-direction:column;align-items:flex-start}
}