*{box-sizing:border-box}
:root{color-scheme:dark;font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',sans-serif;color:#fff}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:#100e32 url('assets/cosmos.webp') center/cover fixed}
body::before{content:'';position:fixed;inset:0;background:#07092380;z-index:-1}
header{min-height:80px;padding:12px 22px;display:flex;align-items:center;gap:14px;background:#171337b3;border-bottom:1px solid #d6b9ff55}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:2px solid #fff;border-radius:28px;background:linear-gradient(#fbffff,#b7f3ff);box-shadow:inset 0 2px 2px #fff,0 4px 0 #4a528f;color:#243565;line-height:1.15;font-family:inherit;font-weight:800;font-size:17px;text-decoration:none;cursor:pointer;touch-action:manipulation}
.primary{color:#49266f;background:linear-gradient(#ffe7ff 0%,#eeb8ff 48%,#d790f4 51%,#cba2ff 100%);box-shadow:inset 0 2px 3px #fff,0 5px 0 #7836a2}
.pill:hover{filter:brightness(1.07)}
.pill:focus-visible{outline:4px solid #ffdf70;outline-offset:5px}
.preview-badge{padding:8px 14px;border:1px solid #cdbbff99;border-radius:22px;color:#f2eaff;font-size:13px;font-weight:bold;letter-spacing:.03em;background:#392a5dd9}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:18px}
#welcome{width:min(100%,1280px);position:relative;border:2px solid #dcd5ff;border-radius:26px;overflow:hidden;box-shadow:0 10px 60px #07091faa}
#welcome img{width:100%;height:auto;display:block}
#watch{position:absolute;bottom:3.4%;left:50%;transform:translateX(-50%);width:26%;min-height:12.6%;padding:8px 6px;white-space:nowrap;font-size:clamp(16px,2.6vw,34px);border:3px solid white;border-radius:50px}
#preview{width:100%;text-align:center}
#stage{width:min(100%,calc((100svh - 245px)*1.6),1200px);margin:0 auto;border:2px solid #dcd5ff;border-radius:24px;overflow:hidden;box-shadow:0 10px 60px #07091faa;background:#15122c;line-height:0}
video{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain}
.controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
#status{font-size:17px;margin:12px auto 8px;max-width:600px;line-height:1.4}
.note{font-size:13px;color:#ddd2f2;margin:0;line-height:1.5}
#stage:fullscreen{width:100%;max-width:none;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;background:#070923}
#stage:fullscreen video{width:100%;height:100%;object-fit:contain}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){header{padding:8px;gap:8px}.preview-badge{order:3;margin:auto}.back{padding:10px;font-size:14px}main{padding:14px 8px}#stage{width:100%;border-radius:16px}#welcome{border-radius:18px}.controls{gap:10px}.controls .pill{padding:12px 18px;font-size:15px}#status{font-size:15px}#watch{width:35%;bottom:3.5%;min-height:44px;padding:8px 4px;font-size:clamp(14px,3vw,24px)}}
@media(max-width:430px){header .music-player{gap:5px;padding:5px 8px 5px 5px;margin-top:0}header .music-player .music-button{min-width:92px;padding:8px;font-size:12px}header .music-player input{width:50px}}
@media(max-height:540px) and (min-width:600px){header{min-height:64px;padding:6px 14px}.preview-badge{order:0;margin:0}main{min-height:0;padding:10px}#stage{width:min(100%,calc((100svh - 200px)*1.6))}#welcome{width:min(100%,calc((100svh - 85px)*1.777))}.controls{margin:10px 0}.controls .pill{padding:8px 16px;min-height:44px}#status{margin:8px 0;font-size:14px}.note{font-size:12px}}