:root{color-scheme:dark;--bg:#101423;--card:#1a2033;--line:#303950;--muted:#b6bfd3;--accent:#ffbe59}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f5f7ff;font:16px/1.65 system-ui,sans-serif}header{max-width:1150px;margin:auto;padding:24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{display:flex;gap:12px;font-size:28px;color:var(--accent);font-weight:800}.brand span{font-size:20px;color:white;line-height:1.3}.brand small{display:block;font-size:14px;color:var(--muted)}main{max-width:1100px;margin:auto;padding:32px 24px}h1{font-size:clamp(28px,5vw,44px);line-height:1.2;margin:10px 0}h2{font-size:26px;line-height:1.4;margin:10px 0 20px}h3{font-size:18px;margin:0 0 12px}p{margin:8px 0;color:var(--muted)}.intro{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:30px}.eyebrow{color:var(--accent);font-size:14px;font-weight:700}.progressbox{min-width:200px}progress{display:block;width:100%;height:8px;margin:10px 0;accent-color:var(--accent)}small{font-size:14px;color:var(--muted)}nav{display:flex;gap:8px;margin:20px 0 28px}button,select,input{font:inherit}button{border:1px solid var(--line);background:#222b42;color:#fff;border-radius:10px;padding:10px 18px;cursor:pointer;min-height:44px}button:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button.active,.primary{background:var(--accent);color:#171a25;border-color:var(--accent);font-weight:700}button:disabled{opacity:.4;cursor:default}.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;margin-bottom:20px}.tag{color:var(--accent);font-size:14px;font-weight:700}.steps{padding-inline-start:24px}.steps li{padding:8px 0}.exercise{border-inline-start:3px solid var(--accent);background:#252b3d;padding:18px;border-radius:8px;margin:20px 0}.exercise p{color:#e5e9f4}.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:24px}.check{display:flex;gap:12px;align-items:start;margin:12px 0}.check input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0;margin-top:5px}.chords{display:flex;gap:14px;flex-wrap:wrap}.chord{background:#121728;border-radius:12px;text-align:center;padding:12px;min-width:140px}.chord svg{display:block;width:130px;height:170px}.chord strong{font-size:20px}.note{font-size:14px;color:var(--muted)}.lessonrow{width:100%;display:flex;text-align:start;gap:16px;align-items:center;margin:10px 0;padding:16px}.lessonrow .num{color:var(--accent);font-weight:800;min-width:28px}.lessonrow span:nth-child(2){flex:1}.lessonrow small{display:block}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.strings{display:flex;gap:8px;flex-wrap:wrap;direction:ltr;margin:18px 0}.strings button{flex:1;min-width:58px}.bpm{font-size:46px;font-weight:800;color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent)}footer{color:var(--muted);font-size:14px;text-align:center;padding:26px 0}.status{min-height:24px;color:var(--accent)}.timer{font-size:36px;font-variant-numeric:tabular-nums}.locked{color:var(--muted)}@media(max-width:760px){header{padding:16px}main{padding:24px 16px}.intro{display:block}.progressbox{margin-top:22px}.layout,.grid{grid-template-columns:1fr}.card{padding:20px}nav{gap:6px}nav button{flex:1;padding:10px 8px}.chord{min-width:120px}.chord svg{width:115px}.actions button{flex:1}.intro p{max-width:50ch}}