*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0a0a0f;--color-surface: #15151f;--color-surface-alt: #1e1e2e;--color-border: #2a2a3e;--color-text: #e0e0e8;--color-text-muted: #8888a0;--color-primary: #6366f1;--color-primary-hover: #818cf8;--color-accent: #22d3ee;--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow: 0 4px 20px rgba(0, 0, 0, .3)}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}main{max-width:800px;margin:0 auto;padding:2rem 1rem}.hero{text-align:center;padding:3rem 0 4rem}.hero h1{font-size:3rem;font-weight:700;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.5rem}.tagline{color:var(--color-text-muted);font-size:1.1rem}.demo-section{background:var(--color-surface);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem;border:1px solid var(--color-border)}.demo-section h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.demo-section .description{color:var(--color-text-muted);margin-bottom:1.5rem}.controls{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.control-group{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:120px}.control-group label{font-size:.85rem;color:var(--color-text-muted)}.control-group select,.control-group input[type=range]{width:100%;padding:.5rem;background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.9rem;cursor:pointer}.control-group select:focus,.control-group input:focus{outline:none;border-color:var(--color-primary)}.control-group input[type=range]{-webkit-appearance:none;appearance:none;height:8px;padding:0;cursor:pointer}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--color-primary);border-radius:50%;cursor:pointer}.effects-controls{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.effect-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-alt);border-radius:var(--radius-sm);cursor:pointer;transition:background .2s}.effect-toggle:has(input:checked){background:var(--color-primary)}.effect-toggle input{display:none}.effect-toggle span{font-size:.85rem}.board-container{margin:1.5rem 0}noodler-board{display:block;width:100%;height:300px;border-radius:var(--radius-md);overflow:hidden}.bend-debug{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:var(--color-surface-alt);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.9rem}.bend-debug .label{color:var(--color-text-muted)}.bend-debug #bend-value{font-weight:600;color:var(--color-accent);min-width:50px;text-align:right}.bend-debug .unit{color:var(--color-text-muted)}.output-panel{background:var(--color-surface-alt);border-radius:var(--radius-md);padding:1rem;margin:1rem 0}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.note-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.5rem;text-align:center}.note-item .name{font-weight:600;font-size:1.1rem}.note-item .freq{font-size:.8rem;color:var(--color-text-muted);font-family:var(--font-mono)}.piano-keys{display:flex;gap:.25rem;margin:1rem 0}.piano-key{flex:1;padding:2rem .5rem;background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-weight:500;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;transition:background .1s,transform .1s}.piano-key:active,.piano-key.active{background:var(--color-primary);transform:scale(.98)}.transport-controls{display:flex;gap:.5rem;margin:1rem 0}.transport-btn{flex:1;padding:.75rem 1.5rem;background:var(--color-primary);border:none;border-radius:var(--radius-sm);color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:background .2s}.transport-btn:hover:not(:disabled){background:var(--color-primary-hover)}.transport-btn:disabled{opacity:.5;cursor:not-allowed}.code-example{margin-top:1rem;border-top:1px solid var(--color-border);padding-top:1rem}.code-example summary{cursor:pointer;color:var(--color-text-muted);font-size:.9rem}.code-example pre{margin-top:.75rem;background:var(--color-bg);border-radius:var(--radius-sm);padding:1rem;overflow-x:auto}.code-example code{font-family:var(--font-mono);font-size:.85rem;color:var(--color-accent)}footer{text-align:center;padding:2rem 0;color:var(--color-text-muted)}footer a{color:var(--color-primary);text-decoration:none}footer a:hover{text-decoration:underline}@media(max-width:600px){.hero h1{font-size:2rem}.tagline{font-size:1rem}.demo-section{padding:1rem}.controls{flex-direction:column}.control-group{min-width:100%}.piano-key{padding:1.5rem .25rem;font-size:.8rem}noodler-board{height:250px}}