.tuner-stage{flex:1;justify-content:center;min-width:0;display:flex;container:tuner/inline-size}.tuner-stage[data-layout=page]{height:100svh;padding:calc(.75rem + var(--safe-top,0px)) 1rem 0;flex:1 0 auto;overflow:hidden;container-type:size}.tuner-stage[data-layout=embedded]{border-radius:1.25rem;max-width:48rem;margin:0 auto;padding:1rem}.tuner-face{flex-direction:column;gap:12px;width:100%;max-width:30rem;min-height:0;display:flex}.tuner-stage[data-layout=page] .tuner-face{height:100%}.tuner-display{flex-direction:column;flex:auto;gap:12px;min-height:0;display:flex}.tuner-stage[data-layout=page] .tuner-display{overscroll-behavior:contain;scrollbar-width:none;overflow-y:auto}.tuner-stage[data-layout=page] .tuner-display::-webkit-scrollbar{display:none}.tuner-controls{flex-direction:column;flex:none;gap:12px;padding:4px 0 18px;display:flex}.tuner-stage[data-layout=embedded] .tuner-controls{padding-bottom:0}.tuner-topline{justify-content:space-between;align-items:center;min-height:22px;display:flex}.tuner-title{align-items:center;gap:8px;display:inline-flex}.tuner-note-row{justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.tuner-note{align-items:flex-start;font-size:clamp(4.5rem,min(38cqw,20svh),10.5rem);font-weight:800;font-stretch:70%;transition:color .18s,opacity .3s;display:flex}.tuner-note[data-state=locked]{color:var(--vi-ok)}.tuner-note[data-state=stale]{opacity:.35}.tuner-letter-window{height:1em;display:block;overflow:hidden}.tuner-letter{height:1em;line-height:1em;display:block}.tuner-letter[data-empty=true]{color:var(--vi-ink-3);font-weight:200}.tuner-letter[data-roll=up]{animation:tuner-roll-up .24s var(--vi-ease-out)}.tuner-letter[data-roll=down]{animation:tuner-roll-down .24s var(--vi-ease-out)}@keyframes tuner-roll-up{0%{transform:translateY(100%)}}@keyframes tuner-roll-down{0%{transform:translateY(-100%)}}.tuner-note-side{flex-direction:column;justify-content:space-between;align-self:stretch;padding:10px 0 4px 4px;display:flex}.tuner-accidental{min-height:.3em;font-size:.3em}.tuner-note-octave{color:var(--vi-ink-3);font-size:.28em}.tuner-note-meta{flex-direction:column;align-items:flex-end;gap:10px;padding-bottom:8px;display:flex}.tuner-cents{font-size:clamp(2.5rem,9svh,3.5rem);transition:color .18s}.tuner-cents[data-state=waiting] .tuner-cents-value{color:var(--vi-ink-3);font-weight:200}.tuner-cents[data-state=flat],.tuner-cents[data-state=sharp]{color:var(--vi-signal)}.tuner-cents small{color:var(--vi-ink-2);margin-left:2px;font-size:22px}.tuner-readouts{grid-template-columns:auto auto;align-items:baseline;gap:3px 10px;margin:0;display:grid}.tuner-readouts dt{text-align:right}.tuner-readouts dd{font-family:var(--vi-mono);font-variant-numeric:tabular-nums;text-align:right;margin:0;font-size:12px}.tuner-advice{align-items:center;gap:6px;min-height:22px;margin:0;font-size:15px;font-weight:500;transition:color .18s;display:flex}.tuner-advice[data-state=waiting]{color:var(--vi-ink-2)}.tuner-advice[data-state=locked]{color:var(--vi-ok)}.tuner-advice svg{flex:none;width:16px;height:16px}.tuner-deviation{flex-direction:column;gap:8px;padding:10px 12px 12px;display:flex}.tuner-meter{width:100%;height:28px;display:block}.tuner-scale{height:12px;font-family:var(--vi-mono);color:var(--vi-ink-2);font-size:10px;position:relative}.tuner-scale>span{white-space:nowrap;position:absolute;top:0;transform:translate(-50%)}.tuner-scale>span:first-child{transform:none}.tuner-scale>span:last-child{transform:translate(-100%)}.tuner-strobe{border-radius:3px;width:100%;height:22px;display:block}.tuner-history{flex-direction:column;flex:auto;gap:6px;min-height:78px;max-height:220px;padding:9px 12px 10px;display:flex}.tuner-history canvas{flex:1 1 0;width:100%;height:0;min-height:40px;display:block}.tuner-permission{flex-direction:column;align-items:flex-start;gap:12px;padding:16px;display:flex}.tuner-permission-icon{background:var(--vi-key);border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.tuner-permission-icon svg{width:20px;height:20px}.tuner-permission h2{margin:0 0 4px;font-size:16px;font-weight:700}.tuner-permission p{color:var(--vi-ink-2);margin:0;font-size:13px;line-height:1.5}.tuner-permission-action{letter-spacing:0;text-transform:none;border-radius:12px;height:44px;padding:0 18px;font-family:inherit;font-size:14px}.tuner-strings,.tuner-octave{flex-direction:column;gap:6px;padding:9px 12px 10px;display:flex}.tuner-string-list{grid-auto-columns:minmax(44px,1fr);grid-auto-flow:column;gap:6px;display:grid}.tuner-string{cursor:pointer;min-width:44px;height:clamp(104px,15svh,148px);color:var(--vi-ink-2);font:inherit;background:0 0;border:0;border-radius:10px;flex-direction:column;align-items:center;gap:3px;padding:6px 0;display:flex;position:relative}.tuner-string canvas{flex:1;width:100%;min-height:0;display:block}.tuner-string-note{font-family:var(--vi-mono);font-size:12px;font-weight:600}.tuner-string-frequency{font-family:var(--vi-mono);color:var(--vi-ink-3);font-size:9px}.tuner-string[data-sounding=true] .tuner-string-note,.tuner-string[data-sounding=true] .tuner-string-frequency,.tuner-string[aria-pressed=true] .tuner-string-note{color:var(--vi-ink)}.tuner-string[aria-pressed=true]{background:var(--vi-key)}.tuner-string[aria-pressed=true]:after{background:var(--vi-signal);content:"";border-radius:50%;width:6px;height:6px;position:absolute;top:6px;right:6px}.tuner-strings .vi-chip{min-height:32px;padding:0 12px}.tuner-octave-keys{height:76px;position:relative}.tuner-octave-key{position:absolute;top:0}.tuner-octave-key[data-color=white]{background:var(--vi-body);width:calc(14.2857% - 2px);margin-left:1px;bottom:0}.tuner-octave-key[data-color=white] em{font-family:var(--vi-mono);color:var(--vi-ink-2);text-align:center;font-size:10px;font-style:normal;position:absolute;bottom:8px;left:0;right:0}.tuner-octave-key[data-color=black]{background:var(--vi-ink);width:8.57143%;height:58%;transform:translate(-50%)}.tuner-octave-key[data-active=true]{background:var(--vi-signal)}.tuner-octave-key[data-active=true][data-locked=true]{background:var(--vi-ok)}.tuner-octave-key[data-color=white][data-active=true] em{color:var(--vi-ink)}.tuner-keys{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;display:grid}.tuner-keys>.vi-key{border-radius:12px;height:52px}.tuner-preset{letter-spacing:0;text-transform:none;justify-content:space-between;align-items:center;gap:6px;min-width:0;padding:0 12px;font-family:inherit;font-size:14px;font-weight:500;display:flex}.tuner-preset>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tuner-preset svg{width:14px;height:14px;color:var(--vi-ink-2);flex:none}.tuner-preset select{cursor:pointer;opacity:0;width:100%;height:100%;font-size:16px;position:absolute;inset:0}.tuner-reference{cursor:default;align-items:center;gap:2px;padding:0 4px;display:flex}.tuner-reference:active{background:var(--vi-key);transform:none}.tuner-reference button{cursor:pointer;width:30px;height:40px;color:var(--vi-ink-2);background:0 0;border:0;place-items:center;display:grid}.tuner-reference button svg{width:14px;height:14px}.tuner-reference [role=spinbutton]{flex-direction:column;align-items:center;gap:1px;min-width:34px;display:flex}.tuner-reference small{color:var(--vi-ink-2);font-size:9px}.tuner-reference b{letter-spacing:0;font-size:20px}.tuner-mic{align-items:center;gap:8px;padding:0 14px;display:flex}@media (prefers-reduced-motion:reduce){.tuner-letter[data-roll]{animation:none}}@container tuner (width>=560px) and (aspect-ratio>=23/20){.tuner-face{grid-template:"top top""advice strings""permission strings""keys keys"/minmax(0,1fr) minmax(0,1fr);align-self:stretch;gap:14px 18px;max-width:68rem;padding-bottom:14px;display:grid}.tuner-face[data-listening=true]{grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"top top""note deviation""advice deviation""history strings""keys keys"}.tuner-display,.tuner-controls{display:contents}.tuner-topline{grid-area:top}.tuner-note-row{grid-area:note}.tuner-advice{grid-area:advice}.tuner-deviation{grid-area:deviation;align-self:start}.tuner-history{grid-area:history;min-height:0;max-height:none}.tuner-permission{grid-area:permission;align-self:start}.tuner-strings,.tuner-octave{grid-area:strings;min-height:0}.tuner-face[data-listening=false] .tuner-strings,.tuner-face[data-listening=false] .tuner-octave{align-self:start}.tuner-string-list{flex:1}.tuner-string{height:auto;min-height:88px}.tuner-keys{grid-area:keys}}@container tuner (width>=560px) and (aspect-ratio>=23/20) and (height>=560px){.tuner-stage[data-layout=page] .tuner-face{width:min(100%,60rem);height:auto;max-height:100%}.tuner-stage[data-layout=page] .tuner-face[data-listening=true]{height:min(100%,38rem)}.tuner-face{border:1px solid var(--vi-line);background:var(--vi-case);box-shadow:var(--vi-case-shadow);border-radius:28px;align-self:center;padding:22px 26px 24px}}@container tuner (width>=600px) and (height>=760px) and (aspect-ratio<=23/20){.tuner-stage[data-layout=page] .tuner-face{height:min(100%,56rem)}.tuner-face{border:1px solid var(--vi-line);background:var(--vi-case);box-shadow:var(--vi-case-shadow);border-radius:32px;align-self:center;padding:22px 24px 4px}}@container tuner (width>=560px) and (aspect-ratio>=23/20) and (height<=480px){.tuner-face{row-gap:10px}.tuner-face[data-listening=true]{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"note deviation""advice strings""keys keys"}.tuner-face[data-listening=true] .tuner-topline,.tuner-history,.tuner-permission-icon,.tuner-string-frequency,.tuner-scale{display:none}.tuner-advice{align-self:start}.tuner-permission{gap:8px;padding:12px 14px}.tuner-note{font-size:clamp(3.5rem,26cqh,6rem)}.tuner-note-meta{gap:4px;padding-bottom:4px}.tuner-cents{font-size:clamp(2rem,12cqh,3rem)}.tuner-readouts{row-gap:0}.tuner-deviation{gap:6px;padding:8px 12px 10px}.tuner-strings,.tuner-octave{gap:4px;padding:6px 12px 8px}.tuner-strings .vi-chip{min-height:26px}.tuner-strings .tuner-string{height:auto;min-height:46px;padding:2px 0}.tuner-string canvas{min-height:18px}.tuner-octave-keys{flex:1;height:auto;min-height:44px}}@media (max-height:520px){.tuner-string{height:88px}.tuner-keys>.vi-key{height:44px}}