:root{--bg:#14110e;--ink:#f4efe6;--muted:#b3a394;--line:#e4d0b029;--brass:#e0b170;--in-tune:#b7d7a8;--flat:#9ec3dd;--sharp:#e7a892;--serif:"Fraunces", "Iowan Old Style", Palatino, "Palatino Linotype", serif;--sans:"Outfit", "Avenir Next", "Segoe UI", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font:17px/1.45 var(--sans);color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{background:radial-gradient(ellipse 70% 45% at 50% -10%, #e0b17029, transparent 60%), var(--bg);min-height:100svh;margin:0}#root{min-height:100svh}button,input{font:inherit}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app{width:min(1040px,100%);padding:calc(28px + env(safe-area-inset-top,0px)) calc(22px + env(safe-area-inset-right,0px)) calc(56px + env(safe-area-inset-bottom,0px)) calc(22px + env(safe-area-inset-left,0px));margin:0 auto}.top{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;display:flex}.eyebrow{color:var(--brass);letter-spacing:.18em;text-transform:uppercase;margin:0 0 4px;font-size:.72rem;font-weight:600}h1{font-family:var(--sans);letter-spacing:-.03em;color:var(--ink);margin:0;font-size:1.7rem;font-weight:500}.tuning{font-variant-numeric:tabular-nums;color:var(--ink);flex-direction:column;align-items:flex-end;gap:6px;margin:0;font-size:.95rem;display:flex}.reference-row{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.a4-field{cursor:pointer;align-items:center;gap:8px;display:flex}.tuning select{appearance:none;border:1px solid var(--line);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;background-color:#fff4e00a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23b3a394' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right .6rem center;background-repeat:no-repeat;border-radius:999px;margin:0;padding:.28rem 1.8rem .28rem .7rem}.reference-note{color:var(--muted);font-size:.78rem}.stage{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:stretch;gap:18px;display:grid}.panel{border:1px solid var(--line);background:linear-gradient(#fff4e00b,#fff4e004);border-radius:28px;padding:26px 26px 20px;box-shadow:inset 0 1px #ffecd212}.panel.in-tune{border-color:#b7d7a873}.panel-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}h2{font-family:var(--sans);letter-spacing:-.01em;color:var(--ink);margin:0;font-size:.95rem;font-weight:500}.readout{--mark:var(--muted)}.note{min-height:1.05em;color:var(--mark);font-family:var(--serif);font-optical-sizing:auto;letter-spacing:-.04em;justify-content:center;align-items:flex-start;gap:.02em;margin:8px 0 0;font-size:clamp(5.4rem,13vw,8.2rem);font-weight:500;line-height:.82;display:flex}.arrow{margin-top:.18em;font-size:.42em;line-height:1}.letter{font-size:1em}.letter.dash{color:var(--muted)}.note-octave{font-variant-numeric:tabular-nums;margin-top:.42em;font-size:.32em;line-height:1}.cents{text-align:center;color:var(--mark);font-family:var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin:10px 0 0;font-size:clamp(1.8rem,4vw,2.45rem);font-weight:500}.cents span{font-family:var(--sans);letter-spacing:0;color:var(--muted);font-size:.55em}.readout.is-empty .cents{color:var(--muted)}.meter{margin-top:18px}.meter-track{background:#00000059;border-radius:999px;height:18px;position:relative;box-shadow:inset 0 0 0 1px #ffecd214}.meter-zone{background:#b7d7a847;border-radius:999px;position:absolute;top:0;bottom:0}.meter-center{background:#f4efe68c;width:1px;position:absolute;top:2px;bottom:2px;left:50%}.needle{background:var(--mark);border-radius:999px;width:3px;height:28px;transition:left 70ms linear;position:absolute;top:-5px;transform:translate(-50%)}.meter-labels{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;margin-top:8px;font-size:.72rem;display:flex}.status{text-align:center;letter-spacing:-.02em;color:var(--muted);margin:16px 0 0;font-size:1.05rem;font-weight:500}.freqs{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;margin:6px 0 0;font-size:.92rem}.freq-target{color:var(--ink)}.controls{flex-wrap:wrap;gap:10px;margin-top:22px;display:flex}.button{appearance:none;border:1px solid var(--line);color:var(--ink);font:inherit;letter-spacing:-.01em;cursor:pointer;touch-action:manipulation;background:#fff4e008;border-radius:999px;flex:150px;padding:.85rem 1.1rem;font-weight:500;position:relative;overflow:hidden}.button.primary{background:var(--brass);color:#2a1c10;border-color:#0000}.button[aria-pressed=true]:not(.primary){background:var(--ink);color:#24180e;border-color:#0000}.button-note{opacity:.75;font-size:.78rem;font-weight:400;display:block}.level{background:#2a1c102e;border-radius:999px;height:2px;position:absolute;bottom:6px;left:14px;right:14px}.level span{border-radius:inherit;background:#2a1c108c;height:100%;display:block}.hint{color:var(--muted);margin:14px 0 0;font-size:.84rem;line-height:1.45}.stepper{color:var(--muted);align-items:center;gap:8px;font-size:.84rem;display:flex}.stepper strong{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}.stepper button{border:1px solid var(--line);width:32px;height:32px;color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border-radius:50%;font-size:1.1rem;line-height:1}.stepper button:disabled{opacity:.35;cursor:default}.compass{aspect-ratio:1;width:min(100%,390px);margin:8px auto 0;position:relative}.compass-ring{border:1px solid var(--line);background:radial-gradient(circle at 50% 42%,#e0b17014,#0000 58%);border-radius:50%;position:absolute;inset:18%}.compass-center{color:var(--ink);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:32%}.compass-center span{font-family:var(--serif);letter-spacing:-.04em;font-size:2.4rem;font-weight:500;line-height:.9}.compass-center small{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}.tick{cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:50%;width:22px;height:22px;padding:0;position:absolute;transform:translate(-50%,-50%)}.tick:before{content:"";background:#f4efe652;border-radius:50%;width:7px;height:7px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tick.chromatic:before{background:#f4efe6d1;width:9px;height:9px}.tick.is-heard{z-index:1}.tick.is-heard:before{background:var(--brass);box-shadow:0 0 0 6px #e0b1702e}.tick.is-held{z-index:1}.tick.is-held:before{box-shadow:0 0 0 2px #1c1814, 0 0 0 4px var(--ink)}.tick.is-heard.is-held:before{box-shadow:0 0 0 2px #1c1814, 0 0 0 4px var(--brass), 0 0 0 10px #e0b17029}.compass-label{color:var(--muted);letter-spacing:.02em;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:.72rem;position:absolute;transform:translate(-50%,-50%)}.trace-panel{margin-top:18px}.trace-scale{color:var(--muted);font-size:.78rem}.trace{width:100%;height:92px;margin-top:8px;display:block}.trace-band{fill:#b7d7a829}.trace-zero{stroke:#f4efe659;stroke-width:.35px}.trace-line{fill:none;stroke:var(--brass);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}button:focus-visible,.tuning select:focus-visible{outline:2px solid var(--brass);outline-offset:3px}@media (width<=860px){.app{padding:calc(20px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}.tuning{width:100%}.stage{grid-template-columns:1fr}.top{align-items:flex-start}.panel{padding:22px 16px 16px}}@media (prefers-reduced-motion:reduce){.needle{transition:none}}