*{box-sizing:border-box}
:root{--black:#050509;--night:#0A1026;--cyan:#00E5FF;--magenta:#FF2BD6;--violet:#7C4DFF;--white:#F4F7FF;--gold:#FFC857;color-scheme:dark;font-family:Inter,system-ui,sans-serif}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--black);color:var(--white)}
#scene{display:block;width:100%;height:100%;touch-action:none}
.panel{position:fixed;left:18px;top:18px;width:350px;max-height:calc(100vh - 36px);overflow:auto;padding:18px;border:1px solid rgba(0,229,255,.18);border-radius:18px;background:rgba(10,16,38,.72);backdrop-filter:blur(16px);box-shadow:0 24px 90px rgba(0,0,0,.42);transition:.2s}
.panel.hidden{transform:translateX(calc(-100% + 52px));opacity:.12}.brand{display:flex;justify-content:space-between;gap:12px}.eyebrow{font:700 10px ui-monospace,monospace;letter-spacing:.18em;color:var(--cyan)}
h1{font-family:"Space Grotesk",Inter,sans-serif;margin:4px 0 2px;font-size:24px;letter-spacing:-.03em}p{margin:0;color:rgba(244,247,255,.52);font-size:12px}h2{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:rgba(244,247,255,.68);margin:19px 0 10px}
.control{margin:11px 0}.control label{display:flex;justify-content:space-between;font-size:12px;color:rgba(244,247,255,.72);margin-bottom:6px}output,#recordStatus,#fps,#segments{font-family:"JetBrains Mono",ui-monospace,monospace}input[type=range]{width:100%;accent-color:var(--violet)}
button,select{border:1px solid rgba(244,247,255,.16);border-radius:999px;background:transparent;color:var(--white);padding:8px 10px;font-size:11px}button{cursor:pointer}button:hover{border-color:rgba(0,229,255,.5);background:rgba(0,229,255,.06)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:12px;color:rgba(244,247,255,.72)}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.video-grid label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:rgba(244,247,255,.62)}
.record-row{display:flex;align-items:center;gap:10px;margin-top:9px}.primary{flex:1;border:0;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta));color:var(--black);font-weight:800}.recording .primary{background:linear-gradient(90deg,var(--magenta),var(--gold))}#recordStatus{font-size:10px;min-width:72px;text-align:right;color:rgba(244,247,255,.6)}
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.panel footer{display:flex;justify-content:space-between;border-top:1px solid rgba(0,229,255,.12);margin-top:16px;padding-top:11px;font-size:10px;color:rgba(244,247,255,.45)}
.help{position:fixed;right:18px;top:18px;display:flex;flex-direction:column;gap:6px;width:210px;padding:13px;border:1px solid rgba(124,77,255,.2);border-radius:18px;background:rgba(10,16,38,.58);backdrop-filter:blur(16px);font-size:10px;color:rgba(244,247,255,.48)}.help strong{color:var(--white)}
@media(max-width:800px){.panel{left:10px;top:10px;width:min(350px,calc(100vw - 20px));max-height:calc(100vh - 20px)}.help{display:none}}

.back-home{position:fixed;z-index:30;left:386px;top:22px;padding:9px 13px;border:1px solid rgba(244,247,255,.14);border-radius:999px;background:rgba(5,5,9,.58);backdrop-filter:blur(12px);font:600 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:rgba(244,247,255,.65);text-decoration:none}.back-home:hover{border-color:rgba(0,229,255,.45);color:#00E5FF}@media(max-width:800px){.back-home{left:auto;right:10px;top:10px}}