:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#08090a;color:#f7f7f5;font-synthesis:none}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{min-height:100dvh;overflow:hidden;background:#08090a}button,input{font:inherit}.stage{width:100vw;height:100dvh;padding:clamp(6px,1vw,14px);display:grid;place-items:center;background:#08090a}.player-shell{position:relative;width:100%;height:100%;overflow:hidden;background:#000;border:1px solid #25272b;border-radius:12px;box-shadow:0 24px 80px #00000080}.player-shell video{width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}.player-controls{position:absolute;z-index:3;inset:auto 0 0;min-height:76px;padding:24px clamp(14px,2vw,26px) 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.46) 58%,transparent 100%);opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease}.player-shell:hover .player-controls,.player-shell:focus-within .player-controls{opacity:1;transform:translateY(0)}.controls-left,.controls-right{display:flex;align-items:center;gap:8px;min-width:0}.icon-button{width:34px;height:34px;padding:0;display:grid;place-items:center;color:#fff;background:transparent;border:0;border-radius:8px;cursor:pointer;transition:background-color .13s ease,color .13s ease}.icon-button:hover{background:#ffffff1f}.icon-button:focus-visible,.quality-option:focus-visible,.center-play:focus-visible,input[type=range]:focus-visible{outline:2px solid #fff;outline-offset:2px}.volume-control{display:flex;align-items:center}.volume-control input{width:0;height:4px;margin:0;accent-color:#fff;opacity:0;cursor:pointer;transition:width .16s ease,opacity .12s ease,margin .16s ease}.volume-control:hover input,.volume-control:focus-within input{width:74px;margin:0 6px 0 4px;opacity:1}.live-pill{height:28px;padding:0 10px;display:inline-flex;align-items:center;color:#fff;background:#f31322;border-radius:7px;font-size:13px;font-weight:750;line-height:1}.viewer-count{margin-left:3px;color:#ffffffb8;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}.quality-control{position:relative;display:grid;place-items:center}.quality-current{position:absolute;bottom:29px;left:50%;transform:translate(-50%);padding:1px 5px;color:#f4f4f5;background:#494a4ee6;border-radius:5px;font-size:10px;font-weight:700;line-height:16px;pointer-events:none;white-space:nowrap}.quality-menu{position:absolute;right:0;bottom:48px;width:184px;padding:8px;overflow:hidden;background:#1d1e21f0;border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 14px 42px #0000007a;backdrop-filter:blur(20px);animation:menu-in .11s ease-out both}.quality-menu-title{padding:7px 9px 8px;color:#ffffff80;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.quality-option{width:100%;height:34px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;color:#f5f5f5;background:transparent;border:0;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer}.quality-option:hover{background:#ffffff17}.quality-option[aria-checked=true]{color:#fff;background:#ffffff12}.center-play{position:absolute;z-index:2;left:50%;top:50%;width:62px;height:62px;padding:0 0 0 3px;display:grid;place-items:center;transform:translate(-50%,-50%);color:#fff;background:#111214c7;border:1px solid rgba(255,255,255,.18);border-radius:50%;cursor:pointer;backdrop-filter:blur(12px)}.offline{text-align:center;animation:enter .45s ease-out both}.offline-mark{width:46px;height:46px;border:1px solid #393b3f;border-radius:50%;margin:0 auto 26px;position:relative}.offline-mark:after{content:"";position:absolute;inset:14px;border-radius:50%;background:#24262a}.offline h1{margin:0;font-size:clamp(30px,5vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:690}.offline p{margin:16px 0 0;color:#8d9095;font-size:clamp(15px,2vw,19px)}@keyframes enter{0%{opacity:0;transform:translateY(8px)}}@keyframes menu-in{0%{opacity:0;transform:translateY(4px) scale(.98)}}@media (hover: none){.player-controls{opacity:1;transform:none}}@media (max-width: 640px){.stage{padding:0}.player-shell{border:0;border-radius:0}.player-controls{padding:22px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.viewer-count,.volume-control input,.optional-control{display:none}.quality-menu{right:-42px}}@media (prefers-reduced-motion: reduce){.offline,.quality-menu{animation:none}.player-controls,.volume-control input{transition:none}}
