/* BORING 官网 · 第八版 · 快速开始独有样式（start.css）——先引 site.css 再引本文件。
   UI 树：页首（h1 + 一句说明 + 三步流程条）→ 当前一步（两张等高卡：暗面 + 暖白）→ 段尾一句成功判断 → 常驻底部的主按钮（sticky）。
   控件只有三种：流程条（sliding-indicator）、系统切换（同一个 sliding-indicator）、按钮 / 点阵下划线链接；另有原生 details 折叠与图片放大。 */

/* ══ 页首 + 三步流程 ══ */
.qs__head{max-width:none;padding-bottom:30px}
.qs__head .lead{max-width:36em}
.flow{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.flow__segs{padding:5px;gap:0}
.flow__segs>button{min-height:52px;padding:0 22px 0 11px;gap:12px;font-size:15px}
.flow__segs .num{color:var(--mute)}
.flow__segs>[aria-selected="true"] .num{background:var(--ink);color:var(--paper);box-shadow:none}
@media (hover:hover){.flow__segs>button:not([aria-selected="true"]):hover .num{color:var(--paper);box-shadow:inset 0 0 0 1px #6b6357}}
/* 液态玻璃拖动中：药丸变透镜，步骤号回到暗场样式；透镜下最近的一项提亮 */
.flow__segs.is-dragging>[aria-selected="true"] .num{background:none;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line)}
.flow__segs.is-dragging>.is-near .num{color:var(--paper);box-shadow:inset 0 0 0 1px #6b6357}
html.motion-reduce .flow__segs.is-dragging>.is-near .num{background:var(--ink);color:var(--paper);box-shadow:none}
.flow__a{position:relative;z-index:1;display:inline-grid;place-items:center;width:26px;font:500 14px/1 var(--mono);font-style:normal;color:#8a8174}

/* ══ 一步 = 一个面板 ══ */
.step{position:relative;padding:4px var(--pad) 0}
html.motion-ok .step.is-enter>*{animation:stepIn .46s var(--snap) both}
html.motion-ok .step.is-enter>:nth-child(2){animation-delay:.04s}
html.motion-ok .step.is-enter>:nth-child(n+3){animation-delay:.08s}
@keyframes stepIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.duo--ready{grid-template-columns:minmax(340px,38fr) 62fr;align-items:start}
.duo>*{min-width:0}
.duo .h2{margin-top:0}
.card-a,.card-b{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.say{margin-top:12px;font:300 18px/1.65 var(--mix);color:var(--mute);max-width:30em}
.panel--paper .say{color:var(--mute-p)}
.body{margin-top:10px;font:300 16px/1.75 var(--mix);color:var(--mute-p);max-width:34em}

/* 左卡 · 开机：纯黑承托面 = 线框示意（在哪里做）+ 圆屏启动动画（应该看到什么） */
.boot{margin-top:24px;align-self:stretch;flex:1;display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:clamp(16px,2.4vw,34px);padding:clamp(20px,2.4vw,34px);border-radius:18px;background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.boot__dev{width:100%;max-width:400px;justify-self:center;-webkit-user-drag:none}
.boot__fig{display:grid;justify-items:center;gap:22px}
.boot__scr{width:min(100%,200px);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);overflow:hidden}
.boot__scr img{width:100%;height:100%;image-rendering:pixelated}
.card-a__foot{margin-top:18px;align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px}

/* 右卡 · 系统切换（暖白卡里的 sliding-indicator：凹槽 paper-2，滑块近黑，与首页选择组同一明暗关系） */
.os{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.card-b>.os:first-child{margin-top:0}
.os__k{font:900 13px/1.3 var(--mix);letter-spacing:.04em;color:var(--mute-p)}
.panel--paper .req{margin-top:16px;color:var(--ink);font-weight:900}

/* 编号步骤（只读，不要求勾选） */
.howto{margin-top:16px;align-self:stretch;display:grid;gap:12px;max-width:36em}
.howto li{display:grid;grid-template-columns:var(--numbox) 1fr;column-gap:14px;align-items:start;font:300 16px/1.7 var(--mix);color:var(--ink)}
.howto li>span{padding-top:4px}
.howto--check{margin-top:22px;gap:14px}
.howto--check li{font:900 clamp(18px,1.6vw,22px)/1.45 var(--mix)}
.howto--check li>span{padding-top:0}
.howto--check .num{background:var(--ink);color:var(--paper);box-shadow:none}
.card-b .demo{margin-top:18px;max-width:30em;color:var(--ink);font-weight:500}

/* 折叠：共用可展开 .xp（site.css / site.js）；这里只给外观——闭合圆角细线框（暖白卡里） */
.more{margin-top:14px;align-self:stretch;border-radius:14px;box-shadow:inset 0 0 0 1px #c9c0b1;transition:box-shadow .2s ease}
.more>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:0 16px;font:900 14.5px/1.4 var(--mix);color:var(--ink);border-radius:14px}
@media (hover:hover){.more:hover{box-shadow:inset 0 0 0 1px #8f8675}}
.more>summary:focus-visible{outline-offset:-3px}
.more__body{padding:0 16px 14px;display:grid;gap:8px}
.more__body p{font:300 15px/1.7 var(--mix);color:var(--mute-p);max-width:36em}

/* 截图卡：共用 .shot（暖白卡里 .shot--light），见 site.css */
.fig{margin-top:20px;align-self:stretch;display:grid;gap:10px}
.panel--paper .gap{color:var(--ink);font-size:13px}
.fig--console .cap{padding-inline:4px}

/* 就近求助：段尾一排文字链接 */
.helps{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.card-b>.helps{margin-top:auto}
.card-b .fig+.helps,.card-b .inst+.helps,.card-b .demo+.helps{margin-top:auto}
.inst{align-self:stretch;margin-top:22px}

/* 左卡 · 下载：图标 + 标题 + 一句 → 底部 Download（与导航 Download 同为 Martian Mono 粗体） */
.card-dl__icon{width:72px;height:72px;border-radius:17px;margin-bottom:22px}
.card-dl__go{margin-top:auto;padding-top:28px}
.card-dl__go .ctas{margin-top:0}

/* ══ 段尾：成功判断一句 + 常驻底部的主按钮（Atlas sticky：到面板末尾自然停下）══ */
.step__after{margin-top:26px;padding-inline:clamp(4px,1vw,14px);font:500 15px/1.65 var(--mix);color:var(--paper);max-width:46em}
.step__after--end{display:grid;gap:4px}
.step__after--end p{max-width:none}
.step__setup{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;color:var(--mute)}
.step__setup .lk{font-size:15px}
.step__bar{position:sticky;z-index:50;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px 22px;width:max-content;max-width:100%;margin-top:14px;padding:8px 22px 8px 8px;border-radius:999px;
  transition:background-color .3s ease,box-shadow .3s ease}
.step__bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;background:var(--glass-solid);box-shadow:var(--rim);transition:opacity .3s ease}   /* 第八版：去 backdrop-filter（只留导航条），实色底 */
.step__bar.is-stuck::before{opacity:1}
.step__bar .btn{flex:none}
.step__end{display:block;height:1px;margin-top:-1px}
.step:last-of-type{padding-bottom:0}
.qs{padding-bottom:0}   /* 第八版：页脚上方的留白由 .foot 的 --gs 统一给 */

/* ══ 中屏 ══ */
@media (max-width:1100px){
  .boot{grid-template-columns:1fr;justify-items:center}
  .boot__dev{max-width:280px}
  .duo--ready{grid-template-columns:1fr}
}
/* ══ 窄屏：单列 ══ */
@media (max-width:760px){
  .qs__head{padding-bottom:18px}
  .flow{margin-top:20px;gap:10px}
  .flow__segs{display:flex;width:100%;padding:4px;border-radius:18px}
  .flow__segs{--lgs-r:14px}
  .flow__segs>button{flex:1 1 0;flex-direction:column;justify-content:center;gap:6px;min-height:72px;padding:8px 4px;border-radius:14px;font-size:12.5px;white-space:nowrap}
  .flow__a{width:12px;font-size:11px}
  .step{padding:0 12px}
  .duo,.duo--ready{grid-template-columns:1fr;gap:12px}
  .say{font-size:16px}
  .boot{grid-template-columns:1.15fr 1fr;padding:16px;gap:14px;border-radius:14px}
  .boot__dev{max-width:none}
  .boot__fig{gap:16px}
  .boot__scr{box-shadow:0 0 0 1px var(--line),0 0 0 6px #000,0 0 0 7px var(--line)}
  .card-a__foot{margin-top:14px}
  .howto li{font-size:15px}
  .card-dl__icon{width:56px;height:56px;border-radius:13px;margin-bottom:16px}
  .card-dl__go{padding-top:22px}
  .step__after{margin-top:20px;padding-inline:8px;font-size:14px}
  .step__bar{bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;padding:6px 16px 6px 6px;gap:6px 14px}   /* 手机：整宽玻璃条；右端留空给右下角页面标签 */
  .step__bar .lk{font-size:14px;white-space:nowrap}
  .step__bar::before{opacity:1}   /* 第九版：手机底栏常带底，不再悬浮在内容上 */
  .fig--console .cap{padding-inline:8px}
}
@media (max-width:360px){
  .flow__segs>button{font-size:11.5px}
  .step__bar .lk{display:none}
}