:root{color-scheme:light;--ink:#252823;--muted:#52584e;--paper:#f8efdf;--sheet:#fffaf0;--line:#282c26;--teal:#264d43;--mint:#e1ebdc;--orange:#a13c25;--peach:#f2c4a4;--gold:#efbb61;font-family:system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 15% 10%,#fff8ec 0,transparent 55%),var(--paper)}
.page{max-width:1200px;margin:auto;padding:0 clamp(14px,4vw,54px) 32px}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:19px 0 12px;font-weight:750;font-size:.69rem;letter-spacing:.13em}
.spark{color:var(--orange);font-size:1.22rem;vertical-align:middle;margin-right:5px}
.stamp{border:1px solid var(--line);border-radius:4px;padding:5px 8px;text-align:center}
.title-row{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:25px 0 20px}
.kicker,.journal-meta{font-size:.69rem;letter-spacing:.115em;font-weight:800}
.kicker{margin:0 0 8px;color:var(--muted)}
.kicker span:first-child{color:var(--orange)}
h1,h2{font-family:Georgia,serif;margin:0;line-height:1;letter-spacing:-.045em}
h1{font-size:clamp(3.4rem,8.2vw,6rem);font-weight:700}
h1 em{font-weight:700;color:var(--teal)}
.deck{flex:0 0 min(26vw,320px);margin:0 0 7px;font-family:Georgia,serif;font-size:clamp(.99rem,1.8vw,1.3rem);line-height:1.45;color:var(--muted)}
.route{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:9px 0;margin:0 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.82rem}
.route li{display:flex;align-items:center;gap:6px;color:var(--muted)}
.route b{font-size:.68rem}
.route [aria-current]{font-weight:800;color:var(--teal)}
.route [aria-current] b{border-radius:50%;display:grid;place-items:center;width:1.8em;height:1.8em;background:var(--teal);color:white}
.spread{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(0,1fr);gap:13px;align-items:start}
.comic{margin:0;border:2px solid var(--line);background:var(--sheet);box-shadow:3px 4px 0 #302c2520}
.comic-art{position:relative;background:#edc6a1}
.comic-art img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.panel-label{position:absolute;top:10px;left:10px;border:1px solid var(--line);background:var(--sheet);padding:5px 9px;font-weight:850;font-size:.65rem;letter-spacing:.1em}
.comic figcaption{margin:0;padding:11px 13px;border-top:2px solid var(--line);font-size:.9rem;font-weight:650}
.journal{min-width:0;position:relative;background:var(--sheet);border:2px solid var(--line);padding:clamp(14px,2.4vw,24px);box-shadow:3px 4px 0 #302c2520}
.journal-meta{display:flex;justify-content:space-between;gap:12px;color:var(--orange);margin-bottom:11px}
h2{font-size:clamp(2rem,4vw,3.15rem);color:var(--teal)}
.scene-intro{margin:.7rem 0;line-height:1.5;font-size:.96rem}
.sentence{border:1.5px solid var(--line);border-radius:16px 16px 16px 2px;background:#fff;padding:11px 12px;min-height:47px;margin:10px 0;line-height:1.5;overflow-wrap:anywhere}
.sentence.solved{background:var(--mint)}
.tiles,.controls{display:flex;flex-wrap:wrap;gap:7px}
button{font:inherit;color:var(--ink);background:var(--sheet);border:1px solid var(--line);border-radius:5px;cursor:pointer;min-height:44px;padding:7px 11px;touch-action:manipulation}
button:hover:not([disabled]):not([aria-disabled=true]){background:#f5e4c9}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #136654;outline-offset:3px}
button:disabled{opacity:.62;cursor:default}
.tile{min-width:44px;box-shadow:0 2px 0 var(--line);background:#f6e8cd;font-weight:700}
.tile[aria-pressed=true]{background:#e6e9df;border-style:dashed;box-shadow:none;color:#48544a;cursor:default}
.controls{margin-top:10px;font-size:.85rem}
.controls .primary{background:var(--teal);color:white;border-color:var(--teal);font-weight:750}
.controls .primary:hover:not(:disabled){background:#173d35}
.support{border-top:1px dashed #897d68;margin-top:12px;padding-top:6px;font-size:.85rem}
.support.model{margin:0;padding:0;border:0}
summary{cursor:pointer;font-weight:700;min-height:36px;align-content:center}
.support p{margin:3px 0 7px}
.language summary span,.small{color:var(--muted);font-weight:500}
dt{font-weight:750;margin-top:6px}dd{margin:2px 0 0}
.feedback{font-size:.87rem;font-weight:650;line-height:1.35;min-height:1.2em;margin:10px 0 0;color:var(--teal)}
.feedback[data-kind=retry]{color:var(--orange)}
.assistance,.next-stop{padding:10px;background:#f7e6ca;border-left:3px solid var(--orange);font-size:.88rem}
.foot{display:flex;justify-content:space-between;align-items:start;gap:16px;border-top:1px solid var(--line);margin-top:22px;padding-top:8px}
.character summary span{font-weight:450;color:var(--muted)}
.character-detail{display:flex;align-items:center;gap:12px;max-width:330px}
.character-detail img{width:120px;height:auto;border:1px solid var(--line);background:var(--sheet)}
.character-detail p{font-size:.87rem}
.save-line{display:flex;align-items:center;gap:12px}
.save-line button{font-size:.8rem}
@media(max-width:720px){.spread{grid-template-columns:1fr}.title-row{display:block;margin:18px 0 14px}h1{font-size:clamp(2.65rem,11.5vw,4.4rem)}.deck{margin-top:10px}.deck br{display:none}.route{gap:5px 12px}.foot{display:block}.save-line{justify-content:space-between;margin-top:8px}}
@media(max-width:360px){.kicker{font-size:.59rem}.masthead{font-size:.58rem}.route{font-size:.74rem}}

/* Continuous comic route */
.story-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;border-block:1px solid var(--line);margin:0 0 16px;padding:6px 0}
.story-nav .route{border:0;margin:0;padding:0;gap:2px 4px}
.route button{border:0;background:transparent;font-size:.82rem;display:flex;align-items:center;gap:6px;padding-inline:8px}
.route button:disabled{opacity:.75}
.story-actions{display:flex;gap:7px;flex-wrap:wrap}
button.primary{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:750}
button.primary:hover:not(:disabled){background:#173d35}
.comic-art img{aspect-ratio:3 / 2;object-fit:contain}
.comic-art.square img{aspect-ratio:1}
.comic-art .hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:44px;height:44px;min-width:44px;border:2px solid var(--sheet);border-radius:50%;padding:0;background:var(--teal);color:white;font-weight:800;box-shadow:0 1px 6px #221c15a6}
.comic-art .hotspot:hover{background:#173d35}
.journal .speech{position:relative;margin:13px 0 15px;padding:12px 14px;border:1.5px solid var(--line);border-radius:15px 15px 15px 2px;background:#fff;font:700 1.04rem/1.42 Georgia,serif}
.journal .speech::after{content:"";position:absolute;bottom:-5px;left:11px;width:8px;height:8px;background:white;border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:skewY(-35deg)}
.scaffold,.success{font-size:.86rem;line-height:1.4}
.success{padding:9px;background:var(--mint);border-left:3px solid var(--teal)}
.named-places button{flex:1 1 42%;text-align:left}
.tray-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tray-options button{padding:4px;font-size:.75rem;line-height:1.3;text-align:center}
.tray-options img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;border-radius:2px;margin-bottom:4px}
.tray-options button[aria-pressed=true]{outline:2px solid var(--teal);background:var(--mint);font-weight:800}
#language-kit{width:min(680px,calc(100% - 28px));max-height:85vh;padding:18px;border:2px solid var(--line);background:var(--sheet);color:var(--ink);overscroll-behavior:contain}
#language-kit::backdrop{background:#202821a6}
.kit-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.kit-group{padding:6px;border-top:1px dashed #897d68}
.kit-group dt span{font-weight:500;color:var(--teal)}
.kit-group dd{margin-bottom:8px}
@media(max-width:720px){
 .story-nav{gap:5px}
 .story-nav .route{flex-basis:100%}
 .route button{padding-inline:5px}
 .comic-art .hotspot{width:44px;height:44px}
 .journal .speech{font-size:1rem}
}
.demo-note{margin-top:10px;padding:9px 12px;background:#f7e6ca;border-left:3px solid var(--orange);font-size:.88rem}
.demo-note p{margin:0 0 6px}
.demo-note button+p{margin:6px 0 0}
.kit-entry{display:flow-root;margin-bottom:7px}
.kit-entry img{float:right;width:66px;height:48px;object-fit:cover;border:1px solid var(--line);border-radius:4px;margin:3px 0 4px 9px}

.verb-prompt{margin:12px 0;line-height:2.9;white-space:pre-line;font-family:Georgia,serif;font-size:1.09rem}
.verb-prompt input{min-height:44px;width:min(10.5em,100%);max-width:100%;border:1.5px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font:inherit;padding:5px 7px;vertical-align:middle}
.verb-prompt input[readonly]{background:var(--mint)}
.verb-prompt input:focus-visible{outline:3px solid #136654;outline-offset:2px}
.verb-prompt input:not(:only-of-type){width:min(7em,100%)}
.brick-wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);pointer-events:none}
.mortar{background:repeating-linear-gradient(8deg,#fff1 0 1px,transparent 1px 6px),#9e4c37;border:1px solid #edc5a1;box-shadow:inset 0 0 0 2px #66332a50}
.mortar:nth-child(3n){background-color:#ab5840}
.mortar.uncovered{background:transparent;border-color:transparent;box-shadow:none}
.mortar.just-uncovered{animation:brick-away .27s ease-out}
@keyframes brick-away{from{background:#a34d36}to{background:transparent}}
.panel-label{z-index:1;pointer-events:none}
.brick-bank{display:flex;flex-wrap:wrap;gap:7px;padding:10px;background:#78392d;border:2px solid #54281f;border-radius:5px}
.brick-bank button{min-width:44px;background:#f4cc99;font-weight:750}
.brick-bank button[aria-pressed=true]{border-style:dashed;background:#eadcc6}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-width:270px}
.board button{height:clamp(48px,11vw,80px);font:750 1.7rem Georgia,serif;background:#f8ead2}
.board button[aria-disabled=true]{cursor:default}
.board button.winning{background:var(--mint);border:3px solid var(--teal)}
.turn{font-weight:750;color:var(--teal)}
.office-options{display:grid;gap:5px}
.office-options button[aria-pressed=true],.prep-tabs button[aria-pressed=true],.prep-list button[aria-pressed=true]{background:var(--mint);outline:2px solid var(--teal)}
.prep-list{padding-left:1.6rem}
.prep-list li{margin:7px 0;line-height:1.7}
.prep-list button,.prep-bank button{min-width:44px}
.prep-list button[aria-disabled=true]{background:var(--mint);font-weight:750}
.review dt{color:var(--teal)}
@media(prefers-reduced-motion:reduce){.mortar.just-uncovered{animation:none}}