:root{color:#111827;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:SF Pro Text,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.4}*{box-sizing:border-box}body{color:#111827;background:#fff;min-height:100vh;margin:0}#root{width:min(100%,92rem);margin:0 auto;padding:1.2rem}.app-shell{gap:1rem;display:grid}.panel{background:#fff;border:1px solid #eceef2;border-radius:1rem;padding:1rem;box-shadow:0 8px 26px #1118270f}.keyboard-panel{min-height:20rem;padding:1rem;position:relative;overflow-x:auto}.keyboard-panel:fullscreen{place-items:center;padding:1.5rem;display:grid}.keyboard-panel svg{width:min(100%,72rem);margin:0 auto;display:block}.fullscreen-btn{z-index:2;padding:.36rem .62rem;font-size:.82rem;position:absolute;top:.7rem;right:.7rem}.key-shape{cursor:pointer;stroke-width:1.2px;transition:fill .1s}.key-shape.white{fill:#fdfdfd;stroke:#a7adb8}.key-shape.black{fill:#1f2229;stroke:#1a1d24}.key-shape.white:hover,.key-shape.white.active{fill:#dce9ff}.key-shape.black:hover,.key-shape.black.active{fill:#4a78d1}.key-label{-webkit-user-select:none;user-select:none;pointer-events:none;font-family:SF Pro Text,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px}.key-label.dark{fill:#f8f8f8}.key-label.light{fill:#1a1d24}.note-label{fill:#3f7de8;letter-spacing:.03em;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px;font-weight:700}.controls-grid{grid-template-columns:1fr;gap:.55rem;display:grid}.control-card{gap:.45rem;display:grid}.control-card h2{letter-spacing:.04em;color:#6b7280;text-transform:uppercase;margin:0;font-size:.72rem;font-weight:600}.metric{color:#111827;margin:0;font-size:.92rem;font-weight:600}.subtle-btn{cursor:pointer;font:inherit;color:#1f2937;background:#fff;border:1px solid #11182724;border-radius:.6rem;padding:.36rem .58rem;font-weight:600;transition:background-color .12s,border-color .12s}.subtle-btn:hover{background:#f5f8ff;border-color:#3f7de859}.toggle-row,.stepper-row,.midi-row{align-items:center;gap:.4rem;display:flex}.toggle-row{color:#1f2937;justify-content:space-between}.stepper-row .subtle-btn{min-width:2rem}.midi-row select{min-width:0;font:inherit;color:#111827;background:#fff;border:1px solid #11182724;border-radius:.6rem;flex:1;padding:.35rem .48rem;font-size:.82rem}.control-card input[type=range]{accent-color:#3f7de8}.controls-drawer{z-index:10;background:#fffffff2;border:1px solid #eceef2;border-radius:.95rem;width:min(21rem,100vw - 1.5rem);padding:.45rem;position:fixed;bottom:1rem;right:1rem;box-shadow:0 10px 30px #1118271f}.controls-drawer>summary{cursor:pointer;-webkit-user-select:none;user-select:none;color:#4b5563;padding:.35rem .45rem;font-size:.78rem;font-weight:600;list-style:none}.controls-drawer>summary::-webkit-details-marker{display:none}.controls-drawer[open]>summary{margin-bottom:.3rem}.compact-card{background:#fcfcfd;border:1px solid #eef0f3;border-radius:.72rem;padding:.52rem}.site-credit{letter-spacing:.02em;color:#11182752;z-index:2;font-size:.58rem;text-decoration:none;position:fixed;bottom:.35rem;left:50%;transform:translate(-50%)}.site-credit:hover,.site-credit:focus-visible{color:#1118278c}@media (width<=640px){.keyboard-panel{min-height:15rem;padding:1rem .5rem .8rem;overflow:auto hidden}.keyboard-panel svg{width:min(100%,72rem);height:auto}.fullscreen-btn{top:.5rem;right:.5rem}.midi-row{flex-direction:column;align-items:stretch}.controls-drawer{width:calc(100vw - 1rem);bottom:1.9rem;right:.5rem}.site-credit{font-size:.54rem;bottom:.28rem;left:50%;transform:translate(-50%)}}