:root{--paper:#fff;--paper-soft:#f7faf7;--ink:#24364b;--muted:#6f7e8e;--line:#dfe7e2;--green:#408f79;--green-dark:#2f705f;--mint:#dff2e9;--blue:#4c87c7;--yellow:#f6c95e;--shadow:0 14px 38px rgba(39,67,57,.09);font-family:"Nunito","PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:#f7faf7}*{box-sizing:border-box}body{min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 10% 2%,rgba(113,191,157,.12),transparent 28%),linear-gradient(180deg,#f7faf7,#f4f7f5 48%,#f8f5ed)}button,a{font:inherit}.skip-link{position:fixed;z-index:300;top:8px;left:8px;padding:9px 13px;border-radius:10px;color:#fff;background:#233d55;transform:translateY(-150%)}.skip-link:focus{transform:none}.code-topbar{position:sticky;z-index:100;top:0;height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;border-bottom:1px solid rgba(64,91,78,.1);background:rgba(255,255,255,.9);backdrop-filter:blur(16px)}.back-link{justify-self:start;color:#536879;text-decoration:none;font-size: calc(14.5px * var(--fs, 1));font-weight:850}.code-brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}.code-brand .brand-mark{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(145deg,#4fa88a,#317660);box-shadow:0 5px 0 #286453;font-size: calc(15px * var(--fs, 1));font-weight:950;transform:rotate(-3deg)}.code-brand>span:last-child,.learner{display:flex;flex-direction:column}.code-brand b{font-size: calc(16px * var(--fs, 1))}.code-brand small{margin-top:2px;color:var(--muted);font-size: calc(13px * var(--fs, 1))}.learner{justify-self:end;flex-direction:row;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:#fff;cursor:pointer}.learner span{font-size: calc(22px * var(--fs, 1))}.learner b{font-size: calc(13.5px * var(--fs, 1))}.code-shell{width:min(1180px,calc(100% - 36px));margin:25px auto 70px}.code-hero{position:relative;min-height:260px;display:flex;align-items:center;justify-content:space-between;gap:30px;overflow:hidden;padding:40px 50px;border:1px solid #cae3d8;border-radius:32px;background:linear-gradient(125deg,#e6f5ed,#fbfbef 62%,#e7f2fb);box-shadow:var(--shadow)}.code-hero:after{content:"</>";position:absolute;right:35%;bottom:-58px;color:rgba(57,121,100,.06);font-family:ui-monospace,monospace;font-size: calc(150px * var(--fs, 1));font-weight:950;transform:rotate(-8deg)}.hero-kicker,.section-heading span{color:var(--green-dark);font-size: calc(13.5px * var(--fs, 1));font-weight:950;letter-spacing:.1em}.code-hero h1{max-width:620px;margin:10px 0 8px;font-size: calc(35px * var(--fs, 1));line-height:1.2}.code-hero p{max-width:620px;margin:0;color:#607769;font-size: calc(14.5px * var(--fs, 1));line-height:1.75}.hero-code{position:relative;z-index:1;width:255px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px;border-radius:25px;background:#fff;box-shadow:0 18px 36px rgba(42,84,69,.14);transform:rotate(2deg)}.hero-code span{display:block;padding:8px 11px;border-radius:8px;color:#fff;background:#4c87c7;font-size: calc(13.5px * var(--fs, 1));font-weight:900}.hero-code span:nth-child(2){background:#d59142}.hero-code span:nth-child(3){margin-left:17px;background:#4a9c80}.hero-code i{position:absolute;right:18px;bottom:18px;width:39px;height:39px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#e66f53;font-style:normal}.code-summary{display:grid;grid-template-columns:180px 180px 1fr;gap:12px;margin-top:15px}.code-summary>div{min-height:78px;display:flex;flex-direction:column;justify-content:center;padding:15px 18px;border:1px solid var(--line);border-radius:20px;background:#fff}.code-summary span{color:var(--muted);font-size: calc(13px * var(--fs, 1));font-weight:800}.code-summary strong{margin-top:6px;font-size: calc(19px * var(--fs, 1))}.code-summary .summary-progress{gap:8px}.summary-progress i{height:9px;overflow:hidden;border-radius:10px;background:#edf1ef}.summary-progress em{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4ca989,#75bd77);transition:width .25s}.grade-section{margin-top:35px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 2px 15px}.section-heading h2{margin:5px 0 0;font-size: calc(22px * var(--fs, 1))}.section-heading small{color:var(--muted);font-size: calc(13px * var(--fs, 1))}.grade-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.grade-grid button{min-height:91px;padding:13px 8px;border:1px solid var(--line);border-radius:18px;color:var(--ink);background:#fff;cursor:pointer;transition:.18s}.grade-grid button:hover{transform:translateY(-2px);border-color:#8ec5b2}.grade-grid button[aria-pressed="true"]{color:#fff;border-color:var(--green);background:linear-gradient(145deg,#4c9d82,#347561);box-shadow:0 8px 20px rgba(48,117,94,.2)}.grade-grid b,.grade-grid span{display:block}.grade-grid b{font-size: calc(14px * var(--fs, 1))}.grade-grid span{margin-top:6px;color:inherit;opacity:.75;font-size: calc(13px * var(--fs, 1))}.grade-guide{position:relative;min-height:165px;margin:15px 0 34px;padding:25px 28px;overflow:hidden;border-radius:25px;color:#fff;background:linear-gradient(120deg,#2f6f5d,#497d77 58%,#516f9b)}.grade-guide:after{content:"0101";position:absolute;right:28px;top:11px;color:rgba(255,255,255,.09);font-family:ui-monospace,monospace;font-size: calc(72px * var(--fs, 1));font-weight:950;letter-spacing:.07em}.grade-guide>span{font-size: calc(13px * var(--fs, 1));font-weight:950;letter-spacing:.11em}.grade-guide h2{margin:9px 0 7px;font-size: calc(24px * var(--fs, 1))}.grade-guide p{max-width:680px;margin:0;color:#dcece7;font-size: calc(14px * var(--fs, 1));line-height:1.7}.grade-guide strong{display:inline-block;margin-top:14px;padding:6px 9px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(255,255,255,.1);font-size: calc(13px * var(--fs, 1))}.grade-video{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.85fr);margin:-19px 0 34px;overflow:hidden;border:1px solid var(--line);border-radius:25px;background:#fff;box-shadow:0 10px 26px rgba(46,72,62,.07)}.grade-video-player{min-width:0;display:flex;align-items:center;background:#162b25}.grade-video video{display:block;width:100%;aspect-ratio:16/9;background:#162b25}.grade-video-copy{display:flex;flex-direction:column;padding:24px 25px}.video-kicker{color:var(--green-dark);font-size: calc(13.5px * var(--fs, 1));font-weight:950;letter-spacing:.08em}.grade-video-copy h2{margin:8px 0 7px;font-size: calc(21px * var(--fs, 1));line-height:1.35}.grade-video-copy>p{margin:0;color:var(--muted);font-size: calc(13.5px * var(--fs, 1));line-height:1.7}.grade-video-status{margin-top:10px!important;padding:8px 10px;border-radius:10px;color:#924b40!important;background:#fff0ed;font-size: calc(13px * var(--fs, 1))!important}.grade-video-status[hidden]{display:none}.grade-video-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.grade-video-actions a{min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border:1px solid #c9dbd4;border-radius:10px;color:#326f5e;background:#f5faf7;text-decoration:none;font-size: calc(13px * var(--fs, 1));font-weight:900}.grade-video-actions .video-download-primary{border-color:var(--green);color:#fff;background:var(--green)}.grade-video-transcript{margin-top:auto;padding-top:14px;color:#536f65;font-size: calc(13.5px * var(--fs, 1))}.grade-video-transcript summary{min-height:38px;display:flex;align-items:center;cursor:pointer;font-weight:900}.grade-video-transcript summary:before{content:"＋";margin-right:7px;color:var(--green-dark);font-size: calc(15px * var(--fs, 1))}.grade-video-transcript[open] summary:before{content:"－"}.grade-video-transcript>div{max-height:170px;overflow:auto;padding:10px 11px;border-radius:10px;background:#f1f6f3;white-space:pre-line;line-height:1.75}.lesson-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.lesson-card{position:relative;min-height:220px;display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 8px 20px rgba(46,72,62,.05)}.lesson-card.is-complete{border-color:#a7d6c6;background:linear-gradient(145deg,#fff,#f1fbf6)}.lesson-card .lesson-number{position:absolute;top:16px;right:16px;color:#96a49d;font-family:ui-monospace,monospace;font-size: calc(13.5px * var(--fs, 1));font-weight:900}.lesson-card .lesson-icon{width:49px;height:49px;display:grid;place-items:center;border-radius:16px;background:#edf6f1;font-size: calc(24px * var(--fs, 1))}.lesson-card .lesson-concept{margin-top:15px;color:var(--green-dark);font-size: calc(13px * var(--fs, 1));font-weight:950}.lesson-card h3{margin:6px 0;font-size: calc(17px * var(--fs, 1))}.lesson-card p{margin:0;color:var(--muted);font-size: calc(13.5px * var(--fs, 1));line-height:1.65}.lesson-card button{min-height:40px;margin-top:auto;border:0;border-radius:12px;color:#fff;background:var(--green);cursor:pointer;font-size: calc(13.5px * var(--fs, 1));font-weight:950}.lesson-card.is-complete button{color:#24624f;background:#dff4eb}.blockly-license{margin:26px 0 0;color:#7e8c86;text-align:center;font-size: calc(13px * var(--fs, 1))}.lab-head{min-height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;margin-bottom:13px;padding:10px 15px;border:1px solid var(--line);border-radius:20px;background:#fff}.lab-head>button{justify-self:start;padding:9px 12px;border:1px solid var(--line);border-radius:11px;color:#4a6171;background:#fff;cursor:pointer;font-size: calc(13.5px * var(--fs, 1));font-weight:900}.lab-head>div{display:flex;flex-direction:column;text-align:center}.lab-head>div span{color:var(--green-dark);font-size: calc(13px * var(--fs, 1));font-weight:900}.lab-head>div b{margin-top:3px;font-size: calc(14px * var(--fs, 1))}.lab-block-count{justify-self:end;padding:7px 10px;border-radius:10px;color:#486c60;background:#edf6f1;font-size: calc(13px * var(--fs, 1));font-weight:900}.lab-layout{display:grid;grid-template-columns:minmax(285px,33%) minmax(0,1fr);gap:14px}.mission-panel,.editor-panel{overflow:hidden;border:1px solid var(--line);border-radius:25px;background:#fff;box-shadow:var(--shadow)}.mission-panel{display:flex;flex-direction:column;padding:24px}.mission-copy>span{color:var(--green-dark);font-size: calc(13px * var(--fs, 1));font-weight:950;letter-spacing:.08em}.mission-copy h1{margin:7px 0;font-size: calc(23px * var(--fs, 1))}.mission-copy p{margin:0;color:var(--muted);font-size: calc(13.5px * var(--fs, 1));line-height:1.7}.mission-board-wrap{margin-top:20px;padding:12px;border-radius:20px;background:#eef4ef}.mission-board{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:3px;aspect-ratio:var(--cols)/var(--rows);margin:auto}.board-cell{position:relative;display:grid;place-items:center;min-width:0;border:1px solid #d9e7df;border-radius:7px;background:#fff;font-size:clamp(12px,2vw,24px)}.board-cell.wall{border-color:#6e8179;background:repeating-linear-gradient(135deg,#71857c 0 7px,#637970 7px 14px)}.board-cell.start:after{content:"起";position:absolute;left:2px;bottom:1px;color:#85a394;font-size: calc(12px * var(--fs, 1));font-weight:950}.board-cell.goal{background:#fff8db}.board-cell.collected{color:transparent}.board-cell .robot{position:absolute;z-index:2;width:65%;height:65%;display:grid;place-items:center;border-radius:50%;color:#fff;background:#ec7857;box-shadow:0 3px 0 #c55237;font-size:clamp(10px,1.6vw,19px);transition:transform .15s}.robot.dir-N{transform:rotate(-90deg)}.robot.dir-S{transform:rotate(90deg)}.robot.dir-W{transform:rotate(180deg)}.robot.dir-E{transform:rotate(0)}.board-legend{display:flex;justify-content:center;gap:9px;margin-top:9px;color:#71827a;font-size: calc(12px * var(--fs, 1))}.board-legend i{font-style:normal}.legend-robot{color:#e2674c}.board-status{min-height:52px;margin:14px 0 0;padding:11px 12px;border-radius:13px;color:#42665a;background:#eaf5f0;font-size: calc(13px * var(--fs, 1));line-height:1.65}.board-status.error{color:#9a4b41;background:#fff0ed}.board-status.success{color:#25624e;background:#dcf4e9}.mission-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:13px}.mission-actions button{min-height:39px;padding:7px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;font-size: calc(13px * var(--fs, 1));font-weight:900}.hint-button{color:#87651d}.reset-button{color:#637483}.hint-copy{margin:9px 0 0;padding:10px 11px;border-radius:11px;color:#725c28;background:#fff5d7;font-size: calc(13px * var(--fs, 1));line-height:1.65}.editor-panel{position:relative;display:flex;flex-direction:column;min-width:0}.editor-toolbar{min-height:61px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 15px;border-bottom:1px solid var(--line)}.editor-toolbar>div{display:flex;flex-direction:column}.editor-toolbar b{font-size: calc(14px * var(--fs, 1))}.editor-toolbar span{margin-top:3px;color:var(--muted);font-size: calc(12.5px * var(--fs, 1))}.editor-toolbar button{padding:7px 9px;border:1px solid #c9d9e8;border-radius:10px;color:#3d6f9f;background:#f1f7fd;cursor:pointer;font-size: calc(12.5px * var(--fs, 1));font-weight:900}.blockly-host{height:590px;min-height:450px}.blocklySvg{background:#f8faf9!important}.blocklyToolboxDiv{background:#eef4f1!important;border-right:1px solid #dce6e1}.blocklyTreeRow{height:38px!important;margin:3px 5px!important;border-radius:9px!important}.blocklyTreeLabel{font-family:"PingFang SC","Microsoft YaHei",sans-serif!important;font-size: calc(13.5px * var(--fs, 1))!important}.generated-code{max-height:160px;margin:0;overflow:auto;padding:14px 18px;border-top:1px solid #d9e4ee;color:#dcecff;background:#25374b;font:10px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.run-bar{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--line);background:#fff}.run-bar>span{color:#6a7b73;font-size: calc(13px * var(--fs, 1))}.run-button{min-width:145px;min-height:43px;border:0;border-radius:13px;color:#fff;background:linear-gradient(145deg,#ed7b59,#d95d43);box-shadow:0 5px 0 #bb4934;cursor:pointer;font-size: calc(13.5px * var(--fs, 1));font-weight:950}.run-button:disabled{opacity:.55;cursor:wait}.lab-feedback{position:absolute;z-index:20;right:14px;bottom:78px;left:14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:13px 15px;border:1px solid #9ed0bd;border-radius:17px;background:rgba(238,250,245,.97);box-shadow:0 14px 35px rgba(39,90,72,.18);backdrop-filter:blur(10px)}.lab-feedback[hidden]{display:none}.lab-feedback>span{font-size: calc(27px * var(--fs, 1))}.lab-feedback b{font-size: calc(14px * var(--fs, 1))}.lab-feedback p{margin:3px 0 0;color:#567268;font-size: calc(13px * var(--fs, 1))}.lab-feedback button{min-height:37px;padding:0 13px;border:0;border-radius:11px;color:#fff;background:var(--green);cursor:pointer;font-size: calc(13px * var(--fs, 1));font-weight:950}.code-toast{position:fixed;z-index:220;left:50%;bottom:24px;padding:10px 15px;border-radius:11px;color:#fff;background:#263d50;opacity:0;transform:translate(-50%,12px);transition:.2s;pointer-events:none;font-size: calc(13.5px * var(--fs, 1));font-weight:850}.code-toast.show{opacity:1;transform:translate(-50%,0)}button:focus-visible,a:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid rgba(51,137,107,.35);outline-offset:3px}@media(max-width:900px){.grade-video{grid-template-columns:1fr}.grade-video-copy{min-height:270px}.grade-grid{grid-template-columns:repeat(3,1fr)}.lesson-catalog{grid-template-columns:1fr 1fr}.lab-layout{grid-template-columns:1fr}.mission-panel{display:grid;grid-template-columns:1fr minmax(260px,42%);gap:12px}.mission-board-wrap{grid-row:1/5;grid-column:2;margin:0}.mission-actions{margin-top:0}.blockly-host{height:540px}.code-lab{padding-bottom:50px}}@media(max-width:620px){.code-topbar{height:65px;padding:0 12px}.back-link span,.code-brand small,.learner b{display:none}.code-brand .brand-mark{width:38px;height:38px}.code-shell{width:calc(100% - 20px);margin-top:12px}.code-hero{min-height:360px;align-items:flex-start;padding:28px 23px}.code-hero h1{font-size: calc(29px * var(--fs, 1))}.hero-code{position:absolute;right:22px;bottom:24px;width:225px;padding:16px}.code-summary{grid-template-columns:1fr 1fr}.code-summary .summary-progress{grid-column:1/-1}.grade-grid{grid-template-columns:repeat(2,1fr)}.grade-video-copy{min-height:0;padding:20px}.grade-video-copy h2{font-size: calc(19px * var(--fs, 1))}.grade-video-actions a{flex:1 1 auto}.lesson-catalog{grid-template-columns:1fr}.section-heading{align-items:flex-start}.section-heading small{max-width:130px;text-align:right}.grade-guide:after{right:-20px}.lab-head{grid-template-columns:1fr auto}.lab-head>div{align-items:flex-end;text-align:right}.lab-block-count{display:none}.lab-layout{display:block}.mission-panel{display:flex;margin-bottom:10px;padding:18px}.mission-board-wrap{margin-top:15px}.mission-board{max-width:360px}.editor-toolbar span{display:none}.blockly-host{height:510px;min-height:510px}.run-bar{position:sticky;z-index:10;bottom:0}.run-bar>span{display:none}.run-button{width:100%}.lab-feedback{grid-template-columns:auto 1fr;bottom:73px}.lab-feedback button{grid-column:1/-1}.board-cell{border-radius:5px}.mission-actions{margin-top:0}}
@media(max-width:900px){body.code-lab-open .study-tools{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Keep the floating study buddy out of dense comic and challenge content. */
@media(min-width:901px){
  body[data-page="code"] .study-tools{right:4px;bottom:14px}
  body[data-page="code"] .fox-button{width:68px;height:68px}
}
@media(max-width:900px){
  body[data-page="code"] .study-tools{display:none}
}

/* Static comic lessons: one illustrated scene plus four readable teaching steps. */
.grade-comic{position:relative;margin:-19px 0 36px;padding:25px;overflow:hidden;border:1px solid #cfe2d8;border-radius:28px;background:radial-gradient(circle at 96% 4%,rgba(246,201,94,.24),transparent 25%),linear-gradient(145deg,#fff 0,#f7fbf8 56%,#eef7f2 100%);box-shadow:0 14px 32px rgba(46,72,62,.09)}
.grade-comic:before{content:"";position:absolute;right:22px;top:20px;width:68px;height:68px;border:2px dashed rgba(64,143,121,.17);border-radius:50%;pointer-events:none}
.grade-comic-head{position:relative;z-index:1;margin:0 0 18px}
.comic-kicker{display:inline-flex;align-items:center;min-height:30px;padding:6px 11px;border-radius:999px;color:#276653;background:#dff2e9;font-size: calc(13.5px * var(--fs, 1));font-weight:950;letter-spacing:.04em}
.comic-kicker:before{content:"▧";margin-right:7px;font-size: calc(14px * var(--fs, 1))}
.grade-comic-head h2{margin:10px 0 6px;font-size: calc(25px * var(--fs, 1));line-height:1.3}
.grade-comic-head p{max-width:760px;margin:0;color:#60756b;font-size: calc(14.5px * var(--fs, 1));line-height:1.7}
.grade-comic-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr);align-items:start;gap:18px}
.comic-hero{position:relative;min-width:0;margin:0;overflow:hidden;border:8px solid #fff;border-radius:24px;background:#dcece5;box-shadow:0 10px 25px rgba(48,88,72,.14);transform:rotate(-.35deg)}
.comic-hero:after{content:"看图找规律";position:absolute;left:13px;top:13px;padding:7px 10px;border-radius:10px;color:#fff;background:rgba(37,70,60,.82);font-size: calc(13.5px * var(--fs, 1));font-weight:950;letter-spacing:.04em;backdrop-filter:blur(5px)}
.comic-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#e5f1eb}
.comic-hero figcaption{position:absolute;right:10px;bottom:10px;left:10px;padding:10px 12px;border-radius:12px;color:#fff;background:rgba(35,58,51,.82);font-size: calc(13.5px * var(--fs, 1));font-weight:850;line-height:1.55;backdrop-filter:blur(7px)}
.comic-lesson-grid{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.comic-step{--step-color:#4c9d82;display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;min-width:0;padding:13px 14px;border:1px solid #dce9e3;border-left:5px solid var(--step-color);border-radius:17px;background:rgba(255,255,255,.92);box-shadow:0 5px 14px rgba(44,78,65,.055)}
.comic-step:nth-child(2){--step-color:#e4a347}
.comic-step:nth-child(3){--step-color:#5c8fc5}
.comic-step:nth-child(4){--step-color:#e57862}
.comic-step-number{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;color:#fff;background:var(--step-color);box-shadow:0 3px 0 color-mix(in srgb,var(--step-color),#000 17%);font-size: calc(15px * var(--fs, 1));font-weight:950}
.comic-step-label{display:block;color:var(--step-color);font-size: calc(13.5px * var(--fs, 1));font-weight:950;letter-spacing:.03em}
.comic-step h3{margin:3px 0 4px;font-size: calc(16px * var(--fs, 1));line-height:1.35}
.comic-step p{margin:0;color:#5f716a;font-size: calc(14px * var(--fs, 1));line-height:1.65}
.lesson-card p{font-size: calc(13.5px * var(--fs, 1))}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(51,137,107,.35);outline-offset:3px}
@media(max-width:900px){.grade-comic-layout{grid-template-columns:1fr}.comic-lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.comic-hero{transform:none}}
@media(max-width:620px){.grade-comic{margin-top:-20px;padding:15px;border-radius:22px}.grade-comic:before{display:none}.grade-comic-head{margin-bottom:13px}.comic-kicker{font-size: calc(13.5px * var(--fs, 1))}.grade-comic-head h2{font-size: calc(21px * var(--fs, 1))}.grade-comic-head p{font-size: calc(14px * var(--fs, 1))}.grade-comic-layout{gap:13px}.comic-hero{border-width:5px;border-radius:18px}.comic-hero:after{left:8px;top:8px;padding:5px 7px;font-size: calc(13px * var(--fs, 1))}.comic-hero figcaption{right:6px;bottom:6px;left:6px;padding:8px 9px;font-size: calc(13.5px * var(--fs, 1))}.comic-lesson-grid{grid-template-columns:1fr;gap:9px}.comic-step{grid-template-columns:36px minmax(0,1fr);padding:12px}.comic-step-number{width:32px;height:32px}.comic-step h3{font-size: calc(15px * var(--fs, 1))}.comic-step p{font-size: calc(14px * var(--fs, 1))}.lesson-card{min-height:210px}.lesson-card p{font-size: calc(14px * var(--fs, 1))}}

/* V4: a larger curriculum with genuine activity modes instead of one long card list. */
.grade-comic-head>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.grade-comic-head>div:first-child>button{min-height:40px;padding:0 12px;border:1px solid #b9d6ca;border-radius:11px;color:#326f5e;background:#fff;font-size: calc(13.5px * var(--fs, 1));font-weight:900}.grade-comic.is-collapsed .grade-comic-layout{display:none}.grade-comic.is-collapsed .grade-comic-head{margin-bottom:0}.grade-comic.is-collapsed .grade-comic-head>p{margin-bottom:0}
.grade-comic-layout[hidden],.editor-panel[hidden],.prediction-panel[hidden]{display:none}
.prediction-program span.indent-1{max-width:calc(100% - 24px)}.prediction-program span.indent-2{max-width:calc(100% - 48px)}
.lesson-filters{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px;margin:-2px 0 18px;padding:16px;border:1px solid #d6e5de;border-radius:20px;background:linear-gradient(135deg,#f8fcfa,#f4f8fc)}.lesson-filters>div{min-width:0}.lesson-filters>div>span{display:block;margin-bottom:7px;color:#64786f;font-size: calc(13px * var(--fs, 1));font-weight:950;letter-spacing:.06em}.lesson-filter-scroll,.lesson-status-filters{display:flex;flex-wrap:wrap;gap:7px}.lesson-filter-scroll button,.lesson-status-filters button{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border:1px solid #cbdcd4;border-radius:12px;color:#486258;background:#fff;font-size: calc(13.5px * var(--fs, 1));font-weight:900;white-space:nowrap}.lesson-filter-scroll button span{font-size: calc(16px * var(--fs, 1))}.lesson-filter-scroll button small{min-width:21px;padding:2px 5px;border-radius:99px;color:#6d8078;background:#edf3f0;font-size: calc(12.5px * var(--fs, 1));text-align:center}.lesson-filter-scroll button[aria-pressed="true"],.lesson-status-filters button[aria-pressed="true"]{color:#fff;border-color:#347561;background:#3f8c72;box-shadow:0 3px 0 #286453}.lesson-filter-scroll button[aria-pressed="true"] small{color:#315e50;background:#dff4eb}.lesson-filters>p{grid-column:1/-1;margin:0;padding-top:2px;color:#6c7f76;font-size: calc(13.5px * var(--fs, 1))}.lesson-card .lesson-type{display:inline-flex;align-items:center;align-self:flex-start;min-height:25px;margin-top:13px;padding:4px 8px;border-radius:99px;color:#315e50;background:#e1f3eb;font-size: calc(13px * var(--fs, 1));font-weight:950}.lesson-card[data-type="debug"] .lesson-type{color:#8c4a40;background:#ffebe7}.lesson-card[data-type="complete"] .lesson-type{color:#6f5794;background:#eee8fa}.lesson-card[data-type="predict"] .lesson-type{color:#35658d;background:#e6f2fb}.lesson-card[data-type="optimize"] .lesson-type{color:#815c18;background:#fff1c9}.lesson-card[data-type="test"] .lesson-type{color:#3e5c91;background:#e7edfa}.lesson-card[data-type="paint"] .lesson-type{color:#8a4775;background:#fae8f4}.lesson-card[data-type="compute"] .lesson-type{color:#315f9a;background:#e5effd}.lesson-difficulty{position:absolute;top:37px;right:16px;color:#d6ddd9;font-size: calc(13.5px * var(--fs, 1));letter-spacing:2px}.lesson-difficulty b{color:#e7a949}.lesson-card p{margin-bottom:15px}.lesson-empty{padding:34px 20px;border:2px dashed #bed3ca;border-radius:20px;color:#486258;background:#f7fbf9;text-align:center}.lesson-empty>span{font-size: calc(32px * var(--fs, 1))}.lesson-empty h3{margin:8px 0 4px}.lesson-empty p{margin:0;color:#73847d;font-size: calc(13.5px * var(--fs, 1))}.lesson-empty button,.lesson-load-more{min-height:44px;margin-top:14px;padding:0 17px;border:0;border-radius:12px;color:#fff;background:#3f8c72;font-size: calc(13.5px * var(--fs, 1));font-weight:950}.lesson-load-more{width:100%}
.mission-board-wrap.has-paint-targets{background:linear-gradient(135deg,#fff4fb,#eef8f4)}.board-cell.paint-target:after{content:"";position:absolute;width:24%;height:24%;border:2px dashed var(--target-color,#d65da0);border-radius:50%;opacity:.82}.board-cell.painted{background:#ff9dcc!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.62)}.board-cell.painted[data-paint="yellow"]{background:#f7d562!important}.board-cell.painted[data-paint="blue"]{background:#75b9ec!important}.board-cell.painted.paint-target:after{content:"✓";width:auto;height:auto;border:0;color:#713b61;font-size: calc(13px * var(--fs, 1));font-weight:950}.board-cell.checkpoint:before{content:attr(data-checkpoint);position:absolute;right:2px;top:2px;width:15px;height:15px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#6676bd;font-size: calc(12px * var(--fs, 1));font-weight:950}.collect-order{position:absolute;z-index:1;left:2px;top:2px;width:15px;height:15px;display:grid;place-items:center;border-radius:50%;color:#60470d;background:#f6c95e;font-size: calc(12px * var(--fs, 1));font-weight:950}.case-progress{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.case-progress span{padding:4px 7px;border-radius:99px;color:#697d74;background:#edf3f0;font-size: calc(12.5px * var(--fs, 1));font-weight:900}.case-progress span.active{color:#fff;background:#4a9c80}.case-progress span.pass{color:#286453;background:#dff4eb}.case-progress span.fail{color:#90463d;background:#ffe9e5}
.prediction-panel{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:25px;background:#fff;box-shadow:var(--shadow)}.prediction-panel>header{padding:25px 28px;color:#fff;background:linear-gradient(130deg,#315f8d,#534d91)}.prediction-panel>header>span{font-size: calc(13px * var(--fs, 1));font-weight:950;letter-spacing:.08em}.prediction-panel h2{margin:7px 0 5px;font-size: calc(24px * var(--fs, 1))}.prediction-panel header p{margin:0;color:#d8e4f1;font-size: calc(14px * var(--fs, 1));line-height:1.6}.prediction-program{display:grid;gap:7px;margin:22px;padding:18px;border-radius:18px;background:#eef4f8}.prediction-program span{display:block;width:max-content;max-width:100%;padding:9px 12px;border-radius:9px;color:#fff;background:#4c87c7;font-size: calc(14px * var(--fs, 1));font-weight:900}.prediction-program span.loop{background:#d59142}.prediction-program span.condition{background:#6676bd}.prediction-program span.data{background:#a05b9b}.prediction-program span.indent-1{margin-left:24px}.prediction-program span.indent-2{margin-left:48px}.prediction-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 22px}.prediction-options button{min-height:56px;padding:10px 13px;border:2px solid #d2dfda;border-radius:14px;color:#304c42;background:#fff;font-size: calc(14px * var(--fs, 1));font-weight:900}.prediction-options button:hover{border-color:#4a9c80;background:#f1faf6}.prediction-options button.wrong{border-color:#e98d7e;background:#fff0ed}.prediction-options button.correct{border-color:#4a9c80;background:#e1f5ec}.prediction-feedback{margin:17px 22px 12px;padding:12px 14px;border-radius:12px;color:#536b62;background:#eef5f2;font-size: calc(13.5px * var(--fs, 1));line-height:1.6}.prediction-feedback.error{color:#93483e;background:#fff0ed}.prediction-feedback.success{color:#286453;background:#dff4eb}.prediction-next{width:calc(100% - 44px);min-height:46px;margin:0 22px 22px;border:0;border-radius:13px;color:#fff;background:#3f8c72;font-size: calc(13.5px * var(--fs, 1));font-weight:950}
@media(max-width:900px){.lesson-filters{grid-template-columns:1fr}.prediction-panel{min-height:500px}.case-progress{justify-content:center}}
@media(max-width:620px){.grade-comic{margin-top:0}.grade-comic.is-collapsed{padding:13px 15px}.grade-comic.is-collapsed .grade-comic-head h2{margin-bottom:3px}.grade-comic.is-collapsed .grade-comic-head p{display:none}.grade-comic-head>div:first-child>button{min-height:44px}.lesson-filters{margin-top:0;padding:14px}.lesson-filter-scroll{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:2px 14px 10px;scroll-snap-type:x proximity}.lesson-filter-scroll button{flex:none;scroll-snap-align:start}.lesson-status-filters button{flex:1}.prediction-panel{min-height:0}.prediction-panel>header{padding:21px 18px}.prediction-program{margin:16px;padding:14px}.prediction-options{grid-template-columns:1fr;margin:0 16px}.prediction-feedback{margin:14px 16px 18px}}
.lesson-card .lesson-icon{color:#2f705f;font-size: calc(19px * var(--fs, 1));font-weight:950}.lesson-card[data-type="debug"] .lesson-icon{color:#9c4d42;background:#ffebe7}.lesson-card[data-type="complete"] .lesson-icon{color:#71579a;background:#eee8fa}.lesson-card[data-type="predict"] .lesson-icon{color:#35658d;background:#e6f2fb}.lesson-card[data-type="optimize"] .lesson-icon{color:#815c18;background:#fff1c9}.lesson-card[data-type="test"] .lesson-icon{color:#3e5c91;background:#e7edfa}.lesson-card[data-type="paint"] .lesson-icon{color:#8a4775;background:#fae8f4}.lesson-card[data-type="compute"] .lesson-icon{color:#315f9a;background:#e5effd}
.learner [data-profile-avatar]{font-size:0}.learner [data-profile-avatar]:after{content:"我";font-size: calc(14px * var(--fs, 1));font-weight:950}

/* Story campaigns: six continuous seasons, driven by the real lesson pass state. */
.story-campaign{--story:#4b88ba;--story-dark:#315f8d;--story-soft:#eaf4fb;position:relative;display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);gap:20px;margin:-19px 0 34px;padding:26px;overflow:hidden;border:1px solid color-mix(in srgb,var(--story),#fff 60%);border-radius:29px;background:radial-gradient(circle at 4% 0,color-mix(in srgb,var(--story),#fff 78%),transparent 35%),linear-gradient(145deg,#fff,var(--story-soft));box-shadow:0 16px 35px rgba(48,76,66,.1)}
.story-campaign[data-story-id="starlight-mail"]{--story:#d99342;--story-dark:#86591e;--story-soft:#fff7df}
.story-campaign[data-story-id="moonlight-show"]{--story:#8c6fbd;--story-dark:#59457e;--story-soft:#f4effc}
.story-campaign[data-story-id="cloud-observatory"]{--story:#4b88ba;--story-dark:#315f8d;--story-soft:#eaf4fb}
.story-campaign[data-story-id="mist-rescue"]{--story:#4b9473;--story-dark:#2f6f56;--story-soft:#e9f6ef}
.story-campaign[data-story-id="green-energy"]{--story:#63a75d;--story-dark:#39783a;--story-soft:#edf8e9}
.story-campaign[data-story-id="star-ark"]{--story:#596eb2;--story-dark:#394d8b;--story-soft:#edf0fb}
.story-campaign:before{content:"{ STORY }";position:absolute;right:-18px;top:-8px;color:color-mix(in srgb,var(--story),transparent 88%);font:950 58px/1 ui-monospace,monospace;transform:rotate(5deg);pointer-events:none}
.story-campaign-copy,.story-route-wrap{position:relative;z-index:1;min-width:0}.story-season{display:inline-flex;min-height:29px;align-items:center;padding:5px 10px;border-radius:99px;color:#fff;background:var(--story-dark);font-size: calc(13.5px * var(--fs, 1));font-weight:950;letter-spacing:.05em}.story-campaign-copy h2{margin:11px 0 7px;font-size: calc(25px * var(--fs, 1));line-height:1.3}.story-campaign-copy>p{margin:0;color:#5d7068;font-size: calc(14px * var(--fs, 1));line-height:1.75}.story-cast{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.story-cast span{min-height:28px;display:inline-flex;align-items:center;padding:5px 9px;border:1px solid color-mix(in srgb,var(--story),#fff 48%);border-radius:9px;color:var(--story-dark);background:rgba(255,255,255,.74);font-size: calc(13px * var(--fs, 1));font-weight:900}.story-goal{margin-top:13px!important;padding:11px 12px;border-left:4px solid var(--story);border-radius:0 12px 12px 0;background:rgba(255,255,255,.72)}.story-goal b,.story-goal span{display:block}.story-goal b{color:var(--story-dark);font-size: calc(13px * var(--fs, 1))}.story-goal span{margin-top:3px}.continue-story{min-height:44px;margin-top:14px;padding:0 17px;border:0;border-radius:13px;color:#fff;background:linear-gradient(145deg,var(--story),var(--story-dark));box-shadow:0 4px 0 color-mix(in srgb,var(--story-dark),#000 18%);cursor:pointer;font-size: calc(13.5px * var(--fs, 1));font-weight:950}.story-route-wrap{padding:17px;border:1px solid rgba(255,255,255,.75);border-radius:22px;background:rgba(255,255,255,.73);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--story),transparent 88%)}.story-route-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.story-route-head span{color:var(--story-dark);font-size: calc(13.5px * var(--fs, 1));font-weight:950}.story-route-head b{padding:5px 8px;border-radius:99px;color:var(--story-dark);background:var(--story-soft);font-size: calc(13px * var(--fs, 1))}.story-chapter-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.story-chapter{min-width:0;padding:12px;border:1px solid #e0e8e4;border-radius:16px;background:#fff}.story-chapter.is-current{border-color:color-mix(in srgb,var(--story),#fff 34%);box-shadow:0 6px 16px color-mix(in srgb,var(--story),transparent 88%)}.story-chapter.is-complete{border-color:#9ed1bd;background:#f2fbf7}.story-chapter header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px}.story-chapter header span{padding:4px 6px;border-radius:7px;color:#fff;background:var(--story);font-size: calc(12.5px * var(--fs, 1));font-weight:950}.story-chapter header b{overflow:hidden;font-size: calc(13.5px * var(--fs, 1));text-overflow:ellipsis;white-space:nowrap}.story-chapter header small{color:#71827a;font-size: calc(12.5px * var(--fs, 1));font-weight:900}.story-chapter>p{min-height:34px;margin:7px 0 9px;color:#718078;font-size: calc(13px * var(--fs, 1));line-height:1.55}.story-episode-row{display:grid;gap:6px}.story-episode-row button{min-height:47px;display:grid;grid-template-columns:27px minmax(0,1fr);align-items:center;gap:7px;padding:6px 8px;border:1px solid #dce6e1;border-radius:10px;color:#425c52;background:#f8fbf9;cursor:pointer;text-align:left}.story-episode-row button>span{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;color:#fff;background:#9aaba3;font-size: calc(13px * var(--fs, 1));font-weight:950}.story-episode-row button>b{overflow:hidden;font-size: calc(13px * var(--fs, 1));line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.story-episode-row button.is-unlocked{border-color:color-mix(in srgb,var(--story),#fff 46%);color:var(--story-dark);background:var(--story-soft)}.story-episode-row button.is-unlocked>span{background:var(--story)}.story-episode-row button.is-complete{border-color:#a5d3c1;color:#2f6f59;background:#eaf8f1}.story-episode-row button.is-complete>span{background:#459271}.story-episode-row button:disabled{opacity:.58;cursor:not-allowed}.story-episode-row button:focus-visible,.continue-story:focus-visible{outline-color:color-mix(in srgb,var(--story),transparent 45%)}

.lesson-card .lesson-story-kicker{min-height:18px;margin-top:10px;color:#8a6a27;font-size: calc(13px * var(--fs, 1));font-weight:950}.lesson-card .lesson-concept{margin-top:3px}.lesson-card h3{line-height:1.38}.lesson-card .lesson-story-hook{color:#536d63;font-size: calc(13.5px * var(--fs, 1))}.lesson-card .lesson-task-summary{margin:8px 0 15px;padding:8px 9px;border-radius:9px;color:#667a71;background:#f3f7f5;font-size: calc(13px * var(--fs, 1))}.lesson-card{min-height:330px}

.story-briefing{--brief:#4b88ba;margin:0 0 16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--brief),#fff 55%);border-radius:17px;background:linear-gradient(145deg,#f3f8fc,#fff)}.story-briefing header{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;color:#fff;background:linear-gradient(125deg,#315f8d,#4b88ba)}.story-briefing header div{min-width:0;display:flex;flex-direction:column}.story-briefing header span{font-size: calc(12.5px * var(--fs, 1));font-weight:900;letter-spacing:.06em}.story-briefing header b{margin-top:3px;overflow:hidden;font-size: calc(14px * var(--fs, 1));text-overflow:ellipsis;white-space:nowrap}.story-briefing header button{min-height:36px;flex:none;padding:0 9px;border:1px solid rgba(255,255,255,.45);border-radius:9px;color:#fff;background:rgba(255,255,255,.12);cursor:pointer;font-size: calc(12.5px * var(--fs, 1));font-weight:900}.story-briefing-body{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:12px}.story-scene-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#fff;background:#d99145;box-shadow:0 4px 0 #ad6f31;font:950 14px/1 ui-monospace,monospace}.story-dialogue{min-width:0}.story-dialogue>span{display:block;color:#49695e;font-size: calc(12.5px * var(--fs, 1));font-weight:900}.story-dialogue i{font-style:normal;font-weight:700}.story-dialogue p{margin:5px 0 7px;color:#304b42;font-size: calc(13.5px * var(--fs, 1));font-weight:800;line-height:1.6}.story-dialogue strong{display:block;padding:7px 8px;border-radius:9px;color:#315f8d;background:#e8f2fa;font-size: calc(13px * var(--fs, 1));line-height:1.5}.story-dialogue small{display:block;margin-top:6px;color:#71827a;font-size: calc(12.5px * var(--fs, 1));line-height:1.55}.story-briefing.is-collapsed{margin-bottom:11px}.story-success-text{margin-top:6px!important;padding-top:6px;border-top:1px dashed #acd1c2;color:#27614d!important;font-weight:850;line-height:1.55!important}.board-legend span{display:inline-flex;align-items:center;gap:2px}.board-legend b{font-weight:800}.board-legend span[hidden]{display:none}.board-item,.board-goal{position:relative;z-index:1}.board-cell.collected{color:inherit}.board-cell.collected .board-item{opacity:0}.collect-order{z-index:3}.board-cell .robot{z-index:4}

@media(max-width:900px){.story-campaign{grid-template-columns:1fr}.story-briefing{grid-column:1/-1;margin-bottom:0}.story-chapter-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.story-campaign{margin:-17px 0 24px;padding:15px;border-radius:22px}.story-campaign:before{font-size: calc(38px * var(--fs, 1))}.story-campaign-copy h2{font-size: calc(21px * var(--fs, 1))}.story-campaign-copy>p{font-size: calc(14px * var(--fs, 1))}.story-route-wrap{margin:0 -3px;padding:12px}.story-chapter-track{display:flex;overflow-x:auto;margin:0 -12px;padding:2px 12px 10px;scroll-snap-type:x mandatory}.story-chapter{min-width:min(280px,82vw);scroll-snap-align:start}.story-chapter>p{min-height:0}.lesson-card{min-height:330px}.story-briefing{margin-bottom:14px}.story-briefing header{min-height:58px}.story-briefing header button{min-height:44px}.story-briefing-body{grid-template-columns:38px minmax(0,1fr);padding:11px}.story-scene-mark{width:36px;height:36px}.story-dialogue p{font-size: calc(13.5px * var(--fs, 1))}.story-dialogue strong{font-size: calc(13.5px * var(--fs, 1))}.story-dialogue small{font-size: calc(13px * var(--fs, 1))}.board-legend{flex-wrap:wrap;font-size: calc(12.5px * var(--fs, 1))}}

/* Two independent curricula: the original story path and an original garden-defense path. */
.course-switcher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:15px 0}
.course-option{position:relative;min-width:0;min-height:106px;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid #dce7e2;border-radius:22px;color:#324a41;background:linear-gradient(145deg,#fff,#f7faf8);box-shadow:0 7px 18px rgba(44,75,63,.055);text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.course-option:hover{transform:translateY(-2px);border-color:#91c5b1;box-shadow:0 12px 25px rgba(44,75,63,.1)}
.course-option[aria-current="page"]{border-color:#438f74;box-shadow:0 0 0 3px rgba(67,143,116,.13),0 12px 25px rgba(44,75,63,.1)}
.course-option-icon{width:56px;height:56px;display:grid;place-items:center;flex:none;border-radius:17px;color:#fff;background:linear-gradient(145deg,#588fcb,#376b9f);box-shadow:0 5px 0 #2f5a85;font-size: calc(15px * var(--fs, 1));font-weight:950}
svg.course-option-icon{padding:8px}
.course-option>span:nth-child(2){min-width:0;display:flex;flex-direction:column}.course-option small{color:#698078;font-size: calc(13px * var(--fs, 1));font-weight:950;letter-spacing:.05em}.course-option b{margin-top:4px;font-size: calc(17px * var(--fs, 1));line-height:1.3}.course-option em{margin-top:4px;overflow:hidden;color:#718079;font-size: calc(13.5px * var(--fs, 1));font-style:normal;text-overflow:ellipsis;white-space:nowrap}.course-option strong{min-height:34px;display:inline-flex;align-items:center;padding:0 11px;border-radius:10px;color:#315f50;background:#e8f4ef;font-size: calc(13px * var(--fs, 1));white-space:nowrap}.course-option-plant{border-color:#cfe3ac;background:radial-gradient(circle at 95% 0,rgba(255,215,83,.28),transparent 35%),linear-gradient(145deg,#fbfff2,#f1f8dc)}.course-option-plant .course-option-icon{color:#fff;background:linear-gradient(145deg,#87cf52,#4b9a43);box-shadow:0 5px 0 #377b37}.course-option-plant strong{color:#4e702a;background:#e7f3c9}.course-option-plant[aria-current="page"]{border-color:#6ca642;box-shadow:0 0 0 3px rgba(108,166,66,.16),0 12px 25px rgba(64,100,42,.12)}
.course-theme-note{margin:-3px 2px 16px;color:#6f7d61;font-size: calc(13px * var(--fs, 1));text-align:right}.course-theme-note[hidden],.plant-course-poster[hidden]{display:none}
.plant-course-poster{position:relative;z-index:1;width:min(47%,520px);height:auto;aspect-ratio:16/9;object-fit:cover;border:7px solid rgba(255,255,255,.92);border-radius:25px;box-shadow:0 18px 38px rgba(48,92,43,.2);transform:rotate(1deg)}

body.plant-course{--green:#5a9d42;--green-dark:#397330;--mint:#e7f4cf;--yellow:#f5cc4d;--line:#d9e4ca;--shadow:0 14px 38px rgba(58,88,42,.1);background:radial-gradient(circle at 7% 0,rgba(245,204,77,.2),transparent 25%),linear-gradient(180deg,#f6fae9,#f1f7e5 48%,#f8f1da)}
body.plant-course .code-topbar{border-bottom-color:rgba(71,116,47,.17);background:rgba(252,255,246,.92)}
body.plant-course .code-brand .brand-mark{padding:7px;background:linear-gradient(145deg,#8bcf55,#4b9741);box-shadow:0 5px 0 #347433;transform:rotate(-3deg)}
body.plant-course .code-brand .brand-mark svg{width:100%;height:100%}
body.plant-course .code-hero{min-height:306px;border-color:#c9dd9c;background:radial-gradient(circle at 88% 5%,rgba(255,218,83,.34),transparent 29%),linear-gradient(125deg,#e8f4c7,#fff8d7 58%,#d9efbd)}
body.plant-course .code-hero:after{content:"0101";right:44%;bottom:-28px;color:rgba(66,122,53,.07);font-size: calc(105px * var(--fs, 1))}
body.plant-course .hero-kicker{color:#4e7d27}
body.plant-course .code-hero p{color:#5c7351}
body.plant-course .summary-progress em{background:linear-gradient(90deg,#68ad49,#e0b93c)}
body.plant-course .grade-grid button[aria-pressed="true"]{border-color:#5e9d42;background:linear-gradient(145deg,#75b850,#4c8739);box-shadow:0 8px 20px rgba(72,126,49,.22)}
body.plant-course .grade-guide{background:radial-gradient(circle at 88% 25%,rgba(249,215,89,.24),transparent 32%),linear-gradient(120deg,#3f783a,#679747 58%,#8c793f)}
body.plant-course .grade-guide:after{content:"GROW"}
body.plant-course .grade-comic{border-color:#d4e3b0;background:radial-gradient(circle at 96% 4%,rgba(247,203,73,.32),transparent 25%),linear-gradient(145deg,#fff 0,#fbfdec 56%,#eef6d5 100%)}
body.plant-course .comic-kicker{color:#466d2d;background:#e5f1c8}
body.plant-course .story-campaign{--story:#69a649;--story-dark:#3d7434;--story-soft:#eff7d9}
body.plant-course .story-campaign:before{content:"{ GARDEN }"}
body.plant-course .lesson-card{border-color:#dae5c8;background:radial-gradient(circle at 98% 0,rgba(244,204,73,.1),transparent 26%),#fff}
body.plant-course .lesson-card.is-complete{border-color:#9dcd78;background:linear-gradient(145deg,#fff,#f2f9df)}
body.plant-course .lesson-card .lesson-icon{color:#397532;background:#e6f3ce}
body.plant-course .lesson-card .lesson-icon svg{width:36px;height:36px}
body.plant-course .lesson-card button,body.plant-course .lesson-load-more,body.plant-course .lesson-empty button{background:linear-gradient(145deg,#70ad4d,#4a8639)}
body.plant-course .lesson-card.is-complete button{color:#416f2e;background:#e3f2cf}
body.plant-course .mission-board-wrap{border:1px solid #c9dfa9;background:linear-gradient(145deg,#edf6d7,#dfeec5)}
body.plant-course .board-cell{border-color:#b8d68c;background:#e3f2bd}
body.plant-course .board-cell:nth-child(even){background:#d9edac}
body.plant-course .board-cell.wall{border-color:#47763e;background:repeating-linear-gradient(135deg,#5f9947 0 7px,#4d853d 7px 14px)}
body.plant-course .board-cell.goal{background:#fff1a8}
body.plant-course .board-cell .robot{color:transparent;background:linear-gradient(145deg,#8bd15c,#4c9944);box-shadow:0 3px 0 #367a36}
body.plant-course .board-cell .robot svg{width:82%;height:82%;color:initial}
body.plant-course .board-item svg,body.plant-course .board-goal svg,.plant-board-icon{width:70%;height:70%}
body.plant-course .board-cell.goal .board-goal{width:72%;height:72%;display:grid;place-items:center}
body.plant-course .board-cell.goal .board-item{position:absolute;z-index:3;left:2px;top:2px;width:34%;height:34%;display:grid;place-items:center}
body.plant-course .board-cell.goal .board-item svg{width:100%;height:100%}
body.plant-course .board-legend .course-svg-icon{width:18px;height:18px;display:block}
body.plant-course .lesson-filter-scroll .course-svg-icon{width:21px;height:21px;display:block}
body.plant-course .board-status{color:#42643a;background:#e8f3d7}
body.plant-course .run-button{background:linear-gradient(145deg,#f0b940,#da8b2d);box-shadow:0 5px 0 #b96f22}
body.plant-course .blocklyToolboxDiv{background:#edf4dc!important;border-right-color:#d7e4c4}
body.plant-course .blocklySvg{background:#fbfcf5!important}
body.plant-course .story-briefing{--brief:#69a649;border-color:#c3dda5;background:linear-gradient(145deg,#f4f9e8,#fff)}
body.plant-course .story-briefing header{background:linear-gradient(125deg,#3d7434,#73ab4e)}

@media(max-width:900px){.course-option{grid-template-columns:52px minmax(0,1fr)}.course-option>strong{display:none}.plant-course-poster{width:46%}}
@media(max-width:620px){.course-switcher{grid-template-columns:1fr;gap:9px}.course-option{min-height:92px;grid-template-columns:50px minmax(0,1fr) auto;padding:13px}.course-option-icon{width:48px;height:48px;border-radius:14px}.course-option>strong{display:inline-flex}.course-option b{font-size: calc(15px * var(--fs, 1))}.course-option em{font-size: calc(13px * var(--fs, 1))}.plant-course-poster{position:absolute;right:18px;bottom:20px;width:min(67%,270px);border-width:5px;border-radius:18px}body.plant-course .code-hero{min-height:410px;padding-bottom:190px}body.plant-course .code-hero:after{display:none}.course-theme-note{text-align:left}.plant-course .story-chapter{min-width:min(270px,80vw)}}
@media(max-width:360px){.course-option{grid-template-columns:46px minmax(0,1fr)}.course-option>strong{display:none}.course-option-icon{width:44px;height:44px}.plant-course-poster{width:calc(100% - 36px)}body.plant-course .code-hero{min-height:430px}}
.run-button{min-height:44px}
body.plant-course .study-tools{display:none}

/* V8: PhET-style immersive tablet lab, fullscreen controls and touch-friendly Blockly inputs. */
.lab-head>.lab-view-actions{justify-self:end;display:flex;flex-direction:row;align-items:center;gap:8px;text-align:left}.lab-fullscreen-button{min-width:104px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border:1px solid #bfd4cb;border-radius:12px;color:#2f705f;background:#edf7f2;cursor:pointer;font-size: calc(13.5px * var(--fs, 1));font-weight:950}.lab-fullscreen-button>span{margin:0;color:inherit;font-size: calc(18px * var(--fs, 1));line-height:1}.lab-fullscreen-button>b{margin:0;font-size: calc(13.5px * var(--fs, 1))}.lab-fullscreen-button[aria-pressed="true"]{color:#fff;border-color:#315f78;background:#315f78}.editor-toolbar-copy{min-width:0}.editor-toolbar-actions{flex:none;display:flex!important;flex-direction:row!important;align-items:center;gap:6px}.editor-toolbar-actions button{min-height:40px;padding:7px 10px}.parameter-tips{position:absolute;z-index:38;top:65px;right:10px;width:min(520px,calc(100% - 20px));padding:15px;border:1px solid #aecfc2;border-radius:17px;color:#314f44;background:rgba(250,255,252,.98);box-shadow:0 16px 40px rgba(34,75,61,.22);backdrop-filter:blur(12px)}.parameter-tips[hidden],.parameter-tips li[hidden]{display:none}.parameter-tips header{display:flex;align-items:center;justify-content:space-between;gap:12px}.parameter-tips header>b{font-size: calc(14.5px * var(--fs, 1))}.parameter-tips header button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #cadbd4;border-radius:12px;color:#4d685e;background:#fff;font-size: calc(23px * var(--fs, 1))}.parameter-tips ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0;padding:0;list-style:none}.parameter-tips li{min-width:0;display:flex;flex-direction:column;padding:10px 11px;border-radius:12px;background:#edf6f1}.parameter-tips li b{color:#2f705f;font-size: calc(13.5px * var(--fs, 1))}.parameter-tips li span{margin-top:4px;color:#5f736b;font-size: calc(13.5px * var(--fs, 1));line-height:1.55}.blocklyHtmlInput{min-width:88px!important;min-height:44px!important;padding:8px 10px!important;border:2px solid #3e8d73!important;border-radius:10px!important;background:#fff!important;font-size: calc(20px * var(--fs, 1))!important;line-height:1.2!important;touch-action:manipulation!important}.blocklyWidgetDiv .blocklyMenuItem,.blocklyDropDownDiv .blocklyMenuItem{min-height:44px;display:flex;align-items:center;font-size: calc(14px * var(--fs, 1))}.blocklyWidgetDiv .blocklyMenuItemContent,.blocklyDropDownDiv .blocklyMenuItemContent{padding:10px 12px}.blocklyTooltipDiv{max-width:min(320px,calc(100vw - 24px));padding:10px 12px!important;border-radius:10px!important;font-size: calc(14px * var(--fs, 1))!important;line-height:1.55!important}.code-touch-mode .blocklyTreeRow{height:46px!important;margin:4px 6px!important}.code-touch-mode .blocklyTreeLabel{font-size: calc(14.5px * var(--fs, 1))!important}.code-touch-mode .blocklyToolboxDiv{min-width:116px;overscroll-behavior:contain}.code-touch-mode .blocklyInsertionMarker>.blocklyPath{stroke:#d9543d!important;stroke-width:3px!important}.code-touch-mode .blocklySelected>.blocklyPath{filter:drop-shadow(0 3px 3px rgba(35,72,60,.32))}.code-touch-mode .blocklyScrollbarHandle{opacity:.82}.code-touch-mode button,.code-touch-mode input{touch-action:manipulation}

body.code-lab-fullscreen{overflow:hidden}body.code-lab-fullscreen .code-topbar{display:none!important}body.code-lab-fullscreen .code-shell{position:fixed;z-index:500;inset:0;width:100%;height:100dvh;margin:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden;background:#eef4f1}body.code-lab-fullscreen #codeLab,#codeLab:fullscreen,#codeLab:-webkit-full-screen{width:100%;height:100%;min-height:0;display:grid!important;grid-template-rows:auto minmax(0,1fr);padding:0;overflow:hidden;background:#eef4f1}body.code-lab-fullscreen .lab-head,#codeLab:fullscreen .lab-head,#codeLab:-webkit-full-screen .lab-head{min-height:56px;margin-bottom:8px;border-radius:16px}body.code-lab-fullscreen .lab-layout,#codeLab:fullscreen .lab-layout,#codeLab:-webkit-full-screen .lab-layout{height:100%;min-height:0;grid-template-columns:minmax(240px,31%) minmax(0,1fr);gap:8px}body.code-lab-fullscreen .mission-panel,body.code-lab-fullscreen .prediction-panel,body.code-lab-fullscreen .editor-panel,#codeLab:fullscreen .mission-panel,#codeLab:fullscreen .prediction-panel,#codeLab:fullscreen .editor-panel,#codeLab:-webkit-full-screen .mission-panel,#codeLab:-webkit-full-screen .prediction-panel,#codeLab:-webkit-full-screen .editor-panel{height:100%;min-height:0;border-radius:18px}body.code-lab-fullscreen .mission-panel,#codeLab:fullscreen .mission-panel,#codeLab:-webkit-full-screen .mission-panel{overflow:auto}body.code-lab-fullscreen .prediction-panel,#codeLab:fullscreen .prediction-panel,#codeLab:-webkit-full-screen .prediction-panel{overflow:auto}body.code-lab-fullscreen .blockly-host,#codeLab:fullscreen .blockly-host,#codeLab:-webkit-full-screen .blockly-host{height:auto!important;min-height:0!important;flex:1 1 auto}body.code-lab-fullscreen .run-bar,#codeLab:fullscreen .run-bar,#codeLab:-webkit-full-screen .run-bar{flex:none;padding-bottom:max(10px,env(safe-area-inset-bottom))}

@media (min-width:621px) and (max-width:1366px){body.code-lab-open{overflow:hidden}body.code-lab-open:not(.code-lab-fullscreen) .code-topbar{display:none}body.code-lab-open:not(.code-lab-fullscreen) .code-shell{width:100%;height:100dvh;margin:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden}body.code-lab-open:not(.code-lab-fullscreen) #codeLab{height:100%;min-height:0;display:grid!important;grid-template-rows:auto minmax(0,1fr);padding:0}body.code-lab-open .lab-head{min-height:56px;grid-template-columns:auto minmax(0,1fr) auto;margin-bottom:8px;padding:6px 9px;border-radius:16px}body.code-lab-open .lab-head>div:not(.lab-view-actions){min-width:0}body.code-lab-open .lab-head>div:not(.lab-view-actions) b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.code-lab-open .lab-layout{height:100%;min-height:0;grid-template-columns:minmax(235px,31%) minmax(0,1fr);gap:8px}body.code-lab-open .mission-panel{min-height:0;display:flex;overflow:auto;padding:14px;border-radius:18px}body.code-lab-open .mission-copy h1{margin:4px 0;font-size: calc(18px * var(--fs, 1))}body.code-lab-open .mission-copy p{font-size: calc(13.5px * var(--fs, 1));line-height:1.5}body.code-lab-open .mission-board-wrap{grid-row:auto;grid-column:auto;margin-top:10px;padding:8px;border-radius:14px}body.code-lab-open .board-status{min-height:44px;margin-top:8px;padding:8px 9px}body.code-lab-open .mission-actions{padding-top:8px}body.code-lab-open .mission-actions button{min-height:44px}body.code-lab-open .editor-panel,body.code-lab-open .prediction-panel{height:100%;min-height:0;border-radius:18px}body.code-lab-open .prediction-panel{overflow:auto}body.code-lab-open .editor-toolbar{min-height:54px;padding:7px 10px}body.code-lab-open .blockly-host{height:auto!important;min-height:0!important;flex:1 1 auto}body.code-lab-open .run-bar{position:relative;z-index:10;flex:none;min-height:64px;padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}body.code-lab-open .run-button{min-height:48px}body.code-lab-open .lab-feedback{bottom:74px}.code-lab{padding-bottom:0}}

@media (max-width:760px) and (min-width:621px){.lab-block-count{display:none}.lab-fullscreen-button{min-width:92px}.lab-fullscreen-button>b{font-size: calc(13px * var(--fs, 1))}.editor-toolbar-copy span{display:none}.editor-toolbar-actions button{padding-right:8px;padding-left:8px;font-size: calc(12.5px * var(--fs, 1))}.parameter-tips{top:58px}}
@media (max-height:720px) and (min-width:621px){body.code-lab-open .lab-head{min-height:50px}body.code-lab-open .mission-panel{padding:10px}body.code-lab-open .mission-copy p{max-height:46px;overflow:auto}body.code-lab-open .mission-board-wrap{margin-top:6px}body.code-lab-open .board-status{margin-top:6px}body.code-lab-open .editor-toolbar{min-height:48px}.parameter-tips{top:52px}}
@media(max-width:620px){.lab-view-actions .lab-block-count{display:none}.lab-fullscreen-button{min-width:46px;width:46px;padding:5px}.lab-fullscreen-button>b{display:none}.editor-toolbar{align-items:flex-start;flex-direction:column;gap:7px}.editor-toolbar-actions{width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}.editor-toolbar-actions button{min-width:0;min-height:44px;padding:6px 5px}.parameter-tips{position:fixed;z-index:540;top:auto;right:10px;bottom:max(10px,env(safe-area-inset-bottom));left:10px;width:auto;max-height:calc(100dvh - 20px);overflow:auto}.parameter-tips ol{grid-template-columns:1fr}body.code-lab-fullscreen .lab-layout,#codeLab:fullscreen .lab-layout,#codeLab:-webkit-full-screen .lab-layout{display:grid;grid-template-columns:1fr}body.code-lab-fullscreen .mission-panel,#codeLab:fullscreen .mission-panel,#codeLab:-webkit-full-screen .mission-panel{display:none}body.code-lab-fullscreen .editor-toolbar,#codeLab:fullscreen .editor-toolbar,#codeLab:-webkit-full-screen .editor-toolbar{flex-direction:row;align-items:center}body.code-lab-fullscreen .editor-toolbar-copy span,#codeLab:fullscreen .editor-toolbar-copy span,#codeLab:-webkit-full-screen .editor-toolbar-copy span{display:none}body.code-lab-fullscreen .editor-toolbar-actions,#codeLab:fullscreen .editor-toolbar-actions,#codeLab:-webkit-full-screen .editor-toolbar-actions{width:auto;display:flex!important}body.code-lab-fullscreen .editor-toolbar-actions button,#codeLab:fullscreen .editor-toolbar-actions button,#codeLab:-webkit-full-screen .editor-toolbar-actions button{font-size:0}body.code-lab-fullscreen .editor-toolbar-actions button:before,#codeLab:fullscreen .editor-toolbar-actions button:before,#codeLab:-webkit-full-screen .editor-toolbar-actions button:before{font-size: calc(13.5px * var(--fs, 1))}#centerWorkspace:before{content:"居中"}#parameterHelp:before{content:"帮助"}#toggleCode:before{content:"代码"}body.code-lab-fullscreen .blockly-host,#codeLab:fullscreen .blockly-host,#codeLab:-webkit-full-screen .blockly-host{min-height:0!important}.lab-head>.lab-view-actions{gap:0}}
body.code-lab-fullscreen .lab-layout,#codeLab:fullscreen .lab-layout,#codeLab:-webkit-full-screen .lab-layout{grid-template-columns:minmax(0,1fr)}body.code-lab-fullscreen .mission-panel,#codeLab:fullscreen .mission-panel,#codeLab:-webkit-full-screen .mission-panel{display:none}
body.code-lab-open .study-tools{display:none!important}.lab-head>button{min-height:44px}.lab-head>.lab-view-actions .lab-fullscreen-button>span{margin:0;color:inherit;font-size: calc(18px * var(--fs, 1));line-height:1}.lab-head>.lab-view-actions .lab-fullscreen-button>b{margin:0;font-size: calc(13.5px * var(--fs, 1))}.parameter-tips [hidden]{display:none}.parameter-stepper{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;align-items:center;gap:7px;margin-top:10px;padding:9px;border:1px solid #c7ddd4;border-radius:13px;background:#fff}.parameter-stepper>span{min-width:0;display:flex;flex-direction:column}.parameter-stepper b{font-size: calc(13.5px * var(--fs, 1))}.parameter-stepper em{margin-top:2px;overflow:hidden;color:#657970;font-size: calc(13.5px * var(--fs, 1));font-style:normal;text-overflow:ellipsis;white-space:nowrap}.parameter-stepper button,.parameter-quick-actions button{min-height:44px;border:1px solid #b9d2c8;border-radius:11px;color:#2f705f;background:#edf7f2;font-size: calc(17px * var(--fs, 1));font-weight:950}.parameter-stepper button:disabled{color:#9aaba4;background:#f1f4f2}.parameter-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.parameter-quick-actions button{padding:6px 10px;font-size: calc(13.5px * var(--fs, 1))}.code-touch-mode .editor-toolbar-actions button{min-height:44px}.code-touch-mode .blocklyToolbox{overscroll-behavior:contain}.code-touch-mode .blocklyToolboxCategory{min-height:46px;display:flex;align-items:center;margin:4px 6px!important;border-radius:10px}.code-touch-mode .blocklyToolboxCategoryLabel{font-size: calc(14.5px * var(--fs, 1))!important;line-height:1.35}.code-touch-mode .blocklyToolboxDiv{min-width:0}#codeLab:fullscreen,#codeLab:-webkit-full-screen{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
@media(max-width:620px){.parameter-quick-actions{grid-template-columns:1fr}}
body.code-lab-fullscreen #codeLab:fullscreen{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}body.code-lab-fullscreen #codeLab:-webkit-full-screen{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.code-touch-mode .blocklyDialog{width:min(420px,calc(100vw - 24px));padding:18px;border:0;border-radius:18px}.code-touch-mode .blocklyDialogForm{display:flex;flex-direction:column;gap:10px}.code-touch-mode .blocklyDialogPrompt{font-size: calc(14px * var(--fs, 1));font-weight:900}.code-touch-mode .blocklyDialogInput{width:100%;min-height:44px;padding:8px 10px;border:2px solid #3e8d73;border-radius:10px;font-size: calc(18px * var(--fs, 1))}.code-touch-mode .blocklyDialogButtonRow{display:flex;justify-content:flex-end;gap:8px}.code-touch-mode .blocklyDialogConfirmButton,.code-touch-mode .blocklyDialogCancelButton{min-width:84px;min-height:44px;border:1px solid #b9d2c8;border-radius:11px;font-size: calc(14px * var(--fs, 1));font-weight:900}.code-touch-mode .blocklyDialogConfirmButton{color:#fff;background:#3e8d73}.code-touch-mode .blocklyDialogCancelButton{color:#526a60;background:#fff}
body.code-lab-open .skip-link{display:none}