.keyboard-wrap[data-v-5930965d]{margin:4px -8px 24px;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;padding:8px;scrollbar-color:rgba(23,32,29,.28) transparent;scrollbar-width:thin;width:100%}.keyboard[data-v-5930965d]{--white-key-width:34px;--black-key-width:22px;display:block;min-width:100%;padding:0 2px;position:relative}.keyboard[data-v-5930965d],.white-keys[data-v-5930965d]{height:132px;width:-moz-max-content;width:max-content}.white-keys[data-v-5930965d]{align-items:stretch;display:flex}.black-keys[data-v-5930965d]{height:82px;inset:0 auto auto 2px;position:absolute}.piano-key[data-v-5930965d]{align-items:flex-end;border:0;cursor:pointer;display:flex;justify-content:center;letter-spacing:0;position:relative;transition:background .12s ease,box-shadow .12s ease,color .12s ease,transform .12s ease}.piano-key[data-v-5930965d]:active{transform:translateY(1px)}.piano-key.white[data-v-5930965d]{background:#fffdf8;border:1px solid rgba(23,32,29,.18);border-left-width:0;border-radius:0 0 6px 6px;box-shadow:inset 0 -10px 16px #17201d0d;color:#52615c;height:132px;width:var(--white-key-width);z-index:1}.piano-key.white[data-v-5930965d]:first-child{border-left-width:1px}.piano-key.black[data-v-5930965d]{background:#17201d;border-radius:0 0 5px 5px;box-shadow:0 7px 14px #17201d3d;color:#fffaf0b8;height:82px;left:calc(var(--white-key-width)*var(--after-white-count) - var(--black-key-width)/2);position:absolute;width:var(--black-key-width);z-index:2}.piano-key.active[data-v-5930965d]{background:#d74f2a;box-shadow:0 0 0 3px #d74f2a38,0 10px 28px #d74f2a52;color:#fffaf0;transform:translateY(-2px)}.piano-key span[data-v-5930965d]{display:block;font-size:.68rem;font-weight:850;line-height:1;padding-bottom:10px;pointer-events:none}.piano-key.black span[data-v-5930965d]{font-size:.58rem;padding-bottom:8px}@media(max-width:560px){.keyboard-wrap[data-v-5930965d]{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}.keyboard[data-v-5930965d]{--white-key-width:32px;--black-key-width:21px;min-width:1120px}}:root{background:#f4f1e8;color:#17201d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;overflow-x:hidden}button{font:inherit}.page-shell{background:linear-gradient(135deg,#f4f1e8eb,#dee8e2e0),url(https://images.unsplash.com/photo-1511379938547-c1f69419868d?auto=format&fit=crop&w=1800&q=80) 50% /cover;display:grid;min-height:100vh;padding:24px;place-items:center}.tuner{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffcf4eb;border:1px solid rgba(23,32,29,.14);border-radius:8px;box-shadow:0 24px 80px #1f29252e;max-width:960px;min-width:0;overflow:hidden;padding:clamp(22px,5vw,42px);position:relative;width:100%}.frequency-row,.topbar,.tuning-meter,.volume-label{align-items:center;display:flex;gap:16px;justify-content:space-between}.topbar{align-items:flex-start;position:relative;z-index:3}.controls{align-items:center;display:flex;gap:10px}.language-switch{background:#17201d12;border:1px solid rgba(23,32,29,.14);border-radius:8px;display:inline-grid;grid-template-columns:repeat(2,44px);min-height:48px;padding:4px}.language-switch button{background:transparent;border:0;border-radius:6px;color:#52615c;cursor:pointer;font-size:.82rem;font-weight:850}.language-switch button.active{background:#fffaf0;box-shadow:0 4px 14px #1f292521;color:#17201d}.eyebrow{color:#5d6964;font-size:.78rem;font-weight:700;margin:0 0 8px;text-transform:uppercase}.eyebrow,h1{letter-spacing:0}h1{color:#17201d;font-size:clamp(2rem,6vw,4.4rem);line-height:.95;margin:0}.listen-button{background:#d74f2a;border:0;border-radius:8px;color:#fffaf0;cursor:pointer;font-weight:800;min-height:48px;min-width:104px;transition:transform .16s ease,background .16s ease}.listen-button:hover{background:#b83e20;transform:translateY(-1px)}.start-overlay{align-items:center;-webkit-backdrop-filter:blur(2px) saturate(1.06);backdrop-filter:blur(2px) saturate(1.06);background:linear-gradient(135deg,#fffcf44d,#e8f2ec24),#fffcf414;border:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff85;color:#17201d;display:flex;flex-direction:column;gap:14px;inset:0;justify-content:center;text-align:center;z-index:2}.start-overlay,.start-overlay:before{pointer-events:none;position:absolute}.start-overlay:before{border:1px solid rgba(23,32,29,.12);border-radius:8px;content:"";inset:18px}.start-overlay:hover .overlay-action{background:#fffcf494;border-color:#d74f2a8f;transform:translateY(-2px)}.overlay-hint,.overlay-kicker{color:#52615c;font-weight:800;position:relative;z-index:1}.overlay-kicker{font-size:.85rem;text-transform:uppercase}.overlay-action{-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);background:#fffcf46b;border:1px solid rgba(215,79,42,.32);border-radius:8px;box-shadow:0 18px 60px #1f29252e,inset 0 1px #ffffff85;color:#d74f2a;cursor:pointer;font-size:clamp(2.2rem,8vw,5.8rem);font-weight:900;line-height:1;min-width:min(74vw,320px);padding:22px 42px;pointer-events:auto;position:relative;transition:transform .16s ease,background .16s ease;z-index:1}.overlay-hint{font-size:.96rem;max-width:min(70vw,380px)}.tuner.inactive .piano-key.black{background:#17201d8f;box-shadow:0 4px 12px #17201d1a;color:#fffaf047}.tuner.inactive .piano-key.white{background:#fffdf8a8;color:#52615c6b}.note-slider{position:relative;z-index:3}.slider-label{align-items:center;display:flex;gap:16px;justify-content:space-between}.note-slider p,.slider-label{color:#5d6964;font-size:.92rem;font-weight:800}.sound-switch{background:#17201d12;border:1px solid rgba(23,32,29,.14);border-radius:8px;display:inline-grid;grid-template-columns:repeat(2,minmax(78px,1fr));min-height:42px;padding:4px}.sound-switch button{background:transparent;border:0;border-radius:6px;color:#52615c;cursor:pointer;font-size:.82rem;font-weight:850}.sound-switch button.active{background:#277a73;box-shadow:0 4px 14px #1f292521;color:#fffaf0}.note-slider{display:grid;gap:10px;margin:-8px 0 22px}.slider-label strong{color:#17201d}.note-slider input{accent-color:#d74f2a;cursor:ew-resize;width:100%}.note-slider p{font-size:.82rem;margin:0}.readout{align-items:baseline;color:#162c39;display:flex;justify-content:center;margin:32px 0 18px;min-height:210px}.note{font-size:clamp(7rem,28vw,14rem);font-weight:900;letter-spacing:0;line-height:.82}.octave{color:#277a73;font-size:clamp(2.6rem,8vw,5rem);font-weight:850;min-width:48px}.frequency-row{color:#3d4c47;font-size:clamp(1rem,3vw,1.25rem);font-weight:750}.tuning-meter{color:#63706b;font-size:.82rem;font-weight:700;margin:26px 0}.rail{background:linear-gradient(90deg,#2b6f9b,#9fc9bd 45%,#277a73,#efb45d 55%,#d74f2a);height:48px;overflow:hidden;position:relative;width:min(100%,560px)}.rail,.rail:after{border-radius:999px}.rail:after{background:#fffcf4c2;content:"";inset:13px;position:absolute}.center-line,.needle{border-radius:8px;height:32px;left:50%;position:absolute;top:8px;width:3px;z-index:1}.center-line{background:#17201d47}.needle{background:#17201d;transition:transform 90ms linear}.volume{display:grid;gap:10px}.volume-label{color:#5d6964;font-size:.92rem;font-weight:700}.volume-track{background:#17201d1f;border-radius:999px;height:12px;overflow:hidden}.volume-track i{background:#277a73;border-radius:inherit;display:block;height:100%;transition:width 80ms linear}.error{color:#9f2f1a;font-weight:700;margin:18px 0 0}@media(max-width:560px){.page-shell{padding:14px}.controls,.topbar{align-items:stretch;flex-direction:column;width:100%}.language-switch,.listen-button,.sound-switch{width:100%}.language-switch,.sound-switch{grid-template-columns:repeat(2,1fr)}.slider-label,.sound-row{align-items:flex-start;flex-direction:column;gap:8px}.readout{min-height:170px}.tuning-meter{gap:10px}}