:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#080a09;color:#fff}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
#screen{position:fixed;inset:0;background:#080a09;overflow:hidden}
#film{display:block;width:100%;height:100%;object-fit:contain;background:#080a09}
#ui{position:absolute;inset:0;pointer-events:none}#ui button,#ui section{pointer-events:auto}
body[data-mode=cw] #ui,body[data-mode=ccw] #ui{inset:auto;left:50%;top:50%;width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}
body[data-mode=ccw] #ui{transform:translate(-50%,-50%) rotate(-90deg)}
#controls{position:absolute;left:5%;right:5%;bottom:6%;margin:auto;max-width:1200px;padding:28px 32px;background:rgba(16,20,18,.96);border:1px solid #555e58;border-radius:8px;box-shadow:0 14px 60px #0008;transition:opacity .2s}
#controls.off,#ui #controls.off{opacity:0;pointer-events:none;visibility:hidden}
.heading{display:flex;align-items:baseline;gap:22px;margin-bottom:22px}.heading strong{font-size:26px}.heading span{font-size:18px;color:#c8d0cb}
.actions{display:flex;flex-wrap:wrap;gap:10px}
button{border:1px solid #727d75;background:#242b27;color:#fff;border-radius:5px;padding:14px 18px;font:600 18px Arial;cursor:pointer;min-height:52px}
button:hover,button:focus-visible{background:#48574c;outline:3px solid white;outline-offset:2px}
#fullscreen,#start{background:#ed1119;border-color:#ed1119}
p{font-size:17px;line-height:1.6;color:#e1e5e2;max-width:920px;margin:20px 0 16px}
a{font-size:18px;color:#fff;text-underline-offset:5px}
#notice{position:absolute;top:6%;left:50%;transform:translateX(-50%);max-width:90%;padding:14px 24px;border-radius:5px;background:#101713ed;font-size:20px;text-align:center;pointer-events:none}
#notice:empty{display:none}
#start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:26px;padding:22px 34px}
#controls{z-index:1}#start{z-index:2}#notice{z-index:3}
[hidden]{display:none!important}
@media(max-width:600px){#controls{padding:20px;bottom:3%;left:4%;right:4%}.heading{display:block}.heading span{display:block;margin-top:6px}.heading strong{font-size:22px}button{font-size:16px;padding:12px}.actions{gap:8px}p{font-size:15px;line-height:1.5}a{font-size:16px}}
@media(prefers-reduced-motion:reduce){#controls{transition:none}}