/* Additional pages, learning cards and display modes */
.header-actions{display:flex;align-items:center;gap:12px}.accessibility-tools{display:flex;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}.display-toggle{min-height:32px;padding:0 7px;border:0;border-right:1px solid var(--line);color:var(--muted);background:transparent;font-size:.66rem;font-weight:700;cursor:pointer}.display-toggle:last-child{border-right:0}.display-toggle:hover,.display-toggle[aria-pressed="true"]{color:var(--blue);background:var(--blue-soft)}.mission-button{text-decoration:none}
.mission-hero,.html-hero{width:min(1050px,calc(100% - 40px));margin:0 auto 52px;padding:29px 6.5% 54px;border-radius:24px;background:linear-gradient(132deg,#e7f2ff,#f9fbff)}.back-link{color:var(--muted);font-size:.84rem;font-weight:700}.mission-hero-layout,.html-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:55px;align-items:center}.mission-hero-layout{margin-top:37px}.mission-hero h1,.html-hero h1{margin-bottom:16px;font-size:clamp(2.9rem,5.3vw,4.8rem)}.mission-lede,.html-hero p:not(.eyebrow){max-width:550px;color:var(--muted);font-size:1.1rem}.mission-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}.mission-meta span{padding:6px 10px;border-radius:7px;background:#fff;color:#536a82;font-size:.75rem;font-weight:700}.mission-art{position:relative;height:219px;overflow:hidden;border:6px solid #fff;border-radius:19px;background:linear-gradient(#a8defd 0 72%,#8fd47d 72%);box-shadow:var(--shadow)}.mission-art:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:14px;background:repeating-linear-gradient(75deg,#72be68 0 5px,#8bd279 6px 12px)}.art-character{position:absolute;z-index:1;left:41%;bottom:15px;display:grid;width:87px;height:87px;place-items:center;border-radius:45% 50% 43% 50%;background:#d98a51;font-size:59px;transform:rotate(-6deg)}.art-object{position:absolute;right:35px;bottom:46px;color:#f3bb29;font-size:3.4rem}.art-spark{position:absolute;color:#fff5a7;font-size:2.1rem}.art-spark.one{top:29px;left:33px}.art-spark.two{top:65px;right:105px;transform:scale(.55)}
.level-switcher{width:min(1050px,calc(100% - 40px));margin:0 auto 77px;display:flex;justify-content:space-between;gap:30px;align-items:center}.level-switcher h2{margin:0;font-size:1.9rem}.level-buttons{display:flex;gap:9px}.level-button{width:151px;min-height:69px;padding:9px 11px;display:grid;border:1px solid var(--line);border-radius:11px;text-align:left;background:#fff;color:var(--muted);cursor:pointer}.level-button b{color:var(--ink);font-family:Fredoka,sans-serif;font-size:1rem}.level-button span{font-size:.67rem}.level-button.is-active{border:2px solid var(--blue);background:var(--blue-soft)}.build-section{display:grid;grid-template-columns:1fr .9fr;gap:62px;align-items:center}.build-copy>p:not(.eyebrow){color:var(--muted)}.mission-steps{display:grid;gap:10px;margin:27px 0;padding:0;list-style:none;counter-reset:steps}.mission-steps li{position:relative;min-height:43px;padding:10px 10px 8px 52px;border-radius:10px;background:#f4f7fb;color:#42566d;font-size:.86rem;counter-increment:steps}.mission-steps li:before{content:counter(steps);position:absolute;left:11px;top:9px;display:grid;width:25px;height:25px;place-items:center;border-radius:8px;background:#dce9ff;color:var(--blue);font-size:.75rem;font-weight:700}.stoat-tip{padding:15px 18px;border-left:4px solid var(--orange);border-radius:0 11px 11px 0;background:var(--orange-soft);color:#72532c}.stoat-tip span{display:block;color:#aa7525;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.stoat-tip p{margin:2px 0 0;font-size:.84rem}.code-picture{padding:24px;overflow:hidden;border:1px solid #dce7f4;border-radius:18px;background:#f7fbff;box-shadow:var(--shadow)}.code-picture>p{color:#7890a8;font-size:.67rem;font-weight:700;letter-spacing:.09em}.scratch-stack{min-height:195px;padding:12px 0}.scratch-block{width:max-content;max-width:100%;min-height:34px;margin:2px 0;padding:7px 12px;border-radius:7px;color:#fff;box-shadow:inset 0 -2px #0002;font-size:.75rem;font-weight:700}.scratch-block.event{background:#f2b71d}.scratch-block.motion{background:#4d8cea}.scratch-block.control,.scratch-block.control-end{background:#ff9f3e}.scratch-block.variable{background:#ff8c33}.scratch-block.sensing{background:#54bdb1}.scratch-block.indent{margin-left:14px}.scratch-block.indent-deep{margin-left:30px}.scratch-block.indent-more{margin-left:47px}.scratch-block.control-end{border-radius:0 0 8px 8px;color:#fff9}.code-caption{padding-top:14px;border-top:1px solid #dce7f4;color:#627992;font-size:.74rem}
.check-section{display:grid;grid-template-columns:1fr .85fr;gap:52px;align-items:center;padding:45px 6%;border-radius:22px;background:#edf6ff}.quiz-question{color:var(--muted)}.mission-quiz{padding:24px;border-radius:15px;background:#fff;box-shadow:0 12px 25px #24517e1a}.remix-section{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:47px 6%;border-radius:21px;background:#f5f0ff}.remix-section p:last-child{max-width:570px;margin:0;color:var(--muted)}
.html-hero{width:min(1180px,calc(100% - 40px));margin-bottom:105px;padding:78px 8%;grid-template-columns:1.1fr .9fr;background:linear-gradient(135deg,#eeeaff,#faf9ff 64%,#e9f6ff)}.html-hero h1 em{color:var(--purple);font-style:normal}.tag-poster{position:relative;min-height:263px;padding:30px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border-radius:18px;background:#20283d;color:#edf3ff;box-shadow:0 20px 38px #2a24633d;transform:rotate(2deg)}.poster-label{margin-bottom:17px;color:#aab5d6;font-size:.68rem;font-weight:700;letter-spacing:.1em}.tag-poster code{font-size:clamp(.87rem,2.2vw,1.17rem);line-height:1.9}.tag-poster code b{color:#f598c4}.poster-spark{position:absolute;right:27px;bottom:21px;color:#ffd968;font-size:2rem}.element-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.element-grid article{min-height:233px;padding:23px;border:1px solid var(--line);border-radius:16px;background:#fff}.element-grid article>code{display:inline-block;margin-bottom:17px;padding:4px 7px;border-radius:6px;background:var(--purple-soft);color:var(--purple);font-weight:700}.element-grid h3{margin-bottom:8px;font-size:1.35rem}.element-grid p{min-height:72px;color:var(--muted);font-size:.81rem}.element-grid p code,.editor-hint code{padding:1px 3px;border-radius:3px;background:#f1f3f8;color:#a14f79}.element-grid pre{margin:14px 0 0;padding:8px;overflow:auto;border-radius:6px;background:#f5f7fa;color:#4b6480;font-family:Consolas,monospace;font-size:.66rem;white-space:pre-wrap}.tag-anatomy{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;padding:52px 6%;border-radius:22px;background:#fff5dd}.tag-anatomy p{margin:0;color:#685c48}.anatomy-code{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:26px 14px;border-radius:13px;background:#fff;color:#293b50;font-family:Consolas,monospace;font-size:clamp(.8rem,1.8vw,1.05rem);font-weight:700;text-align:center}.anatomy-code .open{color:#9358cf}.anatomy-code .content{color:#45668b}.anatomy-code .close{color:#de6d55}.anatomy-code div{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:21px;padding-top:9px;border-top:1px dashed #d7dfeb;color:#7d8fa2;font-family:"DM Sans",sans-serif;font-size:.63rem}.live-editor{padding:49px 6%;border-radius:22px;background:#eaf4ff}.editor-grid{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid #ccddeb;border-radius:14px;background:#fff}.editor-grid label,.preview-wrap{min-height:290px;display:grid;grid-template-rows:auto 1fr}.editor-grid label{border-right:1px solid #ccddeb}.editor-grid>* >span{padding:8px 13px;border-bottom:1px solid #e2eaf1;color:#647c94;background:#f7faff;font-size:.7rem;font-weight:700}.editor-grid textarea{width:100%;min-height:0;resize:vertical;padding:17px;border:0;outline:0;color:#e8eff7;background:#212b3b;font-family:Consolas,monospace;font-size:.83rem;line-height:1.65}.editor-grid iframe{width:100%;height:100%;border:0;background:#fff}.editor-hint{margin:14px 0 0;color:#55708c;font-size:.82rem}
body[data-display="dark"]{--ink:#f4f8fc;--muted:#bfccd8;--paper:#121c29;--line:#334558;--blue-soft:#1b3455;--orange-soft:#4b341e;--purple-soft:#34275b;background:var(--paper)}body[data-display="dark"] .brand-mark,body[data-display="dark"] .button-small{background:#eaf3ff;color:#122033}body[data-display="dark"] .accessibility-tools,body[data-display="dark"] .mission-meta span,body[data-display="dark"] .level-button,body[data-display="dark"] .choice-card,body[data-display="dark"] .element-grid article,body[data-display="dark"] .editor-grid,body[data-display="dark"] .mission-quiz{background:#1a2838}body[data-display="dark"] .hero,body[data-display="dark"] .mission-hero{background:linear-gradient(135deg,#172d48,#142334)}body[data-display="dark"] .code-picture,body[data-display="dark"] .check-section,body[data-display="dark"] .live-editor{background:#192b3d;border-color:#344c65}body[data-display="dark"] .mission-steps li,body[data-display="dark"] .element-grid pre{background:#22364a;color:#d4e0ea}body[data-display="dark"] .tag-anatomy{background:#3d3020}body[data-display="dark"] .anatomy-code{background:#172534}body[data-display="dark"] .grown-ups{background:#183b36}body[data-display="dark"] .teacher-note{background:#1e443e}body[data-display="dark"] .element-grid p,body[data-display="dark"] .tag-anatomy p,body[data-display="dark"] .editor-hint{color:#c6d3de}
body[data-display="contrast"]{--ink:#fff;--muted:#fff;--paper:#000;--line:#fff;--blue:#00e5ff;--blue-soft:#000;--orange:#ffe500;--orange-soft:#000;--purple:#ff74e4;--purple-soft:#000;background:#000}body[data-display="contrast"] *{box-shadow:none!important}body[data-display="contrast"] .hero,body[data-display="contrast"] .mission-hero,body[data-display="contrast"] .html-hero,body[data-display="contrast"] .mission-lab,body[data-display="contrast"] .check-section,body[data-display="contrast"] .grown-ups,body[data-display="contrast"] .tag-anatomy,body[data-display="contrast"] .live-editor,body[data-display="contrast"] .mission-card,body[data-display="contrast"] .code-picture,body[data-display="contrast"] .quiz-card,body[data-display="contrast"] .mission-quiz,body[data-display="contrast"] .choice-card,body[data-display="contrast"] .element-grid article,body[data-display="contrast"] .editor-grid,body[data-display="contrast"] .tag-poster,body[data-display="contrast"] .level-button,body[data-display="contrast"] .accessibility-tools{color:#fff;background:#000;border:2px solid #fff}body[data-display="contrast"] .hero-text,body[data-display="contrast"] .section-heading>p,body[data-display="contrast"] .mission-card>p:not(.tag),body[data-display="contrast"] .mission-card ul,body[data-display="contrast"] .mission-lede,body[data-display="contrast"] .build-copy>p:not(.eyebrow),body[data-display="contrast"] .quiz-question,body[data-display="contrast"] .remix-section p:last-child,body[data-display="contrast"] .element-grid p,body[data-display="contrast"] .tag-anatomy p,body[data-display="contrast"] .editor-hint,body[data-display="contrast"] .grown-ups-copy>p:not(.eyebrow),body[data-display="contrast"] .teacher-note p{color:#fff}body[data-display="contrast"] .button,body[data-display="contrast"] .mission-button,body[data-display="contrast"] .answer-options button,body[data-display="contrast"] .display-toggle,body[data-display="contrast"] .mission-steps li,body[data-display="contrast"] .teacher-note,body[data-display="contrast"] .anatomy-code{color:#000;background:#fff;border:2px solid #fff}body[data-display="contrast"] .button-primary,body[data-display="contrast"] .display-toggle[aria-pressed="true"]{color:#000;background:#00e5ff;border-color:#00e5ff}body[data-display="contrast"] a:focus,body[data-display="contrast"] button:focus{outline:4px solid #ffe500;outline-offset:3px}
body[data-display="reading"]{font-family:Arial,Verdana,sans-serif;font-size:18px;letter-spacing:.025em;line-height:1.75}body[data-display="reading"] h1,body[data-display="reading"] h2,body[data-display="reading"] h3,body[data-display="reading"] .brand{font-family:Arial,Verdana,sans-serif;letter-spacing:.01em;line-height:1.25}body[data-display="reading"] .tag-poster,body[data-display="reading"] .code-picture{transform:none}
@media(max-width:980px){.accessibility-tools{display:none}.mission-hero-layout,.build-section,.check-section,.tag-anatomy,.html-hero{grid-template-columns:1fr}.mission-art{max-width:440px;width:100%}.level-switcher{align-items:flex-start;flex-direction:column}.element-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.mission-hero,.html-hero{width:calc(100% - 28px);margin-bottom:55px;padding:31px 25px}.mission-hero-layout{margin-top:26px}.level-switcher{width:calc(100% - 28px);margin-bottom:55px}.level-buttons{width:100%}.level-button{flex:1;width:auto}.build-section,.check-section,.remix-section,.tag-anatomy,.live-editor{padding:32px 23px}.element-grid{grid-template-columns:1fr}.element-grid article{min-height:auto}.element-grid p{min-height:auto}.editor-grid{grid-template-columns:1fr}.editor-grid label{border-right:0;border-bottom:1px solid #ccddeb}.editor-grid label,.preview-wrap{min-height:250px}.remix-section{align-items:flex-start;flex-direction:column}.html-hero{gap:34px}.tag-poster{min-height:220px}}
/* Scratch category colours used by advanced mission blocks. */
.scratch-block.sound{background:#cc67bc}.scratch-block.looks{background:#925ed1}
@media(max-width:980px){.accessibility-tools{display:flex}}