:root { color-scheme: light; --paper:#f1e5c8; --ink:#392d25; --blue:#244f7b; --rust:#a64a25; --line:#b49a73; --gold:#b17b24; font-family:Georgia,'Times New Roman',serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 25% 30%,#fff9e6 0,transparent 65%),linear-gradient(115deg,#eee0bf,#f8eed7 60%,#e4d1ab); }
button,input,textarea,select { font:inherit; }
button,a,select,input,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.5; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
a { color:var(--blue); text-underline-offset:4px; }
.topbar { min-height:76px; display:flex; align-items:center; justify-content:flex-start; gap:20px; padding:0 3vw; border-bottom:1px solid #88704955; position:sticky; top:0; z-index:15; background:#f3e8cded; }
.goto { margin-left:auto; }
.menu { position:relative; }
.menu > summary { list-style:none; cursor:pointer; width:48px; height:44px; display:grid; place-items:center; border:1px solid #8b765944; border-radius:6px; background:#fff9e688; color:#8e5733; }
.menu > summary::-webkit-details-marker { display:none; }
.menu > summary:focus-visible { outline:3px solid #a65b29; outline-offset:3px; }
.case-icon { width:28px; height:23px; fill:currentColor; display:block; }
.menu[open] > summary { background:var(--blue); color:#fff7e5; }
.menu-panel { position:absolute; right:0; top:calc(100% + 8px); min-width:210px; display:flex; flex-direction:column; align-items:stretch; padding:8px; background:#fff4d9; border:1px solid var(--line); box-shadow:3px 4px 0 #74593825; z-index:30; font:15px/1.4 system-ui,sans-serif; }
.menu-panel button { text-align:left; padding:10px 8px; border:0; border-bottom:1px solid #8b765944; background:none; }
.menu-panel button:last-child { border-bottom:0; }
.menu-panel button:hover { background:#f1e1bd; }
.night .menu > summary { background:#20344a; border-color:#73849a; color:#f7e8c7; }
.night .menu-panel { background:#101f33; border-color:#73849a; } .night .menu-panel button:hover { background:#20344a; }
.wordmark { font-size:22px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.wordmark i { color:var(--rust); }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:16px; font:14px/1.4 system-ui,sans-serif; }
nav button,.footbar button { background:none; border:0; padding:8px 0; border-bottom:1px solid #8b765944; }
.place-label { display:flex; align-items:center; gap:8px; }
select { border:1px solid #a88f6866; background:#fff9e688; padding:8px; border-radius:3px; max-width:240px; color:inherit; }
#notebook { position:relative; min-height:calc(100svh - 76px); isolation:isolate; background:inherit; overflow:clip; display:grid; grid-template-columns:35% 65%; align-items:start; }
#world { position:sticky; grid-column:2; grid-row:1; top:0; height:calc(100svh - 76px); min-height:680px; overflow:hidden; background:inherit; }
#ink { position:absolute; width:100%; height:100%; inset:0; pointer-events:none; }
#pieces,#objects { position:absolute; inset:0; }
#pieces { pointer-events:none; }
#objects { pointer-events:none; }
#pieces button { pointer-events:auto; }
#writing { position:relative; grid-column:1; grid-row:1; width:100%; min-height:calc(100svh - 130px); padding:42px 20px 94px 3vw; z-index:2; pointer-events:none; }
#writing>* { pointer-events:auto; }
.eyebrow { font:12px/1.5 system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--rust); margin:0 0 14px; }
h1 { font-size:clamp(32px,3.3vw,54px); font-weight:400; line-height:1.06; letter-spacing:-.035em; margin:0 0 20px; text-wrap:balance; }
.question { font-size:20px; line-height:1.45; }
.concept { font:16px/1.55 system-ui,sans-serif; padding-left:16px; border-left:2px solid var(--rust); color:#594a37; }
.answer-field { display:block; font-size:17px; line-height:1.4; margin:24px 0; }
.answer-field small { display:block; margin:5px 0; font:14px/1.5 system-ui,sans-serif; color:#67543d; }
textarea,input[type=text] { display:block; width:100%; color:var(--ink); background:#fff9e775; border:0; border-bottom:1px solid #907552; padding:12px; margin-top:9px; border-radius:0; font:18px/1.5 Georgia,serif; resize:vertical; min-height:58px; }
textarea:focus,input[type=text]:focus { background:#fffbed; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; align-items:center; }
.primary { border:1px solid #244f7b; background:var(--blue); color:#fff7e5; padding:15px 20px; border-radius:3px; font:16px/1.3 system-ui,sans-serif; box-shadow:3px 4px 0 #244f7b20; }
.quiet { background:none; border:0; padding:9px 0; font:14px/1.4 system-ui,sans-serif; text-decoration:underline; text-underline-offset:4px; }
.source { margin-top:28px; font:14px/1.55 system-ui,sans-serif; color:#66523c; }
.source summary { cursor:pointer; }
.source p { margin:10px 0; }
.reading-links { font:13px/1.6 system-ui,sans-serif; margin:12px 0 22px; }
.reading-links:empty { display:none; }
.reading-links small { display:block; font-size:12px; margin-top:5px; }
.context { font-size:16px; padding:12px 0; border-block:1px solid #8b765944; }
.context summary { cursor:pointer; }
.context p { white-space:pre-wrap; overflow-wrap:anywhere; }
.token { position:absolute; top:0; left:0; transform:translate(-50%,-50%); background:#f8efd9; border:1px solid #927449; border-radius:2px; padding:9px 14px; font-size:clamp(15px,1.2vw,18px); box-shadow:2px 3px 0 #74593825; max-width:180px; line-height:1.2; touch-action:none; user-select:none; }
.token[aria-pressed=true] { background:var(--blue); border-color:var(--blue); color:#fff7df; box-shadow:3px 5px 0 #244f7b20; }
.token:hover { outline:1px solid var(--rust); outline-offset:3px; }
.token.core { background:var(--blue); color:#fff6db; font-size:23px; padding:15px 22px; }
.token.landmark { max-width:200px; background:#f9efd5; border-radius:0; }
.token.landmark[aria-pressed=true] { background:#244f7b; color:#fff7df; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.token.answered { border-bottom:4px solid var(--blue); }
.token.ghost { opacity:.55; }
.instrument-label { position:absolute; pointer-events:none; transform:translate(-50%,-50%); text-align:center; color:var(--rust); font-style:italic; font-size:18px; }
#stage-caption { position:absolute; bottom:84px; left:12%; right:12%; margin:0; text-align:center; font:italic 20px/1.5 Georgia,serif; pointer-events:none; }
#stir { position:absolute; right:30px; bottom:35px; border:1px solid #88704977; border-radius:50%; background:#fbf1d9b0; width:98px; height:98px; font:italic 16px/1.2 Georgia,serif; transform:rotate(-9deg); }
#definition { position:absolute; left:8%; right:8%; top:20px; padding:10px 16px; min-height:48px; pointer-events:none; text-align:center; font:17px/1.5 system-ui,sans-serif; color:var(--blue); z-index:10; }
.footbar { position:absolute; bottom:0; left:3vw; right:3vw; min-height:37px; display:flex; gap:16px; align-items:center; font:12px/1.4 system-ui,sans-serif; color:#6d5a43; pointer-events:none; }
.footbar button { pointer-events:auto; margin-left:auto; }
.round-count { font:italic 32px/1.2 Georgia,serif; color:var(--blue); margin:24px 0 8px; }
.round-count small { font:14px system-ui,sans-serif; color:#6d5a43; margin-left:8px; }
.round-count + .primary { margin-right:14px; }
.custom { margin-top:18px; }
.custom input { font-size:16px; min-height:0; padding:8px; }
.custom summary { font:14px system-ui,sans-serif; cursor:pointer; }
.choice-list { display:grid; gap:9px; margin-block:20px; }
.choice { display:flex; align-items:start; gap:10px; padding:9px; border-bottom:1px solid #90755240; font-size:16px; cursor:pointer; }
.choice input { margin-top:5px; accent-color:var(--blue); width:18px; height:18px; flex:none; }
.choice small { display:block; font:14px/1.5 system-ui,sans-serif; color:#67543d; }
.sprite { position:absolute; width:60%; mix-blend-mode:multiply; pointer-events:none; object-fit:contain; }
.case { width:40%; left:30%; top:30%; }
.plane { width:70%; left:15%; top:12%; }
.luggage-label { position:absolute; left:34%; top:65%; max-width:50%; padding:9px 16px; background:#f6e6bd; border:1px solid var(--line); font-style:italic; text-align:center; overflow-wrap:anywhere; transform:rotate(-5deg); }
.island { width:100%; left:0; top:40%; }
#landscape { position:absolute; inset:32% -70% 0 -20%; background-position:bottom; background-repeat:no-repeat; background-size:100% auto; opacity:0; mix-blend-mode:multiply; pointer-events:none; transition:opacity 1.2s; }
.flying-machine { position:absolute; width:290px; height:195px; left:50%; top:46%; transform:translate(-50%,-50%); filter:drop-shadow(0 15px 7px #69533522); pointer-events:none; z-index:2; }
.machine-rig { width:1000px; height:650px; transform:scale(.29); transform-origin:0 0; position:relative; }
.machine-part { position:absolute; overflow:hidden; }
.machine-part img { position:absolute; max-width:none; }
.machine-body { width:1000px; height:292px; left:0; top:358px; z-index:2; }
.machine-body img { width:1088.59px; left:-41.1px; top:-402.55px; }
.machine-wing { width:490px; height:403px; left:101px; top:30px; transform-origin:95.5% 87.5%; z-index:3; }
.machine-wing img { width:1159.7px; left:-20.38px; top:-5.28px; }
.machine-wing.rear { left:547px; top:20px; transform-origin:4.5% 87.5%; z-index:1; }
.machine-wing.rear img { left:-650.2px; }
.flight-note { position:absolute; left:50%; top:60%; transform:translate(-50%,0) rotate(-4deg); font-style:italic; font-size:16px; color:var(--rust); white-space:nowrap; }
.current-answer { position:absolute; left:23%; top:58%; width:54%; font:italic 22px/1.35 Georgia,serif; text-align:center; white-space:pre-wrap; overflow-wrap:anywhere; max-height:140px; overflow:hidden; color:var(--blue); }
.sun-disc { position:absolute; width:80px; height:80px; border:1px solid #b77928; background:radial-gradient(circle,#e6b86a88,transparent 70%); border-radius:50%; right:24%; top:25%; }
.night .flying-machine { filter:drop-shadow(0 0 20px #eabb7655); }
body:not(.night) .flying-machine { mix-blend-mode:multiply; }
.night .flight-note { color:#e9bb79; }
.chapter-clock .flying-machine { opacity:0; }
.chapter-values .flying-machine { width:190px; height:127px; }
.chapter-values .machine-rig { transform:scale(.19); }
.chapter-values.values-complete .flying-machine { width:320px; height:215px; }
.chapter-values.values-complete .machine-rig { transform:scale(.32); }
.chapter-identity .flying-machine { width:340px; height:225px; }
.chapter-identity .machine-rig { transform:scale(.34); }
.chapter-pack .flying-machine,.chapter-island .flying-machine { display:none; }
.chapter-island .flying-machine.collecting { display:block; z-index:8; }
.machine-cargo { position:absolute; width:25%; aspect-ratio:1312 / 1199; left:50%; top:103%; transform:translateX(-50%); transform-origin:50% -22px; }
.machine-cargo:has(img)::before { content:''; position:absolute; left:50%; top:-22px; height:calc(22px + 8.3%); border-left:1px solid #75562c; z-index:1; }
.cargo-case { width:100%; height:100%; object-fit:contain; display:block; }
.closed-case,.opening-stage img.closed-case { object-fit:fill; mask-image:url('assets/notebook/suitcase-silhouette.svg'); mask-size:100% 100%; mask-repeat:no-repeat; }
.opening-stage { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; aspect-ratio:1.28; mix-blend-mode:multiply; }
.opening-stage img { position:absolute; object-fit:contain; pointer-events:none; mix-blend-mode:multiply; }
.opening-stage .case { width:86%; height:82%; left:7%; top:8%; z-index:3; }
.opening-stage .plane { width:72%; height:53%; left:10%; top:0; opacity:0; z-index:2; }
.opening-stage .island-art { width:100%; height:100%; inset:0; opacity:0; }
.opening-stage .plane-front,.opening-stage .plane-back { width:52%; height:36%; left:20%; top:31%; opacity:0; z-index:2; }
.opening-stage .plane-front { clip-path:inset(0 0 0 48%); }
.opening-stage .plane-back { clip-path:inset(0 52% 0 0); }
.opening-stage .companion-case { width:25%; height:25%; top:59%; opacity:0; z-index:2; }
.opening-stage .companion-one { left:11%; transform:rotate(-8deg); }
.opening-stage .companion-two { left:67%; transform:rotate(9deg); }
.opening-stage .luggage-label { left:37%; top:73%; max-width:43%; z-index:5; font-size:16px; }
.opening-stage[data-scene=island] .island-art { opacity:.9; }
.opening-stage[data-scene=island] .plane-front { opacity:.8; transform:translate(10%,3%) rotate(7deg); }
.opening-stage[data-scene=island] .plane-back { opacity:.8; transform:translate(-7%,-2%) rotate(-5deg); }
.opening-stage[data-scene=island] .case { width:34%; height:35%; top:55%; left:35%; }
.opening-stage[data-scene=island] .luggage-label { top:85%; left:40%; max-width:45%; font-size:14px; }
.opening-stage[data-scene=island] .companion-case { opacity:.7; }
.opening-stage.landing-in-progress .case,.opening-stage.landing-in-progress .companion-case,.opening-stage.landing-in-progress .plane-front,.opening-stage.landing-in-progress .plane-back,.opening-stage.landing-in-progress .luggage-label { opacity:0; }
.chapter-pack #notebook,.chapter-island #notebook { grid-template-columns:57% 43%; }
.chapter-pack #world,.chapter-island #world { grid-column:1; }
.chapter-pack #writing,.chapter-island #writing { grid-column:2; padding-left:30px; padding-right:3vw; }
#warning { position:fixed; bottom:0; z-index:50; background:#572d1b; color:white; margin:0; padding:18px; width:100%; font:16px/1.5 system-ui,sans-serif; }
dialog { background:#fff4d9; color:var(--ink); border:1px solid var(--line); max-width:min(800px,92vw); max-height:86svh; padding:28px; }
dialog::backdrop { background:#241d16aa; backdrop-filter:blur(5px); }
dialog h2 { font-size:30px; font-weight:400; }
dialog button { padding:10px 14px; background:#f1e1bd; border:1px solid var(--line); }
.close { float:right; }
.backup-actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.import-label { display:block; font:15px system-ui,sans-serif; }
.import-label input { display:block; margin:12px 0; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:16px/1.6 Georgia,serif; }
body.night { --ink:#f7e8c7; --paper:#101f33; --rust:#e9b977; --blue:#83b9e9; --line:#73849a; color:var(--ink); background:#101f33; transition:background 2s,color 2s; }
.night .topbar { background:#101f33; }
.night #writing { background:linear-gradient(90deg,#101f33 70%,transparent); }
.night .concept,.night .answer-field small,.night .choice small,.night .source,.night .footbar { color:#ccbea8; }
.night textarea,.night select { background:#20344a; color:#f7e8c7; }
.night .primary { background:#e9bb79; border-color:#e9bb79; color:#172536; }
.night .token { background:#20344a; border-color:#d1af78; color:#f7e8c7; }
.night .token[aria-pressed=true] { background:#e9bb79; color:#172536; }
.night #stir { background:#1d324b; border-color:#ad926a; }
.night #definition { color:#eed9ae; }
.night dialog { --ink:#392d25; color:var(--ink); }
@media(min-width:1700px) { #writing { padding-top:70px; } }
@media(max-width:1000px) { .topbar { height:auto; min-height:76px; flex-wrap:wrap; padding-block:15px; gap:14px; } nav { gap:15px; } .wordmark { font-size:20px; } #notebook { grid-template-columns:40% 60%; } #writing { padding-left:25px; } h1 { font-size:34px; } .token { font-size:15px; padding:8px; } }
@media(max-width:740px) { .topbar { padding:16px 20px; } nav { width:100%; justify-content:space-between; gap:10px; } .place-label { font-size:0; } select { max-width:150px; font-size:14px; } nav button { font-size:13px; } #world { position:relative; inset:auto; width:100%; height:560px; min-height:0; } #writing { width:100%; max-width:none; padding:25px 24px 90px; min-height:0; } #notebook { display:flex; flex-direction:column; } #writing { order:0; } #world { order:1; margin-top:-35px; } #definition { left:10%; right:10%; bottom:58px; } .footbar { position:relative; order:2; flex-wrap:wrap; padding:14px 20px; left:0; right:0; } #stage-caption { bottom:95px; font-size:18px; } #stir { right:15px; width:75px; height:75px; bottom:20px; font-size:14px; } .token { max-width:120px; font-size:14px; padding:8px; } .token.core { font-size:18px; } .night #writing { background:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
@media(max-width:740px) {
  #notebook { display:flex; }
  #writing { display:contents; }
  #writing>* { margin-left:24px; margin-right:24px; order:5; }
  #writing>.eyebrow { order:0; margin-top:25px; }
  #writing>h1 { order:1; }
  #writing>.question { order:2; margin-block:0 12px; }
  #writing>.concept { order:3; margin-block:0 12px; }
  #world { order:4; height:540px; margin-top:0; }
  #writing>.actions,#writing>.source { order:6; }
  #writing>.source { margin-bottom:30px; }
  #definition { position:absolute; left:5%; right:5%; top:0; bottom:auto; margin:0; font-size:16px; }
  .footbar { order:8; }
  #stage-caption { bottom:12px; left:10%; right:25%; font-size:16px; }
  #stir { bottom:10px; width:65px; height:65px; font-size:13px; }
  .flying-machine { width:230px; height:150px; }
  .machine-rig { transform:scale(.23); }
  .chapter-values .flying-machine { width:150px; height:100px; }
  .chapter-values .machine-rig { transform:scale(.15); }
  .chapter-values.values-complete .flying-machine,.chapter-identity .flying-machine { width:200px; height:134px; }
  .chapter-values.values-complete .machine-rig,.chapter-identity .machine-rig { transform:scale(.2); }
  .current-answer { font-size:18px; top:62%; }
}

/* Shared correction register; opens separately to preserve the live lesson. */
.issues-link { color: inherit; font-size: .9rem; text-underline-offset: .18em; margin-inline-start: .8rem; }