.mira-cabinet{--plate:#bcc7ca;--plate-hi:#d2dcde;--ink:#1d1a17;--ink-dim:#6d6759;--red:#d13b2b;--orange:#e6762b;--yellow:#e8c02e;--cream:#ece7d8;--led:#ff3b2a;--focus:#1d1a17;box-sizing:border-box;background:radial-gradient(ellipse at 50% 0, color-mix(in oklab, var(--foreground) 7%, var(--background)), var(--background) 70%);flex:1 0 auto;justify-content:center;padding:2rem 1.5rem;display:flex}.mira{box-sizing:border-box;width:min(100%,48rem);height:max-content;color:var(--ink);background:linear-gradient(180deg, var(--plate-hi), var(--plate));border:.5rem solid #1b1816;border-radius:6px;align-content:start;gap:1.1rem;margin-block:auto;padding:1rem 1.25rem 1.25rem;font-family:Helvetica Neue,Arial Narrow,Arial,sans-serif;display:grid;position:relative;box-shadow:inset 0 1px #ffffff80,inset 0 -2px #0000002e,0 24px 50px #0000008c}.mira-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1rem;display:flex}.mira-name{letter-spacing:.22em;margin:0;font-size:1.5rem;font-weight:800;line-height:1}.mira-name span{color:var(--red)}.mira-tagline{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.3em;margin:.3rem 0 0;font-size:.55rem}.mira-tagline:after{content:"";background:linear-gradient(90deg, var(--red) 0 25%, var(--orange) 25% 50%, var(--yellow) 50% 75%, var(--cream) 75% 100%);border-radius:1px;width:5.2rem;height:.3rem;margin-top:.35rem;display:block}.mira-lcd-bar{flex:14rem;align-items:stretch;gap:.4rem;max-width:20rem;display:flex}.mira-lcd{background:#1a0d0b;border-radius:3px;flex:1;align-content:center;min-width:0;padding:.35rem .6rem;font-family:ui-monospace,SF Mono,Menlo,monospace;display:grid;box-shadow:inset 0 2px 5px #000c,0 0 0 2px #00000040}.mira-lcd-line{text-overflow:ellipsis;color:#ff6a4a;white-space:nowrap;text-shadow:0 0 6px #ff50328c;margin:0;font-size:.72rem;font-weight:700;line-height:1.35;overflow:hidden}.mira-lcd-dim{color:#b2402c;text-shadow:none}.mira-lcd-button{width:1.9rem;color:var(--cream);cursor:pointer;background:linear-gradient(#4a4540,#2b2825);border:0;border-radius:3px;place-items:center;display:grid;box-shadow:0 2px #0e0d0c,inset 0 1px #ffffff2e}.mira-lcd-button:active{translate:0 1px;box-shadow:0 1px #0e0d0c}.mira-lcd-button:focus-visible,.mira-start:focus-visible,.mira-key:focus-visible,.mira-step:focus-visible,.mira-bass-step:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.mira-knob-thumb:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.mira-start{font:inherit;color:var(--cream);text-transform:uppercase;letter-spacing:.18em;cursor:pointer;background:linear-gradient(#4a4540,#2b2825);border:0;border-radius:3px;align-items:center;gap:.5rem;padding:.55rem .9rem;font-size:.68rem;font-weight:700;display:inline-flex;box-shadow:0 3px #0e0d0c,inset 0 1px #ffffff2e}.mira-start[aria-pressed=true]{translate:0 2px;box-shadow:0 1px #0e0d0c}.mira-lamp{background:#5b1b14;border-radius:50%;width:.55rem;height:.55rem;box-shadow:inset 0 1px 1px #00000080}.mira-lamp[data-on]{background:radial-gradient(circle at 40% 35%, #fff2ee, var(--led) 55%);box-shadow:0 0 6px 1px #ff3b2ab3,inset 0 0 2px #fff9}.mira-row{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem 1rem;display:flex}.mira-section{border:1px solid #00000047;border-radius:3px;gap:.4rem;padding:.9rem .9rem .2rem;display:grid;position:relative}.mira-legend{text-transform:uppercase;letter-spacing:.24em;background:var(--plate);margin:0;padding:0 .35rem;font-size:.55rem;font-weight:700;position:absolute;top:0;left:.7rem;translate:0 -50%}.mira-group{gap:.75rem;display:flex}.mira-knob{--knob-size:2.75rem;justify-items:center;gap:.9rem;padding-top:.9rem;display:inline-grid;position:relative}.mira-knob[data-size=lg]{--knob-size:3.5rem}.mira-knob-control{width:var(--knob-size);aspect-ratio:1;touch-action:none;cursor:ns-resize;position:relative}.mira-knob-thumb{pointer-events:none;background:radial-gradient(circle at 32% 28%, #ffffff40, transparent 45%), repeating-conic-gradient(from 0deg, #26221f 0 4deg, #131110 4deg 8deg);border-radius:50%;position:absolute;inset:12%;box-shadow:0 5px 7px #00000073,inset 0 1px #ffffff4d,inset 0 -3px 4px #0006,0 0 0 3px #0a0908}.mira-knob-thumb:after{content:"";background:#f4f1ea;border-radius:2px;width:3px;height:32%;position:absolute;top:7%;left:50%;translate:-50%}.mira-knob-control[data-dragging] .mira-knob-thumb{filter:brightness(1.15)}.mira-knob-mark{pointer-events:none;position:absolute;inset:0}.mira-knob-tick{background:var(--ink-dim);width:1px;height:5px;position:absolute;top:0;left:50%;translate:-50%}.mira-knob-mark[data-active] .mira-knob-tick{background:var(--red)}.mira-knob-numeral{font-variant-numeric:tabular-nums;color:var(--ink-dim);rotate:calc(var(--knob-mark-angle) * -1);font-size:.6rem;line-height:1;position:absolute;top:-1.1rem;left:50%;translate:-50%}.mira-knob-label{text-transform:uppercase;letter-spacing:.16em;font-size:.58rem;font-weight:700}.mira-steps{background:#00000012;border-radius:3px;gap:.35rem .3rem;padding:.8rem .6rem .5rem;display:grid;box-shadow:inset 0 1px 3px #00000040}.mira-step{--key:var(--red);cursor:pointer;background:linear-gradient(180deg, color-mix(in oklab, var(--key), white 22%), var(--key));min-width:0;height:3.1rem;box-shadow:0 3px 0 color-mix(in oklab, var(--key), black 55%), 0 4px 5px #00000059, inset 0 1px 0 #ffffff73;border:0;border-radius:3px;padding:0;transition:translate 60ms;position:relative}.mira-step[data-group="1"]{--key:var(--orange)}.mira-step[data-group="2"]{--key:var(--yellow)}.mira-step[data-group="3"]{--key:var(--cream)}.mira-step:before{content:"";background:#00000059;border-radius:50%;width:.5rem;height:.5rem;position:absolute;top:.4rem;left:50%;translate:-50%}.mira-step[aria-pressed=true]:before{background:radial-gradient(circle at 40% 35%, #fff2ee, var(--led) 55%);box-shadow:0 0 6px 1px #ff3b2abf}.mira-step[data-current]{box-shadow:0 1px 0 color-mix(in oklab, var(--key), black 55%), inset 0 -.6rem .6rem -.3rem #ffffffb3;translate:0 2px}.mira-numbers{font-variant-numeric:tabular-nums;color:var(--ink-dim);text-align:center;margin:0;padding:0;font-size:.55rem;list-style:none}.mira-steps{grid-template-columns:repeat(16,minmax(0,1fr))}.mira-step-row,.mira-numbers,.mira-pitches{grid-template-columns:subgrid;grid-column:1/-1;display:grid}.mira-steps>*{min-width:0}.mira-grid{grid-template-columns:subgrid;grid-column:1/-1;row-gap:.35rem;display:grid}.mira-bass-step{cursor:pointer;background:linear-gradient(#4a4742,#2a2826);border:0;border-radius:3px;height:1.4rem;padding:0;position:relative;box-shadow:0 2px #0d0c0b,inset 0 1px #ffffff26}.mira-bass-step:before{content:"";background:#5a3511;border-radius:50%;width:.45rem;height:.45rem;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:inset 0 1px 1px #00000080}.mira-bass-step[aria-pressed=true]:before{background:radial-gradient(circle at 40% 35%,#fff4dc,#ffb347 55%);box-shadow:0 0 6px 1px #ffb347b3}.mira-bass-step[data-accent][aria-pressed=true]:before{background:radial-gradient(circle at 40% 35%, #ffe3de, var(--red) 55%);box-shadow:0 0 6px 1px #e2392fb3}.mira-bass-step[data-current]{background:linear-gradient(#8d8983,#4b4843);translate:0 1px;box-shadow:0 1px #0d0c0b}.mira-step-knob{justify-items:center;gap:.2rem;min-width:0;display:grid}.mira-step-knob-control{aspect-ratio:1;touch-action:none;cursor:ns-resize;width:min(100%,1.9rem);position:relative}.mira-step-knob-thumb{pointer-events:none;background:radial-gradient(circle at 32% 28%, #ffffff40, transparent 45%), repeating-conic-gradient(from 0deg, #26221f 0 4deg, #131110 4deg 8deg);border-radius:50%;position:absolute;inset:8%;box-shadow:0 4px 5px #00000073,inset 0 1px #ffffff4d,0 0 0 2px #0a0908}.mira-step-knob-thumb:after{content:"";background:var(--orange);border-radius:2px;width:3px;height:32%;position:absolute;top:7%;left:50%;translate:-50%}.mira-step-knob-thumb:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.mira-note{font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:.5rem;font-weight:700}.mira-instruments{grid-template-columns:repeat(8,minmax(0,1fr));gap:.5rem;display:grid}.mira-instrument{justify-items:center;gap:.35rem;display:grid}.mira-key{cursor:pointer;background:linear-gradient(#5a554f,#34302c);border:0;border-radius:3px;width:100%;height:2rem;position:relative;box-shadow:0 3px #0e0d0c,0 4px 5px #00000059,inset 0 1px #fff3}.mira-key[aria-pressed=true]{translate:0 2px;box-shadow:0 1px #0e0d0c}.mira-key[data-filled]:after{content:"";background:var(--cream);opacity:.7;border-radius:50%;width:.25rem;height:.25rem;position:absolute;bottom:.35rem;right:.4rem}.mira-key-label{letter-spacing:.16em;font-size:.6rem;font-weight:700}@media (width<=899px){.mira-steps{grid-template-columns:repeat(16,2.6rem);overflow-x:auto}}@media (width<=639px){.mira-cabinet{padding-inline:.5rem}.mira{padding-inline:.75rem}.mira-instruments{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:.75rem}}