.sl-page{max-width:1000px;margin:24px auto 48px;padding:0 16px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#f7f4df}
.sl-hero,.sl-panel{background:#193f32;border:1px solid #416451;border-radius:16px;padding:24px;margin-top:16px}
.sl-hero h1{color:#ffdb62;font-family:Georgia,serif;font-size:clamp(32px,5vw,48px);margin:4px 0 12px}.sl-hero p{margin-bottom:0}.sl-eyebrow{font-size:12px;letter-spacing:.16em;font-weight:bold}
.sl-page h2{color:#ffdb62;font-size:24px}.sl-toolbar,.sl-modes,.sl-hud{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}.sl-modes{justify-content:flex-start;margin:20px 0}.sl-page button,.sl-page select,.sl-page summary{min-height:44px;font:inherit}.sl-page button,.sl-page select{border:1px solid #829b83;border-radius:8px;padding:10px 16px;background:#f7f4df;color:#193f32;cursor:pointer}.sl-page button:disabled{cursor:not-allowed;opacity:.5}.sl-page button:focus-visible,.sl-page select:focus-visible,.sl-page summary:focus-visible{outline:3px solid #edb546;outline-offset:4px}.sl-page .sl-primary{background:#ffdb62;border-color:#ffdb62;font-weight:bold}.sl-fields{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:16px}.sl-fields label{display:grid;gap:8px}.sl-fields select{width:100%}.sl-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.sl-levels button{text-align:left;display:grid;gap:8px}.sl-levels button[aria-pressed=true]{background:#ffdb62;box-shadow:0 0 0 2px #ffdb62}.sl-small{font-size:12px;line-height:1.7}.sl-page details{margin-top:20px}.sl-page summary{cursor:pointer}.sl-hud{margin:24px 0 12px;align-items:center}.sl-hud span{font-size:13px}.sl-arena{display:grid;grid-template-columns:1fr 240px;gap:28px;background:#f7f4df;color:#193f32;border-radius:12px;padding:24px;margin-top:16px}.sl-ladder{position:relative;height:640px;border-left:3px solid #8b9a7b;border-right:3px solid #8b9a7b;margin:8px 16px}.sl-page .sl-rung{position:absolute;left:-12px;right:-12px;min-height:44px;height:44px;padding:6px 12px;transform:translateY(50%);border:1px solid #91a289;background:#e8ebd8;display:flex;justify-content:space-between;align-items:center}.sl-page .sl-rung:disabled{border-style:dashed;opacity:.48;background:transparent}.sl-page .sl-rung[aria-pressed=true]{background:#ffdb62;border:2px solid #193f32;font-weight:bold}.sl-page .sl-rung.sl-correct{outline:3px solid #2f8860;outline-offset:2px}.sl-character{font-size:25px;display:inline-block}.sl-bounce .sl-character{animation:sl-bounce .45s ease-in-out 2}@keyframes sl-bounce{50%{transform:translateY(-12px) rotate(-12deg)}}.sl-actions{display:flex;flex-direction:column;gap:12px;justify-content:center}.sl-actions p{line-height:1.65}.sl-page progress{display:block;width:100%;height:10px;accent-color:#ffdb62}.sl-page [hidden]{display:none!important}#sl-feedback{min-height:24px;margin-bottom:0;color:#ffdb62}#sl-error{color:#ffc8ac}#sl-result{text-align:center;padding:40px 0}#sl-result button{margin:6px}
@media(max-width:600px){.sl-hero,.sl-panel{padding:16px}.sl-fields{grid-template-columns:1fr}.sl-levels{grid-template-columns:repeat(2,1fr)}.sl-arena{grid-template-columns:minmax(130px,1fr) 112px;padding:18px 8px;gap:10px}.sl-ladder{height:640px;margin:8px 10px}.sl-actions{gap:10px}.sl-actions button{padding:10px 5px;font-size:12px}.sl-actions .sl-eyebrow{display:none}.sl-actions p{font-size:11px}.sl-hud{gap:8px}.sl-page .sl-rung{font-size:13px}.sl-character{font-size:21px}}
.sl-page .sl-rung.sl-correct{background:#cce9ba;box-shadow:0 0 14px #2f886080}.sl-page .sl-rung.sl-wrong{outline:3px solid #be583b;outline-offset:2px;background:#f4d9c9;box-shadow:0 0 14px #be583b60}.sl-page .sl-rung.sl-bounce{animation:sl-answer-flash .45s ease-out}@keyframes sl-answer-flash{0%{background:#63c47e}100%{background:#cce9ba}}
.sl-modes button[aria-pressed=true]{background:#ffdb62;border-color:#ffdb62}.sl-slots{display:flex;gap:8px;justify-content:center;margin:18px 0}.sl-slot{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px dashed #91a289;border-radius:8px;color:#f7f4df;padding:8px}.sl-slot-filled{background:#cce9ba;color:#193f32;border-style:solid}.sl-slot-wrong{background:#f4d9c9;color:#833920;border:2px solid #be583b}
#sl-sound{margin-left:auto}
/* Presentation-only play layout. Keep setup/results and all pitch coordinates
   unchanged. At 576px, the existing 92%-octave span provides 44.16px per
   semitone, so even neighboring chromatic rungs retain 44px hit targets. */
.sl-page:has(#sl-game:not([hidden])){
  max-width:880px;
  margin:6px auto 16px;
  padding:0 12px;
}
.sl-page:has(#sl-game:not([hidden]))>.hub-back{display:none}
.sl-page:has(#sl-game:not([hidden]))>.sl-hero{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.sl-page:has(#sl-game:not([hidden])) .sl-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  grid-template-rows:44px auto 10px auto minmax(0,1fr) auto;
  height:max(668px,calc(100dvh - 88px));
  max-height:816px;
  gap:8px 20px;
  padding:10px;
  margin:0;
  isolation:isolate;
}
.sl-page:has(#sl-game:not([hidden])) .sl-panel::before{
  content:"";grid-column:1/-1;grid-row:2/7;
  background:#f7f4df;border-radius:12px;z-index:-1;
}
.sl-page:has(#sl-game:not([hidden])) .sl-toolbar{
  grid-column:1/-1;grid-row:1;flex-wrap:nowrap;gap:8px;
}
.sl-page:has(#sl-game:not([hidden])) #sl-game,
.sl-page:has(#sl-game:not([hidden])) .sl-arena{display:contents}
.sl-page:has(#sl-game:not([hidden])) .sl-ladder{
  grid-column:1;grid-row:2/7;align-self:center;
  height:clamp(576px,calc(100dvh - 188px),680px);
  margin:8px 22px;
}
.sl-page:has(#sl-game:not([hidden])) .sl-hud{
  grid-column:2;grid-row:2;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:start;gap:6px;
  margin:14px 14px 0 0;color:#193f32;
}
.sl-page:has(#sl-game:not([hidden])) .sl-hud span{font-size:12px;line-height:1.5}
.sl-page:has(#sl-game:not([hidden])) #sl-clock{
  grid-column:2;grid-row:3;width:calc(100% - 14px);
  height:8px;accent-color:#347153;
}
.sl-page:has(#sl-game:not([hidden])) .sl-slots{
  grid-column:2;grid-row:4;gap:4px;margin:2px 14px 0 0;
  justify-content:flex-start;flex-wrap:wrap;
}
.sl-page:has(#sl-game:not([hidden])) .sl-slot{
  min-width:44px;padding:6px;color:#193f32;
}
.sl-page:has(#sl-game:not([hidden])) .sl-actions{
  grid-column:2;grid-row:5;margin-right:14px;gap:8px;
  justify-content:center;color:#193f32;
}
.sl-page:has(#sl-game:not([hidden])) .sl-actions p{margin:0;line-height:1.5}
.sl-page:has(#sl-game:not([hidden])) .sl-actions button{
  min-height:44px;padding:6px 10px;font-size:14px;line-height:1.35;
}
.sl-page:has(#sl-game:not([hidden])) .sl-actions #sl-instruction{font-size:14px}
.sl-page:has(#sl-game:not([hidden])) .sl-actions .sl-eyebrow{display:none}
.sl-page:has(#sl-game:not([hidden])) #sl-feedback{
  grid-column:2;grid-row:6;margin:0 14px 14px 0;
  min-height:24px;color:#193f32;font-size:12px;line-height:1.5;
}
.sl-page:has(#sl-game:not([hidden])) #sl-error{grid-column:1/-1;margin:0}
.sl-page:has(#sl-game:not([hidden])) #sl-error:empty{display:none}
@media(max-width:600px){
  .sl-page:has(#sl-game:not([hidden])){padding:0 8px;margin-top:6px}
  .sl-page:has(#sl-game:not([hidden])) .sl-panel{
    grid-template-columns:minmax(0,1fr) 128px;
    grid-template-rows:44px auto auto 8px auto auto auto;
    padding:8px;gap:8px 10px;height:auto;max-height:none;
  }
  .sl-page:has(#sl-game:not([hidden])) .sl-panel::before{grid-row:2/8}
  .sl-page:has(#sl-game:not([hidden])) .sl-hud{
    grid-column:1/-1;grid-row:2;margin:12px 12px 0;gap:4px;
  }
  .sl-page:has(#sl-game:not([hidden])) .sl-slots{
    grid-column:1/-1;grid-row:3;margin:0 12px;justify-content:center;
  }
  .sl-page:has(#sl-game:not([hidden])) #sl-clock{
    grid-column:1/-1;grid-row:4;margin:0 12px;width:calc(100% - 24px);
  }
  .sl-page:has(#sl-game:not([hidden])) .sl-ladder{
    grid-column:1;grid-row:5/7;height:clamp(576px,calc(100dvh - 260px),640px);
    margin:8px 18px;
  }
  .sl-page:has(#sl-game:not([hidden])) .sl-actions{
    grid-column:2;grid-row:5/7;margin-right:10px;
  }
  .sl-page:has(#sl-game:not([hidden])) .sl-actions button{font-size:13px}
  .sl-page:has(#sl-game:not([hidden])) .sl-actions p{font-size:12px}
  .sl-page:has(#sl-game:not([hidden])) #sl-feedback{
    grid-column:1/-1;grid-row:7;margin:0 12px 12px;
  }
}
@media(prefers-reduced-motion:reduce){.sl-bounce .sl-character,.sl-page .sl-rung.sl-bounce{animation:none}}