@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@500;600&display=swap');

:root { color-scheme:dark; --ink:#f4f0e8; --acid:#d8ff45; --glass:rgba(10,10,10,.72); }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#111; color:var(--ink); font-family:Manrope,sans-serif; }
body { min-height:100svh; display:grid; place-items:center; overflow:auto; padding:18px; }
button { font:inherit; }
.stage { position:relative; width:390px; height:585px; max-width:calc(100vw - 24px); max-height:calc((100vw - 24px) * 1.5); min-height:0; padding:0; overflow:hidden; background:#080808; border-radius:22px; box-shadow:0 28px 90px rgba(0,0,0,.55); }
.topbar { position:absolute; z-index:5; left:0; right:0; top:0; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border:0; background:linear-gradient(rgba(0,0,0,.72),transparent); font:500 9px "DM Mono",monospace; letter-spacing:.12em; pointer-events:none; }
.brand { color:inherit; text-decoration:none; font:600 16px Manrope,sans-serif; letter-spacing:-.04em; pointer-events:auto; }
.brand span { color:var(--acid); }
.status { display:none; }
.sound { color:rgba(255,255,255,.65); background:none; border:0; font:500 9px "DM Mono",monospace; letter-spacing:.1em; pointer-events:auto; }
.viewer { position:absolute; inset:0; overflow:hidden; background:#080808; user-select:none; }
.stage,.viewer,.rotate-controls,.rotate-button,.rotate-icon,.orbit-mark { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.viewer video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#080808; pointer-events:none; }
.viewer video.is-hidden { visibility:hidden; }
.shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 25%,transparent 60%,rgba(0,0,0,.7)); pointer-events:none; }
.frame-corners { display:none; }
.intro { position:absolute; z-index:2; left:20px; top:70px; pointer-events:none; }
.intro p { margin:0 0 8px; color:var(--acid); font:500 8px "DM Mono",monospace; letter-spacing:.15em; }
.intro h1 { margin:0; font-size:34px; line-height:.9; letter-spacing:-.065em; font-weight:500; text-shadow:0 2px 20px rgba(0,0,0,.3); }
.angle-readout { position:absolute; z-index:2; right:19px; top:72px; font:300 27px "DM Mono",monospace; letter-spacing:-.08em; }
.angle-readout sup { color:var(--acid); font-size:.36em; vertical-align:top; margin-left:3px; }
.rotate-controls { position:absolute; z-index:6; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:20px; padding:9px 12px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(6,6,6,.48); box-shadow:0 16px 38px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.07); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); pointer-events:none; }
.rotate-button { width:48px; height:48px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; cursor:pointer; touch-action:none; pointer-events:auto; -webkit-tap-highlight-color:transparent; transition:transform .16s ease,background .16s ease; }
.rotate-button:hover { background:rgba(255,255,255,.07); }
.rotate-button:active,.rotate-button.active { background:rgba(216,255,69,.1); transform:scale(.88); }
.rotate-button:disabled { opacity:.34; cursor:wait; }
.rotate-icon { position:relative; display:block; width:34px; height:34px; }
.rotate-icon::before { content:""; position:absolute; inset:4px; border:1.5px solid rgba(255,255,255,.92); border-left-color:transparent; border-radius:50%; transform:rotate(-34deg); }
.rotate-icon::after { content:""; position:absolute; left:3px; top:2px; width:7px; height:7px; border-top:1.5px solid var(--acid); border-right:1.5px solid var(--acid); transform:rotate(-70deg); }
.rotate-icon-right { transform:scaleX(-1); }
.orbit-mark { width:66px; text-align:center; line-height:1; }
.orbit-mark strong { display:block; color:#fff; font:400 16px "DM Mono",monospace; letter-spacing:-.06em; }
.orbit-mark span { display:block; margin-top:6px; color:rgba(255,255,255,.48); font:500 6px "DM Mono",monospace; letter-spacing:.15em; white-space:nowrap; }
footer { display:none; }
@media(max-width:420px){body{padding:0;background:#080808}.stage{width:100vw;height:150vw;max-width:none;max-height:100svh;border-radius:0;box-shadow:none}}