@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg:#040812;--panel:#0a111feb;--panel-alt:#060b16e6;--border:#88a0c929;--border-strong:#88a0c947;--text:#d7e0f4;--text-strong:#f8fbff;--text-soft:#9ca9c9;--accent:#6fffe9;--accent-strong:#70f6de;--accent-secondary:#c165ff;--shadow-soft:0 28px 80px #00000073, inset 0 1px 0 #ffffff0a;--font-body:"IBM Plex Sans", sans-serif;--font-display:"Space Grotesk", sans-serif;--font-mono:"IBM Plex Mono", monospace;color:var(--text);font:16px/1.6 var(--font-body);background:radial-gradient(circle at top,#3e6eff42,#0000 22%),radial-gradient(circle at 0 100%,#bf5af233,#0000 26%),linear-gradient(#07101d 0%,#040812 68%,#02050b 100%)}*,:before,:after{box-sizing:border-box}html{min-height:100%}body{min-height:100vh;margin:0}body:before{content:"";opacity:.35;pointer-events:none;z-index:-1;background:linear-gradient(#0000 0 calc(100% - 1px),#ffffff08 100%) 0 0/100% 32px,linear-gradient(90deg,#0000 0 calc(100% - 1px),#ffffff05 100%) 0 0/32px 100%;position:fixed;inset:0}button,input,select,textarea{font:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{color:var(--text-strong)}h1{font:700 clamp(2.4rem, 4vw, 4.9rem) / .95 var(--font-display);letter-spacing:-.06em;max-width:10ch}h2{font:700 clamp(1.35rem, 2vw, 1.9rem) / 1.05 var(--font-display);letter-spacing:-.04em}h3{font:600 1.05rem/1.2 var(--font-body)}a{color:inherit}#root{max-width:1440px;min-height:100vh;margin:0 auto}.shell{gap:24px;padding:32px 24px 48px;display:grid}.hero-panel{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;display:grid}.hero-copy{gap:16px;display:grid}.hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.panel{background:radial-gradient(circle at top left, #4fd1c524, transparent 32%), radial-gradient(circle at bottom right, #bf5af224, transparent 38%), var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-soft);border-radius:28px;padding:28px;position:relative;overflow:hidden}.panel:before{content:"";pointer-events:none;background:linear-gradient(120deg,#ffffff3d,#fff0);position:absolute;inset:0}.main-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;display:grid}.control-panel,.tone-panel,.mix-panel,.preview-panel{min-width:0}.control-panel,.mix-panel{grid-column:span 4}.tone-panel,.preview-panel{grid-column:span 8}.section-heading{z-index:1;gap:8px;margin-bottom:24px;display:grid;position:relative}.eyebrow{color:var(--accent-strong);font:700 .76rem/1.2 var(--font-mono);letter-spacing:.16em;text-transform:uppercase}.lede{max-width:62ch}.dropzone{background:var(--panel-alt);border:1px dashed var(--border-strong);cursor:pointer;border-radius:24px;align-items:start;gap:8px;margin-bottom:24px;padding:24px;transition:border-color .16s,transform .16s,background .16s;display:grid;position:relative}.dropzone:hover{background:#09132beb;border-color:#6fffe973;transform:translateY(-1px)}.dropzone-title{color:var(--text-strong);font-size:1.12rem;font-weight:600}.dropzone-copy{color:var(--text-soft);max-width:34ch}.waveform-panel,.audio-card,.metric-card,.tone-card{z-index:1;background:#050a16b8;border:1px solid #88a0c929;border-radius:22px;position:relative}.waveform-panel{gap:20px;padding:18px;display:grid}.waveform-header h3,.audio-card h3{margin:0 0 6px}.waveform-canvas{background:linear-gradient(180deg, #ffffff08, transparent), var(--panel-alt);border:1px solid #88a0c924;border-radius:18px;justify-content:center;align-items:center;height:170px;padding:12px;display:flex;overflow:hidden}.waveform-canvas svg{width:100%;height:100%}.waveform-canvas path{fill:#6fffe938;stroke:#6fffe9e6;stroke-width:.75px}.waveform-empty{background:linear-gradient(90deg,#0000,#6fffe91a,#0000);border-radius:999px;width:100%;height:2px}.preset-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:24px;display:grid}.preset-chip{color:inherit;cursor:pointer;text-align:left;background:#050a16b3;border:1px solid #88a0c933;border-radius:18px;align-items:start;gap:8px;min-height:114px;padding:16px;transition:transform .16s,border-color .16s,background .16s;display:grid}.preset-chip:hover{background:#070f1eeb;border-color:#6fffe957;transform:translateY(-1px)}.preset-chip span{color:var(--text-strong);font-weight:600}.preset-chip small{color:var(--text-soft)}.tone-list{gap:18px;margin-bottom:18px;display:grid}.tone-card{gap:18px;padding:20px;display:grid}.tone-card-header{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;display:grid}.toggle{align-items:center;gap:10px;font-weight:600;display:inline-flex}.tone-grid,.mix-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.field,.range-field{gap:8px;display:grid}.field-label{color:var(--text-soft);font:600 .77rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.field-input-shell{align-items:center;gap:10px;display:flex}.text-input,.select-input{appearance:none;color:var(--text-strong);font:500 .98rem/1.2 var(--font-body);background:#ffffff08;border:1px solid #88a0c933;border-radius:14px;width:100%;min-height:48px;padding:0 14px}.text-input:focus,.select-input:focus,input[type=range]:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.ghost-button:focus-visible,.mini-button:focus-visible,.sample-rate-button:focus-visible,.preset-chip:focus-visible{outline-offset:2px;outline:2px solid #6fffe9bf}input[type=range]{accent-color:var(--accent);width:100%}.range-field-header{justify-content:space-between;align-items:center;display:flex}.range-field-header strong{color:var(--text-strong);font:600 .95rem/1.2 var(--font-mono)}.sample-rate-row{gap:12px;margin-top:18px;display:grid}.sample-rate-buttons,.render-actions,.tone-card-actions{flex-wrap:wrap;gap:12px;display:flex}.sample-rate-button,.ghost-button,.secondary-button,.mini-button{color:var(--text-strong);cursor:pointer;font:600 .92rem/1 var(--font-body);background:#ffffff05;border:1px solid #88a0c93d;border-radius:999px;min-height:44px;padding:0 16px;transition:border-color .16s,background .16s,transform .16s}.sample-rate-button.is-active,.sample-rate-button:hover,.ghost-button:hover,.secondary-button:hover,.mini-button:hover{background:#6fffe91f;border-color:#6fffe961;transform:translateY(-1px)}.primary-button{background:linear-gradient(135deg, var(--accent), var(--accent-secondary));color:#07101b;cursor:pointer;font:700 .95rem/1 var(--font-body);border:none;border-radius:999px;min-height:46px;padding:0 18px}.primary-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:.42;transform:none}.mini-button.is-danger{color:#ffb6bd}.preview-stack{gap:16px;margin-top:20px;display:grid}.audio-card{gap:16px;padding:18px;display:grid}.audio-card audio{width:100%}.render-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;display:grid}.metric-card{gap:6px;padding:16px;display:grid}.metric-card span{color:var(--text-soft);font:600 .76rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.metric-card strong{color:var(--text-strong);font-size:1.06rem}.error-callout{color:#ffb4bc;background:#ff5f6d24;border:1px solid #ff5f6d38;border-radius:16px;margin-top:18px;padding:14px 16px}.sr-only{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=1100px){.hero-panel,.main-grid{grid-template-columns:1fr}.control-panel,.tone-panel,.mix-panel,.preview-panel{grid-column:auto}}@media (width<=760px){.shell{padding:20px 14px 36px}.panel{border-radius:24px;padding:22px}.hero-metrics,.tone-grid,.mix-grid,.preset-row,.render-summary,.tone-card-header{grid-template-columns:1fr}}