:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#233a35;background:#f4f5ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1040px;margin:auto;padding:32px 40px}header{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:21px;font-weight:750;color:inherit;text-decoration:none;display:flex;gap:12px;align-items:center}.mark{background:#235d4e;color:white;border-radius:12px;width:40px;height:40px;text-align:center;font-size:30px}.privacy{font-size:12px;color:#55776a}.intro{margin:50px 0 28px}.eyebrow{font-size:11px;letter-spacing:2.3px;font-weight:750;color:#6c887a}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(35px,5vw,52px);letter-spacing:-1.8px;margin:12px 0}.intro>p:last-child{font-size:16px;color:#66756e}.workspace{background:#fff;border:1px solid #dce4da;border-radius:24px;box-shadow:0 12px 40px #293d2310;padding:24px 32px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px}fieldset{border:0;padding:0;margin:0;display:flex;align-items:center;gap:14px}legend{float:left;font-size:13px;color:#69766e;margin:10px 14px 0 0}.segmented{display:flex;background:#eff3ed;padding:4px;border-radius:12px}button{font:inherit;font-size:14px;font-weight:650;border:1px solid #dbe3d8;background:white;color:#334e42;padding:12px 20px;border-radius:11px;cursor:pointer;touch-action:manipulation}button:hover{background:#e8f0e6}button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #b19139;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.segmented button{border:0;padding:9px 20px;background:transparent}.segmented button[aria-pressed=true]{background:white;box-shadow:0 2px 6px #233a3514}#status{font-size:13px;display:flex;align-items:center;gap:8px}.dot{height:7px;width:7px;border-radius:50%;background:#a4b3a7}#status.active .dot{background:#3a926d}.staff-wrap{position:relative;margin-top:10px}svg{width:100%;height:auto;display:block;max-height:390px;overflow:visible}#staff-lines line{stroke:#b0bcb1;stroke-width:1.5}#clef-symbol{font-family:"Segoe UI Symbol","Noto Music",serif;font-size:113px;fill:#374b3d}#head,#accidental{fill:#275f4a}#accidental{font-family:serif;font-size:37px}#stem,#ledgers line{stroke:#275f4a;stroke-width:2.3}#staff-hint{position:absolute;bottom:30px;left:0;right:0;text-align:center;font-size:13px;color:#89958b}.readout{background:#f5f7f1;border-radius:16px;padding:22px 26px;display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:32px}.label{font-size:10px;letter-spacing:1.7px;font-weight:750;margin:0;color:#778679}#note-name{font-size:42px;font-weight:650;line-height:1.3;min-height:55px}#frequency,#tuning-hint{font-size:12px;color:#718074;margin:4px 0}.tuning-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#7b877c}.tuning-top strong{font-size:13px;color:#365d46}.meter{height:8px;background:linear-gradient(90deg,#e4cfb0,#d4e6cb 40%,#d4e6cb 60%,#e4cfb0);border-radius:8px;position:relative;margin:16px 0}.center{height:18px;width:2px;background:#7c9981;position:absolute;left:50%;top:-5px}#needle{position:absolute;top:-4px;height:16px;width:8px;border-radius:4px;background:#285c43;transition:left .08s linear}#tuning-hint{text-align:center}.actions{display:flex;justify-content:center;gap:12px;margin-top:24px}.primary{background:#235d4e;border-color:#235d4e;color:white;padding-left:26px;padding-right:26px}.primary:hover{background:#194b3e}.primary span{margin-left:18px}#error{font-size:14px;color:#8b3b2c;background:#fff0ea;padding:14px;border-radius:10px;text-align:center}details{border:1px solid #dce4da;border-radius:14px;margin-top:18px;background:#f9faf6}summary{cursor:pointer;padding:18px 22px;font-size:13px;font-weight:650}summary span{float:right;font-size:12px;color:#7f8a7e;font-weight:400}.demo-controls{padding:0 22px 18px}.demo-controls label{display:block;font-size:13px}.demo-controls output{float:right}.demo-controls input{width:100%;margin:20px 0;accent-color:#235d4e}.demo-controls p{font-size:12px;color:#778679}footer{font-size:12px;color:#7b887c;line-height:1.8;text-align:center;padding:18px 16px}footer strong{font-weight:650;color:#566e5c}footer p{margin:7px 0}[hidden]{display:none!important}@media(max-width:600px){main{padding:20px 16px}.privacy{max-width:118px;font-size:10px}.intro{margin-top:36px}.workspace{padding:18px 16px;border-radius:18px}.toolbar{align-items:flex-start;flex-direction:column;gap:15px}.readout{padding:18px;gap:12px;grid-template-columns:1fr 1.5fr}#note-name{font-size:34px}#tuning-hint{font-size:10px}.staff-wrap{margin:0 -8px}#staff-hint{bottom:12px;font-size:11px}summary span{display:block;float:none;margin-top:5px}.actions button{padding:12px 16px}.primary span{margin-left:8px}}