/* Learn URITP. Plain and focused: the menu down the left side, one column on the home page, and
   in a lesson two panes: the robot's world, big, on the left, and the step with its editor beside it.
   A slowly turning ASCII globe sits behind it all. Light by default,
   dark when the system asks. The robot's world and the code editor are always dark, so programs
   read the same everywhere.
   Colour means something: blue moves you on, green is "done", ElaraCheck's colours are its kinds
   of mistake (pink safety, amber units, sky writing). */
:root {
  --page: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #f1f0ec;
  --text: #1d1d1b;
  --muted: #64635e;
  --faint: #9a9993;
  --line: rgba(20, 20, 18, .09);
  --line-2: rgba(20, 20, 18, .17);
  --blue: #2563eb;
  --blue-hover: #1d4fd7;
  --blue-soft: rgba(37, 99, 235, .1);
  --go: #16a34a;
  --go-soft: rgba(22, 163, 74, .1);
  --stop: #e11d48;
  --stop-soft: rgba(225, 29, 72, .08);
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, .1);
  --code-bg: #17171a;
  --code-text: #ececf1;
  --code-line: rgba(255, 255, 255, .08);
  --radius: 14px;
  --scripts: "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Malayalam", "Noto Sans Oriya";
  --sans: "Inter", "Hind", var(--scripts), system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #141413;
    --surface: #1d1d1b;
    --surface-2: #262624;
    --text: #ededea;
    --muted: #a3a29c;
    --faint: #75746f;
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .16);
    --blue: #4f86f7;
    --blue-hover: #6a98f8;
    --blue-soft: rgba(79, 134, 247, .16);
    --go: #34c76a;
    --go-soft: rgba(52, 199, 106, .14);
    --stop: #fb5a7a;
    --stop-soft: rgba(251, 90, 122, .12);
    --warn: #f0a23a;
    --warn-soft: rgba(240, 162, 58, .14);
    --code-bg: #101012;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body { margin: 0; background: var(--page); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-weight: 650; margin: 0; line-height: 1.2; letter-spacing: -.015em; }
