.st-demo{container-type:inline-size}.st-window{--u:1px;--f:calc(var(--u) / 1.19);color:#eef2f7;font-size:calc(14 * var(--f));letter-spacing:normal;text-align:left;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:radial-gradient(300px at 175px 232px,#3cf0bf12,#0000),linear-gradient(#11151c,#0a0c10);border-radius:22px;flex-direction:column;gap:12px;padding:16px 12px 12px;line-height:1.2;display:flex;position:relative;overflow:hidden}.st-window button,.st-window select{letter-spacing:inherit}.st-window :focus-visible{outline-offset:-2px;outline:2px solid #3cf0bf}.st-window .st-knob:focus-visible{outline:none}.st-caption{font-size:calc(11 * var(--f));font-weight:700;line-height:calc(15 * var(--u));letter-spacing:.095em;text-transform:uppercase;color:#7d879a;white-space:nowrap;display:block}.st-caption.st-dim{color:#9aa4b5}.st-caption-svg{letter-spacing:.095em;font-size:9.25px;font-weight:700}.st-studio-only{color:#7d879a}.st-panel{border-radius:calc(14 * var(--u));background:linear-gradient(#1f232a, #12161d calc(80 * var(--u)));border:1px solid #242b36;position:relative}.st-panel:before{content:"";top:-1px;left:calc(14 * var(--u));right:calc(14 * var(--u));pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff12,#0000);height:1px;position:absolute}.st-header{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;display:grid}.st-brand{grid-area:1/1;align-items:center;gap:10px;display:flex}.st-latency{grid-area:1/2}.st-presets{grid-area:2/1}.st-header .st-mode{width:calc(150 * var(--u));grid-area:2/2}.st-logo{width:calc(30 * var(--u));height:calc(30 * var(--u));flex-shrink:0}.st-wordmark{font-size:calc(24 * var(--f));font-weight:700;line-height:calc(32 * var(--u));white-space:nowrap}.st-wordmark span{color:#3cf0bf}.st-chip{width:calc(42 * var(--u));height:calc(19 * var(--u));border-radius:calc(9.5 * var(--u));color:#9aa4b5;font-size:calc(11 * var(--f));letter-spacing:.095em;border:1px solid #343d4c;justify-content:center;align-items:center;font-weight:700;display:flex}.st-latency{justify-content:flex-end;align-items:flex-end;gap:calc(2 * var(--u));flex-direction:column;display:flex}.st-latency-value{font-size:calc(15 * var(--f));font-weight:700;line-height:calc(20 * var(--u));font-variant-numeric:tabular-nums}.st-combo{height:calc(30 * var(--u));position:relative}.st-combo select{appearance:none;width:100%;height:100%;padding:0 calc(26 * var(--u)) 0 calc(12 * var(--u));border-radius:calc(8 * var(--u));color:#eef2f7;font-size:calc(14 * var(--f));text-overflow:ellipsis;cursor:pointer;background:#1a1f28;border:1px solid #242b36;font-weight:700;display:block}.st-combo select:hover{background:#2b3038;border-color:#343d4c}.st-combo select option,.st-combo select optgroup{color:#eef2f7;background:#1a1f28;font-weight:400}.st-combo svg{top:50%;right:calc(10 * var(--u));width:calc(10 * var(--u));height:calc(7 * var(--u));color:#9aa4b5;pointer-events:none;position:absolute;transform:translateY(-50%)}.st-mode{height:calc(30 * var(--u));border-radius:calc(6 * var(--u));background:#1a1f28;border:1px solid #242b36;display:flex}.st-mode button{margin:calc(1.5 * var(--u));border-radius:calc(4.5 * var(--u));color:#9aa4b5;font-size:calc(12.5 * var(--f));cursor:pointer;flex:1;font-weight:700}.st-mode button:hover{color:#eef2f7}.st-mode button[aria-pressed=true]{color:#0a0c10;background:#3cf0bf}.st-pills{gap:calc(5 * var(--u));display:flex}.st-pills button{border-radius:calc(8 * var(--u));color:#7d879a;min-width:0;font-size:calc(14 * var(--f));cursor:pointer;background-color:#1a1f28;border:1px solid #242b36;flex:1;font-weight:700;position:relative}.st-pills button[data-sharp]{font-size:calc(12 * var(--f));background-color:#0d1015}.st-pills button:hover{border-color:#343d4c}.st-pills button[aria-pressed=true]{color:#3cf0bf;background-image:linear-gradient(#3cf0bf1f,#3cf0bf1f);border-color:#3cf0bf8c}.st-pills button[aria-pressed=true]:hover{background-image:linear-gradient(#3cf0bf33,#3cf0bf33)}.st-pills button[data-target]{color:#0a0c10;box-shadow:0 0 0 calc(3 * var(--u)) #3cf0bf2e;background-image:linear-gradient(#3cf0bf,#10a07c);border-color:#0000}.st-held{top:calc(4 * var(--u));right:calc(4 * var(--u));width:calc(6 * var(--u));height:calc(6 * var(--u));background:#a996ff;border-radius:50%;position:absolute}.st-toggle{align-items:center;gap:calc(8 * var(--u));padding-left:calc(1 * var(--u));color:#9aa4b5;font-size:calc(13 * var(--f));white-space:nowrap;cursor:pointer;font-weight:700;display:flex}.st-toggle:hover,.st-toggle[aria-checked=true]{color:#eef2f7}.st-toggle-pill{width:calc(32 * var(--u));height:calc(18 * var(--u));border-radius:calc(9 * var(--u));background:#242b36;flex-shrink:0;transition:background-color .15s;position:relative}.st-toggle-pill:after{content:"";top:calc(3 * var(--u));left:calc(3 * var(--u));width:calc(12 * var(--u));height:calc(12 * var(--u));background:#9aa4b5;border-radius:50%;transition:transform .15s;position:absolute}.st-toggle[aria-checked=true] .st-toggle-pill{background:#a996ff}.st-toggle[aria-checked=true] .st-toggle-pill:after{transform:translateX(calc(14 * var(--u)));background:#0a0c10}.st-knob{touch-action:none;cursor:ns-resize;outline:none}.st-knob[aria-disabled]{cursor:default}.st-small-knob{width:calc(84 * var(--u));height:calc(92 * var(--u))}.st-hero-knob{width:calc(180 * var(--u));height:calc(128 * var(--u))}.st-knob-caption{text-align:center}.st-divider{background:#242b36;display:none}.st-help{color:#7d879a;font-size:calc(11.5 * var(--f));line-height:calc(15 * var(--u));display:block}.st-graph-svg{border-radius:calc(13 * var(--u));cursor:grab;touch-action:pan-y;width:100%;height:100%;position:absolute;inset:0}.st-graph-svg:active{cursor:grabbing}.st-hero{flex-direction:column;order:1;align-items:center;padding:10px 10px 14px;display:flex}.st-gauge{width:100%;max-width:330px;height:auto}.st-retune-caption{text-align:center;margin-top:6px;margin-bottom:2px}.st-graph{order:2;height:280px}.st-scalebar{order:3;grid-template-columns:76px minmax(0,1fr);gap:14px 12px;padding:12px;display:grid}.st-field{flex-direction:column;gap:6px;display:flex}.st-notes-field,.st-target-field,.st-voice-field{grid-column:1/-1}.st-scalebar .st-pills{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.st-scalebar .st-pills button{height:38px}.st-target-field .st-toggle{min-height:36px}.st-controls{order:4;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 4px;padding:16px 12px;display:grid}.st-cell{flex-direction:column;align-items:center;gap:6px;display:flex}.st-voice-field{border-top:1px solid #242b36;padding-top:14px}@container (min-width:600px){.st-window{grid-template-columns:300px minmax(0,1fr);padding:16px;display:grid}.st-header,.st-scalebar,.st-controls{grid-column:1/-1}.st-header{grid-template-columns:auto minmax(0,1fr) auto auto}.st-brand{grid-area:1/1}.st-presets{grid-area:1/2;max-width:220px}.st-latency{grid-area:1/3}.st-header .st-mode{grid-area:1/4}.st-graph{height:auto;min-height:330px}.st-scalebar{order:0;grid-template-columns:70px 168px minmax(0,1fr);align-items:end}.st-target-field{grid-area:1/3;justify-self:end}.st-notes-field{grid-area:2/1/3/-1}.st-scalebar .st-pills{gap:5px;display:flex}.st-scalebar .st-pills button{height:30px}.st-controls{grid-template-columns:repeat(5,minmax(0,1fr))}}@container (min-width:840px){.st-window{--u:calc(100cqw / 1000);--f:calc(var(--u) / 1.19);aspect-ratio:1000/640;background:radial-gradient(circle calc(300 * var(--u)) at calc(175 * var(--u)) calc(232 * var(--u)), #3cf0bf12, transparent), linear-gradient(#11151c, #0a0c10);border-radius:26px;padding:0;display:block}.st-header,.st-brand,.st-field,.st-cell{display:contents}.st-at{left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));max-width:none;margin:0;padding:0;position:absolute}.st-panel .st-at{left:calc(var(--x) * var(--u) - 1px);top:calc(var(--y) * var(--u) - 1px)}.st-panel.st-at{min-height:0;display:block}.st-scalebar .st-pills{gap:calc(5 * var(--u));display:flex}.st-scalebar .st-pills button{height:auto}.st-target-field .st-toggle{min-height:0}.st-latency .st-caption{margin-top:calc(4 * var(--u))}.st-latency{justify-content:flex-start}.st-divider{display:block}}.st-tip{z-index:10;color:#eef2f7;letter-spacing:normal;text-align:left;pointer-events:none;text-wrap:balance;background:#1a1f28;border:1px solid #343d4c;border-radius:7px;max-width:282px;padding:8px 11px;font-size:13px;line-height:1.35;position:absolute}.st-piano{-webkit-user-select:none;user-select:none;touch-action:none;width:min(100%,336px);height:132px;display:flex;position:relative}.st-pkey{color:#7d879a;cursor:pointer;background:linear-gradient(#dfe4ec,#f4f6f9);border:1px solid #0a0c10;border-radius:0 0 8px 8px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:10px;font-size:12px;font-weight:700;display:flex;position:relative}.st-pkey[data-black]{z-index:1;color:#7d879a;background:linear-gradient(#20252e,#0b0d11);border-radius:0 0 6px 6px;width:26px;height:60%;padding-bottom:8px;font-size:10px;position:absolute;top:0}.st-pkey[aria-pressed=true]{color:#0a0c10;background:#a996ff}.st-pkey:focus-visible{outline-offset:-3px;outline:2px solid #3cf0bf}
