:root{color-scheme:dark;font-family:system-ui,sans-serif}body{margin:0;overflow:hidden;background:#0b0b12;color:#eee}#stage{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none;cursor:crosshair;background:radial-gradient(ellipse at 50% 120%,rgba(80,60,160,.25),transparent 60%),linear-gradient(to top,rgba(80,120,255,.1),transparent 55%),linear-gradient(to right,transparent,rgba(255,120,80,.08))}#intro{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;pointer-events:none;z-index:3}#intro h1{margin:0;font-size:clamp(40px,9vw,64px);letter-spacing:.35em;text-indent:.35em;font-weight:800;text-shadow:0 0 30px rgba(136,170,255,.5)}#intro .tagline{margin:0 0 18px;color:#9aa}#cam-btn{pointer-events:auto;padding:14px 34px;border:1px solid #7af;border-radius:28px;background:linear-gradient(180deg,#2a3a66,#1a2440);color:#dfe9ff;font-size:17px;font-weight:600;cursor:pointer;box-shadow:0 0 24px #648cff59}#cam-btn:hover{filter:brightness(1.15)}#intro .hint{color:#667;font-size:13px;margin-top:14px}#note-display{position:absolute;top:14px;left:50%;transform:translate(-50%);font-size:clamp(38px,7vw,56px);font-weight:800;color:#fff;text-shadow:0 0 24px rgba(136,170,255,.8);opacity:0;transition:opacity .25s;pointer-events:none;z-index:2}#note-display.on{opacity:1}.chip{position:absolute;top:16px;right:16px;padding:7px 16px;border:1px solid #555;border-radius:18px;background:#14141ebf;color:#999;font-size:13px;cursor:pointer;z-index:2}.chip.on{border-color:#8af;color:#cdf}.toggle{padding:6px 14px;border:1px solid #555;border-radius:16px;background:#222;color:#999;font-size:13px;cursor:pointer}.toggle.on{border-color:#8af;color:#cdf;background:#1a2440}#dev-hud{position:absolute;top:16px;left:16px;line-height:1.5;color:#8f8;font-size:12px;text-shadow:0 1px 4px #000;pointer-events:none;z-index:2;max-width:46vw}#ctl-panel{position:absolute;top:64px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#aaa;font-size:13px;z-index:2}#ctl-panel label{display:flex;align-items:center;gap:8px}#glide{width:140px}#preset-bar{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:6px;z-index:2}.preset{padding:8px 18px;border:1px solid #555;border-radius:18px;background:#14141ebf;color:#999;font-size:14px;cursor:pointer}.preset.on{border-color:#fa8;color:#fdc;background:#402a1ad9}#guide{position:absolute;bottom:92px;left:50%;transform:translate(-50%) translateY(8px);max-width:86vw;padding:12px 22px;border-radius:22px;background:#0f1222e0;border:1px solid rgba(136,170,255,.5);color:#dfe9ff;font-size:15px;text-align:center;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;z-index:4;white-space:nowrap}#guide.show{opacity:1;transform:translate(-50%) translateY(0)}#guide-skip{top:auto;bottom:92px;right:16px;z-index:4}#cam-panel{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#cam,#overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain}#cam{transform:scaleX(-1);opacity:.85}#rec-btn{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:24px;width:74px;padding:10px 0;border:1px solid #a44;border-radius:22px;background:#2a1515d9;color:#f88;font-size:15px;cursor:pointer;z-index:2}#rec-btn.recording{background:#c22;color:#fff;border-color:#f66;animation:rec-pulse 1.2s infinite}@keyframes rec-pulse{50%{box-shadow:0 0 16px #ff3c3cb3}}#rec-result{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#000000e0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}#rec-result[hidden]{display:none}#rec-video{max-width:min(90vw,640px);max-height:60vh;border-radius:8px;background:#000}.rec-actions{display:flex;gap:12px}.rec-actions button,.rec-actions a{padding:10px 22px;border:1px solid #555;border-radius:22px;background:#222;color:#eee;font-size:15px;cursor:pointer;text-decoration:none}#rec-share{border-color:#8af;color:#cdf;background:#1a2440}#dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid #8af;opacity:0;pointer-events:none;transition:opacity .15s}#dot.on{opacity:1;background:#88aaff59;box-shadow:0 0 18px #8afc}@media(max-width:600px){#dev-hud{font-size:10px}#ctl-panel{font-size:12px;gap:6px}#glide{width:90px}.toggle{padding:5px 12px;font-size:12px}#preset-bar{left:auto;right:16px;transform:none}}