.app{max-width:1200px;margin:0 auto;padding:1rem 1rem 2rem;display:flex;flex-direction:column;gap:1rem}.app-header{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-end;border-bottom:1px solid #2a2a2a;padding-bottom:.75rem}.eyebrow{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#9aa0a6}.app-header h1{margin:.15rem 0 0;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.04em}.instructions{margin:0;max-width:36rem;font-size:.92rem;color:#c7c7c7}main{display:flex;flex-direction:column;gap:1rem}.canvas-shell{height:min(58vh,620px);min-height:280px;border:1px solid #2f2f2f;background:#141414}.canvas-shell canvas{display:block;width:100%;height:100%}.instrument-panel,.panel{border:1px solid #2a2a2a;background:#161616;padding:.85rem}.instrument-controls-row{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;margin-bottom:.65rem}.instrument-controls-row .control-row{margin-bottom:0;flex:1 1 16rem}.octave-control{flex:0 1 auto;min-width:14rem}.octave-control .octave-readout{min-width:6.5rem;text-align:center;padding:.35rem .5rem;border:1px solid #333;border-radius:999px;background:#121212}.octave-control .keyboard-hint{margin:0;font-size:.75rem;text-align:right}.control-row{display:grid;grid-template-columns:minmax(4.5rem,auto) 1fr auto;gap:.65rem;align-items:center;margin-bottom:.55rem}.control-label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#9aa0a6}.mono-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;color:#d0d0d0;min-width:4.5rem;text-align:right}.voice-grid,.btn-group{display:flex;flex-wrap:wrap;gap:.35rem}.chip,.btn{border:1px solid #3a3a3a;background:#1f1f1f;color:#f5f5f5;padding:.35rem .65rem;border-radius:999px;cursor:pointer}.chip.active,.btn.active{border-color:#39ff14;color:#39ff14}.btn.ghost{border-color:#444;color:#bdbdbd}.btn:disabled{opacity:.45;cursor:not-allowed}.keyboard-wrap{margin-top:.25rem}.empty-state,.hint{margin:0 0 .5rem;font-size:.85rem;color:#a8a8a8}.keyboard{position:relative;display:flex;gap:.25rem;min-height:140px;-webkit-user-select:none;user-select:none;touch-action:none}.key{position:relative;border:1px solid #444;border-radius:0 0 6px 6px;cursor:pointer;flex:1;min-width:2rem;padding:0}.key.white{background:linear-gradient(#f5f5f5,#d9d9d9);color:#111;z-index:1;height:140px}.key.black{position:absolute;top:0;width:7%;height:88px;background:linear-gradient(#333,#111);color:#eee;z-index:2}.key-label{position:absolute;bottom:.45rem;left:50%;transform:translate(-50%);font-size:.75rem;font-weight:600}.key-hint{position:absolute;top:.35rem;left:50%;transform:translate(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;opacity:.65}.bottom-panels{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.loop-progress{position:relative;height:1.25rem;border:1px solid #333;background:#111;overflow:hidden;margin-top:.35rem}.loop-progress-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#0047ff,#39ff14);transition:width 80ms linear}.loop-progress .mono-value{position:relative;z-index:1;display:block;text-align:center;line-height:1.25rem}.color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:.5rem}.color-grid label{display:flex;flex-direction:column;gap:.25rem}.color-grid input[type=color]{width:100%;height:2rem;border:1px solid #333;background:#111;padding:0}.reset-btn{margin-top:.35rem}input[type=range]{width:100%}@media(max-width:860px){.bottom-panels{grid-template-columns:1fr}.app-header{align-items:flex-start}}@media(prefers-reduced-motion:reduce){.loop-progress-fill{transition:none}}:root{color-scheme:dark;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.4;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;background:#101010;color:#f2f2f2}#root{min-height:100vh}button,input{font:inherit}button:focus-visible,input:focus-visible{outline:2px solid #39ff14;outline-offset:2px}