:root{--ink:#31264e;--muted:#6d627d;--paper:#fffdf8;--cream:#fff8e8;--line:#d9cfea;--purple:#7954c7;--purple-dark:#57389b;--pink:#e84473;--yellow:#f5c85b;--blue:#4c8db5;--green:#3e9569;--shadow:0 16px 38px rgb(69 48 98 / 12%);--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--tap:44px}*{box-sizing:border-box}html{background:var(--cream);scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 85% 0,#f1e9ff 0,transparent 30%),linear-gradient(180deg,#fffdf7,#fff7e4);color:var(--ink);font:16px/1.5 ui-rounded,"SF Pro Rounded","Avenir Next Rounded","Arial Rounded MT Bold",system-ui,sans-serif}button,textarea{font:inherit}[hidden]{display:none!important}.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px;z-index:50}.skip:focus{left:12px}.topbar{min-height:68px;padding:8px max(18px,4vw);display:flex;align-items:center;gap:24px;border-bottom:1px solid rgb(49 38 78 / 10%);background:rgb(255 253 248 / 94%);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}.brand strong,.brand small{display:block}.brand strong{font-size:1.05rem}.brand small{font:700 .7rem/1.2 system-ui,sans-serif;color:var(--muted)}.mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--pink),var(--purple));color:#fff;display:grid;place-items:center;font:900 29px Georgia;box-shadow:0 6px 14px rgb(121 84 199 / 25%)}.top-note{color:var(--muted);font:700 .85rem system-ui,sans-serif;flex:1}.icon{min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;color:var(--ink);font-weight:800}.icon span:first-child{display:inline-grid;width:22px;height:22px;place-items:center;margin-right:5px;border-radius:50%;background:#efe8fb}.screen{max-width:1380px;margin:auto;padding:38px max(18px,4vw) 68px}.eyebrow{margin:0 0 8px;color:#8f3158;font:850 .7rem/1.2 system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase}.button,.text-button{min-height:var(--tap);padding:10px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font-weight:850;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}.button:hover,.button:focus-visible{transform:translateY(-1px);border-color:#9e83d5;box-shadow:0 7px 16px rgb(75 49 113 / 10%)}.button:focus-visible,.icon:focus-visible,.view:focus-visible,.chip:focus-visible,.backlink:focus-visible,.text-button:focus-visible{outline:3px solid #8a5ed5;outline-offset:3px}.button.primary{background:linear-gradient(135deg,var(--pink),#c83e72);border-color:#a93360;color:#fff;box-shadow:0 7px 0 #9d3157}.button.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #9d3157}.button.quiet{background:rgb(255 255 255 / 75%)}.button span{margin-left:7px}.lab-map{padding-top:24px}.lab-intro{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(430px,1.1fr);align-items:center;min-height:380px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(135deg,#fff 0,#f8f0ff 55%,#eadffe 100%);box-shadow:var(--shadow);overflow:hidden}.lab-intro-copy{padding:clamp(28px,5vw,66px)}.lab-intro h1{margin:0;font-size:clamp(3.2rem,6.5vw,6.3rem);line-height:.9;letter-spacing:-.055em}.lab-intro h1 em{font-style:normal;color:var(--pink)}.lab-intro-copy>p:not(.eyebrow){max-width:590px;margin:24px 0;color:var(--muted);font:600 clamp(1rem,1.6vw,1.24rem)/1.55 system-ui,sans-serif}.quick-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.quick-actions>span{color:var(--muted);font:750 .78rem system-ui,sans-serif}.welcome-crew{position:relative;min-height:380px;display:flex;align-items:flex-end;justify-content:center;padding:28px 20px 0;background:radial-gradient(circle at 50% 63%,rgb(255 255 255 / 90%),transparent 56%)}.welcome-crew .creekside-character-host{width:32%;margin:0 -2%;z-index:2}.welcome-crew .creekside-character{width:100%;max-height:310px;filter:drop-shadow(0 10px 7px rgb(56 39 82 / 15%))}.welcome-crew .creekside-character-host:nth-child(2){z-index:3;transform:scale(1.12)}.lambda-badge{position:absolute;right:8%;top:8%;display:grid;width:76px;height:76px;place-items:center;border:6px solid var(--ink);border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--pink),var(--purple));font:900 49px/1 Georgia;box-shadow:0 8px 0 rgb(49 38 78 / 18%);transform:rotate(7deg)}.map-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:36px 2px 16px}.map-heading h2,.heading-row h1,.studio h1{margin:0;letter-spacing:-.035em}.map-heading h2{font-size:clamp(1.8rem,3.5vw,3rem)}.map-heading>p{margin:0;color:var(--muted);font:700 .82rem system-ui,sans-serif}.chapter-grid{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:13px}.chapter-card{position:relative;min-height:350px;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgb(82 61 114 / 15%);border-radius:25px;background:#fff;box-shadow:var(--shadow)}.chapter-art{position:relative;height:155px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:linear-gradient(150deg,#f7dc8c,#fff0c8)}.chapter-2 .chapter-art{background:linear-gradient(150deg,#cbe9d4,#eff9e8)}.chapter-3 .chapter-art{background:linear-gradient(150deg,#d6e8fa,#eef6ff)}.chapter-4 .chapter-art{background:linear-gradient(150deg,#f7cedd,#fff0f4)}.chapter-5 .chapter-art{background:linear-gradient(150deg,#d9cdf5,#f1ebff)}.chapter-art .creekside-character{max-height:145px;width:auto;filter:drop-shadow(0 6px 5px rgb(49 38 78 / 15%))}.chapter-symbol{position:absolute;left:13px;top:8px;color:rgb(49 38 78 / 20%);font:900 3.4rem/1 Georgia}.chapter-copy{display:flex;flex:1;flex-direction:column;padding:17px}.chapter-copy h3,.level-card h2{margin:0 0 7px;font-size:1.28rem;line-height:1.1}.chapter-copy>p:not(.eyebrow),.level-card p{margin:0 0 14px;color:var(--muted);font:600 .82rem/1.45 system-ui,sans-serif}.chapter-progress{margin-top:auto}.chapter-progress>span{display:block;height:7px;overflow:hidden;border-radius:10px;background:#ebe5f0}.chapter-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--pink))}.chapter-progress b{display:block;margin:5px 0 10px;color:var(--muted);font:750 .69rem system-ui,sans-serif}.chapter-button{width:100%;background:#f7f3fb}.heading-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px}.heading-row h1{font-size:clamp(2.5rem,5vw,4.5rem)}.heading-row p:not(.eyebrow){max-width:650px;color:var(--muted);font:600 1rem/1.5 system-ui,sans-serif}.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.level-card{position:relative;min-height:190px;padding:20px;border:1px solid var(--line);border-radius:22px;background:rgb(255 255 255 / 84%);box-shadow:var(--shadow)}.level-num{display:inline-grid;width:38px;height:38px;place-items:center;margin-bottom:18px;border-radius:12px;color:#fff;background:linear-gradient(145deg,var(--purple),var(--pink));font:800 .78rem var(--mono)}.level-card .done{position:absolute;right:16px;top:18px;color:var(--green);font:800 .72rem system-ui,sans-serif}.studio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:15px}.studio h1{font-size:clamp(2rem,4vw,3.25rem)}.backlink{border:0;background:transparent;padding:0;color:var(--purple-dark);font-weight:800;cursor:pointer;margin-bottom:10px}.studio-actions{display:flex;gap:7px;flex-wrap:wrap}.story-card{display:grid;grid-template-columns:96px 1fr;gap:15px;align-items:center;padding:11px 18px;border:1px solid #dfd0f3;border-radius:20px;background:linear-gradient(100deg,#f2eaff,#fff8dc);margin-bottom:14px}.story-card .speaker{height:100px;display:flex;align-items:flex-end;justify-content:center}.story-card .speaker .creekside-character{max-height:96px;width:auto}.speaker-name{font-weight:900;margin:0}.story-card #storyText{margin:2px 0 7px;color:#5f5868;font:600 .92rem/1.45 system-ui,sans-serif}.concept{font-size:.76rem;color:var(--muted);margin:0}.concept span{display:inline-block;margin-right:6px;color:#8f3158;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.workspace{display:grid;grid-template-columns:225px minmax(340px,1fr) minmax(300px,.9fr);gap:13px;min-height:600px}.toolbox,.editor-panel,.output-panel{border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #e8e0ef;background:#f8f4fb;min-height:52px}.panel-title h2{font-size:1rem;margin:0}.panel-title span{font:700 .7rem system-ui,sans-serif;color:var(--muted)}.structure{padding:14px;overflow:auto;flex:1;font:13px/1.6 var(--mono)}.tree-line{white-space:pre;color:#566179}.tree-line.head{color:var(--purple-dark);font-weight:800}.insert{padding:12px;border-top:1px solid var(--line)}.insert p{margin:0 0 8px;font:700 .72rem system-ui,sans-serif;color:var(--muted)}#chips{display:flex;gap:5px;flex-wrap:wrap}.chip{border:1px solid #c8b8e2;border-radius:9px;padding:7px;background:#f4effc;cursor:pointer;font:12px var(--mono)}.view-tabs{display:flex;gap:4px}.view{border:0;border-radius:9px;background:transparent;padding:8px;color:var(--muted);font-weight:800;cursor:pointer}.view.active{background:var(--ink);color:#fff}.editor-panel textarea{flex:1;min-height:350px;width:100%;resize:none;border:0;padding:19px;background:#28243a;color:#f3f0ff;font:15px/1.7 var(--mono);outline:0;tab-size:2}.editor-panel textarea:focus{box-shadow:inset 0 0 0 3px #ae8ce3}.editor-foot{display:flex;gap:7px;align-items:center;padding:10px;border-top:1px solid var(--line)}#error{flex:1;color:#b13e55;font:700 .72rem/1.35 system-ui,sans-serif}.world-wrap{display:grid;grid-template-columns:1fr;gap:8px;padding:12px;background:#f6f0fa}.world-wrap canvas{width:100%;height:auto;border:1px solid #d6c5e4;border-radius:12px;background:#fff}.world-wrap pre{min-height:78px;max-height:130px;overflow:auto;margin:0;padding:10px;border-radius:10px;background:#28243a;color:#e5f7e9;font:13px/1.4 var(--mono);white-space:pre-wrap}.test-box{padding:14px;border-top:1px solid var(--line);flex:1}.test-box h3{font-size:.84rem;margin:0 0 7px}.test-box div{font:600 .8rem/1.45 system-ui,sans-serif;color:var(--muted)}.test-pass{padding:12px;border-radius:13px;background:#e6f6ec;color:#256845!important}.test-pass strong{display:block;font-size:1rem}.test-try{padding:11px;border-radius:12px;background:#fff1dd;color:#7b5522!important}.next-button{width:100%;margin-top:10px;border-color:#a9d1b9;background:#fff}.hint-row{display:flex;gap:12px;align-items:center;margin-top:10px}.text-button{border:0;background:transparent;color:var(--purple-dark);padding-left:0}.hint-row p{margin:0;color:var(--muted);font:600 .8rem system-ui,sans-serif}dialog{max-width:520px;border:0;border-radius:22px;padding:30px;box-shadow:0 20px 80px #241c3a66;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#31264e99;backdrop-filter:blur(3px)}dialog h2{font-size:1.8rem;line-height:1.1}.close{float:right;border:0;background:transparent;font-size:1.8rem;cursor:pointer}.character-fallback{display:grid;width:68px;height:68px;place-items:center;border-radius:50%;color:#fff;background:var(--purple);font:900 42px Georgia}@media(max-width:1120px){.chapter-grid{grid-template-columns:repeat(3,minmax(210px,1fr))}.workspace{grid-template-columns:200px minmax(330px,1fr)}.output-panel{grid-column:1/-1}.world-wrap{grid-template-columns:minmax(300px,1fr) minmax(220px,.6fr)}}@media(max-width:820px){.lab-intro{grid-template-columns:1fr}.welcome-crew{min-height:310px;order:-1}.lab-intro-copy{text-align:center}.quick-actions{justify-content:center}.chapter-grid{grid-template-columns:repeat(2,minmax(210px,1fr))}.workspace{grid-template-columns:1fr}.toolbox{min-height:180px;max-height:300px}.output-panel{grid-column:auto}.world-wrap{grid-template-columns:1fr}.editor-panel{min-height:520px}}@media(max-width:560px){.top-note{display:none}.icon span:last-child{display:none}.icon span:first-child{margin:0}.screen{padding:24px 12px 48px}.lab-intro{border-radius:24px}.welcome-crew{min-height:245px}.welcome-crew .creekside-character{max-height:215px}.lambda-badge{width:58px;height:58px;border-width:4px;font-size:36px}.lab-intro-copy{padding:26px 18px}.lab-intro h1{font-size:3.5rem}.chapter-grid{grid-template-columns:1fr}.chapter-card{min-height:0;display:grid;grid-template-columns:130px 1fr}.chapter-art{height:auto;min-height:230px}.chapter-art .creekside-character{max-height:190px}.map-heading,.heading-row,.studio-head{flex-direction:column;align-items:flex-start}.heading-row h1{font-size:2.55rem}.studio-actions{width:100%}.studio-actions .button{flex:1}.story-card{grid-template-columns:72px 1fr;padding:9px}.story-card .speaker{height:82px}.story-card .speaker .creekside-character{max-height:78px}.editor-foot{flex-wrap:wrap}.editor-foot #error{flex-basis:100%;order:-1}.view{font-size:.76rem;padding:7px 6px}}@media(max-width:390px){.chapter-card{grid-template-columns:105px 1fr}.chapter-copy{padding:14px 12px}.chapter-copy h3{font-size:1.12rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Keep the welcome crew inside the hero without clipping the top of their art. */
.lab-intro { overflow: visible; }
.welcome-crew { min-height: 410px; padding-top: 48px; }
.welcome-crew .creekside-character { max-height: 280px; object-fit: contain; object-position: center bottom; }
.welcome-crew .creekside-character-host:nth-child(2) { transform: scale(1.04); }
@media (max-width: 820px) { .welcome-crew { min-height: 330px; padding-top: 36px; } .welcome-crew .creekside-character { max-height: 260px; } }
@media (max-width: 560px) { .welcome-crew { min-height: 260px; padding-top: 40px; } .welcome-crew .creekside-character { max-height: 195px; } }

/* Blocks are the primary way into the language; text remains available for learners who want it. */
.blocks{flex:1;min-height:350px;overflow:auto;padding:18px;background:linear-gradient(180deg,#f7f1ff,#fffaf0)}
.code-block{position:relative;margin:9px 0;padding:8px 10px 10px;border:2px solid #a57bd5;border-radius:15px;background:#ede0ff;box-shadow:0 3px 0 #d2b9ed}
.code-block>.block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#4e287f;font:900 .75rem var(--mono);letter-spacing:.02em;text-transform:uppercase}
.block-children{display:flex;flex-wrap:wrap;align-items:flex-start;gap:7px;padding:8px 0 0 12px}
.block-children>.code-block{min-width:138px;flex:1 1 180px;background:#f7efff}
.code-value{display:inline-flex;align-items:center;min-height:39px;padding:4px 7px;border:2px solid #75a884;border-radius:11px;background:#e8f7e9;box-shadow:0 2px 0 #b9dbbf}
.code-value input{width:clamp(50px,9vw,110px);border:0;border-bottom:2px solid #79a487;background:transparent;color:#28563c;font:800 14px var(--mono);outline:0}
.code-value input:focus{border-bottom-color:#4b78c8}
.block-controls{display:flex;gap:5px;align-items:center}.block-controls button,.block-add-top,.block-remove{border:1px dashed #9e7bc5;border-radius:9px;padding:5px 8px;background:#fffdf8;color:#5f3989;font:800 .72rem system-ui;cursor:pointer}.block-remove{border:0;padding:0 5px;color:#8d3560;font-size:1.1rem}.block-add-top{margin-top:10px;border-style:solid;background:#fff}.block-empty{color:var(--muted);font-weight:700}.editor-panel textarea[hidden],.blocks[hidden]{display:none!important}
/* Bring the Creekside crew forward on the map, cards, and in each scene. */
.welcome-crew{min-height:470px;padding-top:58px}.welcome-crew .creekside-character{max-height:360px;filter:drop-shadow(0 15px 10px rgb(56 39 82 / 24%))}.welcome-crew .creekside-character-host{width:35%;margin:0 -3%}.welcome-crew .creekside-character-host:nth-child(2){transform:scale(1.16)}
.chapter-art{height:190px}.chapter-art .creekside-character{max-height:180px}.story-card{grid-template-columns:132px 1fr;min-height:136px}.story-card .speaker{height:126px}.story-card .speaker .creekside-character{max-height:122px}
@media(max-width:820px){.welcome-crew{min-height:380px}.welcome-crew .creekside-character{max-height:300px}.story-card{grid-template-columns:112px 1fr}.story-card .speaker{height:112px}.story-card .speaker .creekside-character{max-height:108px}}
@media(max-width:560px){.welcome-crew{min-height:300px}.welcome-crew .creekside-character{max-height:230px}.story-card{grid-template-columns:88px 1fr}.story-card .speaker{height:94px}.story-card .speaker .creekside-character{max-height:90px}.blocks{padding:12px}.block-children{padding-left:5px}.code-block{padding:7px}.code-value input{width:72px}}

/* Device layouts: each workshop surface is shaped for its available working space. */

/* Desktop — the complete map, editor, and live Lab stay visible together. */
@media (min-width:1121px) {
  .screen { padding-right:max(32px,4vw); padding-left:max(32px,4vw); }
  .workspace { grid-template-columns:minmax(210px,.7fr) minmax(390px,1.15fr) minmax(330px,.9fr); }
  .editor-panel textarea,.blocks { min-height:440px; }
  .world-wrap canvas { max-height:calc(100vh - 340px); object-fit:contain; }
}

/* Kindle Fire 8 HD (800px-class tablet) — fixed map beside a generous editor and output column. */
@media (min-width:701px) and (max-width:1120px) {
  .screen { padding:30px 28px 56px; }
  .topbar { padding-right:28px; padding-left:28px; }
  .lab-intro { grid-template-columns:minmax(0,1.05fr) minmax(270px,.95fr); min-height:350px; }
  .lab-intro-copy { padding:34px 30px; text-align:left; }
  .quick-actions { justify-content:flex-start; }
  .welcome-crew { order:initial; min-height:350px; padding-top:32px; }
  .welcome-crew .creekside-character { max-height:265px; }
  .chapter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .chapter-card { min-height:315px; }
  .workspace { grid-template-columns:minmax(205px,.68fr) minmax(0,1.32fr); gap:14px; }
  .toolbox { grid-row:1 / span 2; min-height:590px; max-height:none; }
  .editor-panel { min-height:430px; }
  .editor-panel textarea,.blocks { min-height:350px; }
  .output-panel { grid-column:2; min-height:360px; }
  .world-wrap { grid-template-columns:minmax(230px,1fr) minmax(150px,.65fr); }
  .world-wrap canvas { align-self:center; }
  .story-card { grid-template-columns:104px 1fr; }
}

/* iPhone 14 Pro (393px-class phone) — safe-area padding and touch-first single-column flow. */
@media (max-width:700px) {
  .jke-platform-bar { padding-right:max(12px,env(safe-area-inset-right)); padding-left:max(12px,env(safe-area-inset-left)); }
  .topbar { min-height:58px; padding-right:max(14px,env(safe-area-inset-right)); padding-left:max(14px,env(safe-area-inset-left)); gap:10px; }
  .mark { width:36px; height:36px; border-radius:12px; font-size:25px; }
  .screen { padding-right:max(14px,env(safe-area-inset-right)); padding-left:max(14px,env(safe-area-inset-left)); padding-bottom:calc(42px + env(safe-area-inset-bottom)); }
  .lab-map { padding-top:14px; }
  .lab-intro { border-radius:20px; }
  .lab-intro-copy { padding:24px 18px; }
  .lab-intro h1 { font-size:clamp(3.05rem,15vw,3.65rem); }
  .quick-actions .button { width:100%; }
  .welcome-crew { min-height:280px; }
  .welcome-crew .creekside-character { max-height:215px; }
  .story-card { grid-template-columns:74px 1fr; }
  .story-card .speaker { height:82px; }
  .story-card .speaker .creekside-character { max-height:78px; }
  .workspace { gap:12px; }
  .toolbox { min-height:160px; max-height:250px; }
  .editor-panel { min-height:470px; }
  .editor-panel textarea,.blocks { min-height:330px; }
  .world-wrap canvas { max-height:220px; object-fit:contain; }
  .editor-foot { padding-bottom:max(10px,env(safe-area-inset-bottom)); }
}

/* iPhone landscape prioritizes code and output over decorative navigation. */
@media (max-width:700px) and (max-height:500px) and (orientation:landscape) {
  .jke-platform-bar { display:none; }
  .topbar { min-height:46px; }
  .topbar .brand small { display:none; }
  .screen { padding-top:14px; }
  .lab-intro { grid-template-columns:1fr 1fr; }
  .welcome-crew { min-height:220px; }
  .welcome-crew .creekside-character { max-height:185px; }
  .workspace { grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr); }
  .toolbox { grid-row:1 / span 2; min-height:360px; max-height:none; }
  .output-panel { grid-column:2; }
  .world-wrap { grid-template-columns:1fr 1fr; }
  .world-wrap canvas { max-height:38svh; }
}

/* Lambda Lab 2: blocks are the first-class game surface on every device. */
.mission-line{display:flex;gap:10px 28px;align-items:center;flex-wrap:wrap}.mission{margin:0;padding:7px 11px;border-radius:10px;background:#fff;color:var(--ink);font-size:.8rem}.mission span{margin-right:6px;color:#9b315b;font:850 .68rem system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}.step-label{margin:0 0 2px;color:#8f3158;font:850 .62rem/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}.panel-title>div>h2,.editor-title h2{margin:0;font-size:1rem}.editor-title{min-height:64px}.editor-title #editMode{margin-left:auto}.workspace{grid-template-areas:"editor tray output";grid-template-columns:minmax(430px,1.4fr) minmax(220px,.68fr) minmax(330px,1fr);align-items:stretch}.editor-panel{grid-area:editor;border-color:#bda9da;box-shadow:0 18px 48px rgb(69 48 98 / 16%)}.toolbox{grid-area:tray}.output-panel{grid-area:output}.blocks{min-height:520px;padding:22px;background-color:#f8f3ff;background-image:radial-gradient(#d8cbea 1.1px,transparent 1.1px);background-size:18px 18px}.code-block{border:0;border-left:8px solid #7954c7;border-radius:13px;background:#fff;box-shadow:0 4px 0 #d8c6eb,0 8px 20px rgb(66 43 94 / 9%);overflow:hidden}.code-block:nth-child(4n+2){border-left-color:#e84473}.code-block:nth-child(4n+3){border-left-color:#3e9569}.code-block:nth-child(4n+4){border-left-color:#4c8db5}.code-block>.block-head{min-height:42px;padding:4px 5px 5px 3px}.block-head select{min-height:34px;max-width:190px;border:0;border-radius:8px;padding:4px 28px 4px 9px;background:#ede5fa;color:#4e287f;font:900 .78rem var(--mono);cursor:pointer}.block-tools{display:flex;gap:2px}.block-tools button{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#72558f;font-weight:900;cursor:pointer}.block-tools button:hover:not(:disabled){background:#f1e9fa}.block-tools button:disabled{opacity:.25;cursor:default}.block-remove{width:32px!important;height:32px!important}.block-children{padding:6px 7px 8px 11px}.code-value{min-height:44px;padding:5px 8px;border-color:#6ca47d;background:#edfaef}.code-value input{min-height:30px;width:clamp(64px,9vw,125px);font-size:15px}.block-controls button,.block-add-top{min-height:36px;padding:7px 10px}.block-add-top{width:100%;min-height:44px;margin-top:16px;border:2px dashed #a689ca;background:#fff}.block-empty{display:flex;min-height:190px;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #b8a2d4;border-radius:16px;background:rgb(255 255 255 / 72%);text-align:center}.block-empty span{color:var(--muted);font-size:.82rem}.block-tray{padding:10px;overflow:auto}.tray-group{padding:8px 0;border-bottom:1px solid #ebe3f1}.tray-group:last-child{border:0}.tray-group h3{display:flex;align-items:center;gap:7px;margin:0 0 7px;color:var(--muted);font:850 .72rem system-ui,sans-serif;text-transform:uppercase;letter-spacing:.07em}.tray-group h3 span{display:grid;width:25px;height:25px;place-items:center;border-radius:7px;background:#f0e8fa;color:var(--purple-dark);font-size:.9rem}.tray-group.recommended h3:after{content:"TRY THESE";margin-left:auto;padding:3px 5px;border-radius:5px;background:#fff0c7;color:#76521c;font-size:.52rem}.tray-blocks{display:grid;gap:6px}.chip{display:flex;min-height:48px;flex-direction:column;align-items:flex-start;justify-content:center;border:1px solid #d4c5e5;border-left:5px solid #7954c7;border-radius:10px;padding:6px 9px;background:#fff;text-align:left;box-shadow:0 2px 0 #e4d9ef}.chip b{font:850 .78rem system-ui,sans-serif}.chip small{max-width:100%;overflow:hidden;color:var(--muted);font:10px/1.3 var(--mono);text-overflow:ellipsis;white-space:nowrap}.chip:hover{transform:translateY(-1px);border-color:#9878c2}.program-map{margin-top:auto;border-top:1px solid var(--line)}.program-map summary{min-height:44px;padding:12px 14px;color:var(--purple-dark);font:800 .75rem system-ui,sans-serif;cursor:pointer}.program-map .structure{max-height:220px;padding-top:4px}.editor-foot{background:#fff}.run-button{min-width:132px}.check-button{background:#f2edf8}.world-wrap pre{min-height:92px}.speaker .creekside-character-host{height:100%}

/* Desktop UI: three simultaneous work zones, led by the wide block canvas. */
@media (min-width:1025px){.screen{max-width:1500px}.workspace{grid-template-columns:minmax(460px,1.45fr) minmax(220px,.66fr) minmax(330px,.95fr)}.toolbox,.editor-panel,.output-panel{min-height:650px}.blocks{min-height:520px}}

/* Kindle Fire HD 8 UI: blocks span the first row; tray and result share the second. */
@media (min-width:701px) and (max-width:1024px){.workspace{grid-template-areas:"editor editor" "tray output";grid-template-columns:minmax(270px,.8fr) minmax(0,1.2fr)}.editor-panel{min-height:500px}.blocks{min-height:390px}.toolbox{min-height:390px;max-height:520px}.output-panel{min-height:390px}.block-tray{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.world-wrap{grid-template-columns:1fr}.world-wrap canvas{max-height:260px;object-fit:contain}.story-card{margin-bottom:12px}}

/* iPhone 14 Pro UI: build, run, result, then optional tray in one thumb-friendly flow. */
@media (max-width:700px){.studio-head{margin-bottom:10px}.studio-head h1{font-size:2rem}.story-card{position:relative;margin-bottom:10px}.story-card #storyText{font-size:.82rem}.mission-line{display:block}.mission{margin-top:6px}.concept{display:none}.workspace{display:flex;flex-direction:column}.editor-panel{order:1;min-height:0}.output-panel{order:2}.toolbox{order:3;min-height:0;max-height:none}.blocks{min-height:355px;padding:12px}.editor-title{position:static}.editor-title #editMode{display:none}.view{min-height:38px;padding:7px 10px}.editor-foot{position:static;display:grid;grid-template-columns:1fr 1fr;padding-bottom:max(10px,env(safe-area-inset-bottom));box-shadow:0 -8px 22px rgb(50 36 75 / 10%)}.editor-foot #error{grid-column:1/-1}.run-button,.check-button{width:100%;min-width:0}.output-panel{min-height:0}.world-wrap{padding:8px}.world-wrap canvas{max-height:210px}.block-tray{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px}.tray-group{min-width:210px;border:0;scroll-snap-align:start}.program-map{margin-top:0}.chip{min-height:50px}.code-block{margin:8px 0}.block-children{padding-left:5px}.code-value input{width:78px}.hint-row{align-items:flex-start}}