.surround-course{outline:none}.surround-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}.surround-count{white-space:nowrap;color:#86d7c8;font-size:14px}.surround-start{margin:20px 0 24px;padding:18px 20px;border:1px solid #2c5c56;border-radius:10px;background:#102b2b}.surround-start p{margin-top:0}.surround-lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 20px}.intro-course .surround-lesson{display:grid;grid-template-columns:32px 1fr;gap:6px 10px;align-items:center;padding:16px;text-align:left;background:#101d2b}.surround-lesson.recommended{border-color:#43b7a4}.surround-lesson-number{grid-row:1/4;align-self:start;background:#20374a;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#9edbcc}.surround-lesson strong{color:#e3eaf3;font-size:16px}.surround-lesson-keys{color:#9eafc3;font:15px monospace}.surround-badge{font-size:12px;color:#a8b4c5}.surround-badge.mastered{color:#7affd7}.surround-phases{display:flex;gap:10px;list-style:none;margin:20px 0 14px;padding:0}.surround-phases li{flex:1;text-align:center;padding:10px 6px;border:1px solid #2d4155;border-radius:6px;color:#8d9fb5;font-size:14px}.surround-phases li[aria-current=step]{background:#113932;border-color:#00ffcc;color:#7affd7}.surround-phases li.done{color:#63bfae}.surround-progress{display:flex;align-items:center;gap:12px;font:12px monospace;color:#95afbd}.surround-progress progress{appearance:none;flex:1;width:100%;height:6px;border:0;border-radius:4px;overflow:hidden;background:#243245}.surround-progress progress::-webkit-progress-bar{background:#243245}.surround-progress progress::-webkit-progress-value{background:#46d8bc}.surround-progress progress::-moz-progress-bar{background:#46d8bc}.surround-target{text-align:center;padding:18px 0 6px}.surround-target-label{display:block;color:#8fa7ba;font-size:13px}.surround-target>strong{display:block;font:700 56px/1.3 monospace;color:#82ffe0}.surround-target .intro-instruction{font-size:17px}.surround-target .intro-note{font-size:12px}.surround-sequence{justify-content:center;margin:6px 0 0}.surround-sequence span:nth-child(4n){margin-right:10px}.intro-key.home{outline:2px dashed #ad8aeb;outline-offset:-5px}.surround-key-legend{text-align:center}.surround-no-hint{min-height:130px;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;text-align:center;color:#93a9be}.surround-score{display:flex;flex-direction:column;gap:10px;margin:22px auto;color:#92a9b9}.surround-score strong{font:700 64px/1 monospace;color:#7affd7}.surround-score small{font-size:26px}.surround-summary-actions{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0}.intro-course .surround-summary .intro-primary{margin:0}.surround-placement{display:inline-block;padding:10px 0}.intro-course .surround-lesson:hover{background:#13332f}
.surround-lesson-keys>span{display:block;line-height:1.6}.surround-lesson:last-child{grid-column:1/-1}
@media(max-width:650px){.surround-heading{align-items:flex-start;flex-wrap:wrap;gap:8px}.surround-heading h2{font-size:20px}.surround-heading>button{padding:8px 10px;font-size:12px}.surround-count{font-size:12px}.surround-start{padding:14px}.surround-start .intro-primary{width:100%;font-size:14px;text-align:center}.surround-lessons{grid-template-columns:1fr;gap:10px}.surround-phases{gap:5px}.surround-phases li{font-size:12px;padding:8px 4px}.surround-target>strong{font-size:44px}.surround-target .intro-instruction{font-size:15px}.surround-sequence span{font-size:17px}.surround-sequence span:nth-child(4n){margin-right:6px}.surround-score strong{font-size:52px}.surround-summary-actions{flex-direction:column}.surround-summary-actions button{width:100%}}

.surround-lesson:last-child{grid-column:auto}.surround-lesson:last-child:nth-child(odd){grid-column:1/-1}.surround-heading{gap:10px}.surround-heading h2{font-size:20px;margin-bottom:4px}.surround-heading p{margin:2px 0;font-size:12px}.surround-heading>button{font-size:12px;padding:7px 10px}.surround-start{padding:12px 14px;margin:14px 0 16px}.surround-start p{font-size:13px}.surround-phases{gap:8px;margin:10px 0 8px}.surround-phases li{font-size:12px;padding:7px 5px}.surround-progress{gap:8px;font-size:11px}.surround-target{display:grid;grid-template-columns:42px minmax(0,1fr);gap:2px 12px;align-items:center;text-align:left;max-width:760px;padding:6px 10px;margin:2px auto}.surround-target-label{display:none}.surround-target>strong{grid-row:1/3;display:flex;align-items:center;justify-content:center;min-height:40px;font-size:30px;line-height:1.1;border:1px solid #296357;border-radius:6px;background:#10312c}.surround-target p{margin:0!important}.surround-target .intro-instruction{font-size:16px;line-height:1.45}.surround-target .intro-note{font-size:11px}.surround-sequence{padding:6px;margin:4px 0 0}.surround-sequence span{font-size:16px;padding:3px 4px}.surround-key-legend{position:relative;z-index:2;margin:6px 0 0!important;font-size:11px}.surround-no-hint{min-height:100px;gap:12px}.surround-practice.with-hands{padding-bottom:78px}.surround-summary{padding:24px 8px}
@media(max-width:760px){.surround-target{grid-template-columns:34px minmax(0,1fr);gap:2px 8px;padding:6px 0}.surround-target>strong{font-size:25px;min-height:36px}.surround-target .intro-instruction{font-size:13px}.surround-target .intro-note{font-size:10px}.surround-phases{gap:4px}.surround-phases li{font-size:11px}.surround-practice.with-hands{padding-bottom:54px}.surround-sequence span{font-size:14px;padding:3px}.surround-summary-actions{flex-direction:column}}

/* Reserve the guided sequence and instruction space before showing step two. */
.surround-target{width:fit-content;max-width:min(760px,100%);text-align:center}
.surround-sequence-slot[aria-hidden="true"]{visibility:hidden}
.surround-target{min-height:84px}
@media(min-width:761px) and (max-width:1050px){.surround-target{min-height:100px}}
@media(max-width:760px){.surround-target{min-height:92px}}

/* Keep lesson controls in view without changing key sizes or finger alignment. */
.intro-course:has(.surround-course[data-view="practice"]) .intro-heading{margin-bottom:6px}
.intro-course:has(.surround-course[data-view="practice"]) .intro-heading h1{font-size:23px;line-height:1.3}
.intro-course:has(.surround-course[data-view="practice"]) .intro-heading p{margin:0;line-height:1.5}
.surround-course[data-view="practice"] .surround-heading p{margin:0;line-height:1.4}
.surround-course[data-view="practice"] .surround-heading h2{margin-bottom:0;line-height:1.4}
.surround-course[data-view="practice"] .surround-phases{margin:6px 0}
.surround-course[data-view="practice"] .surround-phases li{padding:5px}
.surround-sequence-slot>.intro-note{margin:4px 0;line-height:1.4!important;font-size:11px}
.surround-course[data-view="practice"] .intro-feedback{min-height:20px;margin:4px 0!important;line-height:1.5}
.surround-course[data-view="practice"] .intro-controls{margin-top:6px;padding-top:6px;position:sticky;bottom:0;z-index:4;background:#111a26;box-shadow:0 -6px 12px #111a26;padding-bottom:6px}
.surround-course:has([data-action="hide-hint"]) .intro-controls{position:static}
@media(min-width:761px){
  .intro-course:has(.surround-course[data-view="practice"]) .intro-panel{padding:14px 24px}
  .surround-course[data-view="practice"] .surround-target{min-height:64px}
  .surround-course[data-view="practice"] .surround-practice{margin:6px auto}
}
@media(min-width:1051px){
  .surround-sequence-slot{display:flex;align-items:center;justify-content:center;gap:12px;min-height:36px}
  .surround-sequence-slot .surround-sequence,.surround-sequence-slot>.intro-note{margin:0}
}
@media(min-width:761px) and (max-height:820px){
  .intro-course:has(.surround-course[data-view="practice"]) .intro-heading>div{display:flex;align-items:baseline;gap:14px}
  .intro-course:has(.surround-course[data-view="practice"]) .intro-heading h1{margin:0}
}
@media(min-width:761px) and (max-width:1050px){
  .surround-course[data-view="practice"] .surround-target{min-height:80px}
}
@media(max-width:760px){
  .intro-course:has(.surround-course[data-view="practice"]) .intro-sidebar{padding:6px}
  .intro-course:has(.surround-course[data-view="practice"]) .intro-steps button{min-height:44px}
  .surround-course[data-view="practice"] .surround-practice{margin:6px auto}
  .surround-course[data-view="practice"] .intro-controls>span{display:none}
}

/* Inline, transparent reactions have their own space; nothing overlays the keys. */
.surround-reaction-slot{height:210px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.surround-reaction-summary{height:auto}
.surround-reaction{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;padding:8px 0;border:0;background:transparent;box-shadow:none;pointer-events:none;font-family:inherit}
.surround-reaction[hidden]{display:none}
.surround-reaction strong{color:#91ffe0;font-size:clamp(19px,3vw,28px);font-weight:800;white-space:nowrap;line-height:1.4}
.surround-reaction.retry strong{color:#ffe0a0}
.surround-reaction-art{display:block;position:relative;overflow:hidden;width:160px;height:160px}
.surround-reaction-art img{position:absolute;inset:0;display:block;width:200%;height:100%;max-width:none}
.surround-reaction.correct.is-reacting .surround-reaction-art{animation:surround-sword-raise .55s ease-in-out infinite alternate}
.surround-reaction.retry.is-reacting .surround-reaction-art{animation:surround-link-cheer .35s ease-in-out infinite alternate}
.surround-reaction.retry .surround-reaction-art img{left:-100%}
@keyframes surround-sword-raise{from{transform:translateY(4px) rotate(-3deg)}to{transform:translateY(-7px) rotate(3deg)}}
@keyframes surround-link-cheer{from{transform:translateY(3px) rotate(-4deg)}to{transform:translateY(-5px) rotate(4deg)}}
@media(max-width:650px){.surround-reaction-slot{height:178px}.surround-reaction-summary{height:auto}.surround-reaction-art{width:132px;height:132px}}
@media(prefers-reduced-motion:reduce){.surround-reaction,.surround-reaction.correct.is-reacting .surround-reaction-art,.surround-reaction.retry.is-reacting .surround-reaction-art{animation:none}}