*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101418;color:#f5f6f7;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}#viewer{position:relative;width:100%;height:100%;background:radial-gradient(ellipse at 50% 25%,#263b3c,#101418 65%)}#video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab;transition:opacity .4s}canvas:active{cursor:grabbing}body:not(.playing) canvas{opacity:.18}header,footer{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;padding:30px 36px}header{top:0;background:linear-gradient(#0008,transparent)}header>* ,footer>*{pointer-events:auto}.brand{text-decoration:none;color:white;font-size:26px;letter-spacing:-1.2px;font-weight:750}.brand span{font-weight:400;opacity:.6;margin-left:8px;letter-spacing:-.5px}.badge{display:flex;gap:9px;align-items:center;border:1px solid #ffffff25;background:#1014189c;backdrop-filter:blur(14px);padding:10px 14px;border-radius:50px;font-size:13px}.badge i{height:7px;width:7px;border-radius:50%;background:#94a3a8}.badge.live i{background:#7ce2b5;box-shadow:0 0 12px #7ce2b580}.message{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;pointer-events:none}.message[hidden]{display:none}.eyebrow{font-size:11px;letter-spacing:2.4px;color:#99b7b0}h1{font-weight:550;font-size:clamp(32px,5vw,58px);letter-spacing:-2px;margin:18px 0 12px}p{font-size:15px;line-height:1.65;color:#b4bdc2;max-width:380px;margin:0}#play{pointer-events:auto;background:#b4efcf;color:#101f18;border:0;border-radius:50px;padding:16px 24px;margin-top:28px;font-size:14px;font-weight:600;display:flex;gap:28px}#play:hover{background:#ccf8df}footer{bottom:0;padding-bottom:max(26px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#000a)}.caption{display:flex;flex-direction:column;gap:7px}.caption strong{font-size:14px;font-weight:500}.caption>span{font-size:12px;color:#ffffff8a}.controls{display:flex;gap:10px}.controls button{border:1px solid #ffffff30;background:#10141880;backdrop-filter:blur(12px);width:46px;height:46px;border-radius:50%;font-size:25px}.controls button:hover{background:#ffffff30}.sound-note{position:absolute;bottom:96px;right:36px;font-size:11px;color:#ffffff70;pointer-events:none}button:focus-visible,a:focus-visible{outline:2px solid #b4efcf;outline-offset:5px}@media(max-width:600px){header,footer{padding-left:20px;padding-right:20px}header{padding-top:max(22px,env(safe-area-inset-top))}.brand{font-size:23px}.caption>span{max-width:190px;line-height:1.5}.sound-note{right:20px;bottom:100px}.badge{font-size:12px}h1{letter-spacing:-1px}}
.mode-label{border:1px solid #ffffff26;border-radius:40px;background:#101418b3;backdrop-filter:blur(14px);padding:11px 17px;font-size:12px;color:#b4efcf}@media(max-width:650px){header{flex-wrap:wrap;gap:18px}.mode-label{order:3;margin:0 auto}.badge{margin-left:auto}}