:root {
  color-scheme: dark;
  --background: #10111d;
  --surface: #181927;
  --surface-raised: #1e2030;
  --text: #f4f2f7;
  --muted: #9c9bab;
  --mint: #bcff82;
  --purple: #c4a8ff;
  --orange: #ffad7b;
  --yellow: #ffe28c;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 85px; }
body { margin: 0; overflow-x: clip; background: var(--background); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.section-wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.page-glow { position: fixed; z-index: -1; width: 420px; height: 420px; border-radius: 50%; filter: blur(130px); opacity: .14; pointer-events: none; }
.page-glow-one { top: 100px; left: -250px; background: #9e6dff; }
.page-glow-two { top: 630px; right: -270px; background: #6caeff; }
.site-header { position: sticky; top: 0; z-index: 20; width: 100%; height: 84px; margin-inline: auto; padding-inline: max(32px, calc((100vw - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(16,17,29,.92); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.8px; }
.brand-mark { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; background: var(--mint); color: #14151e; font-size: 13px; font-weight: 700; letter-spacing: -2px; }
.brand-period { color: var(--mint); }
.main-nav { display: flex; gap: 24px; margin-left: 0; color: #b6b4c2; font-size: 12px; }
.main-nav a, .text-link, .header-cta { transition: color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible, .text-link:hover { color: var(--mint); }
.header-cta { padding: 11px 16px; border: 1px solid #343443; border-radius: 9px; font-size: 12px; font-weight: 600; }
.header-cta span { padding-left: 7px; color: var(--mint); }
.header-cta:hover { border-color: var(--mint); }
.menu-toggle { display: none; }
.owner-contact-strip { display: flex; width: min(1120px, calc(100% - 64px)); min-height: 39px; align-items: center; justify-content: center; gap: 8px 18px; margin: 8px auto 0; padding: 6px 12px; border: 1px solid #bcff8226; border-radius: 9px; background: #bcff8208; color: #b6b4c2; font-size: 10px; }
.owner-contact-strip > span { color: #d3d1dd; font-weight: 600; }.owner-contact-strip a { color: var(--mint); transition: color .2s, transform .2s; }.owner-contact-strip a:hover { color: #dcffc0; transform: translateY(-1px); }.owner-contact-strip a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 2px; }

.hero { position: relative; display: grid; min-height: 580px; grid-template-columns: 1fr 1fr; align-items: center; padding-top: 18px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 38px; }
.hero-copy > .eyebrow { animation: welcome-in .55s .04s both; }
.hero-copy > h1 { animation: welcome-in .6s .12s both; }
.hero-copy > .hero-description { animation: welcome-in .6s .2s both; }
.hero-copy > .hero-actions { animation: welcome-in .6s .28s both; }
.hero-copy > .social-proof { animation: welcome-in .6s .36s both; }
.hero-art { animation: welcome-art .8s .12s both; }
.eyebrow, .section-kicker { color: #b9b6c8; font-size: 10px; font-weight: 700; letter-spacing: 1.65px; }
.eyebrow { display: flex; align-items: center; gap: 9px; text-transform: uppercase; }
.eyebrow-dot, .meta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px #bcff8270; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { margin: 24px 0 18px; font-size: clamp(47px, 5.2vw, 66px); font-weight: 600; line-height: 1.05; letter-spacing: -4px; }
h1 > span, .section-heading h2 span, .lesson-intro h2 span, .how-heading h2 span { color: var(--mint); }
.hero-description { max-width: 430px; margin-bottom: 25px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 22px; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 13px; padding: 0 18px; border-radius: 9px; font-size: 12px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--mint); color: #171922; box-shadow: 0 8px 26px #bcff8222; }
.button-primary:hover { box-shadow: 0 10px 32px #bcff8255; }
.button-primary span, .button-dark span { font-size: 16px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: #c4c1ce; font-size: 11px; }
.play-icon { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #454452; border-radius: 50%; color: var(--mint); font-size: 8px; }
.social-proof { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.avatar-stack { display: flex; padding-left: 4px; }
.avatar-stack span { display: grid; width: 26px; height: 26px; margin-left: -5px; place-items: center; border: 2px solid var(--background); border-radius: 50%; background: #c49889; color: #1c1820; font-size: 9px; font-weight: 700; }
.avatar-stack span:nth-child(2) { background: #a7b3e8; }.avatar-stack span:nth-child(3) { background: #a4d5aa; }.avatar-stack span:nth-child(4) { background: #262736; color: #ddd; }
.social-proof p { margin: 0; color: #9e9baa; font-size: 10px; }.social-proof strong { color: #f3f0f7; }

.hero-art { position: relative; height: 430px; }
.art-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid #ffffff0a; border-radius: 50%; transform: translate(-50%, -50%) rotate(-22deg); }
.orbit-one { width: 455px; height: 290px; }.orbit-two { width: 385px; height: 440px; transform: translate(-50%, -50%) rotate(54deg); }
.editor-window { position: absolute; z-index: 2; top: 94px; left: 36px; width: 382px; overflow: hidden; border: 1px solid #ffffff1a; border-radius: 13px; background: #1a1b29; box-shadow: 0 27px 70px #080910b0; }
.editor-topbar { display: flex; height: 40px; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #ffffff0c; color: #9695a7; font-size: 9px; }
.window-dots { display: flex; gap: 4px; }.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff8e88; }.window-dots i:nth-child(2) { background: #ffd375; }.window-dots i:nth-child(3) { background: #98e3ac; }.editor-menu { font-size: 18px; }
.editor-body { display: grid; gap: 13px; padding: 23px 15px 25px; font-family: Consolas, monospace; font-size: 11px; }
.code-line { display: flex; gap: 18px; color: #d7d4e4; }.line-no { color: #626376; }.code-line b { color: #c5a5ff; font-weight: 400; }.indent-one { padding-left: 20px; }.indent-one b:first-child { color: #8bdcff; }.indent-one b:last-child { color: #c5a5ff; }
.cursor-blink { display: inline-block; width: 1px; height: 13px; margin-left: 2px; vertical-align: middle; background: var(--mint); animation: blink .8s step-end infinite; }
.editor-status { display: flex; justify-content: space-between; padding: 9px 13px; background: #212333; color: #9998a9; font-size: 8px; }.editor-status span:first-child { color: var(--mint); }
.float-tag { position: absolute; z-index: 3; padding: 9px 12px; border: 1px solid #ffffff12; border-radius: 9px; background: #222333; box-shadow: 0 8px 25px #0004; font-family: Consolas, monospace; font-size: 11px; }
.tag-html { top: 42px; right: 83px; color: #ffad7b; transform: rotate(7deg); }.tag-css { top: 286px; left: 5px; color: #c6a9ff; transform: rotate(-9deg); }.tag-js { right: 32px; bottom: 42px; color: var(--mint); transform: rotate(5deg); }
.mini-card { position: absolute; z-index: 4; display: flex; align-items: center; border: 1px solid #ffffff12; border-radius: 11px; background: #232434; box-shadow: 0 10px 30px #090a12b0; }
.mini-progress { top: 253px; right: -3px; gap: 10px; padding: 11px 12px; }.mini-card-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #c5a5ff1c; color: var(--purple); }.mini-progress strong, .mini-progress div:nth-child(2) span { display: block; }.mini-progress strong { font-size: 9px; }.mini-progress div:nth-child(2) span { margin-top: 3px; color: #9998a9; font-size: 8px; }.progress-ring { display: grid; width: 38px; height: 38px; margin-left: 7px; place-items: center; border-radius: 50%; background: conic-gradient(var(--mint) 0 38%, #ffffff17 38%); }.progress-ring span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #232434; color: var(--mint); font-size: 8px; }
.mini-streak { top: 53px; left: 49px; gap: 8px; padding: 10px 12px; font-size: 9px; animation-delay: .4s; }.streak-icon { color: var(--yellow); font-size: 17px; }
.cursor { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; filter: drop-shadow(0 3px 4px #0008); font-size: 22px; animation: cursor-arrive 1.2s cubic-bezier(.17,.67,.26,1) both, cursor-float 5s 1.2s ease-in-out infinite; }
.cursor-arrow { transform: rotate(-35deg); line-height: 1; }.cursor-label { margin: -2px 0 0 12px; padding: 4px 7px; border-radius: 5px; color: #171820; font-family: var(--font-body); font-size: 8px; font-weight: 700; }
.cursor-mint { top: 130px; right: 37px; color: var(--mint); }.cursor-mint .cursor-label { background: var(--mint); }
.cursor-lilac { bottom: 60px; left: 31px; color: var(--purple); animation-delay: .25s, 1.45s; }.cursor-lilac .cursor-label { background: var(--purple); }
.cursor-orange { right: 48px; bottom: 86px; color: var(--orange); animation-delay: .5s, 1.7s; }.cursor-orange .cursor-label { background: var(--orange); }
.hero-spark { position: absolute; color: var(--mint); font-size: 17px; }.spark-one { top: 45px; left: 145px; }.spark-two { right: 30px; top: 177px; color: var(--purple); font-size: 11px; }
.hero-bottom { position: absolute; right: 0; bottom: 22px; left: 0; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid #ffffff10; color: #6e6d7d; font-size: 8px; font-weight: 700; letter-spacing: 1.5px; }
.tech-list { display: flex; align-items: center; gap: 18px; color: #9593a2; font-size: 8px; letter-spacing: 1.2px; }.tech-list i { width: 3px; height: 3px; border-radius: 50%; background: #565565; }
.assemble-item { animation: assemble .9s cubic-bezier(.2,.8,.2,1) both; }.mini-progress.assemble-item { animation-delay: .35s; }.mini-streak.assemble-item { animation-delay: .55s; }

.courses-section { padding-top: 102px; padding-bottom: 115px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 31px; }
.section-heading h2, .lesson-intro h2, .how-heading h2 { margin: 12px 0 0; font-size: 36px; font-weight: 600; letter-spacing: -1.7px; }
.section-heading > p { max-width: 320px; margin: 0 0 3px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.starter-route { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px 24px; margin: 0 0 22px; padding: 20px; border: 1px solid #bcff8221; border-radius: 14px; background: linear-gradient(120deg, #bcff8209, #c4a8ff0b); }
.starter-route-heading h3 { margin: 8px 0 6px; font-size: 19px; }.starter-route-heading h3 span { color: var(--mint); }.starter-route-heading p, .starter-route-result > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.starter-route-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; align-content: center; }
.starter-route-form label { color: #bdbac8; font-size: 9px; }.starter-route-form select { min-width: 0; min-height: 35px; padding: 0 9px; border: 1px solid #ffffff19; border-radius: 7px; background: #11121d; color: var(--text); font: inherit; font-size: 9px; }
.starter-route-form .button { grid-column: 1 / -1; min-height: 36px; margin-top: 3px; font-size: 9px; }
.starter-route-result { display: grid; grid-column: 1 / -1; gap: 7px; padding-top: 12px; border-top: 1px solid #ffffff12; }.starter-route-result h4 { margin: 0; font-size: 13px; }.starter-route-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; padding-left: 20px; }
.starter-route-course { width: 100%; padding: 7px 8px; border: 1px solid #ffffff10; border-radius: 7px; background: #ffffff05; color: #d3d1dd; cursor: pointer; text-align: left; font: inherit; font-size: 9px; line-height: 1.55; }.starter-route-course:hover, .starter-route-course:focus-visible { border-color: #bcff8266; color: var(--mint); }
.course-card { position: relative; min-height: 211px; padding: 20px 17px 17px; overflow: hidden; border: 1px solid #ffffff12; border-radius: 13px; background: var(--surface); transition: transform .22s, border-color .22s, background .22s; }
.course-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--course-color) 45%, transparent); background: #1c1e2c; }
.course-top { display: flex; justify-content: space-between; align-items: flex-start; }.course-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--course-color) 13%, transparent); color: var(--course-color); font-family: var(--font-display); font-size: 16px; font-weight: 700; }.course-arrow { color: #777688; font-size: 17px; transition: transform .2s, color .2s; }.course-card:hover .course-arrow { transform: translate(2px,-2px); color: var(--course-color); }.course-card h3 { margin: 20px 0 7px; font-size: 16px; letter-spacing: -.4px; }.course-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }.course-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; color: #898798; font-size: 9px; }.course-level { display: flex; align-items: center; gap: 5px; }.course-level i { width: 5px; height: 5px; border-radius: 50%; background: var(--course-color); }.course-lessons { color: #b2b0bf; }

.lesson-section { display: grid; grid-template-columns: .75fr 1.5fr; gap: 46px; align-items: start; padding: 60px 0 120px; border-top: 1px solid #ffffff10; }
.lesson-intro { padding-top: 23px; }.lesson-intro h2 { font-size: 34px; line-height: 1.16; }.lesson-intro > p { max-width: 330px; margin: 16px 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.lesson-intro > p.learning-note { margin-top: 12px; padding-left: 11px; border-left: 2px solid #c4a8ff75; color: #898798; font-size: 10px; line-height: 1.7; }.lesson-meta { display: flex; align-items: center; gap: 8px; color: #aaa8b6; font-size: 10px; }.lesson-meta .meta-dot { width: 6px; height: 6px; }
.lesson-card { overflow: hidden; border: 1px solid #ffffff13; border-radius: 15px; background: var(--surface); }.lesson-tabs { display: flex; gap: 5px; padding: 11px 13px; border-bottom: 1px solid #ffffff0c; }.lesson-tab { padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; color: #9694a3; cursor: pointer; font-size: 10px; transition: background .2s, color .2s; }.lesson-tab:hover { color: var(--text); }.lesson-tab.active { background: #bcff821a; color: var(--mint); }
.lesson-content { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px 19px 17px; }.lesson-number { color: var(--mint); font-size: 8px; font-weight: 700; letter-spacing: 1.1px; }.lesson-number span { padding: 0 4px; color: #716f7f; }.lesson-explanation h3 { margin: 10px 0 8px; font-size: 17px; letter-spacing: -.4px; }.lesson-explanation > p { min-height: 57px; margin-bottom: 12px; color: #aaa8b6; font-size: 10px; line-height: 1.7; }.lesson-tip { display: flex; gap: 8px; padding: 9px; border-radius: 7px; background: #ffffff08; color: #b9b7c5; font-size: 9px; line-height: 1.55; }.lesson-tip code { color: var(--mint); font-family: Consolas, monospace; }
.lesson-browser { padding: 13px 19px 0; border-bottom: 1px solid #ffffff0c; }.lesson-browser-heading { display: flex; align-items: center; justify-content: space-between; }.lesson-browser-heading > div { display: flex; align-items: center; gap: 9px; }.lesson-browser-heading > div > span { color: #858393; font-size: 7px; font-weight: 700; letter-spacing: .9px; }.lesson-browser-heading strong { color: #f0eef5; font-family: var(--font-display); font-size: 11px; }.progress-label { color: #a9a7b5; font-size: 8px; }.lesson-progress-track { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 5px; background: #ffffff14; }.lesson-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mint); transition: width .25s ease; }.lesson-list { display: flex; gap: 6px; padding: 10px 0 12px; overflow-x: auto; scrollbar-color: #454454 transparent; scrollbar-width: thin; }.lesson-list-item { display: grid; min-width: 133px; grid-template-columns: 19px 1fr; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 8px 9px; border: 1px solid #ffffff12; border-radius: 8px; background: #ffffff04; color: #d3d1dd; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }.lesson-list-item:hover { border-color: #ffffff38; }.lesson-list-item[aria-current="true"] { border-color: #bcff8259; background: #bcff8210; }.lesson-list-number { display: grid; width: 18px; height: 18px; grid-row: 1 / span 2; place-items: center; border-radius: 5px; background: #ffffff0b; color: #a9a6b7; font-size: 8px; }.lesson-list-item.is-complete .lesson-list-number { color: var(--mint); }.lesson-list-title { overflow: hidden; font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.lesson-list-topic { margin-top: 3px; color: #8d8a9b; font-size: 6px; letter-spacing: .5px; }
.stage-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }.stage-tab { display: grid; min-height: 36px; grid-template-columns: 20px 1fr auto; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #ffffff10; border-radius: 7px; background: #ffffff03; color: #b7b4c3; cursor: pointer; text-align: left; transition: border-color .2s, background .2s, color .2s; }.stage-tab > span { color: #858393; font-size: 7px; }.stage-tab strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.stage-tab i { color: #858393; font-size: 7px; font-style: normal; }.stage-tab:hover { border-color: #ffffff35; }.stage-tab[aria-selected="true"] { border-color: #bcff8259; background: #bcff8210; color: var(--mint); }.stage-tab[aria-selected="true"] > span, .stage-tab[aria-selected="true"] i { color: #b9d994; }
.stage-overview { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px 13px; border: 1px solid #ffffff0c; border-radius: 9px; background: #ffffff04; }.stage-overview > div:first-child > span, .stage-project > span { color: #a994ff; font-size: 7px; font-weight: 700; letter-spacing: .8px; }.stage-overview h3 { margin: 4px 0; font-size: 13px; }.stage-overview p { margin: 0; color: #a9a7b5; font-size: 9px; line-height: 1.55; }.stage-project { display: flex; min-width: 160px; max-width: 43%; flex-direction: column; gap: 5px; padding-left: 13px; border-left: 1px solid #ffffff14; }.stage-project > span { color: var(--mint); }.stage-project strong { color: #d4d1de; font-size: 9px; font-weight: 500; line-height: 1.5; }
.code-playground { overflow: hidden; border: 1px solid #ffffff10; border-radius: 9px; background: #12131e; }.playground-top { display: flex; height: 33px; justify-content: space-between; align-items: center; padding: 0 10px; border-bottom: 1px solid #ffffff0c; color: #9694a3; font-size: 8px; }.playground-top > span { display: flex; align-items: center; gap: 6px; }.playground-top i { width: 6px; height: 6px; border-radius: 50%; background: #8e75dd; }.playground-top button { padding: 5px 8px; border: 0; border-radius: 5px; background: #bcff821b; color: var(--mint); cursor: pointer; font-size: 8px; }.playground-top button:hover { background: #bcff8235; }
.code-playground pre { min-height: 70px; margin: 0; padding: 13px 10px; color: #d8d6e2; font-family: Consolas, monospace; font-size: 9px; line-height: 1.8; white-space: pre-wrap; }.code-keyword { color: #c4a8ff; }.code-string { color: #b7e88f; }.code-function { color: #89d9e8; }.code-output { min-height: 43px; padding: 8px 10px; border-top: 1px solid #ffffff0c; }.code-output > span { color: #727181; font-size: 7px; letter-spacing: .8px; }.code-output p { margin: 5px 0 0; color: var(--mint); font-family: Consolas, monospace; font-size: 9px; }
.quiz-area { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; align-items: center; padding: 13px 19px 16px; border-top: 1px solid #ffffff0c; }.quiz-label { color: #a994ff; font-size: 7px; font-weight: 700; letter-spacing: 1px; }.quiz-question > p { margin: 5px 0 0; font-size: 10px; font-weight: 600; }.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.quiz-option { min-height: 30px; padding: 5px 8px; border: 1px solid #ffffff12; border-radius: 6px; background: transparent; color: #bfbdca; cursor: pointer; text-align: left; font-size: 8px; transition: border-color .2s, background .2s; }.quiz-option:hover:not(:disabled) { border-color: #b79bff80; background: #c4a8ff10; }.quiz-option.correct { border-color: #bcff8266; background: #bcff8217; color: var(--mint); }.quiz-option.incorrect { border-color: #ff838366; background: #ff838310; color: #ffaaaa; }.quiz-feedback { grid-column: 2; min-height: 0; margin: -8px 0 0; color: var(--mint); font-size: 9px; }.quiz-feedback:empty { display: none; }
.lesson-hint-button, .lesson-hint-reveal { grid-column: 2; justify-self: start; }.lesson-hint-button { color: var(--purple); font-size: 9px; }.lesson-hint-reveal { margin: 0; color: #c4a8ff; font-size: 9px; line-height: 1.6; }
.lesson-footer { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 19px; border-top: 1px solid #ffffff0c; color: #aaa8b6; font-size: 8px; }.lesson-footer > div { display: flex; gap: 6px; }.lesson-nav-button { min-height: 29px; padding: 0 9px; border: 1px solid #ffffff18; border-radius: 6px; background: transparent; color: #cfccd7; cursor: pointer; font-size: 8px; }.lesson-nav-button:hover:not(:disabled) { border-color: #bcff8266; color: var(--mint); }.lesson-nav-button:disabled { opacity: .38; cursor: not-allowed; }.lesson-nav-button.next-lesson { border-color: #bcff8240; color: var(--mint); }

.how-section { padding: 0 0 112px; }.how-heading { margin-bottom: 28px; }.how-heading h2 { font-size: 34px; }.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.step-card { position: relative; min-height: 187px; padding: 19px; border: 1px solid #ffffff12; border-radius: 12px; background: #151622; }.step-number { position: absolute; top: 20px; right: 20px; color: #656474; font-family: var(--font-display); font-size: 10px; }.step-icon { display: grid; width: 36px; height: 36px; margin-bottom: 20px; place-items: center; border-radius: 10px; font-size: 15px; }.step-icon-purple { background: #c4a8ff19; color: var(--purple); }.step-icon-yellow { background: #ffe28c19; color: var(--yellow); }.step-icon-green { background: #bcff8219; color: var(--mint); }.step-card h3 { margin: 0 0 8px; font-size: 14px; }.step-card p { max-width: 260px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }.step-arrow { position: absolute; right: 19px; bottom: 17px; color: #777587; }
.motion-enabled .reveal-on-scroll { opacity: 1; transform: translateY(0); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.motion-enabled .reveal-on-scroll:not(.is-visible) { opacity: 0; transform: translateY(14px); }
.motion-enabled .course-card.reveal-on-scroll:nth-child(2), .motion-enabled .support-card.reveal-on-scroll:nth-child(2), .motion-enabled .step-card.reveal-on-scroll:nth-child(2) { transition-delay: .08s; }
.motion-enabled .course-card.reveal-on-scroll:nth-child(3), .motion-enabled .step-card.reveal-on-scroll:nth-child(3) { transition-delay: .14s; }
.motion-enabled .course-card.reveal-on-scroll:nth-child(4) { transition-delay: .2s; }
.support-section { padding: 0 0 94px; }.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.support-card { display: flex; min-height: 300px; flex-direction: column; align-items: flex-start; padding: 25px; border: 1px solid #ffffff14; border-radius: 14px; background: var(--surface); }.support-card-featured { border-color: #bcff8240; background: linear-gradient(145deg, #1b201f, var(--surface) 60%); }.support-card-annual { border-color: #c4a8ff55; background: linear-gradient(145deg, #211d30, var(--surface) 60%); }.support-card-annual .support-label { color: var(--purple); }.support-label { color: var(--mint); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }.support-card h3 { margin: 12px 0 8px; font-family: var(--font-display); font-size: 22px; }.support-card > p { max-width: 440px; margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }.support-card .support-price { margin: 0 0 12px; color: var(--text); font-family: var(--font-display); font-size: 29px; font-weight: 700; }.support-price span { color: var(--muted); font-family: var(--font-body); font-size: 12px; font-weight: 400; }.support-card ul { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; color: #cfccd7; font-size: 11px; list-style: none; }.support-card li::before { margin-right: 8px; color: var(--mint); content: "✓"; }.support-card .support-note { margin-top: 6px; color: #c4a8ff; }.support-button { min-height: 40px; margin-top: auto; font-size: 11px; }.button-secondary { border: 1px solid #ffffff24; background: #ffffff08; color: var(--text); }.button-secondary:hover { border-color: var(--mint); color: var(--mint); }.support-disclaimer { max-width: 760px; margin: 15px 0 0; color: #858393; font-size: 10px; line-height: 1.6; }
.support-submissions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.support-submission-card { padding: 22px; border: 1px solid #ffffff14; border-radius: 14px; background: var(--surface); }
.support-submission-card h3 { margin: 9px 0; font-family: var(--font-display); font-size: 18px; }
.support-submission-card > p { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.support-submission-card form { display: grid; gap: 9px; }
.support-submission-card label { color: #d3d1dd; font-size: 10px; font-weight: 600; }
.support-submission-card textarea, .support-submission-card input[type="text"], .support-submission-card input[type="url"] { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #ffffff1c; border-radius: 8px; background: #10111d; color: var(--text); font: inherit; font-size: 11px; }
.support-submission-card textarea { min-height: 100px; resize: vertical; }
.support-submission-card textarea:focus-visible, .support-submission-card input:focus-visible { border-color: var(--mint); }
.support-submission-card form .button { justify-self: start; margin-top: 4px; }
.submission-consent { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 8px; margin-top: 3px; color: var(--muted) !important; font-weight: 400 !important; line-height: 1.6; }
.submission-consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--mint); }
.submission-link { display: inline-flex; margin-top: 12px; text-decoration: none; }
.submission-status { min-height: 18px; margin: 10px 0 0; color: var(--mint); font-size: 10px; line-height: 1.6; }
.final-cta { position: relative; display: flex; min-height: 320px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #d5ff9b2b; border-radius: 18px; background: linear-gradient(135deg,#c7ff8c 0%,#b4ef91 50%,#d1ffa5 100%); color: #171922; text-align: center; }.final-cta .section-kicker { color: #35442d; }.final-cta h2 { z-index: 1; margin: 14px 0 20px; font-size: 34px; line-height: 1.19; letter-spacing: -1.5px; }.final-cta h2 span { color: #596c4d; }.button-dark { z-index: 1; min-height: 42px; background: #181a24; color: #fff; }.button-dark:hover { box-shadow: 0 8px 25px #24301940; }.cta-footnote { z-index: 1; margin-top: 12px; color: #52614a; font-size: 9px; }.cta-orb { position: absolute; top: -80px; right: 60px; color: #ffffff2f; font-size: 210px; transform: rotate(15deg); }
.site-footer { display: flex; min-height: 105px; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; color: #858393; font-size: 10px; }.site-footer .brand { color: var(--text); font-size: 17px; }.site-footer .brand-mark { width: 29px; height: 29px; border-radius: 8px; font-size: 11px; }.site-footer p { margin: 0; }.footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 11px; }.footer-contact a { color: var(--mint); text-decoration: none; }.footer-contact a:hover { text-decoration: underline; }.footer-contact a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes assemble { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes welcome-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes welcome-art { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes cursor-arrive { from { opacity: 0; transform: translate(-24px, 18px) scale(.7); } to { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes cursor-float { 0%,100% { translate: 0 0; } 50% { translate: 5px -7px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.motion-enabled .reveal-on-scroll, .motion-enabled .reveal-on-scroll:not(.is-visible) { opacity: 1 !important; transform: none !important; } }

@media (max-width: 900px) {
  .section-wrap, .owner-contact-strip { width: min(100% - 44px, 700px); }
  .site-header { width: 100%; padding-inline: 22px; }
  .main-nav { gap: 22px; margin-left: 0; }.hero { min-height: 540px; grid-template-columns: 1fr .9fr; }.hero-art { transform: scale(.85); transform-origin: center left; width: 118%; margin-left: -22px; }.editor-window { left: 18px; }.mini-progress { right: -20px; }.course-grid { grid-template-columns: repeat(2, 1fr); }.lesson-section { grid-template-columns: 1fr; gap: 25px; }.lesson-intro { padding-top: 0; }.lesson-intro > p { max-width: 450px; }.lesson-card { width: 100%; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 68px; }.section-wrap, .owner-contact-strip { width: calc(100% - 36px); }.owner-contact-strip { flex-wrap: wrap; gap: 5px 12px; margin-top: 7px; font-size: 9px; }.site-header { width: 100%; height: 68px; padding-inline: 18px; }.brand { font-size: 18px; }.brand-mark { width: 30px; height: 30px; }.header-cta { margin-left: auto; margin-right: 13px; padding: 9px 10px; font-size: 10px; }.header-cta span { padding-left: 3px; }.menu-toggle { display: flex; width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 5px; padding: 6px; border: 1px solid #ffffff22; border-radius: 7px; background: transparent; }.menu-toggle span { display: block; width: 100%; height: 1px; background: #f3f0f8; }.main-nav { position: absolute; top: 58px; right: 18px; left: 18px; display: none; flex-direction: column; gap: 0; padding: 8px; border: 1px solid #ffffff16; border-radius: 10px; background: #191a28; box-shadow: 0 15px 35px #0008; }.main-nav.open { display: flex; }.main-nav a { padding: 12px; }.hero { display: flex; min-height: auto; flex-direction: column; align-items: stretch; padding-top: 57px; }.hero-copy { padding-bottom: 0; }.eyebrow { font-size: 8px; letter-spacing: 1px; }h1 { margin: 20px 0 14px; font-size: clamp(46px, 12vw, 61px); letter-spacing: -3.2px; }.hero-description { max-width: 440px; font-size: 12px; }.hero-actions { gap: 15px; }.button { min-height: 43px; padding: 0 13px; font-size: 10px; }.text-link { gap: 6px; font-size: 9px; }.play-icon { width: 20px; height: 20px; }.social-proof { margin-top: 23px; }.hero-art { width: 100%; height: 330px; margin: 3px 0 0; transform: none; }.editor-window { top: 70px; left: 50%; width: min(360px, calc(100% - 18px)); transform: translateX(-50%); }.assemble-item.editor-window { animation-name: assemble-mobile; }.mini-streak { top: 35px; left: 0; }.mini-progress { top: 220px; right: -2px; transform: scale(.9); transform-origin: right center; }.float-tag { font-size: 9px; }.tag-html { top: 27px; right: 22px; }.tag-css { top: 252px; left: 2px; }.tag-js { right: 20px; bottom: 6px; }.cursor-mint { top: 95px; right: -1px; }.cursor-lilac { bottom: 32px; left: 6px; }.cursor-orange { right: 20px; bottom: 48px; }.orbit-one { width: 360px; max-width: 115%; height: 240px; }.orbit-two { width: 305px; max-width: 95%; height: 360px; }.hero-bottom { position: static; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 3px; }.tech-list { flex-wrap: wrap; gap: 10px; font-size: 7px; }.tech-list i { display: none; }
  .courses-section { padding-top: 77px; padding-bottom: 83px; }.section-heading { display: block; margin-bottom: 22px; }.section-heading h2, .lesson-intro h2, .how-heading h2 { font-size: 30px; }.section-heading > p { max-width: 420px; margin-top: 10px; font-size: 11px; }.course-grid { gap: 9px; }.course-card { min-height: 190px; padding: 15px 12px 12px; }.course-icon { width: 34px; height: 34px; }.course-card h3 { margin-top: 16px; font-size: 14px; }.course-card p { font-size: 9px; }.course-footer { margin-top: 17px; font-size: 8px; }
  .lesson-section { gap: 20px; padding: 43px 0 82px; }.lesson-content { grid-template-columns: 1fr; gap: 13px; padding: 16px 14px 13px; }.lesson-explanation h3 { font-size: 16px; }.lesson-explanation > p { min-height: 0; }.lesson-tabs { gap: 1px; padding: 9px 7px; }.lesson-tab { padding: 8px 10px; font-size: 9px; }.quiz-area { grid-template-columns: 1fr; gap: 9px; padding: 13px 14px 14px; }.quiz-feedback { grid-column: 1; margin: 0; }.quiz-question > p { font-size: 11px; }.quiz-options { gap: 6px; }.quiz-option { font-size: 9px; }
  .how-section { padding-bottom: 77px; }.steps-grid { grid-template-columns: 1fr; gap: 9px; }.step-card { min-height: 145px; padding: 15px; }.step-icon { margin-bottom: 13px; }.step-card p { max-width: 300px; }.support-section { padding-bottom: 72px; }.support-grid { grid-template-columns: 1fr; gap: 10px; }.support-card { min-height: 0; padding: 19px; }.support-card h3 { font-size: 20px; }.support-card > p { font-size: 11px; }.support-card ul { font-size: 10px; }.support-button { width: 100%; justify-content: center; }.final-cta { min-height: 285px; padding: 24px 15px; }.final-cta h2 { font-size: clamp(25px, 7vw, 32px); }.final-cta .section-kicker { font-size: 8px; }.cta-orb { top: -45px; right: -15px; font-size: 145px; }.site-footer { min-height: 100px; flex-wrap: wrap; gap: 10px; padding-block: 20px; }.site-footer p { order: 1; width: 100%; }.site-footer > span { font-size: 9px; }.footer-contact { order: 2; width: 100%; }.site-footer > span:last-child { order: 3; }
}
@keyframes assemble-mobile { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 640px) {
  .lesson-browser { padding-inline: 12px; }
  .lesson-browser-heading > div { gap: 6px; }
  .lesson-browser-heading > div > span { font-size: 6px; }
  .lesson-progress-track { margin-top: 8px; }
  .stage-tabs { gap: 4px; margin-top: 10px; }
  .stage-tab { min-height: 38px; grid-template-columns: 15px 1fr; gap: 3px; padding: 4px 5px; }
  .stage-tab strong { font-size: 7px; }
  .stage-tab i { grid-column: 2; font-size: 6px; }
  .stage-overview { align-items: flex-start; flex-direction: column; gap: 9px; padding: 10px; }
  .stage-overview > div:first-child > span, .stage-project > span { font-size: 6px; }
  .stage-overview h3 { font-size: 12px; }
  .stage-project { min-width: 0; max-width: none; gap: 3px; padding: 8px 0 0; border-top: 1px solid #ffffff14; border-left: 0; }
  .stage-project strong { font-size: 8px; }
  .lesson-list-item { min-width: 125px; }
  .lesson-footer { align-items: flex-start; flex-direction: column; padding: 10px 12px; }
  .lesson-footer > div { width: 100%; justify-content: space-between; }
  .lesson-nav-button { min-height: 34px; padding-inline: 11px; }
}

[hidden] { display: none !important; }
.course-filters { display: flex; align-items: center; gap: 11px; margin: -7px 0 20px; }
.course-search { display: flex; min-height: 40px; flex: 1; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #ffffff14; border-radius: 9px; background: #171824; color: #a9a7b5; }
.course-search > span { font-size: 21px; line-height: 1; }
.course-search input, .profile-card input, .profile-card select { width: 100%; min-width: 0; border: 1px solid #ffffff19; border-radius: 8px; outline: 0; background: #12131e; color: var(--text); font: inherit; }
.course-search input { height: 36px; border: 0; background: transparent; font-size: 11px; }
.course-search input:focus-visible, .profile-card input:focus-visible, .profile-card select:focus-visible, .sandbox-editor-pane textarea:focus-visible { outline: 2px solid #bcff8270; outline-offset: 2px; }
.filter-label { color: #aaa8b6; font-size: 10px; }
.course-filters select, .profile-card select { min-height: 39px; padding: 0 28px 0 10px; border: 1px solid #ffffff19; border-radius: 8px; background-color: #171824; color: #e4e1eb; font: inherit; font-size: 10px; }
#search-summary { min-width: 120px; color: #9997a6; font-size: 9px; text-align: right; }
.empty-search { margin: 20px 0; color: var(--muted); font-size: 12px; }
.profile-section, .community-section, .editor-section, .projects-section, .portfolio-section, .premium-section { padding-top: 85px; padding-bottom: 90px; border-top: 1px solid #ffffff10; }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.community-grid { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); gap: 13px; }
.profile-card { min-width: 0; padding: 19px; border: 1px solid #ffffff13; border-radius: 13px; background: var(--surface); }
.profile-summary-card { display: flex; flex-direction: column; align-items: flex-start; }
.profile-avatar { display: grid; width: 43px; height: 43px; margin-bottom: 14px; place-items: center; border-radius: 14px; background: #bcff821c; color: var(--mint); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.profile-name-label, .profile-card > label, #auth-form > label, #auth-confirm-group > label { margin-bottom: 7px; color: #aaa8b6; font-size: 9px; }
.profile-card input, .profile-card select { min-height: 37px; padding: 0 10px; font-size: 10px; }
.profile-card textarea { width: 100%; min-width: 0; padding: 10px; border: 1px solid #ffffff19; border-radius: 8px; outline: 0; resize: vertical; background: #12131e; color: var(--text); font: inherit; font-size: 10px; line-height: 1.6; }
.profile-card textarea:focus-visible { outline: 2px solid #bcff8270; outline-offset: 2px; }
.xp-summary { display: flex; width: 100%; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 10px; border: 1px solid #bcff8230; border-radius: 8px; background: #bcff8208; font-size: 9px; }
.xp-summary strong { color: var(--mint); font-family: var(--font-display); font-size: 13px; }
.xp-summary span { color: #c8c6d1; }
.daily-mission { width: 100%; margin: 0 0 13px; padding: 10px; border: 1px solid #ffffff10; border-radius: 8px; background: #ffffff04; }
.daily-mission > strong { display: block; margin: 5px 0; font-size: 10px; }
.daily-mission > p { margin: 5px 0; color: #aaa8b6; font-size: 9px; }
.plus-owner-card[hidden], #premium-materials[hidden], #premium-login-link[hidden] { display: none; }
.plus-owner-card h3, .plus-access-card h3 { margin: 8px 0; font-size: 14px; }
.plus-owner-card > p, .plus-access-card > p { color: var(--muted); font-size: 9px; line-height: 1.6; }
.plus-owner-card form { display: grid; width: 100%; gap: 7px; }
.plus-owner-card form label, .plus-owner-card > div > label { color: #aaa8b6; font-size: 9px; }
.plus-owner-card form input, .plus-owner-card select { width: 100%; border: 1px solid #ffffff19; border-radius: 7px; background: #11121d; color: var(--text); }
.plus-owner-card .button { min-height: 36px; font-size: 9px; }
.plus-payment-confirm { display: flex; align-items: flex-start; gap: 8px; margin: 9px 0; color: #dedbe7; font-size: 9px; line-height: 1.5; }
.plus-payment-confirm input { min-width: 14px; min-height: 14px; margin: 0; padding: 0; accent-color: var(--mint); }
.plus-owner-actions { display: flex; flex-wrap: wrap; gap: 7px; }
#plus-owner-target-summary, #plus-owner-status { overflow-wrap: anywhere; }
.plus-access-card > .button { min-height: 35px; margin-top: 6px; font-size: 9px; }
.profile-stats { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.profile-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid #ffffff0d; border-radius: 8px; }
.profile-stats strong { color: var(--mint); font-family: var(--font-display); font-size: 19px; }
.profile-stats span { color: #a9a7b5; font-size: 8px; }
.badges-heading { margin: 3px 0 8px; color: #a09eae; font-size: 7px; font-weight: 700; letter-spacing: 1px; }
.badge-list { display: flex; flex-wrap: wrap; gap: 5px; }
.profile-badge { padding: 6px 8px; border: 1px solid #ffffff10; border-radius: 999px; color: #898798; font-size: 8px; }
.profile-badge.earned { border-color: #bcff8240; background: #bcff8210; color: var(--mint); }
.sync-card, .certificate-card { display: flex; flex-direction: column; align-items: flex-start; }
.sync-icon, .certificate-icon { margin-bottom: 11px; color: var(--purple); font-size: 24px; }
.certificate-icon { color: var(--yellow); }
.profile-card h3 { margin: 0 0 8px; font-size: 16px; }
.profile-card > p { margin: 0 0 13px; color: var(--muted); font-size: 9px; line-height: 1.7; }
#auth-form, #account-password-form { display: grid; width: 100%; gap: 8px; }
#auth-form > label, #account-password-form > label, #auth-confirm-group > label { margin: 0 0 2px; color: #aaa8b6; font-size: 9px; }
#auth-confirm-group { display: grid; gap: 8px; }
.auth-mode-switch { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 5px; margin: 4px 0 11px; padding: 4px; border: 1px solid #ffffff12; border-radius: 8px; background: #11121b; }
.auth-mode-switch button { min-height: 31px; border: 0; border-radius: 5px; background: transparent; color: #aaa8b6; cursor: pointer; font-size: 9px; transition: background .2s, color .2s; }
.auth-mode-switch button[aria-pressed="true"] { background: #bcff821a; color: var(--mint); }
.auth-mode-switch button:focus-visible, .auth-magic-link:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.auth-magic-link { justify-self: center; margin-top: 9px; color: #c4a8ff; font-size: 9px; }.auth-magic-link:disabled { opacity: .5; cursor: wait; }
.auth-reset-password { justify-self: center; margin-top: 7px; color: #c4a8ff; font-size: 9px; }.auth-reset-password:disabled { opacity: .5; cursor: wait; }.auth-email-help { width: 100%; margin-top: 7px; padding: 9px; border: 1px solid #ffffff12; border-radius: 8px; background: #ffffff04; color: #aaa8b6; font-size: 8px; line-height: 1.6; }.auth-email-help summary { color: #c4a8ff; cursor: pointer; font-weight: 600; }.auth-email-help p { margin: 7px 0 0; }
#account-password-form { margin-top: 8px; }
.auth-submit { min-height: 37px; width: 100%; margin-top: 2px; font-size: 9px; }
.auth-submit:disabled { opacity: .48; cursor: not-allowed; }
.sign-out-button { margin-top: 10px; padding: 8px 10px; border: 1px solid #ffffff23; border-radius: 7px; background: transparent; color: #e1dee9; cursor: pointer; font-size: 9px; }
.sync-status, .certificate-status { min-height: 26px; margin: 12px 0 0 !important; color: var(--mint) !important; font-size: 9px !important; }
.profile-card > p.sync-privacy { margin-top: 8px; color: #858393; font-size: 8px; }
.certificate-card select { width: 100%; margin: 1px 0 9px; }
.certificate-card .button { min-height: 37px; width: 100%; font-size: 9px; }
.certificate-card .button:disabled { opacity: .42; cursor: not-allowed; }
.sandbox-card { overflow: hidden; border: 1px solid #ffffff16; border-radius: 14px; background: #171824; }
.sandbox-toolbar { display: flex; min-height: 49px; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #ffffff12; }
.editor-file-tabs, .sandbox-actions { display: flex; align-items: center; gap: 5px; }
.editor-file-tab, .sandbox-button, .sandbox-run { min-height: 31px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #aaa8b6; cursor: pointer; font-size: 9px; }
.editor-file-tab.active { border-color: #ffffff14; background: #ffffff09; color: var(--mint); }
.sandbox-button:hover { border-color: #ffffff22; color: var(--text); }
.sandbox-run { background: var(--mint); color: #171922; font-weight: 700; }
.sandbox-body { display: grid; min-height: 330px; grid-template-columns: 1fr 1fr; }
.sandbox-editor-pane { display: flex; min-height: 330px; flex-direction: column; border-right: 1px solid #ffffff12; }
.sandbox-editor-pane textarea { display: block; width: 100%; min-height: 274px; flex: 1; resize: vertical; padding: 16px; border: 0; outline: 0; background: #11121d; color: #d7d4e4; font: 11px/1.7 Consolas, "Courier New", monospace; tab-size: 2; }
.editor-help { padding: 8px 12px; color: #898798; font-size: 8px; line-height: 1.5; }
.sandbox-preview-pane { display: flex; min-width: 0; flex-direction: column; background: #eceef2; }
.preview-heading { display: flex; min-height: 34px; justify-content: space-between; align-items: center; gap: 8px; padding: 0 10px; background: #1a1b29; color: #aaa8b6; font-size: 7px; letter-spacing: .7px; }
.preview-heading > span:last-child { color: var(--mint); letter-spacing: 0; text-align: right; }
.sandbox-preview-pane iframe { width: 100%; min-height: 295px; flex: 1; border: 0; background: #fff; }
.projects-section { padding-bottom: 100px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.project-showcase-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 0 11px; }.project-showcase-heading h3 { margin: 0; font-size: 15px; }.project-showcase-heading p { max-width: 620px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.project-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-bottom: 20px; }.showcase-card { min-width: 0; overflow: hidden; border: 1px solid #ffffff14; border-radius: 11px; background: var(--surface); }.showcase-card iframe { display: block; width: 100%; height: 170px; border: 0; background: #f5f5f7; }.showcase-card-content { display: grid; gap: 6px; padding: 12px; }.showcase-skills { color: var(--mint); font-size: 8px; font-weight: 700; letter-spacing: .4px; }.showcase-card h4 { margin: 0; font-size: 13px; }.showcase-card p { min-height: 42px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }.showcase-card .text-button { justify-self: start; font-size: 9px; }
.project-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 15px; border: 1px solid #ffffff14; border-radius: 11px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; transition: transform .2s, border-color .2s, background .2s; }
.project-card:hover { transform: translateY(-3px); border-color: #ffffff3a; }
.project-card.active { border-color: #bcff8266; background: #1c1e2b; }
.project-icon { display: grid; width: 32px; height: 32px; margin-bottom: 12px; place-items: center; border-radius: 9px; background: #c4a8ff18; color: var(--purple); font-family: var(--font-display); font-weight: 700; }
.project-level { margin-bottom: 6px; color: var(--mint); font-size: 7px; letter-spacing: .7px; text-transform: uppercase; }
.project-card > strong { margin-bottom: 7px; font-family: var(--font-display); font-size: 13px; }
.project-description { min-height: 42px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.project-card-footer { display: flex; width: 100%; justify-content: space-between; margin-top: 12px; padding-top: 9px; border-top: 1px solid #ffffff0f; color: #aaa8b6; font-size: 8px; }
.project-card-footer > span { color: var(--mint); }
.project-workbench { margin-top: 15px; padding: 17px; border: 1px solid #ffffff13; border-radius: 12px; background: #171824; }
.project-workbench-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.project-workbench-heading h3 { margin: 6px 0; font-size: 18px; }
.project-workbench-heading > div:first-child > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.project-completion { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; color: #9e9baa; font-size: 8px; }
.project-completion strong { color: var(--mint); font-family: var(--font-display); font-size: 19px; }
.project-progress-track { height: 4px; margin: 13px 0; overflow: hidden; border-radius: 5px; background: #ffffff15; }
.project-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mint); transition: width .2s ease; }
.project-task-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.project-task { display: flex; min-height: 41px; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid #ffffff0e; border-radius: 8px; color: #c8c6d1; cursor: pointer; font-size: 9px; line-height: 1.5; }
.project-task:has(input:checked) { border-color: #bcff822e; background: #bcff8209; color: #dff3cb; }
.project-task input { margin: 1px 0 0; accent-color: #bcff82; }
.project-workbench-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 11px; }
.project-feedback { margin: 0; color: #a9a7b5; font-size: 9px; }
.project-workbench-footer .button { min-height: 34px; font-size: 9px; }
.challenge-hint-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px; }
.challenge-hint-row p { margin: 3px 0; color: #c4a8ff; font-size: 9px; line-height: 1.6; }
.challenge-hint-row button:disabled { opacity: .6; cursor: default; }
.portfolio-builder { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; padding: 20px; border: 1px solid #ffffff14; border-radius: 14px; background: var(--surface); }
.portfolio-profile, .portfolio-picker { min-width: 0; }
.portfolio-profile label, .portfolio-picker h3 { display: block; margin: 0 0 9px; color: #d8d5e0; font-size: 12px; }
.portfolio-profile textarea { width: 100%; min-height: 82px; resize: vertical; padding: 10px; border: 1px solid #ffffff1a; border-radius: 8px; background: #11121d; color: var(--text); font: inherit; font-size: 10px; }
.portfolio-profile p, .portfolio-empty { color: var(--muted); font-size: 9px; line-height: 1.6; }
#portfolio-version-list { display: grid; gap: 6px; }
.portfolio-version-option { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #ffffff12; border-radius: 7px; color: #cfccd7; cursor: pointer; font-size: 10px; }
.portfolio-version-option input { accent-color: var(--mint); }
.portfolio-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid #ffffff10; }
.portfolio-actions .button { min-height: 38px; font-size: 10px; }
#portfolio-status { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 9px; }
.portfolio-preview { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.portfolio-preview > h3, .portfolio-preview > p { grid-column: 1 / -1; margin: 0; color: #d8d5e0; font-size: 13px; }
.portfolio-preview > p { color: var(--muted); font-size: 10px; }
.portfolio-project { min-width: 0; padding: 11px; border: 1px solid #ffffff13; border-radius: 9px; background: #11121d; }
.portfolio-project h4 { margin: 0 0 8px; color: #d8d5e0; font-size: 11px; }
.portfolio-project iframe { width: 100%; height: 190px; border: 1px solid #ffffff13; border-radius: 6px; background: white; }
.premium-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.premium-access-panel { min-height: 90px; }
.premium-access-panel > p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.premium-material { display: flex; min-width: 0; flex-direction: column; padding: 19px; border: 1px solid #c4a8ff30; border-radius: 12px; background: linear-gradient(145deg, #211d30, var(--surface) 72%); }
.premium-level { color: #c4a8ff; font-size: 8px; font-weight: 700; letter-spacing: .9px; }
.premium-material h3 { margin: 13px 0 8px; color: var(--text); font-size: 15px; }
.premium-material p, .premium-material li { color: var(--muted); font-size: 10px; line-height: 1.65; }
.premium-material ul { display: grid; gap: 5px; margin: 4px 0 16px; padding-left: 17px; }
.premium-preview { margin: 0 0 14px; padding: 9px; border: 1px solid #ffffff12; border-radius: 7px; color: #c4a8ff; font-size: 9px; }
.premium-preview summary { cursor: pointer; }
.premium-preview p { margin: 8px 0 0; }
.premium-material .text-button { align-self: flex-start; margin-top: auto; text-align: left; }
.premium-disclaimer { margin: 15px 0 0; color: #aaa8b6; font-size: 10px; line-height: 1.7; }
.study-plan { width: 100%; margin-top: 15px; padding-top: 12px; border-top: 1px solid #ffffff10; }
.study-plan > label, .saved-work-toolbar label { color: #aaa8b6; font-size: 9px; }
.study-plan select { margin: 7px 0; }
.plan-progress-track { height: 5px; margin: 3px 0 7px; overflow: hidden; border-radius: 5px; background: #ffffff14; }
.plan-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mint); transition: width .2s ease; }
#weekly-progress-label { margin: 0 0 12px; color: #aaa8b6; font-size: 9px; }
.daily-plan-progress { display: grid; gap: 2px; margin: 6px 0 8px; color: #aaa8b6; font-size: 9px; }
.daily-plan-progress .plan-progress-track { margin: 1px 0 4px; }
.plan-recommendation { margin: 0 0 12px; color: #c4a8ff; font-size: 9px; line-height: 1.6; }
.plan-next-label { display: block; margin-bottom: 5px; color: #dedbe7; font-size: 10px; }
#plan-next-title { margin: 0 0 7px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.text-button { padding: 5px 8px; border: 1px solid #ffffff17; border-radius: 6px; background: #ffffff06; color: var(--mint); cursor: pointer; font-size: 9px; }
.text-button:hover:not(:disabled) { border-color: #bcff8266; background: #bcff8210; }
.text-button:disabled { opacity: .48; cursor: not-allowed; }
.review-list { display: grid; width: 100%; gap: 7px; }
.leaderboard-card form { display: grid; width: 100%; gap: 7px; }
.leaderboard-opt-in { display: flex; align-items: flex-start; gap: 8px; color: #c8c6d1; font-size: 9px; line-height: 1.5; }
.leaderboard-opt-in input { min-width: 14px; min-height: 14px; margin: 0; padding: 0; accent-color: var(--mint); }
.leaderboard-card form .button { min-height: 36px; font-size: 9px; }
.leaderboard-list { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 22px; color: #c8c6d1; font-size: 9px; }
.leaderboard-list li { padding: 7px 8px; border: 1px solid #ffffff10; border-radius: 7px; }
.leaderboard-list li span, .leaderboard-list li strong { display: block; }
.leaderboard-list li strong { margin-top: 4px; color: var(--mint); font-size: 8px; }
.community-section { scroll-margin-top: 90px; }
.community-grid > .profile-card { min-width: 0; }
.community-compose form { display: grid; gap: 8px; }
.community-compose label { color: #aaa8b6; font-size: 9px; }
.community-compose form .button { min-height: 38px; font-size: 9px; }
.community-feed-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.community-feed-heading h3 { margin: 0; }
.community-post-list { display: grid; gap: 9px; margin-top: 12px; }
.community-post { min-width: 0; padding: 11px; border: 1px solid #ffffff12; border-radius: 8px; background: #ffffff04; overflow-wrap: anywhere; }
.community-post h4 { margin: 0 0 5px; font-family: var(--font-display); font-size: 11px; }
.community-post p { margin: 0 0 7px; color: #c8c6d1; font-size: 9px; line-height: 1.65; white-space: pre-wrap; }
.community-post p:last-child { margin-bottom: 0; }
.community-moderation { grid-column: 1 / -1; }
.community-moderation-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.community-moderation-actions .button { min-height: 32px; font-size: 9px; }
.review-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; border: 1px solid #ffffff10; border-radius: 7px; color: #c8c6d1; font-size: 9px; line-height: 1.45; }
.review-item > span { min-width: 0; }
.lesson-tools { display: grid; gap: 9px; padding: 11px 19px; border-top: 1px solid #ffffff0c; }
.exam-toggle, .lesson-feedback-actions { display: flex; align-items: center; gap: 8px; color: #a9a7b5; font-size: 9px; }
.exam-toggle input { accent-color: var(--mint); }
.lesson-feedback-actions > span { margin-right: auto; }
#lesson-feedback-status { min-height: 0; margin: 0; color: var(--mint); font-size: 9px; }
#lesson-feedback-status:empty { display: none; }
.lesson-card.exam-mode-active .lesson-content, .lesson-card.exam-mode-active .stage-overview { display: none; }
.challenge-card { display: grid; gap: 10px; padding: 15px 19px; border-top: 1px solid #ffffff0c; }
.challenge-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.challenge-heading h3 { margin: 5px 0 0; font-size: 15px; }
#challenge-language { padding: 5px 8px; border: 1px solid #bcff8230; border-radius: 20px; color: var(--mint); font-size: 8px; }
#challenge-prompt { margin: 0; color: #b7b4c3; font-size: 10px; line-height: 1.6; }
#challenge-code { width: 100%; min-height: 115px; resize: vertical; padding: 11px; border: 1px solid #ffffff15; border-radius: 8px; outline: 0; background: #11121d; color: #d7d4e4; font: 10px/1.6 Consolas, "Courier New", monospace; }
#challenge-code:focus-visible, .saved-work-toolbar input:focus-visible, .saved-work-toolbar select:focus-visible { outline: 2px solid #bcff8270; outline-offset: 2px; }
.challenge-footer { display: flex; align-items: center; gap: 10px; }
.challenge-footer .button { min-height: 34px; font-size: 9px; }
.challenge-footer .button:disabled { opacity: .5; cursor: wait; }
#challenge-result { min-height: 0; margin: 0; font-size: 9px; line-height: 1.5; }
#challenge-result:empty { display: none; }
#challenge-result.challenge-passed { color: var(--mint); }
#challenge-result.challenge-failed { color: #ffadad; }
.challenge-note { margin: 0; color: #8d8a9b; font-size: 8px; line-height: 1.5; }
#challenge-frame { position: absolute; width: 1px; height: 1px; left: -10000px; border: 0; }
.saved-work-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px; border-bottom: 1px solid #ffffff12; background: #141520; }
.saved-work-toolbar input, .saved-work-toolbar select { min-width: 130px; min-height: 31px; padding: 0 8px; border: 1px solid #ffffff19; border-radius: 6px; background: #11121d; color: #e4e1eb; font: inherit; font-size: 9px; }
.saved-work-toolbar input { flex: 1; }
.saved-work-toolbar select { max-width: 190px; }
.saved-work-toolbar .sandbox-button { border-color: #ffffff18; }
#saved-work-status { flex: 1 1 100%; min-height: 0; color: var(--mint); font-size: 9px; }
#saved-work-status:empty { display: none; }
.glossary-promo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-block: 36px 0; padding: 28px 32px; border: 1px solid #c4a8ff30; border-radius: 16px; background: linear-gradient(120deg, #c4a8ff10, #bcff8208 70%); }
.glossary-promo-icon { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #c4a8ff42; border-radius: 15px; background: #c4a8ff14; color: var(--purple); font-family: var(--font-display); font-size: 23px; font-weight: 700; }
.glossary-promo h2 { margin: 7px 0; font-size: clamp(19px, 2.4vw, 27px); letter-spacing: -.7px; }
.glossary-promo h2 span { color: var(--mint); }
.glossary-promo p { max-width: 590px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.glossary-promo .button { white-space: nowrap; }
.glossary-page { min-height: calc(100vh - 84px); padding-top: 58px; padding-bottom: 100px; }
.glossary-page-intro { max-width: 780px; margin-bottom: 30px; }
.glossary-page-intro h1 { margin: 13px 0; font-size: clamp(38px, 5vw, 58px); letter-spacing: -2.5px; }
.glossary-page-intro h1 span { color: var(--mint); }
.glossary-page-intro > p { max-width: 700px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.glossary-controls { display: grid; grid-template-columns: minmax(0, 1fr) 230px auto; align-items: center; gap: 12px; margin: 28px 0 22px; }
.glossary-controls .course-search { width: 100%; }
.glossary-controls select { min-height: 42px; padding: 0 12px; border: 1px solid #ffffff19; border-radius: 8px; background: #11121d; color: var(--text); font: inherit; font-size: 12px; }
.glossary-count { color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; }
.glossary-large-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.glossary-large-card { min-width: 0; padding: 23px; border: 1px solid #ffffff12; border-radius: 14px; background: linear-gradient(145deg, #1a1b29, #151622); }
.glossary-large-card h2 { margin: 10px 0 12px; color: var(--mint); font-size: 22px; letter-spacing: -.45px; }
.glossary-term-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.glossary-category, .glossary-level { padding: 5px 8px; border: 1px solid #ffffff12; border-radius: 999px; color: #c9c6d3; font-size: 9px; }
.glossary-level { border-color: #c4a8ff24; color: #c4a8ff; }
.glossary-definition { margin: 0 0 18px; color: #d3d0dc; font-size: 13px; line-height: 1.8; }
.glossary-example { margin: 0 0 17px; overflow: hidden; border: 1px solid #ffffff10; border-radius: 9px; background: #10111a; }
.glossary-example figcaption { padding: 8px 11px; border-bottom: 1px solid #ffffff0d; color: #9996a6; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.glossary-example pre { overflow-x: auto; margin: 0; padding: 13px; color: #bcff9b; font-family: Consolas, monospace; font-size: 12px; line-height: 1.7; white-space: pre; }
.glossary-why { margin: 0; padding: 11px 13px; border-left: 2px solid var(--purple); background: #c4a8ff09; color: #bbb8c7; font-size: 11px; line-height: 1.7; }
.glossary-why strong { color: #d1bdff; }
.glossary-no-results { padding: 32px; border: 1px dashed #ffffff25; border-radius: 12px; color: var(--muted); text-align: center; }
.glossary-return { display: inline-flex; margin-top: 28px; color: var(--mint); font-size: 12px; }
.glossary-return:hover { text-decoration: underline; }
html[data-site-page="home"] main > section:not(.hero):not(.glossary-promo):not(.final-cta),
html[data-site-page="courses"] main > section:not(#courses):not(#practice),
html[data-site-page="profile"] main > section:not(#profile),
html[data-site-page="editor"] main > section:not(#editor),
html[data-site-page="projects"] main > section:not(#projects),
html[data-site-page="portfolio"] main > section:not(#portfolio),
html[data-site-page="how"] main > section:not(#how),
html[data-site-page="support"] main > section:not(#support),
html[data-site-page="premium"] main > section:not(#premium) { display: none !important; }
html[data-site-page="home"] .glossary-promo { margin-bottom: 30px; }
.certificate-print { display: none; }
.certificate-frame { position: relative; display: flex; min-height: 174mm; flex-direction: column; align-items: center; justify-content: center; padding: 22mm 20mm; border: 2px solid #747b63; outline: 1px solid #747b63; outline-offset: -7px; color: #23251f; text-align: center; }
.certificate-brand { position: absolute; top: 17mm; color: #536345; font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.certificate-kicker { color: #657253; font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.certificate-frame h1 { margin: 15px 0; color: #333b2d; font-size: 48px; letter-spacing: -2px; }
.certificate-frame h2 { margin: 9px 0; color: #47543d; font-size: 28px; }
.certificate-frame > p:not(.certificate-brand, .certificate-kicker) { max-width: 560px; margin: 6px 0; font-size: 13px; line-height: 1.7; }
.certificate-bottom { position: absolute; right: 20mm; bottom: 20mm; left: 20mm; display: flex; justify-content: space-between; gap: 24px; text-align: left; font-size: 10px; line-height: 1.8; }
.certificate-bottom > span:last-child { text-align: right; }
.certificate-bottom strong { font-weight: 600; }
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr 1fr; }
  .certificate-card { grid-column: auto; }
  .certificate-card > p { max-width: 540px; }
  .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-grid > .support-card:last-child { grid-column: 1 / -1; min-height: 0; }
  .premium-grid { grid-template-columns: 1fr 1fr; }
  .glossary-controls { grid-template-columns: minmax(0, 1fr) 190px; }
  .glossary-count { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 640px) {
  .course-filters { flex-wrap: wrap; gap: 8px; }
  .course-search { flex-basis: calc(100% - 1px); }
  #search-summary { flex: 1; }
  .profile-section, .community-section, .editor-section, .projects-section, .portfolio-section, .premium-section { padding-top: 60px; padding-bottom: 65px; }
  .profile-grid, .project-grid { grid-template-columns: 1fr; }
  .community-grid { grid-template-columns: 1fr; }
  .community-moderation { grid-column: auto; }
  .certificate-card { grid-column: auto; }
  .glossary-promo { grid-template-columns: auto 1fr; gap: 14px; padding: 20px; }
  .glossary-promo-icon { width: 46px; height: 46px; font-size: 18px; }
  .glossary-promo .button { grid-column: 1 / -1; width: 100%; }
  .portfolio-builder { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .portfolio-actions { grid-column: auto; }
  .portfolio-preview { grid-column: auto; grid-template-columns: 1fr; }
  .premium-grid { grid-template-columns: 1fr; }
  .glossary-page { padding-top: 37px; padding-bottom: 70px; }
  .glossary-page-intro h1 { font-size: 39px; }
  .glossary-page-intro > p { font-size: 13px; }
  .glossary-controls, .glossary-large-grid { grid-template-columns: 1fr; }
  .glossary-controls { gap: 9px; }
  .glossary-controls select { width: 100%; }
  .glossary-count { grid-column: auto; }
  .glossary-large-card { padding: 18px; }
  .glossary-large-card h2 { font-size: 20px; }
  .glossary-definition { font-size: 12px; }
  .saved-work-toolbar { align-items: stretch; }
  .saved-work-toolbar input, .saved-work-toolbar select { width: 100%; max-width: none; }
  .lesson-tools { padding-inline: 14px; }
  .lesson-feedback-actions { flex-wrap: wrap; }
  .challenge-card { padding-inline: 14px; }
  .challenge-footer { align-items: flex-start; flex-direction: column; }
  .sandbox-toolbar { align-items: stretch; flex-direction: column; }
  .editor-file-tabs { overflow-x: auto; }
  .sandbox-actions { flex-wrap: wrap; justify-content: flex-end; }
  .sandbox-actions > button { padding-inline: 7px; font-size: 8px; }
  .sandbox-body { grid-template-columns: 1fr; }
  .sandbox-editor-pane { min-height: 260px; border-right: 0; border-bottom: 1px solid #ffffff12; }
  .sandbox-editor-pane textarea { min-height: 220px; }
  .sandbox-preview-pane iframe { min-height: 280px; }
  .project-task-list { grid-template-columns: 1fr; }
  .project-workbench { padding: 12px; }
  .project-workbench-footer { align-items: flex-start; flex-direction: column; }
}
@media print {
  body.printing-portfolio > *:not(main), body.printing-portfolio main > section:not(#portfolio) { display: none !important; }
  body.printing-portfolio, body.printing-portfolio #portfolio { background: white !important; color: #222 !important; }
  body.printing-portfolio #portfolio { display: block !important; width: 100%; padding: 0; border: 0; }
  body.printing-portfolio #portfolio .section-heading, body.printing-portfolio .portfolio-builder { color: #222; background: white; }
  body.printing-portfolio .portfolio-profile, body.printing-portfolio .portfolio-picker, body.printing-portfolio .portfolio-actions { display: none; }
  body.printing-portfolio .portfolio-preview { display: block; }
  body.printing-portfolio .portfolio-preview > h3, body.printing-portfolio .portfolio-preview > p, body.printing-portfolio .portfolio-project h4 { color: #222; }
  body.printing-portfolio .portfolio-project { margin: 12px 0; border-color: #ccc; background: white; break-inside: avoid; }
  body.printing-portfolio .portfolio-project iframe { height: 230px; }
}
@media print {
  @page { size: landscape; margin: 12mm; }
  body.printing-certificate > *:not(#certificate-root) { display: none !important; }
  body.printing-certificate #certificate-root { display: block !important; width: 100%; color: #23251f; }
  body.printing-certificate .certificate-frame { min-height: 174mm; }
}
@media (max-width: 640px) {
  .starter-route { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  .starter-route-form { grid-template-columns: 1fr; }
  .starter-route-form .button { grid-column: 1; }
  .starter-route-list { grid-template-columns: 1fr; }
  .support-submissions { grid-template-columns: 1fr; }
  .support-submission-card { padding: 17px; }
  .project-showcase-heading { display: block; }
  .project-showcase-heading p { margin-top: 6px; }
  .project-showcase-grid { grid-template-columns: 1fr; }
  .showcase-card iframe { height: 190px; }
  .showcase-card p { min-height: 0; }
  .lesson-hint-button, .lesson-hint-reveal { grid-column: 1; }
}