:root{--bg:#070912;--panel:#121829;--panel-2:#1b2340;--line:#2e3a5c;--text:#f4f7ff;--muted:#aab6d3;--accent:#2ef2c8;--accent-2:#5b8cff;--accent-ink:#01261f;--good:#3dff9a;--warn:#ffd23f;--bad:#ff4d6d;--radius:18px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;margin:0}button,select,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}h2{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-size:.8rem;font-weight:600}sub{vertical-align:baseline;color:var(--muted);margin-left:.04em;font-size:.45em;position:relative;bottom:-.1em}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{max-width:640px;padding:max(12px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));margin:0 auto}main{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}.topbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.brand{letter-spacing:.02em;margin:0;font-size:1.35rem}.select select{appearance:none;background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b9aab' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:999px;max-width:58vw;padding:8px 34px 8px 14px}.display,.strings,.reference,.calibrate{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.display{--state:var(--muted);text-align:center;transition:box-shadow .25s}.display--in-tune{--state:var(--good);box-shadow:0 0 0 1px var(--good), 0 0 40px -10px var(--good)}.display--close{--state:var(--warn)}.display--flat,.display--sharp{--state:var(--bad)}.readout__note{color:var(--state);font-variant-numeric:tabular-nums;font-size:clamp(4rem,22vw,7rem);font-weight:700;line-height:1;transition:color .2s}.readout__dash{color:var(--line)}.readout__hint{min-height:1.4em;color:var(--state);margin-top:4px;font-weight:600}.gauge{width:100%;max-width:420px;margin:4px auto 0;display:block}.gauge__track{fill:none;stroke:var(--line);stroke-width:6px;stroke-linecap:round}.gauge__zone{fill:none;stroke:var(--good);stroke-width:10px;stroke-linecap:round;opacity:.7}.gauge__tick{stroke:var(--muted);stroke-width:1.5px;opacity:.55}.gauge__tick--major{stroke-width:2.5px;opacity:1}.gauge__label{fill:var(--muted);font-size:12px}.gauge__needle{transition:transform .12s ease-out}.gauge__needle line{stroke:var(--state);stroke-width:4px;stroke-linecap:round}.gauge--idle .gauge__needle{opacity:.25}.gauge__hub{fill:var(--state)}.stats{grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 0;display:grid}.stats div{background:var(--panel-2);border-radius:10px;padding:8px 4px}.stats dt{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}.stats dd{font-variant-numeric:tabular-nums;margin:2px 0 0;font-weight:600}.detected{color:var(--muted);margin:10px 0 0}.meter{background:var(--panel-2);border-radius:2px;height:4px;margin-top:12px;overflow:hidden}.meter span{background:var(--accent);transform-origin:0;height:100%;transition:transform 80ms linear;display:block}.mic{gap:8px;display:grid}.primary{background:var(--accent);width:100%;color:var(--accent-ink);text-align:center;border:0;border-radius:999px;padding:14px 20px;font-size:1.05rem;font-weight:700;text-decoration:none;display:block}.primary:disabled{opacity:.6}.primary--stop{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}.notice{color:#ffd9a8;text-align:center;background:#2a1d12;border-radius:12px;margin:0;padding:12px}.notice p{margin:0 0 10px}.strings__head{justify-content:space-between;align-items:center;display:flex}.strings__head h2{margin:0}.strings__row{gap:8px;margin-top:12px;display:grid}.string{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;justify-items:center;gap:2px;min-width:0;padding:12px 2px;transition:background .15s,border-color .15s,transform .1s;display:grid}.string:active{transform:scale(.96)}.string__note{font-size:1.35rem;font-weight:700}.string__hz{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.7rem}.string--locked{border-color:var(--accent)}.string--active{border-color:var(--bad)}.string--active.string--close{border-color:var(--warn)}.string--active.string--in-tune{border-color:var(--good);background:color-mix(in srgb, var(--good) 20%, var(--panel-2))}.chip{border:1px solid var(--line);background:var(--panel-2);border-radius:999px;padding:6px 12px;font-size:.85rem}.chip--on{border-color:var(--accent);color:var(--accent)}.footnote{color:var(--muted);margin:10px 0 0;font-size:.8rem}.keys{grid-template-columns:repeat(12,1fr);gap:4px;display:grid}.key{border:1px solid var(--line);color:#0b0f14;background:#dfe6ee;border-radius:8px;min-width:0;padding:14px 0;font-size:.8rem;font-weight:600}.key--sharp{color:var(--text);background:#0d1218}.key--on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.reference__row{flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:12px;display:flex}.stepper{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;justify-content:space-between;align-items:center;gap:8px;padding:4px;display:flex}.stepper button{background:var(--panel);border:0;border-radius:50%;width:40px;height:40px;font-size:1.3rem}.stepper output{font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 6px;font-weight:600}.stepper--small{flex:160px}.hz-input{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;flex:120px;align-items:center;gap:6px;padding:0 14px;display:flex}.hz-input input{font-variant-numeric:tabular-nums;background:0 0;border:0;width:100%;min-width:0;padding:10px 0}.hz-input input:focus-visible{outline:none}.hz-input:focus-within{border-color:var(--accent)}.hz-input span{color:var(--muted)}.play{border:1px solid var(--accent);color:var(--accent);background:0 0;border-radius:999px;flex:none;min-height:48px;padding:0 18px;font-weight:700}.play--on{background:var(--accent);color:var(--accent-ink)}.play:disabled{opacity:.4}.presets{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.footer{text-align:center;color:var(--muted);margin-top:24px;font-size:.8rem}.footer a{color:var(--accent)}@media (width<=420px){.key{padding:12px 0;font-size:.62rem}.string__note{font-size:1.1rem}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.suite{background:var(--panel);border:1px solid var(--line);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.suite__item{color:var(--muted);white-space:nowrap;border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:600;text-decoration:none}a.suite__item:hover{color:var(--text);background:var(--panel-2)}.topbar{grid-template-columns:auto 1fr auto;grid-template-areas:"brand suite control";align-items:center;gap:12px;margin-bottom:16px;display:grid}.topbar .brand{grid-area:brand}.topbar .suite{grid-area:suite;justify-self:center}.topbar>:last-child{grid-area:control}.layout,.layout__primary,.layout__secondary{grid-template-columns:minmax(0,1fr);align-content:start;gap:16px;display:grid}.readout__row{justify-content:center;align-items:center;gap:clamp(12px,5vw,40px);display:flex}.readout__arrow{color:var(--line);font-size:clamp(1.6rem,7vw,2.4rem);transition:color .15s,transform .15s}.readout__arrow--on{color:var(--state);transform:scale(1.15)}.readout__note{min-width:2.2ch}.detected{min-height:1.2em;font-size:.85rem}.strings__count{color:var(--good);letter-spacing:.04em;text-transform:none;margin-left:6px}.string{position:relative}.string__check{background:var(--good);color:#062a17;opacity:0;border-radius:50%;place-items:center;width:16px;height:16px;font-size:.6rem;font-weight:800;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);display:grid;position:absolute;top:4px;right:4px;transform:scale(.4)}.string--tuned .string__check{opacity:1;transform:scale(1)}.calibrate__row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.calibrate__row .presets{margin-top:0}@media (width<=639px){.topbar{grid-template-columns:auto 1fr;grid-template-areas:"brand control""suite suite";gap:10px}.topbar>:last-child{justify-self:end}.topbar .suite{text-align:center;grid-template-columns:repeat(3,1fr);justify-self:stretch;display:grid}.display{padding:12px}.gauge{max-width:min(100%,46dvh)}}@media (width>=960px){.app{max-width:1180px;padding-left:32px;padding-right:32px}.layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:24px}.layout__primary{position:sticky;top:16px}.display{padding:28px 24px 20px}.readout__note{font-size:8rem}.gauge{max-width:520px}.stats dd{font-size:1.15rem}}@media (height<=560px) and (width>=640px) and (orientation:landscape){.app{max-width:none;padding-top:max(6px, env(safe-area-inset-top));padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}.topbar{margin-bottom:8px}.brand{font-size:1.05rem}.suite__item{padding:4px 10px}.layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px}.layout__primary{gap:10px}.display{padding:8px 12px 10px}.readout__note{font-size:3.4rem}.readout__arrow{font-size:1.5rem}.gauge{min-width:180px;max-width:calc(168dvh - 386.4px)}.stats div{padding:4px}.stats dd{font-size:.85rem}.detected{display:none}.meter{margin-top:8px}.primary{padding:10px 16px}}body{background:radial-gradient(60vmax 42vmax at -5% -12%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), radial-gradient(52vmax 40vmax at 105% 0%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 70%), radial-gradient(70vmax 50vmax at 50% 125%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%), var(--bg);background-attachment:fixed}.display,.strings,.reference,.calibrate{background:linear-gradient(180deg, #172036, var(--panel) 60%);border:1px solid color-mix(in srgb, var(--accent) 16%, var(--line));box-shadow:inset 0 1px #ffffff12,0 20px 44px -26px #000000e6}h2{color:color-mix(in srgb, var(--accent) 55%, var(--text))}.brand{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:800}.brand__mark{color:inherit}.suite{border-color:var(--line);-webkit-backdrop-filter:blur(8px);background:#0a0e1cb3}.suite__item{color:var(--muted)}.suite__item--on{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:var(--accent-ink)}.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:var(--accent-ink);box-shadow:0 12px 32px -12px var(--accent);transition:transform .12s,box-shadow .2s}.primary:hover{box-shadow:0 16px 36px -12px var(--accent);transform:translateY(-1px)}.primary:active{transform:translateY(1px)scale(.99)}.chip{background:var(--panel-2);border-color:var(--line);color:var(--text);transition:border-color .15s,background .15s,transform .1s}.chip:hover:not(:disabled){border-color:color-mix(in srgb, var(--accent) 60%, var(--line))}.chip--on{background:color-mix(in srgb, var(--accent) 22%, var(--panel-2));border-color:var(--accent);color:var(--text);box-shadow:0 0 16px -6px var(--accent)}.select select{background-color:var(--panel-2);border-color:var(--line)}.footer{color:var(--muted)}.display{transition:box-shadow .3s,border-color .3s}.display--in-tune{border-color:var(--good);box-shadow:inset 0 1px 0 #ffffff12, 0 0 0 1px var(--good), 0 0 60px -12px var(--good)}.readout__note{text-shadow:0 0 28px color-mix(in srgb, var(--state) 55%, transparent)}.display--idle .readout__note{color:var(--text)}.readout__arrow{color:color-mix(in srgb, var(--muted) 35%, transparent)}.readout__arrow--on{color:var(--state);text-shadow:0 0 16px var(--state)}.gauge__track{stroke:var(--panel-2);stroke-width:14px}.gauge__heat{fill:none;stroke-width:6px;stroke-linecap:round;opacity:.85}.gauge__zone{stroke-width:16px;opacity:.35}.gauge__tick{stroke:#c9d3ea;opacity:.45}.gauge__tick--major{opacity:.95}.gauge__label{fill:var(--muted);font-weight:600}.gauge__needle line{stroke-width:5px;filter:drop-shadow(0 0 6px var(--state))}.gauge--idle .gauge__needle line{stroke:var(--muted)}.gauge__hub{filter:drop-shadow(0 0 8px var(--state))}.stats div{background:#ffffff0a;border:1px solid #ffffff0f}.stats dt{color:var(--muted)}.meter{background:#ffffff0f}.meter span{background:linear-gradient(90deg, var(--accent), var(--accent-2));box-shadow:0 0 10px var(--accent)}.string{background:var(--panel-2);border-color:var(--line)}.string:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--line))}.string__hz{color:var(--muted)}.string--locked{border-color:var(--accent);box-shadow:0 0 14px -4px var(--accent)}.string--playing{background:color-mix(in srgb, var(--accent) 30%, var(--panel-2))}.string--active.string--in-tune{background:color-mix(in srgb, var(--good) 24%, var(--panel-2));box-shadow:0 0 18px -4px var(--good)}.string--tuned{border-color:color-mix(in srgb, var(--good) 55%, var(--line))}.string__check{box-shadow:0 0 10px var(--good)}.strings__done{color:var(--good);letter-spacing:.02em;text-transform:none;margin-left:6px;animation:.6s cubic-bezier(.3,1.8,.5,1) tuned-pop;display:inline-block}@keyframes tuned-pop{0%{opacity:0;transform:scale(.4)rotate(-8deg)}}.key{color:#10152a;background:linear-gradient(#fff,#dfe6f5);border-color:#8f9bbd}.key--sharp{color:#e9eeff;background:linear-gradient(#262d45,#0a0d18);border-color:#000}.key--on{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:var(--accent-ink);box-shadow:0 0 14px -2px var(--accent);border-color:#0000}.stepper,.hz-input{background:var(--panel-2);border-color:var(--line)}.stepper button{background:#0f1426}.stepper button:hover{color:var(--accent)}.play{border-color:var(--accent);color:var(--accent)}.play--on{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:var(--accent-ink);border-color:#0000}.primary--stop,.primary--stop:hover{background:var(--panel-2);color:var(--text);border:1px solid var(--line);box-shadow:none}.notice{background:color-mix(in srgb, var(--warn) 14%, var(--panel));color:#fff3c4;border:1px solid color-mix(in srgb, var(--warn) 40%, transparent)}.readout__note,.readout__hint,.gauge__needle line,.gauge__hub{transition:color 50ms,stroke 50ms,fill 50ms}