@font-face{font-family:Manrope;src:url(/Keyboard-Tutor/fonts/manrope.woff2) format("woff2");font-display:swap}@font-face{font-family:Space Grotesk;src:url(/Keyboard-Tutor/fonts/space-grotesk.woff2) format("woff2");font-display:swap}@font-face{font-family:Bravura;src:url(/Keyboard-Tutor/fonts/bravura.woff2) format("woff2");font-display:swap}:root{font-family:Manrope,system-ui,sans-serif;color:#171717;background:#f4f4f0;font-synthesis:none;--ink: #171717;--muted: #656565;--paper: #fff;--soft: #e8e8e2;--line: #c9c9c2;--dark: #171717;--radius: 18px;--shadow: 0 12px 35px #1111}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:300px;min-height:100vh;background:linear-gradient(145deg,#fafaf7 0,#edede8);line-height:1.55}button,input,select{font:inherit}button,select,input[type=number]{min-height:44px}button{border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:750;padding:.62rem .9rem;cursor:pointer;transition:transform .14s,background .14s,box-shadow .14s}button:hover:not(:disabled){background:#eee;box-shadow:0 3px #bbb}button:active:not(:disabled){transform:translateY(1px);box-shadow:none}button:disabled{opacity:.58;cursor:not-allowed}button.primary{background:var(--dark);color:#fff;border-color:var(--dark)}button.primary:hover{background:#333}button.danger{border-color:#111;background:#111;color:#fff}a{color:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Space Grotesk,Manrope,sans-serif;line-height:1.08;letter-spacing:-.035em}h1{font-size:1.25rem;margin:0}h2{font-size:clamp(1.55rem,3vw,2.7rem);margin-bottom:.65rem}h3{font-size:1.25rem;margin:1.35rem 0 .55rem}p{color:#3f3f3f}label{font-weight:750;color:#303030;display:grid;gap:.35rem}select,input[type=number]{border:1px solid var(--line);border-radius:9px;background:#fff;padding:.55rem .7rem;color:var(--ink);width:100%}input[type=range]{accent-color:#111;min-height:44px;width:100%}:focus-visible{outline:3px solid #111;outline-offset:3px}.skip-link{position:fixed;z-index:1000;top:.5rem;left:.5rem;background:#fff;padding:.75rem;transform:translateY(-150%);border:2px solid}.skip-link:focus{transform:none}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:850;color:#626262;margin-bottom:.45rem}.hint{font-size:.83rem;color:var(--muted);margin:0}.site-header{padding:max(.65rem,env(safe-area-inset-top)) 1rem .65rem;background:#f8f8f5f0;color:var(--ink);border-bottom:1px solid #cfcfca;display:flex;justify-content:center;position:sticky;top:0;z-index:100;backdrop-filter:blur(16px)}.site-header nav{min-width:0;max-width:100%}.site-header ul{display:flex;flex-wrap:nowrap;list-style:none;max-width:100%;overflow-x:auto;scrollbar-width:none;margin:0;padding:.3rem;gap:.2rem;background:#e7e7e2;border-radius:12px}.site-header ul::-webkit-scrollbar{display:none}.site-header nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:#555;border-radius:9px;padding:.58rem .9rem;font-size:.88rem;font-weight:750;white-space:nowrap}.site-header nav a:hover,.site-header nav a:focus-visible{background:#f7f7f4;color:#111}.site-header nav a[aria-current=page]{background:#111;color:#fff;box-shadow:0 2px 8px #1112}.site-header :focus-visible{outline-color:#111;box-shadow:none}.update-banner,.storage-banner{padding:.65rem 1rem;background:#ddd;text-align:center;border-bottom:1px solid #aaa}.storage-banner{background:#fff;border-bottom-style:dashed;font-weight:700}.main-content{max-width:1320px;margin:auto;padding:clamp(1.25rem,3vw,2.5rem) max(1rem,3vw) 4rem;min-height:85vh}.page-heading{margin-bottom:1rem}.page-heading h2{font-size:clamp(2rem,4vw,3.35rem);margin-bottom:0}.page-heading h2:focus-visible{outline:none}.feature-stack{display:grid;gap:1.25rem}.card,.keyboard-panel,.staff-card,.keyboard-intro{background:#fffffff0;border:1px solid #cfcfca;border-radius:20px;padding:clamp(1rem,2.2vw,1.75rem);box-shadow:0 10px 30px #1110d}.page-grid{display:grid;grid-template-columns:265px minmax(0,1fr);gap:1.25rem}.lesson-list{background:#171717;color:#fff;border-radius:var(--radius);padding:1rem;height:max-content;position:sticky;top:1rem}.lesson-list .eyebrow{color:#aaa;padding:.5rem}.lesson-link{display:flex;align-items:center;justify-content:space-between;width:100%;border-color:transparent;background:transparent;color:#bbb;text-align:left;margin:.15rem 0;font-size:.84rem}.lesson-link small{white-space:nowrap;color:#888}.lesson-link:hover,.lesson-link.selected{background:#f5f5f1;color:#111}.lesson-content{min-width:0;display:grid;gap:1.25rem}.practice-callout{background:#eee;border-left:4px solid #222;padding:1rem 1.2rem;margin:1.2rem 0}.practice-callout p:last-child{margin-bottom:0}.note-sequence,.big-notes{font-family:Space Grotesk;font-weight:700;letter-spacing:.08em}.button-row,.toolbar-controls,.preset-row,.metro-actions{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}.feedback{min-height:1.8rem;border-left:3px solid #777;padding-left:.8rem;margin:1rem 0 0;font-weight:650}.feedback.success{border-color:#111;background:repeating-linear-gradient(135deg,#fff,#fff 6px,#eee 6px 12px)}.feedback.error{border-style:dashed}.keyboard-panel{padding:1.25rem}.keyboard-toolbar{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;margin-bottom:1rem}.keyboard-toolbar h3{font-size:1.35rem;margin:0 0 .25rem}.piano-instruction{color:#555;margin:0;font-size:.86rem}.keyboard-actions{display:flex;align-items:end;gap:.75rem}.piano-view-toggle{display:flex;padding:.25rem;background:#e5e5df;border-radius:11px}.piano-view-toggle button{min-height:44px;padding:.45rem .7rem;border:0;background:transparent;box-shadow:none}.piano-view-toggle button.is-on{background:#111;color:#fff}.range-controls{display:grid;grid-template-columns:auto auto;gap:.5rem}.range-controls span{grid-column:1/-1;color:#666;font-size:.72rem;font-weight:800;text-align:center}.toolbar-controls button.is-on{background:#111;color:#fff}.piano-scroll{overflow-x:auto;overscroll-behavior-inline:contain;border:9px solid #181818;border-radius:14px;background:#181818;scrollbar-width:none;-ms-overflow-style:none}.piano-scroll::-webkit-scrollbar{display:none;width:0;height:0}.piano-scroll.full-piano-scroll{overflow:hidden}.piano{--white-count: 29;position:relative;width:max(100%,calc(var(--white-count) * 54px));height:clamp(270px,32vw,390px);touch-action:none;user-select:none}.piano.full-piano-view{width:100%;height:clamp(190px,22vw,270px);pointer-events:none}.piano-key{position:absolute;top:0;margin:0;border-radius:0;min-height:0;padding:0;box-shadow:none!important;transition:background .08s,transform .08s}.piano-key .key-label{position:absolute;bottom:.7rem;left:50%;width:92%;transform:translate(-50%);display:grid;gap:.18rem;justify-items:center;line-height:1.05}.piano-key .key-label strong,.piano-key .key-label small{max-width:100%;padding:.13rem .22rem;overflow:hidden;border-radius:4px;text-overflow:ellipsis}.piano-key .key-label strong{font-size:.78rem;font-weight:850}.piano-key .key-label small{font-size:.54rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}.white-key .key-label strong,.white-key .key-label small{color:#111;background:#ffffffeb;box-shadow:0 0 0 1px #1112}.black-key .key-label strong,.black-key .key-label small{color:#fff;background:#111111f0;box-shadow:0 0 0 1px #fff4}.piano.full-piano-view .piano-key:not(.highlight-key):not(.selected-key) .key-label{display:none}.piano.full-piano-view .piano-key .key-label strong{padding:.08rem .12rem;font-size:clamp(.48rem,.8vw,.66rem)}.white-key{height:100%;width:calc(100% / var(--white-count));left:calc(var(--key-index) * 100% / var(--white-count));background:linear-gradient(90deg,#fff,#f0f0ec);border:1px solid #777;border-top:0;color:#222;z-index:1}.black-key{height:63%;width:calc(64% / var(--white-count));left:calc(var(--key-index) * 100% / var(--white-count));background:linear-gradient(90deg,#111,#444,#080808);border:1px solid #000;color:#fff;z-index:2;border-radius:0 0 6px 6px}.piano-key.highlight-key{background-image:repeating-linear-gradient(135deg,#f4f4f1,#f4f4f1 8px,#c8c8c2 8px 14px);color:#111;box-shadow:inset 0 -8px #555!important}.black-key.highlight-key{background-image:repeating-linear-gradient(135deg,#333,#333 8px,#666 8px 14px);color:#fff;box-shadow:inset 0 -8px #aaa!important}.piano-key.root-key{box-shadow:inset 0 -15px #111!important}.black-key.root-key{box-shadow:inset 0 -15px #eee!important}.piano-key.active-key{background:#9d9d98;transform:translateY(5px)}.black-key.active-key{background:#777}.piano-key.selected-key{outline:3px dashed #111;outline-offset:-7px}.black-key.selected-key{outline-color:#fff;outline-offset:-5px}.piano-options{margin-top:.8rem;border-top:1px solid #ddd;padding:.7rem .2rem 0}.piano-options summary,.chord-options summary{width:max-content;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;color:#444;font-size:.82rem;font-weight:800}.piano-options[open] summary,.chord-options[open] summary{margin-bottom:.75rem}.keyboard-status{font-size:.77rem;color:#555;margin:.65rem 0 0;padding:0}.explorer{display:grid;gap:1.25rem}.segmented{display:inline-flex;background:#e4e4df;border-radius:12px;padding:.25rem;width:max-content}.segmented button{box-shadow:none;border:0;background:transparent}.segmented button[aria-pressed=true]{background:#111;color:#fff}.spelling-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .8rem;background:#e7e7e2;border:1px solid #cecec8;border-radius:14px}.spelling-bar>span{font-size:.78rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.9rem}.section-label{display:block;margin-bottom:.35rem;color:#666;font-size:.7rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.explorer-bar{display:grid;gap:1.2rem}.explorer-title,.chord-keys-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.explorer-title h3,.chord-keys-heading h3{margin:0;font-size:clamp(1.45rem,3vw,2.15rem)}.explorer-title h3 small{color:#666;font-family:Manrope,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:0}.compact-form{grid-template-columns:repeat(2,minmax(170px,260px))}.chord-root-controls{display:grid;grid-template-columns:auto minmax(180px,300px);align-items:end;gap:1rem}.spelling-control .section-label{margin-bottom:.35rem}.chord-browser{display:grid;gap:.7rem;padding:1rem;border:1px solid #d1d1cb;border-radius:14px;background:#f4f4f0}.chord-browser-heading,.chord-stepper,.chord-category-row,.chord-chip-row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.chord-browser-heading{justify-content:space-between}.chord-browser-heading strong{font-family:Space Grotesk,sans-serif}.chord-chip-row{padding-top:.7rem;border-top:1px solid #d5d5cf}.chord-chip-row button.selected{background:#111;color:#fff;border-color:#111}.note-strip{display:grid;grid-template-columns:repeat(8,minmax(58px,1fr));gap:.45rem}.note-strip button{min-width:64px;display:grid;gap:.1rem;justify-items:center;box-shadow:none}.note-strip button strong{font:750 1rem Space Grotesk,sans-serif}.note-strip button span{color:#666;font-size:.65rem}.note-strip button.root-note{background:#111;color:#fff;border-color:#111}.note-strip button.root-note span{color:#bbb}.scale-help,.chord-instruction{margin:0;color:#555;font-size:.86rem}.info-grid{display:grid;grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);gap:1.25rem}.selected-note-card{display:grid;align-content:start}.selected-note{display:flex;align-items:center;gap:1.25rem;margin:.3rem 0 1.5rem}.selected-note>strong{font:750 clamp(3.2rem,7vw,5.5rem)/.9 "Space Grotesk",sans-serif;letter-spacing:-.06em}.selected-note>div{display:grid;color:#555;font-weight:750}.selected-note small{color:#6b6b6b;font-weight:600}.inline-settings{min-width:0;margin-top:auto}.chord-keys-card{background:#eee}.chord-options{border-top:1px solid #ddd;padding-top:.8rem}.chord-options label{max-width:520px}.chord-options .hint{margin-top:.7rem}.chord-key-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:.75rem;margin-top:1rem}.chord-key-list button{min-height:84px;display:grid;gap:.15rem;align-content:center;justify-items:center;box-shadow:none}.chord-key-list button strong{font:750 1.65rem Space Grotesk,sans-serif}.chord-key-list button span{color:#666;font-size:.72rem;text-transform:uppercase}.chord-key-list button.root-tone{background:#111;color:#fff;border-color:#111}.chord-key-list button.root-tone span{color:#bbb}.theory-result{border-top:1px solid var(--line);padding-top:1.25rem;display:flex;justify-content:space-between;align-items:end;gap:1rem}.staff-card{margin:0;padding:1rem}.staff{display:block;width:100%;max-height:250px}.staff line{stroke:#333;stroke-width:1.4}.staff ellipse{fill:#111}.staff .clef{font-family:Bravura;font-size:62px}.staff .bass{font-size:50px}.staff .accidental{fill:#111;font:700 20px Space Grotesk,sans-serif}.staff .ledger{stroke-width:1.8}.staff-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.65rem}.staff-picker-heading .section-label{margin-bottom:.15rem}.staff-picker-heading p{margin:0;color:#555;font-size:.8rem}.staff-selected-note{min-width:74px;padding:.45rem .7rem;border-radius:10px;background:#111;color:#fff;font:750 1.25rem Space Grotesk,sans-serif;text-align:center}.staff-graphic{position:relative;overflow:hidden;border:1px solid #deded8;border-radius:14px;background:#fdfdfb;transition:background .15s}.staff-picker .staff-graphic:hover{background:#f5f5f1}.staff-note-button{position:absolute;width:44px;min-height:44px;display:grid;place-items:center;padding:0;transform:translate(-50%,-50%);border-color:transparent;border-radius:50%;background:transparent;box-shadow:none!important}.staff-note-button.is-selected{border-color:transparent;background:transparent}.staff-note-button.is-selected:after{content:"";width:28px;height:28px;border:2px solid #111;border-radius:50%}.staff-note-button:hover,.staff-note-button:focus-visible{border-color:#111;background:#bbb7}.staff.is-pickable{cursor:crosshair}.staff.is-pickable:focus-visible{outline:3px solid #111;outline-offset:-3px}.staff-picker-footer{margin-top:.8rem;padding-top:.75rem;border-top:1px solid #deded8}.staff-pick-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.staff-pick-controls button{display:grid;gap:.05rem;justify-items:center;padding:.45rem .35rem;box-shadow:none}.staff-pick-controls button strong{font:750 .92rem Space Grotesk,sans-serif}.staff-pick-controls button small{color:#666;font-size:.64rem}.staff-card figcaption{margin-top:.45rem;text-align:center;color:#555;font-size:.82rem}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.65rem;margin:1.25rem 0}.trainer-intro h3{margin:0 0 .35rem}.trainer-intro p{margin-bottom:0}.mode-card{display:grid;gap:.12rem;text-align:left;min-height:105px;align-content:center}.mode-card small{color:#6b6b6b;font-size:.64rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.mode-card span{font-size:.78rem;color:#666;font-weight:500}.mode-card.selected{background:#111;color:#fff}.mode-card.selected span,.mode-card.selected small{color:#bbb}.rhythm-practice>p{margin:1rem 0 .5rem;font-weight:700}.question-panel{border-top:1px solid var(--line);margin-top:1rem;padding-top:1.25rem}.session-line{display:flex;flex-wrap:wrap;justify-content:space-between;color:#666;font-size:.78rem;font-weight:750}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:.6rem;margin-top:1rem}.tap-button{min-height:70px;min-width:160px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0}.stat-grid>div{border:1px solid var(--line);padding:1rem;border-radius:12px;display:grid;text-align:center}.stat-grid strong{font:700 clamp(1.5rem,4vw,2.4rem)/1 "Space Grotesk"}.stat-grid span{font-size:.75rem;color:#666}.metro-layout{max-width:820px;margin:auto}.metro-card{text-align:center}.metro-card .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));text-align:left}.pulse-display{width:110px;height:110px;border:8px solid #ddd;background:#111;color:#fff;border-radius:50%;display:grid;place-items:center;margin:1rem auto}.pulse-display span{font:700 3rem Space Grotesk}.pulse-display.pulsing{border-color:#888}.beat-text{font-weight:800;min-height:1.7rem}.tempo-readout{display:flex;align-items:end;justify-content:center;gap:.7rem}.tempo-readout label{grid-template-columns:100px auto;align-items:end}.tempo-readout label span{grid-column:1/-1}.tempo-readout input{text-align:center;font:700 2rem Space Grotesk}.tempo-readout strong{padding-bottom:.7rem}.tempo-slider{max-width:650px}.preset-row{justify-content:center;margin-bottom:1rem}.preset-row button{font-size:.76rem}.preset-row button strong{font-size:.95rem}.beat-dots{display:flex;justify-content:center;gap:.55rem;min-height:18px;margin:-.3rem 0 1rem}.beat-dots i{width:11px;height:11px;border:2px solid #777;border-radius:50%;background:transparent}.beat-dots i.first{border-color:#111;border-width:3px}.beat-dots i.current{background:#111}.metro-actions{justify-content:center;margin-top:1rem}.completion-list,.skill-table{display:grid}.completion-list>div,.skill-table>div{display:grid;grid-template-columns:30px 1fr auto;gap:.5rem;padding:.75rem 0;border-bottom:1px solid var(--soft)}.skill-table>div{grid-template-columns:1fr auto 60px}.recommendation{margin-top:1rem;padding:1rem;background:#eee;border-radius:10px}.danger-zone{border-style:dashed}.keyboard-intro{display:flex;justify-content:space-between;gap:2rem}.keyboard-intro>div:first-child{max-width:700px}.sound-settings{min-width:220px;display:grid;gap:.5rem}footer{background:#111;color:#aaa;padding:2rem;text-align:center}footer p{color:#aaa;margin:0}.global-status{position:fixed;z-index:50;bottom:max(.75rem,env(safe-area-inset-bottom));right:.75rem;background:#111;color:#fff;border:1px solid #666;padding:.45rem .75rem;border-radius:999px;font-size:.72rem;box-shadow:var(--shadow)}@media(max-width:760px){.site-header{justify-content:flex-start}.site-header nav{width:100%}.site-header ul{justify-content:safe center}.page-grid{grid-template-columns:1fr}.lesson-list{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-list .eyebrow{grid-column:1/-1}.lesson-link{align-items:flex-start}.lesson-link small{display:none}.keyboard-toolbar,.theory-result,.keyboard-intro,.explorer-title,.chord-keys-heading{display:grid}.keyboard-actions{display:grid;align-items:stretch}.piano-view-toggle button{flex:1}.info-grid,.chord-root-controls{grid-template-columns:1fr}.note-strip{grid-template-columns:repeat(4,1fr)}.toolbar-controls{display:grid;grid-template-columns:repeat(2,1fr)}.sound-settings{min-width:0}.global-status{position:static;border-radius:0;text-align:center}.piano{width:max(100%,calc(var(--white-count) * 48px));height:285px}.piano.full-piano-view{width:100%;height:205px}.main-content{padding-bottom:2rem}}@media(max-width:430px){.site-header{padding:max(.5rem,env(safe-area-inset-top)) .65rem .5rem}.site-header nav a{min-height:44px;padding:.55rem .62rem;font-size:.76rem}.compact-form,.chord-root-controls{grid-template-columns:1fr}.note-strip button{min-width:0}.explorer-title .button-row{display:grid;grid-template-columns:repeat(2,1fr)}.explorer-title .button-row button:first-child,.chords-page .explorer-title .button-row button{grid-column:1/-1}.metro-card .form-grid{grid-template-columns:1fr}.spelling-bar{align-items:stretch;flex-direction:column}.spelling-bar .segmented,.spelling-bar .segmented button{width:100%}.chord-stepper{display:grid;grid-template-columns:1fr 1fr;width:100%}.staff-picker-heading{align-items:flex-start}.staff-picker .staff{height:220px;max-height:none}.staff-pick-controls,.chord-key-list{grid-template-columns:repeat(2,1fr)}.lesson-list,.answer-grid,.stat-grid{grid-template-columns:1fr}.completion-list>div{grid-template-columns:24px 1fr}.completion-list strong{grid-column:2}.toolbar-controls{grid-template-columns:1fr 1fr}.card{padding:1rem}.tempo-readout label{grid-template-columns:80px auto}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media(forced-colors:active){button,.card,.keyboard-panel,.piano-key{forced-color-adjust:auto}[aria-pressed=true],.site-header [aria-current=page],.chord-chip-row button.selected{outline:2px solid CanvasText;outline-offset:-4px}.piano-key.highlight-key{outline:4px dashed Highlight}.piano-key.root-key{outline:5px double Highlight}.piano-key.active-key{outline:5px solid Highlight}:focus-visible,.site-header :focus-visible,.lesson-list :focus-visible{outline-color:Highlight;box-shadow:none}}