:root{--text:#5c4b52;--text-h:#24191d;--bg:#f7f4f5;--panel:#fff;--border:#e7dfe2;--accent:#e90064;--accent-soft:#e900641a;--shadow:#24191d14 0 10px 30px -12px;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font:15px/1.5 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#c8bcc1;--text-h:#f5eff1;--bg:#16121a;--panel:#1f1a21;--border:#322a30;--accent:#ff3f8f;--accent-soft:#ff3f8f29;--shadow:#0006 0 10px 30px -12px}}*{box-sizing:border-box}body{margin:0}#root{flex-direction:column;min-height:100svh;display:flex}h1,h2,h3{color:var(--text-h);margin:0;font-weight:600}p{margin:0}button{font:inherit;color:inherit}input{font:inherit}.app{flex-direction:column;min-height:100svh;display:flex}.app__header{border-bottom:1px solid var(--border);background:var(--panel);justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;display:flex}.app__brand{align-items:center;gap:14px;display:flex}.app__logo{font-size:28px;line-height:1}.app__brand h1{letter-spacing:-.2px;font-size:18px}.app__brand p{color:var(--text);margin-top:2px;font-size:13px}.app__filename{color:var(--text);background:var(--accent-soft);white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:12px}.app__intro{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:18px;padding:32px;display:flex}.app__privacy{color:var(--text);opacity:.75;text-align:center;max-width:460px;font-size:13px}.dropzone{border:2px dashed var(--border);text-align:center;cursor:pointer;background:var(--panel);border-radius:20px;width:min(560px,100%);padding:56px 32px;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone--active{border-color:var(--accent);background:var(--accent-soft)}.dropzone--error{border-color:#d64545}.dropzone__icon{margin-bottom:12px;font-size:36px}.dropzone__title{color:var(--text-h);margin-bottom:6px;font-size:17px;font-weight:600}.dropzone__hint{color:var(--text);opacity:.8;font-size:13px}.dropzone__error{color:#d64545;margin-top:16px;font-size:13px;font-weight:500}.app__layout{flex:1;grid-template-columns:1fr 340px;gap:0;min-height:0;display:grid}.canvas-wrap{background:#0e0e12;min-height:0;position:relative}.timeline-canvas{width:100%;height:100%;display:block}.recording-badge{color:#fff;background:#d61e1eeb;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;animation:1.4s ease-in-out infinite pulse;display:flex;position:absolute;top:16px;left:16px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}.controls{border-left:1px solid var(--border);background:var(--panel);flex-direction:column;gap:22px;padding:20px;display:flex;overflow-y:auto}.controls__section h2{text-transform:uppercase;letter-spacing:.06em;color:var(--text);opacity:.7;margin-bottom:10px;font-size:12px}.transport{align-items:center;gap:10px;margin-bottom:12px;display:flex}.scrubber{flex:1}.button{border:1px solid var(--border);background:var(--panel);cursor:pointer;color:var(--text-h);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;transition:background .12s,border-color .12s}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.5;cursor:not-allowed}.button--icon{justify-content:center;align-items:center;width:38px;height:38px;padding:0;font-size:16px;display:flex}.button--primary{background:var(--accent);border-color:var(--accent);color:#fff;min-width:84px}.button--primary:hover:not(:disabled){filter:brightness(1.06)}.button--record{background:var(--text-h);width:100%;color:var(--bg);border-color:var(--text-h)}.button--ghost{background:0 0}.button--upgrade{text-align:center;color:#fff;background:linear-gradient(135deg,#f5a524,#e9006a);border-color:#0000;width:100%;margin-top:10px;text-decoration:none;display:block}.controls__unlocked{color:var(--accent);text-align:center;margin-top:10px;font-size:13px;font-weight:600}.field{color:var(--text);flex-direction:column;gap:6px;margin-bottom:14px;font-size:12px;display:flex}.field input[type=range]{width:100%}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--border);background:var(--panel);cursor:pointer;color:var(--text-h);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}.chip:disabled{opacity:.5;cursor:not-allowed}.chip--active{background:var(--accent);border-color:var(--accent);color:#fff}.swatch-row{flex-wrap:wrap;gap:10px;display:flex}.swatch{cursor:pointer;width:32px;height:32px;box-shadow:0 0 0 1px var(--border);border:2px solid #0000;border-radius:50%;padding:0}.swatch:disabled{opacity:.5;cursor:not-allowed}.swatch--active{border-color:var(--panel);box-shadow:0 0 0 2px var(--text-h)}.text-input{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text-h);border-radius:10px;padding:9px 12px;font-size:13px}.option-grid{gap:8px;display:grid}.option{text-align:left;border:1px solid var(--border);background:var(--panel);cursor:pointer;border-radius:10px;flex-direction:column;gap:2px;padding:10px 12px;display:flex}.option strong{color:var(--text-h);font-size:13px}.option span{color:var(--text);opacity:.8;font-size:12px}.option:disabled{opacity:.5;cursor:not-allowed}.option--active{border-color:var(--accent);background:var(--accent-soft)}.stats{grid-template-columns:1fr auto;gap:6px 12px;margin:0;font-size:13px;display:grid}.stats dt{color:var(--text);opacity:.75}.stats dd{color:var(--text-h);text-align:right;margin:0;font-weight:600}@media (width<=860px){.app__layout{grid-template-rows:46vh 1fr;grid-template-columns:1fr}.controls{border-left:none;border-top:1px solid var(--border)}}