code { font: 500 .88em/1 var(--mono); background: var(--surface-2); border: 1px solid var(--line); padding: .14em .38em; border-radius: 5px; white-space: nowrap; }
.small { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
::selection { background: var(--blue-soft); }

/* ---- the ASCII globe, behind everything (js/globe.js) --------------------------------------- */
.globe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  /* fade it out over the middle of the page, so it never sits behind words */
  -webkit-mask-image: linear-gradient(to right, transparent 0 62%, #000 92%); mask-image: linear-gradient(to right, transparent 0 62%, #000 92%); }
@media (max-width: 760px) { .globe { opacity: .45; -webkit-mask-image: linear-gradient(to bottom, #000 0 8%, transparent 22%); mask-image: linear-gradient(to bottom, #000 0 8%, transparent 22%); } }
main { position: relative; z-index: 1; }

/* ---- the menu, down the left side ----------------------------------------------------------
   Wide screens: the name, the sections with their labels, your course, and your progress.
   Middle widths: a narrow rail of icons. Phones: a strip at the top and tabs along the bottom. */
:root { --side: 248px; --spring: cubic-bezier(.34, 1.36, .5, 1); }
.side { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--side); display: flex; flex-direction: column; gap: 18px; padding: 20px 14px 14px;
  background: color-mix(in srgb, var(--surface) 84%, transparent); border-right: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px; font-weight: 650; font-size: 16.5px; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--blue); box-shadow: inset -6px -6px 0 rgba(0, 0, 0, .18); }
.side-nav { position: relative; display: grid; gap: 2px; }
.nav-btn { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  color: var(--muted); font-size: 15px; font-weight: 600; white-space: nowrap; text-align: left; transition: color .25s, background .15s; }
.nav-btn svg { width: 21px; height: 21px; flex: none; }
.nav-btn:hover { color: var(--text); background: var(--surface-2); }
.nav-btn.on, .nav-btn.on:hover { color: var(--page); background: none; }
.rail-glider { position: absolute; left: 0; right: 0; top: 0; height: 42px; border-radius: 10px; background: var(--text); pointer-events: none; transition: transform .45s var(--spring), opacity .2s; }
body.in-lesson .rail-glider { opacity: .12; }
body.in-lesson .nav-btn.on { color: var(--text); }

.side-course { flex: 1; min-height: 0; overflow-y: auto; padding-top: 14px; border-top: 1px solid var(--line); scrollbar-width: thin; }
.side-k { margin: 0 10px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.side-units { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.su { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 7px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  text-align: left; color: var(--muted); font-size: 13.5px; font-weight: 500; transition: background .12s, color .12s; }
.su:hover { background: var(--surface-2); color: var(--text); }
.su.here { background: var(--surface-2); color: var(--text); font-weight: 600; }
.su .su-n { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.su .su-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su .su-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.su.here .su-bar { background: var(--line-2); }
.su .su-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--go); border-radius: inherit; transition: width .5s var(--ease); }

.side-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 6px 0; border-top: 1px solid var(--line); }
.engine-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.engine-dot.ready { background: var(--go); }
.engine-dot.fail { background: var(--stop); }
.pill { font-size: 13px; color: var(--muted); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.pill b { color: var(--text); font-weight: 600; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: none; cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }
.icon-btn svg { width: 15px; height: 15px; }
.lang-select { cursor: pointer; max-width: 120px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: var(--surface); font-size: 13.5px; }

main { margin-left: var(--side); max-width: 1560px; padding: 36px 44px 72px; }
@media (min-width: 1200px) { .pane { margin: 0; } }

/* middle widths: a narrow rail of icons; a label shows beside the icon you point at */
@media (min-width: 761px) and (max-width: 1199px) {
  :root { --side: 76px; }
  .side { padding: 18px 10px 12px; align-items: center; }
  .brand { padding: 4px; }
  .brand-name, .side-course, .pill { display: none; }
  .side-nav { width: 100%; }
  .nav-btn { justify-content: center; padding: 0; height: 46px; }
  .nav-btn span { position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; padding: 5px 10px; border-radius: 8px; font-size: 13.5px;
    color: var(--page); background: var(--text); opacity: 0; pointer-events: none; transition: opacity .15s; }
  .nav-btn:hover span, .nav-btn:focus-visible span { opacity: 1; }
  .rail-glider { height: 46px; }
  .side-foot { flex-direction: column; margin-top: auto; padding: 12px 0 0; width: 100%; }
  .lang-select { max-width: 56px; padding: 4px; font-size: 12.5px; }
  main { padding: 30px 28px 64px; }
}

/* in a lesson the menu folds to the narrow rail on screens up to 1499px wide, so the robot's
   world gets the room */
@media (min-width: 1200px) and (max-width: 1499px) {
  body.in-lesson { --side: 76px; }
  body.in-lesson .side { padding: 18px 10px 12px; align-items: center; }
  body.in-lesson .brand { padding: 4px; }
  body.in-lesson .brand-name, body.in-lesson .side-course, body.in-lesson .pill { display: none; }
  body.in-lesson .side-nav { width: 100%; }
  body.in-lesson .nav-btn { justify-content: center; padding: 0; height: 46px; }
  body.in-lesson .nav-btn span { position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; padding: 5px 10px; border-radius: 8px; font-size: 13.5px;
    color: var(--page); background: var(--text); opacity: 0; pointer-events: none; transition: opacity .15s; }
  body.in-lesson .nav-btn:hover span, body.in-lesson .nav-btn:focus-visible span { opacity: 1; }
  body.in-lesson .rail-glider { height: 46px; }
  body.in-lesson .side-foot { flex-direction: column; margin-top: auto; padding: 12px 0 0; width: 100%; }
  body.in-lesson .lang-select { max-width: 56px; padding: 4px; font-size: 12.5px; }
  body.in-lesson main { padding: 30px 28px 64px; }
}

/* phones: the name and your points along the top, the sections as tabs along the bottom */
@media (max-width: 760px) {
  :root { --side: 0px; }
  .side { position: sticky; inset: auto; top: 0; width: auto; height: 52px; flex-direction: row; align-items: center; gap: 10px; padding: 0 16px;
    border-right: 0; border-bottom: 1px solid var(--line); background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .brand { padding: 0; font-size: 16px; }
  .side-course { display: none; }
  .side-foot { margin-left: auto; padding: 0; border: 0; flex-wrap: nowrap; }
  .pill#streakPill, .icon-btn, .engine-dot { display: none; }
  .lang-select { max-width: 92px; }
  .side-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; gap: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .nav-btn { flex: 1; flex-direction: column; justify-content: center; gap: 2px; height: 52px; padding: 0; border-radius: 12px; font-size: 11.5px; font-weight: 500; }
  .nav-btn:hover { background: none; }
  .nav-btn.on, .nav-btn.on:hover, body.in-lesson .nav-btn.on { color: var(--blue); }
  .rail-glider { display: none; }
  body { padding-bottom: 72px; }
  .toast { bottom: 84px; }
  main { margin-left: 0; padding: 22px 16px 44px; }
}

/* ---- buttons ----------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 15px; line-height: 1;
  padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn-go { background: var(--blue); color: #fff; }
.btn-go:hover { background: var(--blue-hover); }
.btn-go:disabled { background: var(--surface-2); color: var(--faint); cursor: not-allowed; }
.btn-line { background: var(--surface); border-color: var(--line-2); color: var(--text); }
.btn-line:hover { border-color: var(--faint); }
.btn-sm { padding: 8px 12px; font-size: 14px; }
.linkish { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; font-size: 14.5px; }
.linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }

/* ---- home: one column -------------------------------------------------------------------- */
.pane { max-width: 820px; margin: 0 auto; animation: rise .3s var(--ease); }
.pane[data-pane="sandbox"] { max-width: 1180px; }
.pane[data-pane="talk"] { max-width: 1180px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: clamp(28px, 4vw, 36px); margin-bottom: 6px; }
.sub { color: var(--muted); margin: 0; max-width: 62ch; font-size: 16.5px; }
.sec-title { font-size: 18px; margin: 28px 0 12px; }
.kicker { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--blue); }

.next-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; padding: 20px 22px 18px; margin-bottom: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.next-card h2 { font-size: 21px; }
.next-card .meta { margin: 4px 0 0; color: var(--muted); font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; }
.next-card .meta span:empty { display: none; }
.next-card .bar { grid-column: 1 / -1; }
.bar, .step-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar i, .step-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--go); transition: width .5s var(--ease); }
@media (max-width: 560px) { .next-card { grid-template-columns: minmax(0, 1fr); } .next-card .btn { width: 100%; } }

/* the hero: what URITP is, and the robot acting out the demos beside it */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: center; margin-bottom: 30px; }
.hero h1 { font-size: clamp(32px, 4.6vw, 46px); margin-bottom: 10px; letter-spacing: -.025em; }
.hero .sub { font-size: 17px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero-cta .btn { min-height: 46px; padding-inline: 20px; font-size: 16px; }
.hero-stage { margin: 0; }
.hero-stage .cell { box-shadow: 0 24px 60px -32px rgba(0, 0, 0, .5); }
.hero-cap { display: grid; gap: 6px; margin-top: 10px; min-height: 104px; font-size: 14.5px; }
.hero-said { font-weight: 600; }
.hero-code { display: block; white-space: pre; overflow-x: auto; padding: 8px 12px; border: 0; border-radius: 10px; font-size: 12.5px; line-height: 1.55;
  background: var(--code-bg); color: var(--code-text); min-height: 2.2em; }
.hero-code:empty { visibility: hidden; }
.hero-verdict { font-weight: 600; font-size: 14px; }
.hero-verdict[data-state="ok"] { color: var(--go); }
.hero-verdict[data-state="blocked"] { color: var(--stop); }
@media (max-width: 1100px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 20px; } .hero-stage { max-width: 620px; } }
@media (max-width: 560px) { .hero-cta .btn { flex: 1 1 100%; } }

/* class codes: joining a teacher's class (api/classes.py) */
.class-join { margin-top: 18px; max-width: 460px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.class-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
@media (max-width: 420px) { .class-fields { grid-template-columns: 1fr; } }
.class-fields label, .teach label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.class-fields input, .teach input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }
#classCode { text-transform: uppercase; letter-spacing: .14em; font-family: var(--mono); }
.class-join .small { margin: 10px 0 0; }
.class-err { margin: 8px 0 0; color: var(--stop); font-size: 14px; font-weight: 500; }
.class-err:empty { display: none; }
.class-line { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
.class-line:empty { display: none; }
.class-line .linkish { padding: 10px 0; }
.teach { max-width: 640px; }
.teach-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.teach-code b { font: 700 22px var(--mono); letter-spacing: .14em; }
.teach-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.teach-table-wrap { overflow-x: auto; margin: 6px 0 12px; }
.teach-table { width: 100%; font-size: 14px; }

.lang-note { margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; background: var(--blue-soft); font-size: 14.5px; }
.units { display: grid; gap: 22px; }
.unit-fold > summary { list-style: none; cursor: pointer; border-radius: 10px; }
.unit-fold > summary::-webkit-details-marker { display: none; }
.unit.locked .unit-fold > summary { padding: 12px 14px; border: 1px dashed var(--line-2); }
.unit.locked .unit-fold > summary:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.unit.locked .unit-fold[open] > summary { border-style: solid; }
.unit.locked h2 { color: var(--muted); }
.unit.locked header { margin-bottom: 0; }
.unit.locked .unit-bar { display: none; }
.unit.locked .unit-fold[open] > .lesson-list { margin-top: 8px; }
.unit header { margin-bottom: 8px; }
.unit-k { display: flex; justify-content: space-between; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.unit h2 { font-size: 19px; }
.unit-blurb { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.unit-bar { height: 3px; margin-top: 10px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.unit-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--go); transition: width .5s var(--ease); }
.lesson-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lesson-list li + li { border-top: 1px solid var(--line); }
.lrow { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; text-align: left; cursor: pointer; padding: 11px 16px; border: 0; background: none;
  transition: background .12s; }
.lrow:hover:not(:disabled) { background: var(--surface-2); }
.lrow:disabled { cursor: not-allowed; color: var(--faint); }
.lrow .n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lrow.done .n { background: var(--go); border-color: var(--go); color: #fff; }
.lrow .title { font-weight: 500; font-size: 15.5px; }
.lrow .mins { color: var(--faint); font-size: 13px; }
.cert-band { margin: -12px 0 28px; padding: 18px 22px; border: 1px solid var(--go); background: var(--go-soft); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cert-band h3 { font-size: 18px; }
.cert-band p { margin: 2px 0 0; color: var(--muted); }

/* talk */
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.command { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.command-side { flex: 1; min-width: 0; }
.mic-text { margin: 0 0 6px; font-weight: 600; font-size: 16px; }
.mic { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: grid; place-items: center; background: var(--blue); transition: transform .15s; }
.mic:hover { transform: scale(1.04); }
.mic svg { width: 24px; height: 24px; }
.mic.listening { background: var(--stop); animation: pulse 1.3s var(--ease) infinite; }
.mic.pulse { animation: callout 0.8s var(--ease) 3; }
@keyframes callout { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 55%, transparent); } 100% { box-shadow: 0 0 0 20px transparent; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stop) 50%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.type-row { display: flex; gap: 8px; }
.type-row input { flex: 1; min-width: 0; background: var(--page); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; }
.type-row input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.type-row input::placeholder { color: var(--faint); }
.lang-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.lang-chip { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; cursor: pointer; display: grid; gap: 1px; max-width: 100%; transition: border-color .15s; }
.lang-chip:hover { border-color: var(--line-2); }
.lang-chip b { font-size: 11.5px; font-weight: 600; color: var(--blue); }
.lang-chip span { font-size: 13.5px; line-height: 1.35; }
.hype { display: grid; gap: 8px; width: 100%; padding: 14px 16px; border-radius: var(--radius); text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); }
.hype:hover { border-color: var(--line-2); }
.hype-said { display: flex; gap: 10px; align-items: baseline; }
.hype-lang { flex: none; font-size: 11.5px; font-weight: 600; color: var(--blue); background: var(--blue-soft); padding: 3px 8px; border-radius: 99px; }
.hype-text { font-weight: 600; font-size: 15px; }
.hype-code { display: block; height: calc(6.6em + 20px); overflow: hidden; font: 500 12.5px/1.65 var(--mono); white-space: pre; background: var(--code-bg); border: 0; padding: 10px 12px; border-radius: 8px; color: var(--code-text); }
.hero-heard { margin: 12px 0 8px; font-size: 14.5px; color: var(--muted); }
.hero-heard b { color: var(--text); }
.hero-code { font-size: 13px; max-height: 140px; overflow: auto; }
.hero-verdict { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: 14.5px; }
.hero-verdict .chk-light { margin-top: 0; }
.hero-verdict[data-state="ok"] .chk-light { background: var(--go); }
.hero-verdict[data-state="blocked"] .chk-light { background: var(--stop); }
.hero-verdict[data-state="warn"] .chk-light { background: var(--warn); }
.hero-verdict[data-state="checking"] .chk-light { background: var(--blue); }
.hero-clip { margin-top: 10px; }

/* sandbox */
.worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.world-card { display: grid; gap: 2px; text-align: left; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, transform .15s; }
.world-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.world-card b { font-size: 17px; margin-top: 10px; }
.world-card span:not(.wc-art) { color: var(--muted); font-size: 14px; }
.wc-art { height: 150px; border-radius: 10px; display: block; }
.wc-kitchen { background: radial-gradient(40% 50% at 30% 60%, #ef4444 0 9%, transparent 10%), radial-gradient(30% 40% at 65% 45%, #3b82f6 0 12%, transparent 13%), linear-gradient(160deg, #e9c99b, #b5874f); }
.wc-town { background: radial-gradient(30% 30% at 40% 50%, #60a5fa 0 20%, transparent 21%), radial-gradient(40% 40% at 70% 40%, #7dd3fc 0 30%, transparent 31%), linear-gradient(160deg, #9fdfb8, #5fd394); }
.wc-warehouse { background: linear-gradient(90deg, transparent 18%, #c2410c 18% 30%, transparent 30% 44%, #c2410c 44% 56%, transparent 56% 70%, #c2410c 70% 82%, transparent 82%) 0 38% / 100% 26% no-repeat,
  radial-gradient(14% 18% at 22% 78%, #facc15 0 40%, transparent 42%), repeating-linear-gradient(90deg, #9ca3af 0 2px, transparent 2px 40px), linear-gradient(160deg, #e5e7eb, #a8adb6); }
.wc-farm { background: radial-gradient(12% 16% at 74% 30%, #38bdf8 0 70%, transparent 72%), radial-gradient(9% 12% at 30% 34%, #f8fafc 0 30%, #334155 32% 45%, transparent 47%),
  repeating-linear-gradient(170deg, #65a30d 0 14px, #84cc16 14px 28px); }
.wc-factory { background: radial-gradient(8% 12% at 52% 52%, #fff7ed 0 20%, #fb923c 30%, transparent 60%), linear-gradient(90deg, transparent 30%, #94a3b8 30% 70%, transparent 70%) 0 56% / 100% 10% no-repeat,
  repeating-linear-gradient(135deg, #facc15 0 10px, #1f2937 10px 20px) 0 100% / 100% 12% no-repeat, linear-gradient(160deg, #475569, #1e293b); }

/* rewards */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.badge { font: inherit; text-align: left; color: var(--faint); background: none; border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.badge b { font-size: 14.5px; font-weight: 600; }
.badge span { font-size: 12.5px; }
.badge.got { color: var(--text); border: 1px solid var(--line); background: var(--surface); }
.badge.got b::before { content: "★ "; color: var(--warn); }
.badge.got span { color: var(--muted); }
button.badge { cursor: pointer; }
button.badge:hover { border-color: var(--line-2); }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.skin { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.skin:hover:not(:disabled) { border-color: var(--line-2); }
.skin:disabled { cursor: not-allowed; opacity: .5; }
.skin.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.skin .swatch { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, var(--a) 0 34%, var(--b) 34% 67%, var(--c) 67%); }
.skin b { font-size: 14.5px; font-weight: 600; }
.skin .how { font-size: 12.5px; color: var(--muted); }

/* ---- lesson: the robot's world, big, on the left; the step, ElaraCheck and the editor beside it */
#lesson { animation: rise .3s var(--ease); }
.lesson-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lesson-title h1 { font-size: clamp(20px, 2.4vw, 26px); }
.lesson-title .kicker { margin-bottom: 2px; }
.lesson-progress { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.sections { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.sections li { display: flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 8px; color: var(--faint); font-size: 13.5px; font-weight: 600; }
.sections li.on { color: var(--text); background: var(--surface-2); }
.sections li.done { color: var(--go); }
.sections .count { color: var(--faint); font-weight: 500; font-size: 12.5px; }
.step-bar { flex: 1 1 200px; }

.lesson-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(370px, 1fr); gap: 20px; align-items: start; }
.stage-col { position: sticky; top: 20px; }
.stage-col .cell { aspect-ratio: 4 / 3; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); min-height: 360px; margin: 0 auto; }
.work-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.work-col > *, .stage-col { min-width: 0; }
#lesson[data-bench="off"] .bench { display: none; }
.world-tag { position: absolute; left: 12px; top: 12px; margin: 0; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.world-tag:empty { display: none; }
@media (max-width: 1100px) {
  .lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .stage-col { position: relative; top: 0; }
  .stage-col .cell { min-height: 0; aspect-ratio: 16 / 10; }
}

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; animation: rise .25s var(--ease); }
@media (max-width: 560px) { .card { padding: 20px 18px; } }
.step-k { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--blue); }
.card h3 { font-size: 22px; margin: 2px 0 12px; }
.card p { margin: 0 0 12px; }
.card ul, .card ol { margin: 0 0 12px; padding-left: 22px; }
.card li { margin: 4px 0; }
.goal { font-weight: 600; font-size: 17.5px; }
.status { color: var(--muted); }
.snip { margin: 0 0 12px; padding: 14px 16px; border-radius: 10px; background: var(--code-bg); color: var(--code-text); font: 500 13.5px/1.65 var(--mono); overflow-x: auto; white-space: pre; }
.code-example { font-size: 14px; }
.copy-lines { border-left: 3px solid var(--blue); }
.notes { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 15px; }
.notes td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.notes td:first-child { width: 1%; white-space: nowrap; }
.tbl { border-collapse: collapse; margin: 0 0 12px; font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 7px 16px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 600; }
.next-row { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.back-step { margin-top: 12px; }
.hint { padding: 12px 14px; border-left: 3px solid var(--warn); background: var(--warn-soft); border-radius: 0 10px 10px 0; font-size: 15px; white-space: pre-wrap; }
.verdict { font-weight: 600; margin: 8px 0 0; }
.verdict.good { color: var(--go); }
.verdict.bad { color: var(--stop); }

.q { font-size: 17.5px; font-weight: 600; margin-bottom: 4px; }
.q p { margin-bottom: 10px; }
.opts { display: grid; gap: 8px; margin-bottom: 12px; }
.opt { text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-size: 15.5px; line-height: 1.4; transition: border-color .15s, background .15s; }
.opt:hover:not(:disabled) { border-color: var(--blue); }
.opt:disabled { cursor: default; }
.opt.right { border-color: var(--go); background: var(--go-soft); }
.opt.wrong { border-color: var(--stop); background: var(--stop-soft); }
.explain { padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.explain.good { border: 1px solid var(--go); background: var(--go-soft); }
.explain.bad { border: 1px solid var(--stop); background: var(--stop-soft); }

.order-answer, .order-pool { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 10px; margin-bottom: 8px; min-height: 54px; }
.order-answer { background: var(--surface-2); border: 1px dashed var(--line-2); }
.order-answer.empty::before { content: "Your answer goes here"; color: var(--faint); font-size: 14.5px; }
.order-pool { border: 1px solid var(--line); }
.line-chip { font: 500 13.5px/1.4 var(--mono); white-space: pre; text-align: left; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; max-width: 100%; overflow-x: auto; }
.line-chip.plain { font: 500 15px/1.4 var(--sans); }
.line-chip:hover { border-color: var(--blue); }
.line-chip.in { border-color: var(--blue); background: var(--blue-soft); }
.fill-code { font-size: 14.5px; line-height: 2.2; }
.fill-code select { font: 600 13.5px/1 var(--mono); color: #8ab4ff; background: #26262c; border: 1px solid #4f86f7; border-radius: 6px; padding: 3px 6px; }
.fill-code select.wrong { border-color: var(--stop); color: var(--stop); }
.card-end h3 { font-size: 26px; }
.budget { font-weight: 600; }
.budget b { color: var(--go); font-size: 17px; }
.budget.over b { color: var(--stop); }

/* ---- the workbench: robot, ElaraCheck, voice, editor -------------------------------------- */
.bench { display: grid; gap: 10px; }
.cell { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: #050505; transition: box-shadow .3s; }
.stage-col .cell { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .45); }
.cell canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.banner { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: 86%; text-align: center; padding: 7px 14px; border-radius: 99px; font-weight: 600; font-size: 14px; color: #fff; background: rgba(225, 29, 72, .92); }
.banner.warn { background: rgba(217, 119, 6, .94); }

.checker { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); transition: border-color .2s; }
.chk-light { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; flex: none; background: var(--faint); transition: background .2s; }
.checker[data-state="ok"] { border-color: var(--go); }
.checker[data-state="ok"] .chk-light { background: var(--go); }
.checker[data-state="blocked"] { border-color: var(--stop); }
.checker[data-state="blocked"] .chk-light { background: var(--stop); }
.checker[data-state="warn"] { border-color: var(--warn); }
.checker[data-state="warn"] .chk-light { background: var(--warn); }
.checker[data-state="checking"] .chk-light { background: var(--blue); }
.rk-body { min-width: 0; flex: 1; }
.rk-name { margin: 0; color: var(--muted); font-size: 12.5px; }
.rk-name b { color: var(--text); margin-right: 4px; }
.rk-text { margin: 2px 0 0; font-weight: 600; font-size: 15px; line-height: 1.4; }
.rk-errors { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.rk-errors li { border: 1px solid color-mix(in srgb, var(--stop) 45%, transparent); background: var(--stop-soft); border-radius: 10px; padding: 8px 11px; cursor: pointer; font-size: 14.5px; }
.rk-errors .ln { font-size: 11.5px; font-weight: 600; background: var(--stop); color: #fff; padding: 2px 7px; border-radius: 99px; margin-right: 6px; }
.rk-errors .ecode { font: 600 12px/1 var(--mono); color: var(--stop); margin-right: 4px; }
.rk-errors .tech { display: block; margin-top: 4px; font: 500 11.5px/1.5 var(--mono); color: var(--muted); word-break: break-word; }

.voice { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.mic-row { display: flex; align-items: center; gap: 14px; }
.lang-pick { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.lang-pick select { background: var(--page); border: 1px solid var(--line-2); border-radius: 8px; padding: 3px 8px; }
.heard { margin: 0; min-height: 1.4em; color: var(--muted); }
.heard b { color: var(--text); }
.src-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13.5px; }
.src-badge { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); }
.skipped { color: var(--warn); }
.skipped:empty { display: none; }
.try { display: grid; gap: 8px; justify-items: start; }
.try-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.example { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; color: var(--muted); font-size: 14px; }
.example:hover { color: var(--text); border-color: var(--line-2); }

.editor { display: flex; background: var(--code-bg); border-radius: var(--radius); overflow: hidden; border: 1px solid transparent; }
.editor:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.gutter { margin: 0; padding: 14px 8px 14px 12px; text-align: right; color: #55555c; font: 500 13.5px/1.65 var(--mono); user-select: none; min-width: 42px; overflow: hidden; border-right: 1px solid var(--code-line); }
.gutter .err { color: #fff; background: #e11d48; border-radius: 4px; padding: 0 3px; }
.editor textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--code-text); padding: 14px 16px; font: 500 13.5px/1.65 var(--mono); min-height: 220px; white-space: pre; overflow: auto; tab-size: 4; caret-color: #8ab4ff; }
.run-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-run { flex: 1 1 160px; font-size: 16px; padding: 13px 20px; }

/* ---- dialogs, toast ------------------------------------------------------------------------ */
.dlg { padding: 0; color: var(--text); max-width: min(580px, 92vw); border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35); }
.dlg[open] { animation: rise .25s var(--ease); }
.dlg::backdrop { background: rgba(0, 0, 0, .4); }
.cert-form { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cert-form h2 { font-size: 22px; }
.cert-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.cert-form input { background: var(--page); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; }
.cert-form canvas { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.share-preview canvas, .share-preview video { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: 10px; background: #000; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; padding: 11px 18px; border-radius: 10px; font-weight: 600; font-size: 14.5px; max-width: 90vw; text-align: center;
  color: var(--page); background: var(--text); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .4); animation: rise .25s var(--ease); }

/* ---- ElaraCheck's shield: drawn in the world by scene.js, plus this edge and label -------------- */
.cell { --shield: #ff2d6f; }
.cell[data-kind="units"], .cell[data-kind="reach"] { --shield: #ffb020; }
.cell[data-kind="writing"] { --shield: #38bdf8; }
.cell.blocked { box-shadow: inset 0 0 0 2px var(--shield), inset 0 0 36px color-mix(in srgb, var(--shield) 45%, transparent); }
.barrier { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 7px 14px; border-radius: 99px; font-weight: 600; font-size: 14px; color: #fff; background: rgba(0, 0, 0, .72);
  border: 1px solid var(--shield); white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.barrier[data-kind="units"], .barrier[data-kind="reach"] { --shield: #ffb020; }
.barrier[data-kind="writing"] { --shield: #38bdf8; }
.barrier[data-kind="safety"] { --shield: #ff2d6f; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.shake { animation: shake .45s both; }

/* ---- URITP in colour (always on a dark background) --------------------------------------- */
.tk-kw { color: #ff9f0a; font-weight: 600; }
.tk-part { color: #64d2ff; }
.tk-place { color: #bf5af2; }
.tk-num { color: #30d158; font-weight: 600; }
.tk-str { color: #ffd60a; }
.tk-cmt { color: #7c7c84; font-style: italic; }

.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--stop); }
#clipBtn.on { border-color: var(--stop); color: var(--stop); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- bigger targets for fingers ----------------------------------------------------------------
   Small controls get at least 40px everywhere, and 44px (the size a finger needs) on touch screens. */
.icon-btn { width: 40px; height: 40px; }
.lang-select, .lang-pick select { min-height: 40px; }
.btn-sm { min-height: 40px; }
.linkish { padding: 8px 0; }
.example { padding: 9px 12px; min-height: 40px; }
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .lang-select, .lang-pick select, .btn-sm, .btn, .example { min-height: 44px; }
  .linkish { padding: 12px 0; }
  .brand { min-height: 44px; }
}

/* the robot's moves, read out for screen readers (and shown nowhere) */
.live-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }