/* First-stage teaching components; shared palette and spacing come from styles.css. */
.learn-prose{font-size:16px;line-height:1.95;margin:20px 0}.learn-prose p+p{margin-top:14px}
.stage-demos{display:grid;gap:16px;margin-top:18px}.stage-demos h2{font-size:17px;margin-bottom:14px}.stage-demos p{font-size:14px;color:var(--muted);line-height:1.75;margin:14px 0 8px}
.learn-control{display:flex;flex-direction:column;gap:12px;margin:20px 0;color:var(--ink);font-size:14px}.learn-control>span{display:flex;align-items:center;justify-content:space-between;gap:12px}.learn-control strong{font-size:13px;font-weight:500;color:var(--accent)}.learn-control input[type=range]{width:100%;height:32px;accent-color:var(--accent)}
.learn-control input:not([type=range]),.learn-control textarea,.note-picks select{width:100%;border:1px solid var(--line);background:var(--surface-soft);color:var(--ink);border-radius:14px;padding:12px;font:inherit;min-height:48px}.learn-control textarea{resize:vertical}
.note-picks select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.neutral-pair{display:flex;justify-content:center;gap:24px;margin:14px 0 24px}.neutral-pair span{display:grid;place-items:center;width:112px;height:92px;border-radius:28px;background:var(--surface-soft);border:1px solid var(--line);color:var(--muted);font-size:14px}
.beat-dots{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:24px 0;min-height:38px}.beat-dot{font-style:normal;display:grid;place-items:center;border-radius:50%;aspect-ratio:1;background:var(--surface-soft);color:var(--muted);font-size:12px;transition:background .1s,transform .1s}.beat-dot.on{background:var(--primary);color:var(--primary-ink);transform:scale(1.08)}.hide-pulse{visibility:hidden}
.tap-pad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;touch-action:manipulation;user-select:none;-webkit-user-select:none;width:100%;min-height:170px;border:1px solid var(--line);border-radius:30px;background:var(--accent-soft);color:var(--ink);margin:20px 0;box-shadow:var(--shadow);transition:transform .08s,background .08s}.tap-pad strong{font-size:19px;font-weight:500}.tap-pad small{color:var(--muted)}.tap-pad.tapped{transform:scale(.975);background:var(--pink)}.tap-pad .icon{width:30px;height:30px;color:var(--accent)}.tap-recap{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.tap-recap p{font-size:14px;line-height:1.8;margin-bottom:14px}.tap-recap .segment{margin-top:16px}
.rhythm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;margin:14px 0}.rhythm-group>span{display:block;text-align:center;color:var(--muted);font-size:12px;margin-bottom:8px}.rhythm-group>div{display:grid;grid-template-columns:1fr 1fr;gap:4px}.rhythm-cell{min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);color:var(--muted);font-size:13px}.rhythm-cell.on{background:var(--pink);color:var(--ink);border-color:#c98dd0}.note-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.note-picks label{display:flex;flex-direction:column;gap:9px;font-size:13px}.note-picks select{padding:10px 8px}
.focus-main>.panel,.focus-main>.suggestion{margin-top:20px}.focus-main>.segment{margin:20px 0}.focus-main>.wide{margin-top:16px}.focus-main .feedback+.button-pair{margin:18px 0}.panel summary{cursor:pointer;font-size:14px;min-height:32px}.panel[open] summary{margin-bottom:16px}.hero .btn.secondary{margin-top:10px}.record-item small{display:inline-block;line-height:1.6;margin-top:7px}.record-item .btn{align-self:center;flex-shrink:0}
@media(max-width:480px){.learn-prose{font-size:15px}.beat-dots{gap:5px}.beat-dot{font-size:11px}.note-picks{gap:7px}.note-picks label{font-size:12px}.note-picks select{font-size:12px}.rhythm-grid{gap:6px}.rhythm-cell{min-height:44px}.tap-pad{min-height:160px}.tap-recap .segment button{font-size:11px;padding:8px 5px}.record-item{gap:6px}.record-item .btn{padding:8px}.panel .list-row .badge{font-size:10px;padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.beat-dot,.tap-pad{transition:none}}
.account-heading{display:flex;gap:12px;align-items:center}.account-heading h2{font-size:16px}.account-heading .minor{overflow-wrap:anywhere}.account-status{margin:16px 0;font-size:13px;color:var(--muted)}.account-error{min-height:24px;margin:12px 0;color:var(--accent)}#account-form .learn-control{margin-top:14px}#account-form input{width:100%;min-height:44px;padding:10px 12px;background:var(--surface-soft);color:var(--ink);border:1px solid var(--line);border-radius:12px}