:root {
  --ink: #243d4b;
  --muted: #546978;
  --paper: #f5f7f9;
  --green: #22644f;
  --line: #d5dfe5;
  --blue: #176e9b;
  --orange: #b84e0b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Avenir Next', Avenir, system-ui, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
button:disabled { cursor: default; }
a { color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b84e0b; outline-offset: 4px; }
[hidden] { display: none !important; }
.topbar { max-width: 1340px; height: 60px; margin: auto; padding: 0 30px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: -.6px; white-space: nowrap; }
.brand-icon { display: grid; place-items: center; width: 32px; height: 32px; background: var(--green); color: #dcf08b; border-radius: 7px; font-size: 28px; }
.brand-dot { margin-left: -10px; }
main, body > footer { max-width: 1280px; margin: 0 auto; }
main { padding-top: 18px; }
.intro { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; margin-bottom: 16px; }
h1 { margin: 0; font-size: 23px; letter-spacing: -.5px; }
.intro p { margin: 0; font-size: 14px; color: var(--muted); }
#steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.step { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 14px; font-weight: 750; }
.step small { display: block; font-size: 10px; font-weight: 500; margin-top: 3px; }
.step-number { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%; background: #edf1f4; font-size: 12px; }
.step[aria-current=step] { background: var(--blue); color: white; border-color: var(--blue); }
.step[aria-current=step] .step-number { color: var(--blue); background: white; }
.step:disabled { background: #eef1f3; color: #64727c; }
.step.done:not([aria-current]) .step-number { color: var(--green); background: #dcefdc; }
.workshop { display: grid; grid-template-columns: 255px minmax(0, 1fr); border: 1px solid var(--line); background: white; border-radius: 12px; overflow: hidden; }
.instruction { padding: 24px 22px; border-right: 1px solid var(--line); }
.eyebrow { font-size: 10px; letter-spacing: 1px; font-weight: 800; color: var(--blue); margin: 0 0 12px; }
h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.5px; margin: 0 0 14px; }
.instruction h2:focus { outline: none; }
#instruction { font-size: 16px; line-height: 1.6; }
.listen { border: 1px solid var(--line); background: #f5f7f9; padding: 9px 12px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.mouse-guide { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 20px 0; }
.mouse { width: 60px; height: 82px; border: 2px solid #6d8794; border-radius: 28px; position: relative; overflow: hidden; background: white; }
.mouse-left, .mouse-right { position: absolute; top: 0; width: 50%; height: 38px; border-bottom: 2px solid #6d8794; }
.mouse-left { left: 0; border-right: 1px solid #6d8794; }
.mouse-right { right: 0; border-left: 1px solid #6d8794; }
.mouse-wheel { position: absolute; width: 9px; height: 21px; left: 24px; top: 8px; border: 2px solid var(--blue); border-radius: 7px; background: white; }
.guide-left .mouse-left, .guide-right .mouse-right, .guide-wheel .mouse-wheel { background: #8ad1f1; }
.mouse-guide > span { font-size: 12px; font-weight: 750; text-align: center; }
.tip { font-size: 12px; line-height: 1.6; color: var(--muted); }
.keyboard-help { font-size: 12px; line-height: 1.6; margin-top: 18px; }
.keyboard-help summary { cursor: pointer; font-weight: 700; }
.play-column { padding: 18px; min-width: 0; }
.stage-top { display: flex; gap: 12px; justify-content: space-between; font-size: 10px; letter-spacing: 1px; font-weight: 800; color: var(--muted); margin-bottom: 12px; }
#counter { letter-spacing: 0; font-size: 12px; color: var(--blue); }
.task-banner { background: #e9f3fc; border-left: 4px solid var(--blue); padding: 12px 14px; margin-bottom: 12px; min-height: 78px; }
#task-label { font-size: 10px; letter-spacing: 1px; font-weight: 850; color: var(--blue); }
#task { font-size: 16px; font-weight: 750; margin: 5px 0 0; line-height: 1.4; }
.stage { position: relative; height: 365px; overflow: hidden; user-select: none; border: 1px solid #aecada; border-radius: 5px; background-color: #edf7fc; background-image: linear-gradient(#75b4d23b 1px, transparent 1px), linear-gradient(90deg, #75b4d23b 1px, transparent 1px), linear-gradient(#91c1d925 1px, transparent 1px), linear-gradient(90deg, #91c1d925 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; }
.view-tag, .plane-label { position: absolute; pointer-events: none; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #35657e; z-index: 4; }
.view-tag { left: 12px; top: 12px; background: #fffef9ed; padding: 5px 8px; border: 1px solid #bed3df; border-radius: 3px; }
.plane-label { bottom: 12px; left: 14px; }
.activity-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
#feedback { margin: 0; flex: 1; min-height: 52px; display: flex; align-items: center; padding: 10px 12px; font-size: 13px; line-height: 1.5; background: #f1f4f6; border: 1px solid #dbe2e6; border-radius: 6px; }
#feedback[data-kind=success] { background: #e3f3e8; border-color: #a6d1b5; color: #175335; font-weight: 700; }
#feedback[data-kind=retry] { background: #fff2df; border-color: #e8bd82; color: #814104; }
.primary { border: 0; background: var(--green); color: white; border-radius: 7px; padding: 14px 16px; font-size: 13px; font-weight: 750; white-space: nowrap; }
.primary:disabled { background: #edf0f2; color: #64727c; }
.round-complete { border: 3px solid #2d8156; }
.below, body > footer { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 11px; padding: 14px 0; }
.text-button { font-size: 12px; border: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
body > footer a { text-decoration: none; }
.model-object, .drag-object { position: absolute; width: 76px; height: 76px; transform: translate(-50%, -50%); border: 2px solid #54839b; border-radius: 5px; background: white; box-shadow: 4px 5px 0 #9bb6c7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.model-object > span, .drag-object > span { font-size: 34px; line-height: 1; }
.model-object small, .drag-object small { font-size: 11px; font-weight: 750; }
.object-box > span { color: #c65a32; }
.object-cylinder > span { color: #187c96; }
.object-roof > span { color: #8a509c; }
.object-star > span, .object-diamond > span, .object-ring > span { color: #94640d; }
.model-object.smaller { width: 64px; height: 64px; }
.model-object.placed { outline: 3px solid #d46c18; outline-offset: 3px; background: #e5f3e8; box-shadow: none; }
.object-check { position: absolute; right: -9px; top: -9px; width: 23px; height: 23px; border-radius: 50%; background: #22644f; color: white; font-size: 15px; }
.drag-object { width: 58px; height: 58px; touch-action: none; cursor: grab; z-index: 3; }
.drag-object > span { font-size: 27px; }
.drag-object small { font-size: 9px; }
.drag-object.dragging { cursor: grabbing; outline: 3px solid #d46c18; outline-offset: 2px; box-shadow: 6px 10px 12px #34566e44; }
.drop-target { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transform: translate(-50%, -50%); border: 2px dashed #52768b; background: #ffffffb0; color: #476c80; font-size: 26px; }
.drop-target small { font-size: 11px; }
.drop-target.placed { border: 2px solid #2d8156; color: #175335; background: #dff0e4; }
.panel-context { position: absolute; top: 42%; left: 6%; max-width: 38%; font-weight: 750; font-size: 17px; line-height: 1.6; }
.panel-context small { font-weight: 400; font-size: 13px; }
.shape-library { position: absolute; top: 12px; bottom: 12px; right: 12px; width: 44%; overflow-y: auto; overscroll-behavior: contain; background: white; border: 1px solid #9ebacb; border-radius: 5px; }
.library-heading { position: sticky; top: 0; padding: 10px 14px; background: #e4edf4; z-index: 2; font-size: 13px; font-weight: 750; }
.library-list { padding: 14px; display: flex; flex-direction: column; gap: 25px; }
.library-shape { flex-shrink: 0; height: 115px; border: 1px solid #c0d0da; border-radius: 5px; background: #f9fbfd; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.library-shape > span { font-size: 40px; }
.library-shape small { font-size: 14px; }
.library-shape.placed { border: 3px solid #2d8156; background: #e3f3e8; }
.view-scene { position: absolute; inset: 0; display: grid; place-items: center; perspective: 700px; touch-action: none; outline-offset: -4px !important; }
.scene-model { position: relative; width: 100px; height: 100px; pointer-events: none; transform-style: preserve-3d; }
.model-grid { position: absolute; width: 330px; height: 250px; left: -115px; top: 5px; transform: rotateX(65deg) rotateZ(32deg); background-color: #c7e5f2dd; background-image: linear-gradient(#69a6c0 1px, transparent 1px), linear-gradient(90deg, #69a6c0 1px, transparent 1px); background-size: 20px 20px; border: 1px solid #69a6c0; }
.cube { width: 100px; height: 100px; position: relative; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(-32deg); pointer-events: none; }
.face { position: absolute; width: 100px; height: 100px; border: 2px solid #8e4225; display: grid; place-items: center; font-size: 34px; color: #48230e; background: #e6875f; backface-visibility: hidden; }
.front { transform: translateZ(50px); background: #f2a37c; }
.back { transform: rotateY(180deg) translateZ(50px); background: #f6bd91; }
.right { transform: rotateY(90deg) translateZ(50px); background: #db865a; }
.left { transform: rotateY(-90deg) translateZ(50px); background: #efa368; }
.top { transform: rotateX(90deg) translateZ(50px); background: #ffd4ac; }
.bottom { transform: rotateX(-90deg) translateZ(50px); }
.view-controls { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; z-index: 5; }
.view-controls button { width: 40px; height: 40px; border: 1px solid #9bb8c8; border-radius: 5px; background: white; font-size: 24px; }
.check-view { position: absolute; right: 12px; bottom: 12px; border: 2px solid var(--blue); border-radius: 6px; padding: 12px 18px; background: white; color: var(--blue); font-weight: 750; z-index: 5; }
.check-view.ready { background: var(--green); border-color: var(--green); color: white; }
.pan-view { position: absolute; inset: 0; touch-action: none; outline-offset: -4px !important; }
.pan-world { position: absolute; inset: -100%; background: linear-gradient(#75b4d24f 1px, transparent 1px), linear-gradient(90deg, #75b4d24f 1px, transparent 1px), #edf7fc; background-size: 20px 20px; pointer-events: none; }
.pan-marker, .pan-goal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; }
.pan-marker { width: 26px; height: 26px; background: #d75e13; color: white; font-size: 25px; border: 2px solid white; box-shadow: 0 0 0 2px #9e3f06; }
.pan-marker small { position: absolute; width: 150px; text-align: center; top: 36px; font-size: 10px; font-weight: 800; color: #873804; }
.pan-goal { border: 3px dashed #176e9b; border-radius: 50%; color: #176e9b; font-size: 22px; pointer-events: none; }
.pan-goal.ready { border-color: #22644f; border-style: solid; background: #51ae621f; }
.pan-block { position: absolute; font-size: 65px; color: #b65b36; left: calc(50% + 100px); top: calc(50% - 110px); }
.block-two { left: calc(50% - 130px); top: calc(50% + 20px); color: #1b7c97; }
.key-state { position: absolute; top: 12px; right: 12px; border: 1px solid #aabac5; border-radius: 5px; padding: 7px 10px; background: white; font-size: 12px; font-weight: 750; pointer-events: none; }
.key-state.held { color: #175335; background: #dff0e4; border-color: #2d8156; }
.finish { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 15px; padding: 25px; background: #f4faf6; }
.finish-mark { color: var(--green); font-size: 45px; }
.finish h3 { margin: 0; font-size: 28px; }
.finish p { margin: 0; max-width: 370px; line-height: 1.6; }
@media (max-width: 1340px) { main, body > footer { margin-left: 24px; margin-right: 24px; } }
@media (max-width: 900px) {
  .workshop { grid-template-columns: 210px minmax(0, 1fr); }
  .instruction { padding: 20px 16px; }
  .step { padding: 9px 7px; gap: 6px; font-size: 12px; }
  .step-number { width: 23px; height: 23px; }
  .play-column { padding: 14px; }
  .activity-footer { flex-wrap: wrap; }
  #feedback { flex-basis: 100%; }
  .model-object { width: 62px; height: 68px; }
  .panel-context { font-size: 14px; }
}
@media (max-width: 620px) {
  .topbar { padding: 0 16px; }
  main, body > footer { margin-left: 12px; margin-right: 12px; }
  #steps { grid-template-columns: repeat(3, 1fr); }
  .step { padding: 9px; }
  .workshop { display: block; }
  .instruction { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .instruction h2 { font-size: 23px; margin-bottom: 8px; }
  #instruction { font-size: 15px; margin: 8px 0 12px; }
  .mouse-guide { flex-direction: row; margin: 12px 0; }
  .mouse { width: 38px; height: 50px; border-radius: 18px; }
  .mouse-left, .mouse-right { height: 24px; }
  .mouse-wheel { height: 15px; left: 13px; top: 4px; }
  .tip { margin: 8px 0; }
  .keyboard-help { margin-top: 10px; }
  .stage { height: 360px; }
  .model-object, .model-object.smaller { width: 58px; height: 62px; }
  .model-object small { font-size: 9px; }
  .task-banner { min-height: 95px; }
  #task { font-size: 15px; }
  .shape-library { width: 51%; }
  .panel-context { left: 4%; max-width: 35%; }
  .below { align-items: center; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media (max-width: 620px) {
  .view-tag { top: 4px; padding: 3px 6px; font-size: 9px; }
}
.numbered-target { width: 76px; height: 76px; gap: 0; }
.target-number { font-size: 30px; line-height: 1.1; color: var(--ink); }
.numbered-target > .target-symbol { font-size: 17px; line-height: 1.1; }
.motion-toggle { position: absolute; top: 8px; right: 8px; z-index: 5; padding: 8px 10px; border: 1px solid #9bb8c8; border-radius: 5px; background: white; font-size: 12px; font-weight: 700; }
.motion-toggle:disabled { color: var(--muted); }
@media (max-width: 620px) {
  .numbered-target { width: 58px; height: 62px; }
  .motion-toggle { font-size: 10px; padding: 7px; }
}
/* Visual task cards: the picture carries the goal; text is a short action cue. */
.task-banner { display: flex; align-items: center; gap: 16px; min-height: 94px; }
#task-visual { flex: 0 0 auto; min-width: 58px; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--blue); position: relative; }
#task-visual .shape-art { width: 54px; height: 54px; }
.goal-number, .goal-symbol { font-size: 43px; line-height: 1; }
.goal-number { display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid #a5c8dc; border-radius: 8px; background: white; }
#task { font-size: 19px; margin-top: 3px; }
#instruction { font-size: 17px; font-weight: 650; }
.mouse-guide { padding: 14px 6px; background: #f1f7fb; border-radius: 10px; }
#gesture-key { background: white; border: 2px solid #90b2c4; border-bottom-width: 5px; border-radius: 7px; padding: 7px 15px; font: 750 16px inherit; }
.gesture-pair { font-size: 28px; letter-spacing: -2px; }
.shape-art { width: 100%; height: 100%; display: block; fill: currentColor; }
.art-square { color: #d66a39; }
.art-circle { color: #20839d; }
.art-triangle { color: #8a50a3; }
.art-rectangle { color: #cc8a18; }
.art-hexagon { color: #287957; }
.outline-art { fill: #ffffffa6; stroke: #345b72; stroke-width: 2.5; stroke-dasharray: 6 4; }
.object-square .target-symbol { color: #d66a39; }
.object-circle .target-symbol { color: #20839d; }
.object-triangle .target-symbol { color: #8a50a3; }
.click-controls { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 7px; z-index: 5; font-size: 12px; font-weight: 700; }
.click-controls label { display: flex; gap: 6px; align-items: center; background: white; padding: 5px 7px; border: 1px solid #9bb8c8; border-radius: 5px; }
.click-controls select { font: inherit; color: var(--ink); background: #eef6fa; border: 1px solid #aec9d8; border-radius: 4px; padding: 5px; }
.click-controls .motion-toggle { position: static; }
.picture-piece { width: 66px; height: 72px; box-shadow: none; }
.picture-piece .shape-art { width: 44px; height: 44px; }
.picture-piece small { font-size: 10px; }
.picture-target { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.picture-target.placed { filter: drop-shadow(0 2px 1px #243d4b25); }
.picture-target.placed .shape-art { stroke: #24465b; stroke-width: 1.5; }
.find-reference { position: absolute; left: 4%; top: 22%; width: 38%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.find-reference > strong { font-size: 13px; letter-spacing: 1px; }
#reference-card { position: relative; width: 125px; height: 135px; background: white; border: 3px solid var(--blue); border-radius: 9px; padding: 13px 26px 36px; }
.card-number { font-size: 23px; line-height: 1; }
#reference-card .card-number { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; }
#task-visual .card-number { background: white; border-radius: 6px; padding: 8px; border: 1px solid #a5c8dc; }
.search-arrow { font-size: 30px; position: absolute; right: -14%; top: 50%; color: var(--blue); }
.scroll-cue { font-size: 28px; line-height: 1; color: var(--blue); }
.find-reference small { font-size: 12px; font-weight: 650; }
.search-cards { top: 12px; bottom: 12px; right: 12px; width: 49%; }
.search-cards .library-list { gap: 16px; padding: 16px; }
.search-card { height: 114px; gap: 3px; }
.search-card .shape-art { width: 66px; height: 66px; }
.search-card .card-number { font-size: 22px; }
.zoom-game { position: absolute; inset: 0; outline-offset: -4px !important; touch-action: none; }
.zoom-frame, .zoom-picture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.zoom-frame { border: 3px dashed #385e74; background: #ffffff55; outline: 5px solid #ffffff60; }
.zoom-frame.ready { border: 4px solid #267d4b; background: #65c67e25; }
.zoom-picture { width: 100px; height: 140px; }
.rocket-art { width: 100%; height: 100%; }
.frame-icon { display: grid; place-items: center; width: 58px; height: 58px; border: 3px dashed #385e74; font-size: 35px; }
.pan-marker { width: 64px; height: 48px; background: none; border: 0; box-shadow: none; }
.pan-marker .rover-art { width: 100%; height: 100%; }
.pan-goal { border-radius: 8px; font-size: 30px; background: #ffffff50; }
#task-visual .rover-art { width: 62px; height: 48px; }
.parking-icon { border: 2px dashed var(--blue); border-radius: 5px; width: 48px; height: 48px; display: grid; place-items: center; font-size: 28px; }
@media (max-width: 900px) { #task { font-size: 17px; } }
@media (max-width: 620px) {
  .mouse-guide { display: flex; flex-wrap: wrap; padding: 10px; gap: 10px; }
  .mouse-guide > span { flex: 1; text-align: left; }
  .tip { font-size: 12px; }
  .task-banner { gap: 10px; padding: 10px; }
  #task-visual { min-width: 46px; min-height: 46px; }
  .goal-number { width: 46px; height: 46px; font-size: 34px; }
  .click-controls { top: 28px; right: 5px; gap: 4px; font-size: 10px; }
  .click-controls select { padding: 3px; }
  .click-controls label { padding: 3px; gap: 3px; }
  .click-controls .motion-toggle { padding: 8px 5px; }
  .picture-piece { width: 54px; height: 64px; }
  .picture-piece .shape-art { width: 38px; height: 38px; }
  #reference-card { width: 88px; height: 110px; padding: 12px 12px 32px; }
  .find-reference { left: 2%; width: 40%; }
  .search-arrow { display: none; }
  .search-cards { width: 50%; right: 6px; }
  .search-cards .library-list { padding: 10px; }
  #task-visual .shape-art { width: 40px; height: 40px; }
  #task-visual .card-number { font-size: 20px; padding: 5px; }
}
#reference-card .shape-art { width: 66px; height: 66px; margin: auto; }
.zoom-picture { background: #fffdf5; border: 2px solid #cc7841; border-radius: 4px; }
.flame-piece .shape-art { transform: rotate(180deg); }
@media (max-width: 620px) { #reference-card .shape-art { width: 52px; height: 52px; } }

/* Selectable text stays still while students practice the double-click gesture. */
.word-board { position: absolute; inset: 52px 6% 38px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: center; }
.word-card { position: relative; text-align: center; background: white; border: 2px solid #9dbdcc; border-radius: 8px; padding: 16px 8px; }
.practice-word { font-size: 30px; font-weight: 750; cursor: text; user-select: text; -webkit-user-select: text; }
.practice-word::selection { background: #1766bc; color: white; }
.word-card.matched { border-color: #27804c; background: #eef9f0; }
.word-check { position: absolute; right: 5px; top: 3px; color: #257a45; font-weight: 800; font-size: 18px; }
.goal-word { background: #1766bc; color: white; padding: 8px 12px; border-radius: 4px; font-size: 28px; }
.word-round-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.word-round-2 { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px 16px; background: #ffffffed; border: 2px solid #9dbdcc; border-radius: 8px; inset: 100px 7% 80px; padding: 18px; }
.word-round-2 .word-card { border-color: transparent; background: transparent; padding: 8px 12px; }
.word-round-2 .practice-word { font-size: 24px; }
@media (max-width: 900px) and (min-width: 621px) { #steps { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) { .practice-word { font-size: 24px; } .word-board { gap: 12px; } .word-round-2 { inset: 65px 5% 45px; padding: 12px; gap: 8px; } }

.scroll-mouse-picture { width: 116px; height: 82px; flex-shrink: 0; }
.find-reference { top: 14%; gap: 8px; }
.zoom-scroll-cue { position: absolute; left: 12px; top: 48px; display: flex; flex-direction: column; align-items: center; pointer-events: none; font-size: 12px; }
.check-view:disabled { background: #f1f5f7; border-color: #a6b8c1; color: #526a76; cursor: default; }
@media (max-width: 620px) { .scroll-mouse-picture { width: 90px; height: 64px; } .zoom-scroll-cue { left: 3px; top: 36px; font-size: 10px; } .zoom-scroll-cue .scroll-mouse-picture { width: 66px; height: 48px; } }

.right-mouse-cue { position: absolute; left: 12px; top: 48px; width: 150px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; pointer-events: none; z-index: 3; background: #fffffff0; border: 2px solid #aac6d4; border-radius: 10px; padding: 10px 6px; text-align: center; }
.right-mouse-cue svg { width: 86px; height: 90px; }
.right-mouse-cue strong, .right-mouse-cue small { width: 100%; }
.right-mouse-cue strong { font-size: 14px; }
.right-mouse-cue small { font-size: 11px; }
.right-mouse-cue kbd { padding: 5px; background: #e8eef3; border: 2px solid #698a9e; border-bottom-width: 4px; border-radius: 5px; font-weight: 700; }
.guide-right .mouse-right { background: #ecaa26; }
.celebration { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; animation: celebration-exit 3s forwards; }
.celebration-badge { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 32px; border: 3px solid #247855; border-radius: 18px; background: #fffef4; box-shadow: 0 12px 45px #14374840; color: #195c43; text-align: center; animation: badge-pop .55s cubic-bezier(.2,1.5,.5,1); }
.celebration-badge span { font-size: 48px; line-height: 1; }
.celebration-badge strong { font-size: 24px; white-space: nowrap; }
.celebration i { position: absolute; top: -25px; left: var(--x); width: 11px; height: 19px; border-radius: 2px; background: var(--color); animation: confetti-fall 2.5s var(--delay) ease-in forwards; }
.celebration i:nth-child(3n) { border-radius: 50%; width: 14px; height: 14px; }
.finale { animation-duration: 5s; background: radial-gradient(ellipse at center, #f6cf3a22, transparent 70%); }
.finale .celebration-badge { border-color: #cd921d; padding: 30px 44px; }
.finale .celebration-badge span { font-size: 76px; color: #d49a19; }
.finale i { animation-duration: 4.3s; }
@keyframes badge-pop { from { transform: translateX(-50%) scale(.3) rotate(-10deg); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes confetti-fall { to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); } }
@keyframes celebration-exit { 0%, 78% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (max-width: 620px) {
  .right-mouse-cue { left: 5px; top: 35px; width: 105px; padding: 5px 3px; gap: 2px; }
  .right-mouse-cue svg { width: 57px; height: 60px; }
  .right-mouse-cue strong { font-size: 11px; }
  .right-mouse-cue small { font-size: 9px; }
  .right-mouse-cue kbd { padding: 3px; font-size: 11px; }
  .celebration-badge, .finale .celebration-badge { padding: 20px; max-width: 90vw; }
  .celebration-badge strong { font-size: 20px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .celebration i { display: none; } .celebration-badge { animation: none; } .celebration { animation: celebration-exit 3s steps(1, end) forwards; } }

/* Compact, single-workplane lesson for Chromebook screens. */
.topbar { height: 40px; padding: 0 16px; }
.brand { font-size: 18px; } .brand-icon { width: 26px; height: 26px; font-size: 24px; }
main { padding: 8px 16px 0; }
.intro { margin-bottom: 8px; } h1 { font-size: 20px; }
#steps { margin-bottom: 8px; gap: 5px; }
.step { padding: 6px 8px; gap: 6px; font-size: 12px; }
.workshop { display: block; }
.instruction { padding: 8px 12px 0; border: 0; display: flex; gap: 12px; align-items: baseline; }
.instruction .eyebrow { margin: 0; }
.instruction h2 { font-size: 18px; margin: 0; }
.instruction > #instruction, .instruction > .mouse-guide, .instruction > .tip { display: none; }
.play-column { padding: 8px 12px; }
.stage-top { margin-bottom: 5px; }
.task-banner { min-height: 44px; padding: 5px 10px; margin-bottom: 6px; gap: 10px; }
#task { font-size: 15px; margin: 0; } #task-label { font-size: 9px; }
#task-visual { min-height: 32px; min-width: 32px; }
#task-visual .shape-art, #task-visual .goal-number { width: 32px; height: 32px; font-size: 24px; }
#task-visual .goal-symbol { font-size: 30px; }
#task-visual .frame-icon { width: 32px; height: 32px; font-size: 22px; }
.stage { height: clamp(290px, calc(100dvh - 285px), 420px); }
.activity-footer { margin-top: 6px; }
#feedback { min-height: 36px; padding: 5px 10px; }
.primary { padding: 10px 14px; }
.below { padding: 6px 0; align-items: baseline; flex-wrap: wrap; }
.keyboard-help { margin: 0; max-width: 450px; }
body > footer { padding: 4px 16px; }
.left-mouse-cue { position: absolute; top: 46px; left: 10px; width: 110px; display: flex; flex-direction: column; align-items: center; pointer-events: none; text-align: center; font-size: 12px; }
.left-mouse-cue svg { width: 66px; height: 72px; }
.orbit-goal { width: 100%; display: flex; flex-direction: column; align-items: center; border-top: 1px solid #bed1dc; padding-top: 5px; }
.orbit-goal strong { font-size: 40px; line-height: 1; color: var(--blue); }
#word-goal { position: absolute; top: 22%; left: 22%; right: 6%; display: flex; align-items: center; flex-direction: column; gap: 7px; }
#word-goal small { font-size: 10px; font-weight: 750; }
.word-round-2 { inset: 48% 6% 18% 22%; padding: 8px; gap: 8px; }
.picture-piece { width: 60px; height: 66px; }
.skill-celebration .celebration-badge { top: auto; bottom: 22px; flex-direction: row; padding: 10px 16px; border-width: 2px; border-radius: 10px; }
.skill-celebration .celebration-badge span { font-size: 22px; }
.skill-celebration .celebration-badge strong { font-size: 16px; }
.skill-celebration { animation-duration: 1.8s; }
.skill-celebration i { width: 6px; height: 9px; animation-duration: 1.4s; }
@media (min-width: 760px) { #steps { grid-template-columns: repeat(7, 1fr); } }
@media (max-width: 759px) {
  .instruction { flex-wrap: wrap; gap: 4px 10px; }
  .left-mouse-cue { width: 72px; left: 3px; font-size: 10px; }
  .left-mouse-cue svg { width: 48px; height: 56px; }
  .picture-piece { width: 42px; height: 54px; } .picture-piece .shape-art { width: 30px; height: 30px; }
  .word-round-2 { bottom: 8%; } .practice-word { font-size: 20px; }
}
@media (min-width: 760px) {
  main, body > footer { margin-left: auto; margin-right: auto; }
  .step { font-size: 11px; padding: 6px; }
  .step-number { width: 23px; height: 23px; }
  .stage { height: clamp(280px, calc(100dvh - 310px), 420px); }
}

.picture-target.tree.placed .shape-art { color: #388b54; }
.picture-target.flower.placed .shape-art { color: #d75d9d; }
.picture-target.flower.placed::after { content: ''; position: absolute; width: 24%; height: 24%; left: 38%; top: 38%; background: #ffd35c; border-radius: 50%; }
@media (max-height: 700px) and (min-width: 760px) {
  .find-reference { top: 10%; gap: 4px; }
  #reference-card { width: 100px; height: 108px; padding: 8px 18px 30px; }
  #reference-card .shape-art { width: 52px; height: 52px; }
  .find-reference .scroll-mouse-picture { width: 85px; height: 60px; }
  .right-mouse-cue { top: 36px; padding: 6px; gap: 3px; }
  .right-mouse-cue svg { width: 64px; height: 68px; }
}

#task-visual .rover-art { width: 44px; height: 34px; }
#task-visual .parking-icon { width: 32px; height: 32px; font-size: 22px; }

/* The task card lives on the same grid as the activity, above its interaction area. */
.workplane-surface {
  border: 1px solid #aecada; border-radius: 8px; overflow: hidden;
  background-color: #edf7fc;
  background-image: linear-gradient(#75b4d23b 1px, transparent 1px), linear-gradient(90deg, #75b4d23b 1px, transparent 1px), linear-gradient(#91c1d925 1px, transparent 1px), linear-gradient(90deg, #91c1d925 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.workplane-surface > .task-banner {
  width: fit-content; max-width: calc(100% - 20px); margin: 8px 10px 2px;
  background: #fffef7; border: 2px solid #dcaa39; border-radius: 8px;
  box-shadow: 0 2px 5px #36566b18; padding: 6px 12px;
}
.workplane-surface #task { font-size: 17px; color: #243d4b; }
.workplane-surface #task-label { color: #785412; }
.workplane-surface > .stage { background: transparent; border: 0; border-radius: 0; }
.workplane-surface > .stage.round-complete { box-shadow: inset 0 0 0 3px #2d8156; }
@media (max-width: 759px) { .workplane-surface #task { font-size: 15px; } }
@media (min-width: 760px) { .workplane-surface > .stage { height: clamp(270px, calc(100dvh - 325px), 420px); } }

/* One visual instruction card: gesture, target, and task stay together. */
#task-mouse { flex: 0 0 auto; }
#task-mouse .left-mouse-cue, #task-mouse .right-mouse-cue { position: static; width: auto; min-width: 60px; padding: 0; margin: 0; border: 0; background: none; gap: 3px; }
#task-mouse .left-mouse-cue svg, #task-mouse .right-mouse-cue svg { width: 52px; height: 54px; }
#task-mouse .scroll-mouse-picture { display: block; width: 80px; height: 56px; }
#task-mouse strong, #task-mouse small { display: none; }
#task-mouse .right-mouse-cue { flex-wrap: nowrap; }
#task-mouse kbd { font-size: 12px; }
.workplane-surface > .task-banner { gap: 12px; }
.workplane-surface[data-skill="Double-click"] > .task-banner { margin-left: 22%; }
.workplane-surface[data-skill="Double-click"] .word-round-2 { inset: 12% 6% 38% 22%; }
.search-cards { left: 22%; right: 22%; width: auto; }
@media (min-width: 760px) { .workplane-surface > .stage { height: clamp(260px, calc(100dvh - 340px), 420px); } }
@media (max-width: 759px) {
  .workplane-surface > .task-banner { max-width: calc(100% - 12px); margin-left: 6px; gap: 7px; padding: 5px; }
  .workplane-surface[data-skill="Double-click"] > .task-banner { margin-left: 6px; }
  #task-mouse .left-mouse-cue svg, #task-mouse .right-mouse-cue svg { width: 42px; height: 46px; }
  #task-mouse .scroll-mouse-picture { width: 64px; height: 46px; }
  .search-cards { left: 6%; }
}

/* Larger directions, with movement controls at the top of the same card. */
.instruction #step-label { display: none; }
.instruction { padding-top: 10px; }
.instruction h2 { font-size: 20px; }
.workplane-surface > .task-banner { display: grid; grid-template-columns: auto auto minmax(0, 1fr); min-width: min(440px, calc(100% - 20px)); gap: 10px 16px; padding: 10px 16px; }
#task-controls { grid-column: 1 / -1; }
#task-controls:empty { display: none; }
#task-controls .click-controls { position: static; justify-content: flex-start; font-size: 13px; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #e3d7b5; }
#task-controls .motion-toggle { font-size: 13px; padding: 9px 12px; }
#task-controls select { font-size: 13px; padding: 6px; }
#task-mouse .left-mouse-cue svg, #task-mouse .right-mouse-cue svg { width: 66px; height: 70px; }
#task-mouse .scroll-mouse-picture { width: 94px; height: 70px; }
.workplane-surface #task { font-size: 20px; line-height: 1.3; }
#task-visual .goal-number, #task-visual .shape-art { width: 48px; height: 48px; font-size: 34px; }
#task-visual .goal-symbol { font-size: 42px; }
#counter { display: block; margin-top: 5px; font-size: 12px; }
@media (min-width: 760px) { .workplane-surface[data-skill="Click"] > .stage { height: clamp(220px, calc(100dvh - 365px), 390px); } }
@media (max-width: 759px) {
  .workplane-surface > .task-banner { min-width: 0; gap: 7px; padding: 7px; }
  .workplane-surface #task { font-size: 17px; }
  #task-mouse .left-mouse-cue svg, #task-mouse .right-mouse-cue svg { width: 48px; height: 54px; }
  #task-mouse .scroll-mouse-picture { width: 70px; height: 54px; }
}

/* A connected lesson path, with a clear current skill and one segment per round. */
#steps { gap: 12px; margin-bottom: 10px; padding: 8px; background: #244b60; border: 2px solid #18394d; border-radius: 12px; }
#steps .step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 6px; row-gap: 6px; min-height: 84px; padding: 7px 6px; font-size: 15px; line-height: 1.1; border: 2px solid #c7d9e3; background: #f1f7fb; color: #304f62; }
#steps .step:not(:last-child)::after { content: '›'; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: #d7eaf4; font-size: 24px; line-height: 1; pointer-events: none; }
#steps .step-number { width: 32px; height: 32px; font-size: 17px; font-weight: 850; color: #304f62; background: #dce9f1; }
#steps .step small { font-size: 11px; font-weight: 700; margin-top: 5px; }
.step-rounds { display: flex; gap: 4px; grid-column: 1 / -1; }
.step-rounds i { height: 9px; flex: 1; background: #c2d3dd; border-radius: 5px; }
.step-rounds .filled { background: #278252; }
#steps .step[aria-current="step"] { background: #ffda73; color: #253d4b; border-color: #ffe8a9; box-shadow: 0 0 0 2px #d99b21; }
#steps .step[aria-current="step"] .step-number { background: #244b60; color: white; }
#steps .step[aria-current="step"] .step-rounds i { background: #bd983e; }
#steps .step[aria-current="step"] .step-rounds .active { background: #244b60; box-shadow: inset 0 0 0 2px #fff7df; }
#steps .step[aria-current="step"] .step-rounds .filled { background: #22644f; }
#steps .step.done:not([aria-current]) { background: #e3f4e7; border-color: #8ac39b; color: #20583d; }
#steps .step.done .step-number { background: #22644f; color: white; }
#lesson-progress { color: #365a6d; font-weight: 650; }
@media (min-width: 760px) and (max-height: 700px) {
  .workplane-surface[data-skill="Click"] > .stage { height: 200px; }
  .numbered-target { width: 66px; height: 66px; }
}
@media (max-width: 759px) {
  #steps { gap: 8px; }
  #steps .step { min-height: 78px; font-size: 13px; }
  #steps .step:not(:last-child)::after { content: none; }
}

/* Keep the gesture and target visually dominant; progress lives in the skill cards. */
.workplane-surface > .task-banner { gap: 4px 18px; padding: 6px 14px; min-width: min(480px, calc(100% - 20px)); }
#task-mouse .left-mouse-cue svg, #task-mouse .right-mouse-cue svg { width: 104px; height: 98px; }
#task-mouse .scroll-mouse-picture { width: 134px; height: 98px; }
#task-mouse .right-mouse-cue { gap: 6px; }
#task-mouse kbd { font-size: 18px; padding: 8px; }
#task-visual { min-width: 82px; min-height: 82px; }
#task-visual .goal-number { width: 82px; height: 82px; font-size: 58px; border-width: 3px; }
#task-visual .shape-art { width: 76px; height: 76px; }
#task-visual .goal-symbol { font-size: 80px; }
#task-visual .goal-word { font-size: 42px; padding: 12px 18px; }
#task-visual .card-number { font-size: 36px; padding: 10px; }
#task-visual .frame-icon { width: 72px; height: 72px; font-size: 46px; }
#task-visual .rover-art { width: 78px; height: 60px; }
#task-visual .parking-icon { width: 56px; height: 56px; font-size: 38px; }
.workplane-surface #task { font-size: 21px; max-width: 270px; }
#task-controls .click-controls { padding-bottom: 4px; }
#task-controls .motion-toggle { padding: 7px 10px; }
#task-controls select { padding: 4px; }
@media (min-width: 760px) and (max-height: 700px) {
  .workplane-surface[data-skill="Click"] > .stage { height: 195px; }
}
@media (max-width: 759px) {
  .workplane-surface > .task-banner { gap: 5px 10px; padding: 6px; }
  #task-mouse .left-mouse-cue svg, #task-mouse .right-mouse-cue svg { width: 76px; height: 82px; }
  #task-mouse .scroll-mouse-picture { width: 96px; height: 82px; }
  #task-visual { min-width: 64px; min-height: 64px; }
  #task-visual .goal-number { width: 64px; height: 64px; font-size: 46px; }
  #task-visual .shape-art { width: 58px; height: 58px; }
  #task-visual .goal-word { font-size: 32px; padding: 8px; }
  .workplane-surface #task { font-size: 17px; }
}

/* Matching targets use the identical large shape, color, and proportions. */
.search-card { height: 136px; }
.search-card .scroll-shape, #task-visual .scroll-shape { width: 104px; height: 104px; flex-shrink: 0; }
@media (max-width: 759px) { .search-card .scroll-shape, #task-visual .scroll-shape { width: 88px; height: 88px; } }

/* Progress and short directions share the activity container. */
.workshop > #steps { margin: 10px 12px 0; }
.instruction { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.instruction #task:focus { outline: none; }
.instruction #task { margin: 0; font-size: 20px; font-weight: 550; line-height: 1.3; }
.workplane-surface > .task-banner { grid-template-columns: auto auto; min-width: 0; width: fit-content; justify-content: start; gap: 4px 20px; }
.workplane-surface > .task-banner:has(#task-controls:not(:empty)) { min-width: 320px; }
@media (max-width: 759px) { .instruction #task { font-size: 17px; } }

/* Keep the large visual cue alongside the game on laptop screens. */
#feedback:empty { visibility: hidden; }
#task-visual.target-ready { outline: 3px solid #278252; outline-offset: 5px; border-radius: 6px; background: #e8f7e8; }
#task-controls .click-controls { flex-wrap: wrap; gap: 6px; }
.instruction #task { font-size: 18px; }
.below { justify-content: space-between; }
@media (min-width: 760px) {
  .workplane-surface { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .workplane-surface > .task-banner,
  .workplane-surface[data-skill="Double-click"] > .task-banner,
  .workplane-surface > .task-banner:has(#task-controls:not(:empty)) {
    min-width: 0; width: calc(100% - 20px); max-width: none; margin: 10px;
    grid-template-columns: 1fr; justify-items: center; gap: 14px; padding: 12px;
  }
  #task-controls { width: 100%; }
  #task-controls .click-controls { justify-content: center; }
  #task-mouse, #task-visual { grid-column: 1; }
  #task-mouse .right-mouse-cue { flex-wrap: nowrap; }
  .workplane-surface > .stage,
  .workplane-surface[data-skill="Click"] > .stage { height: clamp(320px, calc(100dvh - 254px), 480px); }
  .workplane-surface[data-skill="Double-click"] .word-round-2 { inset: 20% 4% 20%; }
  .search-cards { left: 6%; right: 6%; }
  .workplane-surface[data-skill="Complete"] { display: block; }
  .workplane-surface[data-skill="Complete"] > .task-banner { display: none; }
}
@media (min-width: 760px) and (max-width: 1100px) {
  .picture-piece { width: 50px; height: 60px; }
  .picture-piece .shape-art { width: 36px; height: 36px; }
  .picture-piece small { font-size: 10px; }
  .instruction h2 { font-size: 19px; }
  .instruction #task { font-size: 17px; }
}
@media (min-width: 760px) and (max-width: 959px) {
  .workplane-surface { grid-template-columns: 200px minmax(0, 1fr); }
  #steps { gap: 10px; padding: 6px; }
  #steps .step { grid-template-columns: 1fr; justify-items: center; column-gap: 0; row-gap: 4px; padding: 5px 3px; font-size: 12px; text-align: center; }
  #steps .step-number { width: 28px; height: 28px; font-size: 16px; }
  #steps .step small { font-size: 10px; margin-top: 3px; }
  #steps .step:not(:last-child)::after { right: -10px; font-size: 20px; }
  .step-rounds { width: 100%; }
  #task-mouse .right-mouse-cue { flex-wrap: wrap; }
  .word-round-2 .word-card { padding: 8px; }
  .word-round-2 .practice-word { font-size: 21px; }
  .activity-footer { flex-wrap: nowrap; }
  #feedback { flex-basis: auto; }
}
@media (max-width: 759px) {
  .workplane-surface > .task-banner:has(#task-controls:not(:empty)) { min-width: 0; }
  .workplane-surface[data-skill="Double-click"] .word-round-2 { inset: 6% 4%; }
  .word-round-2 { align-content: center; }
}

@media (min-width: 760px) {
  .workplane-surface[data-skill="Double-click"] { display: block; }
  .workplane-surface[data-skill="Double-click"] > .task-banner { grid-template-columns: auto auto; width: fit-content; margin: 10px auto; }
  .workplane-surface[data-skill="Double-click"] > .stage { height: clamp(170px, calc(100dvh - 414px), 300px); }
  .workplane-surface[data-skill="Double-click"] .word-round-2 { inset: 8% 6% 20%; }
}
@media (min-width: 760px) {
  .workplane-surface[data-skill="Double-click"] #task-mouse,
  .workplane-surface[data-skill="Double-click"] #task-visual { grid-column: auto; }
}