@scope(.tape-app){:scope{--bg:#0c0b0a;--bg-elev:#161412;--bg-elev-2:#1e1a17;--line:#ffecd61a;--text:#f6f1ea;--muted:#9c948b;--faint:#6d655c;--red:#ff3b4e;--red-deep:#c81e30;--sand:#e8d7b5;--ok:#85d996;--warn:#f0b45a;--shadow:0 28px 80px #00000073;--font-display:var(--font-sans,Inter, ui-sans-serif, sans-serif);--font-body:var(--font-sans,Inter, ui-sans-serif, sans-serif);--font-mono:var(--font-mono,ui-monospace, monospace);--radius:22px;color-scheme:dark;isolation:isolate;background:radial-gradient(1200px 600px at 80% -10%, #ff3b4e29, transparent 55%), radial-gradient(900px 500px at -10% 110%, #e8d7b514, transparent 50%), var(--bg);color:var(--text);font-family:var(--font-body);letter-spacing:-.011em;min-height:calc(100dvh - 7.5rem);position:relative}:scope:before{content:"";pointer-events:none;z-index:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}*,:before,:after{box-sizing:border-box}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.page{z-index:1;min-height:calc(100dvh - 7.5rem);padding:28px 28px 40px;position:relative}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:36px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand strong{font-family:var(--font-display);letter-spacing:-.04em;font-size:1.15rem;display:block}.brand span{color:var(--muted);font-size:.82rem}.topbar-meta,.topbar-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.chip{border:1px solid var(--line);color:var(--muted);background:#ffffff08;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:.78rem;display:inline-flex}.chip svg{width:14px;height:14px}.chip-ok{color:var(--ok);border-color:#85d99633}.chip-warn{color:var(--warn);border-color:#f0b45a40}.home-main{max-width:980px;margin:0 auto}.hero{margin-bottom:28px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--sand);margin:0 0 12px;font-size:.72rem}h1,.hero-title{font-family:var(--font-display);letter-spacing:-.055em;margin:0 0 16px;font-size:clamp(2.4rem,6vw,4.6rem);font-weight:700;line-height:.92}h1 span,.hero-title span{color:#c7b8a5;display:block}.lede{max-width:58ch;color:var(--muted);margin:0;font-size:1.05rem;line-height:1.55}.banner{background:#f0b45a14;border:1px solid #f0b45a3d;border-radius:16px;align-items:flex-start;gap:12px;margin-bottom:18px;padding:14px 16px;display:flex}.banner p{color:var(--muted);margin:4px 0 0}.banner svg{color:var(--warn);flex:none;margin-top:2px}.stage-card{border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(#ffffff08,#ffffff04);border-radius:28px;overflow:hidden}.stage{aspect-ratio:16/9;background:#070706;position:relative;overflow:hidden}.stage-camera{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.stage-placeholder{place-items:center;display:grid;position:absolute;inset:0}.stage-grid{background-image:linear-gradient(#ffecd60d 1px,#0000 1px),linear-gradient(90deg,#ffecd60d 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;mask-image:radial-gradient(circle,#000,#0000 75%)}.stage-placeholder p{color:var(--faint);text-align:center;max-width:28ch;position:relative}.stage-shade{background:linear-gradient(#0000,#0000009e);height:42%;position:absolute;inset:auto 0 0}.record-orb{background:0 0;border:0;border-radius:50%;width:92px;height:92px;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}.record-orb-ring,.record-orb-core{border-radius:50%;position:absolute;inset:0}.record-orb-ring{border:2px solid #ffffff73;animation:2.4s ease-out infinite pulse}.record-orb-core{background:radial-gradient(circle at 35% 30%, #ff7380, var(--red) 55%, var(--red-deep));inset:10px;box-shadow:0 10px 30px #ff3b4e59}.record-orb-label{z-index:1;font-family:var(--font-display);letter-spacing:.04em;font-weight:700;position:relative}.settings{padding:20px}.setting-block{margin-bottom:16px}.setting-label{color:var(--faint);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;font-size:.78rem;display:block}.segmented{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.segmented button{text-align:left;border:1px solid var(--line);background:var(--bg-elev);border-radius:16px;align-items:center;gap:10px;padding:12px;display:flex}.segmented button small{color:var(--faint);font-size:.75rem;display:block}.segmented button.is-active{background:#ff3b4e14;border-color:#ff3b4e8c}.setting-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.toggle-card{border:1px solid var(--line);background:var(--bg-elev);border-radius:16px;gap:10px;padding:12px;display:grid;position:relative}.toggle-card.is-on{border-color:#e8d7b547}.toggle-head{cursor:pointer;align-items:center;gap:8px;font-weight:600;display:flex}.toggle-head .switch{margin-left:auto}.toggle-card input[type=checkbox]{opacity:0;pointer-events:none;position:absolute}.switch{background:#3a342f;border-radius:999px;width:36px;height:20px;position:relative}.switch:after{content:"";background:#d7d0c6;border-radius:50%;width:16px;height:16px;transition:transform .18s;position:absolute;top:2px;left:2px}.toggle-card.is-on .switch{background:var(--red)}.toggle-card.is-on .switch:after{background:#fff;transform:translate(16px)}.toggle-card select{border:1px solid var(--line);background:#110f0d;border-radius:10px;width:100%;padding:8px}.toggle-help{color:var(--faint);line-height:1.4}.mic-meter{align-items:flex-end;gap:2px;height:18px;margin-left:auto;display:inline-flex}.mic-meter-bar{background:#3a342f;border-radius:2px;width:3px}.mic-meter-bar.is-on{background:var(--ok)}.home-foot{max-width:980px;color:var(--faint);margin:22px auto 0;font-size:.88rem}.countdown,.boot,.recording-page{text-align:center;align-content:center;place-items:center;gap:16px;display:grid}.boot-orb{background:var(--red);border-radius:50%;width:18px;height:18px;animation:1.2s ease-out infinite pulse}.count-num{font-family:var(--font-display);letter-spacing:-.08em;font-size:clamp(7rem,22vw,14rem);line-height:.8;animation:.45s pop}.big-clock{font-family:var(--font-mono);letter-spacing:-.04em;font-size:clamp(3rem,10vw,6rem)}.big-clock.is-paused,.hud-timer.is-paused{color:var(--sand)}.note{color:var(--muted);max-width:48ch;margin:0}.recording-preview{position:fixed;bottom:112px;right:28px}.camera-bubble{background:#111;border:3px solid #fffc;border-radius:50%;width:168px;height:168px;overflow:hidden;box-shadow:0 16px 40px #0006}.camera-bubble video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.camera-bubble.is-empty{color:var(--muted);border-style:dashed;place-items:center;font-size:.82rem;display:grid}.hud{backdrop-filter:blur(18px);box-shadow:var(--shadow);z-index:40;background:#12100ec7;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:16px;padding:10px 10px 10px 18px;display:flex;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}.hud-timer{font-family:var(--font-mono);align-items:center;gap:8px;min-width:132px;display:flex}.hud-dot{background:var(--red);border-radius:50%;width:8px;height:8px;animation:1.2s steps(2,end) infinite blink;box-shadow:0 0 0 6px #ff3b4e1f}.hud-timer.is-paused .hud-dot{background:var(--sand);animation:none}.hud-state{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.72rem}.hud-actions{gap:6px;display:flex}.hud-btn,.btn{border:1px solid var(--line);background:var(--bg-elev-2);color:var(--text);border-radius:999px;justify-content:center;align-items:center;gap:8px;display:inline-flex}.hud-btn{width:42px;height:42px}.hud-btn.is-off{color:var(--red)}.hud-btn-stop{background:var(--red);color:#fff;border-color:#0000}.hud-btn-play{background:var(--text);color:#111;border-color:#0000;width:48px;height:48px}.btn{padding:10px 16px}.btn-primary{background:var(--red);border-color:#0000}.btn-ghost{background:0 0}.btn-danger{background:var(--red-deep);border-color:#0000}.text-btn{color:var(--sand);background:0 0;border:0;margin-left:auto}.editor{max-width:1100px;margin:0 auto}.editor-stage{border:1px solid var(--line);aspect-ratio:16/9;background:#050504;border-radius:24px;position:relative;overflow:hidden}.editor-video{object-fit:contain;background:#000;width:100%;height:100%}.editor-webcam{pointer-events:none;border:3px solid #ffffffe0;border-radius:50%;position:absolute;overflow:hidden;box-shadow:0 10px 24px #00000059}.editor-webcam video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.editor-controls{gap:16px;margin-top:18px;display:grid}.transport{align-items:center;gap:8px;display:flex}.transport-time{font-family:var(--font-mono);margin-left:8px}.transport-time em{color:var(--faint);font-style:normal}.timeline-times{color:var(--muted);font-family:var(--font-mono);justify-content:space-between;margin-bottom:8px;font-size:.78rem;display:flex}.timeline-track{border:1px solid var(--line);touch-action:none;background:#1a1714;border-radius:12px;height:44px;position:relative;overflow:hidden}.timeline-dim{background:#00000073;position:absolute;top:0;bottom:0}.timeline-dim.is-left{left:0}.timeline-dim.is-right{right:0}.timeline-selected{background:linear-gradient(90deg,#ff3b4e38,#e8d7b529);position:absolute;inset:0 auto}.timeline-playhead{background:#fff;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px)}.timeline-handle{background:var(--sand);z-index:2;border:0;border-radius:99px;width:10px;height:32px;padding:0;position:absolute;top:6px;transform:translate(-50%)}.webcam-tools{border:1px solid var(--line);background:var(--bg-elev);border-radius:16px;padding:14px}.webcam-tools-head,.corner-row,.size-row,.check{align-items:center;gap:10px;display:flex}.webcam-tools-head{justify-content:space-between;margin-bottom:12px}.corner-row{flex-wrap:wrap}.corner-row button{border:1px solid var(--line);background:#110f0d;border-radius:999px;padding:8px 12px}.corner-row button.is-active{background:var(--text);color:#161412;border-color:#0000}.size-row{margin-top:12px}.size-row input{flex:1}.export-veil,.modal-veil{background:#0807069e;place-items:center;display:grid;position:absolute;inset:0}.modal-veil{z-index:30;position:fixed}.export-card,.modal{background:var(--bg-elev-2);border:1px solid var(--line);border-radius:20px;width:min(420px,100% - 32px);padding:22px}.progress{background:#2a2622;border-radius:99px;height:8px;margin:12px 0 8px;overflow:hidden}.progress span{background:var(--red);height:100%;display:block}.modal-actions{justify-content:flex-end;gap:8px;margin-top:18px;display:flex}}.pip-body{color:#f6f1ea;font-family:var(--font-body);background:#0c0b0a;margin:0}.pip-shell{place-items:center;gap:16px;min-height:100vh;padding:16px;display:grid}.pip-shell .hud{position:static;transform:none}.pip-shell .camera-bubble{width:180px;height:180px}@keyframes pulse{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.18)}}@keyframes blink{50%{opacity:.2}}@keyframes pop{0%{opacity:.4;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@media (width<=800px){.tape-app .page{padding:18px 14px 28px}.tape-app .segmented,.tape-app .setting-grid{grid-template-columns:1fr}.tape-app .topbar{flex-direction:column;align-items:flex-start}.tape-app .recording-preview{position:static}.tape-app .hud{border-radius:22px;flex-wrap:wrap;justify-content:center;width:calc(100% - 24px)}}@media (prefers-reduced-motion:reduce){.tape-app *,.tape-app :before,.tape-app :after,.pip-body *,.pip-body :before,.pip-body :after{transition:none!important;animation:none!important}}