:root{--bg-primary:#141414;--bg-secondary:#1a1a1a;--bg-panel:#1e1e1e;--bg-inset:#111;--border-subtle:#282828;--border-mid:#333;--text-primary:#ccc;--text-secondary:#888;--text-dim:#555;--accent-active:#6a9a80;--accent-active-dim:#6a9a801a;--accent-error:#b05050;--accent-toggle:#6a9a80;--meter-lo:#556b5e;--meter-mid:#6b6350;--meter-hi:#6b5050;--font-body:"Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"Consolas", "Menlo", monospace;--radius-sm:4px;--radius-md:8px;--radius-lg:12px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg-primary);height:100%;color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-size:14px}.app{flex-direction:column;max-width:540px;min-height:100%;margin:0 auto;padding:32px 24px;display:flex}.app--unsupported{justify-content:center;align-items:center}.unsupported-message{text-align:center;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-panel);padding:40px}.unsupported-message h1{color:var(--text-primary);margin-bottom:12px;font-size:20px;font-weight:600}.unsupported-message p{color:var(--text-secondary);font-size:13px;line-height:1.6}.app__header{border-bottom:1px solid var(--border-subtle);margin-bottom:24px;padding-bottom:12px}.app__title{letter-spacing:.18em;color:var(--text-dim);font-size:13px;font-weight:400}.app__title-off,.app__title-rec{color:var(--text-dim)}.app__main{flex-direction:column;flex:1;gap:16px;display:flex}.app__controls{flex-direction:column;gap:12px;display:flex}.app__record-row{align-items:center;gap:16px;display:flex}.waveform{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;height:64px;position:relative;overflow:hidden}.waveform--active{border-color:var(--border-mid)}.waveform__canvas{width:100%;height:100%;display:block}.waveform__overlay{display:none}.record-button{border:1px solid var(--border-mid);border-radius:var(--radius-md);background:var(--bg-panel);color:var(--text-primary);font-family:var(--font-body);cursor:pointer;align-items:center;gap:8px;padding:8px 20px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.record-button:before{display:none}.record-button:hover:not(:disabled){background:var(--bg-inset);border-color:var(--text-dim)}.record-button:active:not(:disabled){transform:scale(.98)}.record-button:disabled{opacity:.5;cursor:not-allowed}.record-button__icon{color:var(--text-dim);align-items:center;display:flex}.record-button__icon svg{width:14px;height:14px}.record-button.recording{background:var(--accent-active-dim);border-color:var(--accent-active);color:var(--accent-active)}.record-button.recording .record-button__icon,.record-button.recording .record-button__label{color:var(--accent-active)}.record-button.busy{opacity:.6}.timer{font-family:var(--font-mono);color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:20px;font-weight:400;transition:color .3s}.timer--active{color:var(--text-secondary)}.volume-meters{flex-direction:column;gap:6px;display:flex}.meter{align-items:center;gap:8px;display:flex}.meter__label{color:var(--text-dim);text-align:right;flex-shrink:0;width:24px;font-size:11px}.meter__bar{background:var(--bg-inset);border:1px solid var(--border-subtle);border-radius:3px;flex:1;align-items:stretch;gap:1px;height:6px;padding:1px;display:flex}.meter__segment{background:0 0;border-radius:1px;flex:1;transition:background 50ms}.meter__segment--active.meter__segment--green{background:var(--meter-lo)}.meter__segment--active.meter__segment--yellow{background:var(--meter-mid)}.meter__segment--active.meter__segment--red{background:var(--meter-hi)}.monitor-toggle{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-md);align-items:center;gap:10px;padding:8px 12px;display:flex}.monitor-toggle--disabled{opacity:.4}.monitor-toggle__label{color:var(--text-secondary);flex-shrink:0;font-size:12px}.monitor-toggle__switch{border:1px solid var(--border-mid);background:var(--bg-inset);cursor:pointer;border-radius:10px;flex-shrink:0;width:36px;height:20px;padding:0;transition:all .2s;position:relative}.monitor-toggle__switch:disabled{cursor:not-allowed}.monitor-toggle__switch--on{background:var(--accent-toggle);border-color:var(--accent-toggle)}.monitor-toggle__thumb{background:#999;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0000004d}.monitor-toggle__switch--on .monitor-toggle__thumb{left:18px}.monitor-toggle__state{display:none}.monitor-toggle__hint{color:var(--text-dim);font-size:12px;line-height:1.4}.status-bar{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);margin-top:auto;padding:8px 12px}.status-bar__text{color:var(--text-dim);font-size:12px}.status-bar--recording .status-bar__text{color:var(--text-secondary)}.status-bar--error .status-bar__text{color:var(--accent-error)}.status-bar--converting .status-bar__text{color:var(--text-secondary);animation:1.5s ease-in-out infinite converting-blink}@keyframes converting-blink{0%,to{opacity:1}50%{opacity:.4}}@media (width<=480px){.app{padding:20px 16px}.app__record-row{flex-direction:column;gap:8px}.timer{font-size:18px}.waveform{height:48px}}