:root,[data-theme=light]{--c-brand: #7D489C;--c-brand-hover: #6A3A87;--c-brand-light: #B78FD0;--c-brand-subtle: rgba(125,72,156,.08);--c-brand-muted: rgba(125,72,156,.18);--c-bg: #FBF9F4;--c-bg-alt: #EDE8DF;--c-bg-raised: #FFFFFF;--c-bg-overlay: rgba(47,1,71,.04);--c-text: #2F0147;--c-text-secondary: #4E3152;--c-text-muted: #8B6B95;--c-text-disabled: rgba(47,1,71,.3);--c-accent: #8C341B;--c-accent-hover: #7A2C16;--c-accent-light: #C5553A;--c-neutral: #C5A992;--c-neutral-dark: #9B8070;--c-success: #2D7A4F;--c-error: #C0392B;--c-warning: #B07D1A;--c-border: rgba(78,49,82,.12);--c-border-strong: rgba(78,49,82,.28);--shadow-sm: 0 1px 3px rgba(47,1,71,.07);--shadow-md: 0 4px 16px rgba(47,1,71,.1);--shadow-lg: 0 12px 40px rgba(47,1,71,.14);--shadow-brand: 0 4px 20px rgba(125,72,156,.3)}[data-theme=dark]{--c-brand: #A06DC0;--c-brand-hover: #B78FD0;--c-brand-light: #7D489C;--c-brand-subtle: rgba(125,72,156,.14);--c-brand-muted: rgba(125,72,156,.25);--c-bg: #180827;--c-bg-alt: #2F0147;--c-bg-raised: #3D1559;--c-bg-overlay: rgba(125,72,156,.08);--c-text: #FBF9F4;--c-text-secondary: rgba(251,249,244,.72);--c-text-muted: rgba(251,249,244,.4);--c-text-disabled: rgba(251,249,244,.22);--c-accent: #C5553A;--c-accent-hover: #D4724E;--c-accent-light: #E08B6A;--c-neutral: #8B7163;--c-neutral-dark: #6B5549;--c-success: #4CAF82;--c-error: #E05A4E;--c-warning: #D4A02A;--c-border: rgba(251,249,244,.1);--c-border-strong: rgba(251,249,244,.22);--shadow-sm: 0 1px 3px rgba(0,0,0,.4);--shadow-md: 0 4px 16px rgba(0,0,0,.5);--shadow-lg: 0 12px 40px rgba(0,0,0,.65);--shadow-brand: 0 4px 20px rgba(125,72,156,.45)}:root{--font-display: "Outfit", sans-serif;--font-body: "DM Sans", sans-serif;--font-mono: "DM Mono", monospace;--text-xs: .6875rem;--text-sm: .8125rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--text-7xl: 4.5rem;--leading-tight: 1.05;--leading-snug: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.75;--tracking-tight: -.03em;--tracking-normal: 0em;--tracking-wide: .08em;--tracking-wider: .15em;--tracking-widest: .25em;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-32: 8rem;--radius-sm: 2px;--radius-md: 4px;--radius-lg: 8px;--radius-xl: 16px;--radius-2xl: 24px;--radius-full: 9999px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-inout: cubic-bezier(.4, 0, .2, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s;--z-base: 0;--z-raised: 10;--z-sticky: 100;--z-overlay: 200;--z-modal: 300;--z-toast: 400}:root,[data-theme=light]{--ui-bg: var(--c-bg);--ui-surface: var(--c-bg-raised);--ui-border: var(--c-border);--ui-text: var(--c-text);--ui-text2: var(--c-text-muted);--ui-accent: var(--c-brand);--ui-accent-hover: var(--c-brand-hover);--ui-accent-subtle: var(--c-brand-subtle);--ui-toggle-off: var(--c-neutral);--ui-select-bg: var(--c-bg-alt);--ui-swatch-ring: var(--c-border-strong);--ui-sep: var(--c-border);--ui-h1: var(--c-brand);--ui-arrow: var(--c-neutral)}[data-theme=dark]{--ui-bg: var(--c-bg);--ui-surface: var(--c-bg-raised);--ui-border: var(--c-border);--ui-text: var(--c-text);--ui-text2: var(--c-text-muted);--ui-accent: var(--c-brand);--ui-accent-hover: var(--c-brand-hover);--ui-accent-subtle: var(--c-brand-subtle);--ui-toggle-off: var(--c-neutral-dark);--ui-select-bg: var(--c-bg-alt);--ui-swatch-ring: var(--c-brand-muted);--ui-sep: var(--c-border);--ui-h1: var(--c-brand-hover);--ui-arrow: var(--c-neutral-dark)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background:var(--ui-bg);color:var(--ui-text);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:var(--space-8) var(--space-6);transition:background var(--duration-slow) var(--ease-out),color var(--duration-slow) var(--ease-out)}.header{width:100%;max-width:960px;display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5)}.header h1{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ui-h1)}.theme-btn{background:none;border:1px solid var(--ui-border);border-radius:var(--radius-md);padding:5px 10px;font-size:var(--text-lg);cursor:pointer;line-height:1;transition:border-color var(--duration-fast) var(--ease-out)}.theme-btn:hover{border-color:var(--ui-accent)}.stage-wrap{width:100%;max-width:960px;display:flex;justify-content:center}.stage{width:100%;aspect-ratio:16 / 9;border-radius:var(--radius-lg);overflow:hidden;position:relative;background:#180827;transition:aspect-ratio var(--duration-slow) var(--ease-out),max-width var(--duration-slow) var(--ease-out)}.stage[data-ar="16:9"]{aspect-ratio:16 / 9;max-width:960px}.stage[data-ar="1:1"]{aspect-ratio:1 / 1;max-width:540px}.stage[data-ar="9:16"]{aspect-ratio:9 / 16;max-width:340px}.stage canvas{display:block;width:100%;height:100%}.rec-badge{position:absolute;top:12px;right:12px;background:#c0392be6;color:#fff;font-size:var(--text-xs);font-weight:600;padding:3px 10px;border-radius:var(--radius-md);display:none;align-items:center;gap:5px}.rec-badge.visible{display:flex}.rec-badge .rd{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink .8s infinite alternate}@keyframes blink{0%{opacity:1}to{opacity:.3}}.panel{width:100%;max-width:960px;margin-top:var(--space-4)}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:.75rem}.row label{font-size:var(--text-sm);color:var(--ui-text2);white-space:nowrap;min-width:70px}.row .v{font-size:var(--text-sm);font-weight:500;min-width:22px;text-align:center;color:var(--ui-text)}.row input[type=range]{width:90px;accent-color:var(--ui-accent)}.btn{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;padding:6px 14px;border:none;border-radius:var(--radius-md);cursor:pointer;background:var(--ui-accent);color:#fff;transition:background var(--duration-fast) var(--ease-out)}.btn:hover{background:var(--ui-accent-hover)}.btn.sec{background:transparent;border:1px solid var(--ui-border);color:var(--ui-h1)}.btn.sec:hover{background:var(--ui-accent-subtle)}.btn:disabled{opacity:.4;cursor:default}.ar-group{display:flex;gap:0;border:1px solid var(--ui-border);border-radius:var(--radius-md);overflow:hidden}.ar-group .btn-ar{border-radius:0;border:none;background:transparent;color:var(--ui-text2);padding:5px 12px;font-size:var(--text-xs);font-weight:500;border-right:1px solid var(--ui-border);transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.ar-group .btn-ar:last-child{border-right:none}.ar-group .btn-ar:hover{background:var(--ui-accent-subtle)}.ar-group .btn-ar.on{background:var(--ui-accent);color:#fff}.sw{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:var(--text-sm);color:var(--ui-text2)}.sw input{opacity:0;width:0;height:0;position:absolute}.sw .tk{width:34px;height:18px;background:var(--ui-toggle-off);border-radius:9px;position:relative;transition:background var(--duration-fast) var(--ease-out)}.sw .tk:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform var(--duration-fast) var(--ease-out)}.sw input:checked+.tk{background:var(--ui-accent)}.sw input:checked+.tk:before{transform:translate(16px)}.swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center}button.swatch{font:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);flex-shrink:0}.swatch:hover{transform:scale(1.15)}.swatch.on{border-color:var(--ui-accent);transform:scale(1.15)}.swatch.ring{border-color:var(--ui-swatch-ring)}.swatch.ring.on{border-color:var(--ui-accent)}select{font-family:var(--font-body);font-size:var(--text-xs);padding:4px 8px;background:var(--ui-select-bg);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:var(--radius-md)}.sep{width:100%;height:1px;background:var(--ui-sep);margin:6px 0}.note{font-size:var(--text-xs);color:var(--ui-text2);margin-top:var(--space-2)}.arrow{color:var(--ui-arrow)}