:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#373939;background:#dfe0e1;font-synthesis:none;--muted:#6f7374;--accent:#7a8081;--line:#c5c7c8;--surface:#ececec}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;background:#dfe0e1}button{font:inherit;cursor:pointer;touch-action:manipulation}a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #5d6161;outline-offset:4px}
.app{width:min(100%,520px);min-height:100svh;margin:auto;padding:calc(24px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom))}
.topbar{display:flex;gap:12px;align-items:center;margin:0 0 28px}.brand-mark{display:grid;place-items:center;background:#ececec;color:#6b7071;border-radius:14px;width:42px;height:42px;flex:none;font-size:25px}.eyebrow{margin:0 0 5px;font-size:9px;letter-spacing:.16em;color:var(--muted);font-weight:700}.topbar h1{margin:0;font-size:25px;line-height:1.08;letter-spacing:-.04em}.topbar h1 em{font-style:normal;color:#6b7071}.site-home{margin-left:auto;flex:none;color:#5a5d5e;font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap}.site-home:hover{text-decoration:underline}.standard{max-width:100px;font-size:8px;line-height:1.7;text-align:right;color:var(--muted)}.standard strong{font-size:10px;color:#434646;white-space:nowrap}
/* A quiet grayscale instrument, with a thin LCD-style needle and a wider scale. */
.tuner{padding:0;background:none;border:0;box-shadow:none}.tuner-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.frequency{color:#586168;font-size:14px;font-variant-numeric:tabular-nums}.guide-button{padding:8px 11px;border:1px solid #ccd1d3;border-radius:10px;background:#f7f8f8;color:#586168;font-size:11px;font-weight:600}
.meter{margin-top:22px;padding:18px 9px 0;border:1px solid #c8ced0;border-radius:19px;background:linear-gradient(145deg,#f6f7f4,#e5e9e5);box-shadow:inset 0 2px 5px #414b5112,0 1px 0 #fff}.meter-labels{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#777f83;font-size:10px;font-weight:600;letter-spacing:.05em}.meter-labels span{display:grid;grid-template-rows:22px auto;justify-items:center;align-items:center;flex:1;gap:7px;min-width:0;text-align:center}.meter-labels span::before{content:"";display:block;width:44px;height:7px;border:1px solid #a9b2b5;border-radius:5px;background:linear-gradient(#dce1e1,#bcc5c7);box-shadow:inset 0 1px 2px #414b5122}.meter-labels span:nth-child(2)::before{width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f7f8f8,#c1c8ca)}.tuner.is-tuned .meter-labels span:nth-child(2)::before{border-color:#66835c;background:radial-gradient(circle at 35% 30%,#d6ffbe,#73b35e 60%,#528d44);box-shadow:0 0 10px #85bf6888,inset 0 1px 2px #ffffff77}.tuner[data-zone=red][data-direction=flat] .meter-labels span:first-child::before,.tuner[data-zone=yellow][data-direction=flat] .meter-labels span:first-child::before,.tuner[data-zone=red][data-direction=sharp] .meter-labels span:last-child::before,.tuner[data-zone=yellow][data-direction=sharp] .meter-labels span:last-child::before{border-color:#c7463d;background:linear-gradient(#ff9c8b,#f15b4d 48%,#dc3b32);box-shadow:0 0 9px #f15b4d66,inset 0 1px 1px #fff8}
.fan-meter{position:relative;width:100%;margin:25px auto 0;border:0;background:none;box-shadow:none}.fan-meter svg{display:block;width:100%;overflow:visible}.scale-arc{fill:none;stroke:#a2abae;stroke-width:.8}.scale-tick{stroke:#849094;stroke-width:.9}.scale-tick.major{stroke:#5c686d;stroke-width:1.2}.scale-number{fill:#788287;font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}.scale-zero{fill:#39464c;font-size:20px;font-weight:600}.scale-unit{fill:#899297;font-size:8px;letter-spacing:2px}.meter-needle{transform-origin:200px 202px;transform:rotate(0deg);fill:#38474e;filter:drop-shadow(1px 2px 1px #28383f26)}.needle-blade{stroke:#f7f9f7;stroke-width:.45;stroke-linejoin:round}.scale-pivot{fill:#68767c;stroke:#f7f9f7;stroke-width:1}
.note-wrap{position:absolute;top:63%;left:12%;right:12%;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.detected-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.note{margin:0;color:#344249;font-size:clamp(58px,19vw,90px);font-weight:500;letter-spacing:-.05em;line-height:1.05;text-align:center;text-shadow:0 1px #fff}.note.long-note{font-size:clamp(34px,11vw,54px)}.octave{margin:0;color:#7a858a;font-size:11px;text-align:center}.tuner.is-tuned .note{color:#344249}
.status{min-height:22px;margin:10px 0 16px;color:var(--muted);font-size:14px;text-align:center}.status.in-tune{color:#575a5b;font-weight:700}.status.near{color:#606465}.listen-button{display:flex;justify-content:center;align-items:center;gap:10px;width:fit-content;max-width:100%;min-height:44px;margin:0 auto;padding:10px 18px;border:1px solid #686c6d;border-radius:13px;background:#7a8081;color:#fff;font-size:13px;font-weight:700;box-shadow:0 3px 9px #686c6d18}.listen-button.active{background:#686c6d;border-color:#595c5d}.listen-button:active{background:#595c5d}.mic-icon{font-size:17px}.privacy{margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.5;text-align:center}
.tuning,.calibration{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:24px;background:#e6e7e8}.tuning-heading h2,.calibration-heading h2{margin:0;color:#373939;font-size:21px;letter-spacing:-.03em}.tuning-custom-label{margin:18px 0 10px;color:var(--muted);font-size:12px;font-weight:600}.string-choices{display:grid;gap:8px}.string-choice-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:1px solid #cfd1d1;border-radius:13px}.string-choice-row>span{color:#4c4f50;font-size:13px;font-weight:600;white-space:nowrap}.string-choice-row>div{display:flex;gap:5px}.string-choice-row button,.calibration-button{min-width:46px;min-height:40px;padding:7px 10px;border:1px solid #dbdddd;border-radius:11px;background:#f7f7f7;color:#4c4f50;font-size:13px;font-weight:600}.string-choice-row button.selected,.calibration-button.selected{background:#eceded;border-color:#83888a;color:#4d5050;box-shadow:inset 0 0 0 1px #83888a}
.open-strings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:15px}.open-string{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:11px 9px;border:1px solid #cfd1d1;border-radius:12px;background:#f2f3f3;color:#6f7374;font-size:11px}.open-string strong{color:#4c4f50;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}.open-string[aria-current=true]{border-color:#83888a;background:#eceded;color:#4d5050}.open-string[aria-current=true] strong{color:#4d5050}.calibration-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}.calibration-heading>span{font-size:12px;color:var(--muted)}.calibration-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.calibration-button{min-width:0;padding:10px 3px;font-size:17px}.calibration-button span{font-size:10px}footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid #c5c7c8;color:var(--muted);font-size:10px}
/* The guide uses the same light surfaces and Telegram blue as the controls. */
.tutorial-dialog{width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:20px;border:1px solid #c5c7c8;border-radius:26px;background:#f4f5f5;color:#373939;box-shadow:0 25px 80px #37393933;overflow:auto}.tutorial-dialog::backdrop{background:#37393966;backdrop-filter:blur(5px)}.tutorial-top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.12em}.tutorial-top button{width:32px;height:32px;border:1px solid #cfd1d1;border-radius:50%;background:#fff;color:#4c4f50}.tutorial-visual{position:relative;height:170px;margin:18px 0 16px;border:1px solid #dadbdb;border-radius:20px;background:#ececec;overflow:hidden}.demo-stage{position:absolute;inset:0;display:none;align-items:center;justify-content:center}.tutorial-visual[data-step="0"] .mic-stage,.tutorial-visual[data-step="1"] .calibration-stage,.tutorial-visual[data-step="2"] .scordatura-stage,.tutorial-visual[data-step="3"] .string-stage,.tutorial-visual[data-step="4"] .meter-stage{display:flex}.calibration-stage,.scordatura-stage{flex-direction:column;padding:20px}.demo-calibration-label{color:var(--muted);font-size:11px;font-weight:700}.demo-calibration-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:100%;margin:16px auto 7px}.demo-calibration-options span{padding:11px 0;border:1px solid #cfd1d1;border-radius:11px;background:#f7f7f7;color:#4c4f50;text-align:center;font-size:17px}.demo-calibration-options span:first-child{background:#7a8081;color:#fff}.demo-calibration-unit{color:var(--muted);font-size:12px}.demo-scordatura-line{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:9px 0;border-bottom:1px solid #cfd1d1;color:#6f7374;font-size:13px}.demo-scordatura-line strong{color:#6b7071;font-size:17px}
.mic-pulse{position:absolute;width:100px;height:100px;border:2px solid #b5b8b8;border-radius:50%;animation:mic-pulse 2.4s ease-out infinite}.pulse-two{animation-delay:1.2s}.demo-mic{position:relative;width:43px;height:63px;margin-top:-22px;border-radius:25px;background:#7a8081}.demo-mic::before{content:"";position:absolute;left:-12px;top:30px;width:67px;height:52px;border:4px solid #6b7071;border-top:0;border-radius:0 0 36px 36px}.demo-mic::after{content:"";position:absolute;left:19px;top:80px;width:5px;height:23px;border-radius:4px;background:#6b7071}.demo-strings{display:grid;gap:16px;width:78%}.demo-strings i{display:block;height:2px;border-radius:2px;background:#b5b8b8}.demo-strings i:nth-child(3){background:#7a8081;animation:string-vibrate 1.2s ease-in-out infinite}.demo-pluck{position:absolute;top:45%;left:15%;color:#7a8081;font-size:31px;animation:pluck-move 2.4s ease-in-out infinite}.demo-reading{position:absolute;top:32px;left:50%;display:flex;flex-direction:column;align-items:center;font-size:38px;font-weight:700;line-height:1;color:#a8acad;animation:tutorial-meter-move 3.5s ease-in-out infinite}.demo-zero{position:absolute;top:0;opacity:0;animation:zero-appear 3.5s ease-in-out infinite}.demo-minus{animation:minus-disappear 3.5s ease-in-out infinite}.demo-arrow{font-size:28px}.demo-meter{position:absolute;left:11%;right:11%;bottom:32px;height:14px;border-radius:12px;background:linear-gradient(90deg,#cccece,#c4c6c7 40%,#b4b7b8 49%,#b4b7b8 51%,#c4c6c7 60%,#cccece)}.demo-center{position:absolute;left:50%;bottom:26px;width:2px;height:26px;background:#fff}.tutorial-step-label{margin:0 0 6px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.16em}.tutorial-dialog h2{margin:0 0 10px;font-size:25px;letter-spacing:-.04em}.tutorial-description{min-height:72px;margin:0;color:#6f7374;font-size:14px;line-height:1.55}.tutorial-dots{display:flex;justify-content:center;gap:7px;margin:17px 0}.tutorial-dots span{width:7px;height:7px;border-radius:50%;background:#d2d4d4}.tutorial-dots span.active{width:24px;border-radius:5px;background:#7a8081}.tutorial-actions{display:flex;gap:10px}.tutorial-actions button{min-height:48px;border-radius:13px;font-size:13px;font-weight:700}.tutorial-previous{flex:1;border:1px solid #cfd1d1;background:transparent;color:#4c4f50}.tutorial-previous:disabled{opacity:.4;cursor:default}.tutorial-next{flex:1.4;border:0;background:#7a8081;color:#fff}
@keyframes mic-pulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.8);opacity:0}}@keyframes string-vibrate{0%,100%{transform:translateY(0)}25%{transform:translateY(-5px)}50%{transform:translateY(4px)}75%{transform:translateY(-3px)}}@keyframes pluck-move{0%,20%{transform:translate(0,-16px)}40%,60%{transform:translate(90px,11px)}100%{transform:translate(150px,-16px)}}@keyframes tutorial-meter-move{0%,15%{transform:translateX(calc(-50% - 65px));color:#a8acad}50%{transform:translateX(calc(-50% - 20px));color:#84898a}80%,100%{transform:translateX(-50%);color:#747879}}@keyframes zero-appear{0%,60%{opacity:0}75%,100%{opacity:1}}@keyframes minus-disappear{0%,60%{opacity:1}75%,100%{opacity:0}}
@media(max-width:390px){.app{padding-left:12px;padding-right:12px}.topbar{gap:8px}.topbar h1{font-size:21px}.topbar .eyebrow{font-size:8px}.standard{font-size:7px}.standard strong{font-size:9px}.brand-mark{width:38px;height:38px}.tuning,.calibration{padding:16px}}
@media(prefers-reduced-motion:reduce){.meter-needle,.needle-blade,.fan-ray{transition:none}.mic-pulse,.demo-strings i:nth-child(3),.demo-pluck,.demo-reading,.demo-zero,.demo-minus{animation:none}.demo-reading{transform:translateX(-50%);color:#747879}.demo-zero{opacity:1}.demo-minus{opacity:0}}

.language-switch{position:relative;display:flex;gap:2px;align-items:center;margin-left:auto;z-index:10}
.language-switch button{display:none;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);padding:7px 8px;font-size:10px;font-weight:700}
.language-switch button.selected{display:inline-flex}
.language-switch:not(:has(.selected)) button:first-child{display:inline-flex}
.language-switch:hover button,.language-switch:focus-within button{display:inline-flex}


:root{color:#344249;background:#c6e9fa;--muted:#758085;--accent:#5b6c74;--line:#cbd1d3;--surface:#f4f6f5}body{background:radial-gradient(ellipse at 50% 0,#eaf5ff,#c6e9fa 65%)}.brand-mark{background:#e2e6e5;color:#5b6c74}.topbar h1 em,.site-home{color:#586a73}.tuning,.calibration{background:#f4f6f5;border-color:#cbd1d3}.tuning-heading h2,.calibration-heading h2{color:#3b4a51}.string-choice-row button.selected,.calibration-button.selected{background:#dfe5e6;border-color:#8b9ba3;color:#344249;box-shadow:inset 0 0 0 1px #8b9ba3}.listen-button{background:linear-gradient(#7b8a91,#65757d);border-color:#5e7079;color:#fff;box-shadow:0 2px 5px #38474e18}.listen-button.active{background:#5e7079;border-color:#52646d}.status.in-tune,.status.near{color:#65716d}.open-string{background:#edf0ef;border-color:#d3d9da}.open-string strong{color:#4d5e67}.tutorial-dialog{background:#f2f4f3}.tutorial-visual{background:#e2e7e5}.tutorial-next{background:#65757d}.mic-pulse,.demo-strings i{border-color:#9aa8ae}.meter-needle{transition:none}
.mode-toggle{display:inline-flex;min-height:40px;align-items:center;justify-content:center;margin:0 0 12px;padding:9px 13px;border:1px solid #aeb8bc;border-radius:11px;background:#edf3f4;color:#344249;font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer}.mode-toggle:hover{background:#dfe9ec}.mode-toggle:focus-visible{outline:3px solid #6b9db3;outline-offset:2px}.string-choices[hidden],.open-strings[hidden],#tuningHeaderNotes[hidden]{display:none!important}
.trial-badge{width:max-content;max-width:100%;margin:0 auto 5px;padding:5px 10px;border:1px solid #a8d4e6;border-radius:999px;background:#e9f7fc;color:#426b7b;font-size:10px;font-weight:700;letter-spacing:.06em;text-align:center}.trial-badge[hidden]{display:none}