/* A viewport-sized workspace. Content changes page or follows the caret;
   the approved hand/keyboard artwork always keeps its original aspect ratio. */
html{height:100%;overflow:hidden}
body{height:var(--app-height,100dvh);min-height:0;overflow:hidden;display:flex;flex-direction:column}
.learn-header{flex:none;width:100%;min-height:52px;padding:9px 24px}
.learn-header nav{gap:18px}
.learn-brand{font-size:21px}
.learn-map,.learn-stage{width:100%;flex:1;min-height:0;margin:0 auto;padding:12px 26px 10px}
.learn-stage{display:grid;grid-template-rows:auto 3px 26px minmax(0,1fr) auto 0 14px;gap:6px}
.learn-stage.typing-only{grid-template-rows:auto 3px 26px minmax(128px,.45fr) 20px minmax(0,1fr) 14px}
.stage-top{grid-row:1;margin:0;min-width:0;gap:10px}
.stage-top h1{font-size:17px;margin-top:3px}
.stage-top-left{min-width:0;gap:12px}
.stage-progress{grid-row:2;margin:0}
.stage-stats{grid-row:3;margin:0;align-items:center;gap:40px}
.stat strong{font-size:21px}
#stageBody{grid-row:4;min-height:0;min-width:0;display:flex;flex-direction:column}
.course-feedback{grid-row:5;min-height:0;margin:0;line-height:1.5;align-self:center;font-size:11px}
.learn-stage>.keyboard-panel{grid-row:6;min-height:0;min-width:0;width:100%;max-width:none;height:100%;margin:0}
.stage-note{grid-row:7;margin:0;line-height:14px;font-size:9px;align-self:end}
#courseKeyboard{height:100%;min-height:0;display:flex;justify-content:center;align-items:start}
.course-keyboard{height:100%;width:100%;max-width:100%;display:block;overflow:hidden}
.typing-only #courseKeyboard{height:100%}
.typing-panel,.typing-panel:has(.typing-intro),.game-typing .typing-panel{height:100%;min-height:0;min-width:0;display:flex;flex-direction:column;padding:12px 22px 18px;border-radius:18px}
.typing-panel-head,.typing-panel:has(.typing-intro) .typing-panel-head{flex:none;margin:0 0 5px;font-size:10px;min-height:14px}
.typing-instruction{flex:none;font-size:17px;line-height:1.5;margin:3px 0 6px}
.typing-instruction kbd{height:29px;line-height:29px;min-width:29px;font-size:20px}
.key-tiles{flex:1;min-height:0;gap:12px;padding:2px 0}
.typing-tile{height:68px;width:64px;font-size:40px;border-radius:12px;flex-shrink:1}
.typing-tile.current{height:80px;width:73px;font-size:50px;border-radius:13px}
.typing-intro{flex:1;min-height:0;gap:24px;padding:5px 0}
.intro-key{width:82px;height:86px;font-size:60px;border-radius:17px;flex-shrink:0}
.typing-intro h2{font-size:17px;line-height:1.6;margin-bottom:5px}
.typing-intro p{font-size:11px;line-height:1.6}
.typing-only .typing-panel::after{position:absolute;right:16px;bottom:5px;font-size:9px;margin:0}
.lesson-text,.game-typing .lesson-text,.travel-layout .lesson-text{flex:1;min-height:0;max-height:none;overflow:hidden;scroll-behavior:auto;scrollbar-width:none;font-size:25px;line-height:1.75;padding:2px 3px 8px}
.lesson-text::-webkit-scrollbar{display:none}
.wrong-badge{flex:none;min-height:0;margin:2px 0 0;font-size:10px;line-height:1.4}
.keyboard-caption{margin:0;min-height:24px;line-height:1.5;font-size:11px}
.learn-stage #stageBody:has(.course-game-panel){display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}
.game-rule-strip{margin:0;padding:7px 15px;min-height:38px;gap:10px;flex-wrap:nowrap}
.game-rule-strip strong{font-size:21px}
#stageBody:has(.course-game-panel)>div:last-child{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:14px;min-height:0;align-items:stretch}
.course-game-panel{min-width:0;min-height:0;container-type:size;display:grid;place-items:center;border:1px solid var(--line);border-radius:19px;background:#e8efdf}
.course-game-canvas,.travel-layout .course-game-canvas{width:min(100cqw,185cqh);height:min(100cqh,54.05cqw);border:0;border-radius:18px}
.travel-layout .course-game-canvas{width:min(100cqw,165cqh);height:min(100cqh,60.6cqw)}
.game-typing,.travel-layout .game-typing{min-width:0;min-height:0;margin:0;display:flex;flex-direction:column;gap:8px}
.game-typing>.typing-panel,.travel-layout .typing-panel{flex:1;min-height:0}
.game-typing .lesson-text{font-size:23px}
.game-typing .input-row{flex:none;margin-top:7px;padding-top:7px;gap:8px}
.input-row label{font-size:10px}
.course-capture{height:32px;min-height:32px;padding:5px 8px}
.game-keyboard{flex:0 1 42%;height:42%;width:100%;min-height:115px;max-width:none;margin:0;display:flex;flex-direction:column}
.game-keyboard #courseKeyboard{flex:1;min-height:0}
.game-keyboard .course-keyboard{margin:0}
.fishing-targets{flex:1;min-height:0;align-content:center;flex-wrap:wrap;font-size:26px}
.game-start-card{padding:10px;border-radius:18px}
.game-start-card>div{max-width:390px;padding:18px 22px}
.game-start-card h2{font-size:23px;margin:8px 0}
.game-start-card p{margin:8px 0 13px}
.learn-stage[data-mode=rest] #stageBody{justify-content:center}
.breathing-rest{height:auto;max-height:100%;padding:20px}
.breathing-rest h2{font-size:25px;margin:12px 0}
.breathing-rest p{margin:12px 0;line-height:1.8}
.rest-circle{height:75px;width:75px;margin:0 auto 12px}
.rest-tips{margin-bottom:18px}
.learn-dialog{max-height:calc(var(--app-height,100dvh) - 20px);padding:24px;overflow:auto}
.learn-dialog h2{font-size:25px;margin:12px 0}
.learn-dialog p{margin:10px 0}
.dialog-actions{margin-top:18px}
.result-symbol{font-size:39px}
.result-stars{font-size:23px;margin:6px 0}
.result-stats{margin:15px 0;padding:12px 0}
.learn-toast{bottom:16px;padding:9px 17px}

/* The map shows a complete page of lessons, with buttons for further pages. */
.learn-map{display:grid;grid-template-rows:138px 34px 80px minmax(0,1fr) auto;gap:10px}
.map-hero{min-height:0;gap:24px;margin:0;grid-template-columns:1.3fr 1fr}
.map-hero .eyebrow{display:none}
.map-hero h1{font-size:26px;line-height:1.25;letter-spacing:-.5px;margin:0}
.map-hero p{font-size:11px;line-height:1.6;margin:6px 0}
.hero-actions{gap:13px;margin-top:9px}
.hero-actions .primary-button{min-height:34px;padding:7px 17px;border-radius:9px}
.map-hero canvas{height:100%;min-height:0;width:100%;max-width:310px;aspect-ratio:auto;justify-self:end;border-radius:45px}
.map-summary{margin:0;padding:4px 0;gap:17px;flex-wrap:nowrap}
.map-summary strong{font-size:22px}
.chapter-picker{gap:5px;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));min-height:0}
.chapter-button{min-height:0;padding:5px 9px;border-radius:9px;display:flex;align-items:center;gap:8px}
.chapter-button small{margin:0;opacity:.7;font-size:9px;gap:5px}
.chapter-button small span:last-child{display:none}
.chapter-button b{font-size:11px;white-space:nowrap}
.map-chapter-select{display:none}
.map-chapter-content{display:grid;grid-template-rows:auto minmax(0,1fr) 29px;gap:7px;min-height:0}
.chapter-heading{margin:0;gap:12px;align-items:center}
.chapter-heading h2{font-size:21px;margin:3px 0}
.chapter-heading .eyebrow{font-size:9px}
.chapter-heading p{font-size:11px;line-height:1.5}
.course-lessons{min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--map-rows,5),minmax(0,1fr));gap:7px}
.course-lesson,.course-lesson.current{min-height:0;padding:9px 13px;border-radius:13px}
.course-lesson h3{font-size:14px;margin:5px 0;line-height:1.4}
.course-lesson p{font-size:10px;line-height:1.4}
.lesson-top{font-size:9px;letter-spacing:.5px;line-height:14px}
.lesson-top .lesson-symbol{font-size:13px}
.lesson-stars{right:11px;bottom:8px;font-size:10px}
.course-lesson.ahead{background:#faf8ef;color:var(--ink)}
.course-lesson.ahead .lesson-symbol{font-size:10px;color:#8f987a;white-space:nowrap}
.map-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#839076;font-size:11px}
.map-pagination button{padding:5px 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-size:11px}
.map-footer{margin:0;padding-top:7px;font-size:10px;line-height:1.4;gap:10px;flex-direction:row}
@media(max-height:839px){
  .learn-map{grid-template-rows:100px 30px 72px minmax(0,1fr) auto;gap:8px}
  .map-hero h1{font-size:23px}.map-hero p{display:none}.map-hero canvas{max-width:230px}
}
@media(min-width:700px) and (max-height:700px){
  .learn-stage.typing-only{grid-template-columns:minmax(270px,.8fr) minmax(0,1.2fr);grid-template-rows:auto 3px 25px minmax(0,1fr) auto 14px}
  .typing-only>.stage-top,.typing-only>.stage-progress,.typing-only>.stage-stats,.typing-only>.stage-note{grid-column:1/-1}
  .typing-only>#stageBody{grid-column:1;grid-row:4}
  .typing-only>.course-feedback{grid-column:1;grid-row:5}
  .typing-only>.keyboard-panel{grid-column:2;grid-row:4/6}
  .typing-only>.stage-note{grid-row:6}
  .typing-only .typing-intro{flex-direction:column;gap:15px;text-align:center}
  .typing-only .key-tiles{gap:5px}
  .typing-only .typing-tile{width:40px;height:60px;font-size:32px}
  .typing-only .typing-tile.current{width:47px;height:72px;font-size:43px}
  .typing-only .typing-instruction{font-size:14px}
}
@media(max-width:900px){
  .learn-header{padding:8px 18px;gap:9px}.learn-header nav{gap:11px;font-size:10px}
  .learn-brand{font-size:19px}.learn-brand small{display:none}#learnerLabel{font-size:10px;padding-left:8px}
  .learn-map,.learn-stage{padding:10px 16px 8px}
  .chapter-button{gap:4px;padding:5px}.chapter-button b{font-size:10px}
  .stage-stats{gap:20px}
  #stageBody:has(.course-game-panel)>div:last-child{grid-template-columns:minmax(0,1fr) minmax(240px,1fr);gap:10px}
}
@media(max-width:600px){
  .learn-header{padding:7px 14px;min-height:68px;gap:2px;align-content:center}
  .learn-brand{font-size:18px}.learn-header nav{gap:6px 10px;justify-content:start;width:100%;font-size:9px}
  #learnerLabel{margin-left:auto;font-size:9px;border:0;padding:0;max-width:105px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .learn-header .quiet-button{padding:4px 0}
  .learn-map,.learn-stage{padding:8px 12px 7px}
  .learn-map{grid-template-rows:96px 30px 33px minmax(0,1fr) auto;gap:8px}
  .map-hero{grid-template-columns:1fr 112px;gap:10px}
  .map-hero h1{font-size:19px;line-height:1.3}.map-hero p{display:none}
  .map-hero canvas{border-radius:23px;max-width:none;max-height:none}
  .hero-actions{margin-top:9px}.hero-actions .primary-button{font-size:11px;min-height:31px;padding:6px 10px}
  .hero-actions small{display:none}
  .map-summary{gap:12px}.map-summary strong{font-size:20px}.map-summary span{font-size:10px;white-space:nowrap}
  .map-summary>span:last-child{display:none}.map-progress{order:0;width:auto;flex:1;margin:0}
  .chapter-picker{display:block}.chapter-button{display:none}
  .map-chapter-select{display:flex;align-items:center;gap:12px;font-size:11px;height:100%;color:var(--muted)}
  .map-chapter-select select{height:33px;min-width:0;flex:1;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);padding:4px 9px;font:inherit}
  .chapter-heading h2{font-size:18px}.chapter-heading p{font-size:10px}.chapter-heading>span{font-size:9px}
  .course-lessons{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .course-lesson,.course-lesson.current{padding:10px 11px}
  .course-lesson h3{font-size:13px;margin:7px 0}.course-lesson p{font-size:9px}
  .lesson-top{font-size:8px;letter-spacing:0}
  .map-footer{font-size:9px;gap:5px;flex-wrap:wrap}
  .map-pagination{font-size:10px;gap:5px}.map-pagination button{font-size:10px;padding:5px 8px}
  .learn-stage{gap:5px;grid-template-rows:auto 3px 24px minmax(0,1fr) auto 0 12px}
  .learn-stage.typing-only{grid-template-rows:auto 3px 24px minmax(135px,.7fr) 30px minmax(0,1fr) 12px}
  .stage-top h1{font-size:14px}.stage-top .eyebrow{font-size:8px;letter-spacing:.7px}
  .stage-actions{max-width:none;flex-wrap:nowrap;font-size:9px;gap:3px}
  .stage-top-left{gap:8px}.round-button{width:31px;height:32px}
  .stage-stats{gap:9px}.stat{font-size:8px;gap:4px}.stat strong{font-size:19px}
  .typing-panel,.typing-panel:has(.typing-intro),.game-typing .typing-panel{padding:10px 12px 16px;border-radius:14px}
  .typing-panel-head,.typing-panel:has(.typing-intro) .typing-panel-head{font-size:9px;gap:8px}
  .typing-instruction{font-size:13px;margin:2px 0 5px;line-height:1.5}
  .typing-instruction kbd{font-size:17px;min-width:24px;height:26px;line-height:26px}
  .typing-intro{gap:15px}.intro-key{width:65px;height:72px;font-size:49px}
  .typing-intro h2{font-size:13px}.typing-intro p{font-size:10px}
  .key-tiles{gap:4px}.typing-tile{width:38px;height:51px;font-size:29px;border-radius:9px}
  .typing-tile.current{width:43px;height:62px;font-size:37px;border-radius:10px}
  .lesson-text,.game-typing .lesson-text,.travel-layout .lesson-text{font-size:22px;line-height:1.7}
  .course-feedback{font-size:10px;line-height:1.4}.stage-note{font-size:8px;line-height:12px}
  .keyboard-caption{font-size:10px;min-height:20px}
  #stageBody:has(.course-game-panel)>div:last-child{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.85fr) minmax(0,1fr);gap:8px}
  .game-rule-strip{padding:6px 9px;min-height:32px;font-size:9px;gap:7px}
  .game-rule-strip strong{font-size:18px}.game-rule-strip .hearts{letter-spacing:1px}
  .game-start-card{padding:6px}.game-start-card>div{padding:10px 13px;border-radius:14px}
  .game-start-card .eyebrow{display:none}.game-start-card h2{font-size:18px;margin:0 0 5px}
  .game-start-card p{font-size:10px;line-height:1.5;margin:5px 0 8px}
  .game-start-card button{min-height:31px;padding:6px 13px;font-size:11px;border-radius:9px}
  .game-typing .input-row{margin-top:5px;padding-top:5px}.game-typing .input-row label{font-size:9px}
  .game-keyboard{min-height:100px;flex-basis:42%;height:42%}
  .fishing-targets{font-size:23px;gap:7px}
  .breathing-rest{padding:16px 10px}.rest-circle{width:62px;height:62px;margin-bottom:8px}
  .breathing-rest h2{font-size:22px}.rest-tips{gap:6px}.rest-tips span{font-size:10px;padding:8px}
  .learn-dialog{padding:21px}.learn-dialog h2{font-size:23px}.learn-dialog p{font-size:12px}
}
@media(max-height:550px){
  .learn-header{min-height:40px;padding-block:4px}
  .learn-map,.learn-stage{padding-block:6px}
  .learn-map{grid-template-rows:70px 26px 64px minmax(0,1fr) auto;gap:5px}
  .map-hero h1{font-size:20px;line-height:1.15}.hero-actions{margin-top:5px}.hero-actions small{display:none}
  .map-hero canvas{max-width:170px}
  .map-summary{padding:2px 0}.chapter-heading p{display:none}
  .chapter-heading h2{font-size:18px}.chapter-heading .eyebrow{display:none}
  .course-lesson p{display:none}.course-lesson h3{margin:3px 0;font-size:12px}
  .map-footer{font-size:9px;padding-top:3px}
  .learn-stage{gap:4px}.stage-top h1{font-size:15px}.stage-top .eyebrow{font-size:8px}
  .stage-top .round-button{height:30px;width:32px}
  .breathing-rest{padding:9px}.rest-circle{width:44px;height:44px;font-size:25px;margin-bottom:6px}
  .breathing-rest h2{font-size:20px;margin:6px}.breathing-rest p{margin:6px;line-height:1.5}.rest-tips{margin:8px 0}
  .learn-dialog{padding:16px 21px}.learn-dialog h2{font-size:22px;margin:6px 0}
  .learn-dialog p{font-size:12px;line-height:1.5;margin:6px 0}.result-symbol{display:none}
  .result-stars{font-size:20px;margin:3px 0}.result-stats{padding:7px 0;margin:8px 0}
  .result-stats b{font-size:24px;margin-bottom:3px}.dialog-actions{margin-top:10px}
  .detail-rules{padding:9px;line-height:1.6}.dialog-actions button{min-height:34px;padding:8px 13px}
}