/* datawithmoez learning workspace.
   One colour per meaning: orange = brand and code keywords, yellow = progress and XP,
   blue = data and links, green = passed, rose = failed. Cream is the primary button. */
:root {
  color-scheme: dark;
  --paper: #0b0c0f; --card: #131417; --card-raised: #1b1c20; --field: #0f1013;
  --ink: #fff1d6; --ink-2: #e4dccb; --muted: #b3ada0; --faint: #8b877e;
  --line: #26272c; --line-2: #3d3e44; --line-3: #1f2024;
  --accent: #ff5a1f; --accent-soft: #3a1c10; --yellow: #ffd21f; --yellow-soft: #2e2810;
  --blue: #4a64ee; --blue-soft: #1a2147; --sky: #8ca6ff; --green: #9dd69c; --green-soft: #18291b;
  --rose: #ff7869; --rose-soft: #331b1a;
  --cta: #fff1d6; --cta-ink: #0b0c0f; --cta-hover: #ffffff;
  --sans: "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rail: 268px; --bar: 76px;
}
:root[data-theme="paper"] {
  color-scheme: light;
  --paper: #f4efe5; --card: #fffaf1; --card-raised: #f3ede2; --field: #f3ede2;
  --ink: #201c16; --ink-2: #40392f; --muted: #6d655a; --faint: #7b7368;
  --line: #ded6c9; --line-2: #cec3b2; --line-3: #e8e0d4;
  --accent: #d84212; --accent-soft: #f8e2d8; --yellow: #8b7000; --yellow-soft: #f4edcf;
  --blue: #354fc8; --blue-soft: #e5e9fb; --sky: #315f9e; --green: #32663a; --green-soft: #e3efe2;
  --rose: #a9342c; --rose-soft: #f6e1de;
  --cta: #201c16; --cta-ink: #fff8ed; --cta-hover: #40392f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; scrollbar-color: var(--line-2) transparent; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.55 var(--sans); font-synthesis: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--blue) 34%, transparent); }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.fill { fill: currentColor; stroke: none; }
code { font: 500 .88em var(--mono); background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: 5px; }
.label, .eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.art { background-repeat: no-repeat; background-size: contain; pointer-events: none; }

/* Sidebar: stays dark in both themes, because the logo is cream on black */
.app-sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--rail); padding: 20px 18px 18px; background: #0b0c0f; border-right: 1px solid #1f2024; display: flex; flex-direction: column; color: #fff1d6; }
.brand { display: block; width: 100%; margin: 0 0 32px; padding: 6px 8px 0; text-align: left; }
.wordmark { display: block; color: #fff1d6; font: 800 31px/1.1 var(--sans); letter-spacing: -.045em; white-space: nowrap; }
.wordmark em { font-style: normal; color: #ff5a1f; }
.wordmark .short { display: none; }
.booting .brand .wordmark { visibility: hidden; }
.sidebar-caption, .track-heading { padding: 0 12px; margin: 0 0 12px; color: #b3ada0; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; }
.primary-nav { display: grid; gap: 6px; }
.nav-link { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 13px; padding: 0 12px; border-radius: 10px; color: #e4dccb; text-align: left; font-size: 15px; font-weight: 600; transition: background .15s; }
.nav-link:hover { background: #17181c; }
.nav-link.active { background: #26272b; color: #fff1d6; }
.nav-link.active svg.lead { color: #ffd21f; }
.nav-arrow { margin-left: auto; color: #ff5a1f; display: none; }
.nav-link.active .nav-arrow { display: block; }
.track-heading { margin-top: 28px; }
.track-list { display: grid; gap: 4px; padding: 0 12px; }
.track-list button { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: #e4dccb; font-size: 14px; font-weight: 600; text-align: left; }
.track-list i { width: 9px; height: 9px; border-radius: 50%; background: #ff5a1f; }
.sidebar-promo { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; padding: 0 14px 16px; border: 1px solid #26272c; border-radius: 14px; background: #131417; text-align: left; color: #fff1d6; position: relative; transition: border-color .15s; }
.sidebar-promo:hover { border-color: #3d3e44; }
.promo-art { position: absolute; top: -104px; left: 16px; width: 200px; height: 112px; background-image: url("assets/art-promo-flag.png"); background-position: center bottom; }
.sidebar-promo .eyebrow { margin: 18px 0 6px; color: #b3ada0; font-size: 11px; }
.sidebar-promo b { font-size: 22px; line-height: 1.15; }
.promo-link { margin-top: 10px; color: #ff7a47; font-size: 13px; font-weight: 700; }

/* Top bar */
.topbar { position: sticky; z-index: 20; top: 0; height: var(--bar); margin-left: var(--rail); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-3); }
.topbar-left { flex: 1; min-width: 0; }
.search { height: 44px; width: min(520px, 100%); display: flex; align-items: center; gap: 11px; padding: 0 10px 0 15px; color: var(--muted); background: var(--card); border: 1px solid var(--line-3); border-radius: 12px; }
.search:focus-within { border-color: var(--line-2); }
.search input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { padding: 3px 7px; border-radius: 6px; background: var(--card-raised); color: var(--muted); font: 500 11px var(--mono); white-space: nowrap; }
.stats { display: flex; align-items: center; gap: 12px; flex: none; }
.stat { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .ico { color: var(--accent); }
#xp .ico { color: var(--yellow); }
.stat.flash { border-color: var(--yellow); }
.level { display: flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--muted); }
.level b { color: var(--ink); font-size: 14px; }
.level-bar { width: 118px; height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.level-bar i { display: block; height: 100%; border-radius: 8px; background: var(--yellow); }
.avatar-wrap { position: relative; }
.avatar { display: flex; align-items: center; gap: 8px; }
.avatar > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--card-raised); font-weight: 700; font-size: 14px; }
.menu { position: absolute; right: 0; top: 50px; width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 18px 42px #0006; }
.menu[hidden] { display: none; }
.menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 14px; text-align: left; }
.menu button:hover { background: var(--card-raised); }

#view { min-height: calc(100vh - var(--bar)); margin-left: var(--rail); }

/* Shared controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 17px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card-raised); font-size: 14px; font-weight: 700; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.btn.primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn.small { padding: 8px 13px; font-size: 13px; }
.btn.big { padding: 14px 24px; font-size: 17px; border-radius: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .k { font: 500 12px var(--mono); padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--cta-ink) 12%, transparent); }
.linkbtn { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; font-weight: 600; }
.card { min-width: 0; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.card-k { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; }
.done-note { display: inline-flex; padding: 9px 13px; border-radius: 999px; background: var(--green-soft); color: var(--green); font: 500 13px var(--mono); }
.empty-state { padding: 35px; border: 1px dashed var(--line-2); border-radius: 13px; color: var(--muted); text-align: center; }

/* Home */
.dash { max-width: 1400px; margin: 0 auto; padding: 22px 28px 56px; display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 24px; align-items: start; }
.dash-main { min-width: 0; }
.dash-hero { position: relative; min-height: 370px; padding: 12px 0 0 6px; }
.dash-hero-copy { position: relative; z-index: 1; width: 50%; }
.dash-hero h1 { margin: 18px 0 16px; font-size: clamp(52px, 5.6vw, 84px); line-height: .98; font-weight: 800; letter-spacing: -.04em; }
.dash-hero h1 span { color: var(--accent); display: block; }
.dash-hero h1 span i { font-style: normal; color: var(--ink); }
.dash-hero p { max-width: 24em; margin: 0 0 22px; color: var(--ink-2); font-size: 18px; line-height: 1.45; }
.hero-actions { display: flex; align-items: center; gap: 22px; color: var(--muted); }
.dash-hero .art { position: absolute; right: 0; top: 0; width: 49%; height: 100%; background-image: url("assets/art-hero-sql.png"); background-position: right center; }

.week-bar { display: flex; align-items: center; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line-3); }
.week-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; white-space: nowrap; border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.week-tab.active { background: var(--cta); color: var(--cta-ink); font-weight: 700; }
.week-tab[disabled] { color: var(--faint); cursor: not-allowed; }
.week-tab svg.i { width: 13px; height: 13px; }
.week-meta { margin-left: 14px; padding-left: 26px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.week-pct { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.seg-bar { display: flex; gap: 3px; width: 132px; }
.seg-bar i { flex: 1; height: 10px; background: var(--line); }
.seg-bar i:first-child { border-radius: 6px 0 0 6px; } .seg-bar i:last-child { border-radius: 0 6px 6px 0; }
.seg-bar i.on { background: var(--yellow); }

.timeline { display: grid; gap: 6px; }
.t-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: stretch; position: relative; }
.t-row::before { content: ""; position: absolute; left: 28px; top: 0; bottom: -6px; width: 1px; background: var(--line-2); }
.t-row:last-child::before { bottom: auto; height: 36px; } .t-row:first-child::before { top: 36px; }
.t-dot { position: relative; z-index: 1; align-self: start; margin-top: 22px; justify-self: center; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line-2); background: var(--paper); }
.t-dot svg.i { width: 14px; height: 14px; }
.t-row.done .t-dot { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.t-row.now .t-dot { margin-top: 18px; width: 36px; height: 36px; border-color: var(--yellow); color: var(--yellow); }
.t-row.now::after { content: ""; position: absolute; left: 48px; width: 12px; top: 36px; height: 1px; background: var(--yellow); }
.t-main { min-width: 0; }
.t-steps { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 8px; }
.step { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 600; transition: border-color .15s; }
.step:hover { border-color: var(--line-2); }
.step svg.i { width: 14px; height: 14px; }
.step.done { color: var(--green); }
.step.next { border-color: var(--yellow); color: var(--yellow); }
.t-card { width: 100%; min-width: 0; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto 46px; align-items: center; gap: 16px; padding: 9px 20px 9px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: left; transition: border-color .15s; }
button.t-card:hover { border-color: var(--line-2); }
.t-row.now .t-card { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 8%, var(--card)); }
.t-row.locked .t-card { cursor: default; }
.t-ico { width: 62px; height: 54px; display: grid; place-items: center; border-radius: 10px; background: var(--card-raised); color: var(--ink-2); }
.t-ico svg.i { width: 26px; height: 26px; stroke-width: 1.5; }
.t-copy { min-width: 0; }
.t-copy b { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; }
.t-copy small { display: block; color: var(--ink-2); font-size: 14px; }
.t-min { color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.t-go { width: 46px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: var(--card-raised); color: var(--ink); }
.t-row.now .t-go { background: var(--cta); color: var(--cta-ink); }
.t-row.locked .t-go { background: transparent; color: var(--ink-2); }

.dash-side { display: grid; gap: 18px; padding-top: 2px; }
.dash-side .card { padding: 22px 24px; }
.dash-side h3 { margin: 0; font-size: 20px; font-weight: 700; }
.ring-row { display: flex; align-items: center; gap: 26px; margin-top: 14px; }
.ring { position: relative; width: 122px; height: 122px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; }
.ring-row strong { display: block; font-size: 18px; }
.ring-row span { color: var(--ink-2); font-size: 15px; }
.streak-top { display: flex; align-items: center; gap: 14px; }
.streak-top .i { width: 42px; height: 42px; color: var(--accent); }
.streak-top p { margin: 0; color: var(--ink-2); font-size: 14px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-top: 16px; }
.days i { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 9px; border: 1px solid var(--line-2); border-radius: 9px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.days i svg.i { width: 16px; height: 16px; color: var(--yellow); }
.days i .o { width: 13px; height: 13px; margin: 1.5px; border: 2px solid var(--muted); border-radius: 50%; }
.days i.today { border-color: var(--yellow); background: var(--yellow); color: #0b0c0f; }
.days i.today svg.i { color: #0b0c0f; }
.days i.today .o { border: 0; background: #0b0c0f; }
.xp-top { display: flex; align-items: center; justify-content: space-between; font-size: 19px; font-weight: 700; }
.xp-top span { display: flex; align-items: center; gap: 10px; }
.xp-top svg.i { width: 24px; height: 24px; color: var(--yellow); }
.xp-meter { height: 11px; margin-top: 14px; border-radius: 10px; background: var(--line); overflow: hidden; }
.xp-meter i { display: block; height: 100%; border-radius: 10px; background: var(--yellow); }
.project-card { padding: 0 !important; overflow: hidden; text-align: left; width: 100%; display: block; color: var(--ink); transition: border-color .15s; }
.project-card:hover { border-color: var(--line-2); }
.project-card .art { height: 176px; margin-top: 16px; background-image: url("assets/art-project-trophy.png"); background-position: center; }
.project-body { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px 20px; }
.project-body b { display: block; color: var(--yellow); font-size: 23px; line-height: 1.2; }
.project-body span { color: var(--ink-2); font-size: 14px; }
.project-body .t-go { flex: none; background: var(--cta); color: var(--cta-ink); }

/* List pages: practice, library, search */
.page { max-width: 1040px; margin: 0 auto; padding: 30px 28px 60px; }
.page h1 { margin: 6px 0 22px; font-size: 44px; font-weight: 800; letter-spacing: -.03em; }
.group { margin-bottom: 26px; }
.group header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.group h2 { margin: 0; font-size: 18px; }
.rows { border: 1px solid var(--line); border-radius: 13px; background: var(--card); overflow: hidden; }
.row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line-3); text-align: left; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--card-raised); }
.row b { flex: 1; min-width: 0; font-size: 15px; }
.row small { color: var(--muted); font-size: 13px; }
.row .ok { color: var(--green); }

/* Quiz */
.quiz { max-width: 1400px; margin: 0 auto; padding: 24px 28px 50px; }
.quiz-top { position: relative; min-height: 186px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.crumbs .label { margin-left: 6px; }
.crumbs .label { display: flex; gap: 12px; }
.quiz-title { display: flex; align-items: center; gap: 22px; margin: 18px 0 6px; padding-right: 340px; position: relative; z-index: 1; }
#lesson-stage .quiz-title h1 { font-size: clamp(32px, 3.2vw, 50px); }
.quiz-title h1 { margin: 0; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; background: var(--yellow); color: #0b0c0f; font-size: 17px; font-weight: 700; flex: none; }
.pill.project { background: var(--accent); }
.tagline { margin: 0; color: var(--ink-2); font-size: 18px; position: relative; z-index: 1; }
.quiz-top .art { position: absolute; right: 8px; top: -12px; width: 330px; height: 214px; background-image: url("assets/art-quiz-terminal.png"); background-position: right top; }
.quiz-grid { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 24px; align-items: start; position: relative; margin-top: 8px; }
.quiz-col { display: grid; gap: 18px; min-width: 0; }
.q-card { position: relative; overflow: hidden; padding: 20px 24px 22px; }
.q-meta { display: flex; align-items: center; gap: 12px; }
.diff { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.diff i { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.diff i u { width: 3px; background: var(--line-2); }
.diff i u:nth-child(1) { height: 5px; } .diff i u:nth-child(2) { height: 8px; } .diff i u:nth-child(3) { height: 12px; }
.diff.easy i u:nth-child(1), .diff.medium i u:nth-child(-n+2), .diff.hard i u { background: var(--green); }
.badge { padding: 3px 11px; border: 1px solid var(--yellow); border-radius: 999px; color: var(--yellow); font: 500 14px var(--mono); }
.prompt { position: relative; z-index: 1; margin: 0; color: var(--ink-2); font-size: 19px; line-height: 1.5; }
.prompt strong { color: var(--ink); }
.hint { position: relative; z-index: 1; margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--yellow-soft); color: var(--ink-2); font-size: 15px; }
.hint b { margin-right: 8px; color: var(--yellow); font: 500 12px var(--mono); }
.side-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; margin-top: 20px; }
.hint-btn svg.i { color: var(--yellow); }
.q-card .art { position: absolute; right: 0; bottom: 0; width: 150px; height: 90px; background-image: url("assets/art-corner-swoosh.png"); background-position: right bottom; }

.explorer { padding: 0; overflow: hidden; }
.ex-head { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.ex-tabs, .res-tabs { display: flex; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.res-tabs .tab { border-color: transparent; }
.tab.active { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); font-weight: 700; }
.tbl-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 11px 24px; border-top: 1px solid var(--line-3); font-size: 15px; font-weight: 500; text-align: left; }
.tbl-row:first-child { border-top: 0; }
.tbl-row:hover { background: var(--card-raised); }
.tbl-row svg.lead { color: var(--ink-2); }
.tbl-row .chev { margin-left: auto; width: 16px; height: 16px; }
.tbl-row.open { background: var(--accent-soft); }
.tbl-row.open svg { color: var(--accent); }
.tbl-row.open .chev { transform: rotate(90deg); }
.tbl-cols { margin: 0 24px; padding: 10px 18px 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 11px 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; font: 400 14px var(--mono); color: var(--ink-2); }
.tbl-cols span:nth-child(even) { color: var(--muted); }
.tbl-note { grid-column: 1 / -1; margin-bottom: 6px; font: 400 14px var(--sans); color: var(--muted); }
.preview { padding: 14px 18px 18px; }
.preview .sel { margin-bottom: 10px; font: 500 14px var(--mono); color: var(--ink-2); }

.editor-card { padding: 0; overflow: hidden; }
.editor-head { padding: 13px 24px; border-bottom: 1px solid var(--line); }
.editor-chrome { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; border-bottom: 1px solid var(--line-3); }
.lights { display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: var(--rose); }
.lights i:nth-child(2) { background: var(--yellow); } .lights i:nth-child(3) { background: var(--green); }
.reset { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.reset svg.i { width: 15px; height: 15px; }
.CodeMirror { height: 150px; background: var(--card); color: var(--ink); font: 400 19px/1.55 var(--mono); }
.CodeMirror-lines { padding: 12px 0; }
.CodeMirror-gutters { border-right: 1px solid var(--line-3); background: var(--card); }
.CodeMirror-linenumber { padding: 0 14px 0 12px; color: var(--muted); }
.CodeMirror-cursor { border-left: 2px solid var(--accent); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--blue) 25%, transparent) !important; }
.cm-s-default .cm-keyword { color: #d4a6ff; font-weight: 500; }
:root[data-theme="paper"] .cm-s-default .cm-keyword { color: #7a3fb0; }
.cm-s-default .cm-builtin, .cm-s-default .cm-def, .cm-s-default .cm-type { color: var(--sky); }
.cm-s-default .cm-string { color: var(--green); }
.cm-s-default .cm-number { color: var(--yellow); }
.cm-s-default .cm-comment { color: var(--faint); font-style: italic; }
.cm-s-default .cm-operator { color: var(--ink-2); }
.cm-s-default .cm-variable, .cm-s-default .cm-variable-2 { color: var(--ink); }
.run-bar { display: flex; align-items: center; gap: 22px; padding: 14px 20px; border-top: 1px solid var(--line); }
.run-bar .btn { min-width: 262px; justify-content: space-between; }
.run-bar .btn > span:first-child { display: inline-flex; align-items: center; gap: 12px; }
.run-status { display: flex; align-items: center; gap: 9px; padding-left: 22px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: 14px; min-width: 0; }
.run-status i { width: 14px; height: 14px; flex: none; border: 2px solid var(--muted); border-radius: 50%; }
.run-status.good { color: var(--green); } .run-status.good i { border-color: var(--green); background: var(--green); }
.run-status.bad { color: var(--rose); } .run-status.bad i { border-color: var(--rose); background: var(--rose); }
.results { padding: 0; overflow: hidden; }
.res-body { padding: 16px 20px 20px; }
.empty-run { margin: 0; padding: 22px 0; color: var(--muted); font-size: 15px; text-align: center; }
.verdict { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.verdict .tag { flex: none; margin-top: 2px; padding: 5px 9px; border-radius: 99px; font: 500 12px/1 var(--mono); }
.verdict p { margin: 0; color: var(--ink-2); font-size: 15px; }
.verdict p b { display: block; color: var(--ink); }
.verdict.good .tag { background: var(--green-soft); color: var(--green); }
.verdict.bad .tag { background: var(--rose-soft); color: var(--rose); }
.verdict.info .tag { background: var(--field); color: var(--muted); border: 1px solid var(--line); }
.learned { margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); }
.learned .label { margin-bottom: 6px; color: var(--green); }
.learned p { margin: 0; color: var(--ink-2); font-size: 15px; }
.next-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.table-scroll { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; color: var(--ink); font: 400 15px/1.3 var(--mono); }
th, td { padding: 8px 14px; border-bottom: 1px solid var(--line-3); text-align: left; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
th { position: sticky; top: 0; background: var(--card-raised); color: var(--ink); font-weight: 600; }
td.null { color: var(--faint); font-style: italic; }
.rowcount { margin-top: 8px; color: var(--muted); font: 400 13px var(--mono); }
.tests { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tests li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); font: 400 13px/1.5 var(--mono); overflow-wrap: anywhere; }
.tests li .got { display: block; color: var(--faint); }
.tests li.pass { border-color: var(--green); background: var(--green-soft); } .tests li.pass .got { color: var(--green); }
.tests li.fail { border-color: var(--rose); background: var(--rose-soft); } .tests li.fail .got { color: var(--rose); }
pre.stdout { margin: 0 0 14px; padding: 12px 14px; border-radius: 9px; background: var(--field); color: var(--ink); font: 400 13px/1.55 var(--mono); white-space: pre-wrap; }

/* Lessons */
.lesson-pill { background: var(--blue); color: #fff1d6; }
.lesson-pill.project { background: var(--accent); color: #0b0c0f; }
.lesson-pill svg.i { width: 17px; height: 17px; }
.dots { display: flex; gap: 6px; margin: 4px 0 18px; }
.dots i { height: 6px; flex: 1; border-radius: 6px; background: var(--line); transition: background .3s; }
.dots i.on { background: var(--yellow); }
.dots i.now { background: var(--accent); }
.stage { position: relative; overflow: hidden; padding: 0; }
#screen { min-height: 430px; display: flex; }
.scene { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; gap: 40px; align-items: center; padding: 38px 44px; }
.scene.split { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.scene.solo { grid-template-columns: minmax(0, 1fr); align-content: center; max-width: 880px; }
.scene-tag { display: inline-block; margin-bottom: 16px; padding: 5px 12px; border-radius: 999px; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--yellow-soft); color: var(--yellow); }
.scene.picture .scene-tag { background: var(--blue-soft); color: var(--sky); }
.scene.syntax .scene-tag { background: var(--accent-soft); color: var(--accent); }
.scene.try .scene-tag { background: var(--green-soft); color: var(--green); }
.say p { margin: 0 0 16px; color: var(--ink); font-size: 21px; line-height: 1.55; }
.say p:last-child { margin-bottom: 0; }
.scene.solo .say p { font-size: 28px; line-height: 1.42; font-weight: 500; letter-spacing: -.015em; }
.say strong { color: var(--accent); font-weight: 700; }
.scene-visual { min-width: 0; }
.stage-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line); }
.stage-count { color: var(--muted); font: 500 13px var(--mono); }
.stage > .art { position: absolute; z-index: 0; right: 0; bottom: 70px; width: 220px; height: 132px; opacity: .9; background-image: url("assets/art-corner-swoosh.png"); background-position: right bottom; }
#screen:has(.split) ~ .art { display: none; }

.win { border: 1px solid var(--line-2); border-radius: 14px; background: var(--field); overflow: hidden; }
.win-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: 500 13px var(--mono); }
.win-bar > span:last-child { display: inline-flex; align-items: center; gap: 7px; }
.win-bar svg.i { width: 14px; height: 14px; }
.pic { overflow-x: auto; }
.pic table { font-size: 15px; }
.pic th { position: static; background: transparent; }
.pic td { padding: 11px 14px; }
.pic td.dim, .pic th.dim { color: var(--line-2); }
.pic td.lit { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.pic td.lit.null { color: var(--accent); }
.build { padding: 12px 0; font: 400 18px/1.5 var(--mono); }
.build > div { display: flex; gap: 16px; padding: 6px 18px; color: var(--faint); border-left: 3px solid transparent; }
.build i { width: 14px; font-style: normal; color: var(--line-2); text-align: right; flex: none; }
.build code { padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; overflow-wrap: anywhere; }
.build .on { background: var(--accent-soft); border-left-color: var(--accent); color: var(--ink); font-weight: 500; }
.build .on i { color: var(--accent); }
.try .CodeMirror { height: auto; min-height: 56px; background: transparent; font-size: 17px; }
.try .CodeMirror-gutters { display: none; }
.try .CodeMirror-lines { padding: 14px 8px; }
.try-bar { padding: 0 16px 14px; }
#try-out { padding: 0 16px; }
#try-out:not(:empty) { padding-bottom: 16px; }
#try-out .table-scroll { max-height: 216px; }
.squeeze { display: flex; flex-direction: column; gap: 12px; }
.pile { display: grid; grid-template-columns: minmax(0, 1fr) 34px 164px; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--tone-bg); }
.pile.tone0 { --tone-bg: var(--accent-soft); --tone: var(--accent); }
.pile.tone1 { --tone-bg: var(--blue-soft); --tone: var(--sky); }
.pile.tone2 { --tone-bg: var(--yellow-soft); --tone: var(--yellow); }
.pile-rows { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.pile-rows span { padding: 4px 11px; border-radius: 7px; background: var(--card); color: var(--ink-2); font: 400 14px var(--mono); }
.pile-arrow { display: grid; place-items: center; color: var(--tone); }
.pile-out { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border: 1px solid var(--tone); border-radius: 10px; background: var(--card); font: 500 16px var(--mono); }
.pile-out b { color: var(--ink); font-weight: 500; }
.pile-out span { color: var(--tone); font-weight: 700; }
.pile.dropped { opacity: .5; }
.pile.dropped .pile-out { text-decoration: line-through; }

/* The project report */
.wrap.narrow { max-width: 860px; margin: 0 auto; padding: 0 28px; }
.ch-top { padding: 26px 0 20px; }
.ch-top .label { margin-top: 18px; }
.ch-top h1 { margin: 6px 0 0; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.band { padding-bottom: 60px; }
.lesson { padding: 26px 30px; }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.report-part { margin-top: 24px; }
.report-part h2 { margin: 0 0 10px; font-size: 19px; }
.loading { display: flex; align-items: center; gap: 10px; padding: 70px 28px; color: var(--muted); font-size: 15px; }
.spin { width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Boot screen */
#boot { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: hidden; }
.boot-bg { position: absolute; inset: 0; background: #0b0c0f; }
.boot-grid { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 55% 50% at center, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 55% 50% at center, #000 10%, transparent 75%); }
.boot-word { position: relative; z-index: 0; display: flex; color: #fff1d6; font: 800 clamp(40px, 8.4vw, 124px)/1.1 var(--sans); letter-spacing: -.045em; white-space: nowrap; will-change: transform; }
.boot-word .l { position: relative; display: inline-block; }
.boot-word .real { display: inline-block; opacity: 0; }
.boot-word .ghost { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: #4a64ee; font: 500 .62em/1 var(--mono); letter-spacing: 0; }
.boot-word .m { position: relative; display: flex; }
.boot-word .real.lit { color: transparent; background: linear-gradient(90deg, #ff5a1f 0 44%, #ff8a4a 47%, #ffe2c4 49.500%, #ffd0a6 51%, #fff1d6 55%) no-repeat; background-position: calc(var(--p, 0px) - var(--left, 0px)) 0; -webkit-background-clip: text; background-clip: text; }
.boot-word .bloom { position: absolute; z-index: -1; inset: -.18em -.12em; background: radial-gradient(closest-side, #ff5a1f, transparent); filter: blur(20px); opacity: 0; pointer-events: none; }
.boot-word .dot { position: relative; display: inline-block; opacity: 0; transform-origin: 50% 85%; }
.boot-word .ring { position: absolute; left: 50%; bottom: .19em; width: .22em; height: .22em; margin-left: -.11em; border: 1px solid #ff5a1f; border-radius: 50%; opacity: 0; }
.boot-line { position: absolute; left: 50%; bottom: 12vh; width: min(220px, 40vw); height: 1px; margin-left: calc(min(220px, 40vw) / -2); background: #ffffff0d; }
.boot-line i { display: block; height: 100%; background: #ff5a1f; transform: scaleX(0); transform-origin: left; }

/* Narrower screens */
@media (max-width: 1560px) {
  .week-meta { display: none; }
  .seg-bar { width: 96px; }
}
@media (max-width: 1320px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-top .art { width: 280px; }
  .quiz-title { padding-right: 290px; }
  .run-bar .btn { min-width: 0; }
}
@media (max-width: 1000px) {
  :root { --rail: 76px; }
  .app-sidebar { padding: 18px 12px; align-items: center; }
  .brand { margin-bottom: 22px; padding: 0; text-align: center; }
  .wordmark .full { display: none; } .wordmark .short { display: inline; }
  .sidebar-caption, .track-heading, .track-list, .sidebar-promo { display: none; }
  .nav-link { justify-content: center; padding: 0; font-size: 0; gap: 0; }
  .nav-link.active .nav-arrow { display: none; }
  .level, .week-meta { display: none; }
  .quiz-grid { grid-template-columns: minmax(0, 1fr); }
  .scene.split { grid-template-columns: minmax(0, 1fr); }
  .t-card { grid-template-columns: 50px minmax(0, 1fr) auto 42px; gap: 12px; }
  .t-ico { width: 50px; }
}
@media (max-width: 680px) {
  :root { --bar: 66px; }
  .app-sidebar { inset: auto 0 0; width: auto; height: 66px; padding: 6px; border-right: 0; border-top: 1px solid #26272c; }
  .brand { display: none; }
  .primary-nav { width: 100%; grid-template-columns: repeat(4, 1fr); }
  .nav-link { flex-direction: column; gap: 2px; min-height: 52px; font-size: 11px; }
  .topbar { margin-left: 0; padding: 0 12px; gap: 8px; }
  #view { margin-left: 0; padding-bottom: 72px; }
  .search kbd, .stat span.lbl { display: none; }
  .stats { gap: 6px; } .stat { height: 36px; padding: 0 9px; gap: 4px; }
  .dash, .quiz, .page { padding: 14px 16px 30px; }
  .wrap.narrow { padding: 0 16px; }
  .dash-hero { min-height: 0; padding: 0 0 8px; }
  .dash-hero-copy { width: 100%; }
  .dash-hero .art { position: relative; display: block; width: 100%; height: 190px; margin-top: 16px; }
  .dash-hero p { font-size: 16px; }
  .week-bar { flex-wrap: wrap; }
  .week-pct { width: 100%; margin-left: 0; }
  .dash-side { grid-template-columns: minmax(0, 1fr); }
  .t-row { grid-template-columns: 38px minmax(0, 1fr); }
  .t-row::before { left: 18px; } .t-row.now::after { display: none; }
  .t-dot, .t-row.now .t-dot { width: 26px; height: 26px; margin-top: 18px; }
  .t-card { grid-template-columns: minmax(0, 1fr) 42px; padding: 10px 12px; }
  .t-ico, .t-min { display: none; }
  .quiz-top { min-height: 0; padding-bottom: 12px; }
  .quiz-top .art { display: none; }
  .quiz-title { flex-wrap: wrap; gap: 10px; padding-right: 0; }
  .run-bar { flex-wrap: wrap; gap: 10px; } .run-status { border-left: 0; padding-left: 0; }
  .lesson { padding: 18px; }
  .pile { grid-template-columns: minmax(0, 1fr); } .pile-arrow { display: none; }
  .scene { padding: 24px 20px; gap: 22px; }
  .scene.solo .say p { font-size: 22px; }
  .say p { font-size: 18px; }
  #screen { min-height: 300px; }
  .stage > .art { display: none; }
  .stage-nav { padding: 12px 14px; }
  .CodeMirror { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .spin { animation-duration: 3s; } }

/* Profile picker */
#who { position: fixed; z-index: 40; inset: 0; overflow-y: auto; padding: 40px 16px; display: grid; place-items: center; background: var(--paper); }
.who-box { width: min(560px, 100%); display: grid; gap: 18px; }
.who-box .wordmark { color: var(--ink); }
.who-box h1 { margin: 8px 0 0; font-size: clamp(32px, 6vw, 46px); line-height: 1.08; letter-spacing: -.03em; }
.who-list { display: flex; flex-wrap: wrap; gap: 10px; }
.who-person { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--card); font-weight: 700; }
.who-person:hover { border-color: var(--faint); }
.who-person span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--card-raised); font-size: 13px; }
.who-or { margin-top: 8px; }
#who-new { display: grid; gap: 12px; }
#who-name { width: 100%; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--field); font-size: 16px; }
.who-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.who-path { display: grid; gap: 4px; justify-items: start; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); text-align: left; }
.who-path small { color: var(--muted); font-size: 13px; }
.who-path.active { border-color: var(--yellow); background: var(--yellow-soft); }
#who .btn.big { justify-self: start; }
#who .linkbtn { justify-self: start; }

/* The Python path shares everything with the data path, apart from its art and tracks */
.build-path [data-track="sql"] { display: none; }
.build-path .dash-hero .art { background-image: url("assets/art-hero-python.svg"); }
.lab-game canvas { display: block; width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 4 / 5; border-radius: 12px; background: #0a0d1e; outline-offset: 3px; touch-action: none; }

/* Lesson pictures for people who've never coded */
.pic-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pic-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-raised); font-weight: 600; }
.pic-steps i { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #0b0c0f; font: 700 13px var(--mono); }
.pic-boxes { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 0; }
.pic-boxes div { min-width: 130px; flex: 1; display: grid; gap: 8px; text-align: center; }
.pic-boxes span { padding: 26px 14px; border: 2px solid var(--yellow); border-radius: 12px; background: var(--yellow-soft); font: 600 19px var(--mono); }
.pic-boxes b { font: 600 14px var(--mono); color: var(--muted); }
.try-print { margin: 0; padding: 12px 14px; }

/* The building screen */
.lab { max-width: 1320px; margin: 0 auto; padding: 22px 28px 50px; }
.lab-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.lab-top .dots { margin: 0; flex: 1; min-width: 120px; }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.lab-col { display: grid; gap: 16px; min-width: 0; }
.lab-step h1 { margin: 6px 0 8px; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -.025em; }
.lab-step .say p { margin: 0 0 10px; color: var(--ink-2); }
.lab-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.lab-hint { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--yellow-soft); color: var(--ink-2); }
.lab-solution { margin: 12px 0 0; padding: 12px 14px; overflow-x: auto; border-radius: 10px; background: var(--field); font: 500 13px/1.6 var(--mono); }
.lab-editor .CodeMirror { height: 400px; }
.lab-run { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; }
.lab-game { position: sticky; top: calc(var(--bar) + 16px); }
.lab-game .help { margin: 10px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
#lab-msg:empty { display: none; }
#lab-msg .verdict { margin: 0; }
#lab-msg .btn { margin-top: 12px; }

@media (max-width: 1000px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .lab { padding-left: 16px; padding-right: 16px; }
  .lab-game { position: static; }
  .lab-editor .CodeMirror { height: 320px; }
}
@media (max-width: 680px) { .who-paths { grid-template-columns: 1fr; } }
.lab-new { background: color-mix(in srgb, var(--yellow) 9%, transparent); }
.lab-editor .CodeMirror { font-size: 15px; }
@media (max-width: 1240px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-game { position: static; order: -1; }
  .lab-game canvas { max-width: 340px; }
}
.who-lead { margin: -8px 0 4px; color: var(--ink-2); font-size: 17px; }
#who #google { justify-self: start; }
.build-path .quiz-top .art { background-image: url("assets/art-hero-python.svg"); }
.sound-btn { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); }
.sound-btn:hover { border-color: var(--faint); }
.lab-top #listen { flex: none; }

/* Zoya: the speaker badge, the opening card, and words and pictures arriving with her voice */
.orb { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, var(--yellow), var(--accent)); color: #0b0c0f; font: 800 13px var(--sans); }
.orb.big { width: 68px; height: 68px; font-size: 30px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--yellow) 14%, transparent); animation: orb-breathe 2.6s ease-in-out infinite; }
.speaker { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 13px; }
.speaker.live { border-color: var(--yellow); }
.bars { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.bars u { width: 3px; height: 4px; border-radius: 2px; background: var(--faint); text-decoration: none; }
.speaker.live .bars u { background: var(--yellow); animation: bar .7s ease-in-out infinite alternate; }
.speaker.live .bars u:nth-child(2) { animation-delay: .15s; }
.speaker.live .bars u:nth-child(3) { animation-delay: .3s; }
.speaker.live .bars u:nth-child(4) { animation-delay: .45s; }
@keyframes bar { to { height: 14px; } }
@keyframes orb-breathe { 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--yellow) 6%, transparent); } }
.gate { min-height: 340px; display: grid; justify-items: center; align-content: center; gap: 12px; padding: 34px 16px; text-align: center; }
.gate h2 { margin: 8px 0 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -.02em; }
.gate p { max-width: 46ch; margin: 0 0 8px; color: var(--ink-2); }
.say.voiced .w { opacity: .42; transition: opacity .18s; }
.say.voiced .w.said { opacity: 1; }
.say.voiced .w.now { color: var(--yellow); }
.say.voiced code .w.now { color: inherit; }
.say.voiced code:has(.w.now) { outline: 2px solid var(--yellow); outline-offset: 1px; }
.scene-visual { transition: opacity .45s, transform .45s cubic-bezier(.2, 1.1, .35, 1); }
.scene-visual.waiting { opacity: 0; transform: translateY(10px); }
.scene-visual.arrive .build > div, .scene-visual.arrive .pic-boxes > div { animation: pop-in .42s cubic-bezier(.2, 1.3, .4, 1) both; }
.scene-visual.arrive .build > div:nth-child(2), .scene-visual.arrive .pic-boxes > div:nth-child(2) { animation-delay: .16s; }
.scene-visual.arrive .build > div:nth-child(3), .scene-visual.arrive .pic-boxes > div:nth-child(3) { animation-delay: .32s; }
.scene-visual.arrive .build > div:nth-child(4) { animation-delay: .48s; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
.pic-steps li { transition: opacity .35s, transform .35s cubic-bezier(.2, 1.2, .4, 1), border-color .25s, background .25s; }
.pic-steps li.waiting { opacity: 0; transform: translateX(-16px); }
.pic-steps li.now { border-color: var(--yellow); background: var(--yellow-soft); }
.btn.ready { animation: ready-glow 1.6s ease-in-out infinite; }
@keyframes ready-glow { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--yellow) 28%, transparent); } }
@media (prefers-reduced-motion: reduce) { .btn.ready, .orb.big, .speaker.live .bars u { animation: none; } }

/* The stage: the site falls away and it's just Zoya, the stars and the lesson */
.stage-on { --ink: #fff1d6; --ink-2: #e4dccb; --muted: #b3ada0; --faint: #8b877e; --paper: #070814; --card: #131417; --card-raised: #1b1c20; --field: #0f1013; --line: #2b2d3a; --line-2: #3d3e4c; --line-3: #1f2024; --accent: #ff5a1f; --accent-soft: #3a1c10; --yellow: #ffd21f; --yellow-soft: #2e2810; --cta: #fff1d6; --cta-ink: #0b0c0f; --cta-hover: #fff; --sky: #8ca6ff; --blue-soft: #1a2147; --green: #9dd69c; --green-soft: #18291b; background: #070814; color: var(--ink); }
#sky { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; background: #070814; }
.stage-on .app-sidebar { display: none; }
.stage-on .topbar { display: none; }
.stage-on #view { position: relative; z-index: 1; margin-left: 0; min-height: 100vh; }
.stage-only { display: none; }
.stage-on .stage-only { display: inline-flex; }
.stage-on .quiz { min-height: 100vh; max-width: 1240px; padding: 16px 28px 20px; display: flex; flex-direction: column; }
.stage-on .quiz-top { min-height: 0; }
.stage-on .quiz-top .art, .stage-on .quiz-title, .stage-on .tagline, .stage-on .stage > .art { display: none; }
.stage-on .dots { margin: 12px 0 0; }
.stage-on .dots i { height: 3px; }
.stage-on .card.stage { position: relative; flex: 1; display: flex; flex-direction: column; background: transparent; border: 0; padding: 0; animation: stage-in .7s ease both; }
@keyframes stage-in { from { opacity: 0; transform: scale(.98); } }
.stage-on #screen { flex: 1; display: grid; align-items: center; }
.stage-on #orb { position: absolute; left: 50%; top: 2px; width: 100px; height: 100px; display: block; transform: translateX(-50%); pointer-events: none; }
.stage-on .scene { min-height: 0; padding: 104px 8px 16px; background: none; }
.stage-on .scene.solo { max-width: 860px; margin: 0 auto; text-align: center; }
.stage-on .scene-tag { display: none; }
.stage-on .say p { color: var(--ink); font-size: clamp(21px, 2.4vw, 31px); line-height: 1.42; letter-spacing: -.012em; text-shadow: 0 2px 14px #000c; }
.stage-on .win { background: #0d0f1dee; box-shadow: 0 24px 60px #0009; }
.stage-on .stage-nav { border: 0; padding: 12px 8px 4px; }
.stage-on .gate { background: #0d0f1d99; border-radius: 20px; }
.stage-on .stage-count { color: var(--muted); }
.stage-nav[hidden] { display: none; }
.say.voiced .w { transition: opacity .3s, color .3s; }
.say.voiced strong .w.said { color: var(--yellow); }

.build code.typing { display: inline-block; max-width: 0; overflow: hidden; white-space: pre; vertical-align: bottom; animation: type-line var(--secs) steps(var(--chars)) var(--wait) forwards; }
.scene-visual.arrive .build > div { animation: none; }
@keyframes type-line { to { max-width: calc(var(--chars) * 1ch + 2ch); } }
.try-print { animation: pop-in .3s ease both; color: var(--green); }

/* Endings and reactions */
.outro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; max-width: 760px; margin: 0 auto; padding: 70px 16px; text-align: center; }
.outro h2 { margin: 0; font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -.03em; }
.confetti { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body > .confetti { position: fixed; z-index: 50; }
#zoya-toast { position: fixed; z-index: 45; right: 20px; bottom: 20px; max-width: calc(100vw - 40px); display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border: 1px solid var(--yellow); border-radius: 99px; background: #131417; color: #fff1d6; font-weight: 600; box-shadow: 0 14px 34px #0008; animation: toast-in .4s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@media (max-width: 1000px) {
  #zoya-toast { bottom: 84px; }
  .stage-on .quiz { padding: 10px 16px 14px; }
  .stage-on .scene { padding-top: 90px; }
  .stage-on #orb { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) { .beat, .pic-steps li, .scene-visual { transition: none; } .build code.typing { max-width: none; animation: none; } }

/* Moving between screens: a quiet dissolve, nothing announced */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: ease; }
.slow-morph::view-transition-old(root), .slow-morph::view-transition-new(root) { animation-duration: .9s; }
.stage-on .scene { animation: scene-in .6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes scene-in { from { opacity: 0; transform: translateY(10px); } }
.stage-on #screen .scene { transition: opacity .24s ease, transform .24s ease; }
.stage-on #screen.leaving .scene { opacity: 0; transform: translateY(-6px); animation: none; }
.stage-on .card.stage { animation: none; }
.stage-on .scene { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 56px; }
.stage-on .scene.solo { grid-template-columns: minmax(0, 1fr); }
.stage-on .scene-visual { min-height: 340px; display: grid; align-content: center; }

/* Diagrams */
[data-on], [data-step] { transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .3, 1), border-color .4s, background .4s; }
.cue { opacity: 0 !important; transform: translateY(10px); }
.d-note { margin: 18px 0 0; color: var(--yellow); font-size: 18px; font-weight: 600; text-align: center; }
.mono { font-family: var(--mono); }
em.k { color: #ff8a52; font-style: normal; } em.f { color: #8ca6ff; font-style: normal; } em.s { color: #ffd21f; font-style: normal; }
.d-arrow { width: 48px; height: 20px; flex: none; fill: none; stroke: var(--faint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.d-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.d-device { position: relative; display: grid; justify-items: center; gap: 8px; padding-bottom: 30px; }
.d-device svg.i { width: 60px; height: 60px; stroke-width: 1.2; color: var(--ink); }
.d-device b { font-size: 16px; }
.d-device i { position: absolute; left: 50%; bottom: 0; width: 2px; height: 26px; background: linear-gradient(var(--yellow), transparent); }
.d-scroll { padding: 16px 20px; border-left: 3px solid var(--yellow); background: linear-gradient(90deg, #ffd21f14, transparent); }
.d-scroll p { margin: 6px 0 0; font: 500 17px var(--mono); white-space: pre; }
.d-typo { display: grid; gap: 22px; }
.d-case { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.d-case > .label { grid-column: 1 / -1; }
.d-typed { margin: 0; font-size: 21px; font-style: italic; color: var(--ink); }
.d-typed.mono { font: 500 20px var(--mono); }
.d-typed mark { background: none; color: var(--rose); border-bottom: 3px solid var(--rose); }
.d-reply { margin: 0; font-size: 18px; font-weight: 600; }
.d-reply.good { color: var(--green); } .d-reply.bad { color: var(--rose); }
.d-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.d-pair p { margin: 8px 0 0; font-size: 21px; }
.d-pair .mono p { font: 500 19px var(--mono); }
.d-uses { display: flex; justify-content: center; gap: 28px; margin-top: 30px; color: var(--ink-2); font-weight: 600; }
.d-uses span { display: inline-flex; align-items: center; gap: 8px; }
.d-uses svg.i { color: var(--yellow); }
.d-flow { display: grid; gap: 20px; }
.d-heads { order: -1; display: grid; grid-template-columns: 1fr 64px 1fr; }
.d-heads .label:last-child { grid-column: 3; }
.d-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; }
.d-row .d-arrow { justify-self: center; }
.d-code code, .d-listing code, .d-call code, .d-compare code, .d-part code, .d-skills code { padding: 0; background: none; color: var(--ink); font: 500 21px/1.6 var(--mono); white-space: pre; }
.d-screen { min-height: 74px; display: grid; align-content: center; gap: 4px; padding: 12px 18px; border: 1px solid var(--line-2); border-radius: 10px; background: #000; box-shadow: inset 0 0 26px #ffd21f12; font: 600 23px var(--mono); color: var(--green); }
.d-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: center; }
.d-kinds .d-note { grid-column: 1 / -1; }
.d-kinds b { color: var(--muted); font-size: 16px; font-weight: 600; }
.d-big { display: block; margin-bottom: 8px; font-size: clamp(42px, 5vw, 66px); font-weight: 600; letter-spacing: -.03em; }
.d-big.s { color: var(--yellow); } .d-big.n { color: var(--sky); }
.d-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
.d-tiles div { display: grid; grid-template-columns: 70px 1fr; align-items: baseline; }
.d-tiles b { grid-row: span 2; color: var(--yellow); font: 600 60px/1 var(--mono); }
.d-tiles span { color: var(--muted); font: 500 18px var(--mono); }
.d-tiles i { color: var(--ink); font: 600 28px var(--mono); }
.d-hud { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 22px 8px; border-top: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); }
.d-hud b { display: block; margin-top: 6px; font: 600 clamp(22px, 2.5vw, 30px) var(--mono); }
.d-hearts { display: flex !important; gap: 2px; color: var(--accent); }
.d-hud .d-note { grid-column: 1 / -1; }
.d-boxes { display: grid; gap: 26px; }
.d-listing { display: grid; padding-left: 16px; border-left: 2px solid var(--line-2); }
.d-listing.big code { font-size: 22px; line-height: 1.7; }
.d-shelf { display: flex; justify-content: center; align-items: flex-end; gap: 44px; }
.d-box { position: relative; width: 170px; display: grid; justify-items: center; gap: 12px; padding-top: 58px; }
.d-crate { width: 150px; height: 74px; border: 2.5px solid var(--yellow); border-top: 0; border-radius: 0 0 12px 12px; background: linear-gradient(transparent, #ffd21f22); }
.d-value { position: absolute; top: 46px; left: 50%; translate: -50% 0; font: 600 24px var(--mono); color: var(--ink); white-space: nowrap; }
.d-value.cue { transform: translateY(-46px); }
.d-box b { font: 600 16px var(--mono); color: var(--muted); }
.d-box b.cue { transform: none; }
.d-old[data-on]:not(.cue) { opacity: 0; transform: translateY(-46px); }
.d-old.cue { opacity: 1 !important; transform: none; }
.d-sum { margin: 0 0 28px; color: var(--yellow); font: 600 22px var(--mono); }
.d-cases { display: grid; gap: 32px; }
.d-case-row { display: grid; grid-template-columns: 1fr 56px auto; align-items: center; gap: 10px; font-size: 21px; }
.d-case-row span { display: inline-flex; align-items: center; gap: 12px; }
.d-case-row svg.i { color: var(--yellow); }
.d-case-row b { color: var(--yellow); }
.d-fork { display: grid; justify-items: center; }
.d-q { padding: 14px 24px; border: 2px solid var(--yellow); border-radius: 12px; font: 600 21px var(--sans); }
.d-fork svg { width: 100%; max-width: 420px; height: 90px; fill: none; }
.d-road { stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; }
.d-ends { width: 100%; max-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: center; }
.d-end b { display: block; margin-top: 4px; font-size: 19px; }
.d-end.yes b { color: var(--green); } .d-end.no b { color: var(--ink-2); }
.d-annot ul { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.d-annot li { padding-left: 16px; border-left: 3px solid var(--yellow); font-size: 18px; color: var(--ink-2); }
.d-compare { display: grid; gap: 26px; }
.d-compare p { margin: 2px 0 0; color: var(--ink-2); font-size: 18px; }
.d-compare mark { padding: 0 6px; border-radius: 6px; background: var(--yellow); color: #0b0c0f; }
.d-more { display: flex; gap: 34px; color: var(--ink-2); font-size: 17px; }
.d-more span { display: inline-flex; align-items: baseline; gap: 10px; }
.d-more code { color: var(--yellow) !important; }
.d-hundred { display: grid; justify-items: center; gap: 18px; }
.d-one { margin: 0; font: 600 26px var(--mono); }
.d-dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 7px; width: 100%; max-width: 480px; }
.d-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--yellow); }
.d-dots:not(.cue) i { animation: dot-on .3s ease both; animation-delay: calc(var(--n, 0) * 1ms); }
.d-dots.cue { opacity: 1 !important; transform: none; }
.d-dots.cue i { background: var(--line); }
@keyframes dot-on { from { background: var(--line); transform: scale(.5); } }
.d-walker { display: grid; gap: 12px; }
.d-walker .label { font-size: 15px; }
.d-cells { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.d-cells div { padding: 26px 8px; text-align: center; font: 600 21px var(--mono); border-left: 2px solid var(--line-2); }
.d-cells div:first-child { border-left: 0; }
.d-cells:not(.cue) div { animation: walk 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
@keyframes walk { 0%, 26% { background: var(--yellow-soft); color: var(--yellow); } 34%, 100% { background: transparent; color: var(--ink); } }
.d-machine { display: grid; justify-items: center; gap: 0; }
.d-plate { z-index: 1; margin-bottom: -16px; padding: 6px 20px; border-radius: 8px; background: var(--yellow); color: #0b0c0f; font: 700 20px var(--mono); }
.d-body { width: 100%; max-width: 420px; padding: 32px 22px 22px; border: 2.5px solid var(--line-2); border-radius: 16px; background: #0d0f1dcc; }
.d-body p { margin: 4px 0; font: 500 18px var(--mono); }
.d-machine.calling .d-body { transition: border-color .4s; }
.d-machine.calling:has(.d-call:not(.cue)) .d-body { border-color: var(--yellow); box-shadow: 0 0 34px #ffd21f33; }
.d-call { width: 100%; max-width: 480px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; margin-top: 22px; }
.d-call .d-screen { min-height: 0; font-size: 16px; }
.d-assemble { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: center; }
.d-part { display: grid; justify-items: center; gap: 12px; padding: 24px 6px; border: 2px solid var(--line-2); border-radius: 14px; }
.d-part svg.i { width: 34px; height: 34px; color: var(--yellow); }
.d-part code { font-size: 18px; }
.d-assemble .d-note { grid-column: 1 / -1; }
.d-skills { display: grid; gap: 14px; justify-items: start; width: fit-content; margin: 0 auto; }
.d-skills div { display: flex; align-items: center; gap: 14px; }
.d-skills svg.i { width: 26px; height: 26px; color: var(--green); }
.d-skills .d-note { justify-self: stretch; text-align: left; }
.d-demo { display: block; width: min(300px, 100%); aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 16px; box-shadow: 0 26px 70px #0009; }

/* The tea-style steps become a path being walked */
.stage-on .pic-steps, .pic-steps { position: relative; gap: 0; }
.pic-steps li { position: relative; padding: 14px 0 14px 52px; border: 0; border-radius: 0; background: none; font-size: 20px; font-weight: 500; }
.pic-steps li::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.pic-steps li:first-child::before { top: 50%; } .pic-steps li:last-child::before { bottom: 50%; }
.pic-steps i { position: absolute; left: 3px; top: 50%; translate: 0 -50%; background: var(--card-raised); border: 2px solid var(--line-2); color: var(--ink); z-index: 1; }
.pic-steps li.now { background: none; color: var(--yellow); }
.pic-steps li.now i, .pic-steps li:not(.waiting) i { border-color: var(--yellow); }
.pic-steps li.now i { background: var(--yellow); color: #0b0c0f; }
@media (max-width: 1000px) {
  .stage-on .scene { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .stage-on .scene-visual { min-height: 0; }
  .d-case, .d-pair { grid-template-columns: 1fr; } .d-case .d-arrow, .d-pair .d-arrow { display: none; }
  .d-code code, .d-listing code, .d-listing.big code { font-size: 16px; }
  .d-shelf { gap: 18px; } .d-box { width: 130px; } .d-crate { width: 118px; }
  .d-row, .d-heads { grid-template-columns: 1fr 34px .8fr; } .d-row .d-arrow { width: 26px; }
  .d-screen { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { [data-on], [data-step] { transition: none; } .d-cells div, .d-dots i { animation: none !important; } }
.d-value { top: 66px; }
.pic-steps li { font-size: 22px; padding-top: 18px; padding-bottom: 18px; }

/* Missions: quizzes played on the stage */
.mission { position: relative; min-height: 100vh; max-width: 1320px; margin: 0 auto; padding: 16px 28px 28px; animation: scene-in .6s cubic-bezier(.2, .7, .3, 1) both; }
.mission-top { display: grid; gap: 12px; }
.route { display: flex; gap: 5px; }
.route i { flex: 1; height: 3px; border-radius: 3px; background: var(--line-2); transition: background .6s; }
.route i.on { background: var(--yellow); } .route i.now { background: var(--accent); }
.mission > #orb { position: absolute; left: 50%; top: 62px; width: 84px; height: 84px; transform: translateX(-50%); pointer-events: none; }
.mission-grid { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: 22px 44px; align-items: start; margin-top: 96px; }
.mission-brief h1 { margin: 8px 0 12px; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.mission-ask p { margin: 0 0 12px; color: var(--ink); font-size: 19px; line-height: 1.5; }
.mission-help { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
#zoya-says { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 4px 16px 16px 16px; background: #0d0f1dee; font-size: 16px; line-height: 1.5; animation: pop-in .4s cubic-bezier(.2, 1.1, .4, 1) both; }
#zoya-says[hidden] { display: none; }
#zoya-says small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.mission-editor { border: 1px solid var(--line-2); border-radius: 14px; background: #0d0f1dd9; overflow: hidden; }
.mission-editor .CodeMirror { height: 196px; background: transparent; font-size: 17px; }
.mission-editor .CodeMirror-gutters { background: transparent; }
.mission-run { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--line); }
.line-wrong { background: #ff786926; }
.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.screen-box { min-width: 0; }
.screen-box .label { display: block; margin-bottom: 8px; }
.lines { min-height: 92px; max-height: 190px; overflow: auto; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: #000; box-shadow: inset 0 0 28px #ffd21f10; font: 600 17px/1.5 var(--mono); transition: border-color .5s, box-shadow .5s; }
.lines p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#target .lines p { color: var(--yellow); }
#your-lines p { animation: pop-in .26s ease both; }
#your-lines p.hit { color: var(--green); } #your-lines p.miss { color: var(--rose); }
#your-lines p.hit::after { content: " ✓"; }
#yours.wobble .lines { animation: wobble .4s ease; }
@keyframes wobble { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.won .lines { border-color: var(--green); box-shadow: inset 0 0 34px #9dd69c26, 0 0 30px #9dd69c1f; }
.mission-ship { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 16px; }
.mission-ship .label { grid-column: 2; align-self: end; }
.mission-ship #ship { grid-column: 1; grid-row: 1 / span 2; width: 74px; }
.mission-ship b { grid-column: 2; align-self: start; font-size: 16px; }
.ship { display: block; width: 100%; height: auto; overflow: visible; }
.ship path { fill: transparent; stroke: var(--line-2); stroke-width: 1.5; stroke-linejoin: round; transition: fill .5s, stroke .5s; }
.ship path.got { fill: var(--yellow); stroke: #ff5a1f; }
.ship path:nth-child(n + 8).got { fill: #ff5a1f; stroke: #ffd21f; }
.ship path.fresh { animation: part-in .8s cubic-bezier(.2, 1.4, .4, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes part-in { 0% { opacity: 0; transform: scale(2.2); } 60% { filter: drop-shadow(0 0 8px #ffd21f); } 100% { opacity: 1; } }
.ship-card { display: grid; grid-template-columns: 1fr 84px; gap: 14px; align-items: center; }
.ship-card h3 { margin: 0 0 6px; } .ship-card p { margin: 0; color: var(--muted); font-size: 14px; }
.mission-next { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 18px; animation: pop-in .5s ease both; }
.mission-next[hidden] { display: none; }
.rewards { display: flex; gap: 8px; flex-wrap: wrap; }
.rewards span { padding: 6px 12px; border: 1px solid var(--yellow); border-radius: 99px; color: var(--yellow); font: 600 13px var(--mono); }
.stage-on .lab { position: relative; min-height: 100vh; }
.stage-on .lab .card { background: #0d0f1dcc; border-color: var(--line-2); }
.stage-on .lab .CodeMirror { background: transparent; }
.stage-on .lab .CodeMirror-gutters { background: transparent; }
@media (max-width: 1000px) {
  .mission { padding: 10px 16px 20px; }
  .mission-grid { grid-template-columns: minmax(0, 1fr); margin-top: 86px; }
  .mission-ship { grid-column: auto; grid-row: auto; }
  .screens { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ship path.fresh, #your-lines p, #yours.wobble .lines { animation: none; } }

.try-note { margin: 10px 0 0; color: var(--yellow); font-weight: 600; }
.btn[disabled].ready { animation: none; }
#next[disabled] { opacity: .62; cursor: default; }
.d-tiles { gap: 34px 28px; }

/* Landing page */
#landing { position: fixed; z-index: 40; inset: 0; overflow-y: auto; scroll-behavior: smooth; color: #fff1d6; --ink: #fff1d6; --ink-2: #e4dccb; --muted: #b3ada0; --line: #2b2d3a; --line-2: #3d3e4c; --yellow: #ffd21f; --yellow-soft: #2e2810; --cta: #fff1d6; --cta-ink: #0b0c0f; --cta-hover: #fff; --card: #131417; --card-raised: #1b1c20; --green: #9dd69c; --rose: #ff7869; --rose-soft: #331b1a; --accent: #ff5a1f; --accent-soft: #3a1c10; --faint: #8b877e; --sky: #8ca6ff; }
.on-landing .app-sidebar, .on-landing .topbar, .on-landing #view { display: none; }
#landing section, .l-nav, .l-foot { max-width: 1160px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
#landing a { color: inherit; }
.l-nav { display: flex; justify-content: space-between; align-items: center; height: 84px; }
.l-nav nav { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 15px; }
.l-nav nav a { text-decoration: none; color: var(--ink-2); }
.l-hero { min-height: calc(100vh - 110px); display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: center; padding-bottom: 50px; }
.l-hero h1 { margin: 12px 0 18px; font-size: clamp(46px, 7vw, 84px); line-height: .98; font-weight: 800; letter-spacing: -.045em; }
.l-hero h1 i { font-style: normal; color: var(--accent); }
.l-hero p { max-width: 54ch; margin: 0 0 26px; color: var(--ink-2); font-size: 20px; }
.l-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; color: var(--muted); }
.l-listen { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 0 18px 0 0; text-align: left; }
.l-listen canvas { width: 66px; height: 66px; }
.l-listen b { display: block; }
.l-listen small { color: var(--muted); }
.l-game { width: 100%; }
.l-try, .l-how, .l-paths { padding-top: 90px; padding-bottom: 20px; }
.l-head { max-width: 640px; margin-bottom: 34px; }
.l-head h2, .l-final h2 { margin: 10px 0; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -.035em; }
.l-head p { margin: 0; color: var(--ink-2); font-size: 18px; }
.l-try-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.l-try-box .CodeMirror { height: 120px; background: transparent; color: var(--ink); font-size: 18px; }
.l-try-box .CodeMirror-gutters { background: transparent; border-color: var(--line); }
.l-try-box .lines { min-height: 120px; }
.l-hit { color: var(--green); } .l-gold { color: var(--yellow); } .l-bad { color: var(--rose); font-family: var(--sans); font-weight: 500; } .l-wait { color: var(--muted); }
.l-nudge { margin-top: 10px !important; font-family: var(--sans); font-size: 15px; }
.l-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.l-pic { height: 230px; display: grid; align-content: center; margin-bottom: 18px; overflow: hidden; }
.l-pic .d-box { width: 112px; } .l-pic .d-crate { width: 100px; } .l-pic .d-shelf { gap: 14px; }
.l-pic .screens { grid-template-columns: 1fr; gap: 8px; } .l-pic .lines { min-height: 0; padding: 6px 12px; font-size: 14px; }
.l-ship { justify-items: center; } .l-ship .ship { width: 130px; }
.l-steps h3, .l-path-grid h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.l-steps p, .l-path-grid p { margin: 0; color: var(--ink-2); }
.l-path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.l-path-grid article { padding: 26px; border: 1px solid var(--line-2); border-radius: 16px; background: #0d0f1dcc; }
.l-tag { display: inline-block; margin-bottom: 14px; color: var(--yellow); font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.l-final { display: grid; justify-items: center; gap: 22px; padding-top: 130px; padding-bottom: 100px; text-align: center; }
.l-final h2 { max-width: 16em; }
.l-final small { color: var(--muted); }
.l-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 24px; padding-bottom: 28px; border-top: 1px solid var(--line); }
.l-foot .wordmark { font-size: 22px; }
.l-foot nav { display: flex; flex-wrap: wrap; gap: 22px; color: var(--ink-2); font-size: 15px; }
.l-foot small { color: var(--muted); }
@media (max-width: 900px) {
  .l-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; min-height: 0; padding-top: 22px; }
  .l-game { max-width: 280px; margin: 0 auto; }
  #landing section, .l-nav, .l-foot { padding-left: 16px; padding-right: 16px; }
  .l-nav nav a { display: none; }
  .l-try-box, .l-steps, .l-path-grid { grid-template-columns: minmax(0, 1fr); }
  .l-try, .l-how, .l-paths { padding-top: 60px; }
}