@import url('/assets/fonts/jke/typography.css?jke-css=2026.10.29.1&jke-font=3.300-clear2');
:root{color-scheme:light;--ink:#283f42;--muted:#627271;--green:#456e5e;--paper:#f8f6ef;--line:#dce2d8;--jke-app-accent:#456e5e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jke-font-ui),system-ui,sans-serif;line-height:1.5}button,input,select{font:inherit}button,select{min-height:48px}button{border:1px solid var(--line);border-radius:12px;background:#fffdf8;color:var(--ink);padding:10px 16px;cursor:pointer;font-weight:700;transition:background .15s,transform .15s}button:hover{background:#e9efe4}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #ac6d45;outline-offset:3px}.primary{background:var(--green);color:#fffdf3;border-color:var(--green)}.primary:hover{background:#345545}.masthead{max-width:1500px;margin:auto;padding:22px 4%;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line)}.brand{color:var(--ink);display:flex;gap:12px;align-items:center;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.15em;line-height:1.4}.brand small{display:block;letter-spacing:0;font-size:16px;font-weight:700}.brand-mark{font-size:32px;display:grid;place-items:center;width:48px;height:48px;background:#dce7d9;color:var(--green);border-radius:15px}.masthead nav{display:flex;gap:8px}.masthead nav button{border-color:transparent;background:transparent;font-size:14px}main{max-width:1500px;margin:auto;padding:0 4% 36px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--jke-font-reading),Georgia,serif;font-weight:700;line-height:1.12}h1{font-size:clamp(32px,4.4vw,62px);letter-spacing:-.04em}h2{font-size:30px}h3{font-size:17px;line-height:1.3}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--green);margin-bottom:16px}.hero{display:grid;grid-template-columns:.95fr 1.1fr;gap:5%;align-items:center;padding:62px 0 50px}.hero-copy>p:not(.eyebrow){color:var(--muted);max-width:490px;font-size:16px}.hero h1{margin-bottom:22px}.hero h1 em{color:var(--green);font-weight:700}.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 20px}.hero-buttons button{font-size:14px;padding:14px 19px}.hero-buttons .primary span{margin-left:14px}.hero-copy .progress-note{font-size:12px!important}.hero-scene{position:relative;transform:rotate(-1deg);background:#e5e9de;border:8px solid #fffdf6;border-radius:32px;box-shadow:0 16px 45px #314d4114}.world-svg{display:block;width:100%;height:auto}.scene-sticker{position:absolute;bottom:-14px;right:15px;background:#f3d995;border:5px solid #fffdf6;border-radius:9px;padding:6px 13px;font-size:12px;font-weight:700;transform:rotate(3deg)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:8px 0 24px}.section-heading .eyebrow{margin-bottom:8px}.section-heading h2{margin:0}.section-heading>p{font-size:13px;color:var(--muted);margin-bottom:5px}.chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.chapter{border:1px solid var(--line);background:#fffdf7;border-radius:20px;overflow:hidden}.chapter-heading{padding:20px 16px 12px;display:flex;gap:10px;min-height:115px;background:color-mix(in srgb,var(--chapter) 9%,#fffdf7);border-top:4px solid var(--chapter)}.chapter-heading h3{margin:0 0 6px}.chapter-heading p{font-size:11px;color:var(--muted);margin:0}.chapter-number{font:italic 25px Georgia,serif;color:var(--chapter)}.chapter ol{list-style:none;padding:6px 9px;margin:0}.chapter li+li{border-top:1px solid #edf0e6}.chapter li button{display:flex;align-items:center;text-align:left;gap:10px;width:100%;min-height:75px;padding:10px 7px;border:0;background:none;font-size:12px}.chapter button small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:4px}.mission-number{color:var(--chapter);font-size:11px}.mission-arrow{margin-left:auto;color:var(--chapter);font-size:20px}.workshop-banner{margin-top:34px;border-radius:22px;background:#e6ecdf;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:22px}.workshop-banner .eyebrow{margin-bottom:9px}.workshop-banner h2{margin-bottom:10px}.workshop-banner p:last-child{margin-bottom:0;color:var(--muted);font-size:14px}footer{max-width:1500px;margin:auto;border-top:1px solid var(--line);padding:18px 4% max(18px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted)}.play-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:28px}.play-heading .eyebrow{margin-bottom:7px}.play-heading h1{font-size:34px;margin-bottom:18px}.brief{display:flex;align-items:center;gap:15px;background:#eaf0e4;padding:12px 20px;border-radius:16px;margin-bottom:20px;min-height:83px}.brief img{height:65px;width:43px;object-fit:contain;align-self:end;margin-bottom:-12px}.brief p{margin:0;font-size:14px;max-width:940px}.workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,1fr);gap:24px;align-items:start}.scene-panel{min-width:0}.scene-panel #scene{border:1px solid var(--line);border-radius:24px;overflow:hidden}.robot-status{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.robot-status>div{border-bottom:1px solid var(--line);padding-bottom:10px;font-size:13px;font-weight:700}.robot-status small{display:block;font-size:11px;font-weight:400;color:var(--muted);overflow-wrap:anywhere}.goals{border-radius:16px;background:#fffdf7;border:1px solid var(--line);padding:17px 20px}.goals h2{font-family:inherit;font-size:15px;font-weight:700;margin-bottom:12px}.goals ul{list-style:none;padding:0;margin:0}.goals li{font-size:13px;margin:8px 0}.goals li span{margin-right:7px}.goals .met{color:#38684a}.result{font-size:13px;padding:12px 3px}.result p{margin:5px 0}.result.error,.result.success{padding:16px;border-radius:15px;margin-top:12px;background:#f6e6da}.result.success{background:#dfedd8}.result button{margin-top:10px}.event-log{font-size:12px;border-top:1px solid var(--line);padding:12px 0}.event-log summary{cursor:pointer;min-height:40px}.event-log ol{max-height:180px;overflow:auto;padding-left:0;list-style:none}.event-log li{padding:5px 8px;border-bottom:1px solid var(--line)}.event-log li>span{display:inline-block;min-width:24px;color:var(--muted)}.event-log .signal{background:#eee5f5}.event-log .error{color:#8b422c}.program-panel{border:1px solid var(--line);border-radius:22px;padding:20px;background:#fffdf8;min-width:0}.editor-heading{display:flex;align-items:center;gap:6px}.editor-heading h2{font-family:inherit;font-size:19px;font-weight:700;margin:0 auto 0 0}.editor-heading button{padding:7px 9px;font-size:11px}.robot-tabs{display:flex;gap:8px;margin:16px 0}.robot-tabs button{flex:1;padding:8px;min-width:0;font-size:13px}.robot-tabs small{font-size:9px;display:block;color:var(--muted);font-weight:400}.robot-tabs button[aria-pressed=true]{border:2px solid var(--green);background:#edf3e7}.editor-tools{display:flex;align-items:center;gap:8px}.editor-tools label{flex:1;font-size:12px}.editor-tools label select{margin-left:4px;max-width:calc(100% - 32px)}select,input{color:var(--ink);background:#fffdf8;border:1px solid #cbd7c9;border-radius:8px;padding:7px 9px;max-width:100%}.editor-tools>button{padding:5px 13px}.editor-note{font-size:11px;color:var(--muted);margin:12px 0}.edit-area{border:0;padding:0;margin:0;min-width:0}.program-scroll{max-height:390px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.block-list{padding:7px;background:#f2f3eb;border:1px dashed #c8d4c1;border-radius:10px;min-height:68px}.block-list.insert-here{border-color:#698b66}.block{background:#e2eada;border:1px solid #c7d5be;border-radius:10px;padding:5px;margin:5px 0}.block.selected{border:2px solid #6e8d62;padding:4px}.block.active{outline:3px solid #d49a41;outline-offset:1px;background:#f4e6b9}.block-top{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.block-name{padding:5px 7px;background:transparent;border:0;border-radius:5px;font-size:12px;text-align:left;flex:1;min-height:40px}.block-name>span{font-size:17px;margin-right:6px}.block-top select{font-size:11px;min-height:40px;max-width:100%}.repeat-field{font-size:11px}.repeat-field input{width:65px;min-height:40px}.block .block-list{margin:4px;background:#f9faf2}.insert-button{font-size:10px;font-weight:700;border:0;background:transparent;width:100%;min-height:40px;padding:6px;text-align:left;color:#4c6b48}.branch-label{display:block;margin:6px 8px;font-size:9px;letter-spacing:.1em;color:#5f7160}.selection-tools{display:flex;gap:4px;margin:10px 0;flex-wrap:wrap}.selection-tools button{font-size:10px;padding:7px 10px;flex:1;white-space:nowrap}.palette-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin:17px 0 9px;color:var(--muted)}.palette{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:270px;overflow:auto}.palette button{font-size:11px;text-align:left;padding:8px 9px;border-radius:9px;display:flex;gap:8px;align-items:center}.palette button>span{font-size:18px;color:var(--green)}.execution{position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 18px;background:#f8f6eff5;backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:17px;margin-top:20px;box-shadow:0 0 20px #314d410a}.prediction{flex:1;max-width:420px}.prediction label{font-size:10px;display:block;color:var(--muted);margin-bottom:5px}.prediction input{width:100%;min-height:40px;font-size:12px}.run-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.run-buttons button{font-size:12px}.speed-label{font-size:10px;display:flex;gap:5px;align-items:center}.speed-label select{font-size:11px;min-height:48px}.live-message{min-height:24px;font-size:13px;color:var(--green);margin:10px 0}.mobile-tabs{display:none}.workshop-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}.workshop-tools label,.workshop-tools button{font-size:12px}.workshop-tools select{margin-left:7px}.world-svg text{fill:#35524d;font-family:var(--jke-font-ui),system-ui,sans-serif}.scene-caption{font-size:9px;letter-spacing:2px;font-weight:700}.place-label{font-size:9px;font-weight:700}.small-label{font-size:9px}.robot-label{font-size:10px;font-weight:700;paint-order:stroke;stroke:#fffaf0;stroke-width:3px}.robot{transition:transform .25s ease}.working{filter:drop-shadow(0 0 3px #e9c37e)}dialog{max-width:580px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:24px;padding:30px;color:var(--ink);background:var(--paper);box-shadow:0 25px 100px #203c4040}dialog::backdrop{background:#213a4155;backdrop-filter:blur(3px)}dialog h2{font-size:30px}dialog p,dialog li{font-size:14px}dialog li{margin:8px 0}dialog button{margin:10px 5px 0 0}dialog .setting{display:flex;align-items:center;gap:12px;padding:12px 0}dialog input[type=checkbox]{width:22px;height:22px}dialog input[type=text],#project-name{display:block;width:100%;margin:12px 0}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip:focus{display:block;padding:12px}.reduce-motion *{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media(min-width:1500px){.program-scroll{max-height:480px}}@media(max-width:1100px){.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace{gap:15px;grid-template-columns:minmax(0,1fr) minmax(310px,1fr)}.execution{align-items:end}.prediction{max-width:270px}.run-buttons{gap:5px}.program-panel{padding:14px}.hero{padding-top:40px}.masthead{padding:15px 4%}.masthead nav{gap:0}.masthead nav button{padding:8px 10px}.hero-buttons{gap:8px}.hero-buttons button{padding:12px 14px}}@media(max-width:700px){.masthead{padding:14px 5%;flex-wrap:wrap;gap:8px}.brand small{font-size:14px}.brand-mark{width:40px;height:40px;font-size:27px}.masthead nav{width:100%;justify-content:space-between}.masthead nav button{font-size:12px;padding:8px}.hero{grid-template-columns:1fr;padding:30px 0 28px;gap:22px}.hero h1{font-size:44px}.hero-copy>p:not(.eyebrow){font-size:14px}.hero-buttons{margin:22px 0 14px}.hero-scene{margin:0 3px 12px}.section-heading>p{display:none}.section-heading h2{font-size:30px}.chapters{gap:12px}.chapter-heading{padding:15px 12px;min-height:115px}.chapter-heading h3{font-size:15px}.chapter li button{font-size:11px;gap:6px}.chapter-number{font-size:21px}.mission-arrow{display:none}.chapter ol{padding:3px 6px}.workshop-banner{padding:22px;display:block}.workshop-banner h2{font-size:27px}.workshop-banner button{margin-top:20px}.play-heading{padding-top:22px;align-items:start}.play-heading h1{font-size:28px}.play-heading .eyebrow{font-size:9px}.play-heading>button{font-size:11px;padding:7px 10px;flex-shrink:0}.brief{padding:10px 12px;gap:10px;margin-bottom:12px}.brief p{font-size:12px}.brief img{height:60px;width:35px}.mobile-tabs{display:flex;gap:6px;margin-bottom:13px}.mobile-tabs button{flex:1;font-size:12px}.mobile-tabs button[aria-selected=true]{background:#dfead6;border-color:#839f73}.workspace{display:block}.workspace[data-tab=scene] .program-panel,.workspace[data-tab=program] .scene-panel{display:none}.program-scroll{max-height:none}.palette{max-height:250px}.execution{display:block;padding:10px;margin-top:12px;bottom:max(0px,env(safe-area-inset-bottom));border-radius:12px}.prediction{max-width:none;margin-bottom:9px}.prediction label{font-size:9px}.prediction input{min-height:36px}.run-buttons{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:6px}.run-buttons button{font-size:11px;padding:9px 8px}.speed-label{grid-column:1/-1;justify-content:end}.speed-label select{min-height:36px;padding:3px 8px}.robot-status{margin:10px 0;gap:7px}.robot-status small{font-size:10px}.goals{padding:14px}.program-panel{padding:14px}.editor-note{font-size:12px}.palette button,.block-name{font-size:12px;min-height:48px}.block-top select,.insert-button,.selection-tools button{min-height:48px}.workshop-tools{gap:8px}.workshop-tools>label{width:100%}.workshop-tools button{flex:1}.workshop-tools select{max-width:70%}footer{display:block;font-size:10px;padding:16px 5%}footer>span{display:block;margin-bottom:4px}main{padding:0 5% 24px}}@media(max-width:370px){.chapters{grid-template-columns:1fr}.hero h1{font-size:38px}.chapter-heading{min-height:0}.chapter li button{font-size:13px}.selection-tools button{font-size:9px}}

/* Focused, full-screen game layouts */
@media (min-width: 1001px) {
  .masthead { max-width: none; padding: 12px clamp(22px, 3vw, 48px); }
  .brand-mark { width: 38px; height: 38px; font-size: 25px; }
  .brand small { font-size: 14px; }
  main { max-width: none; padding: 0 clamp(22px, 3vw, 48px) 24px; }
  .play-heading { padding-top: 18px; }
  .play-heading h1 { font-size: clamp(30px, 3vw, 42px); margin-bottom: 12px; }
  .brief { margin-bottom: 14px; min-height: 68px; }
  .workspace { grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); gap: 18px; }
  .program-panel { padding: 16px; }
  .program-scroll { max-height: min(34vh, 390px); }
  .execution { margin-top: 12px; padding: 10px 14px; gap: 14px; }
  .prediction { max-width: 340px; }
  .live-message { min-height: 18px; margin: 4px 0; }
  footer { max-width: none; }
}

