.lab .reso,.tool-studio .reso{display:block;container:reso/inline-size;--reso-line:var(--green-line);--reso-glass:var(--bg)}.reso:focus-visible{outline:2px solid var(--amber);outline-offset:6px}.reso__row[data-row="1"],.reso__row[data-row="3"],.reso__voice-dials[data-row="1"],.reso__voice-dials[data-row="3"]{--row:var(--amber)}.reso__row,.reso__voice-dials{--row:var(--green)}.reso__face{display:grid;grid-gap:12px;gap:12px;grid-template-columns:104px minmax(0,1fr) 212px;grid-template-areas:"play screen pad" "worlds worlds pad" "matrix matrix matrix" "dials dials dials" "deck deck deck" "error error error";align-items:start}.reso__screen{grid-area:screen}.reso .reso__face .reso-play{grid-area:play}.reso__worlds{grid-area:worlds}.reso__matrix{grid-area:matrix}.reso__dials{grid-area:dials}.reso__pad{grid-area:pad}.reso__deck{grid-area:deck}.reso__error{grid-area:error}.reso__screen{position:relative;height:148px;overflow:hidden;border:1px solid var(--reso-line);border-radius:var(--radius);background:linear-gradient(var(--reso-line),var(--reso-line)) 50% /100% 1px no-repeat,repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),color-mix(in srgb,var(--reso-line) 45%,transparent) calc(12.5% - 1px) 12.5%),repeating-linear-gradient(0deg,transparent 0 calc(25% - 1px),color-mix(in srgb,var(--reso-line) 45%,transparent) calc(25% - 1px) 25%),var(--reso-glass);box-shadow:inset 0 0 36px color-mix(in srgb,var(--green) 7%,transparent)}.reso__scope{inset:0;display:block;width:100%;height:100%;color:var(--green-bright)}.reso__readout,.reso__scope{position:absolute;pointer-events:none}.reso__readout{top:8px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:0 10px;font-family:var(--font-screen);font-size:1.4rem;line-height:1.1;color:var(--amber);text-shadow:0 0 8px color-mix(in srgb,var(--amber) 40%,transparent);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.reso__readout>span+span:before{content:"\00B7";margin-right:10px}.reso__count:empty{display:none}.reso .reso__face button.reso-play{display:grid;place-items:center;align-content:center;grid-gap:4px;gap:4px;height:148px;padding:0;border:1px solid var(--amber);border-radius:var(--radius);background:color-mix(in srgb,var(--amber) 9%,var(--bg));color:var(--amber-bright);font-family:var(--font-screen);font-size:1.45rem;line-height:1;cursor:pointer}.reso .reso__face button.reso-play:hover{border-color:var(--amber-bright)}.reso .reso__face button.reso-play[data-playing]{background:var(--amber);color:var(--bg);box-shadow:0 0 26px color-mix(in srgb,var(--amber) 32%,transparent)}.reso-play__glyph{width:38px;height:38px;fill:currentColor}.reso__matrix{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);grid-gap:6px 14px;gap:6px 14px;padding:10px 12px;border:1px solid var(--reso-line);border-radius:var(--radius);background:var(--reso-glass)}.reso__row{display:contents}.reso__head{display:flex;gap:4px}.reso__steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));grid-gap:4px;gap:4px}.reso-cell:nth-child(4n+1):not(:first-child){margin-left:6px}.reso .reso__face button.reso-voice{display:inline-flex;align-items:center;gap:8px;min-width:86px;padding:0 10px;border:1px solid var(--reso-line);border-radius:4px;background:var(--bg-panel-2);color:var(--green-bright);font-family:var(--font-screen);font-size:1.4rem;line-height:1;cursor:pointer}.reso__row[data-selected] .reso-voice{border-color:var(--row);box-shadow:inset 0 0 0 1px var(--row)}.reso-voice__led{flex:none;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--row) 28%,var(--bg))}.reso-voice[data-hit] .reso-voice__led{background:var(--row);box-shadow:0 0 9px var(--row)}.reso-voice__note{min-width:3.2ch;text-align:left}.reso-voice[data-mute] .reso-voice__note{text-decoration:line-through}.reso-voice:after{content:attr(data-key);margin-left:auto;font-family:var(--font-body);font-size:.68rem;color:var(--green)}@media (pointer:coarse){.reso-voice:after{content:none}}.reso .reso__face button.reso-ms{width:34px;padding:0;border:1px solid var(--reso-line);border-radius:4px;background:transparent;color:var(--green);font-size:.78rem;cursor:pointer}.reso .reso__face button.reso-ms[data-kind=mute][aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:var(--bg)}.reso .reso__face button.reso-ms[data-kind=solo][aria-pressed=true]{background:var(--green-bright);border-color:var(--green-bright);color:var(--bg)}.reso .reso__face button.reso-cell{padding:0;border:1px solid var(--reso-line);border-radius:3px;background:color-mix(in srgb,var(--row) 5%,var(--bg));cursor:pointer}.reso .reso__face button.reso-cell[aria-pressed=true]{border-color:var(--row);background:color-mix(in srgb,var(--row) 58%,var(--bg))}.reso .reso__face button.reso-cell[data-current]{border-color:var(--green-bright)}.reso .reso__face button.reso-cell[aria-pressed=true][data-current]{background:var(--row);box-shadow:0 0 14px var(--row)}.reso .reso__face button.reso-cell:focus-visible{outline:2px solid var(--amber);outline-offset:1px}.reso__playhead{position:absolute;top:6px;bottom:6px;left:0;width:2px;margin-left:-1px;background:var(--green-bright);box-shadow:0 0 10px var(--green-bright);opacity:0;pointer-events:none}.reso__face[data-playing] .reso__playhead[data-on]{opacity:.85}.reso__dials{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 6px;padding:2px 10px 10px;border:1px solid var(--reso-line);border-radius:var(--radius)}.reso .inst-knob{--knob:46px;min-width:66px}.reso__dials>.inst-knob{flex:1 1}.reso__worlds .inst-seg{width:100%}.reso__worlds .inst-seg__opt{flex:1 1 auto}.reso__voice-dials{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 6px;margin-left:auto;padding-left:12px;border-left:2px solid var(--row)}.reso__pad{position:relative;aspect-ratio:1;width:100%;overflow:hidden;border:1px solid var(--reso-line);border-radius:var(--radius);background:linear-gradient(var(--reso-line),var(--reso-line)) 50% /100% 1px no-repeat,linear-gradient(var(--reso-line),var(--reso-line)) 50% /1px 100% no-repeat,radial-gradient(circle at 100% 0,color-mix(in srgb,var(--amber) 10%,transparent),transparent 70%),var(--reso-glass);touch-action:none;cursor:crosshair;-moz-user-select:none;user-select:none;-webkit-user-select:none}.reso__trail{inset:0;display:block;width:100%;height:100%;color:var(--amber)}.reso__puck,.reso__trail{position:absolute;pointer-events:none}.reso__puck{width:18px;height:18px;margin:-9px 0 0 -9px;border:1.5px solid var(--amber);border-radius:50%;background:color-mix(in srgb,var(--amber) 22%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--amber) 45%,transparent)}.reso__axis{position:absolute;font-size:.72rem;line-height:1;color:var(--green);pointer-events:none}.reso__axis:after{content:" \2192"}.reso__axis--x{left:10px;bottom:9px}.reso__axis--y{left:9px;bottom:30px;writing-mode:vertical-rl;transform:rotate(180deg)}.reso__deck{align-items:flex-start}.reso__deck,.reso__pattern{display:flex;flex-wrap:wrap;gap:8px}.reso__pattern{margin-right:auto}.reso .reso__face button.reso-key{padding:0 14px;border:1px solid var(--reso-line);border-radius:var(--radius);background:var(--bg);color:var(--green-bright);font-size:.84rem;cursor:pointer}.reso__deck .inst-export__note{font-size:.74rem}.reso .reso__face .reso__error{margin:0;max-width:none;padding:8px 12px;border-left:2px solid var(--amber);color:var(--amber);font-size:.84rem;overflow-wrap:anywhere}@container reso (max-width: 699px){.reso__face{grid-template-columns:minmax(0,1fr);grid-template-areas:"screen" "play" "worlds" "matrix" "dials" "pad" "deck" "error"}.reso__screen{height:128px}.reso .reso__face button.reso-play{grid-auto-flow:column;justify-content:center;gap:10px;height:56px}.reso-play__glyph{width:26px;height:26px}.reso__matrix{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px}.reso__head{display:contents}.reso .reso__face button.reso-voice{grid-row:1;min-width:0;justify-content:center;padding:0 4px}.reso__row[data-row="0"] .reso-voice{grid-column:1}.reso__row[data-row="1"] .reso-voice{grid-column:2}.reso__row[data-row="2"] .reso-voice{grid-column:3}.reso__row[data-row="3"] .reso-voice{grid-column:4}.reso__row:not([data-selected]) :is(.reso-ms,.reso__steps){display:none}.reso .reso__face button.reso-ms{grid-row:2;width:auto}.reso .reso__face button.reso-ms[data-kind=mute]{grid-column:1/3}.reso .reso__face button.reso-ms[data-kind=solo]{grid-column:3/5}.reso__steps{grid-row:3;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px;margin-top:4px}.reso-cell:nth-child(4n+1):not(:first-child){margin-left:0}.reso .reso__face button.reso-cell{aspect-ratio:5/4}.reso__playhead{display:none}.reso__dials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;padding:2px 6px 10px}.reso .inst-knob{--knob:44px;min-width:0}.reso__voice-dials{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;width:100%;margin:6px 0 0;padding:4px 0 0;border-left:0;border-top:2px solid var(--row)}.reso__pad{max-width:340px;justify-self:center}.reso__deck{flex-direction:column;align-items:stretch}.reso__pattern{margin-right:0}.reso__pattern>.reso-key{flex:1 1}}@media (prefers-reduced-motion:no-preference){.reso .reso__face button.reso-cell{transition:background-color .28s ease-out,box-shadow .28s ease-out,border-color .2s ease-out}.reso .reso__face button.reso-cell[data-current]{transition:none}.reso-voice__led{transition:background-color .24s ease-out,box-shadow .24s ease-out}.reso-voice[data-hit] .reso-voice__led{transition:none}.reso__playhead{transition:opacity .16s ease-out}.reso .reso__face button.reso-play{transition:background-color .14s ease-out,color .14s ease-out}}