:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#f2e3c6;background:#000}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{min-height:100svh}
video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
body::after{content:"";position:fixed;inset:auto 0 0;height:120px;background:linear-gradient(transparent,rgba(0,0,0,.8));pointer-events:none}
a{color:inherit;text-decoration:none}
a:hover{color:#fff9ee}
a:focus-visible,button:focus-visible{outline:2px solid #fff3d8;outline-offset:4px}
::selection{background:#f2e3c6;color:#000}
.credits{position:fixed;z-index:1;bottom:max(20px,env(safe-area-inset-bottom));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-end;gap:20px;font-size:11px;line-height:1.3}
.platform{display:inline-flex;align-items:center;min-height:44px}
.studio{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.studio>span{white-space:nowrap}
.studio a{display:flex;align-items:center;justify-content:center;min-height:32px;line-height:0}
.studio img{display:block;width:105px;height:auto}
.controls{position:fixed;z-index:2;top:max(20px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));display:flex;gap:8px}
button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#f2e3c6;cursor:pointer;transition:background .2s}
button:hover{background:rgba(0,0,0,.8)}
button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.status{position:fixed;z-index:2;left:24px;right:24px;top:80px;margin:0;text-align:center;font-size:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:600px){.credits{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));font-size:10px;gap:10px}.studio img{width:92px}.controls{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

.timeline{position:fixed;z-index:2;top:max(20px,env(safe-area-inset-top));right:calc(max(24px,env(safe-area-inset-right)) + 112px);width:min(360px,calc(100vw - 160px));min-height:44px;display:flex;align-items:center;gap:12px;padding:0 14px;border-radius:8px;background:rgba(0,0,0,.8);font-size:12px;font-variant-numeric:tabular-nums;line-height:1.3}
.timeline[hidden]{display:none}
.timeline span{flex:none}
.timeline input{flex:1;min-width:0;width:100%;height:44px;margin:0;accent-color:#f2e3c6;cursor:pointer}
.timeline input:focus-visible{outline:2px solid #fff3d8;outline-offset:2px}
.timeline input:disabled{cursor:wait}
@media(max-width:600px){.timeline{top:calc(max(16px,env(safe-area-inset-top)) + 56px);left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));width:auto}.status{top:136px}}