.midi-root{--midi-bg:#fff5f9;--midi-surface:#fff;--midi-surface-alt:#fff9fc;--midi-accent:#f49;--midi-accent-soft:#ff44991f;--midi-accent-strong:#e91e8c;--midi-lilac:#ddd6fe;--midi-sky:#bae6fd;--midi-mint:#bbf7d0;--midi-text:#3b1f45;--midi-text-muted:#7c6485;--midi-border:#ff449924;--midi-shadow:0 10px 40px #3b1f4514;--midi-dot:#ff449912;background-color:var(--midi-bg);background-image:radial-gradient(circle at 10% 12%, #ddd6fe8c, transparent 40%), radial-gradient(circle at 92% 8%, #bae6fd73, transparent 36%), radial-gradient(circle at 50% 100%, #ff44990f, transparent 42%), radial-gradient(var(--midi-dot) 1px, transparent 1px);min-height:100vh;color:var(--midi-text);background-size:auto,auto,auto,18px 18px}.midi-shell{max-width:980px;margin:0 auto;padding:1.5rem 1rem 3rem}.midi-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem 1.25rem;margin-bottom:1.5rem;display:flex}.midi-header-brand{min-width:0}.midi-title{letter-spacing:.01em;color:var(--midi-text);margin:0;font-family:Caveat,Segoe Print,Comic Sans MS,cursive;font-size:clamp(2rem,5vw,2.65rem);font-weight:700;line-height:1.05}.midi-tagline{max-width:28rem;margin-top:.35rem}.midi-header-actions{flex-wrap:wrap;align-items:center;gap:.65rem;display:flex}.midi-workspace{flex-direction:column;gap:.85rem;display:flex}.midi-toolbar{border:1px solid var(--midi-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffb8;border-radius:999px;align-items:center;padding:.55rem .85rem;display:flex;box-shadow:0 2px 12px #3b1f450d}.midi-toolbar-divider{background:var(--midi-border);flex-shrink:0;width:1px;height:1.75rem}.midi-metronome-rail{width:100%;min-width:0}.midi-metronome-rail .shared-bpm-input{flex:0 auto;min-width:0}.midi-metronome-rail .shared-bpm-dropdown-anchor{min-width:0;max-width:100%}.midi-toolbar-select{min-width:4.5rem}.midi-playground-sheet{background:var(--midi-surface);border:1px solid var(--midi-border);box-shadow:var(--midi-shadow);border-radius:20px;padding:1rem 1rem 1.15rem;position:relative;overflow:hidden}.midi-playground-sheet:before{content:"";background:linear-gradient(225deg, var(--midi-surface-alt) 50%, #ff449914 50%);pointer-events:none;border-bottom-left-radius:12px;width:3.5rem;height:3.5rem;position:absolute;top:0;right:0}.midi-playground-sheet--plain:before{display:none}.midi-staff-panel{background-color:#fffefb;background-image:linear-gradient(#ff44990d 1px,#0000 1px),linear-gradient(90deg,#ff44990d 1px,#0000 1px);background-size:100% 28px,28px 100%;border:1px solid #ff44991f;border-radius:14px;min-height:220px;padding:.85rem .65rem;overflow-x:auto}.midi-empty-staff{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;min-height:200px;padding:2rem 1.25rem;display:flex}.midi-empty-staff-title{color:var(--midi-text);margin:0;font-family:Caveat,Segoe Print,cursive;font-size:1.65rem;font-weight:700}.midi-playground-actions{border-top:1px dashed #f493;flex-direction:column;gap:1rem;margin-top:1rem;padding-top:1rem;display:flex}.midi-playground-secondary{flex-direction:column;gap:.85rem;display:flex}.midi-capture-bar{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;display:flex}.midi-int-stepper{flex-direction:column;gap:.2rem;display:flex}.midi-int-stepper .shared-bpm-input{width:auto}.midi-field-label{color:var(--midi-text-muted);font-size:.72rem;font-weight:600}.midi-capture-cta{box-shadow:0 4px 16px #ff449947;background:linear-gradient(135deg, var(--midi-accent) 0%, var(--midi-accent-strong) 100%)!important;color:#fff!important;border-radius:999px!important;padding-inline-start:1.25rem!important;padding-inline-end:1.25rem!important;font-weight:700!important}.midi-capture-cta:hover{filter:brightness(1.04)}.midi-strictness{background:var(--midi-surface-alt);border:1px solid #ff44991a;border-radius:12px;padding:.65rem .75rem}.midi-export-chip{cursor:grab;font-weight:600;border:1.5px dashed var(--midi-accent)!important;color:var(--midi-accent-strong)!important;background:#ff44990f!important;border-radius:999px!important}.midi-export-btn{border-radius:999px!important}.midi-riff-step{background:var(--midi-accent-soft);border:1px solid #0000;border-radius:999px;padding:.35rem .75rem;font-size:.8rem;font-weight:600}.midi-riff-step.is-active{border-color:var(--midi-accent);color:var(--midi-accent-strong);background:#f493;box-shadow:0 0 0 3px #ff44991a}.midi-mode-switch{background:#ffffffd9;padding:2px;border:1px solid var(--midi-border)!important;border-radius:999px!important}.midi-mode-switch .MuiToggleButton-root{text-transform:none;font-weight:600;border:none!important;border-radius:999px!important;margin:0!important;padding-inline-start:.85rem!important;padding-inline-end:.85rem!important}.midi-mode-switch .MuiToggleButton-root.Mui-selected{background:var(--midi-accent-soft)!important;color:var(--midi-accent-strong)!important}.midi-beat-indicator{color:var(--midi-accent-strong);background:var(--midi-accent-soft);border-radius:999px;padding:.15rem .65rem;font-weight:700}.midi-root .shared-pk-white.active,.midi-root .shared-pk-black.active{background:var(--midi-accent-soft)!important;border-color:var(--midi-accent)!important}.midi-compose-view .shared-onscreen-piano-keyboard,.midi-guide-view{margin-top:.25rem}.midi-compose-view .shared-onscreen-piano-keyboard{border:1px solid var(--midi-border);border-radius:14px;overflow:hidden}@media (max-width:640px){.midi-toolbar{border-radius:16px}.midi-toolbar-divider{display:none}}