:root{--bg:#111614;--panel:#1a211d;--line:#334038;--ink:#edf1df;--mute:#a6b2a5;--green:#d8f582}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px system-ui,sans-serif}button,select{font:inherit}button{cursor:pointer}header,main,footer{max-width:1200px;margin:auto;padding:26px 32px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:23px;font-weight:750;letter-spacing:-1px}.logo{color:var(--green);margin-right:10px}nav a{color:var(--mute);text-decoration:none;margin-left:25px;font-size:14px}.tag{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--green)}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(48px,7vw,86px);line-height:1.03;letter-spacing:-3px;margin:20px 0}h1 em{color:var(--green);font-weight:400}.hero{padding:48px 0 38px;display:grid;grid-template-columns:1.7fr 1fr;gap:40px;align-items:center}.hero p{color:var(--mute);max-width:510px;line-height:1.7}.art{border:1px solid var(--line);border-radius:50%;aspect-ratio:1;max-width:265px;width:100%;justify-self:center;display:grid;place-items:center;background:repeating-radial-gradient(circle,transparent 0 23px,#334038 24px 25px);transform:rotate(-12deg)}.art span{font:italic 62px Georgia;background:var(--bg);padding:20px;color:var(--green)}.studio{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}.bar{padding:22px 26px;display:flex;justify-content:space-between;gap:18px;align-items:center;border-bottom:1px solid var(--line)}h2{font-size:20px;margin:0}label{display:block;color:var(--mute);font-size:12px;margin-bottom:8px}.controls{display:flex;flex-wrap:wrap;gap:18px;padding:24px 26px;align-items:end}select{background:#111614;color:var(--ink);padding:12px;border:1px solid #465346;border-radius:8px;min-width:100px}.primary{background:var(--green);color:#182015;border:0;padding:13px 20px;border-radius:8px;font-weight:650}.ghost{background:transparent;color:var(--ink);border:1px solid #53624e;border-radius:8px;padding:11px 17px}.progression{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 26px 26px}.chord{background:#242e26;color:var(--ink);border:1px solid #45523e;border-radius:12px;text-align:left;padding:22px 17px;transition:.2s}.chord:hover,.chord.active{border-color:var(--green);background:#303d29}.roman{color:var(--green);font-size:12px}.symbol{display:block;font:32px Georgia;margin:14px 0}.notes{font-size:13px;color:#bdc6b3}.detail{display:grid;grid-template-columns:1fr 1.1fr;border-top:1px solid var(--line)}.info{padding:27px}.info h3{font:32px Georgia;margin:9px 0}.intervals{line-height:1.9;color:var(--mute);font-size:14px}.piano-wrap{padding:26px;align-self:center}.piano{height:130px;display:flex;position:relative}.white{flex:1;background:#e9eddf;border:1px solid #657060;border-radius:0 0 5px 5px;display:flex;align-items:end;justify-content:center;padding-bottom:12px;color:#526047;font-size:11px}.white.on{background:var(--green)}.black{position:absolute;top:0;width:6%;height:62%;background:#101711;border:1px solid #67735b;border-radius:0 0 4px 4px;z-index:2;color:var(--green);font-size:9px;padding-top:52px;text-align:center}.black.on{background:#7d9b40;color:white}.lower{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:28px 0}.box{border:1px solid var(--line);padding:26px;border-radius:14px}.box p{color:var(--mute);line-height:1.65;font-size:14px}.box select{width:100%;margin-bottom:14px}.spelling{font:30px Georgia;color:var(--green);margin:20px 0}.pill{background:#2c3827;color:var(--green);border-radius:20px;padding:5px 10px;font-size:11px}footer{color:var(--mute);font-size:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between}#status{font-size:12px;color:var(--green)}@media(max-width:700px){header,main,footer{padding:20px}.hero{grid-template-columns:1fr;padding-top:28px}.art{display:none}nav a{margin-left:12px}.progression{grid-template-columns:repeat(2,1fr);padding:0 16px 16px}.detail,.lower{grid-template-columns:1fr}.bar,.controls{padding:18px}.bar{flex-wrap:wrap}.symbol{font-size:28px}footer{gap:15px}}

.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}.lesson-grid details{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--panel)}summary{cursor:pointer;color:var(--green);font-weight:600}details p{font-size:14px;line-height:1.7;color:var(--mute)}.practice-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;margin:24px 0 48px}input{width:100%;background:var(--bg);color:var(--ink);border:1px solid #53624e;border-radius:8px;padding:14px;font:18px system-ui}.practice-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}#question{font-size:22px;line-height:1.5}#feedback{min-height:24px}.sequence{line-height:1.9;font-size:20px!important;color:var(--green)!important}#sequenceChords{display:flex;flex-wrap:wrap;gap:9px}#practiceScore{border-top:1px solid var(--line);padding-top:16px}@media(max-width:800px){.lesson-grid{grid-template-columns:1fr 1fr}.practice-layout{grid-template-columns:1fr}}@media(max-width:500px){.lesson-grid{grid-template-columns:1fr}nav a{font-size:11px;margin-left:8px}}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:20px}.cp-intro{padding:35px 0}.cp-intro h2{font:48px Georgia;margin:16px 0}.cp-intro p{color:var(--mute);line-height:1.7;max-width:620px}.cp-subnav{display:flex;gap:25px;margin-top:25px}.cp-subnav a,.cp-rulegrid a{color:var(--green);font-size:13px}.cp-note{color:var(--mute);font-size:13px;line-height:1.7;padding:0 26px}.cp-scroll{overflow-x:auto}.cp-scroll #cpStaff{min-width:800px}#cpStaff svg{display:block;width:100%;min-width:800px;height:auto}.cp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:16px 26px;min-width:800px}.cp-cell{background:#222d24;border:1px solid #45523e;border-radius:10px;padding:12px 8px}.cp-cell.selected{border-color:var(--green)}.cp-cell.bad{border-color:#f19d80}.cp-cell span{display:block;font-size:11px;color:var(--mute);margin-bottom:10px}.cp-cell select{width:100%;min-width:0;padding:9px 4px;font-size:13px}.cp-cell small{display:block;text-align:center;color:var(--green);margin-top:10px}.cp-tools{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:18px 26px}.cp-tools>div{flex:1;min-width:260px}.cp-results{padding:6px 26px 20px}.cp-results ul{padding-left:20px;margin-top:15px}.cp-results li{font-size:14px;line-height:1.6;margin:10px 0}.cp-results .pass{color:var(--green)}.cp-results .error{color:#ffc1a8}.cp-results .warn{color:#e1d3a1}.cp-analysis{padding:0 26px 24px}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th,td{padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--mute);font-weight:500}.cp-scope{background:#1c261e;border-left:3px solid var(--green);padding:20px 24px;margin:25px 0}.cp-scope p,.cp-source-note{font-size:13px;color:var(--mute);line-height:1.7}.cp-rulegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0}.cp-rulegrid .box{padding:22px}.cp-rulegrid h3{font:24px Georgia}.cp-rulegrid li{font-size:13px;color:var(--mute);line-height:1.65;margin-bottom:9px}.cp-rulegrid ul{padding-left:18px}.cp-rulegrid p{font-size:13px}.cp-source-note{margin-bottom:38px}.cp-example-prompt{font:28px Georgia;margin:0 0 22px}#exSolution{border-top:1px solid var(--line);margin-top:20px;padding-top:15px}header{flex-wrap:wrap;gap:18px}nav{display:flex;flex-wrap:wrap;gap:16px}nav a{margin:0}@media(max-width:900px){.cp-rulegrid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.cp-rulegrid{grid-template-columns:1fr}.cp-intro h2{font-size:38px}.cp-tools{padding:16px}.cp-tools>div{min-width:100%}.cp-results{padding:16px}}