:root{font-family:Arial,Helvetica,sans-serif;color:#11110f;background:#f2efe6;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #11110f;--paper: #f2efe6;--white: #fffefa;--blue: #3972f6;--green: #20c997;--purple: #8066f6;--coral: #ff644d;--yellow: #ffc933;--line: #11110f;--muted: #67665f}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;border-top:8px solid var(--blue);background:var(--paper)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}.shell{min-height:calc(100vh - 8px);display:flex;align-items:center;justify-content:center;padding:28px}.hero,.practice-card{width:min(100%,600px);min-width:0}.top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.top-row .eyebrow{margin-top:10px}.text-button{border:2px solid var(--ink);border-radius:999px;background:var(--white);padding:8px 14px;color:var(--ink);font-weight:800}.text-button:hover,.text-button:focus-visible{background:var(--yellow)}.eyebrow{margin:0 0 14px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}h1{margin:0;font-size:clamp(52px,12vw,86px);font-weight:900;letter-spacing:-.07em;line-height:.88}.lede{max-width:47ch;margin:26px 0 30px;color:#474640;font-size:18px;font-weight:600;line-height:1.5}.brand-glyphs{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0}.brand-glyphs.compact{gap:6px;margin:0}.glyph{display:grid;place-items:center;width:34px;height:34px;border:5px solid var(--ink);border-radius:50%;color:var(--ink);font-size:17px;font-weight:900;line-height:1}.compact .glyph{width:24px;height:24px;border-width:4px;font-size:11px}.glyph-ring{border-color:var(--blue)}.glyph-triangle{border-color:var(--green);color:var(--green);font-size:13px}.glyph-slash{border-color:var(--purple);color:var(--purple)}.glyph-plus{border-color:var(--coral);background:var(--coral)}.glyph-star{border-color:var(--yellow);background:var(--yellow);font-size:14px}.session-card,.practice-card,.map-card{border:2px solid var(--line);background:var(--white);border-radius:18px}.session-card{display:grid;gap:0;padding:0;margin-bottom:14px;overflow:hidden;background:var(--ink);color:#fff}.session-card div{display:flex;justify-content:space-between;gap:18px;padding:16px 18px;border-bottom:1px solid #3a3a36}.session-card div:last-child{border-bottom:0}.session-card span{color:#aaa9a2}.session-card div:nth-child(1) strong{color:#97b6ff}.session-card div:nth-child(2) strong{color:#68e5be}.session-card div:nth-child(3) strong{color:#ffe174}.history-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.history-strip div{display:grid;gap:2px;min-width:0;padding:14px;border:2px solid var(--ink);border-radius:14px;background:var(--white)}.history-strip div:nth-child(1){background:var(--blue);color:#fff}.history-strip div:nth-child(2){background:var(--yellow)}.history-strip strong{font-size:22px}.history-strip span{color:inherit;font-size:11px;font-weight:700}.primary,.secondary{width:100%;border:2px solid var(--ink);border-radius:999px;padding:15px 20px;font-weight:900}.primary{background:var(--blue);color:#fff}.primary:hover:not(:disabled),.primary:focus-visible{background:#285ed5}.secondary{background:var(--white);color:var(--ink)}.secondary:hover,.secondary:focus-visible{background:var(--yellow)}.home-secondary{margin-top:9px}.practice-card{padding:24px}.progress-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:800}.progress-title{min-width:0}.mobile-context{display:none}.progress-actions{display:flex;align-items:center;gap:9px;white-space:nowrap}.exit-practice{border:2px solid var(--ink);border-radius:999px;background:var(--white);padding:5px 10px;color:var(--ink);font-size:11px;font-weight:900}.exit-practice:hover,.exit-practice:focus-visible{background:var(--yellow)}.progress{height:10px;overflow:hidden;margin:12px 0 26px;border:2px solid var(--ink);border-radius:99px;background:var(--white)}.progress div{height:100%;background:var(--blue)}.curriculum-context{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 10px;color:var(--muted);font-size:12px;font-weight:700}.curriculum-context strong{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border:2px solid var(--ink);border-radius:99px;background:var(--yellow);color:var(--ink)}.chord-symbol{position:relative;display:grid;place-items:center;min-height:190px;margin:14px 0 26px;overflow:hidden;border-radius:16px;background:var(--ink);color:var(--white);text-align:center;font-size:clamp(64px,18vw,110px);font-weight:900;letter-spacing:-.07em}.chord-frequency-chip{position:absolute;top:13px;right:13px;display:grid;gap:1px;min-width:92px;border:2px solid var(--white);border-radius:999px;background:transparent;padding:7px 11px;color:var(--white);font-size:11px;font-weight:900;letter-spacing:0;line-height:1.05}.chord-frequency-chip small{color:#aaa9a2;font-size:8px;font-weight:800}.chord-frequency-chip[aria-expanded=true]{border-color:var(--purple);background:var(--purple)}.chord-frequency-chip[aria-expanded=true] small{color:#fff}.practice-flow>.frequency-options{margin:-10px 0 14px}.step{display:grid;gap:13px}label{font-weight:900}input{width:100%;min-height:60px;border:2px solid var(--ink);border-radius:13px;background:var(--white);padding:15px 16px;outline:none;font-size:18px}input:focus{box-shadow:0 0 0 5px var(--yellow)}.feedback{border:2px solid var(--ink);border-radius:13px;padding:14px 16px;font-weight:800}.correct{background:#bdf2df}.incorrect{background:#ffe28a}.answer-feedback{display:flex;align-items:center;justify-content:space-between;gap:16px}.checkpoint{display:grid;gap:16px}.checkpoint>div{display:grid;gap:3px}.checkpoint span{color:#4f4e48;font-size:13px;font-weight:600}.checkpoint .checkpoint-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.checkpoint-button{min-height:50px;border:2px solid var(--ink);border-radius:999px;padding:12px 16px;color:var(--ink);font-weight:900}.try-again-button{background:var(--blue);color:#fff}.reveal-button{background:var(--white)}.reveal-button:hover,.reveal-button:focus-visible{background:var(--yellow)}.answer-lines{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 24px}.answer-lines span{display:grid;gap:2px}.answer-lines .feedback-title{flex-basis:100%;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.answer-lines small{color:#56544e;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.retry-button{flex:0 0 auto;border:0;border-bottom:2px solid currentColor;background:transparent;padding:4px 0;color:inherit;font-weight:900}.piano-wrap{display:grid;gap:9px;margin-top:2px}.visual-label{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.visual-label small{font-size:9px}.piano{position:relative;height:130px;overflow:hidden;border:2px solid var(--ink);border-radius:12px;background:#fff}.piano-track{position:absolute;inset:0 auto 0 0;width:300%;height:100%}.white-key{position:absolute;top:0;width:4.761905%;height:100%;border-right:2px solid var(--ink);background:#fff}.key-label{position:absolute;right:3px;bottom:7px;left:3px;display:grid;justify-items:center;gap:1px;text-align:center}.key-label strong{font-size:13px;line-height:1}.key-label small{font-size:8px;font-weight:900;line-height:1;text-transform:uppercase}.white-key.active{background:var(--yellow)}.black-key{position:absolute;top:0;z-index:1;width:2.952381%;height:78px;border:2px solid var(--ink);border-top:0;border-radius:0 0 5px 5px;background:var(--ink);color:#fff}.black-key.active{background:var(--purple)}.black-key .key-label{bottom:6px;color:#fff}.black-key .key-label strong{font-size:11px}.black-key .key-label small{font-size:7px}.answer-actions{display:grid;grid-template-columns:54px minmax(150px,1fr);gap:8px}.answer-actions button{min-height:54px;border:2px solid var(--ink);font-weight:900}.repeat-button{border-radius:50%;background:var(--yellow);font-size:25px;line-height:1}.continue-action{min-width:0}.frequency-options{display:grid;overflow:hidden;border:2px solid var(--ink);border-radius:14px;background:var(--white)}.frequency-options-heading{display:grid;gap:3px;padding:15px;border-bottom:2px solid var(--ink);background:var(--ink);color:#fff}.frequency-options-heading span{color:#aaa9a2;font-size:11px;font-weight:700}.frequency-options>button{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:10px 15px;border:0;border-bottom:2px solid var(--ink);background:var(--white);color:var(--ink);text-align:left}.frequency-options>button:last-child{border-bottom:0}.frequency-options>button.selected{background:var(--yellow)}.frequency-options>button span{display:grid;gap:2px}.frequency-options>button small{color:var(--muted);font-size:11px;font-weight:700}.frequency-options>button i{font-size:19px;font-style:normal}.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:30px 0 14px}.score-grid div{display:grid;gap:4px;min-height:116px;padding:18px;border:2px solid var(--ink);border-radius:14px;background:var(--white)}.score-grid div:nth-child(1){background:var(--blue);color:#fff}.score-grid div:nth-child(2){background:var(--yellow)}.score-grid div:nth-child(3){background:var(--green)}.score-grid strong{font-size:32px}.score-grid span{color:inherit;font-size:13px;font-weight:700}.review{display:flex;justify-content:space-between;gap:16px;margin:14px 0 22px;padding:18px;border:2px solid var(--ink);border-radius:14px;background:var(--ink);color:#fff}.review span{color:#aaa9a2}.summary-actions{display:grid;gap:9px}.onboarding-shell{align-items:flex-start;padding-top:clamp(36px,8vh,82px)}.onboarding-card{width:min(100%,860px);min-width:0}.onboarding-card h1{max-width:760px}.onboarding-brand{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:58px;padding-bottom:14px;border-bottom:2px solid var(--ink)}.onboarding-brand>strong{font-size:19px;letter-spacing:-.04em}.pathway-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pathway-option{display:grid;gap:11px;min-height:180px;padding:18px;border:2px solid var(--ink);border-top-width:10px;border-radius:14px;background:var(--white);color:inherit;text-align:left}.pathway-option:nth-child(1){border-top-color:var(--blue)}.pathway-option:nth-child(2){border-top-color:var(--green)}.pathway-option:nth-child(3){border-top-color:var(--purple)}.pathway-option:nth-child(4){border-top-color:var(--coral)}.pathway-option:nth-child(5){border-top-color:var(--yellow)}.pathway-option:hover,.pathway-option:focus-visible{background:var(--yellow)}.pathway-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.pathway-heading strong{font-size:23px;letter-spacing:-.035em}.pathway-heading small{padding:5px 8px;border:2px solid var(--ink);border-radius:99px;background:var(--yellow);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.pathway-option>span:not(.pathway-heading){color:#484741;font-weight:600;line-height:1.42}.pathway-option em{align-self:end;color:var(--muted);font-size:12px;font-style:normal;font-weight:900}.onboarding-note{margin:18px 2px 0;color:var(--muted);font-size:12px;font-weight:700}.map-shell{align-items:flex-start}.map-card{width:min(100%,1080px);min-width:0;padding:26px}.map-card h1{font-size:clamp(48px,8vw,72px)}.map-intro{max-width:70ch;margin:22px 0;color:#4f4e48;font-size:16px;font-weight:600;line-height:1.5}.map-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:18px 0}.map-summary div{display:grid;gap:3px;padding:15px;border:2px solid var(--ink);border-radius:13px;background:var(--white)}.map-summary div:nth-child(1){background:var(--blue);color:#fff}.map-summary div:nth-child(2){background:var(--green)}.map-summary strong{font-size:25px}.map-summary span{color:inherit;font-size:12px;font-weight:800}.heat-legend{display:flex;align-items:center;gap:10px;margin:20px 0 11px;color:#4f4e48;font-size:12px;font-weight:900}.heat-ramp-wrap{position:relative;display:block;width:min(250px,52vw);height:14px}.heat-ramp{display:block;width:100%;height:14px;border:2px solid var(--ink);border-radius:99px;background:linear-gradient(90deg,#fff,#e7f2df,#d0e9c5,#b7ddaa,#98ce87,#55b849)}.heat-user-range{position:absolute;top:-5px;bottom:-5px;z-index:1;border:3px solid var(--yellow);border-radius:0;pointer-events:none}.chord-table-wrap{max-width:100%;overflow-x:auto;border:2px solid var(--ink);border-radius:13px;background:var(--paper);outline:none}.chord-table-wrap:focus{box-shadow:0 0 0 5px var(--yellow)}.chord-table{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;text-align:left}.chord-table th,.chord-table td{padding:7px;border-bottom:2px solid var(--ink)}.chord-table thead th{padding:12px 9px;background:var(--ink);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.chord-table tbody th{position:sticky;left:0;z-index:2;width:54px;background:var(--paper);text-align:center}.chord-table tr:last-child th,.chord-table tr:last-child td{border-bottom:0}.mastery-cell{display:grid;gap:3px;min-width:160px;min-height:76px;padding:11px;border:2px solid var(--ink);border-radius:10px}.mastery-cell.unpracticed{opacity:.4;filter:saturate(.25)}.mastery-cell strong{font-size:17px}.mastery-cell span,.mastery-cell small{color:#4e4c46;font-size:11px}.map-note{margin:13px 2px 0;color:var(--muted);font-size:12px;font-weight:700}.settings-card{display:grid;gap:30px}.settings-card h1{font-size:clamp(44px,10vw,64px)}fieldset{min-width:0;margin:0;padding:0;border:0}legend{padding:0;font-size:18px;font-weight:900}.field-help{margin:5px 0 13px;color:var(--muted);font-size:13px;font-weight:600}.settings-pathways{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-pathways button{display:grid;gap:3px;border:2px solid var(--ink);border-radius:12px;background:var(--white);padding:12px;color:inherit;text-align:left}.settings-pathways button span{color:var(--muted);font-size:10px;font-weight:700}.settings-pathways button.selected{background:var(--purple);color:#fff}.settings-pathways button.selected span{color:#fff}.option-list{display:grid;border-top:2px solid var(--ink)}.check-option{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 2px;border-bottom:2px solid var(--ink);font-weight:800}.check-option small{margin-left:5px;color:var(--muted);font-weight:600}.check-option input{width:22px;min-height:22px;height:22px;accent-color:var(--blue)}.length-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.length-options button{border:2px solid var(--ink);border-radius:999px;background:var(--white);padding:12px 6px;font-weight:900}.length-options button.selected{background:var(--yellow)}.frequency-settings-list{display:grid;border-top:2px solid var(--ink)}.frequency-settings-list label{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 2px;border-bottom:2px solid var(--ink)}.frequency-settings-list strong{font-size:19px}.frequency-settings-list select{min-width:156px;border:2px solid var(--ink);border-radius:999px;background:var(--white);padding:9px 34px 9px 12px;color:var(--ink);font-weight:800}.frequency-settings-list select:focus{outline:0;box-shadow:0 0 0 4px var(--yellow)}.empty-frequency{margin:12px 0 0;padding:14px;border:2px dashed var(--ink);border-radius:12px;color:var(--muted);font-size:13px;font-weight:700}@media(max-width:620px){.shell{padding:16px}.practice-card,.map-card{padding:17px}.pathway-grid{grid-template-columns:1fr}.pathway-option{min-height:150px}.onboarding-brand{margin-bottom:40px}.settings-pathways{grid-template-columns:1fr}.score-grid{grid-template-columns:1fr 1fr}.chord-symbol{min-height:164px}.practice-label{display:none}.mobile-context{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.curriculum-context{display:none}.progress{margin-bottom:16px}.chord-frequency-chip{top:10px;right:10px;min-width:82px;padding:6px 9px;font-size:10px}}@media(max-width:430px){.history-strip{gap:5px}.history-strip div{padding:10px 8px}.history-strip strong{font-size:19px}.session-card div{align-items:flex-start;flex-direction:column;gap:3px}.score-grid{grid-template-columns:1fr}.answer-feedback{align-items:flex-start;flex-direction:column}.checkpoint .checkpoint-actions{grid-template-columns:1fr}.answer-actions{grid-template-columns:54px minmax(0,1fr)}.piano{height:112px}.black-key{height:67px}.map-summary div{padding:11px 9px}.map-summary strong{font-size:20px}.pathway-heading{align-items:flex-start}.compact .glyph{width:20px;height:20px;border-width:3px}}