@scope (.keycap-scene) {
/* keys */
.key{--kc:var(--cm-key);--edge:var(--cm-edge);display:grid;place-items:center;width:1em;height:1em;flex:none;border:0;padding:0;border-radius:var(--cm-r-key);background:var(--kc);color:var(--cm-graphite);box-shadow:var(--cm-key-shadow);transition:transform var(--cm-t-press),box-shadow var(--cm-t-press)}
.key.on{--kc:var(--cm-signal);--edge:var(--cm-signal-edge)}
.key.ink{--kc:var(--cm-graphite-key);--edge:var(--cm-graphite-edge);color:var(--cm-card)}
.key.wide{width:2.1em;border-radius:.19em}
.key.down{transform:translateY(var(--cm-key-down-shift));box-shadow:var(--cm-key-shadow-down)}
.keybtn{cursor:pointer;font:inherit}
.leg{font-family:var(--cm-font-mono);font-weight:700;font-size:.36em;line-height:1}
.word{font-family:var(--cm-font-word);font-weight:600;letter-spacing:var(--cm-track-word);line-height:1}
.lock{display:flex;align-items:center;gap:.42em;font-size:19px;white-space:nowrap;text-decoration:none;color:inherit}
.lock img{height:1.5em;width:auto;display:block}
.nav .lock,.foot-row .lock{min-height:44px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;background:var(--cm-signal);color:var(--cm-graphite);font:inherit;font-weight:700;border:0;border-radius:var(--cm-r-btn);padding:14px 24px;box-shadow:var(--cm-btn-shadow);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform var(--cm-t-press),box-shadow var(--cm-t-press)}
.btn.sm{min-height:44px;padding:9px 18px;box-shadow:0 4px 0 var(--cm-signal-edge)}
.btn:hover{color:var(--cm-graphite);transform:translateY(2px);box-shadow:0 4px 0 var(--cm-signal-edge)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--cm-signal-edge)}
.btn:focus-visible{outline-color:var(--cm-graphite)}


