:root{--ink:#263e38;--muted:#69756b;--paper:#f7f3e9;--line:#dddccf;--green:#315e4c;--peach:#f1c4ae;--yellow:#f5d783;--radius:18px;font-family:var(--jke-font-ui),ui-rounded,'Segoe UI',system-ui,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:var(--ink);background:#fffdf8;cursor:pointer}button:hover{background:#f0ecdf;border-color:#9aa798}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--green);color:white;border-color:var(--green)}button[aria-pressed=true]{background:var(--green);color:white}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #bb6a3b;outline-offset:3px}[hidden]{display:none!important}input,textarea,select{border:1px solid var(--line);border-radius:8px;padding:9px;background:#fff;color:var(--ink);width:100%;min-height:44px;font-size:16px}input[type=color]{padding:3px}input[type=checkbox]{width:22px;min-height:22px}label{display:grid;gap:5px;font-size:13px;font-weight:700}textarea{resize:vertical;min-height:85px}.masthead{padding:20px 4%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:700;font-size:24px;letter-spacing:-.6px}.brand small{display:block;font-size:12px;font-weight:450;letter-spacing:.3px;color:var(--muted);margin-top:3px}.brand-icon{background:var(--green);color:var(--yellow);border-radius:14px;width:46px;height:46px;display:grid;place-items:center;font-size:34px}.header-actions{display:flex;align-items:center;gap:15px}#save-status{font-size:12px;color:var(--muted)}#library{max-width:1250px;margin:auto;padding:38px 30px 80px}.welcome{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding:25px 0 55px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--green)}h1{font-family:var(--jke-font-reading),Georgia,serif;font-size:clamp(40px,5vw,66px);font-weight:700;line-height:1.08;letter-spacing:-2px;margin:20px 0}.welcome p:not(.eyebrow){line-height:1.7;color:var(--muted);font-size:17px}.welcome button{margin:12px 8px 0 0}.paper-scene{height:310px;position:relative;background:#e5ead9;border:10px solid white;box-shadow:0 14px 35px #35443818;transform:rotate(3deg);border-radius:4px;overflow:hidden}.scene-title{position:absolute;left:25px;top:40px;font:32px var(--jke-font-reading),Georgia,serif;width:70%}.scene-sun{position:absolute;right:20px;top:10px;font-size:70px;color:#b88b35}.scene-creek{position:absolute;width:110%;height:110px;background:#9dcbd0;transform:rotate(-18deg);top:145px;left:-20px;border-radius:50%}.scene-label{position:absolute;bottom:25px;left:25px;background:#fff9e9;padding:14px;border-radius:8px;font-size:14px;box-shadow:0 4px 15px #263e3812}.scene-leaf{position:absolute;right:22px;bottom:30px;font-size:100px;color:#426749;transform:rotate(-20deg)}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0 16px}.section-heading h2{font:23px var(--jke-font-reading),Georgia,serif;margin:0}.section-heading>span{font-size:12px;color:var(--muted)}.starters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px}.starters button{text-align:left;padding:22px;border-radius:var(--radius);background:#fffdf6}.starters button:nth-child(2){background:#e8eddf}.starters button:nth-child(3){background:#f4e2d7}.starters button:nth-child(4){background:#e4eaef}.starters span{display:block;font-size:30px;margin-bottom:23px}.starters strong,.starters small{display:block}.starters strong{font-size:16px}.starters small{margin-top:7px;color:var(--muted);font-size:12px}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-card{background:#fffdf8;border:1px solid var(--line);border-radius:var(--radius);padding:16px}.project-cover{width:100%;height:130px;font:24px var(--jke-font-reading),Georgia,serif;display:grid;place-items:center;padding:12px;overflow:hidden;background:#e9eadb}.project-card h3{font-size:16px}.project-card p{font-size:12px;color:var(--muted)}.project-card .row{display:flex;flex-wrap:wrap;gap:6px}.empty{color:var(--muted);padding:20px 0}.workbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 22px;background:#fffdf8;border-bottom:1px solid var(--line)}.title-field{flex:1;min-width:140px}.title-field input{font-weight:700;background:transparent}.mode-switch{display:flex;gap:3px;background:#e6e8dd;padding:4px;border-radius:12px}.toolstrip{display:flex;gap:7px;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--line)}.divider{width:1px;background:var(--line);margin:0 6px}.workspace{display:grid;grid-template-columns:190px minmax(0,1fr) 285px;min-height:650px}.pages-panel,.inspector{padding:18px;background:#fffdf7;min-width:0}.pages-panel{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.pages-panel .section-heading h2,.inspector h2{font:21px var(--jke-font-reading),Georgia,serif}.pages-panel label{margin:13px 0}.page-thumb{display:block;width:100%;text-align:left;margin-bottom:10px;padding:12px;min-height:76px;border-radius:10px}.page-thumb span{display:block;font-size:11px;margin-top:8px;opacity:.7}.page-operations{display:grid;grid-template-columns:1fr;gap:5px}.page-operations button{font-size:12px}.canvas-panel{padding:24px;min-width:0}.canvas-heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:22px;font-size:13px}.canvas-heading span+span{font-size:11px;color:var(--muted)}.stage{position:relative;aspect-ratio:4/3;width:100%;container-type:inline-size;background:#fff9ee;overflow:hidden;box-shadow:0 8px 24px #263e3812;isolation:isolate}.studio-object{position:absolute;white-space:pre-wrap;line-height:1.2;overflow:hidden;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere;border-radius:5px}.studio-object img,.studio-object video{width:100%;height:100%;object-fit:contain}.studio-object audio{width:100%;max-height:100%}.studio-object[role=button]{cursor:pointer}.studio-object.selected{outline:3px solid #b16c3c;outline-offset:-3px}.object-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}.object-list button{font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-hint{font-size:12px;color:var(--muted);line-height:1.5}.inspector label{margin:12px 0}.inspector h3{font-size:14px;margin-top:24px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.check-label{display:flex;align-items:center;gap:8px}.inspector .row{display:flex;gap:6px;flex-wrap:wrap}.action-card{border:1px solid var(--line);padding:10px;border-radius:12px;margin:12px 0;background:#f7f5ec}.action-card label{margin:7px 0}.action-card button{font-size:12px}.inspector p{font-size:12px;line-height:1.6;color:var(--muted)}.notice{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:12px 22px;border-radius:14px;max-width:90%;z-index:100;font-size:14px;box-shadow:0 5px 20px #0002}.notice:empty{display:none}.mobile-tabs{display:none}#map{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}.map-node{padding:16px;background:#fff;border:1px solid var(--line);border-radius:12px}.map-node button{width:100%;font-weight:700}.map-node p{font-size:12px;line-height:1.6}.broken{color:#9d3c28!important}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}#preview{max-width:1000px;margin:auto;padding:20px}dialog{max-width:540px;width:calc(100% - 30px);border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#263e3877}dialog p{line-height:1.6}.export-player{padding:20px;max-width:1000px;margin:auto}.export-player header{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.export-player h1{font-size:28px;letter-spacing:0}.export-player #message{min-height:24px;font-size:14px}
@media(max-width:1100px){.workspace{grid-template-columns:155px minmax(0,1fr) 250px}.canvas-panel{padding:16px}.masthead{padding:15px 22px}.canvas-heading span+span{display:none}}@media(min-width:701px) and (max-width:900px){.workspace{grid-template-columns:155px minmax(0,1fr)}.inspector{grid-column:1/-1;border-top:1px solid var(--line);border-left:0;display:block}.inspector .fields{grid-template-columns:repeat(4,1fr)}.action-card{max-width:600px}.welcome{gap:25px}.starters{grid-template-columns:repeat(2,1fr)}button{min-height:48px}}
@media(max-width:700px){.masthead{padding:14px 16px}.brand{font-size:20px}.brand small{font-size:10px}.header-actions{gap:6px}.header-actions #save-status{display:none}.header-actions button{font-size:12px;padding:8px}#library{padding:20px 18px 50px}.welcome{grid-template-columns:1fr;gap:30px;padding:0 0 28px}.welcome h1{font-size:47px}.paper-scene{height:230px;max-width:420px;width:95%;margin:0 auto}.scene-title{font-size:26px}.scene-creek{top:110px}.starters{grid-template-columns:1fr 1fr;gap:10px}.starters button{padding:16px}.starters strong{font-size:14px}.starters span{margin-bottom:15px}.section-heading>span{display:none}.projects{grid-template-columns:1fr}.workbar{padding:12px;gap:7px}.workbar>button{font-size:12px;padding:8px}.title-field{order:-1;flex-basis:100%}.toolstrip{padding:10px;gap:5px}.toolstrip button{font-size:12px;padding:8px}.mobile-tabs{display:flex;gap:7px;padding:8px 12px;background:#e8e9df;position:sticky;top:0;z-index:10}.mobile-tabs button{flex:1}.workspace{display:block;min-height:0}.workspace[data-panel=canvas] .pages-panel,.workspace[data-panel=canvas] .inspector,.workspace[data-panel=pages] .canvas-panel,.workspace[data-panel=pages] .inspector,.workspace[data-panel=tools] .pages-panel,.workspace[data-panel=tools] .canvas-panel{display:none}.pages-panel,.inspector{border:0}.canvas-panel{padding:15px 10px}.canvas-heading{margin-bottom:14px}#preview{padding:12px}.preview-heading{font-size:13px}.canvas-hint{font-size:11px}.export-player{padding:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Hands-on authoring tools */
#canvas .studio-object{touch-action:none;user-select:none;cursor:grab;outline-offset:-3px}
#canvas .studio-object.locked{cursor:default}
#canvas.dragging .studio-object.selected{cursor:grabbing}
#canvas .resize-handle{position:absolute;right:0;bottom:0;width:24px;height:24px;min-height:24px;padding:0;border:2px solid white;background:#a65c32;cursor:nwse-resize;z-index:5;border-radius:7px 0 0 0;touch-action:none}

.canvas-panel:has(#snap-grid:checked) #canvas{background-image:linear-gradient(to right,#315e4c18 1px,transparent 1px),linear-gradient(to bottom,#315e4c18 1px,transparent 1px);background-size:2% 2%}
.align-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.align-tools button{font-size:12px;padding:8px 4px}
.shelf-dialog{max-width:800px;max-height:85dvh;overflow:auto}.shelf-dialog>p{font-size:14px}
#media-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0}
.media-card{min-width:0;padding:12px;background:#fffdf7;border:1px solid var(--line);border-radius:14px;display:grid;gap:10px;align-content:start}
.media-card img,.media-icon{width:100%;height:100px;object-fit:contain;background:#eeeede;border-radius:8px}.media-icon{display:grid;place-items:center;font-size:40px;color:var(--green)}
.media-card strong{font-size:14px;overflow-wrap:anywhere}.media-card small{font-size:12px;color:var(--muted)}
#link-audit{display:grid;gap:10px}#link-audit button{text-align:left;display:grid;gap:5px}#link-audit span,#link-audit small{font-size:12px;overflow-wrap:anywhere}
.action-card.needs-repair{border:2px solid #b16c3c;background:#fff0df}
@media(pointer:coarse){#canvas .resize-handle{width:30px;height:30px;min-height:30px}}
/* Full authoring and reader tools */
.reader-tools{display:flex;gap:6px;flex-wrap:wrap;padding:12px 0;align-items:center}.reader-tools select{width:auto;max-width:240px}.reader-tools button{font-size:13px}.reader-transcripts,.reader-debug{margin:15px 0;padding:14px;background:#fffdf7;border:1px solid var(--line);border-radius:12px}.reader-transcripts summary,.reader-debug summary{cursor:pointer;font-weight:700;min-height:32px}.reader-transcripts p{white-space:pre-wrap;line-height:1.6}.reader-debug pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:350px;overflow:auto;font-size:13px}.reader-hit{min-width:44px;min-height:44px}.reader-contrast .studio-object{background:#fff!important;color:#000!important;outline:1px solid #000}.studio-object>span{max-width:100%;max-height:100%;overflow:auto}.quiz-object{display:flex;flex-direction:column;gap:8px;align-items:stretch;justify-content:flex-start!important;padding:10px;overflow:auto;background:#fffdf7!important}.quiz-object button{font-size:16px;flex-shrink:0}.quiz-object p{font-size:14px;margin:0}.studio-object:has(>label){overflow:auto;padding:8px;background:#fffdf7}.studio-object>label{width:100%;font-size:16px}
.feature-dialog{max-height:90dvh;overflow:auto;max-width:650px}.feature-dialog label{margin:10px 0}.wide-dialog{max-width:950px}.feature-dialog .fields{margin-bottom:12px}.export-choices{display:grid;gap:10px}.feature-inspector,.memory-manager{border-top:1px solid var(--line);padding-top:14px;margin-top:20px}.memory-row{display:grid;gap:6px;border:1px solid var(--line);padding:10px;border-radius:10px;margin-top:10px}.memory-row small{font-size:12px;color:var(--muted)}.memory-row button{font-size:12px}.condition-row{padding:8px;background:#eaf0e4;border-radius:10px;margin:8px 0}.advanced-action>button{margin:4px 4px 4px 0}.library-filters{display:grid;grid-template-columns:2fr 1fr;gap:15px;margin-bottom:20px}.project-cover.illustrated-cover{color:white;text-shadow:0 2px 5px black;box-shadow:inset 0 0 0 100px #0003}
#catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}#catalog-grid button{display:grid;gap:8px;text-align:left}#catalog-grid img,#catalog-grid button>span{height:100px;width:100%;object-fit:contain}#catalog-grid button>span{display:grid;place-items:center;font-size:40px;color:var(--green)}#catalog-grid small{font-size:12px;color:var(--muted)}#version-list{display:grid;gap:12px;margin-top:18px}#version-list article{border:1px solid var(--line);padding:12px;border-radius:10px}#version-list p{font-size:12px;color:var(--muted)}#feature-status{padding:0 22px}#feature-status:empty{display:none}.master-preview{border:1px dashed #839978;opacity:.7}#canvas .studio-object.selected{outline:3px solid #b16c3c}
#map{display:block}.map-scroll{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#f4f4ea;max-height:650px}.map-board{position:relative}.map-board svg{position:absolute;inset:0;overflow:visible}.map-board svg path[data-link]{fill:none;stroke:#6e836c;stroke-width:6;cursor:pointer}.map-board svg path[data-link]:focus-visible{stroke:#b16c3c;outline:none}.graph-node{position:absolute;width:220px;min-height:125px;border:1px solid #bac8af;background:#fffdf7;padding:12px;border-radius:14px;box-shadow:0 4px 10px #263e3812;display:grid;gap:8px}.graph-node button{font-size:12px}.map-grip{cursor:grab;font-size:14px;font-weight:700;touch-action:none;min-height:30px}.graph-node small{font-size:12px}
@media(max-width:700px){.reader-tools button{padding:8px;font-size:12px}.reader-tools select{max-width:100%}.library-filters{grid-template-columns:1fr}.feature-dialog .fields{grid-template-columns:1fr 1fr}.feature-inspector{margin-top:16px}.map-scroll{max-height:500px}}
.group-outline{position:absolute;border:2px dashed #a65c32;pointer-events:none;z-index:700}.group-outline .resize-handle{pointer-events:auto;min-height:30px!important;width:30px!important;height:30px!important}
@media(max-width:700px){#make-tools{max-height:176px;overflow:auto;overscroll-behavior:contain;align-content:flex-start}#make-tools::before{content:'Studio tools · scroll for more';flex-basis:100%;font-size:11px;color:var(--muted);padding:0 3px 3px}.toolstrip button{flex-shrink:0}}
/* Workshop panels share the page editor on every device. */
.full-studio{grid-template-columns:200px minmax(320px,1fr) 290px;align-items:start}.studio-panel{background:#fffdf7;border:1px solid #dce4d8;border-radius:14px;padding:12px;min-width:0}.studio-panel h2{font-size:1rem;margin:0 0 10px}.studio-panel button{padding:7px 9px;font-size:.8rem}.studio-panel label{font-size:.8rem}.studio-panel input,.studio-panel select{min-width:0;max-width:100%}#studio-timeline{grid-column:1/3}#studio-behaviors{grid-column:3;grid-row:2;max-height:440px;overflow:auto}.timeline-controls,.studio-viewbar,.draw-tools,.behavior-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.timeline-controls label{max-width:135px}.timeline-controls input{width:90px}.track-row{padding:7px;border-top:1px solid #e1e7dc}.track-row strong{font-size:.75rem;margin-right:8px}.layer-row{display:flex;gap:3px;border-bottom:1px solid #e8ecdf;padding:4px 0}.layer-row button:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;text-align:left}.layer-row button:not(:first-child){padding:4px;min-width:24px}.layer-row button[aria-pressed=true]{background:#f6cc74}#studio-layers{margin-top:16px}.canvas-viewport{overflow:auto;min-height:330px;padding:48px;background:repeating-conic-gradient(#e7eadf 0% 25%,#f3f4ec 0% 50%) 0/20px 20px;isolation:isolate;position:relative;border-radius:12px}.canvas-viewport .stage{overflow:visible;transform-origin:center center;outline:2px solid #8eaa96;container-type:inline-size}.canvas-viewport .stage::before{content:'';position:absolute;inset:0;pointer-events:none;background:inherit;z-index:-2}.studio-viewbar,.draw-tools{margin-bottom:8px;font-size:.75rem}.studio-viewbar button,.draw-tools button{padding:6px 9px;font-size:.75rem}.draw-tools label{max-width:110px}.draw-tools input[type=range]{width:85px}.draw-tools input[type=color]{height:28px;width:45px}.draw-tools select{font-size:.75rem}.drawing-mode{touch-action:none}.drawing-draft{pointer-events:none;background:transparent}.editor-hotspot{outline:2px dashed #bb6d37;background:#f6cc7440!important}.editor-dropzone{outline:2px dashed #477f9d;background:#abd9e650!important}.reader-draggable{touch-action:none;cursor:grab}.reader-draggable:active{cursor:grabbing}.dropzone:focus-visible,.hotspot:focus-visible{outline:3px solid #304b45}.reader-tools input[type=range]{width:150px}.rich-words{white-space:pre-wrap;width:100%;max-height:100%;line-height:1.2}.word-link{border:0;background:transparent;text-decoration:underline;color:inherit;font:inherit;padding:0;min-height:0;display:inline}.speech-bubble{border:2px solid currentColor;background:#fffdf7;border-radius:20px;padding:12px}.narration-highlight{background:#ffe489;color:#203c35}.behavior-block{border:1px solid #bad0be;border-left:5px solid #6b9d79;background:#f4f8ef;border-radius:7px;margin:7px 0;padding:7px;font-size:.8rem}.behavior-block p{margin:3px 0;overflow-wrap:anywhere}.nested-blocks{margin-left:12px;border-left:2px solid #ced9c7;padding-left:7px}.active-block{outline:3px solid #e8aa35}.workshop-examples{margin:24px 0}.workshop-examples button{margin:5px}.drawing-response{display:block!important}#camera-preview{max-width:100%;max-height:300px}#media-waveform{width:100%;height:130px}#workshop-dialog fieldset{border:1px solid #dce4d8;border-radius:8px;margin:10px 0;padding:10px}#workshop-dialog textarea{width:100%}.stage .studio-object .rich-words button{white-space:pre-wrap}.smart-guide{position:absolute;background:#cc752c;pointer-events:none;z-index:100}.smart-guide.x{top:-100%;height:300%;width:1px}.smart-guide.y{left:-100%;width:300%;height:1px}
@media(max-width:1100px){.full-studio{grid-template-columns:170px minmax(200px,1fr)}#studio-behaviors{grid-column:1/3;grid-row:auto}#studio-timeline{grid-column:1/3}.canvas-viewport{padding:22px}.full-studio .inspector{grid-column:1/3}}
@media(max-width:600px){.full-studio{display:block}#studio-timeline,#studio-behaviors{display:none}.full-studio[data-panel=timeline] #studio-timeline,.full-studio[data-panel=behaviors] #studio-behaviors{display:block}.full-studio[data-panel=layers] #pages-panel{display:block}.full-studio[data-panel=layers] #pages-panel>:not(#studio-layers){display:none}.full-studio[data-panel=timeline] .canvas-panel,.full-studio[data-panel=behaviors] .canvas-panel,.full-studio[data-panel=layers] .canvas-panel{display:none}.mobile-tabs{overflow:auto;justify-content:flex-start}.mobile-tabs button{flex:0 0 auto}.canvas-viewport{padding:18px;min-height:260px}.draw-tools{max-height:150px;overflow:auto}.timeline-controls label{max-width:110px}.studio-panel{margin:10px 0}#studio-layers{margin-top:0}}
.workspace.full-studio{grid-template-columns:200px minmax(320px,1fr) 290px;gap:10px}.workspace.full-studio .inspector,.workspace.full-studio .pages-panel{max-height:600px;overflow:auto}.toolstrip{max-height:120px;overflow:auto}.layer-row{flex-wrap:wrap}.layer-row button:first-child{flex-basis:100%}.canvas-viewport .stage{width:min(100%,560px);margin:0 auto}.canvas-viewport{padding:22px;min-height:0}.workspace.full-studio .canvas-panel{min-width:0}#studio-timeline{align-self:start}
@media(max-width:1100px){.workspace.full-studio{grid-template-columns:170px minmax(200px,1fr)}.workspace.full-studio .inspector{grid-column:1/3;max-height:350px}.workspace.full-studio .pages-panel{max-height:700px}}
@media(max-width:600px){.workspace.full-studio{display:block}.workspace.full-studio .inspector,.workspace.full-studio .pages-panel{max-height:none}.canvas-viewport{padding:14px}.toolstrip{max-height:150px}}