*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#050b17;color:#e0e8f2;font:15px/1.6 "Segoe UI",Arial,sans-serif}#app{forced-color-adjust:none;max-width:1300px;margin:auto;background:#080f1e}header{display:flex;justify-content:space-between;padding:24px 32px;border-bottom:1px solid #8cb7d51a;color:#879eb9;font-size:10px;letter-spacing:2.4px}.intro{text-align:center;padding:28px 22px}.eyebrow{font-size:9px;letter-spacing:3px;color:#83abc7}h1{font:normal clamp(28px,3.5vw,42px)/1.2 Georgia,serif;margin:14px 0}.intro>p:last-child{font-size:12px;color:#a0aec3;margin:0}#visual{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}canvas{display:block;width:100%;max-width:900px;height:auto;aspect-ratio:60/47}#cover{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}#cover img{height:100%;width:100%;object-fit:contain;opacity:.75}#cover>div{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:70px 20px 35px;background:linear-gradient(transparent,#01040be8)}#cover p{font:28px Georgia,serif;margin:0 0 12px}small{color:#b0bed3;font-size:12px}#panel{padding:25px 32px;background:#0d182a;border-top:1px solid #87aec722}.progress-row{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#8ca8c1}time{white-space:nowrap}#seek{width:100%;margin:13px 0 22px;cursor:pointer}input{accent-color:#85bed8}.toolbar{display:flex;flex-wrap:wrap;gap:10px}button{font:inherit;border:1px solid #9fb6cd38;border-radius:24px;background:#ffffff04;color:#dce7ef;padding:10px 21px;cursor:pointer}button:hover{background:#ffffff10}button:focus-visible,input:focus-visible{outline:2px solid #baddef;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}#start{background:#9acbe0;color:#102238;border-color:#9acbe0;min-width:115px}.settings{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:22px;font-size:13px;color:#a6bad0}.settings label{display:flex;align-items:center;gap:7px}#volume{width:115px}#status{font-size:12px;color:#b6d5e6;margin:19px 0 7px}.note{font-size:12px;color:#7f94af;max-width:830px;margin:0}footer{padding:18px 20px;text-align:center;font-size:10px;color:#7487a2;letter-spacing:.3px}#restore{position:absolute;top:16px;right:16px;background:#071424d9;font-size:12px;padding:8px 16px;z-index:3}[hidden]{display:none!important}.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.compact header,.compact .intro,.compact #panel,.compact footer{display:none}.compact #visual{height:100vh}.compact canvas{width:auto;height:auto;max-width:100%;max-height:100vh;aspect-ratio:60/47}#app:fullscreen{max-width:none;width:100%;overflow:auto}#app:fullscreen.compact{overflow:hidden}@media(max-width:600px){header{font-size:8px;letter-spacing:1px;padding:17px}.intro{padding:21px 17px}.intro>p:last-child{font-size:11px}#panel{padding:20px 17px}button{font-size:13px;padding:10px 14px}.toolbar{gap:8px}.settings{gap:17px}#cover p{font-size:20px}#cover>div{padding:30px 15px 18px}small{font-size:11px}}