:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#101b28;color:#f5f8fc}*{box-sizing:border-box}body{margin:0}main{max-width:1180px;margin:auto;padding:18px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}h1{font-size:clamp(24px,4vw,36px);margin:0}.brand{color:#bad1e7;font-size:13px;margin:0 0 3px}#stage{color:#bad1e7;font-size:14px}.scene{position:relative;border-radius:12px;overflow:hidden;background:#182936}.scene img{display:block;width:100%;max-height:49vh;object-fit:cover;object-position:center 65%;aspect-ratio:16/9}.gear{position:absolute;left:12px;top:12px;background:#101b28ee;border-radius:8px;padding:8px 16px}.gear small{display:block;font-size:12px}.gear strong{display:block;font-size:38px;line-height:1.1}#finishBanner{position:absolute;top:25%;left:12%;right:12%;padding:18px;background:#101b28eb;text-align:center;font-size:clamp(22px,4vw,42px);font-weight:700;border-radius:10px}.message{min-height:95px;padding:16px 0 8px}h2{font-size:clamp(21px,3vw,29px);margin:0 0 6px}.message p{margin:0;color:#d8e4ee;line-height:1.5}#controls{display:flex;flex-wrap:wrap;gap:12px;margin:10px 4px 18px}button{font:inherit;touch-action:manipulation;cursor:pointer;min-height:60px;border:2px solid #6e8399;border-radius:10px;padding:12px 18px;background:#20344a;color:#fff;font-weight:600}#controls button{flex:1 1 170px}#controls button[data-gear]{font-size:clamp(23px,4vw,36px)}button.scan{outline:4px solid #ffd474;outline-offset:3px;background:#384763}button:focus-visible,a:focus-visible,summary:focus-visible{outline:4px solid #a9d6ff;outline-offset:3px}button:disabled{opacity:.65;cursor:wait}#switchPad{width:100%;background:#d4ebff;color:#13283c;border:0;min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}#switchPad small{font-size:14px;font-weight:400}#switchPad strong{font-size:24px}#status{font-size:14px;color:#bed2e4;min-height:20px}details{font-size:14px;color:#bed2e4;line-height:1.6;margin-top:22px}summary{cursor:pointer;min-height:44px}a{color:#cce6ff}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}header{align-items:flex-start}#stage{max-width:105px;text-align:right}.scene img{max-height:none;aspect-ratio:16/10}.gear{padding:6px 10px}.gear strong{font-size:28px}.message{min-height:112px}#controls button{flex:1 1 110px;padding:10px}#switchPad small{font-size:12px}#finishBanner{left:8%;right:8%;padding:14px}}