:root{color:#f5f7fb;background:#0b0e13;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% 25%,rgba(47,59,77,.24),transparent 40%),#0b0e13}button{font:inherit}.app-shell{width:min(100%,1280px);min-height:100vh;margin:0 auto;padding:28px clamp(20px,4vw,56px) 22px;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:1px solid #232a35}.topbar-controls{display:flex;align-items:center;justify-content:flex-end;gap:14px}.mode-switch{display:flex;padding:4px;border:1px solid #303844;border-radius:15px;background:#151a22}.mode-switch button{min-height:48px;padding:0 18px;border:0;border-radius:11px;background:transparent;color:#8994a3;font-weight:800;cursor:pointer;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}.mode-switch button:hover{color:#dce2ec}.mode-switch button.active{background:#30394a;color:#f5f7fb;box-shadow:0 3px 12px #0003}.eyebrow,.section-kicker{margin:0 0 7px;color:#8c97a7;font-size:.74rem;font-weight:800;letter-spacing:.2em}h1{margin:0;font-size:clamp(1.8rem,3vw,2.65rem);line-height:1;letter-spacing:-.04em}.start-button{min-width:160px;min-height:58px;padding:0 24px;border:1px solid #657cff;border-radius:16px;background:#5871ff;color:#fff;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:0 10px 28px #334bd847;transition:transform .16s ease,background-color .16s ease}.start-button:hover{transform:translateY(-1px);background:#687fff}.start-button:active{transform:translateY(1px)}.start-button.listening{border-color:#424b5b;background:#252c37;box-shadow:none}.button-indicator{display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:#b7c2ff}.listening .button-indicator{background:#4de49b;box-shadow:0 0 0 6px #4de49b1f}.tuner-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(430px,1.2fr);gap:clamp(28px,6vw,84px);align-items:center;flex:1;padding:clamp(28px,5vw,56px) 0 20px}.reading-panel{align-self:center}.current-note{display:flex;align-items:baseline;gap:18px;padding-bottom:24px;border-bottom:1px solid #29303b}.current-note span,.reading-grid span{color:#8e99aa;font-size:.86rem;font-weight:700;letter-spacing:.08em}.current-note strong{color:#f8fafc;font-size:clamp(2.9rem,7vw,5.4rem);line-height:.95;letter-spacing:-.07em}.reading-grid{display:grid;gap:18px;margin:25px 0}.reading-grid div{display:flex;justify-content:space-between;align-items:baseline;gap:18px}.reading-grid strong{color:#dce2ec;font-size:clamp(1.02rem,2vw,1.28rem)}.result{min-height:70px;display:flex;align-items:center;gap:13px;padding:16px 18px;border:1px solid #2e3744;border-radius:16px;background:#151a22;color:#b9c1ce;line-height:1.35}.result-dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:currentColor;box-shadow:0 0 0 6px color-mix(in srgb,currentColor 12%,transparent)}.result-low{border-color:#284f80;background:#111f30;color:#67b7ff}.result-high{border-color:#773747;background:#29151c;color:#ff6d83}.result-accurate{border-color:#236745;background:#10271c;color:#4de49b}.headstock-stage{display:flex;flex-direction:column;align-items:center}.section-kicker{margin-bottom:18px}.headstock{position:relative;width:min(100%,510px);height:450px;display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center}.headstock-body{position:relative;z-index:1;width:100%;height:420px;overflow:hidden;border:1px solid #4b535f;border-radius:46% 46% 20% 20%/15% 15% 7% 7%;background:#252b33;box-shadow:inset 0 0 0 8px #191e25,0 20px 50px #00000042}.headstock-cap{position:absolute;z-index:3;top:62px;left:50%;width:100%;transform:translate(-50%);text-align:center}.headstock-cap span{display:block;color:#818a98;font-size:.54rem;font-weight:800;letter-spacing:.23em}.headstock-cap strong{display:block;margin-top:6px;color:#d2d7de;font-size:.68rem;letter-spacing:.18em}.string-lines{position:absolute;top:0;right:30%;bottom:0;left:30%;z-index:2;display:flex;justify-content:space-between}.string-line{width:1px;height:100%;background:#66707d;transition:background-color .16s ease,box-shadow .16s ease}.string-line.active{background:#b8c4ff;box-shadow:0 0 12px #7187ff}.nut{position:absolute;z-index:4;bottom:32px;left:13%;width:74%;height:9px;border-radius:5px;background:#d9d6cc;box-shadow:0 0 0 3px #1a1f26}.peg-column{position:relative;z-index:2;height:335px;display:flex;flex-direction:column;justify-content:space-between}.peg-column-left{align-items:flex-end}.peg-column-right{align-items:flex-start}.peg{position:relative;display:flex;align-items:center;padding:0;border:0;background:transparent;color:inherit;font:inherit;opacity:1;transition:transform .17s ease,filter .17s ease}.peg.selectable{cursor:pointer}.peg.selectable:hover{transform:scale(1.04)}.peg.selectable:focus-visible{outline:3px solid #91a1f6;outline-offset:6px;border-radius:12px}.peg.selectable.active:hover{transform:scale(1.08)}.peg-column-left .peg{flex-direction:row}.peg-column-right .peg{flex-direction:row-reverse}.peg small{position:absolute;top:50%;color:#6e7886;font-size:.65rem;font-weight:800;white-space:nowrap;transform:translateY(-50%);transition:color .17s ease}.peg-column-left .peg small{right:calc(100% + 8px)}.peg-column-right .peg small{left:calc(100% + 8px)}.peg-key{position:relative;z-index:2;width:62px;height:51px;display:grid;place-items:center;border:1px solid #515b69;border-radius:15px 7px 7px 15px;background:#2d343e;color:#a6afbc;box-shadow:inset 0 0 0 4px #20262e;transition:color .17s ease,border-color .17s ease,background-color .17s ease,box-shadow .17s ease}.peg-column-right .peg-key{border-radius:7px 15px 15px 7px}.peg-key span{font-size:1rem;font-weight:900}.peg-post{width:28px;height:18px;border-block:1px solid #555e6a;background:#343c47}.peg.active{transform:scale(1.08);filter:drop-shadow(0 0 16px rgba(105,128,255,.38))}.peg.active small{color:#aebcff}.peg.active .peg-key{border-color:#8da0ff;background:#5a72ec;color:#fff;box-shadow:inset 0 0 0 4px #465bc6,0 0 0 5px #6980ff24}.peg.active .peg-post{border-color:#8fa1ff;background:#6579df}.meter{width:min(100%,830px);margin:0 auto 20px}.meter-labels,.meter-scale{display:flex;align-items:center;justify-content:space-between}.meter-labels{padding:0 8px 5px;color:#818b99;font-size:.76rem;font-weight:800;letter-spacing:.12em}.meter-labels strong{color:#eef2f7;font-size:1.1rem}.meter-face{position:relative;height:115px;overflow:hidden;border-bottom:1px solid #343d49}.meter-arc{position:absolute;bottom:-260px;left:50%;width:720px;height:360px;transform:translate(-50%);border:1px solid #394350;border-radius:50% 50% 0 0}.ticks{position:absolute;bottom:-236px;left:50%;width:1px;height:336px}.tick{position:absolute;bottom:0;left:0;width:1px;height:336px;transform-origin:bottom}.tick:before{position:absolute;top:0;left:-1px;width:3px;height:13px;border-radius:2px;background:#596574;content:""}.tick.center:before{height:22px;background:#dce2ec}.needle{position:absolute;z-index:3;bottom:-18px;left:50%;width:3px;height:124px;border-radius:4px;background:#f4f6fb;box-shadow:0 0 18px #eaefff66;transform-origin:50% calc(100% - 4px);transition:transform .42s cubic-bezier(.22,1,.36,1);will-change:transform}.needle:before{position:absolute;top:-2px;left:50%;width:11px;height:11px;border-radius:50%;background:#8094ff;box-shadow:0 0 17px #687fffcc;content:"";transform:translate(-50%)}.needle-hub{position:absolute;z-index:4;bottom:-8px;left:50%;width:21px;height:21px;border:4px solid #121720;border-radius:50%;background:#91a1f6;transform:translate(-50%)}.meter-scale{padding-top:8px;color:#717c8a;font-size:.72rem;font-weight:800;letter-spacing:.1em}footer{padding-top:18px;border-top:1px solid #232a35;color:#788391;font-size:.82rem;text-align:center}@media(max-width:900px){.app-shell{padding-top:22px}.tuner-layout{grid-template-columns:1fr;gap:42px}.reading-panel{width:min(100%,620px);margin:0 auto}.headstock{height:420px;transform:scale(.94);transform-origin:center}.meter{margin-top:10px}}@media(max-width:600px){.app-shell{padding-inline:16px}.topbar{flex-direction:column;align-items:stretch;gap:14px}.topbar>div{align-self:stretch}.topbar-controls{align-items:stretch;gap:9px}.mode-switch{width:100%}.mode-switch button{min-height:42px;flex:1;padding-inline:10px;font-size:.82rem}.start-button{width:100%;min-width:128px;min-height:54px;padding-inline:15px}.current-note{justify-content:space-between}.headstock-stage{margin-inline:-12px}.headstock{width:100%;height:370px;grid-template-columns:1fr 1.08fr 1fr}.headstock-body{height:355px}.peg-column{height:282px}.peg-key{width:49px;height:46px}.peg-post{width:18px}.peg small{display:none}.meter-arc{width:560px}footer{line-height:1.6}}