.instrument-shell:has(.tone-instrument){height:auto;min-height:100dvh}.instrument-shell:has(.tone-instrument) .instrument-workspace{min-height:min-content}.tone-instrument{--tone:#6d5d82;flex-direction:column;flex:1;justify-content:space-evenly;align-items:center;gap:12px;min-width:0;padding:8px 0;display:flex}.tone-display{text-align:center;flex-direction:column;flex:1;justify-content:center;width:min(100%,520px);min-height:160px;display:flex}.tone-eyebrow{letter-spacing:2px;color:#80718d;font-size:10px}.tone-readout{white-space:nowrap;justify-content:center;align-items:baseline;gap:12px;margin-top:10px;display:flex}.tone-readout strong{letter-spacing:-5px;font-variant-numeric:tabular-nums;color:#4e435c;font-size:clamp(64px,16vw,120px);font-weight:500;line-height:1.05}.tone-readout>span{color:#80718d;font-size:22px}.tone-wave{fill:none;stroke:#aa9bb9;stroke-width:2px;width:min(100%,360px);height:45px;margin:12px auto 8px}.tone-wave-axis{stroke:#e5dfeb;stroke-width:1px}.tone-state{letter-spacing:1.5px;color:#71657c;justify-content:center;align-items:center;gap:7px;font-size:10px;display:flex}.tone-state i{background:#beb6c6;border-radius:50%;width:6px;height:6px}.tone-instrument[data-state=playing] .tone-state i{background:#657b4f}.tone-instrument[data-state=playing] .tone-wave{stroke:#77638f}.tone-panel{flex-direction:column;flex-shrink:0;gap:5px;width:min(100%,440px);display:flex}.tone-frequency-label{color:#62566f;justify-content:space-between;font-size:12px;display:flex}.tone-frequency-label>span{color:#81758b;font-size:11px}.tone-panel input[type=range]{width:100%;height:44px;accent-color:var(--tone);cursor:pointer}.tone-panel .tone-slider{height:44px}.tone-presets{gap:6px;display:flex}.tone-presets button{color:#63546f;background:0 0;border:1px solid #d9d0e0;border-radius:10px;flex:1;min-width:0;min-height:44px;font-size:12px}.tone-presets button[aria-pressed=true]{color:#4e3e5e;background:#e6deec;border-color:#9b87ad}.tone-precise{justify-content:center;align-items:center;gap:16px;padding:2px 0;display:flex}.tone-precise>button{color:#63546f;background:0 0;border:1px solid #d9d0e0;border-radius:50%;width:44px;height:44px;font-size:24px}.tone-precise>label{flex-direction:column;align-items:center;gap:2px;min-width:0;display:flex}.tone-precise>label>span:first-child{color:#81758b;font-size:10px}.tone-entry{color:#81758b;align-items:center;gap:5px;font-size:12px;display:flex}.tone-entry input{text-align:center;color:#4e435c;font-variant-numeric:tabular-nums;appearance:textfield;background:0 0;border:0;border-bottom:1px solid #cfc3d8;border-radius:0;max-width:105px;min-height:44px;font-family:inherit;font-size:19px}.tone-entry input::-webkit-inner-spin-button{appearance:none}.tone-level>label{color:#6d6078;justify-content:space-between;font-size:11px;display:flex}.tone-level output{font-variant-numeric:tabular-nums}.tone-note{color:#74677c;text-align:center;margin:2px 0 4px;font-size:11px;line-height:1.5}.tone-play{color:#fff;background:#6d5d82;border:1px solid #6d5d82;border-radius:14px;width:100%;min-height:56px;font-size:16px;font-weight:600}.tone-play[aria-pressed=true]{background:#a34438;border-color:#a34438}.tone-play:disabled{opacity:.5;cursor:not-allowed}.tone-status{text-align:center;color:#74677c;min-height:31px;font-size:11px;line-height:1.4}.tone-options{color:#74677c;font-size:12px}.tone-options summary{cursor:pointer;justify-content:center;align-items:center;min-height:44px;display:flex}.tone-options summary:after{content:"+";margin-left:10px}.tone-options[open] summary:after{content:"−"}.tone-options>label{justify-content:space-between;align-items:center;gap:12px;padding:4px 0 10px;display:flex}.tone-options select{font:inherit;background:#faf9f6;border:1px solid #d9d0e0;border-radius:8px;min-height:44px;padding:6px}.tone-instrument button:hover:enabled{filter:brightness(.97)}.tone-instrument button:disabled{opacity:.45}.tone-instrument :focus-visible{outline-offset:3px;outline:2px solid #785a93}@media (width<=359px){.tone-readout strong{letter-spacing:-3px;font-size:62px}.tone-readout{gap:7px}.tone-readout>span{font-size:19px}.tone-presets{gap:4px}.tone-presets button{font-size:11px}.tone-instrument{gap:8px}}@media (height<=740px) and (orientation:portrait){.tone-instrument{justify-content:flex-start;gap:8px;padding:6px 0}.tone-display{min-height:120px}.tone-eyebrow{font-size:9px}.tone-readout strong{font-size:64px}.tone-wave{height:26px;margin:4px auto}.tone-panel{gap:3px}.tone-play{min-height:48px}.tone-status{min-height:30px}.tone-note{font-size:10px}}@media (width>=700px) and (height<=600px){.tone-instrument{grid-template-columns:1fr 1fr;align-items:center;gap:32px;max-width:1100px;margin:auto;padding:10px 0;display:grid}.tone-display{min-width:0}.tone-panel{gap:4px}.tone-readout strong{font-size:75px}.tone-wave{width:90%}}@media (width>=700px) and (height<=450px){.tone-instrument{align-items:start;padding:0}.tone-display{align-self:center}.tone-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 12px;display:grid}.tone-frequency-label,.tone-panel>.tone-slider,.tone-presets,.tone-note,.tone-play,.tone-status,.tone-options{grid-column:1/-1}.tone-precise{gap:4px}.tone-entry input{max-width:65px;font-size:16px}.tone-entry{gap:2px;font-size:10px}.tone-level{align-self:center;min-width:0}.tone-note{margin:0;font-size:10px;line-height:1.4}.tone-play{min-height:48px}.tone-status{min-height:22px;font-size:10px}.tone-options summary{min-height:44px}.tone-frequency-label{font-size:10px}}