/* Clay artwork carries the illustrations. Native elements carry text and actions. */
:root{--ink:#193b40;--muted:#526e71;--teal:#35c7cf;--teal-deep:#087c80;--teal-dark:#05565c;--teal-soft:#e8f8f6;--grape-deep:#7148a6;--grape-dark:#503174;--grape-soft:#f2ecfa}
html{background:#e9f8f6}body{background:radial-gradient(ellipse at 50% 0,#fafffc,#d7efed 90%) fixed;font-size:18px;line-height:1.55}.wrap{max-width:1140px;padding:28px 24px 48px}.panel{padding:36px;border:2px solid #d2e7e2;border-radius:28px;box-shadow:0 7px 0 #beddd6}h2{font-size:34px;line-height:1.25}h3{line-height:1.4}.eyebrow{font-size:13px;line-height:1.5;letter-spacing:.08em;font-weight:850;color:#277071;margin:0 0 14px}
.btn{font-size:20px;padding:14px 28px;border-radius:16px}.btn.sun{background:#ffc55b;box-shadow:0 6px 0 #ca922f}.btn[disabled],.chip[disabled]{cursor:default}.btn:focus-visible,.tool:focus-visible,.chip:focus-visible,.lbl:focus-visible{outline:3px solid #21484d;outline-offset:5px}img{object-fit:contain}.tiny,footer{font-size:14px;color:var(--muted);line-height:1.6}footer{margin-top:30px}
.cover{text-align:center;max-width:900px;margin:auto}.cover h1{font-size:clamp(38px,5vw,56px);line-height:1.15;letter-spacing:-.03em}.cover-art{display:flex;align-items:center;justify-content:center;gap:18px;height:280px;margin:28px auto;position:relative;max-width:700px}.cover-art>.robot{width:245px;height:260px;animation:bob 3.6s ease-in-out infinite}.cover-art>.robot:last-child{animation-delay:-1.8s}.cover-fruit{align-self:flex-end;display:flex;position:absolute;z-index:3;bottom:0;gap:5px}.cover .title-lede{font-size:22px;line-height:1.6;max-width:700px;margin:0 auto 30px}.cover .tiny{margin:24px 0 0}@keyframes bob{50%{translate:0 -5px}}
.intro-heading{text-align:center;margin-bottom:36px}.lesson-link{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.lesson-link figure{margin:0}.lesson-pic{width:100%;height:260px;display:block}.lesson-link figcaption{text-align:center;color:var(--muted);font-size:15px;margin-top:14px}.lesson-link h3{font-size:26px}.lesson-link p{font-size:19px;line-height:1.7;margin:18px 0 0}.lesson-point{border-left:4px solid #51b9b4;padding:8px 0 8px 20px}
.robot-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:36px 0 44px}.robot-guide{background:var(--teal-soft);border-radius:22px;padding:26px;text-align:center}.robot-guide.learn{background:var(--grape-soft)}.guide-bot{height:180px;max-width:190px;margin:0 auto 22px}.guide-bot>.robot{width:100%;height:100%}.robot-guide h3{font-size:24px}.robot-guide p{font-size:19px;max-width:27ch;margin:16px auto}.method{border-top:1px solid #adcfc855;padding-top:16px;font-size:18px;font-weight:750}.section-title{font-size:26px;margin:36px 0 24px}.steps{gap:22px;margin:0 0 28px}.step{padding:26px 22px;text-align:left;background:#f1f8f3}.step h3{font-size:22px;margin:18px 0 14px}.step .n{margin:0 5px 0 0;font-size:16px;vertical-align:middle}.step p{font-size:18px;line-height:1.65}.step-art{height:110px;display:flex;align-items:center;justify-content:center;gap:18px}.step-art>.tool-art{width:75px;height:90px}.step-art .example-icon{width:92px;height:90px}.stop-sign{background:#c83a55;color:#fff;padding:10px 15px;border-radius:15px;font-weight:900;box-shadow:0 5px 0 #91283d;letter-spacing:.04em}.mini-crate{width:135px;height:110px;position:relative}.mini-crate>img{width:135px;height:95px;position:absolute;bottom:0;z-index:2}.mini-crate .fruit-icon{position:absolute;left:37px;top:0}.intro-note{font-size:18px;text-align:center;margin:26px 0 30px}
.inter{max-width:780px;margin:0 auto}.inter h2{margin:16px 0 22px}.inter p{font-size:20px;line-height:1.65;max-width:57ch;margin:0 auto 26px}.inter .tag{font-size:13px;padding:7px 16px;letter-spacing:.08em}.job-portrait{width:190px;height:200px;margin:0 auto 26px}.job-portrait>.robot{width:100%;height:100%}.bigrule{padding:24px;max-width:620px;margin:28px auto}.bigrule .lab{font-size:13px;margin-bottom:15px;line-height:1.5}.bigrule .line{font-size:23px;line-height:1.65;margin:10px 0}.inter .job-task{background:#f1f8f3;border-radius:18px;padding:22px;margin:28px auto}.peek{gap:6px;padding:18px;margin:26px auto 12px;max-width:600px}.inter .peek-cap{font-size:16px;margin-bottom:26px}.apple-key,.rush-reminder{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px auto}.apple-key>span,.rush-reminder>span{display:flex;flex-direction:column;align-items:center;border-radius:18px;padding:20px;background:#f2f7f3;text-align:center;font-size:18px}.apple-key img{width:90px;height:95px;margin-bottom:12px}.apple-key b{font-size:21px}.apple-key small{font-size:16px;line-height:1.5;margin-top:10px}.rush-portrait{display:flex;justify-content:center;gap:30px;margin:24px auto}.rush-portrait>.robot{width:195px;height:210px}.rush-reminder img{width:72px;height:82px;margin-bottom:15px}.rush-reminder b{display:block;margin-bottom:8px}
/* Shared modular robots: generated body, generated moving arm, generated model. */
.robot{position:relative;display:inline-block;width:200px;height:220px;flex:none;vertical-align:middle}.robot-body{position:absolute;inset:0;width:100%;height:100%;z-index:2}.robot .arm{position:absolute;left:76%;top:46%;width:45%;height:27%;display:block;z-index:1;transform:scaleX(-1);transform-origin:6% 50%;transition:transform .2s}.robot .arm img{width:100%;height:100%}.robot.arm-left .arm{left:-22%;transform:none;transform-origin:94% 50%}.robot.arm-left .arm.push{transform:rotate(-14deg)}.robot:not(.arm-left) .arm.push{transform:scaleX(-1) rotate(-14deg)}.robot .alarm-light{position:absolute;top:0;left:44%;width:13%;height:13%;border-radius:50%;z-index:5;pointer-events:none}.robot.alarm-on .alarm-light{animation:alarm-glow .35s steps(2) infinite;background:#f2566866;box-shadow:0 0 12px 6px #e83a5a44}@keyframes alarm-glow{50%{background:#f82d52cc;box-shadow:0 0 20px 12px #e83a5a55}}
.pattern-window{position:absolute;z-index:3;left:29%;top:14%;width:43%;height:26%;display:flex;align-items:center;justify-content:center;overflow:hidden}.pattern-window>img{width:100%;height:100%;opacity:.86;transition:opacity .3s}.robot.thinking .pattern-window{animation:learning-glow .6s ease-in-out infinite alternate}.dots.swirl{animation:swirl 1.2s linear infinite}@keyframes learning-glow{to{opacity:.45;filter:brightness(1.3)}}
/* The stage retains the original 800 × 500 coordinate system and all fruit paths. */
#s-factory{max-width:900px;margin:auto}#s-rush{max-width:1050px;margin:auto}.hud{position:sticky;top:0;z-index:20;background:#edf9f5f5;border:1px solid #c6ded8;padding:10px 12px;border-radius:18px;gap:10px;margin-bottom:18px;backdrop-filter:blur(10px)}.pill{font-size:16px;box-shadow:none;background:#d3eae5;padding:7px 12px}.pill.score{background:#ffd787}.icon-btn{background:#d2e9e2;color:#315d5e;box-shadow:none}.strip{padding:18px 20px 18px 80px;min-height:90px;margin-bottom:24px;border:1px solid #dbdfd0;box-shadow:0 5px 0 #c4dcd3}.strip .ico{left:18px;width:45px;height:55px}.strip .ico>img{width:100%;height:100%}.strip .ico .example-icon{width:48px;height:55px}.strip .lab{font-size:12px;line-height:1.5;margin-bottom:7px}.strip .txt{font-size:21px;line-height:1.45}
.scene{box-shadow:0 6px 0 #bbdcd1;border:1px solid #c6ddd5;border-radius:22px;isolation:isolate;background:#e2f4f2}.stage{width:800px;height:500px;position:absolute;left:0;top:0;transform-origin:top left;overflow:hidden}.workshop{position:absolute;inset:0;width:800px;height:500px;object-fit:cover}.conveyor{position:absolute;left:-28px;top:237px;width:525px;height:123px;object-fit:fill;z-index:2}.belt-stripes{position:absolute;left:0;top:254px;width:468px;height:9px;background:repeating-linear-gradient(90deg,#6d828955 0 13px,transparent 13px 32px);border-radius:6px;z-index:3;animation:clay-belt .6s linear infinite}@keyframes clay-belt{to{background-position:32px 0}}
.pile{position:absolute;inset:0;z-index:4;pointer-events:none}#movers{position:absolute;inset:0;z-index:5;pointer-events:none}.fruit{position:absolute;left:0;top:0;width:0;height:0}.fruit-sprite{position:absolute;left:-43px;top:-43px;width:86px;height:86px;object-fit:contain}.piled-fruit{position:absolute;width:0;height:0;transform:scale(.72)}.crate{position:absolute;top:364px;width:198px;height:129px;z-index:6}.crate-a{left:226px}.crate-b{left:406px}.crate>img{width:100%;height:100%;object-fit:fill}.crate>span{position:absolute;left:15%;right:15%;top:41%;font-size:22px;font-weight:850;text-align:center;line-height:1.1;color:#493924;text-shadow:0 1px 0 #fff}.crate>span.long-label{font-size:20px;top:40%}.stage-robot{position:absolute;left:598px;top:202px;width:205px;height:245px;z-index:8}.stage-robot>.robot{width:100%;height:100%}.stage-robot .arm-left .arm{left:-68%;width:87%;top:42%;height:33%;z-index:1}.beam{position:absolute;left:434px;top:199px;width:228px;height:80px;clip-path:polygon(100% 25%,0 0,0 100%);background:#49dbd2;z-index:7;opacity:0}.beam.learn{background:#bb8deb}.beam.on{opacity:.35}#checks{position:absolute;inset:0;z-index:9}.check{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#087c80;color:white;font-size:25px;font-weight:850;box-shadow:0 3px 0 #05565c}.toast{z-index:12;top:3%}.toast span{font-size:18px;line-height:1.5;border-radius:16px;max-width:94%;padding:9px 18px}
.dock{margin-top:26px}.hint{font-size:20px;line-height:1.5;margin-bottom:16px}.stop{font-size:30px;padding:16px;border-radius:18px}.stop-dock{position:sticky;bottom:12px;background:#e4f4efee;padding:10px 12px 15px;border-radius:20px;z-index:15;backdrop-filter:blur(8px)}.stop-dock .hint{font-size:18px;margin:0 0 10px}.tools{gap:22px}.tool{padding:18px 20px;font-size:21px;line-height:1.4;border-radius:18px;gap:14px;min-height:120px}.tool-art{width:55px;height:62px;object-fit:contain;display:inline-block}.example-icon{display:inline-flex;align-items:center;justify-content:center;width:75px;height:62px;flex:none}.example-icon img{width:55%;height:100%;object-fit:contain}.example-icon img+img{margin-left:-10px}.msg{font-size:18px;line-height:1.6;margin-top:20px;min-height:28px}.editor{padding:28px;border:1px solid #d2e7e2;box-shadow:0 5px 0 #beddd6}.rule-line{font-size:23px;padding:24px;line-height:1.8;margin:24px 0}.chips{gap:14px}.chip{font-size:18px;padding:13px 20px}.slot{padding:0 8px}.exbox h3{font-size:25px}.grid50{gap:8px;padding:16px;margin:24px auto;max-width:760px}.grid50 .fruit-icon{width:100%!important;height:auto!important;aspect-ratio:1}.fruit-icon{display:inline-flex;position:relative;flex:none;align-items:center;justify-content:center;vertical-align:middle}.fruit-icon img{width:100%;height:100%;object-fit:contain;display:block}.note{font-size:18px;font-weight:650;line-height:1.65;margin:20px auto 30px;max-width:48ch}.labels{gap:20px;margin:26px 0 32px}.lcard{padding:22px 14px;border-radius:20px}.lcard>.fruit-icon{width:116px!important;height:120px!important}.lcard .row{gap:12px;margin-top:18px}.lbl{font-size:18px;padding:10px 16px}.lcard .why{font-size:15px;line-height:1.5;min-height:24px;margin-top:16px}.brains{flex-wrap:wrap;gap:30px;margin:26px 0}.brains figure{font-size:17px}.pattern-picture{width:150px;height:115px;display:block;margin:0 auto 14px;padding:12px;border-radius:50%;background:#f3eefe}.model-arrow{font-size:35px;color:#79918e}.brains .model-caption{width:100%;font-size:15px;line-height:1.5;margin:0;color:var(--muted)}#done-txt{font-size:24px!important;margin-bottom:20px}#done-sub{font-size:19px;line-height:1.65;margin-bottom:24px!important}
.timebar{margin:0 0 24px;height:12px;background:#c6ddd6;box-shadow:none}.stations{gap:24px}.station{padding:24px;border:1px solid #d2e7e2;box-shadow:0 6px 0 #beddd6}.station .who{gap:24px;min-height:165px}.station-bot{width:155px;height:165px;flex:none}.station-bot>.robot{width:100%;height:100%}.station .name{font-size:25px}.station .kind{font-size:16px;font-weight:500;line-height:1.6;margin-top:8px}.station .alert{font-size:21px;min-height:76px;padding:12px;margin:20px 0}.station .alert .fruit-icon{width:55px!important;height:55px!important}.station .tools{gap:16px}.station .tool{font-size:17px;line-height:1.4;min-height:140px;padding:16px 12px;gap:12px}.station .tool-art{width:44px;height:50px}.station .example-icon{width:61px;height:50px}.minibelt{height:57px;background:#40585e;border-bottom:6px solid #819a9a;margin-top:15px}.minibelt .track{top:4px}.minibelt .fruit-icon{width:42px!important;height:42px!important}.rush-msg{font-size:18px;line-height:1.6;margin-top:26px}
.results-panel>h2{font-size:36px}.stars{margin:26px 0 18px}.rating-star{font-size:54px;line-height:1;color:#dbe5df}.rating-star.on{color:#f4b93d;text-shadow:0 3px 0 #bb8627;animation:starpop .5s both}.rating-star:nth-child(2){animation-delay:.18s}.rating-star:nth-child(3){animation-delay:.36s}.final{font-size:44px}.best{font-size:17px;margin:18px 0}.tally{font-size:19px;font-weight:500;line-height:1.65;max-width:50ch;margin:20px auto}.result-action{margin:28px 0 44px}.results-panel>.section-title{padding-top:30px;border-top:1px solid #d8e8e3}.split{gap:24px;margin:0}.card-k{background:var(--teal-soft)!important;color:var(--ink);padding:26px;display:block}.card-k.pat{background:var(--grape-soft)!important}.result-bot{width:145px;height:165px;margin:0 auto 26px}.result-bot>.robot{width:100%;height:100%}.card-k h3{font-size:23px;margin:0 0 18px}.card-k p{font-size:19px;line-height:1.65}.card-k .eyebrow{font-size:13px;margin-bottom:14px}.vocab{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.vocab article{background:#f1f8f3;padding:24px;border-radius:20px}.vocab article>img,.photo-pair{width:100px;height:100px;object-fit:contain;margin-bottom:24px}.photo-pair{display:flex;align-items:center}.photo-pair img{width:55%;height:90px}.photo-pair img+img{margin-left:-10px}.vocab h3{font-size:22px;margin-bottom:16px}.vocab p{font-size:18px;line-height:1.65;margin:0}.takeaway{background:#fff4dc;border-radius:20px;padding:26px;font-size:21px;line-height:1.6;font-weight:650;margin:36px 0 0}
@media(max-width:900px){.wrap{padding:22px 18px 40px}.panel{padding:28px}.station{padding:20px}.station .who{gap:18px}.station-bot{width:120px;height:135px}.station .name{font-size:22px}.station .tool{font-size:16px}.step{padding:22px 18px}.step h3{font-size:21px}.crate>span{font-size:22px}}
@media(max-width:640px){.wrap{padding:18px 12px 36px}.panel{padding:26px 20px;border-radius:23px}h2,.results-panel>h2{font-size:29px}.cover-art{height:220px;gap:15px;margin:26px auto}.cover-art>.robot{width:46%;height:210px}.cover-fruit{bottom:-8px}.cover-fruit .fruit-icon{width:58px!important;height:58px!important}.cover .title-lede{font-size:20px}.cover h1{font-size:39px}.eyebrow{font-size:12px}.lesson-link{grid-template-columns:1fr;gap:28px}.lesson-pic{height:210px}.lesson-link p{font-size:18px}.lesson-link h3{font-size:24px}.robot-pair{grid-template-columns:1fr;gap:22px}.robot-guide{padding:24px}.guide-bot{height:165px}.steps{grid-template-columns:1fr;gap:22px}.step{padding:24px}.step-art{height:110px}.section-title{font-size:24px}.intro-note{text-align:left;line-height:1.6}.inter p{font-size:19px}.bigrule{padding:20px}.bigrule .line{font-size:21px;line-height:1.65}.job-portrait{width:155px;height:170px}.job-task{padding:20px!important}.peek .fruit-icon{width:45px!important;height:48px!important}.apple-key{gap:14px}.apple-key>span{padding:18px 12px}.apple-key small{font-size:15px}.rush-portrait{gap:16px}.rush-portrait>.robot{width:45%;height:175px}.rush-reminder{gap:14px}.rush-reminder>span{padding:18px 12px;font-size:16px}
 .hud{gap:7px;padding:9px;border-radius:14px}.pill{font-size:13px;padding:7px 9px}.strip{padding:17px 16px 17px 65px;min-height:100px;margin-bottom:22px}.strip .ico{left:13px;width:38px;height:46px}.strip .lab{font-size:11px}.strip .txt{font-size:18px;line-height:1.5}.scene{border-radius:18px}.toast span{font-size:15px;padding:7px 10px;border-width:2px!important;line-height:1.4}.tools{gap:16px}.tool{font-size:18px;padding:18px 12px;min-height:132px}.hint{font-size:19px}.editor{padding:24px 18px}.rule-line{font-size:20px;padding:18px}.chips{gap:16px;flex-direction:column}.chip{border-radius:16px;font-size:18px}.exbox h3{font-size:23px}.grid50{grid-template-columns:repeat(5,1fr);gap:7px;padding:12px}.note{font-size:18px}.labels{grid-template-columns:1fr 1fr;gap:18px}.lcard{padding:18px 8px}.lcard>.fruit-icon{width:92px!important;height:100px!important}.lcard .row{gap:7px}.lbl{padding:10px 12px;font-size:17px}.lcard .why{font-size:14px;min-height:42px}.brains{gap:16px}.pattern-picture{width:110px;height:90px}.brains figure{font-size:15px}.model-arrow{font-size:28px}.stop-dock{bottom:8px}.stop{font-size:27px}.stop-dock .hint{font-size:17px}
 .stations{grid-template-columns:1fr;gap:26px}.station{padding:22px}.station .who{gap:20px;min-height:130px}.station-bot{width:115px;height:130px}.station .kind{font-size:16px}.station .name{font-size:23px}.station .tool{min-height:125px;font-size:17px}.station .alert{font-size:20px}.station .tools{gap:16px}#s-rush .hud .spacer{display:none}#s-rush .hud .b-sound{margin-left:auto}.rush-msg{position:sticky;bottom:8px;border-radius:14px;padding:10px;background:#e4f4efef;z-index:15}.split,.vocab{grid-template-columns:1fr;gap:24px}.card-k{padding:24px}.vocab article{padding:24px}.vocab article>img,.photo-pair{width:90px;height:90px}.takeaway{font-size:19px;padding:24px}
}
@media(prefers-reduced-motion:reduce){.cover-art>.robot{animation:none}}
.cover>.btn{align-self:center}.robot .arm img{object-fit:fill}.robot .alarm-light{top:6%;height:11%;width:12%}.robot.learn .alarm-light{top:2%;left:43%;width:14%;height:12%}.rule-mark{position:absolute;z-index:3;left:41%;top:63%;width:18%;height:17%}.conveyor{top:230px;height:150px}.belt-stripes{top:272px}
.stop-dock{position:static}
.robot.rule .alarm-light{top:11.5%}.robot.learn .alarm-light{top:5.5%}.rule-mark{left:42.5%;top:60%;width:15%;height:14%}
@media(min-width:900px){
 #s-factory{max-width:1140px}#s-factory.active{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
 #s-factory>.hud,#s-factory>.strip{grid-column:1/-1;margin-bottom:0}
 #s-factory>.scene{grid-column:1/-1;width:100%;max-width:900px;margin:auto}
 #s-factory>.dock{grid-column:1/-1;margin-top:0}
 #s-factory:has(#dock-stop:not([hidden]))>.scene,#s-factory:has(#dock-tools:not([hidden]))>.scene{grid-column:1}
 #s-factory>#dock-stop,#s-factory>#dock-tools{grid-column:2;align-self:center}
 #dock-tools .tools{grid-template-columns:1fr;gap:18px}#dock-tools .tool{min-height:100px;flex-direction:row;font-size:19px;text-align:left;padding:16px;gap:16px}
 #dock-tools .hint{font-size:19px}#dock-tools .msg{font-size:17px;margin-top:16px}
}
.rush-jumps{display:none}
@media(max-width:640px){
 .rush-jumps{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex-basis:100%;margin-top:3px}
 .rush-jumps button{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid #b3cfc9;border-radius:11px;padding:9px 6px;background:#fff;color:#244d50;font:inherit;font-size:14px;line-height:1.3;cursor:pointer}
 .rush-jumps button span{font-size:13px}
 .rush-jumps .needs-help{background:#fff1d5;border:2px solid #ce6b27;padding:8px 5px;color:#763411}
 #s-rush .station{scroll-margin-top:195px}
}