@font-face{font-family:system;src:local("SF Pro Display"),local("Inter"),local("Arial")}
:root{color-scheme:dark;--bg:#111816;--panel:#19221f;--line:#2d3a34;--text:#f1f3e9;--muted:#9caaa0;--green:#b9f39d;--amber:#f4c58d;--reading:var(--muted);font-family:system,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:wait}button{touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:5px}button,summary{min-height:44px}button:active{transform:translateY(1px)}[hidden]{display:none!important}.app{max-width:1024px;margin:auto;padding:32px 40px max(28px,env(safe-area-inset-bottom))}.header,.brand,.intro,.panel-caption,.section-heading,.section-heading h2,.strings-footnote,.audio-toolbar,footer{display:flex;align-items:center;justify-content:space-between}.brand{gap:12px;justify-content:flex-start}.brand-mark{width:43px;height:43px;background:var(--green);color:var(--bg);border-radius:13px;display:grid;place-items:center}.brand-mark svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round}.brand strong{display:block;font-size:25px;letter-spacing:-1px;font-weight:650}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.4px;margin-top:5px}.status-pill{display:flex;align-items:center;gap:7px;color:var(--muted);border:1px solid var(--line);padding:10px 13px;border-radius:100px;font-size:10px;letter-spacing:.6px}.status-dot{height:5px;width:5px;background:currentColor;border-radius:50%}.status-pill.active{color:var(--green);background:#1d2e20;border-color:#354a35}.intro{margin:39px 0 26px;gap:16px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--muted);margin:0 0 10px}h1{font-size:43px;letter-spacing:-1.7px;font-weight:500;line-height:1.08;margin:0 0 12px}.intro p:last-child{font-size:14px;color:var(--muted);margin:0}.mobile-break{display:none}.tuning-badge{display:flex;flex-direction:column;gap:10px;align-items:flex-end;white-space:nowrap}.tuning-badge span{font-size:9px;letter-spacing:1.3px;color:var(--muted)}.tuning-badge b{font-size:16px;letter-spacing:5px;font-weight:400}.tuner-panel{border:1px solid var(--line);background:radial-gradient(ellipse at 50% 26%,#202c25 0,transparent 65%),var(--panel);border-radius:23px;padding:22px 25px 27px}.panel-caption{gap:15px;font-size:9px;letter-spacing:1.1px;color:var(--muted)}.panel-caption span:last-child{text-align:right}.dial{max-width:660px;height:275px;position:relative;margin:0 auto}.dial-svg{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.dial-track{fill:none;stroke:var(--line);stroke-width:4;stroke-linecap:round}.dial-center{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round}.tick{stroke:#68776c;stroke-width:1}.tick.major{stroke:#849183;stroke-width:1.5}.tick.zero{stroke:var(--green);stroke-width:2}#dial-needle{stroke:var(--reading);fill:var(--reading);stroke-width:3;stroke-linecap:round;transition:transform .12s linear;transform-origin:300px 280px;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--reading) 20%,transparent))}.note-reading{position:absolute;top:95px;width:100%;text-align:center}.note{font-size:100px;line-height:1;letter-spacing:-4px;font-weight:350}.note #octave{font-size:28px;color:var(--muted);letter-spacing:0;margin-left:5px;vertical-align:baseline}.note-reading p{margin:11px 0 0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.dial-labels{position:absolute;bottom:1px;width:100%;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.6px}.dial-labels i{font-style:normal}.dial-labels output{font-variant-numeric:tabular-nums;color:var(--reading);font-size:12px;letter-spacing:0}.guidance{text-align:center;margin-top:17px}.guidance h2{font-size:25px;font-weight:450;margin:0 0 10px;color:var(--reading);letter-spacing:-.4px}.guidance p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}.signal-warning{font-size:12px;color:var(--amber);text-align:center;margin-top:14px}.strings-section{margin-top:25px}.section-heading h2{gap:13px;font-size:15px;font-weight:500;margin:0}.section-heading h2 span{font-size:11px;color:var(--muted);font-weight:400}.auto-button{background:#293c2c;border:0;color:var(--green);font-size:12px;padding:7px 15px;border-radius:50px;min-height:34px}.auto-button[aria-pressed=false]{background:var(--panel);color:var(--muted)}.string-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:13px}.string-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-align:left;color:var(--text);transition:background .15s,border-color .15s;min-height:113px}.string-card:hover{background:#233028}.string-card.active{background:#253b2c;border-color:var(--green)}.string-card .number{font-size:9px;letter-spacing:.6px;color:var(--muted)}.string-card .string-note{font-size:30px;line-height:1;font-weight:450}.string-card .string-note small{font-size:13px;font-weight:400;color:var(--muted);margin-left:5px}.string-card.active .string-note{color:var(--green)}.string-card .string-frequency{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.string-card .check{position:absolute;right:11px;top:10px;color:var(--green);font-size:12px}.strings-footnote{gap:10px;margin-top:7px;color:var(--muted);font-size:10px;line-height:1.6}.text-button{border:0;padding:8px 0;background:none;color:var(--muted);font-size:11px;white-space:nowrap}.text-button:hover{color:var(--text)}.audio-toolbar{gap:22px;border-top:1px solid var(--line);padding-top:20px;margin-top:17px}.input-status{flex:1;min-width:0}.input-status .eyebrow{font-size:9px;margin-bottom:7px}.input-status p{margin:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.level{width:110px;height:3px;background:var(--line);border-radius:3px;margin-top:10px;overflow:hidden}.level span{display:block;height:100%;background:var(--green);width:0;transition:width .12s}.audio-toolbar canvas{width:92px;height:30px}.calibration{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}.calibration button{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:9px;width:35px;min-height:35px;font-size:20px}.calibration button:hover{border-color:var(--muted)}.primary-button{display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:var(--green);color:var(--bg);font-weight:600;border-radius:12px;padding:15px 24px;min-width:150px;font-size:14px}.primary-button:hover{background:#ccf9b6}.primary-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.primary-button.pending{opacity:.65}.primary-button.listening svg{display:none}footer{gap:12px;margin-top:15px}footer p{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;margin:0}footer svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}footer .text-button span{margin-left:5px}.help{border-top:1px solid var(--line);margin-top:13px;color:var(--muted);font-size:11px;line-height:1.8}.help summary{cursor:pointer;padding:12px 0}.help p{max-width:700px;margin:0 0 14px}.error{border:1px solid #6c4a32;border-radius:14px;padding:16px;margin-top:18px;background:#33281f;color:var(--amber);font-size:13px;line-height:1.6}.demo-controls{background:#202b24;border:1px dashed #53694d;border-radius:14px;margin-top:15px;padding:15px;display:grid;gap:13px}.demo-controls div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.demo-controls strong{font-size:12px;color:var(--green)}.demo-controls span{font-size:11px;color:var(--muted)}.demo-controls label{display:flex;justify-content:space-between;font-size:12px}.demo-controls input{width:100%;accent-color:var(--green);cursor:pointer;min-height:30px}.demo-controls output{font-variant-numeric:tabular-nums}
@media(max-width:700px){.app{padding:22px 22px max(24px,env(safe-area-inset-bottom))}.brand strong{font-size:23px}.brand small{font-size:7px;letter-spacing:1px}.brand-mark{width:38px;height:38px;border-radius:12px}.status-pill{font-size:8px;padding:8px 9px;letter-spacing:.1px}.intro{margin:29px 0 23px;align-items:flex-end}.eyebrow{font-size:9px;letter-spacing:1.4px}h1{font-size:37px;letter-spacing:-1.4px}.mobile-break{display:block}.intro p:last-child{font-size:12px}.tuning-badge span{display:none}.tuning-badge b{font-size:11px;letter-spacing:2px;writing-mode:vertical-rl;color:var(--muted);padding-bottom:4px}.tuner-panel{border-radius:20px;padding:17px 15px 23px}.panel-caption{font-size:7px;letter-spacing:.65px;gap:7px}.dial{height:auto;aspect-ratio:600/315;margin-top:5px}.dial-svg{height:auto;aspect-ratio:600/280}.note-reading{top:36%;}.note{font-size:76px}.note #octave{font-size:23px}.note-reading p{font-size:10px;margin-top:7px}.dial-labels{bottom:0;font-size:8px;letter-spacing:.3px}.dial-labels output{font-size:11px}.dial-labels i{display:none}.guidance{margin-top:20px}.guidance h2{font-size:22px;margin-bottom:7px}.guidance p{font-size:11px;max-width:280px;margin:auto}.strings-section{margin-top:22px}.section-heading h2{font-size:14px;gap:9px}.section-heading h2 span{font-size:10px}.auto-button{font-size:11px;padding:6px 12px}.string-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.string-card{padding:11px 12px;min-height:100px;gap:8px;border-radius:12px}.string-card .string-note{font-size:29px}.strings-footnote{font-size:9px;align-items:flex-start}.strings-footnote>span{max-width:245px;padding-top:12px}.audio-toolbar{display:grid;grid-template-columns:1fr auto;gap:19px 10px;margin-top:10px;padding-top:18px}.audio-toolbar canvas{display:none}.input-status p{max-width:170px;font-size:10px}.calibration{gap:7px;font-size:11px}.calibration button{width:34px;min-height:40px}.primary-button{grid-column:1/-1;width:100%;min-height:54px;font-size:15px;border-radius:13px}footer{margin-top:13px;flex-wrap:wrap;gap:0}footer p{font-size:9px}footer .text-button{font-size:10px}.help{font-size:10px}.demo-controls span{line-height:1.6}.demo-controls strong{font-size:11px}}
@media(max-width:360px){.app{padding-left:15px;padding-right:15px}.brand small{display:none}.status-pill{font-size:7px}.note{font-size:62px}.note-reading p{font-size:9px}.guidance h2{font-size:20px}.panel-caption{font-size:6.5px}h1{font-size:34px}}
@media(max-width:700px){.app{padding-bottom:115px}.dial{aspect-ratio:600/365}.note-reading{top:32%}.primary-button{position:fixed;z-index:20;left:22px;right:22px;bottom:max(17px,env(safe-area-inset-bottom));width:calc(100% - 44px);box-shadow:0 0 0 10px var(--bg),0 0 35px 22px var(--bg)}}
@media(max-width:360px){.primary-button{left:15px;right:15px;width:calc(100% - 30px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

.footer-actions{display:flex;align-items:center;gap:14px}.help-button{border:1px solid var(--line);color:var(--muted);background:var(--panel);border-radius:50%;width:28px;min-height:28px;font-size:14px;padding:0}.help-dialog{width:calc(100% - 40px);max-width:500px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:20px;padding:23px;max-height:85svh;overflow:auto}.help-dialog::backdrop{background:#09100dd9;backdrop-filter:blur(6px)}.help-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.help-dialog h2{font-size:20px;font-weight:500;margin:0}.help-dialog p{color:var(--muted);font-size:13px;line-height:1.8}.help-dialog .help-button{flex:none;width:36px;min-height:36px;font-size:22px}
@media(max-width:700px) and (orientation:portrait){
 html,body{height:100%;overflow:hidden;overscroll-behavior:none}
 .app{height:100svh;min-height:0;max-height:100svh;overflow:hidden;padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:grid;grid-template-rows:38px 47px minmax(0,1fr) 119px 52px 26px;grid-template-areas:'header' 'intro' 'tuner' 'strings' 'controls' 'footer';gap:12px}
 .header{grid-area:header;min-width:0}.brand{gap:9px}.brand-mark{width:35px;height:35px;border-radius:11px}.brand-mark svg{width:25px;height:25px}.brand strong{font-size:24px}.brand small{display:none}.status-pill{font-size:8px;padding:8px 10px}
 .intro{grid-area:intro;margin:0;display:block}.intro .eyebrow,.tuning-badge,.mobile-break{display:none}h1{font-size:28px;letter-spacing:-1px;line-height:1.12;margin:0 0 5px}.intro p:last-child{font-size:11px}
 .tuner-panel{grid-area:tuner;min-height:0;padding:13px 15px 15px;display:flex;flex-direction:column;border-radius:19px}.panel-caption{font-size:7px;line-height:12px;letter-spacing:.45px;flex:none;gap:5px}.dial{flex:1;width:100%;max-width:none;min-height:0;height:auto;aspect-ratio:auto;margin:0}.dial-svg{inset:0;width:100%;height:100%;aspect-ratio:auto}.note-reading{top:37%;transform:translateY(-7%)}.note{font-size:clamp(50px,8.3svh,79px);line-height:.95}.note #octave{font-size:22px}.note-reading p{font-size:10px;margin-top:8px}.dial-labels{font-size:8px;bottom:0;line-height:14px}.dial-labels output{font-size:10px}.guidance{margin-top:11px;flex:none}.guidance h2{font-size:22px;line-height:1.1;margin:0 0 7px}.guidance p{font-size:10px;line-height:1.5;max-width:320px}.signal-warning{position:absolute;left:10px;right:10px;top:100%;z-index:3;background:#392b1f;padding:5px;border-radius:7px;font-size:10px}.tuner-panel{position:relative}
 .strings-section{grid-area:strings;margin:0;min-height:0}.section-heading{height:27px}.section-heading h2{font-size:13px;gap:9px}.section-heading h2 span{font-size:9px}.auto-button{font-size:10px;min-height:27px;padding:4px 11px}.string-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:6px}.string-card{min-height:66px;height:66px;padding:8px 7px;gap:4px;border-radius:10px}.string-card .number{font-size:6.5px;letter-spacing:.1px;white-space:nowrap}.string-card .string-note{font-size:24px}.string-card .string-note small{font-size:9px;margin-left:2px}.string-card .string-frequency{font-size:7px;letter-spacing:-.1px;white-space:nowrap}.string-card .check{right:4px;top:5px;font-size:8px}.strings-footnote{margin-top:5px;gap:8px;font-size:8px;line-height:14px}.strings-footnote>span{padding:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strings-footnote .text-button{font-size:8px;min-height:16px;padding:0}
 .audio-toolbar{grid-area:controls;display:grid;grid-template-columns:1fr 1.25fr;gap:12px;border:0;margin:0;padding:0;min-height:0}.audio-toolbar .input-status,.audio-toolbar canvas{display:none}.calibration{font-size:11px;justify-content:space-between;gap:5px}.calibration button{width:31px;min-height:44px;border-radius:10px;font-size:18px}.primary-button{position:static;grid-column:auto;left:auto;right:auto;bottom:auto;width:100%;height:52px;min-height:52px;box-shadow:none;padding:12px 13px;min-width:0;font-size:14px;border-radius:12px}.primary-button svg{width:16px;height:16px}
 footer{grid-area:footer;margin:0;gap:5px;flex-wrap:nowrap;min-width:0}footer p{font-size:9px;gap:4px;white-space:nowrap}footer svg{width:12px;height:12px}footer .text-button{min-height:26px;font-size:9px;padding:0}.footer-actions{gap:12px}.help-button{width:25px;min-height:25px;font-size:12px}
 .demo-active .audio-toolbar{visibility:hidden;pointer-events:none}.demo-controls{grid-area:controls;margin:0;padding:6px 11px;grid-template-columns:1fr auto;gap:0 10px;min-height:0;border-radius:11px}.demo-controls div{gap:0}.demo-controls div span{display:none}.demo-controls strong{font-size:10px}.demo-controls label{font-size:9px;gap:10px}.demo-controls input{grid-column:1/-1;min-height:23px;height:23px;margin:0}
 .error{position:fixed;z-index:30;left:18px;right:18px;bottom:max(111px,calc(env(safe-area-inset-bottom) + 100px));margin:0;padding:13px;font-size:12px;max-height:50svh;overflow:auto;box-shadow:0 12px 40px #0008}
}
@media(max-width:360px) and (orientation:portrait){.app{padding-left:14px;padding-right:14px;gap:9px;grid-template-rows:36px 43px minmax(0,1fr) 113px 48px 25px}.status-pill{font-size:7px;padding:8px}.brand strong{font-size:21px}h1{font-size:25px}.string-grid{gap:4px}.string-card{padding:7px 5px}.string-card .number{font-size:6px}.string-card .string-frequency{font-size:6.5px}.primary-button{height:48px;min-height:48px}.guidance h2{font-size:20px}.footer-actions{gap:9px}footer p{font-size:8px}}

@media(max-width:700px) and (orientation:portrait){.tuner-panel{justify-content:space-between}.dial{flex:none;height:min(36svh,calc(55vw - 38.5px));max-height:calc(100% - 80px);aspect-ratio:auto}.note-reading{top:34%;transform:none}.note{font-size:clamp(48px,16vw,74px)}}

@media(max-width:700px) and (orientation:portrait){.string-word{display:none}.string-card .number{font-size:9px}.string-card .string-frequency{font-size:8px}}