:root{--bg: #14161a;--panel: #1c1f25;--text: #e8eaed;--muted: #8b929c;--accent: #4ade80;--flat: #60a5fa;--sharp: #f97316;--line: #2b2f37;--zone-in-tune: #4ade80;--zone-close: #facc15;--zone-off: #fb923c;--zone-far: #f87171;--zone-idle: #4b5058;color-scheme:dark;font-family:SF Mono,ui-monospace,Cascadia Mono,Menlo,monospace}*{box-sizing:border-box}html,body{overscroll-behavior:none}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}.app{max-width:46rem;margin:0 auto;padding:max(2.5rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(4rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left));display:flex;flex-direction:column;gap:1.5rem}.app__header h1{margin:0;font-size:2rem;letter-spacing:.08em}.app__title{display:flex;align-items:center;justify-content:space-between;gap:1rem}.app-menu{position:relative;flex:none}.app-menu__trigger{display:flex;flex-direction:column;justify-content:center;gap:.28rem;width:2.75rem;height:2.75rem;padding:0 .6rem;border:1px solid var(--line);border-radius:.5rem;background:var(--panel);cursor:pointer}.app-menu__trigger:hover{border-color:var(--accent)}.app-menu__bar{display:block;height:2px;border-radius:1px;background:var(--text)}.app-menu__catcher{position:fixed;inset:0;z-index:20}.app-menu__list{position:absolute;z-index:21;top:calc(100% + .4rem);right:0;min-width:11rem;margin:0;padding:.3rem;list-style:none;border:1px solid var(--line);border-radius:.5rem;background:var(--panel);box-shadow:0 12px 32px #00000073}.app-menu__item{display:block;width:100%;padding:.6rem .7rem;border:0;border-radius:.35rem;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}.app-menu__item:hover,.app-menu__item:focus-visible{background:var(--line)}.overlay__backdrop{position:fixed;inset:0;z-index:30;background:#0009}.overlay__panel{position:fixed;z-index:31;top:50%;left:50%;width:min(32rem,calc(100vw - 2rem));max-height:min(85vh,44rem);max-height:min(85dvh,44rem);overflow-y:auto;padding:1.1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:.75rem;background:var(--bg)}.overlay__panel:focus{outline:none}.overlay__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.overlay__title{margin:0;font-size:1.1rem}.overlay__subtitle{margin:1.4rem 0 .4rem;font-size:.95rem}.overlay__text{margin:0 0 .9rem;color:var(--muted);font-size:.85rem;line-height:1.5}.overlay__form{display:flex;align-items:flex-end;gap:.6rem}.overlay__form .controls__field{flex:1}.overlay__error{margin:.6rem 0 0;color:var(--zone-far);font-size:.85rem}.overlay__note{margin:1rem 0 0;color:var(--muted);font-size:.78rem}.overlay__steps{margin:0;padding-left:1.2rem;color:var(--muted);font-size:.85rem;line-height:1.5}.overlay__steps li{margin-bottom:.9rem}.overlay__steps .controls__field{margin:.4rem 0;color:var(--muted)}.overlay__pay{display:inline-block;border-color:var(--accent);color:var(--text);text-decoration:none}.overlay__install{margin:0;color:var(--muted);font-size:.82rem;line-height:1.5}.overlay__install dt{margin-top:.7rem;color:var(--text);font-weight:700}.overlay__install dd{margin:.15rem 0 0}.app__header p{margin:.35rem 0 0;color:var(--muted)}.app__transport{display:flex;align-items:center;gap:1rem}.button{padding:.65rem 1.25rem;border:1px solid var(--line);border-radius:.5rem;background:var(--panel);color:var(--text);font:inherit;cursor:pointer}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.6;cursor:progress}.level{flex:1;display:flex;align-items:center;gap:.75rem;min-width:0}.level__track{position:relative;flex:1;height:.6rem;border-radius:999px;background:var(--panel);overflow:hidden}.level__fill{display:block;height:100%;background:var(--accent);transition:width 80ms linear}.level__peak{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--text);opacity:.8;transition:left 80ms linear}.level__track--clipping .level__fill{background:var(--sharp)}.level__readout{min-width:11rem;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}.notice{margin:0;padding:.75rem 1rem;border-radius:.5rem}.notice--error{background:#3b1d1d;color:#fca5a5}.notice--paused{display:block;width:100%;border:1px solid color-mix(in srgb,var(--zone-close) 45%,var(--line));background:#3a3117;color:#fde68a;font:inherit;text-align:left;cursor:pointer}.notice--paused .notice__message,.notice--paused .notice__hint{display:block}.notice--paused .notice__message{font-weight:700}.notice--paused .notice__hint{margin-top:.35rem}.notice__message{margin:0}.notice__hint{margin:.35rem 0 0;font-size:.85rem;opacity:.85}.app__timing{margin:0;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:1rem}.controls__field{display:flex;flex-direction:column;gap:.4rem;min-width:0;color:var(--muted);font-size:.85rem}.controls__hint{font-size:.72rem;line-height:1.35;color:var(--muted)}.controls__field select,.controls__field input{min-width:0;max-width:100%;padding:.4rem;border:1px solid var(--line);border-radius:.4rem;background:var(--panel);color:var(--text);font:inherit}.bars{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}.bar{--zone-colour: var(--zone-idle);--glow: 0;display:grid;align-items:center;gap:.6rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:.5rem;background:var(--panel);transition:border-color .18s ease-out}.bars__hint{margin:-.6rem 0 0;color:var(--muted);font-size:.75rem;line-height:1.3}.bar[data-zone=in-tune]{--zone-colour: var(--zone-in-tune)}.bar[data-zone=close]{--zone-colour: var(--zone-close)}.bar[data-zone=off]{--zone-colour: var(--zone-off)}.bar[data-zone=far]{--zone-colour: var(--zone-far)}.bar[data-zone=idle]{--zone-colour: var(--zone-idle)}.bar[data-zone=in-tune]{border-color:color-mix(in srgb,var(--zone-in-tune) 45%,var(--line))}.bar[data-playing=true]{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));animation:bar-pulse 1.1s ease-in-out infinite}@keyframes bar-pulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--accent) 30%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}}.bar__head{display:flex;align-items:baseline;gap:.4rem}.bar__play{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.bar__play:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:.2rem}.bar__note{font-size:1.15rem;font-weight:700;color:var(--zone-colour);transition:color .22s ease-out}.bar__octave{font-size:.7em;font-weight:400;opacity:.7}.bar__target{font-size:.68rem;color:var(--muted);opacity:0;transition:opacity .2s ease-out}.bar[data-snapped=true] .bar__target{opacity:1}.bar__track{position:relative;overflow:hidden;border-radius:.3rem;background:#0f1115}.bar__zone--close{position:absolute;background:color-mix(in srgb,var(--zone-in-tune) 14%,transparent)}.bar__centre{position:absolute;background:var(--muted);opacity:.55}.bar__needle-layer{position:absolute;inset:0;will-change:transform}.bar__needle{position:absolute;border-radius:2px;background:var(--zone-colour);opacity:calc(.25 + .75 * var(--glow));transition:background-color .22s ease-out,opacity .2s linear}.bar__cents{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums;text-align:right}.bars[data-layout=stacked] .bar{grid-template-columns:5.5rem 1fr 2.6rem}.bars[data-layout=stacked] .bar__head{flex-direction:column;align-items:flex-start;gap:0}.bars[data-layout=stacked] .bar__track{height:1.6rem}.bars[data-layout=stacked] .bar__zone--close{top:0;bottom:0;left:47%;width:6%}.bars[data-layout=stacked] .bar__centre{top:0;bottom:0;left:50%;width:1px}.bars[data-layout=stacked] .bar__needle{top:.22rem;bottom:.22rem;left:50%;width:3px;margin-left:-1.5px}.bars[data-layout=columns]{grid-auto-flow:column;grid-auto-columns:1fr;gap:.35rem;align-items:stretch}.bars[data-layout=columns] .bar{grid-template-rows:auto 1fr auto;justify-items:center;gap:.4rem;padding:.5rem .25rem;min-width:0}.bars[data-layout=columns] .bar__head{flex-direction:column;align-items:center;gap:0;text-align:center}.bars[data-layout=columns] .bar__track{width:100%;min-height:11rem;height:100%}.bars[data-layout=columns] .bar__zone--close{left:0;right:0;top:47%;height:6%}.bars[data-layout=columns] .bar__centre{left:0;right:0;top:50%;height:1px}.bars[data-layout=columns] .bar__needle{left:.22rem;right:.22rem;top:50%;height:3px;margin-top:-1.5px}.layout-toggle{display:inline-flex;border:1px solid var(--line);border-radius:.4rem;overflow:hidden;width:fit-content}.layout-toggle__button{padding:.35rem .7rem;border:0;background:var(--panel);color:var(--muted);font:inherit;font-size:.8rem;cursor:pointer}.layout-toggle__button[aria-pressed=true]{background:var(--line);color:var(--text)}@media(max-width:34rem),(max-height:30rem){html,body{height:100%;overflow:hidden}.app{height:100vh;height:100dvh;max-width:none;overflow:hidden;gap:.5rem;padding:max(.6rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.6rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left))}.app__header h1{font-size:1.4rem}.app__header p,.app__timing{display:none}.app__transport{gap:.6rem}.app__transport .button{flex:none;padding:.65rem .9rem}.level__readout{min-width:0;font-size:.7rem;line-height:1.25}.notice{padding:.5rem .7rem;font-size:.85rem}.controls__hint{font-size:.68rem}.bars{flex:1 1 auto;min-height:0}.bars__hint{margin-top:0;font-size:.68rem}.bars[data-layout=stacked]{grid-auto-rows:minmax(0,1fr);gap:.3rem}.bar{overflow:hidden}.bars[data-layout=stacked] .bar{grid-template-columns:4rem 1fr 2.2rem;padding:.3rem .6rem}.bars[data-layout=stacked] .bar__track{height:auto;min-height:1rem;align-self:stretch}.bars[data-layout=columns]{gap:.2rem}.bars[data-layout=columns] .bar{padding:.4rem .1rem}.bars[data-layout=columns] .bar__note{font-size:.9rem}.bars[data-layout=columns] .bar__cents{font-size:.7rem}.bars[data-layout=columns] .bar__target{font-size:.55rem;line-height:1.1}.bars[data-layout=columns] .bar__track{min-height:0}}@media(max-height:30rem){.app{gap:.4rem}.app__header h1{font-size:1.15rem}.app-menu__trigger{width:2.25rem;height:2.25rem}.bars__hint{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bars[data-layout=stacked] .bar{grid-template-columns:6rem 1fr 2.2rem;padding:.15rem .6rem}.bars[data-layout=stacked]{gap:.25rem}.bars[data-layout=stacked] .bar__head{flex-direction:row;align-items:baseline;gap:.35rem}.bar__note{font-size:.95rem;line-height:1}.bars[data-layout=stacked] .bar__cents{font-size:.72rem;line-height:1}}@media(prefers-reduced-motion:reduce){.bar__note,.bar__needle,.bar__target,.bar{transition-duration:0ms}.bar[data-playing=true]{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}}.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:1rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:.5rem;background:var(--panel)}.settings__pitch{display:flex;align-items:center;gap:.5rem}.settings__pitch input[type=range]{flex:1;min-width:0}.settings__pitch-number{width:5.5rem;flex:none;font-variant-numeric:tabular-nums}.settings__locked{grid-column:1 / -1;margin:0;padding-top:.25rem;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;line-height:1.45}.settings__locked strong{color:var(--text)}.controls__field select:disabled,.controls__field input:disabled{opacity:.5;cursor:not-allowed}.bar:has(.bar__play){cursor:pointer}.bar{cursor:default}.settings-sheet__trigger{width:100%}.settings-sheet__backdrop{position:fixed;inset:0;z-index:10;background:#0000008c}.settings-sheet__panel{position:fixed;z-index:11;left:0;right:0;bottom:0;max-height:100vh;max-height:100dvh;overflow:hidden;padding:.6rem .85rem calc(.7rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);border-radius:1rem 1rem 0 0;background:var(--bg);animation:sheet-rise .18s ease-out;display:flex;flex-direction:column;gap:.6rem}.settings-sheet__panel .settings{padding:0;border:0;background:none}.settings-sheet__panel .settings,.settings-sheet__panel .controls{grid-template-columns:repeat(auto-fit,minmax(min(8.5rem,100%),1fr));gap:.55rem .7rem}.settings-sheet__panel .settings__locked{font-size:.66rem;line-height:1.35}.settings-sheet__panel .controls__hint{font-size:.65rem;line-height:1.3}.settings-sheet__panel .controls__hint--aside{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.settings-sheet__panel .controls__field--wide{grid-column:span 2}@media(max-width:22rem){.settings-sheet__panel .settings__pitch-field{grid-column:span 1}}.settings-sheet__panel{touch-action:pan-y;overscroll-behavior:contain}.settings__pitch input[type=range]{touch-action:none}.settings-sheet__panel .layout-toggle{width:100%}.settings-sheet__panel .layout-toggle__button{flex:1;min-width:0;padding:.35rem .4rem}.settings-sheet__panel:focus{outline:none}.settings-sheet__head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:1rem}.settings-sheet__title{font-size:.95rem;font-weight:700}@keyframes sheet-rise{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.settings-sheet__panel{animation:none}}@media(pointer:coarse){.button,.layout-toggle__button,.controls__field select,.controls__field input,.settings__pitch-number{min-height:2.75rem}.bar__play{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem}.settings__pitch input[type=range]{height:2.75rem}}@media(max-width:34rem),(max-height:30rem){.bar__play{min-height:0;min-width:0}}