:root{--paper:#fff9ef;--ink:#293b3d;--orange:#f5a43b;--green:#176e58;--blue:#176e58;--accent:#176e58;--muted:#5f6969;--line:#e3ded1;color:var(--ink);background:var(--paper)}
body,main{background:var(--paper);color:var(--ink)}.topbar{background:#fffdf8;border-color:var(--line)}.brand,.j-heading h1,.page-heading h1,.j-panel h2,.j-unit-banner h2{color:var(--ink)}.brand-mark{background:var(--orange);color:#493419;box-shadow:0 3px 0 #c67a22}.sidebar{background:#fffdf8;border-color:var(--line)}.sidebar nav button.nav-active{color:#145640;background:#e1f0e6;border-color:#aacdb9}.sidebar-note{border-color:var(--line)}.j-kicker,.eyebrow{color:#416d59}.j-primary,.primary{background:var(--green);border-color:var(--green);border-bottom-color:#104c3d}.j-primary:hover,.primary:hover{background:#125943}.j-secondary,.secondary{color:#345e4d;border-color:#c6d4c9}.j-map,.j-focus-card,.j-panel,.card{border-color:var(--line);box-shadow:0 4px 0 #ddd6c529}.j-unit-banner{background:#fff0d3;border-color:#ead4a8}.j-node{border-color:#c7d4c8}.j-node-label strong{color:var(--ink)}.j-stages button.selected{background:#e2f0e6;border-color:#9abb9e;color:#275c40}.j-path:before{background:#e6dcc8}.j-resume{border:2px solid #e8c285;background:#fff0d3}.j-blue-panel{background:#eef4eb}.j-course-card,.welcome-card{border-color:var(--line)}.j-course-card.junior{background:#eff3ee}.bonus-card{background:#ffedbd}.pet-coach{background:#fffdf7;border-color:#d9ccaf;box-shadow:3px 4px 0 #e8dcc044}.pet-speech,.pet-name{color:var(--ink)}.pet-portrait{transform-origin:50% 90%;animation:none}.pet-correct .pet-portrait{animation:none}.pet-retry .pet-portrait{animation:none}.pet-result .pet-portrait{animation:none}.pet-pat .pet-portrait{animation:none}.pet-question .pet-portrait,.pet-lesson .pet-portrait,.pet-project .pet-portrait{animation:none}.pet-touch{border-color:#d9ccaf;background:#fff3d9;color:#67522f}.pet-touch:hover{background:#ffe0a2}.pet-portrait{object-fit:contain}.pet-name small{color:#64695c}





.ink-pad{border:2px solid #d7dccc;border-radius:18px;overflow:hidden;background:#fff;min-width:0}.ink-toolbar{padding:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#f0f3e9;border-bottom:1px solid #d7dccc}.ink-toolbar>div{display:flex;gap:6px;flex-wrap:wrap}.ink-toolbar button{min-height:44px;min-width:44px;padding:8px 12px;border:1px solid #c8d1c2;border-radius:10px;color:#345241;background:white;font-size:.875rem}.ink-toolbar button[aria-pressed=true]{color:white;background:#176e58;border-color:#176e58}.ink-toolbar button:disabled{opacity:.45}.ink-canvas{display:block;width:100%;height:auto;aspect-ratio:8/5;touch-action:none;background-color:#fff;background-image:linear-gradient(#f1f0ea 1px,transparent 1px),linear-gradient(90deg,#f1f0ea 1px,transparent 1px);background-size:24px 24px}.ink-status{font-size:.875rem;padding:10px 14px;margin:0;color:#60695d;line-height:1.6}.ink-expanded{position:fixed;inset:16px;z-index:30;display:flex;flex-direction:column;box-shadow:0 0 0 100vmax #22382fb3}.ink-expanded{overflow:auto}.ink-expanded .ink-canvas{flex:0 0 auto;width:min(100%,calc((100dvh - 180px)*1.6));height:auto;aspect-ratio:8/5;align-self:center}.ink-expanded .ink-toolbar,.ink-expanded .ink-status{flex-shrink:0}.j-writing{padding:18px!important}.j-writing>p{font-size:.875rem;line-height:1.8}.writing-run{max-width:1240px!important}.j-run.writing-run .pet-coach{max-width:none;margin:12px 0}.writing-run .pet-portrait{width:68px;height:72px}.writing-run .pet-bubble{padding:4px 0}.writing-run .pet-touch{display:none}.writing-run .pet-name small{display:none}.writing-run .pet-speech{margin:2px 0}.writing-run .j-question h1{font-size:1.5rem;line-height:1.7}.j-question .j-choices button{min-height:54px}.answer-image{background:#fff}.j-question:has(+.j-writing){margin-bottom:16px}.ink-pad:focus-within{border-color:#56846c}
@media(min-width:1050px){.shell{grid-template-columns:185px minmax(0,1fr)}main{padding:24px}.sidebar{padding:22px 12px}.writing-run{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(380px,1.3fr);gap:16px;align-items:start}.writing-run>.j-run-top,.writing-run>.j-run-label,.writing-run>.pet-coach,.writing-run>.bonus-timer,.writing-run>.j-run-bottom{grid-column:1/-1;width:100%;box-sizing:border-box;margin-top:0}.writing-run>.j-question,.writing-run>.j-writing{width:100%;box-sizing:border-box;max-width:none;margin:0}.writing-run .j-question{padding:22px}.workspace:has(#answer-form){display:block}.question-card:has(#answer-form){display:grid;grid-template-columns:minmax(250px,.75fr) minmax(400px,1.4fr);column-gap:26px;align-items:start}.question-card>#answer-form{grid-column:2;grid-row:1/8}.question-card>.question-meta,.question-card>h2,.question-card>.question-text,.question-card>#feedback,.question-card>.actions{grid-column:1}.workspace:has(#answer-form)>aside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}.workspace:has(#answer-form)>aside .card{margin-top:0}}
@media(max-width:650px){.ink-toolbar>div{gap:5px}.ink-toolbar button{padding:8px;font-size:.875rem}.ink-expanded{inset:6px}.writing-run .pet-name{font-size:.9rem}.writing-run .pet-speech{font-size:.9rem}.j-writing{padding:10px!important}}
@media(prefers-reduced-motion:reduce){.pet-coach .pet-portrait{animation:none!important;transform:none!important}}
.companion-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px}.companion-pair .pet-coach{margin:0;min-width:0;padding:10px}.companion-pair .pet-portrait{width:106px;height:120px}.companion-pair .pet-speech{font-size:1rem}.companion-pair .pet-name small{display:block;margin-left:0;margin-top:3px}.teacher-coach{background:#fff8f5;border-color:#e6c7bd}.teacher-coach .pet-touch{background:#fff0e9;border-color:#e6c7bd;color:#805240}.teacher-coach .pet-portrait{animation:none}.teacher-pop .pet-portrait{animation:none}.home-next{margin-bottom:20px}.home-next strong{display:block;margin-top:6px;font-size:1.2rem}@media(max-width:1150px){.companion-pair{grid-template-columns:1fr}.companion-pair .pet-portrait{width:90px;height:95px}.companion-pair .pet-name small{display:inline;margin-left:8px}}@media(prefers-reduced-motion:reduce){.teacher-pop .pet-portrait{animation:none!important}}
.j-unit-banner p,.j-unit-banner small{color:#695632}.j-world-number{color:#8b621f}.j-text-button{color:#176e58}.j-stages button{color:#556356}.j-node{background:#fff8e7;color:#465642}.available .j-node{background:#176e58;color:white;border-color:#135440}.complete .j-node{background:#e8b34f;color:#4b3517;border-color:#bd8730}.locked .j-node{background:#eeeee7;color:#788075;border-color:#d8ddcf}.j-node small{background:#f5a43b;color:#3e301c}.j-run-label{color:#5e685d}.j-choice-key{background:#f3ead8;color:#594b34}.j-focus-card .j-choices button:hover{border-color:#67987b;background:#f1f7ee}
/* Keep iOS selection/callouts off the drawing surface, not off the page. */
.ink-pad,.ink-pad *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ink-canvas{touch-action:none;-webkit-user-drag:none;cursor:crosshair}
.ink-toolbar button{min-height:44px;min-width:44px;touch-action:manipulation}
.ink-pad.inking .ink-toolbar{pointer-events:none}
.ink-expanded{overscroll-behavior:contain}
/* Keep the saved 960 x 600 bitmap; size only its on-screen drawing surface. */
.ink-pad{width:min(100%,688px);max-width:100%;margin-inline:auto;box-sizing:border-box}
.ink-canvas-wrap{display:flex;align-items:stretch;justify-content:center;min-width:0}
.ink-scrollrail{display:flex;flex:1 1 44px;min-width:44px;align-items:center;justify-content:center;background:#f0f3e9;color:#526b58;font-size:.75rem;line-height:1.3;text-align:center;touch-action:pan-y}
.ink-scrollrail:first-child{border-right:1px solid #d7dccc}
.ink-scrollrail:last-child{border-left:1px solid #d7dccc}
.ink-canvas-wrap .ink-canvas{flex:0 1 auto;min-width:0;width:min(560px,51.2dvh,calc(100% - 88px));height:auto;aspect-ratio:8/5}
.ink-expanded{width:auto;max-width:none;margin:0}
.ink-expanded .ink-canvas-wrap{flex:0 0 auto;width:100%}
.ink-expanded .ink-canvas-wrap .ink-canvas{width:min(960px,100dvh,calc(100% - 88px));height:auto;aspect-ratio:8/5}