:root{color-scheme:dark;font:16px/1.75 system-ui,sans-serif;background:#0b111c;color:#dce5f4}*{box-sizing:border-box}body{margin:0}nav{display:flex;gap:24px;flex-wrap:wrap;border-bottom:1px solid #334155;padding:18px 5vw}main{max-width:1100px;margin:auto;padding:34px 22px 70px}a{color:#7bdcc0}h1{font-size:clamp(26px,4vw,40px);line-height:1.3}h2{margin-top:36px}aside{border-left:3px solid #f6c96a;background:#30291b;padding:18px;margin:24px 0}.tag{color:#7bdcc0;font-family:monospace}select{display:block;padding:10px;margin:10px 0;max-width:100%;background:#172235;color:#fff;border:1px solid #677a93;border-radius:5px}video,canvas{display:block;width:100%;border:1px solid #334155;background:#080e18;border-radius:8px}canvas{touch-action:none}input{width:100%}#error{color:#ff9e9e}#details,#position{font-family:monospace}