.band{background:var(--cm-graphite);color:var(--cm-card)}
.band .mute{color:var(--cm-muted-dark)}
.modes{display:grid;gap:32px}
.modes-head{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-end}
.modes-head>div:first-child{display:grid;gap:14px;max-width:36em}
.lead{font-size:19px}
.switches{display:grid;gap:14px;justify-items:end}
.switch{display:flex;align-items:center}
.switch.mode{gap:14px;font-size:72px}
.switch.con{gap:10px;font-size:46px}
.stage{container-type:inline-size;aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:var(--cm-r-stage);background:linear-gradient(var(--cm-ground) 0 64%,var(--cm-ground-2) 64%);color:var(--cm-graphite)}
.ab{position:absolute}
.lab{position:absolute;font-family:var(--cm-font-mono);font-weight:700;font-size:max(1.05cqw,9px);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.board{left:6cqw;top:30cqw;width:56cqw;height:5cqw;background:var(--cm-edge);border-radius:.6cqw}
.tele{left:10cqw;top:4cqw;width:40cqw;height:23.5cqw;background:var(--cm-graphite);border-radius:1cqw}
.foot{left:28cqw;top:27.5cqw;width:4cqw;height:2.5cqw;background:var(--cm-graphite)}
.scr{position:absolute;inset:.8cqw;border-radius:.5cqw;overflow:hidden;background:var(--cm-graphite-key)}
.scr.live{background:var(--cm-graphite)}
.scr.live::before{content:"";position:absolute;inset:0;background:var(--cm-signal);clip-path:polygon(0 100%,0 58%,36% 32%,60% 62%,100% 22%,100% 100%)}
.scr.live::after{content:"";position:absolute;right:13%;top:13%;width:15%;aspect-ratio:1;border-radius:50%;background:var(--cm-key)}
.scr.idle{background:repeating-linear-gradient(135deg,var(--cm-graphite-key) 0 .8cqw,var(--cm-graphite) .8cqw 1.6cqw)}
.scr.appui{background:var(--cm-card)}
.scr.appui::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5cqw;background:var(--cm-ground-2)}
.scr.appui::after{content:"";position:absolute;left:calc(50% - 2cqw);top:calc(50% - 1.4cqw);width:4cqw;height:4cqw;border-radius:.8cqw;background:var(--cm-signal);box-shadow:0 .5cqw 0 var(--cm-signal-edge)}
.ps{left:54cqw;top:13.5cqw;width:4.6cqw;height:16.5cqw;border-radius:1.4cqw 1.4cqw .5cqw .5cqw;background:linear-gradient(90deg,var(--cm-key) 0 30%,var(--cm-graphite) 30% 70%,var(--cm-key) 70%);box-shadow:0 0 0 .15cqw #BDB6AA}
.xb{left:53.4cqw;top:15.5cqw;width:6.4cqw;height:14.5cqw;border-radius:.5cqw;background:radial-gradient(circle at 50% 14%,#45454d 0 1.5cqw,transparent 1.6cqw),var(--cm-graphite)}
.lap{left:72cqw;top:14cqw;width:20cqw;height:13cqw;background:var(--cm-graphite);border-radius:.8cqw}
.base{left:70cqw;top:27.2cqw;width:24cqw;height:1.4cqw;border-radius:.4cqw;background:var(--cm-track)}
.desk{left:67cqw;top:28.6cqw;width:30cqw;height:1.6cqw;border-radius:.4cqw;background:var(--cm-edge)}
.kb{position:absolute;top:40cqw;width:22cqw;height:8.4cqw;background:var(--cm-key);border-radius:1cqw;box-shadow:0 .5cqw 0 var(--cm-edge);padding:.9cqw;display:grid;grid-template-columns:repeat(11,1fr);gap:.4cqw;transition:left var(--cm-t-slide) var(--cm-ease-slide)}
.kk{background:var(--cm-keycap-idle);border-radius:.3cqw}
.kk.d{background:var(--cm-graphite)}
.ms{position:absolute;top:41cqw;width:3.6cqw;height:6.2cqw;border-radius:1.8cqw;background:linear-gradient(var(--cm-graphite),var(--cm-graphite)) center .9cqw/.4cqw 1.2cqw no-repeat,var(--cm-signal);box-shadow:0 .5cqw 0 var(--cm-signal-edge);transition:left var(--cm-t-slide) var(--cm-ease-slide)}
.stage[data-mode="tv"] .kb,.stage[data-mode="tv"] .mk{left:17cqw}
.stage[data-mode="pc"] .kb,.stage[data-mode="pc"] .mk{left:67cqw}
.stage[data-mode="tv"] .ms{left:41cqw}
.stage[data-mode="pc"] .ms{left:91cqw}
.mk{transition:left var(--cm-t-slide) var(--cm-ease-slide)}
.hl{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.trk{position:absolute;height:.3cqw;background:repeating-linear-gradient(90deg,var(--cm-track) 0 .5cqw,transparent .5cqw 1cqw)}
.trk.v{width:.3cqw;height:auto;background:repeating-linear-gradient(180deg,var(--cm-track) 0 .5cqw,transparent .5cqw 1cqw)}
.sig{position:absolute;top:-.4cqw;left:0;width:1.1cqw;height:1.1cqw;border-radius:.25cqw;background:var(--cm-signal);animation:run var(--cm-t-signal) linear infinite}
.sig.b{animation-delay:-.75s}
.sig.rev{animation-name:runback}
.sig.up{top:auto;left:-.4cqw;animation-name:runup}
.sig.pic{border-radius:50%;background:var(--cm-graphite);box-shadow:0 0 0 .15cqw var(--cm-key)}
@keyframes run{from{left:0}to{left:calc(100% - 1.1cqw)}}
@keyframes runback{from{left:calc(100% - 1.1cqw)}to{left:0}}
@keyframes runup{from{top:calc(100% - 1.1cqw)}to{top:0}}

/* scene state: driven by data-mode (tv|pc), data-con (ps|xb), data-step (0|1|2) on .stage */
.stage[data-con="ps"] .xb,.stage[data-con="xb"] .ps{display:none}
.stage[data-mode="tv"] .only-pc,.stage[data-mode="pc"] .only-tv{display:none}
.stage[data-step="0"] .kb{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.stage[data-step="1"] .lap{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.stage[data-step="2"] .ps,.stage[data-step="2"] .xb{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.stage[data-step="2"][data-mode="tv"] .tele{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
.stage[data-step="2"][data-mode="pc"] .lap{outline:.35cqw solid var(--cm-signal);outline-offset:.5cqw}
@container (max-width:520px){
  .lab{font-size:8px;line-height:1;letter-spacing:.02em}
  .lab.net{display:none}
  .lab.strm{left:60cqw;letter-spacing:0}
}

/* steps + mode text */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:28px;align-items:start}
.steps{display:grid;gap:2px;list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;width:100%;min-height:64px;text-align:left;font:inherit;color:var(--cm-muted-dark);background:transparent;border:0;padding:10px 0;cursor:pointer}
.step[aria-current="step"]{color:var(--cm-card);font-weight:700}
.step .key{font-size:44px}
.modetext{display:grid;gap:12px;justify-items:start}
.modetext h3{font-size:clamp(22px,2.6vw,32px)}
.pill{font:inherit;font-size:15px;min-height:44px;color:var(--cm-card);background:transparent;border:1.5px solid #8A857D;border-radius:var(--cm-r-pill);padding:8px 18px;cursor:pointer}
.pill:hover{border-color:var(--cm-card)}


}
@media (prefers-reduced-motion:reduce){
  .tap{animation:none}
  .sig{animation:none;left:calc(50% - .55cqw)}
  .sig.up{left:-.4cqw;top:calc(50% - .55cqw)}
  .kb,.ms,.mk{transition:none}
  .btn,.key{transition:none}
}