/* Tablet portrait: scene and robot builder get dedicated full-width workspaces. */
@media (min-width: 701px) and (max-width: 1000px) and (orientation: portrait) {
  html[data-game-view="tablet"] .masthead { padding: 10px 20px; gap: 10px; }
  html[data-game-view="tablet"] .brand-mark { width: 38px; height: 38px; }
  html[data-game-view="tablet"] .masthead nav button { padding: 8px; font-size: 12px; }
  html[data-game-view="tablet"] main { padding: 0 20px 22px; }
  html[data-game-view="tablet"] .play-heading { padding-top: 16px; }
  html[data-game-view="tablet"] .play-heading h1 { font-size: 36px; margin-bottom: 10px; }
  html[data-game-view="tablet"] .brief { min-height: 72px; margin-bottom: 12px; }
  html[data-game-view="tablet"] .mobile-tabs { display: flex; gap: 10px; margin: 0 0 12px; }
  html[data-game-view="tablet"] .mobile-tabs button { flex: 1; font-size: 15px; }
  html[data-game-view="tablet"] .mobile-tabs button[aria-selected="true"] { background: #dfead6; border-color: #839f73; }
  html[data-game-view="tablet"] .workspace { display: block; }
  html[data-game-view="tablet"] .workspace[data-tab="scene"] .program-panel,
  html[data-game-view="tablet"] .workspace[data-tab="program"] .scene-panel { display: none; }
  html[data-game-view="tablet"] .scene-panel #scene { border-radius: 20px; }
  html[data-game-view="tablet"] .program-panel { padding: 20px; }
  html[data-game-view="tablet"] .program-scroll { max-height: 34vh; }
  html[data-game-view="tablet"] .palette { max-height: 28vh; }
  html[data-game-view="tablet"] .execution { position: sticky; bottom: 0; margin: 0 -20px; padding: 10px 20px max(10px, env(safe-area-inset-bottom)); border-radius: 0; display: flex; flex-wrap: wrap; }
  html[data-game-view="tablet"] .prediction { display: none; }
  html[data-game-view="tablet"] .run-buttons { justify-content: stretch; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html[data-game-view="tablet"] .run-buttons button { min-width: 0; white-space: nowrap; }
  html[data-game-view="tablet"] .run-buttons .speed-label { grid-column: auto; justify-content: center; }
  html[data-game-view="tablet"] .live-message { min-height: 16px; }
}