:root{color-scheme:dark;--bg:#101014;--surface:#19191f;--text:#f5f3f0;--muted:#b0adb8;--brand:#cfed9d;--hover:#e0fac0;--line:#64616d;--s1:8px;--s2:16px;--s3:24px;--radius:12px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}main{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--s3)}.player{width:min(100%,1120px);background:#000;overflow:hidden;border-radius:var(--radius);box-shadow:0 24px 80px #0005}.screen{position:relative;aspect-ratio:16/9}.screen video{display:block;width:100%;height:100%;object-fit:contain}.big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border:0;border-radius:50%;background:var(--brand);color:var(--bg);display:grid;place-items:center;box-shadow:0 0 0 10px #cfed9d20}.big-play:hover{background:var(--hover)}.big-play svg{width:28px;height:28px;margin-left:4px}.controls{background:var(--surface);padding:0 var(--s2) var(--s1)}.control-row{display:flex;align-items:center;gap:var(--s1)}button{display:grid;place-items:center;min-width:44px;min-height:44px;border:0;border-radius:8px;color:var(--text);background:transparent;cursor:pointer}button:hover{background:#383840}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--brand);outline-offset:3px}button svg{width:21px;height:21px;fill:currentColor}#play{color:var(--brand)}[hidden]{display:none!important}.time{display:flex;gap:var(--s1);font-size:12px;font-variant-numeric:tabular-nums}.slash,#duration{color:var(--muted)}.spacer{flex:1}#seek{appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;accent-color:var(--brand)}#seek:disabled{opacity:.45;cursor:wait}#seek::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:linear-gradient(to right,var(--brand) var(--progress,0%),var(--line) var(--progress,0%))}#seek::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;margin-top:-4.5px;background:var(--brand)}#seek::-moz-range-track{height:3px;background:var(--line)}#seek::-moz-range-progress{height:3px;background:var(--brand)}#seek::-moz-range-thumb{width:12px;height:12px;border:0;background:var(--brand)}#message{color:var(--muted);font-size:14px;margin:var(--s2) 0 0;max-width:1120px}#message:empty{display:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.player:is(:fullscreen,.expanded){width:100%;height:100%;border-radius:0;display:flex;flex-direction:column}.player:is(:fullscreen,.expanded) .screen{flex:1;min-height:0;aspect-ratio:auto}.player:is(:fullscreen,.expanded) .controls{flex:none}@media(max-width:600px){main{padding:var(--s1)}.player{border-radius:8px}.controls{padding:0 var(--s1) var(--s1)}.big-play{width:60px;height:60px}}

.player.expanded{position:fixed;inset:0;z-index:10}.views{display:flex;align-items:center;gap:var(--s1);margin:var(--s2) 0 0;color:var(--muted);font-size:12px;line-height:1.5}.views svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}