:root{color-scheme:dark;--amber:#ffaf45;--bg:#08060b;--panel:#17131d;--line:#423241}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:#fff;font-family:system-ui,Segoe UI,Arial,sans-serif}canvas{display:block;width:100vw;height:100vh;touch-action:manipulation}#status{position:fixed;top:15px;left:18px;display:flex;gap:8px;align-items:center;color:#ffe6b3;background:#160d15a8;border:1px solid #543c3c;padding:7px 12px;border-radius:25px;font-size:13px;z-index:3}#led{width:8px;height:8px;border-radius:50%;background:#d35c4c;display:inline-block;box-shadow:0 0 10px #d35c4c}#led.ok{background:#61e9a8;box-shadow:0 0 10px #61e9a8}#caption{position:fixed;left:8%;width:84%;bottom:6%;padding:14px 20px;border-radius:18px;text-align:center;font-size:clamp(19px,2.5vw,38px);font-weight:750;line-height:1.24;text-shadow:0 2px 9px #000,0 0 12px #000;z-index:2;pointer-events:none;min-height:60px}#control{position:fixed;right:16px;top:14px;z-index:3;display:flex;gap:8px}button{font:inherit;cursor:pointer;border:none}button.icon{border:1px solid #68444a;background:#180e1fbf;color:#ffce83;border-radius:12px;padding:10px 13px;font-size:17px}#panel{position:fixed;right:12px;top:65px;width:min(350px,calc(100vw - 24px));max-height:calc(100vh - 80px);overflow-y:auto;background:#140f19ed;z-index:5;padding:18px;border:1px solid #694740;border-radius:18px;box-shadow:0 10px 45px #000a}#panel[hidden]{display:none}h1{font-size:20px;margin:0 0 4px;color:#ffbd65}p{font-size:12px;color:#c3afbc;margin:0 0 14px}label{display:block;font-size:12px;color:#ecd0c0;margin:9px 0 5px}input,select{width:100%;font:inherit;background:#27202d;border:1px solid #604651;color:#fff;border-radius:9px;padding:9px}#panel .two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}button.action{background:#4a2433;color:#ffdec6;border:1px solid #895051;border-radius:10px;padding:10px 8px;font-weight:600}button.action.primary{background:#c46c23;color:#13090c}.hint{font-size:11px;color:#bca8af}#panel #conn{font-size:12px;color:#c9d9c5;margin:8px 0}#footer{font-size:10px;color:#806f7e;margin-top:12px;text-align:center}@media(max-width:600px){#caption{bottom:7%;font-size:22px}#status{font-size:11px}#panel{font-size:14px}}
#startOverlay{position:fixed;inset:0;z-index:6;background:radial-gradient(ellipse at center,#160c19da,#020105f5);display:flex;align-items:center;justify-content:center;pointer-events:auto;text-align:center;padding:20px}#startOverlay[hidden]{display:none}.welcome{padding:24px;max-width:600px}.welcome .emoji{font-size:72px;filter:drop-shadow(0 0 35px #df6e18)}.welcome h1{font-size:clamp(32px,6vw,68px);letter-spacing:.09em;margin:10px 0 15px;color:#ffb64d;text-shadow:0 0 28px #a74307}.welcome p{font-size:clamp(15px,2vw,21px);line-height:1.5;color:#e6cbb9}.welcome .start{font-size:clamp(20px,3vw,30px);background:#e57e2d;border:2px solid #ffd486;color:#1d0810;border-radius:100px;padding:18px 43px;font-weight:900;box-shadow:0 0 44px #c6572b88;margin:20px 0 10px}#startHint{font-size:13px;color:#c4b2a8}#mediaState{font-size:11px;color:#eac397;margin-top:8px}button:focus-visible{outline:3px solid #ffe5a5;outline-offset:4px}