@font-face{font-family:Jua;src:url(assets/Jua-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Pretendard;src:url(assets/PretendardVariable.woff2) format("woff2");font-display:swap}
:root{--ink:#223a53;--deep:#152f43;--sky:#dcedec;--paper:#fff9eb;--gold:#ffd373;--coral:#f48c73;--mint:#cde8da;--space:26px;color:var(--ink);font-family:Pretendard,system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,p,figure{margin:0}
body{height:100dvh;overflow:hidden;background:#172e41}
body,button,textarea{font-size:21px}
p{line-height:1.53;word-break:keep-all;overflow-wrap:break-word}
h1,h2,.button,.brand,.kicker,.pin{font-family:Jua,sans-serif;font-weight:400;word-break:keep-all}
h1{font-size:54px;line-height:1.03;letter-spacing:-.025em}
h2{font-size:29px;line-height:1.15}
button,textarea{color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #a22a47;outline-offset:4px}
h1:focus{outline:none}
a{color:#1e5963}
.icon{width:1.17em;height:1.17em;flex:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#app{position:absolute;left:50%;top:50%;width:1600px;height:900px;display:flex;flex-direction:column;overflow:hidden;background:#f1eddb;background-image:radial-gradient(ellipse at top,#f8f4e1,#ddebe5);transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center}
#content{flex:1;min-height:0;display:flex;flex-direction:column}
.top{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:9px var(--space) 11px;background:var(--paper);border-bottom:3px solid var(--ink);box-shadow:0 4px #dcab5c}
.top nav{display:flex;gap:9px}
.brand{padding:0;justify-self:start;display:flex;align-items:center;gap:11px;border:0;background:none;text-align:left;font-size:27px;line-height:1.03}
.brand small{display:block;margin-top:4px;font-family:Pretendard,sans-serif;font-size:.52em;color:#3c6170;font-weight:750}
.brand-mark{display:grid;place-items:center;width:1.6em;height:1.6em;border:2px solid var(--ink);border-radius:12px;background:var(--mint);color:var(--deep)}
.full-button{justify-self:end}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.42em;min-height:48px;border:2px solid var(--ink);border-radius:13px;background:var(--paper);box-shadow:0 4px var(--ink);padding:.56em .85em;font-size:23px;line-height:1.06;text-align:center;transition:background .16s,transform .16s,box-shadow .16s}
.button:hover:not([aria-disabled="true"]){background:#e5f4f2;transform:translateY(-2px);box-shadow:0 6px var(--ink)}
.button:active:not([aria-disabled="true"]){transform:translateY(3px);box-shadow:0 1px var(--ink)}
.button.primary{background:var(--gold)}
.button.primary:hover:not([aria-disabled="true"]){background:#ffe4a4}
.button.light{background:#f9f7eb}
.button[aria-disabled="true"]{cursor:wait;filter:saturate(.5)}
.button[aria-current="page"]{background:var(--mint)}
.button.nav-button{min-height:42px;padding:.38em .62em;font-size:19px;border-radius:10px;box-shadow:0 3px var(--ink)}
.kicker{display:inline-flex;align-items:center;gap:.35em;width:fit-content;background:var(--mint);border:1.5px solid var(--ink);border-radius:9px;padding:.26em .55em;font-size:18px;line-height:1.15}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:13px}
.cover{flex:1;min-height:0;display:flex;position:relative;align-items:center;padding:100px;background:linear-gradient(90deg,#122c45ee 0%,#142f48ca 29%,#18394e33 57%,transparent 74%),url(assets/case-cover.webp) center/cover,#214562}
.cover-copy{width:min(59%,1160px);color:var(--paper)}
.cover .kicker{color:var(--ink);background:var(--gold)}
.cover h1{font-size:136px;line-height:.98;margin:.13em 0 .17em;text-shadow:0 5px #112d44;letter-spacing:-.035em}
.cover p{font-size:28px;margin-bottom:32px;font-weight:640;text-shadow:0 2px #142f48}
.cover .button{color:var(--ink);font-size:26px}
.cover-caption{position:absolute;right:var(--space);bottom:var(--space);color:var(--paper);background:#18364be0;padding:.45em .8em;border:1px solid #f6e9c1;border-radius:6px;font-family:Jua,sans-serif}
.stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;padding:23px var(--space) 24px}
.stage-head{display:flex;align-items:end;justify-content:space-between;gap:12px}
.stage-head h1{margin:.12em 0 .05em}
.stage-head p{color:#365561;font-weight:640}
.stage-head>.button{flex:none;margin-bottom:4px}
.lab-work,.map-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:18px}
.panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.pane{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;place-items:center;position:relative;overflow:hidden;isolation:isolate;min-height:0;border:3px solid var(--ink);border-radius:21px;background:#e1eff0;box-shadow:0 5px var(--ink)}
.pane figcaption{justify-self:start;display:grid;gap:6px;padding:14px;line-height:1.12;z-index:1}
.pane-badge{width:fit-content;font-size:.78em;font-weight:800;background:#f8fff4;border:1px solid #738d8d;border-radius:7px;padding:.24em .44em}
.live .pane-badge{background:var(--gold);border-color:#967237}
.pane figcaption strong{font-family:Jua;font-size:28px;font-weight:400}
.pane p{justify-self:stretch;text-align:center;background:#fff9efbd;border-top:1px solid #233a5333;font-weight:720;padding:.6em .45em;font-size:18px}

.field-book,.map-side{display:flex;flex-direction:column;gap:15px;min-width:0;padding:18px;border:3px solid var(--ink);border-radius:21px;background:var(--paper);box-shadow:0 5px var(--ink)}
.term{border-left:4px solid #4a877b;padding:.3em .58em;background:#e4efe2;border-radius:0 8px 8px 0}
.term strong,.watch-label{font-size:.88em;color:#2f625f;font-weight:850}
.term p{margin-top:.15em}
.reading{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.43em}
.reading>p{font-weight:630}
.reading .pose{align-self:center;margin:auto 0 0;width:160px;height:auto;aspect-ratio:1}
.pose{display:block;width:150px;aspect-ratio:1;background:url(assets/poses-v2.webp) 0 0/200% 200% no-repeat}
.pose.idea{background-position:0 100%}
.pose.happy{background-position:100% 100%}
.stamp{display:inline-flex;align-items:center;gap:.26em;border:2px dashed #507451;border-radius:6px;background:#e5f2d1;color:#2d583f;padding:.22em .48em;font-family:Jua;transform:rotate(-3deg);margin:4px 0}
.land{animation:land .35s cubic-bezier(.2,.85,.35,1.25)}
@keyframes land{0%{transform:scale(1.45) rotate(-13deg);opacity:0}100%{transform:scale(1) rotate(-3deg);opacity:1}}
.lab-actions{display:grid;gap:12px;padding-bottom:3px}
.fine{font-size:.83em;color:#45616a}
.map-work{grid-template-columns:minmax(0,1fr) 365px}
.map-board{position:relative;container-type:size;min-height:0;border:3px solid var(--ink);border-radius:23px;background:#cde6ba;box-shadow:0 5px var(--ink);overflow:hidden;isolation:isolate}
.atlas{position:absolute;left:0;top:50%;width:max(100cqw,177.683cqh);aspect-ratio:1672/941;transform:translateY(-50%);background:url(assets/case-map.webp) center/cover}
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:.46em;white-space:nowrap;border:2px solid var(--ink);border-radius:22px 22px 22px 6px;box-shadow:0 5px var(--ink),0 6px 22px #132e45a0;background:var(--paper);padding:.38em .62em .38em .37em;font-size:25px;text-align:left}
.pin-heat{--x:16%;--y:29%;--pin:#ffce79}
.pin-press{--x:38%;--y:50%;--pin:#b9e5e6}
.pin-icon{display:grid;place-items:center;width:1.9em;height:1.9em;border:2px solid var(--ink);border-radius:50%;background:var(--pin)}
.pin-text{display:grid;line-height:1.05}
.pin-text strong{font-weight:400}
.pin small{font-family:Pretendard;font-size:.54em;font-weight:850;color:#34545d;margin-top:3px}
.pin:hover,.pin[aria-pressed="true"]{background:#ffe9ac}
.pin[aria-pressed="true"] .pin-icon{animation:bounce .38s ease both}
@keyframes bounce{45%{transform:scale(1.21) rotate(-12deg)}}
.map-info{flex:1;display:grid;align-items:center}
.map-prompt,.map-clue{display:grid;justify-items:start;gap:9px}
.map-prompt .pose{width:200px;justify-self:center}
.map-clue{animation:unfold .3s ease both}
@keyframes unfold{from{transform:translateY(12px) rotate(-2deg);opacity:.2}to{transform:none;opacity:1}}
.preview{width:100%;height:220px;display:grid;place-items:center;border-radius:10px;background:#e3eeea}
.preview .diagram{max-height:100%;max-width:100%}
.map-footer{display:grid;gap:.6em;border-top:1px dashed #8d9f92;padding-top:.65em;font-size:.92em}
.practice .check-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.question{min-width:0;display:flex;flex-direction:column;gap:15px;border:3px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:0 5px var(--ink);padding:23px}
.question>.button{align-self:start}
.fact{display:grid;gap:8px;background:#e2eee0;border-left:4px solid #589080;border-radius:0 10px 10px 0;padding:16px}
.fact .kicker{background:transparent;border:0;padding:0;color:#265251}
.question fieldset{display:grid;gap:8px;padding:0;margin:0;border:0;min-width:0}
.choice{display:flex;align-items:center;gap:.55em;cursor:pointer;min-height:49px;border:2px solid #79928b;border-radius:11px;padding:.47em .55em;font-weight:630;line-height:1.34;background:#fffdf6}
.choice input{appearance:auto;width:1em;height:1em;flex:none;accent-color:#285e62;margin:0}
.choice:has(:checked){background:#dbeee0;border-color:#37706b}
fieldset:disabled .choice{cursor:default}
.feedback{color:#345954;font-weight:700}
.feedback:empty{display:none}
.finish{justify-content:end}
.finish:empty{display:none}
.notes textarea{border:2px solid #678982;border-radius:10px;min-height:130px;width:100%;padding:.58em;resize:vertical;font:inherit;background:#fffef7}
details{line-height:1.5}
details summary{cursor:pointer;font-weight:720}
details a{display:block;overflow-wrap:anywhere}
.archive{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:.6em}
.end-stage{display:grid;grid-template-columns:minmax(0,45%) minmax(0,1fr);align-items:center;background:radial-gradient(ellipse at 23% 55%,#ffdf89,transparent 47%)}
.end-art{display:grid;place-items:center}
.end-art .pose{width:min(100%,510px)}
.end-copy{display:grid;gap:18px;max-width:65ch}
.everyday{display:grid;gap:8px}
.everyday .fact{padding:.55em .72em;gap:.15em}
.everyday .fact strong{display:flex;align-items:center;gap:.3em}
.storage:empty{display:none}
.storage{position:absolute;bottom:0;left:0;right:0;z-index:4;background:#fff0c1;padding:.4em var(--space);font-size:.85em}

/* A single 1600 × 900 board. Each stage and art layer scales with the board. */
.device-gate{
  width:min(92%,560px);margin:auto;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  background:var(--paper);padding:24px;border:3px solid #e1b66a;border-radius:20px;text-align:center
}
.device-gate .pose{width:112px;margin:0 auto 12px}
.device-gate h1{font-size:clamp(28px,6vw,43px);margin-bottom:10px}
.device-gate p{font-size:clamp(16px,3vw,21px)}
.lab .pane{grid-template-rows:65px minmax(0,1fr) 43px;align-items:stretch}
.lab-work,.map-work{grid-template-rows:minmax(0,1fr)}
.field-book,.map-side,.panes{min-height:0}
.field-book p{line-height:1.43}
.lab .pane figcaption{display:flex;align-items:center;gap:9px}
.lab .pane p{display:grid;place-items:center;padding:.32em}
.pane .diagram{height:100%}
.diagram{
  display:block;position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:0;
  background:linear-gradient(#132c4820,#132c4800),url(assets/workshop-bench.webp) center/cover;
  --progress:0;--dip:0;--rise:0;--stroke:0;--air-shift:0px;
}
.diagram-heat{background:linear-gradient(#17364833,transparent 70%),url(assets/greenhouse-bench.webp) center/cover}
.diagram .sprite{display:block;position:absolute;object-fit:contain;object-position:center bottom;user-select:none;pointer-events:none}
.bench-shadow{
  position:absolute;left:24%;right:24%;bottom:14%;height:7%;
  background:radial-gradient(ellipse,#27191097,transparent 70%)
}
.diagram .sprite-pump{left:15%;bottom:18%;height:40%;width:26%;transform-origin:bottom;transform:scaleY(calc(1 - .075 * var(--stroke)))}
.diagram .sprite-balloon{
  left:45%;bottom:38%;height:57%;width:37%;transform-origin:50% 100%;
  transform:scale(calc(.28 + .72 * var(--progress)));
}
.hose{
  position:absolute;left:29%;bottom:19%;width:36%;height:20%;
  border:8px solid #233951;border-top:0;border-radius:0 0 43% 37%;
  box-shadow:inset 0 -3px #79a2ae,0 3px 3px #21332f70;
  transform:rotate(-12deg);z-index:0
}
.hose i{position:absolute;inset:auto 6% 0;height:5px;opacity:0;background:repeating-linear-gradient(90deg,transparent 0 12px,#fff6a2 12px 24px);background-position-x:var(--air-shift)}
.hose-tip{position:absolute;left:62.7%;bottom:34.4%;width:9px;height:5.2%;border-radius:5px;background:#233951;transform:rotate(-5deg)}
.flowing .hose i{opacity:1}
.diagram-air.flowing::after{
  content:'';position:absolute;left:63%;bottom:35%;width:4px;height:4.4%;
  background:repeating-linear-gradient(0deg,transparent 0 7px,#fff6a2 7px 13px);
  background-position-y:calc(-1 * var(--air-shift));z-index:3;
}
.heated-flask{position:absolute;inset:0;transform:translateY(calc(8% * var(--dip)))}
.diagram .sprite-flask{left:31%;bottom:20%;width:38%;height:52%}
.soap-film,.soap-bubble{position:absolute;left:50%;transform:translateX(-50%);bottom:69.5%}
.soap-film{height:2.3%;width:13%;border:2px solid #e7ffff;border-radius:50%;background:#5dc1d177;box-shadow:0 0 8px #efffff8c}
.soap-bubble{
  width:calc(12% + 11% * var(--rise));height:calc(1% + 29% * var(--rise));
  border:2px solid #edffffbd;border-radius:54% 54% 44% 44% / 62% 62% 38% 38%;
  opacity:var(--rise);box-shadow:inset 0 0 9px #fff6de8c,0 0 5px #254f69;
  background:radial-gradient(ellipse at 30% 28%,#fff9 0 7%,transparent 15%),linear-gradient(140deg,#b5eff69c,#bca5f27a 45%,#ffbcad79 69%,#a4efdd9e);
}
.diagram .sprite-warm-bath{left:21%;bottom:12%;width:58%;height:26%;opacity:var(--dip)}
.diagram [data-part=water]{clip-path:inset(48% 0 0);opacity:calc(.72 * var(--dip))}
.diagram-press{background:#263a47}
.pressure-frame{position:absolute;inset:0;background:url(assets/pressure-comparison.png) left 64% / 200% auto no-repeat}
.diagram-press.under-load .pressure-frame{background-position:right 64%}
.preview{overflow:hidden}
.preview .diagram{height:100%}
.preview .hose,.compare-art .hose{border-width:4px}
.compare-practice .check-grid{min-height:0}
.compare-practice .question{gap:9px;padding:15px}
.compare-practice h2{font-size:27px}
.compare-practice .choice{min-height:44px;font-size:19px}
.compare-practice .feedback{font-size:17px}
.compare-art{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare-art figure{overflow:hidden;border:2px solid var(--ink);border-radius:10px;background:#faf1d6}
.compare-art .diagram{height:190px}
.compare-art figcaption{padding:4px;text-align:center;font-weight:750;font-size:18px}
.question-actions{display:flex;gap:10px;margin-top:auto}
.question-actions .button{min-height:42px;font-size:19px}
.archive-list{max-height:300px;overflow:auto}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Optional village observations and the illustrated notebook share the lesson board. */
.pin-example{background:#e6f1dc;border-radius:20px 20px 20px 5px;--pin:#b4dfb4;font-size:23px}
.pin-bottle{--x:79%;--y:49%}
.pin-shoe{--x:84%;--y:29%}
.pin-snack{--x:60%;--y:17%}
.example-image{display:block;width:100%;object-fit:cover}
.map-photo{height:250px;object-position:center 54%;border:2px solid var(--ink);border-radius:12px}
.life-stage .stage-head h1{font-size:48px}
.life-stage .lab-work{grid-template-columns:minmax(0,1fr) 336px}
.life-photo{display:grid;grid-template-rows:56px minmax(0,1fr);min-height:0;overflow:hidden;border:3px solid var(--ink);border-radius:19px;background:#e2eee0;box-shadow:0 5px var(--ink)}
.life-photo figcaption{display:flex;align-items:center;padding:0 15px;background:var(--paper);border-bottom:2px solid var(--ink);font:25px Jua,sans-serif}
.life-photo .example-image{height:100%;object-fit:contain;background:#324b4b}
.photo-cover{display:grid;place-content:center;justify-items:center;gap:14px;padding:28px;text-align:center;background:radial-gradient(circle,#fff8db,#e0efdd)}
.photo-cover .pose{width:166px}
.photo-cover p{font-weight:700}
.photo-reveal{animation:unfold .3s ease both}
.life-guide .stamp{align-self:flex-start}
.life-guide .lab-actions{margin-top:auto}
.note-stage .notes{grid-template-columns:1.07fr 1fr;min-height:0}
.notes .question{gap:12px;padding:19px;min-height:0;overflow:auto;scrollbar-gutter:stable}
.note-record{padding:9px 11px 10px;border:1px solid #a7bfae;border-radius:12px;background:#edf3e7}
.record-head,.writing-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.record-head{margin-bottom:8px}
.record-head h3{display:flex;align-items:center;gap:6px;margin:0;font:24px Jua,sans-serif}
.record-head .button{min-height:35px;font-size:16px}
.note-record .compare-art{gap:9px}
.note-record .diagram{height:127px}
.note-record figcaption{font-size:15px;padding:3px}
.note-record p{margin-top:7px;font-size:17px;line-height:1.38}
.writing-head{background:#e4eee3;border-radius:10px;padding:12px 15px}
.writing-head p{font-size:19px;margin-top:5px}
.writing-head .pose{flex:none;width:83px}
.note-writing textarea{height:58px;min-height:58px;resize:none;background:#fffdf5;font-size:17px;font-weight:500}
.note-life{display:grid;gap:9px;margin-top:5px;border-top:1px dashed #9bae9f;padding-top:12px}
.life-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.life-thumb{
  width:100%;min-width:0;display:grid;grid-template-rows:83px auto auto;text-align:left;padding:0;overflow:hidden;
  border:2px solid var(--ink);border-radius:11px;background:#f5edce;box-shadow:0 3px var(--ink)
}
.life-thumb:hover{background:#e2f2d6}
.life-thumb .example-image{height:83px;object-position:center 60%}
.life-thumb strong{padding:6px 8px 0;font:20px Jua,sans-serif}
.life-thumb small{padding:0 8px 6px;font-size:14px;color:#34545d;font-weight:780}
.notes .archive-list{max-height:145px}
.note-writing.question{gap:6px}
.note-record-status{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px}
.note-record-status details{font-size:16px}
.note-record-status details[open]{flex-basis:100%}
.note-stage{gap:12px;padding-bottom:17px}
.note-stage .note-evidence>.note-record:last-child,.note-stage .note-life{margin-top:auto}
.note-stage .note-record .diagram{height:108px}
.note-stage .note-record p{font-size:16px}
.note-stage .life-thumb{grid-template-rows:74px auto auto}
.note-stage .life-thumb .example-image{height:74px}
.note-stage .cause-options{margin-bottom:0}
.note-stage .cause-feedback:empty{display:none}
.note-footer{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0 4px 4px}
.note-footer .button{min-height:44px}
.note-footer p{font-size:16px}
.note-footer button[aria-disabled=true]{opacity:.65;cursor:wait}
.note-line{display:grid;gap:4px;font-size:19px;font-weight:800}
.writing-head{padding:7px 12px}
.writing-head .pose{width:57px}
.writing-head p,.note-life>p{font-size:16px}
.note-life{gap:6px;padding-top:8px;margin-top:0}
.life-thumbs{align-items:start}
.cause-options{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 3px}
.button.cause-choice{min-height:36px;font-size:17px;padding:.3em .35em;border-radius:8px;box-shadow:0 2px var(--ink)}
.cause-choice[aria-pressed=true]{background:#cde8da}
.cause-feedback{font-size:15px;line-height:1.35;color:#244c46;min-height:1.35em}
.cause-feedback:empty{min-height:0}
.answer-observation,.answer-explanation{border-left:4px solid #619588;border-radius:0 10px 10px 0;background:#e5efe2;padding:8px 12px;font-size:17px}
.answer-observation p,.answer-explanation dd{line-height:1.35}
.answer-explanation h3{margin:0 0 5px;font:21px Jua,sans-serif;color:#244d49}
.answer-explanation dl{display:grid;gap:5px;margin:0}
.answer-explanation dl div{display:grid;grid-template-columns:155px 1fr;gap:8px}
.answer-explanation dt{font-weight:800;word-break:keep-all}
.answer-explanation dd{margin:0;word-break:keep-all}
.compare-practice .question-actions{margin-top:1px}
.note-export{width:1600px;flex:none;background:#f2f0df;color:#223a53;font-family:Pretendard,system-ui,sans-serif;padding-bottom:25px}
.note-export .notes{flex:none}
.note-export .notes .question{overflow:visible;scrollbar-gutter:auto}
.note-export .note-evidence>.note-record:last-child,.note-export .note-life{margin-top:0}
.note-export .note-record .diagram{height:160px}
.note-export .life-thumb{grid-template-rows:120px auto}
.note-export .life-thumb .example-image{height:120px}
.note-export .life-thumb strong{padding-bottom:6px}
.note-export .archive-list{max-height:none;overflow:visible}
.note-export .archive,.printed-entry{white-space:pre-wrap;overflow-wrap:anywhere}
.printed-entry{min-height:52px;border:2px solid #678982;border-radius:10px;padding:9px 12px;background:#fffdf5;font-size:19px;font-weight:500}
.printed-choice{font-size:17px;font-weight:750;margin:7px 0 3px}
@media(prefers-reduced-motion:reduce){.photo-reveal{animation:none}}