/* BORING 官网 · 第八版 · 设备操作（reference.css）——先引 site.css 再引本文件。
   UI 树：页头 → 三个 Tab（分段选择）→ 按键与屏幕 / 状态灯 / 连接与切换 → 页尾求助。
   只放本页独有的版式与三个演示件（热点图 + 说明卡 + 圆屏轮盘、灯组 + 振动、线框图组合键）；
   按钮、选择组卡片、分段选择、字阶、卡片外壳全部来自 site.css。 */

/* ── 页头与 Tab ── */
.lk--in{display:inline;min-height:0;padding:0;font:inherit;font-weight:900;color:var(--paper)}
.lk--in span{padding-block:0 4px}
.rtabs__bar{padding:6px var(--pad) 0}
.rtabs__segs>button{min-height:46px;padding:0 22px;font-size:15px}

/* 面板：一次只显示一个；切换时横向进入（JS，WAAPI） */
.rp{padding:44px var(--pad) 24px}
.rp__head{margin-bottom:22px}
.rp__head .h2{margin-top:0}
.rp__foot{margin-top:22px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 32px;padding-inline:clamp(4px,1vw,14px)}
.rp__links{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px;margin-left:auto}

/* 叠放容器：所有候选都占同一格，未选中的仅不可见——容器高度 = 最高的那一项，换选不跳版 */
.stack{display:grid}
.stack>*{grid-area:1/1;min-width:0}
.stack>[hidden]{display:block!important;visibility:hidden}
.stack>.well__row[hidden]{display:flex!important}

