/* Reading and interaction sizes for the assessment; reports keep their editorial layout. */
@media screen {
 body[data-screen="exercise"] header{padding:10px 24px;min-height:58px;gap:12px}
 body[data-screen="exercise"] .brand{font-size:20px;gap:9px}
 body[data-screen="exercise"] .brand img{width:34px;height:34px}
 body[data-screen="exercise"] main{padding:18px 24px 28px}
 .step{font-size:16px;line-height:1.45;max-width:780px}
 .step h1{font-size:clamp(26px,3vw,36px);line-height:1.2;letter-spacing:-.5px;margin:10px 0 14px}
 .step h3{font-size:23px;margin:14px 0 10px}
 .step p{margin:10px 0}
 .step .eyebrow{font-size:11px;letter-spacing:1.3px}
 .step .progress{margin-bottom:16px}
 .step button{min-height:44px;padding:11px 16px;line-height:1.3}
 .step .actions{gap:10px;margin:16px 0 6px}
 .step .choices{gap:8px}
 .step .choices button{padding:11px 16px;min-height:46px}
 body:is([data-stage="questions"],[data-stage="daily"]) .step{max-width:700px}
 body:is([data-stage="questions"],[data-stage="daily"]) .step h1{font-size:clamp(24px,2.6vw,32px);line-height:1.3;margin-bottom:12px}
 body:is([data-stage="questions"],[data-stage="daily"]) .choices{margin-top:18px}
 .step .gamebox{min-height:170px;margin:16px 0;border-radius:20px}
 .step .gamebox button{padding:0}
 .step .gamebox .shape{width:88px;height:88px}
 .step .object-track{min-height:180px}
 .step .arrow-board{min-height:228px}
 .step .gamebox .arrow-target{width:60px;height:60px}
 .step .direction-arrow{width:34px;height:42px}
 .step .gamebox .line-target{width:64px;height:72px}
 .step .object-symbol{font-size:52px}
 #game-feedback{min-height:23px}
 .step .lesson{gap:12px;margin:14px 0}
 .step .demo{padding:14px;border-radius:16px}
 .step .lesson .shape{width:58px;height:58px}
 .step .demo b{margin-top:8px;font-size:14px}
 .step .task-timing{margin:12px 0;padding:6px 12px;font-size:14px}
 .step .task-timing strong{font-size:18px}
 .step .reference{margin:10px 0}
 .step .rotation-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
 .step .rotation-options button{padding:10px 5px}
 .step .pattern{grid-template-columns:repeat(4,18px);gap:3px;padding:8px}
 .step .pattern i{width:18px;height:18px}
 .step .visual-demo{gap:16px;padding:12px 0}
 .step .pair-grid{margin:12px auto;gap:6px;font-size:28px}
 .step .board-example{margin:12px auto;max-width:300px;gap:8px}
 .step .board-example button{text-align:center}
 .step .board-example :is(span,strong){padding:10px}
 .step .transition-hare{width:260px;max-width:100%}
 .step .count{font-size:54px;margin:12px 0}
 .story-step{max-width:940px}
 .step .story-board{gap:12px;margin:16px 0}
 .step .story-position{padding-top:24px}
 .step .story-card{min-height:170px;padding:10px;gap:8px}
 .step .story-card svg{width:96px;max-width:100%;height:90px;flex-shrink:0}
 .step .story-card strong{font-size:15px;line-height:1.3}
 .step .drag-caption{display:none}
 .step .practice-label{font-size:13px;padding:8px 12px}
 .step .note{font-size:14px}
 @media(max-width:650px){
  .step .transition-hare{width:180px;max-width:45vw}
  body[data-screen="exercise"] header{padding:8px 14px;min-height:52px}
  body[data-screen="exercise"] .brand{font-size:18px}
  body[data-screen="exercise"] .brand small{font-size:14px}
  body[data-screen="exercise"] .badge{font-size:8px;letter-spacing:.5px;padding:5px 7px}
  body[data-screen="exercise"] main{padding:14px 16px 24px}
  .step h1{font-size:26px;margin:8px 0 12px}
  .step .progress{margin-bottom:12px}
  .step .lesson.three{gap:6px}
  .step .lesson.three .demo{padding:10px 4px}
  .step .lesson.three .shape{width:44px;height:44px}
  .step .lesson.three b{font-size:12px}
  .step .gamebox{min-height:140px;margin:12px 0}
  .step .object-track{min-height:160px}
  .step .arrow-board{min-height:216px}
  .step .gamebox .line-target{width:48px;height:62px}
  .step .object-symbol{font-size:42px}
  .step .rotation-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .step .rotation-options button{padding:7px}
  .step .story-board{gap:10px;margin:12px 0}
  .step .story-card{min-height:112px;padding:8px;gap:5px;justify-content:center}
  .step .story-card svg{height:54px;width:60px}
  .step .story-card strong{font-size:14px}
  .step .story-position{padding-top:22px}
  .step .position-label{font-size:13px}
  .story-step .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .story-step .actions button:first-child{grid-column:1/-1}
  .story-step .actions button:only-child{grid-column:1/-1}
 }
 @media(max-width:380px),(max-height:650px){
  body[data-screen="exercise"] main{padding-top:10px}
  .step h1{font-size:25px}
  body:is([data-stage="questions"],[data-stage="daily"]) .step h1{font-size:23px;line-height:1.25}
  body:is([data-stage="questions"],[data-stage="daily"]) .choices{margin-top:12px;gap:6px}
  .step .choices button{padding:9px 12px;min-height:44px}
 }
}

@media screen and (min-width:651px){
 body:is([data-stage="transition"],[data-stage="task-transition"]) .step h1{font-size:42px;line-height:1.2}
 body:is([data-stage="transition"],[data-stage="task-transition"]) .step p:not(.count){font-size:18px;line-height:1.45;margin:12px auto}
 body:is([data-stage="transition"],[data-stage="task-transition"]) .count{font-size:72px;line-height:1.1}
}

@media screen {
 .choice-figure .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
 .choice-figure .pair-grid{line-height:1.2}
 body[data-stage="practice"] .gamebox{min-height:120px}
 @media(max-width:650px){
  .story-step .story-card{flex-direction:row;justify-content:flex-start;min-height:82px;padding:8px 6px;gap:6px}
  .story-step .story-card svg{width:40px;height:42px}
  .story-step .story-card strong{text-align:left;font-size:14px;overflow-wrap:normal}
 }
}

@media screen and (max-width:380px){
 body:is([data-stage="questions"],[data-stage="daily"]) .step h1{font-size:22px;margin-bottom:10px}
 body:is([data-stage="questions"],[data-stage="daily"]) .step p{margin:8px 0}
 body:is([data-stage="questions"],[data-stage="daily"]) .progress{margin-bottom:8px}
}

/* Picture-only action cards: the entire surface is a readable scene. */
@media screen {
 .step .story-card{display:block;min-height:0;padding:7px;aspect-ratio:1;border-radius:18px;overflow:hidden}
 .step .story-card svg.story-scene{display:block;width:100%;height:100%;max-width:none;border-radius:12px;pointer-events:none}
 .step .story-board{gap:14px}
 @media(max-width:650px){
  .step .story-card{padding:5px;min-height:0;border-radius:14px;aspect-ratio:1}
  .step .story-card svg.story-scene{width:100%;height:100%;border-radius:9px}
  .step .story-board{gap:10px}
 }
}