:root{font-family:Arial,Helvetica,sans-serif;color:#302b2a;background:#f6f2e9;font-synthesis:none;--wine:#703e46;--muted:#79716b;--green:#38745d}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #a56d3e;outline-offset:5px}main{max-width:540px;margin:0 auto;padding:30px 24px max(24px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font:24px Georgia,serif}.wordmark svg{width:28px;height:43px;fill:var(--wine)}.wordmark .strings{stroke:#f6f2e9;stroke-width:1}.brand-caption{display:block;font:8px Arial,sans-serif;letter-spacing:2.9px;margin-top:5px;color:var(--muted)}.standard{font-size:11px;color:var(--muted);border:1px solid #ded7cb;border-radius:20px;padding:7px 10px}.intro{text-align:center;margin:43px 0 27px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--wine);font-weight:bold}.intro h1{font-family:Georgia,serif;font-size:43px;letter-spacing:-1.5px;font-weight:normal;margin:13px 0 9px}.intro>p:last-child{font-size:13px;color:var(--muted);margin:0}.tuner{background:#fffefa;border:1px solid #e5dfd5;border-radius:24px;padding:20px 25px 17px;box-shadow:0 8px 30px #47372505}.card-top{display:flex;align-items:center;justify-content:space-between;gap:7px}#activity{display:flex;align-items:center;gap:6px;font-size:8px;letter-spacing:1.2px;color:var(--muted);font-weight:bold}.dot{width:6px;height:6px;flex-shrink:0;background:#b9b2a7;border-radius:50%}.listening .dot{background:var(--green);box-shadow:0 0 0 3px #38745d12}.auto{border:1px solid #e4ded4;border-radius:20px;background:transparent;color:var(--muted);padding:9px 10px;font-size:10px}.auto.active{color:var(--wine);background:#f4e9e8;border-color:#ead8d8}.readout{text-align:center;margin:26px 0 28px}.readout>p:first-child{font-size:9px;letter-spacing:2px;color:var(--muted);margin:0}.note{font:104px/1.1 Georgia,serif;color:var(--wine);height:117px;letter-spacing:-5px}.note sub{font:25px Arial,sans-serif;letter-spacing:0;vertical-align:baseline;margin-left:4px;color:var(--muted)}.frequency{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);margin:5px 0 0;height:15px}.meter{height:46px;position:relative;margin:0 7px}.ticks{display:flex;height:100%;justify-content:space-between;align-items:center}.ticks i{height:12px;width:1px;background:#ddd5c9}.ticks i:nth-child(odd){height:22px}.ticks i:nth-child(6){background:#6e9a83;height:32px}.tune-zone{position:absolute;left:45%;width:10%;height:100%;background:#e6f0e9;border-radius:6px}.center-mark{position:absolute;left:50%;top:9px;bottom:9px;width:1px;background:#7ca089}.needle{position:absolute;width:3px;height:40px;top:3px;left:50%;border-radius:3px;background:var(--wine);z-index:1;transform:translateX(-50%);transition:left .15s ease-out,opacity .2s;opacity:0}.needle:before{content:'';position:absolute;top:-5px;left:-3px;width:9px;height:9px;border-radius:50%;background:inherit}.meter-labels{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:var(--muted);margin:10px 0 0}.meter-labels span:nth-child(2){color:var(--green)}.feedback{text-align:center;min-height:81px;padding-top:22px}.feedback h2{font:23px Georgia,serif;font-weight:normal;margin:0 0 7px}.feedback p{font-size:11px;color:var(--muted);line-height:1.5;margin:0;min-height:18px}.start{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:53px;background:var(--wine);border:0;color:#fff9f1;border-radius:13px;font-size:14px;margin-top:13px}.start:hover{background:#60323a}.start svg{width:18px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}.privacy{display:flex;align-items:center;justify-content:center;gap:5px;font-size:9px;color:#8d847b;margin:14px 0 0}.privacy svg{width:10px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4}.strings-section{margin-top:26px}.section-label{display:flex;justify-content:space-between;align-items:center;margin:0 2px 12px}.section-label h2{font-size:9px;letter-spacing:1.7px;color:var(--muted);margin:0}.section-label>span{font-size:10px;color:var(--muted)}.string-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.string-buttons button{min-height:80px;border:1px solid #ded7cd;background:#faf7f0;border-radius:12px;color:#4b4140;transition:background .15s}.string-buttons button>span{display:block;font:29px Georgia,serif}.string-buttons sub{font:12px Arial,sans-serif;vertical-align:baseline;margin-left:2px;color:var(--muted)}.string-buttons small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.string-buttons button.selected{background:#eee0df;border-color:#b98f94;color:var(--wine)}.string-buttons button.detected{border-color:#b98f94}.reference{display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;border:0;color:var(--wine);font-size:11px;min-height:44px;margin:8px auto 0;padding:8px 20px}.reference svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}.tip{display:flex;gap:12px;align-items:center;border-top:1px solid #e4ddd2;margin-top:7px;padding:19px 7px 0}.tip>span{font:30px Georgia,serif;color:#9f7c6b}.tip p{font-size:11px;line-height:1.7;color:var(--muted);margin:0}footer{text-align:center;color:#9d9389;font:italic 12px Georgia,serif;margin-top:25px}.in-tune .note,.in-tune .feedback h2{color:var(--green)}.in-tune .needle{background:var(--green)}@media(max-width:380px){main{padding:23px 16px}.intro{margin-top:30px}.intro h1{font-size:38px}.tuner{padding:18px}.privacy{font-size:8px}.string-buttons{gap:7px}}@media(min-width:700px){main{padding-top:40px}.intro{margin-top:42px}.tuner{padding-left:35px;padding-right:35px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:600px){main{padding-top:22px}.intro{margin:26px 0 21px}.intro h1{font-size:38px}.readout{margin:20px 0 21px}.note{font-size:88px;height:98px}.feedback{min-height:73px;padding-top:17px}.strings-section{margin-top:19px}}
.screen-status{font-size:10px;line-height:1.5;text-align:center;color:var(--muted);margin:9px 0 0}
.tone-volume{display:flex;align-items:center;gap:10px;padding:0 5px 12px;font-size:10px;color:var(--muted)}.tone-volume label{white-space:nowrap}.tone-volume input{min-width:0;flex:1;accent-color:var(--wine);height:32px;cursor:pointer}.tone-volume output{font-variant-numeric:tabular-nums;min-width:29px;text-align:right}