/* ══ Tab 1 · 按键与屏幕 ══ */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fact{display:flex;align-items:center;gap:22px;padding:22px clamp(20px,2.4vw,30px);border-radius:var(--r);border:1px solid var(--line)}
.fact__copy .text{margin-top:6px}
.fact__scr,.fact__scrs img{flex:none;display:block;border-radius:50%;background:#000;box-shadow:0 0 0 1px var(--line),0 0 0 5px #000,0 0 0 6px var(--line)}
.fact__scr{width:74px;margin:6px;overflow:hidden}
.fact__scr img,.fact__scrs img{width:100%;height:auto;image-rendering:pixelated}
.fact__scrs{flex:none;display:flex;margin:6px}
.fact__scrs img{width:52px;margin-left:-8px}
.fact__scrs img:first-child{margin-left:0}

.ctl{margin-top:14px;display:grid;grid-template-columns:minmax(0,7fr) minmax(360px,5fr);gap:14px;align-items:stretch}
.ctl__stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:22px clamp(20px,2.6vw,36px) clamp(20px,2.6vw,36px);border-radius:var(--r);background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.ctl__photo{position:relative;width:min(100%,600px)}
.ctl__photo>img{width:100%;-webkit-user-drag:none;user-select:none}
/* 热点：常显一圈很淡的细框（知道哪里能点）；悬停提亮；选中 = 暖白粗框。不显示编号 */
.hs{position:absolute;padding:0;border:0;border-radius:20%;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hs::before{content:"";position:absolute;inset:-3px;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(236,230,218,.42);transition:box-shadow .2s ease,inset .3s var(--snap)}
.hs--round{border-radius:50%}
@media (hover:hover){.hs:not(.is-selected):hover::before{box-shadow:inset 0 0 0 2px rgba(236,230,218,.75)}}
.hs.is-selected::before{inset:-6px;box-shadow:inset 0 0 0 3px var(--paper),0 0 0 3px rgba(0,0,0,.55)}
.hs:active::before{inset:-1px}
.hs:focus-visible{outline:none}
.hs:focus-visible::before{box-shadow:inset 0 0 0 3px var(--signal)}

/* 说明卡（暖白）：上 = 控件身份 + 说明；下 = 固件圆屏 */
.ctl__info{display:flex;flex-direction:column;gap:8px;min-width:0}
.card-i{flex:1;display:flex;flex-direction:column;gap:18px;padding:clamp(20px,2.2vw,28px);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.ci__id{display:flex;align-items:center;gap:14px;min-height:52px}
.ci__name{font:900 clamp(22px,2vw,28px)/1.25 var(--mix);letter-spacing:-.01em}
.ci__desc{margin-top:10px;font:300 16px/1.75 var(--mix);color:var(--ink);max-width:30em}
.ci__menu{margin-top:12px}
.ci__menu p{font:300 15px/1.6 var(--mix);color:var(--mute-p)}
.ci__menu b{font-weight:900;color:var(--ink);margin-right:.8em}
/* 键帽图标：冻结 SVG 只缩放；放在一颗暖白小键帽里 */
.kc{position:relative;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:linear-gradient(#f6f2ea,#e6dfd2);box-shadow:0 0 0 1px #c9c1b2,0 3px 0 #bdb4a5}
.kc img{position:absolute;left:50%;top:50%;width:auto;height:46%;max-width:none;translate:-50% -50%}
.kc--2u{width:96px}
.kc--crop{border-radius:50%;background-color:#000;background-image:url(shared/assets/device-control-photo.webp);background-repeat:no-repeat;box-shadow:0 0 0 1px #c9c1b2}
html.motion-ok .ci.is-enter{animation:ciIn .34s var(--snap)}
@keyframes ciIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 圆屏井：纯黑，固定高度；轮盘三项围着屏幕排成半圆上沿（Bencho radial：发牌错峰 28ms、420ms 轻回弹） */
.well{--sd:clamp(150px,7vw + 80px,190px);--R:calc(var(--sd) / 2 + 76px);position:relative;flex:1;min-height:400px;border-radius:18px;background:#000;box-shadow:inset 0 0 0 1px var(--line);color:var(--paper);overflow:hidden;container-type:inline-size}
.well__label{position:absolute;left:18px;top:14px;right:18px;font:500 12.5px/1.4 var(--mix);color:var(--mute)}
.well__scr{position:absolute;left:50%;top:calc(50% + 40px);width:var(--sd);aspect-ratio:1;translate:-50% -50%;border-radius:50%;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line),0 0 0 9px #000,0 0 0 10px var(--line)}
.well__img{width:100%;height:100%;image-rendering:pixelated}
.well__strip{position:absolute;inset:0;border-radius:50%;background:#000 no-repeat 100% 0/3200% 100%;image-rendering:pixelated;opacity:0}
.well.is-strip .well__strip{opacity:1}
/* 轮盘收起时屏幕回到井的正中；展开时下移让出上沿（同一条曲线） */
.well__scr,.fan{transition:top .42s var(--snap)}
.well:not([data-control="function"]) .well__scr,.well:not([data-control="function"]) .fan{top:calc(50% - 8px)}
.fan{position:absolute;left:50%;top:calc(50% + 40px);width:0;height:0;z-index:2}
.fan__opt{--x:calc(cos(var(--a)) * var(--R));--y:calc(sin(var(--a)) * var(--R));position:absolute;left:0;top:0;display:grid;place-items:center;min-width:86px;min-height:40px;padding:0 16px;border:0;border-radius:999px;
  background:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line);color:var(--mute);font:900 14px/1 var(--mix);white-space:nowrap;cursor:pointer;
  transform:translate(-50%,-50%) scale(.4);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .42s cubic-bezier(.24,1.34,.38,1),opacity .2s ease,visibility 0s .42s,background-color .2s ease,color .2s ease}
.fan[data-open="true"] .fan__opt{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .42s cubic-bezier(.24,1.34,.38,1) calc(var(--i) * 28ms),opacity .2s ease calc(var(--i) * 28ms),visibility 0s,background-color .2s ease,color .2s ease}
@media (hover:hover){.fan__opt:not(.is-selected):hover{color:var(--paper);box-shadow:inset 0 0 0 1px #6b6357}}
.fan__opt.is-selected{background:var(--paper);color:var(--ink);box-shadow:none;cursor:default}
.fan__opt:active{scale:.95}
.fan__opt:focus-visible{outline-offset:3px}
.well__foot{position:absolute;left:14px;right:14px;bottom:14px}
.well__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;min-height:42px}
.wbtn{min-height:44px;padding:0 18px;border-radius:999px;font:900 14px/1 var(--mix)}   /* 材质：.lg-button--clear */
.well__cap{font:500 12.5px/1.45 var(--mix);color:var(--mute)}
.well__mode{display:flex;align-items:baseline;gap:10px;font:500 12.5px/1 var(--mix);color:var(--mute)}
.well__mode b{font:800 15px/1 var(--mono);color:var(--paper);letter-spacing:-.01em}
.ctl__other{display:none;align-self:flex-start;border:0;background:none;cursor:pointer}

/* ══ Tab 2 · 状态灯 ══ */
.lt{display:grid;grid-template-columns:minmax(340px,32fr) 68fr;gap:14px clamp(14px,2vw,24px);align-items:stretch}
.lt .deck{align-self:start}
.lt__fig{display:flex;flex-direction:column;gap:12px;min-width:0}
.lt__stage{flex:1;container-type:inline-size;position:relative;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:clamp(24px,2.8vw,44px);border-radius:var(--r);background:#000;border:1px solid var(--line)}
.lt__stage .lamps{--lw:clamp(220px,46cqw,380px)}
.lt__now{font:500 13px/1 var(--mix);color:var(--mute);letter-spacing:.04em}
.lt__fig .cap{padding-inline:4px}

/* 振动提醒：首页 #vibe 卡同一套舞台（site.css .dotfield + .devtop + .rings--once：只在“播放”时扩散一轮） */
.vb{margin-top:14px;display:grid;grid-template-columns:minmax(0,40fr) 60fr;gap:clamp(24px,3vw,44px);min-height:440px;padding:clamp(26px,3vw,44px);border-radius:28px;box-shadow:inset 0 0 0 1px var(--line)}
.vb__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
.vb__title{font:900 clamp(28px,2.8vw,40px)/1.18 var(--mix);letter-spacing:-.01em;font-feature-settings:"palt"}
.vb__title>span{display:block}
.vb__body{margin-top:14px;font:300 17px/1.7 var(--mix);color:#cdc5b7}
.play{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
@media (hover:hover){.btn:hover i.play{transform:none}}
.vb__fig{display:grid;place-items:center;min-width:0}

/* ══ Tab 3 · 连接与切换 ══ */
.cn{position:relative;display:grid;gap:18px clamp(24px,3.4vw,52px);padding:clamp(22px,2.6vw,36px);border-radius:var(--r);background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.cn+.cn{margin-top:14px}
.cn--bt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy fig" "pick fig" "acts fig" "after after" "fold fold";grid-template-rows:auto auto 1fr auto auto;align-items:start}
.cn__copy{grid-area:copy}
.cn__copy .text{margin-top:8px}
.cn__pick{grid-area:pick;max-width:440px}
.cn__fig{grid-area:fig;display:flex;flex-direction:column;gap:12px;min-width:0}
.cn__acts{grid-area:acts}
.cn__acts .req{margin-top:16px}
.cn__acts .ctas{margin-top:14px}
.cn__after{grid-area:after;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-top:4px}
.cn__after .text{max-width:40em}

/* 线框图：纯黑承托面；四颗相关键帽叠在线框对应位置（冻结图标，只缩放）。
   多功能键橙色长亮 = 按住；目标键橙色闪一下再变回白色 = 短按 */
.wire{position:relative;border-radius:18px;background:#000;box-shadow:inset 0 0 0 1px var(--line);padding:clamp(8px,2vw,24px)}
.wire__in{position:relative;max-width:470px;margin:0 auto}
.wire img{-webkit-user-drag:none;user-select:none}
.wire__in>img{width:100%}
.wire__in>.wk{position:absolute;display:grid;place-items:center;border-radius:13%/14%;background:#fff;box-shadow:0 0 0 1px #8c857a;transition:background-color .18s ease,box-shadow .18s ease,transform .12s ease}
.wk img{position:absolute;left:50%;top:50%;height:42%;width:auto;max-width:none;translate:-50% -50%}
.wk--2u{border-radius:7%/14%}
.wk.is-target{box-shadow:0 0 0 2px var(--signal)}
.wk.is-held{background:var(--signal);box-shadow:0 0 0 2px var(--signal)}
.wk.is-tapped{background:var(--signal);box-shadow:0 0 0 2px var(--signal);transform:scale(.92)}
[data-phase="static"] .wk[data-key="function"]{background:var(--signal);box-shadow:0 0 0 2px var(--signal)}
/* 三个动作：当前阶段提亮，其余压暗；结束后三步同亮度（已演示）；减少动态：三步全亮 */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.act{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 14px 12px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);color:var(--mute);transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.act__k{font:900 16px/1 var(--mix);color:var(--paper)}
.act__kc{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:linear-gradient(#f6f2ea,#e6dfd2);box-shadow:0 2px 0 #bdb4a5}
.act__kc img{position:absolute;left:50%;top:50%;height:46%;width:auto;max-width:none;translate:-50% -50%}
.act__kc--tg:has(.is-2u:not([hidden])){width:72px}
.act__v{font:500 13px/1.4 var(--mix)}
[data-phase="hold"] .act--hold,[data-phase="tap"] .act--tap,[data-phase="release"] .act--release,[data-phase="static"] .act{background:var(--paper);color:var(--mute-p);box-shadow:none}
[data-phase="hold"] .act--hold .act__k,[data-phase="tap"] .act--tap .act__k,[data-phase="release"] .act--release .act__k,[data-phase="static"] .act .act__k{color:var(--ink)}
[data-phase="hold"] .act:not(.act--hold),[data-phase="tap"] .act:not(.act--tap),[data-phase="release"] .act:not(.act--release){opacity:.45}
[data-phase="done"] .act{box-shadow:inset 0 0 0 1px #6b6357;color:var(--paper)}

/* 重新配对：闭合圆角框的折叠；展开先看到清除后果，再看步骤 */
.fold{grid-area:fold;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.fold__sum{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 20px;border-radius:16px;font:900 16px/1.3 var(--mix);transition:background-color .2s ease}
@media (hover:hover){.fold__sum:hover{background:rgba(236,230,218,.05)}}
.fold__sum:focus-visible{outline-offset:-3px}
.fold__body{padding:4px 20px 20px}
.fold__steps{margin-top:14px;display:grid;gap:12px}
.fold__steps li{display:flex;gap:14px;align-items:flex-start}
.fold__steps p,.fold__help{font:300 15.5px/1.7 var(--mix);color:var(--mute);max-width:40em}
.fold__steps .num{margin-top:1px}
.fold__help{margin-top:14px}

/* USB */
.cn--usb{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
.cn--usb .cn__fig{grid-area:auto}
.cn--usb .cn__fig .cap{padding-inline:4px}
.wire--usb{padding:clamp(8px,1.6vw,20px) 0 0;overflow:hidden}
.wire--usb img{width:min(100%,520px);margin:0 auto}
.cn__usb{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.gaptag{display:inline-block;margin-left:.6em;padding:3px 8px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line);font:500 11.5px/1.2 var(--mix);color:var(--mute);text-indent:0;vertical-align:.1em;white-space:nowrap}
.usb-steps{align-self:stretch;display:grid;gap:4px;counter-reset:s}
.cn__usb .ok{align-self:stretch;max-width:none}
.usb-steps li{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 4px;font:900 17px/1.3 var(--mix)}

/* ══ 页尾：没有找到需要的说明？ ══ */
.rnone{padding:var(--gs) var(--pad) 0}
.rnone__box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.rnone__t{font:900 clamp(20px,1.8vw,26px)/1.3 var(--mix)}
.rnone__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}

/* ══ 中屏 ══ */
@media (max-width:1100px){
  .ctl{grid-template-columns:minmax(0,1fr) minmax(330px,1fr)}
  .lt{grid-template-columns:minmax(320px,38fr) 62fr}
  .cn--bt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .acts{grid-template-columns:1fr}
  .act{flex-direction:row;align-items:center;padding:10px 14px}
  .act__k{min-width:3em}
}
/* ══ 窄屏 ══ */
@media (max-width:760px){
  .rtabs__bar{padding:4px 12px 0}
  .rtabs__segs{display:flex;border-radius:18px}
  .rtabs__segs{--lgs-r:14px}
  .rtabs__segs>button{flex:1 1 0;justify-content:center;padding:0 8px;font-size:14px;border-radius:14px}
  .rp{padding:28px 12px 20px}
  .rp__head{padding-inline:8px;margin-bottom:16px}
  .rp__foot{padding-inline:8px;flex-direction:column}
  .rp__links{margin-left:0;flex-direction:column;align-items:flex-start}
  .facts{grid-template-columns:1fr;gap:8px}
  .fact{padding:16px 18px;gap:16px;border-radius:18px}
  .fact__scr{width:58px}
  .fact__scrs img{width:40px;margin-left:-10px}
  .ctl{grid-template-columns:1fr;gap:10px}
  .ctl__stage{padding:16px 12px 14px;border-radius:18px}
  .card-i{padding:18px;border-radius:18px;gap:14px}
  .ci__desc{font-size:15px}
  .well{--sd:128px;--R:116px;min-height:318px}
  .well__scr,.fan{top:calc(50% + 30px)}
  .fan__opt{min-width:74px;min-height:38px;padding:0 12px;font-size:13.5px}
  .ctl__other{display:inline-flex;margin-left:8px}
  .lt{display:flex;flex-direction:column;gap:12px}
  .lt__fig{order:-1}
  .lt .deck{align-self:stretch}
  .lt__stage{min-height:0;padding:28px 18px 22px;gap:18px;border-radius:18px}
  .lt__stage .lamps{--lw:58cqw}
  .vb{display:flex;flex-direction:column;gap:12px;min-height:0;padding:18px;border-radius:20px;--dp:14px}
  .vb__fig{order:-1;padding:56px 0}
  .vb__dev{width:min(52%,200px)}
  .vb__title{font-size:clamp(23px,6.4vw,27px)}
  .vb__body{font-size:15.5px}
  .cn{padding:18px;border-radius:18px}
  .cn--bt{display:flex;flex-direction:column;align-items:stretch}
  .cn--bt .cn__fig{order:0}
  .acts{grid-template-columns:repeat(3,1fr);gap:6px}
  .act{flex-direction:column;align-items:flex-start;padding:10px;gap:8px}
  .act__k{min-width:0;font-size:15px}
  .act__kc{width:34px;height:34px}
  .act__kc--tg:has(.is-2u:not([hidden])){width:58px}
  .act__v{font-size:12px}
  .cn__after{flex-direction:column;align-items:flex-start}
  .fold__sum{padding:0 16px}
  .fold__body{padding:2px 16px 16px}
  .cn--usb{display:flex;flex-direction:column;align-items:stretch}
  .usb-steps li{font-size:16px}
  .gaptag{margin-left:0;margin-top:4px}
  .rnone{padding:var(--gs) 12px 0}
  .rnone__box{flex-direction:column;align-items:flex-start}
}