:root{font-family:Arial,Helvetica,sans-serif;color:#242b29;background:#f3f0e8;font-synthesis:none;--green:#36775e;--orange:#c85232;--line:#dcded4}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #c85232;outline-offset:5px}button:disabled{opacity:.6;cursor:wait}.app{max-width:1120px;margin:auto;padding:0 48px}header{height:105px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:inherit;font-weight:750;font-size:30px;letter-spacing:-1.3px;display:flex;align-items:center}.brand-icon{font-size:40px;margin-right:10px;transform:rotate(-90deg);font-weight:400}.brand-dot{color:var(--orange)}.text-button{border:0;background:none;font-size:16px;font-weight:600}.text-button span{margin-left:12px;color:var(--orange);font-size:23px}main{max-width:720px;margin:auto}.intro{text-align:center;margin:43px 0 29px}.eyebrow{font-size:13px;letter-spacing:2.2px;font-weight:700;color:#737c70}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:54px;letter-spacing:-2px;margin:14px 0 12px}.intro p{color:#73796e;font-size:17px}.tuner{background:#fafbf5;border:1px solid #d6dacf;border-radius:18px;box-shadow:0 10px 35px #35432b06;overflow:hidden}.panel-top{display:flex;justify-content:space-between;margin:24px 26px 0;align-items:center;font-family:monospace;font-size:13px;letter-spacing:1px;color:#7a8377}.live-label{display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;border-radius:50%;background:#a5ada0}.dot.on{background:var(--green);box-shadow:0 0 0 4px #36775e12}.model{color:#9ba291}.meter{height:284px;position:relative;max-width:600px;margin:17px auto 0}.dial{width:100%;height:230px;overflow:visible}.dial-arc{fill:none;stroke:#e1e5d9;stroke-width:2}.sweet-arc{fill:none;stroke:#83a98a;stroke-width:5}.dial text{font-family:monospace;font-size:13px;fill:#939c8b;text-anchor:middle}.tick{stroke:#c2cabb;stroke-width:1}.tick.major{stroke:#9da992;stroke-width:1.5}#needle{transition:transform .12s ease-out;opacity:0}#needle line{stroke:var(--orange);stroke-width:2}#needle circle{fill:var(--orange)}.note-display{position:absolute;top:108px;left:0;right:0;text-align:center;pointer-events:none}.note{font-family:Georgia,'Times New Roman',serif;font-size:110px;line-height:1.05;letter-spacing:-5px}.note sub{font:30px Arial,sans-serif;letter-spacing:0;vertical-align:baseline;color:#8b947f;margin-left:5px}.frequency{font-family:monospace;font-size:13px;color:#89937f;letter-spacing:1.5px;margin-top:12px}.feedback{text-align:center;min-height:68px;display:flex;flex-direction:column;gap:7px}.feedback>span:first-child{font-size:22px;font-weight:500}.feedback>span:last-child{font-size:16px;color:#8a9381;font-family:monospace}.in-tune .note,.in-tune .feedback>span:first-child{color:var(--green)}.in-tune #needle line{stroke:var(--green)}.in-tune #needle circle{fill:var(--green)}.strings{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;padding:0 32px;margin-top:16px}.string{border:1px solid #dce1d2;border-radius:12px;background:#f1f3ea;padding:13px 4px;min-height:70px;display:flex;flex-direction:column;gap:5px;align-items:center;color:#394632;position:relative}.string .string-note{font-family:Georgia,serif;font-size:29px;line-height:1}.string small{font-family:monospace;font-size:12px;color:#8e9984}.string.active{background:#e1e9d8;border-color:#7c946b;color:#355a2b}.string.locked:after{content:'•';position:absolute;right:7px;top:2px;color:var(--green)}.string-caption{display:flex;justify-content:space-between;align-items:center;margin:12px 33px 0;color:#9ba58e;font-family:monospace;font-size:12px;letter-spacing:1px}.auto-button{border:0;background:none;color:#657d53;font-size:13px;padding:5px}.auto-button[aria-pressed=false]{color:#929b88}.main-action{margin:22px 32px 0;text-align:center;border-top:1px solid #e3e7dc;padding:22px 0 20px}.primary{background:#283d32;color:#fbfdf7;min-height:51px;border-radius:9px;border:0;width:100%;font-size:17px;letter-spacing:.1px}.primary:hover{background:#355341}.primary span{margin-right:9px;font-size:16px}.main-action p{font-size:14px;color:#8b9581;margin:12px 0;min-height:14px}.input-level{height:3px;width:80px;background:#e3e8da;border-radius:3px;margin:auto;overflow:hidden}.input-level span{display:block;width:0;height:100%;background:#7c9b68;transition:width .1s}.controls{display:flex;align-items:center;gap:24px;margin-top:23px;padding:19px 4px;border-bottom:1px solid var(--line)}.controls label{display:flex;flex-direction:column;gap:10px;min-width:0}.controls label>span{font-size:12px;letter-spacing:1.5px;color:#87907d}.controls label:first-child{flex:1}.controls select{max-width:100%;background:transparent;border:0;color:#35412e;font-size:16px;padding:0 20px 0 0}.calibration{border-left:1px solid #d8ddce;padding-left:24px;white-space:nowrap}.calibration div{font-size:16px;color:#65725b}.calibration input{width:48px;color:#35412e;border:0;background:transparent;padding:0;font-size:16px}.tone-button{background:none;border:0;font-size:14px;color:#526446;white-space:nowrap;padding:10px 0 10px 10px}.tone-button span{font-size:23px;vertical-align:middle;margin-right:5px}.tone-button[aria-pressed=true]{color:var(--orange)}.bottom-note{display:flex;gap:14px;align-items:center;margin:22px 4px}.small-mark{font-size:38px;color:#829473}.bottom-note p{font-size:16px;line-height:1.8;color:#68775c}.bottom-note p span{font-size:14px;color:#8d9782}.how{margin:16px 4px 36px;font-size:16px;color:#77836b}.how summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}.how summary::-webkit-details-marker{display:none}.how summary>span{font-size:22px}.how div{line-height:1.9;color:#7b866f;max-width:620px}footer{border-top:1px solid var(--line);padding:24px 0 30px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:1.3px;color:#929a87}dialog{border:1px solid #d5dbcc;border-radius:20px;background:#fafbf5;color:#283d32;padding:38px;max-width:410px;width:calc(100% - 36px);line-height:1.8;box-shadow:0 20px 90px #14251b30}dialog::backdrop{background:#17282065;backdrop-filter:blur(4px)}dialog h2{font-family:Georgia,serif;font-weight:400;font-size:34px;letter-spacing:-1px;line-height:1.2}dialog p{font-size:17px;color:#6b7862}.dialog-foot{font-size:14px!important}.close{position:absolute;top:8px;right:13px;border:0;background:none;font-size:25px;color:#6b7862;padding:4px 9px}
@media(max-width:600px){.app{padding:0 20px}header{height:76px}.brand{font-size:28px}.brand-icon{font-size:34px}.text-button{font-size:16px}.intro{margin:31px 0 26px}.eyebrow{font-size:12px;letter-spacing:1.8px}h1{font-size:42px;letter-spacing:-1.6px}.intro p{font-size:16px}.panel-top{margin:20px 18px 0;font-size:12px;letter-spacing:.5px}.model{font-size:12px}.meter{height:254px;margin-top:22px}.dial{height:auto}.note-display{top:calc(19vw + 22px)}.note{font-size:86px}.frequency{font-size:12px;margin-top:8px}.feedback{min-height:64px}.feedback>span:first-child{font-size:21px}.feedback>span:last-child{font-size:13px}.strings{padding:0 17px;gap:7px;margin-top:6px}.string{border-radius:9px;padding:12px 2px;min-height:62px}.string .string-note{font-size:27px}.string small{font-size:12px}.string-caption{margin:9px 18px 0}.main-action{margin:17px 18px 0;padding:18px 0}.controls{gap:12px;flex-wrap:wrap;margin-top:16px;padding:14px 0}.controls label:first-child{flex:1 1 58%}.calibration{padding-left:14px;flex:0 0 29%}.tone-button{padding-left:0;font-size:14px}.controls select{font-size:14px}.bottom-note{margin:15px 0}.bottom-note p{font-size:14px}.bottom-note p span{font-size:13px}.how{margin-bottom:26px}footer{font-size:11px;letter-spacing:.8px;gap:18px;line-height:1.7;padding-bottom:max(25px,env(safe-area-inset-bottom))}footer span{max-width:50%}footer span:last-child{text-align:right}}
@media(max-width:370px){.app{padding:0 13px}h1{font-size:38px}.meter{height:235px}.note-display{top:86px}.note{font-size:76px}.model{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Room for larger type, including long tuning names and microphone messages. */
.feedback{padding:0 16px;min-height:84px;line-height:1.35}.main-action p{line-height:1.55}.primary{min-height:56px}.string{min-height:82px;gap:8px}.controls{flex-wrap:wrap}.controls select{min-height:44px;width:100%}.calibration input{width:58px;min-height:44px}.controls label>span{line-height:1.4}.tone-button{min-height:44px}.auto-button{min-height:40px}.bottom-note p{line-height:1.65}.how{line-height:1.6}.dialog-foot{font-size:14px!important}
@media(max-width:600px){.strings{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.string{padding:13px 5px}.string small{font-size:13px}.string-caption{letter-spacing:.4px}.controls label:first-child{flex:1 1 100%}.calibration{flex:1 1 42%;border-left:0;padding-left:0}.tone-button{flex:1 1 42%;text-align:right}.dial text{font-size:20px}.eyebrow{line-height:1.6;letter-spacing:1.2px}.intro p{line-height:1.5}.bottom-note{align-items:flex-start}.bottom-note p{margin-top:4px}.model{font-size:11px}.panel-top{gap:10px;flex-wrap:wrap}dialog{padding:32px 24px}}
@media(max-width:370px){.brand{font-size:26px}.brand-icon{font-size:30px;margin-right:6px}.text-button{font-size:14px}.text-button span{margin-left:5px}.intro h1{font-size:38px}}

/* Hide the installation action before scripts load in installed windows. */
@media(display-mode:standalone),(display-mode:minimal-ui),(display-mode:fullscreen){#install{display:none}}

/* Let the tuner settle near the top without trapping normal page scrolling. */
html{scroll-snap-type:y proximity;scroll-padding-block-start:max(12px,env(safe-area-inset-top,0px))}
.tuner{scroll-snap-align:start;scroll-snap-stop:normal}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}}