:root{--ink:#26323b;--muted:#61717b;--cream:#fff8e9;--paper:#fffdf7;--line:#ddcfba;--orange:#ec7b48;--orange-dark:#b94e2d;--blue:#3877a8;--green:#4d9874;--shadow:0 15px 34px #5a42201c;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--tap:44px}*{box-sizing:border-box}html{background:#fff8e9}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#fffaf0,#f5ead7);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}button,input,textarea{font:inherit}button,.button,.tab,.palette-button,.block button{touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.skip-link{position:absolute;z-index:20;left:-999px;top:8px;background:#fff;padding:10px;border-radius:8px}.skip-link:focus{left:12px}.platform-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:9px;height:52px;padding:0 max(16px,5vw);border-bottom:1px solid #e7dac6;background:#fffdf8}.platform-bar .bolt{color:var(--orange);font-size:22px}.platform-note{color:var(--muted);font-size:13px}.screen{max-width:1240px;margin:auto;padding:44px max(20px,5vw) 60px}.home-screen{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;min-height:calc(100vh - 52px);overflow:hidden}.room-art{position:absolute;inset:0;opacity:.7;pointer-events:none}.room-art:before{position:absolute;right:8%;bottom:8%;left:8%;height:170px;border-radius:50%;background:#e5c998;content:""}.lamp{position:absolute;top:10%;right:18%;width:100px;height:100px;border-radius:50%;background:#f6c95b;box-shadow:0 0 0 18px #f6c95b33}.shelf{position:absolute;right:7%;bottom:28%;width:220px;height:14px;background:#b17e4b;box-shadow:0 44px #b17e4b,0 88px #b17e4b}.peg{position:absolute;width:24px;height:24px;border-radius:50%;background:#e37e55}.peg-a{right:20%;bottom:40%}.peg-b{right:14%;bottom:48%}.peg-c{right:28%;bottom:34%}.home-copy,.home-cast{position:relative;z-index:1}.eyebrow{margin:0 0 10px;color:var(--orange-dark);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.home-copy h1,.screen-heading h1,.studio-head h1{margin:0 0 14px;font-size:clamp(32px,5vw,58px);line-height:1.02}.lead{max-width:600px;color:var(--muted);font-size:20px;line-height:1.45}.home-actions{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px;margin-top:28px}.card{display:grid;grid-template-columns:36px 1fr;column-gap:8px;align-items:center;min-height:110px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fffdf7;box-shadow:var(--shadow);color:var(--ink);cursor:pointer;text-align:left}.card span{grid-row:span 2;color:var(--orange);font-size:26px}.card b{font-size:17px}.card small{color:var(--muted)}.card:hover,.card:focus-visible{border-color:var(--orange);transform:translateY(-2px)}.card.primary{border-color:#efa86e;background:#fff0db}.home-cast{display:flex;align-items:end;justify-content:center;gap:14px;min-height:360px}.cast-card{min-width:120px;padding:12px;border:1px solid #eadac2;border-radius:18px;background:#ffffffb8;box-shadow:var(--shadow);text-align:center}.cast-card [data-creekside-character]{display:block;height:180px}.cast-card b,.cast-card small{display:block}.cast-card small{color:var(--muted);font-size:12px}.screen-heading{margin-bottom:28px}.screen-heading p:not(.eyebrow){color:var(--muted);font-size:18px}.button,.icon-button,.text-button{min-height:var(--tap);padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fffdf7;color:var(--ink);font-weight:700;cursor:pointer}.button:hover,.button:focus-visible,.icon-button:hover,.icon-button:focus-visible{border-color:var(--orange)}.button.primary{border-color:var(--orange-dark);background:var(--orange);color:#fff}.button.danger{color:#9a3b35}.button.small{min-height:40px;padding:7px 10px;font-size:13px}.text-button{border:0;background:transparent;color:var(--blue)}.challenge-grid,.example-grid,.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:28px}.challenge-card,.example-card,.project-card{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fffdf7;box-shadow:var(--shadow)}.challenge-card h2,.example-card h2,.project-card h2{margin:0 0 8px;font-size:20px}.challenge-card p,.example-card p,.project-card p{min-height:46px;color:var(--muted)}.studio{max-width:1440px}.studio-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.studio-head h1{font-size:34px}.toolbar,.run-controls{display:flex;flex-wrap:wrap;gap:7px}.challenge-banner{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:12px;border:1px solid #f0c58b;border-radius:14px;background:#fff0d9}.challenge-banner [data-creekside-character]{width:70px;height:84px}.challenge-banner p{margin:4px 0;color:var(--muted)}.tabs{display:none;gap:6px;margin-bottom:12px}.tab{flex:1;min-height:var(--tap);padding:11px 8px;border:1px solid var(--line);border-radius:10px;background:#fffdf7;font-weight:700}.tab.active{background:var(--ink);color:#fff}.studio-grid{display:grid;grid-template-columns:260px minmax(300px,1fr) minmax(360px,1.2fr);grid-template-rows:minmax(360px,1fr) 280px;gap:14px;min-height:650px}.panel{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fffdf7;box-shadow:var(--shadow)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 15px;border-bottom:1px solid #eadfce;background:#fff7e9}.panel-head h2{margin:0;font-size:16px}.panel-head span{color:var(--muted);font-size:12px}.command-panel{grid-row:1/3}.program-panel{grid-column:2}.stage-panel{grid-column:3}.code-panel{grid-column:2/4}.stage-output{display:grid;grid-template-columns:1fr 1fr;flex:1;gap:10px;min-height:0;padding:12px;background:#f8f0e2}.stage-output pre{min-width:0;margin:0;padding:12px;overflow:auto;border-radius:10px;background:#1e2930;color:#d8f4d4;font:14px/1.45 var(--mono);white-space:pre-wrap}canvas{width:100%;height:auto;align-self:center;border:1px solid #d0b991;background:#fff}.input-line{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}.input-line input{flex:1;min-width:0;padding:10px;border:1px solid var(--line);border-radius:9px}.status{padding:9px 13px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}.empty{padding:14px;color:var(--muted)}.program{flex:1;padding:12px;overflow:auto}.block{display:flex;align-items:center;gap:8px;min-height:52px;margin-bottom:9px;padding:10px;border:2px solid #8ca4b0;border-left-width:7px;border-radius:10px;background:#f0f7f8;cursor:grab}.block.motion{border-left-color:#4d9b75;background:#eef8f0}.block.output{border-left-color:#d9824f;background:#fff3e9}.block.logic{border-left-color:#7b70ba;background:#f2effb}.block.loop{border-left-color:#3c78a8;background:#edf5fa}.block.advanced{border-left-color:#b78947;background:#fff8e6}.block.active{outline:3px solid #f5bd36;box-shadow:0 0 0 5px #f5bd3638}.block .label{flex:1}.block input,.block select{max-width:110px;padding:5px;border:1px solid #b9c8cd;border-radius:6px;background:#fff}.block button{min-width:32px;min-height:32px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:16px;cursor:pointer}.nested{margin:8px 0 0;padding:8px 0 0 22px;border-left:2px dashed #b8c8cf}.palette-group{padding:10px 12px;border-bottom:1px solid #eadfce}.palette-group h3{margin:0 0 7px;color:var(--muted);font-size:13px}.palette-button{display:block;width:100%;min-height:42px;margin:5px 0;padding:9px;border:1px solid #c9d5d7;border-radius:8px;background:#f5faf9;cursor:pointer;text-align:left}.palette-button:hover{border-color:var(--orange)}textarea{width:100%;flex:1;min-height:0;padding:16px;border:0;background:#1e2930;color:#f2f5f1;font:14px/1.55 var(--mono);resize:none}.error{min-height:30px;padding:0 14px;color:#a93b33}.more-row{display:flex;align-items:center;gap:16px;margin-top:12px}.more-row details{color:var(--muted);font-size:13px}.close{float:right;border:0;background:transparent;font-size:26px}dialog{max-width:520px;padding:28px;border:0;border-radius:16px;box-shadow:0 20px 70px #0004}dialog::backdrop{background:#26323b66}
@media(max-width:1100px){.home-screen{grid-template-columns:1fr}.home-cast{min-height:230px}.tabs{position:sticky;top:52px;z-index:4;display:flex;padding:8px 0;background:linear-gradient(180deg,#fffaf0 75%,#fffaf000)}.tab{font-size:14px}.studio-grid{display:block;min-height:0}.studio-grid .panel{display:none;min-height:calc(100svh - 255px);margin-bottom:12px}.studio-grid[data-active="commands"] .command-panel,.studio-grid[data-active="blocks"] .program-panel,.studio-grid[data-active="stage"] .stage-panel,.studio-grid[data-active="code"] .code-panel{display:flex}.stage-output{min-height:360px}.program{min-height:360px}.code-panel textarea{min-height:420px}.palette-group{padding:12px 14px}.palette-button{min-height:var(--tap);font-size:15px}.more-row{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
@media(max-width:700px){.platform-note{display:none}.screen{padding:24px 16px calc(38px + env(safe-area-inset-bottom))}.studio{padding-right:12px;padding-left:12px}.home-actions{grid-template-columns:1fr}.home-cast{gap:6px;min-height:0;margin-top:4px}.cast-card{flex:1;min-width:0;padding:8px}.cast-card [data-creekside-character]{height:112px}.cast-card b{font-size:14px}.cast-card small{display:none}.home-copy h1,.screen-heading h1{font-size:clamp(30px,10vw,42px)}.lead{font-size:17px}.studio-head{align-items:start;gap:12px;flex-direction:column}.toolbar{display:grid;width:100%;grid-template-columns:repeat(4,1fr)}.toolbar .button{padding:8px 4px;white-space:nowrap}.challenge-banner{align-items:flex-start}.challenge-banner [data-creekside-character]{width:52px;height:62px}.tabs{top:52px;gap:4px}.tab{padding:8px 2px;font-size:12px}.studio-grid .panel{min-height:calc(100svh - 238px)}.panel-head{align-items:flex-start;flex-wrap:wrap;padding:11px 12px}.run-controls{display:grid;width:100%;grid-template-columns:repeat(4,1fr)}.run-controls .button{padding:8px 2px;font-size:12px}.stage-output{grid-template-columns:1fr;min-height:0;padding:10px}.stage-output pre{min-height:154px;max-height:30svh}.stage-output canvas{max-height:240px;object-fit:contain}.input-line{padding:9px}.block{align-items:flex-start;flex-wrap:wrap;gap:6px;padding:9px}.block .label{flex-basis:calc(100% - 154px);min-width:104px;font-size:14px;line-height:32px}.block input{flex:1;min-width:0;max-width:calc(50% - 8px)}.block button{min-width:36px;min-height:36px;background:#ffffff99}.nested{padding-left:12px}.more-row{align-items:flex-start;flex-direction:column;gap:4px}}
@media(max-height:600px) and (orientation:landscape){.platform-bar{height:44px}.tabs{top:44px}.screen{padding-top:18px}.home-screen{min-height:auto}.home-cast{display:none}.home-actions{grid-template-columns:repeat(2,minmax(150px,1fr));margin-top:14px}.card{min-height:78px;padding:12px}.studio-grid .panel{min-height:calc(100svh - 178px)}.stage-output{grid-template-columns:1fr 1fr}.stage-output pre{min-height:100px;max-height:42svh}.stage-output canvas{max-height:42svh}}
[hidden] { display: none !important; }

/* Jay, Kay & Elle suite skin: warm paper, berry accents, and rounded purple tools. */
:root { --ink:#31264e; --muted:#6d627d; --cream:#fff8e8; --paper:#fffdf8; --line:#d9cfea; --orange:#e84473; --orange-dark:#8f3158; --blue:#7954c7; --green:#3e9569; --shadow:0 16px 38px rgb(69 48 98 / 12%); }
body { background:radial-gradient(circle at 86% 0, #f0e8ff 0, transparent 30%), linear-gradient(180deg, #fffdf7, #fff7e6); font-family:ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Arial Rounded MT Bold", system-ui, sans-serif; }
.jke-platform-bar { margin-top:0; border-top:0; border-bottom:1px solid rgb(49 38 78 / 12%); box-shadow:0 4px 18px rgb(49 38 78 / 7%); }
.platform-bar { height:62px; border-color:#ded3ed; color:var(--ink); background:rgb(255 253 248 / 92%); box-shadow:0 5px 16px rgb(69 48 98 / 6%); }
.platform-bar .bolt { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(135deg,#e84473,#8056c7); box-shadow:0 5px 12px rgb(93 55 133 / 22%); font-size:17px; }
.platform-note { color:var(--muted); font-weight:700; }
.home-screen { background:linear-gradient(135deg, rgb(255 255 255 / 76%), rgb(246 238 255 / 62%)); border:1px solid rgb(121 84 199 / 14%); border-radius:28px; margin-top:24px; min-height:calc(100vh - 138px); box-shadow:var(--shadow); }
.room-art:before { background:#d5c1f1; }.lamp { background:#f2b7d0; box-shadow:0 0 0 18px rgb(232 68 115 / 12%); }.shelf { background:#8767b4; box-shadow:0 44px #8767b4, 0 88px #8767b4; }.peg { background:#e84473; }
.eyebrow { color:#8f3158; }.card { border-color:#ded3ed; background:rgb(255 255 255 / 88%); }.card span { color:#7954c7; }.card.primary { border-color:#b68dd9; color:#fff; background:linear-gradient(135deg,#e84473,#8056c7); box-shadow:0 8px 0 #694aa0; }.card.primary span,.card.primary small { color:#fff; }.card:hover,.card:focus-visible { border-color:#a785d2; box-shadow:0 12px 22px rgb(75 49 113 / 12%); }
.cast-card,.challenge-card,.example-card,.project-card,.panel { border-color:#ded3ed; background:rgb(255 255 255 / 86%); }.cast-card { box-shadow:0 12px 28px rgb(69 48 98 / 10%); }.challenge-banner { border-color:#decbed; background:linear-gradient(100deg,#f2eaff,#fff8dc); }.panel-head { border-color:#e8e0ef; background:#f8f4fb; }.button.primary { border-color:#a93360; background:linear-gradient(135deg,#e84473,#c83e72); box-shadow:0 4px 0 #9d3157; }.button:hover,.button:focus-visible,.icon-button:hover,.icon-button:focus-visible { border-color:#9e83d5; }
.block.logic { border-left-color:#7954c7; background:#f2edfb; }.block.loop { border-left-color:#5c78bd; background:#edf1fb; }.block.output { border-left-color:#e84473; background:#fff0f5; }.block.motion { border-left-color:#3e9569; background:#edf9f1; }.block.advanced { border-left-color:#b478b2; background:#fcf0fa; }.palette-button { border-color:#d5c9e6; background:#f8f5fd; }.stage-output { background:#f5f0fa; }.tabs .tab.active { background:var(--ink); }

/* Device layouts: keep the same workshop, but give each target enough room to work well. */

/* Desktop — persistent, three-panel workspace. */
@media (min-width:1101px) {
  .screen { padding-right:max(32px,4vw); padding-left:max(32px,4vw); }
  .home-screen { grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr); }
  .studio-grid { grid-template-columns:minmax(220px,.72fr) minmax(310px,1fr) minmax(390px,1.18fr); }
  .stage-output canvas { max-height:calc(100vh - 300px); object-fit:contain; }
}

/* Kindle Fire 8 HD (800px-class tablet) — spacious single-pane studio and two-column library. */
@media (min-width:701px) and (max-width:1100px) {
  .screen { padding:32px 28px 52px; }
  .home-screen { grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr); gap:24px; min-height:calc(100vh - 126px); }
  .home-actions { grid-template-columns:repeat(2,minmax(190px,1fr)); }
  .home-cast { gap:9px; min-height:280px; }
  .cast-card { min-width:0; padding:10px; }
  .cast-card [data-creekside-character] { height:142px; }
  .challenge-grid,.example-grid,.project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tabs { top:62px; }
  .studio-grid .panel { min-height:calc(100svh - 254px); }
  .stage-output { grid-template-columns:minmax(190px,.8fr) minmax(260px,1.2fr); min-height:440px; }
  .stage-output pre { min-height:0; }
  .stage-output canvas { max-height:390px; object-fit:contain; }
  .program { min-height:440px; }
  .code-panel textarea { min-height:500px; }
}

/* iPhone 14 Pro (393px-class phone) — one-hand controls, safe areas, and a vertical stage. */
@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)); }
  .platform-bar { height:56px; padding-right:max(14px,env(safe-area-inset-right)); padding-left:max(14px,env(safe-area-inset-left)); }
  .screen { padding-right:max(14px,env(safe-area-inset-right)); padding-left:max(14px,env(safe-area-inset-left)); }
  .home-screen { border-radius:20px; margin-top:14px; }
  .home-actions { gap:10px; }
  .card { min-height:84px; padding:14px; }
  .tabs { top:56px; margin-right:2px; margin-left:2px; }
  .tab { min-width:0; }
  .studio-grid .panel { min-height:calc(100svh - 226px); }
  .stage-output { gap:8px; }
  .stage-output canvas { width:100%; max-height:210px; }
  .input-line { padding-bottom:max(9px,env(safe-area-inset-bottom)); }
  .challenge-grid,.example-grid,.project-grid { grid-template-columns:1fr; }
}

/* iPhone landscape keeps the stage useful without forcing it below the fold. */
@media (max-width:700px) and (max-height:500px) and (orientation:landscape) {
  .jke-platform-bar { display:none; }
  .platform-bar { height:44px; }
  .tabs { top:44px; }
  .studio-grid .panel { min-height:calc(100svh - 160px); }
  .stage-output canvas { max-height:36svh; }
}

/* Splash character cards use the shared Creekside renderer, but keep every
   source crop fully visible.  This matters because the cast mixes full-body,
   action, and portrait-friendly artwork. */
.home-cast {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.cast-card {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  min-width:0;
  min-height:310px;
}
.cast-card [data-creekside-character] {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:0;
  overflow:visible;
}
.cast-card .creekside-character {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
}

/* Desktop UI — a generous, side-by-side launchpad and persistent workshop. */
@media (min-width:1101px) {
  .home-cast { gap:18px; min-height:390px; }
  .cast-card { min-height:330px; padding:16px; }
}

/* Kindle Fire 8 HD UI (800px portrait) — two-column welcome screen with
   compact but legible cast cards and touch-ready controls. */
@media (min-width:701px) and (max-width:900px) {
  .home-screen { grid-template-columns:minmax(0,1.08fr) minmax(230px,.92fr); gap:20px; }
  .home-cast { gap:8px; min-height:294px; }
  .cast-card { min-height:294px; padding:9px 7px; border-radius:16px; }
  .cast-card b { font-size:15px; }
  .cast-card small { font-size:11px; }
}

/* iPhone 14 Pro UI (393px portrait) — an intentional, vertical launchpad
   instead of three shrunken illustrations competing with the main actions. */
@media (max-width:700px) {
  .home-cast { gap:8px; min-height:186px; margin-top:18px; }
  .cast-card { min-height:186px; padding:8px 5px; border-radius:14px; }
  .cast-card b { margin-top:4px; font-size:13px; }
  .cast-card small { display:none; }
}