/* Shared approved presentation. Original scene geometry and print sheets stay intact. */
@media screen{
 #test-rows .state-change{background:#e5ece8;color:#273e34}
 #test-rows .water-change{background:#e5eff3;color:#243f4b}
 .trace-key{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:#59675c;margin:14px 0}
 .trace-key span{display:flex;align-items:center;gap:7px}.trace-key i{width:12px;height:12px;border:1px solid #89968d}
 .state-swatch{background:#e5ece8}.water-swatch{background:#e5eff3}
 .table-wrap #test-rows tr.selected{background:transparent;outline:1px solid #7a2021;outline-offset:-1px}
 .family-surface .chapter{display:none}
 .chapter-files{align-items:stretch}
 .family-surface .world-heading{display:block}
 .family-surface .world-heading.title{margin:0 0 15px;padding:0}
 .family-surface .world-heading h2{max-width:none;font-size:clamp(25px,1.6vw,36px);line-height:1.15}
 .family-surface .world-heading p{max-width:none;margin:12px 0 16px;padding:0;font-size:16px;line-height:1.5}
 .family-surface .world-heading br{display:none}
 .family-surface .theme-note{display:none}
 .family-surface .mission{background:white;border-block:1px solid var(--line);border-radius:0;margin-bottom:22px;padding:12px 0;font-size:14px}
 .family-surface .commands{grid-template-columns:repeat(3,minmax(0,1fr))}
 .family-surface[data-mode=repair] .commands{grid-template-columns:repeat(2,minmax(0,1fr))}
 .family-surface .commands button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:100px;padding:13px}
 .family-surface[data-mode=repair] .commands button{flex-direction:row;align-items:center;min-height:62px}
 .family-surface .commands small{font-size:12px;line-height:1.4}
 .family-surface .program-heading:not(.second)>span{display:none}
 .family-surface .program-heading:not(.second){margin:0}
 .family-surface .program-heading:not(.second) h2{font-size:clamp(25px,1.6vw,36px);line-height:1.15;margin:0}
 .family-surface .program>.section-kicker{display:block;margin:0 0 12px}
 .family-surface .hint{font-size:14px;line-height:1.5;color:#606b60}
 .family-surface .speech.atelier-note{max-width:none;transform:rotate(-.6deg);margin-top:22px}
 .family-surface .speech.atelier-note>img{display:none}
 .family-surface .speech.atelier-note p{font:16px/1.5 'IBM Plex Sans',sans-serif}
 .family-surface .program-heading.second{flex-wrap:wrap;gap:10px}
 .family-surface .program-heading.second>span{display:none}
 .family-surface .program-heading.second h2{margin-right:auto}
 @media(min-width:1100px){
 .family-surface.focus-board .game-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:36px}
 .family-surface.focus-board .commands button{min-height:120px}
 .family-surface.focus-board .commands strong{font-size:clamp(18px,1.2vw,26px)}
 .family-surface.focus-board .commands small,.family-surface.focus-board .hint{font-size:clamp(14px,.85vw,19px)}
 .family-surface.focus-board #queue{max-height:none;overflow:visible}
 .family-surface.focus-board #queue li{flex:0 0 calc(16.666% - 8px)}
 .family-surface.focus-board #paper{display:block;margin-top:24px}
 .family-surface.focus-board .partner{margin-top:26px}
 }
 .family-surface [data-stage="2"] #queue{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 0;max-height:none;overflow:visible;background:none}
 .family-surface [data-stage="2"] #queue li{width:auto;max-width:none;min-width:0}
 .family-surface [data-stage="2"] #queue .fixed-step,.family-surface [data-stage="2"] #queue .gap-step{min-height:110px;width:100%;min-width:0;padding:18px 12px;border:1px solid #aeb9a5;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
 .family-surface [data-stage="2"] #queue strong{font:500 18px/1.35 'IBM Plex Sans',sans-serif}
 .family-surface [data-stage="2"] #queue .fixed-step{position:relative}
 .family-surface [data-stage="2"] #queue .fixed-step>span:first-child{display:none}
 .family-surface [data-stage="2"] #queue small{position:absolute;top:12px;left:12px;font-size:12px;margin:0}
 .family-surface .other-edits{border-top:1px solid var(--line);margin:14px 0;padding-top:12px}
 .family-surface .other-edits summary{cursor:pointer;font-size:14px;min-height:44px;padding:10px 0;color:var(--sage)}
 .family-surface #editor>.edit-actions:first-of-type{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
 .family-surface #move-up,.family-surface #move-down{min-height:52px;font-size:16px;width:100%}
 .family-surface .other-edits .edit-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-block:10px}
 .family-surface .other-edits button{font-size:14px;min-height:48px;text-align:left}
 .family-surface .commands b{font-size:26px;height:28px;line-height:1}
 .family-surface .atelier-topline #back{font:12px 'IBM Plex Sans',sans-serif;background:white;border:0;padding:0;min-height:24px;color:var(--accent)}
 .family-surface #restore{font-size:12px;min-height:44px}
 .family-surface .world-caption{font-size:12px;line-height:1.5}
 .family-surface .desk{background:white;border:0;gap:30px;align-items:start}
 .family-surface .demo{border-left:1px solid var(--line);padding:0 0 24px 30px}
 .family-surface .desk-art{border:1px solid #c8d0bf;border-radius:2px}
 .family-surface .desk-note{background:#eef1e8;border:1px solid #c8d0bf;transform:rotate(-1deg)}
 .family-surface .desk-note p{font:16px/1.5 'IBM Plex Sans',sans-serif}
 .family-surface .demo h2,.family-surface .work h2,.family-surface .exchange h2{font-weight:600}
 .family-surface .demo button,.family-surface .actions a{min-height:48px;border-radius:2px}
 .family-surface .work{border-top:1px solid var(--line);padding-top:28px}
 .family-surface .legend b{background:#f6f6f3;border-radius:2px}
 .family-surface .reading-example,.family-surface .check{background:#eef1e8}
 .family-surface .start-cover{background:#fff}
 .family-surface .start-cover h2{font-weight:600}
 .family-surface .start-cover button{min-height:48px;background:var(--accent);border-radius:2px}
 .family-surface .review-waiting{margin-bottom:24px}
 .family-surface #paper{background:#eef1e8;border-radius:0;border-top:1px solid #a9b7a3}
 .family-surface .atelier-back{color:var(--accent);font-size:12px;text-decoration:none}
 .family-surface .section-kicker{display:block}
 .paper-surface{--paper-grid-size:clamp(360px,32vw,560px)}
 .paper-surface .desk{grid-template-columns:300px minmax(0,1fr);max-width:1440px;margin:24px 0 34px;gap:34px}
 .paper-surface .desk-art{min-height:310px;height:310px}
 .paper-surface .desk-art>img{object-fit:cover;opacity:1}
 .paper-surface .desk-note{left:14px;top:14px;padding:12px 14px;max-width:calc(100% - 28px)}
 .paper-surface .desk-note p{font-size:14px}.paper-surface .desk-note span{font-size:9px}
 .paper-surface .desk #model{width:40%;height:43%}
 .paper-surface .demo{padding-bottom:0}
 .paper-surface .demo h2{margin:8px 0 12px;font-size:28px}
 .paper-surface .demo p{font-size:16px;margin:10px 0}
 .paper-surface #demo-code{display:flex;gap:12px;padding:0;list-style:none;counter-reset:instruction;margin:18px 0}
 .paper-surface #demo-code li{flex:1;border:1px solid #c8d0bf;border-left:3px solid transparent;background:#f7f8f4;padding:12px;font-size:16px;counter-increment:instruction}
 .paper-surface #demo-code li:before{content:counter(instruction,decimal-leading-zero);display:block;font:11px 'IBM Plex Mono',monospace;color:var(--sage);margin-bottom:8px}
 .paper-surface #demo-code li.active{border-left-color:var(--sage);background:#e5ece8}
 .paper-surface #demo-grid{max-width:480px;margin:18px 0 26px}
 .paper-surface #demo-grid span{aspect-ratio:1.6}
 .paper-surface #demo-status{min-height:24px;margin:8px 0 12px}
 .paper-surface .demo button{font-size:15px}
 .paper-surface .work{max-width:1440px;padding-top:24px}
 .paper-surface .section-heading{max-width:960px}
 .paper-surface .section-heading h2{font-size:30px;margin:9px 0 14px}
 .paper-surface .section-heading p{font-size:16px;line-height:1.6}
 .paper-surface .legend{margin:22px 0 16px;font-size:15px}
 .paper-surface .reading-example{max-width:1100px;font-size:15px;line-height:1.6;border-left:3px solid #71876d;padding:14px 18px}
 .paper-surface .paper-layout{grid-template-columns:var(--paper-grid-size) minmax(0,1fr);gap:36px;align-items:start;margin-top:24px}
 .paper-surface #paper-grid{width:var(--paper-grid-size);height:var(--paper-grid-size)}
 .paper-surface .paper-layout>div:first-child{padding-top:77px}
 .paper-surface .paper-layout h3{font-size:22px;line-height:27px;margin:0 0 8px}
 .paper-surface .paper-layout>div>p{font-size:13px;line-height:20px;margin:0 0 22px}
 .paper-surface .paper-layout ol{grid-template-columns:1fr;gap:0;margin:0;height:var(--paper-grid-size);grid-template-rows:repeat(12,minmax(0,1fr))}
 .paper-surface .paper-layout ol li{min-height:0}
 .paper-surface .paper-layout ol button{height:100%;min-height:0;display:flex;align-items:center;gap:20px;border-radius:0;border:0;border-bottom:1px solid #c8d0bf;padding:7px 14px;background:white;font-size:clamp(14px,.85vw,18px)}
 .paper-surface .paper-layout ol button small{display:block;flex:0 0 68px;margin:0;font-size:11px;color:#59675c}
 .paper-surface .paper-layout ol button[aria-pressed=true]{background:#e5ece8;color:#273e34;border-left:3px solid var(--sage)}
 .paper-surface .paper-layout .caption{margin:14px 0;font-size:13px}
 .paper-surface .actions{margin:24px 0 34px}
 .paper-surface .exchange{max-width:1440px;padding:26px 0}
 .paper-surface .exchange p{font-size:16px;line-height:1.65}
 @media(min-width:1100px) and (min-height:700px){
  body.board-mode:not(.paper-surface){height:100dvh;overflow:hidden}
  .board-mode:not(.paper-surface) main{height:calc(100dvh - 53px);display:flex;flex-direction:column;min-height:0;padding-bottom:8px}
  .board-mode:not(.paper-surface) main>*{flex-shrink:0}
  .board-mode:not(.paper-surface) .experience-layout{flex:1 1 0;min-height:0}
  .board-mode:not(.paper-surface) .game-layout{height:100%;min-height:0}
  .board-mode:not(.paper-surface) .world{height:100%;min-height:0}
  .board-mode:not(.paper-surface) .program,.board-mode:not(.paper-surface) #review-pane{height:100%;max-height:100%!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:8px}
  .board-mode:not(.paper-surface) .board{width:min(100%,var(--board-scene-size,500px));margin-block:0;box-shadow:none}
  .board-mode:not(.paper-surface) .workspace-more{margin:8px 0 0;padding-top:4px}
  .board-mode:not(.paper-surface) .teacher{margin:7px 0 0;max-height:120px;overflow:auto}
  .board-mode:not(.paper-surface) .teacher summary{min-height:24px}
  .board-mode:not(.paper-surface) .mission{margin-bottom:12px;padding-block:8px}
  .family-surface.board-mode .board{width:min(100%,var(--board-scene-size,650px));margin-left:0}
  .family-surface.board-mode .program{max-height:none;overflow:visible;padding-right:0}
  .family-surface.board-mode .run-row{position:static}
 }
 @media(min-width:1680px){.family-surface.wide-board .experience-layout{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}.family-surface.wide-board #review-pane{max-height:none;overflow:visible}}
 @media(min-width:701px) and (max-width:1000px){
  .paper-surface{--paper-grid-size:360px}.paper-surface .desk{grid-template-columns:240px minmax(0,1fr);gap:22px}
  .paper-surface #demo-code{flex-direction:column;gap:7px}.paper-surface #demo-code li{padding:10px;font-size:14px}
  .paper-surface #demo-code li:before{display:inline-block;margin:0 10px 0 0}
  .paper-surface .paper-layout{grid-template-columns:1fr;gap:20px}.paper-surface .paper-layout>div:first-child{padding-top:0}
  .paper-surface .paper-layout ol{height:auto;grid-template-rows:none}.paper-surface .paper-layout ol button{min-height:48px}
 }
 @media(max-width:700px){
  .paper-surface{--paper-grid-size:min(100%,440px)}
  .paper-surface .desk{grid-template-columns:1fr;gap:14px}.paper-surface .desk-art{display:none}
  .paper-surface #demo-code{flex-direction:column;gap:8px}.paper-surface #demo-code li{font-size:15px;padding:10px 12px}
  .paper-surface #demo-code li:before{display:inline-block;margin:0 12px 0 0}
  .paper-surface .paper-layout{grid-template-columns:1fr;gap:22px}.paper-surface .paper-layout>div:first-child{padding-top:0}
  .paper-surface #paper-grid{width:100%;height:auto;max-width:440px}
  .paper-surface .paper-layout ol{height:auto;grid-template-rows:none}
  .paper-surface .paper-layout ol button{min-height:48px;font-size:13px;padding:9px 5px;gap:10px}
  .paper-surface .paper-layout ol button small{flex-basis:56px;font-size:10px}
  .family-surface [data-stage="2"] #queue{gap:7px}.family-surface [data-stage="2"] #queue .fixed-step,.family-surface [data-stage="2"] #queue .gap-step{padding:12px 5px;min-height:115px}.family-surface [data-stage="2"] #queue strong{font-size:13px}
  .family-surface .world-heading p{font-size:14px}
  .family-surface .commands{gap:7px}.family-surface .commands button{padding:10px;min-height:98px;gap:5px}
  .family-surface .commands strong{font-size:14px}.family-surface .commands small{font-size:11px}
  .family-surface .demo{border-left:0;padding:20px 0 0}
  .family-surface .desk{gap:12px}.family-surface .desk-art{min-height:320px}
  .family-surface .atelier-topline{gap:12px;font-size:9px}
 }
 /* Keep navigation and controls legible without shrinking the approved artwork. */
 .chapter-files a>span{display:block;overflow-wrap:anywhere}
 .screen-tools button{touch-action:manipulation}
 .water-atelier .table-wrap{overscroll-behavior-inline:contain}
 .water-atelier .table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
 @media(min-width:951px) and (max-width:1250px){
  .water-atelier .chapter-files a{padding-inline:7px}
  .water-atelier .chapter-files a>span{font-size:12px}
  .water-atelier .chapter-files small{font-size:8px}
 }
 @media(max-width:900px){
  .water-atelier .game-layout{grid-template-columns:minmax(0,1fr);gap:26px}
  .water-atelier .program{padding-left:0;border-left:0}
  .water-atelier .world{max-width:620px;width:100%;margin-inline:auto}
 }
 @media(max-width:650px){
  .water-atelier header{height:auto;min-height:66px;flex-wrap:wrap;padding-block:8px;gap:4px}
  .water-atelier .screen-tools{flex:1 1 100%;justify-content:space-between;gap:8px;margin:0}
  .water-atelier .screen-tools button{font-size:12px;min-height:44px}
  .water-atelier .screen-tools #fullscreen{display:inline-flex;align-items:center}
  .water-atelier .chapter-files{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 8px;max-width:none}
  .water-atelier .chapter-files a{grid-column:span 2;margin:0;padding:10px 8px;min-height:68px}
  .water-atelier .chapter-files a:nth-last-child(-n+2){grid-column:span 3}
  .water-atelier .chapter-files a>span{font-size:13px;line-height:1.35}
  .water-atelier .chapter-files small{font-size:9px;margin-bottom:5px}
  .water-atelier .world-heading{display:block}
  .water-atelier .world-title,.water-atelier .world-heading h2,.water-atelier .world-heading>p{max-width:none}
  .water-atelier .world-heading>p{padding-top:0;margin-top:10px;font-size:14px;line-height:1.5}
  .water-atelier .rules summary,.water-atelier .teacher summary{min-height:44px;padding-block:10px}
  .water-atelier #board-stop{min-height:44px}
 }
 @media(min-width:1100px) and (max-height:699px){
  body.board-mode{height:auto;overflow:auto}
  .board-mode:not(.paper-surface) main{height:auto;display:block}
  .board-mode .experience-layout{display:block}
  .board-mode .world,.board-mode .game-layout{height:auto}
  .board-mode .program,.board-mode #review-pane{height:auto;max-height:none!important;overflow:visible!important}
  .board-mode .board{width:min(100%,440px)}
 }
 @media(min-width:1100px) and (min-height:700px) and (max-height:700px){
  .board-mode .campaign{margin:8px 0 14px}
  .board-mode .campaign .handwritten{display:none}
  .board-mode .campaign h1{font-size:26px}
  .family-surface.board-mode .world-heading p{font-size:14px;line-height:1.4;margin:8px 0}
  .family-surface.board-mode .world-heading h2{font-size:24px}
  .board-mode .water-readings{margin-top:6px;padding-top:4px}
  .board-mode .water-readings>div{padding-block:5px}
  .board-mode .water-readings strong{font-size:24px;margin-top:2px}
  .board-mode .water-readings span{font-size:10px}
  .family-surface.board-mode .commands button{min-height:88px}
 }
}

/* Reserve header controls across font loading and sound label changes. */
@media(min-width:651px){.screen-tools #sound{width:88px}.screen-tools #board-mode{width:133px}.screen-tools #fullscreen{width:142px}}