:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body{margin:0;background:#080c12;width:100%;height:100%;overflow:hidden}#screen{position:relative;width:100%;height:100%;height:100dvh;background:#000}#player{position:absolute;inset:0;width:100%;height:100%;border:0}#notice{position:absolute;inset:0;display:grid;place-items:center;padding:28px;text-align:center;background:radial-gradient(ellipse at 50% 35%,#172538,#080c12 70%)}#notice[hidden],button[hidden]{display:none}.badge{font-size:12px;letter-spacing:.2em;color:#cbd9e6}h1{font-size:clamp(28px,6vw,60px);margin:24px 0 18px}p{max-width:540px;line-height:1.6;color:#bdc8d5}a{color:#fff;text-underline-offset:5px}nav{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));display:flex;gap:8px;z-index:3}button{cursor:pointer;color:#fff;border:1px solid #ffffff50;border-radius:8px;background:#111b2de8;padding:11px 15px;font-size:14px}button:focus-visible,a:focus-visible{outline:3px solid #73baff;outline-offset:3px}button:disabled{opacity:.4;cursor:default}#start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4}body.playing nav{opacity:.15;transition:opacity .2s}body.playing nav:hover,body.playing nav:focus-within{opacity:1}@media(hover:none){body.playing nav{opacity:.85}}@media(max-width:450px){nav{top:10px;right:10px}button{padding:10px;font-size:13px}}