: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__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}.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(14rem,1fr));gap:1rem}.controls__field{display:flex;flex-direction:column;gap:.4rem;color:var(--muted);font-size:.85rem}.controls__hint{font-size:.72rem;line-height:1.35;color:var(--muted)}.controls__field select,.controls__field input{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);cursor:pointer;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){html,body{height:100%}.app{height:100vh;height:100dvh;overflow-y:auto;gap:.75rem;padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left))}.app__header h1{font-size:1.4rem}.app__header p{display:none}.bars{flex:1 1 auto;min-height:0}.bars[data-layout=stacked]{grid-auto-rows:1fr}.bars[data-layout=stacked] .bar__track{height:2.6rem}.bars[data-layout=columns] .bar__track{min-height:0}.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:9rem}.bars[data-layout=stacked] .bar{grid-template-columns:4rem 1fr 2.2rem}}@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(15rem,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-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:85vh;overflow-y:auto;padding:.75rem 1rem calc(1rem + 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}.settings-sheet__panel:focus{outline:none}.settings-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.75rem}.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}}