:root{--bg-primary:#fff;--bg-secondary:#f5f5f5;--bg-tertiary:#eee;--text-primary:#1a1a1a;--text-secondary:#666;--border-color:#d0d0d0;--accent-primary:#00d9ff;--accent-primary-alpha:#00d9ff33;--accent-secondary:#f0f;--accent-secondary-alpha:#f0f3;--button-bg:#00d9ff;--button-hover:#00b8d4;--button-text:#000;--success:#00d9ff;--danger:#f0f;--info:#00d9ff;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-mono:"Menlo", "Monaco", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100vh;font-family:var(--font-family);color:var(--text-primary);gap:var(--spacing-lg);padding:var(--spacing-xs);background:#0a0a0f;flex-direction:column;display:flex;overflow:hidden}#canvas{border:1px solid var(--accent-primary);border-radius:var(--radius-md);width:100%;max-height:65vh;image-rendering:crisp-edges;background:#0f1923;flex:1;display:block}body>div{gap:var(--spacing-md);padding:var(--spacing-md);border:1px solid var(--accent-primary);border-radius:var(--radius-md);background:#1a2842;flex-wrap:wrap;align-items:center;display:flex}#file-input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--accent-primary);border-radius:var(--radius-md);color:var(--accent-primary);cursor:pointer;background:#0f1923;font-size:.875rem;transition:border-color .2s}#file-input::file-selector-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--accent-primary);color:#000;border-radius:var(--radius-sm);cursor:pointer;margin-right:var(--spacing-sm);border:none;font-weight:500;transition:background-color .2s}#file-input::file-selector-button:hover{background:var(--button-hover)}button{padding:var(--spacing-sm) var(--spacing-lg);background:var(--button-bg);color:var(--button-text);border-radius:var(--radius-md);cursor:pointer;border:none;font-size:.875rem;font-weight:500;transition:background-color .2s}button:hover{background:var(--button-hover)}button:active{background:#09a}button:disabled{opacity:.6;cursor:not-allowed}#btn-mic{background:var(--accent-primary);color:#000}#btn-mic:hover{background:#00b8d4}#btn-sample{background:var(--accent-primary);color:#000}#btn-sample:hover{background:#00b8d4}#btn-clear{background:var(--accent-secondary);color:#000}#btn-clear:hover{background:#c0c}#status{min-width:150px;padding:var(--spacing-md);border:1px solid var(--accent-primary);border-radius:var(--radius-md);font-family:var(--font-mono);color:var(--accent-primary);text-align:center;background:#0f1923;flex:1;justify-content:center;align-items:center;min-height:40px;font-size:.875rem;display:flex}#status.active{color:var(--accent-primary);border-color:var(--accent-primary);background:#0f1923;box-shadow:0 0 10px #00d9ff4d}#status.error{color:var(--accent-secondary);border-color:var(--accent-secondary)}#status.success{color:var(--accent-primary);border-color:var(--accent-primary)}@media (width<=768px){body{padding:var(--spacing-md);gap:var(--spacing-md)}body>div{flex-direction:column;align-items:stretch}#file-input,button,#status{width:100%}button{padding:var(--spacing-md);font-size:.875rem}}@media (width<=480px){body{padding:var(--spacing-md);gap:var(--spacing-md)}body>div{padding:var(--spacing-md)}#canvas{border-width:1px}button{padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem}#status{padding:var(--spacing-md);font-size:.875rem}}