/* Educação Básica Aberta — o caderno de quem vai ser professor.
   Folha pautada com margem vermelha, letra manuscrita de escola portuguesa (Playwrite PT) nos títulos,
   texto de manual escolar (Literata), tinta de esferográfica azul, marcador amarelo para o que já dominas
   e caneta vermelha do professor para o que interessa agora. Os cartões são fichas de papel branco.
   O único momento animado: na primeira visita, o título escreve-se e o mapa de conceitos desenha-se a lápis. */
:root {
  --paper: #fbfcfa; --sheet: #ffffff; --tint: #f1f5fa; --tint2: #e4ebf4;
  --rule: #dbe5f1; --margin: #e6a19e;
  --ink: #272b33; --ink2: #555c69; --ink3: #858b97;
  --pen: #2340a0; --pen-hover: #1a3285; --pen-soft: rgba(35, 64, 160, .08);
  --red: #c4372d; --marker: #ffe55c; --marker-deep: #e3b600; --marker-soft: rgba(255, 229, 92, .5);
  --line: rgba(39, 43, 51, .1); --line2: rgba(39, 43, 51, .2);
  --hand: "Playwrite PT", "Segoe Print", "Bradley Hand", cursive;
  --body: "Literata", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --m: clamp(16px, 3vw, 32px); --max: 1240px;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.645, .045, .355, 1);
  --sheet-shadow: 0 1px 0 rgba(39, 43, 51, .06), 0 10px 24px -18px rgba(30, 45, 90, .45);
  --hand-r: 14px 5px 12px 6px / 6px 12px 5px 14px;
  /* x of the red margin line: just left of the content column */
  --mx: calc(max(var(--m), 50vw - var(--max) / 2 + var(--m)) - 20px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); scroll-padding-top: 84px; overflow-x: clip; }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.65 var(--body); font-variant-numeric: lining-nums; overflow-x: clip;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent calc(var(--mx) - 1.5px), var(--margin) calc(var(--mx) - 1.5px), var(--margin) var(--mx), transparent var(--mx)),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px);
  background-position: 0 0, 0 68px;
}
a { color: var(--pen); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--marker); color: var(--ink); }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 50; background: var(--pen); color: #fff; padding: 8px 14px; font-weight: 700; }
.skip:focus { top: 10px; }

/* ---------- type: handwriting for titles, a schoolbook serif for reading ---------- */
h1, h2, h3 { margin: 0; color: var(--ink); }
h1, h2 { font-family: var(--hand); font-weight: 400; color: var(--pen); letter-spacing: 0; }
h1 { font-size: clamp(30px, 3.9vw, 52px); line-height: 1.5; max-width: 16ch; text-wrap: balance; }
h2 { font-size: clamp(21px, 2vw, 26px); line-height: 1.55; }
h3 { font: 650 19px/1.35 var(--body); }
.lead { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.7; color: var(--ink2); max-width: 56ch; margin: 18px 0 0; }
.mut { color: var(--ink2); }
.sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink3); margin: 0 10px; vertical-align: middle; }
.textlink { color: var(--pen); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }

/* ---------- buttons: a stroke of blue pen ---------- */
.btn-fire, .btn-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; background: var(--pen); color: #fff; font: 650 16px var(--body); border: 0; border-radius: var(--hand-r); cursor: pointer; text-decoration: none; transition: transform 120ms ease, background-color 150ms ease; }
.btn-link { height: 42px; padding: 0 18px; font-size: 15px; }
.btn-fire:hover, .btn-link:hover { background: var(--pen-hover); text-decoration: none; }
.btn-fire:active, .btn-link:active, .btn:active, .lang:active, .net-btn:active, .phase-toggle:active, .area-btn:active { transform: scale(.97); }
.btn, .lang, .net-btn, .phase-toggle { transition: transform 120ms ease, background-color 150ms ease, color 150ms ease; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; height: 68px; padding: 0 var(--m); background: var(--paper); box-shadow: 0 1px 0 var(--rule); view-transition-name: topbar; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; }
.brand:hover { text-decoration: none; }
.logo { width: 32px; height: 32px; flex: none; color: var(--pen); }
.brand-name { font: 400 16px/1.4 var(--hand); color: var(--pen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 0; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { position: relative; padding: 8px 12px; color: var(--ink2); font-weight: 600; font-size: 15px; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a.on { color: var(--ink); }
.nav a.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 9px; background: var(--marker); border-radius: 2px 6px 3px 5px; z-index: -1; transform: rotate(-1deg); }
.lang { height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--ink2); font-weight: 700; font-size: 13px; cursor: pointer; border-radius: 4px; }
.lang:hover { background: var(--tint); color: var(--ink); }
.nav-cta { height: 40px; padding: 0 18px; font-size: 15px; }

main { max-width: var(--max); margin: 0 auto; padding: 0 var(--m) 40px; outline: none; }

/* ---------- home hero: the headline on the ruled page, the concept map on a sheet of squared paper ---------- */
.hero-net { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: min(78vh, 720px); padding: 40px 0 56px; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { max-width: 14ch; }
.hero-canvas { position: relative; order: 2; height: min(62vh, 560px); min-height: 360px; background: var(--sheet); border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); transform: rotate(1.1deg); overflow: hidden; }
.hero-canvas::before { content: ""; position: absolute; z-index: 1; top: -9px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: rgba(255, 229, 92, .55); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

/* the written headline (words revealed left to right as if by hand) */
.hw { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .sketching .hw { clip-path: inset(-20% 100% -30% -6%); animation: write 420ms var(--ease-io) forwards; animation-delay: calc(250ms + var(--k) * 190ms); }
  .sketching .hero-copy .lead { opacity: 0; animation: appear 700ms var(--ease-out) 2.1s forwards; }
}
@keyframes write { to { clip-path: inset(-20% -6% -30% -6%); } }
@keyframes appear { to { opacity: 1; } }

/* ---------- concept map (js/caderno.js) ---------- */
.cmap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.cmap.ambient { cursor: default; pointer-events: none; }
.cmap.panning { cursor: grabbing; }
.cm-gridline { stroke: #dfe8f4; stroke-width: 1; }
.cm-col { font: 400 15px var(--hand); fill: var(--pen); }
.cm-under { fill: none; stroke: var(--pen); stroke-width: 1.3; stroke-linecap: round; opacity: .45; }
.cm-arrow, .cm-head { fill: none; stroke: var(--ink2); stroke-width: 1.3; stroke-linecap: round; opacity: .55; transition: opacity 150ms ease, stroke 150ms ease; }
.cm-paper { fill: var(--sheet); }
.cm-wash { opacity: .3; filter: url(#cm-aguarela); }
.cm-line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cm-out2 { stroke-width: 1; opacity: .35; }
.cm-label { font: 600 13.5px var(--body); fill: var(--ink); }
.cm-mark { stroke: var(--marker); stroke-width: 13; stroke-linecap: round; opacity: .9; mix-blend-mode: multiply; }
.cm-hit { fill: transparent; }
.cm-tb { fill: none; stroke: var(--ink3); stroke-width: 1.1; stroke-linecap: round; }
.cm-t.done .cm-tb { stroke: var(--pen); }
.cm-tick { fill: none; stroke: var(--pen); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cm-node { cursor: pointer; outline: none; transition: opacity 150ms ease; }
.cm-node:hover .cm-out { stroke: var(--pen); }
.cm-node:focus-visible .cm-out { stroke: var(--pen); stroke-width: 2.6; }
.cmap.focus .cm-node { opacity: .3; }
.cmap.focus .cm-node.hl { opacity: 1; }
.cmap.focus .cm-e { opacity: .15; }
.cmap.focus .cm-e.hl { opacity: 1; }
.cmap.focus .cm-e.hl .cm-arrow, .cmap.focus .cm-e.hl .cm-head { stroke: var(--pen); stroke-width: 1.9; opacity: .9; }
.cm-node.cur .cm-out { stroke: var(--red); stroke-width: 2.2; }
.cm-node.cur .cm-out2 { stroke: var(--red); opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .cmap.sketch .cm-out, .cmap.sketch .cm-out2 { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: pencil 900ms var(--ease-io) forwards; animation-delay: var(--d); }
  .cmap.sketch .cm-out2 { animation-delay: calc(var(--d) + 160ms); }
  .cmap.sketch .cm-arrow { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: pencil 700ms var(--ease-io) forwards; animation-delay: var(--d); }
  .cmap.sketch .cm-head, .cmap.sketch .cm-wash, .cmap.sketch .cm-label, .cmap.sketch .cm-t, .cmap.sketch .cm-mark, .cmap.sketch .cm-paper { opacity: 0; animation: appear 500ms var(--ease-out) forwards; animation-delay: calc(var(--d) + 420ms); }
  .cmap.sketch .cm-wash { animation-name: wash; }
  .cmap.sketch .cm-mark { animation-name: wash-mark; }
}
@keyframes pencil { to { stroke-dashoffset: 0; } }
@keyframes wash { to { opacity: .3; } }
@keyframes wash-mark { to { opacity: .9; } }

/* ---------- next step: an index card with the teacher's red note ---------- */
section.next { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: 26px clamp(24px, 4vw, 44px) clamp(28px, 4vw, 40px); background: var(--sheet); border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
section.next::before { content: ""; position: absolute; left: 0; right: 0; top: 66px; height: 1.5px; background: var(--margin); }
.next h2 { font-size: 19px; color: var(--red); line-height: 1.6; margin-bottom: 18px; }
.next-main { display: flex; flex-direction: column; align-items: flex-start; }
.next-course { margin: 8px 0 4px; font-size: 16px; }
.next-course a { color: var(--ink2); }
.next-title { margin: 0; font: 650 clamp(26px, 3vw, 36px)/1.2 var(--body); letter-spacing: -.01em; max-width: 24ch; color: var(--ink); }
.next-meta { margin: 12px 0 26px; color: var(--ink2); font-size: 15px; }
.next-course-prog { margin-top: auto; padding-top: 30px; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 15px; color: var(--ink2); }
.next-after { padding: 0 0 0 clamp(20px, 3vw, 36px); align-self: stretch; box-shadow: inset 1.5px 0 0 var(--rule); }
.next-after h3 { font: 400 17px/1.6 var(--hand); color: var(--ink2); margin-bottom: 14px; }
.next-after ol { list-style: none; margin: 12px 0 0; padding: 0; }
.next-after a { display: block; padding: 10px 12px; margin: 0 -12px; color: var(--ink); border-radius: 4px; transition: background-color 150ms ease; }
.next-after a:hover { background: var(--tint); text-decoration: none; }
.next-after span { display: block; font-weight: 600; }
.next-after small { color: var(--ink3); font-size: 14px; }

/* how it works: a numbered list, because it is a sequence */
.how { margin-top: 104px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 32px; counter-reset: how; }
.how-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.how-cols p { margin: 0; font-size: 17px; color: var(--ink); position: relative; padding-top: 44px; counter-increment: how; }
.how-cols p::before { content: counter(how) "."; position: absolute; top: 0; left: 0; font: 400 24px/1.4 var(--hand); color: var(--red); }

.stats { margin-top: 104px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--sheet); border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.stats > div { padding: 26px clamp(20px, 3vw, 40px); }
.stats > div + div { box-shadow: inset 1px 0 0 var(--line); }
.stats b { display: block; font: 400 clamp(34px, 4vw, 48px)/1.4 var(--hand); color: var(--pen); }
.stats b small { font-size: .5em; color: var(--ink3); }
.stats b.phase { font: 650 clamp(21px, 2vw, 26px)/1.3 var(--body); color: var(--ink); padding-top: 12px; }
.stats span { display: block; margin-top: 6px; color: var(--ink2); font-size: 15px; }

/* the path: semesters as entries in a contents page */
.trail { margin-top: 104px; }
.trail-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 32px; align-items: end; margin-bottom: 28px; }
.trail-head p { margin: 0; color: var(--ink2); font-size: 17px; }
.phases { list-style: none; margin: 0; padding: 0; position: relative; }
.phases::before { content: ""; position: absolute; left: 11px; top: 20px; bottom: 20px; width: 0; border-left: 2px dotted var(--ink3); opacity: .5; }
.phase { position: relative; padding: 12px 0; }
.phase-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; }
.phase-head h3 { font-size: 20px; }
.phase.here .phase-head h3 { color: var(--red); }
.phase-count { color: var(--ink2); font-size: 15px; }
.phase-toggle { height: 36px; padding: 0 14px; border: 1.5px solid var(--line2); background: var(--sheet); color: var(--ink); font-weight: 600; font-size: 14px; border-radius: var(--hand-r); cursor: pointer; }
.phase-toggle:hover { border-color: var(--pen); color: var(--pen); }
.steps-list { list-style: none; margin: 12px 0 8px 42px; padding: 0; background: var(--sheet); border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.step a { display: grid; grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 1fr) 140px; gap: 16px; align-items: center; padding: 14px 18px; color: var(--ink); transition: background-color 150ms ease; }
.step + .step a { box-shadow: inset 0 1px 0 var(--rule); }
.step a:hover { background: var(--tint); text-decoration: none; }
.step-name { font-weight: 650; font-size: 17px; }
.step-state { color: var(--ink2); font-size: 15px; }
.step-state b { color: var(--red); font: 400 15px/1.5 var(--hand); }
.step.is-next a { background: linear-gradient(90deg, var(--marker-soft), transparent 70%); }
.step.s-wait .step-name { color: var(--ink2); }

/* state glyphs: marker + tick = done, half marker = in progress, pen ring = ready, dotted = waiting */
.glyph { width: 24px; height: 24px; border-radius: 50%; display: inline-block; position: relative; flex: none; background: var(--sheet); box-shadow: inset 0 0 0 1.6px var(--ink3); }
.g-done { background: var(--marker); box-shadow: inset 0 0 0 1.6px var(--marker-deep); }
.g-done::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 12px; border: solid var(--pen); border-width: 0 2.4px 2.4px 0; transform: rotate(42deg); }
.g-doing { background: linear-gradient(90deg, var(--marker) 50%, var(--sheet) 50%); box-shadow: inset 0 0 0 1.6px var(--marker-deep); }
.g-ready { box-shadow: inset 0 0 0 1.8px var(--pen); }
.g-wait, .g-todo { background: transparent; box-shadow: none; border: 1.6px dotted var(--ink3); }

.charge { display: block; height: 5px; background: var(--tint2); overflow: hidden; border-radius: 3px; }
.charge i { display: block; height: 100%; background: var(--marker-deep); border-radius: 3px; transition: width 360ms var(--ease-out); }

/* ---------- footer ---------- */
.foot { max-width: var(--max); margin: 150px auto 0; padding: 0 var(--m) 40px; color: var(--ink3); font-size: 14px; }
.foot .close { margin: 0 0 14px; font: 400 clamp(30px, 6.4vw, 92px)/1.45 var(--hand); color: #cfdcec; }
.foot p { margin: 0; }

/* ---------- page head ---------- */
.page-head { padding: 64px 0 36px; }
.page-head p:last-child { margin-top: 14px; }

/* ---------- catalogue ---------- */
.filters { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; padding: 12px; background: var(--sheet); border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.filters > * { min-width: 0; }
.search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; background: var(--tint); border-radius: 4px; }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--pen); }
.search svg { width: 18px; height: 18px; flex: none; color: var(--ink2); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; }
.search input::placeholder { color: var(--ink3); }
select { height: 46px; width: 100%; border: 0; border-radius: 4px; background: var(--tint); color: var(--ink); font: inherit; font-size: 15px; padding: 0 12px; }
.areas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.area-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--hand-r); border: 1.5px solid var(--line); background: var(--sheet); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink2); transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease; }
.area-btn:hover { border-color: var(--line2); color: var(--ink); }
.area-btn i { width: 12px; height: 12px; border-radius: 40% 60% 55% 45%; opacity: .85; }
.area-btn[aria-pressed="true"] { background: var(--pen); border-color: var(--pen); color: #fff; }
.count { margin: 14px 0 0; font-size: 15px; color: var(--ink2); }
.count a { margin-left: 8px; }
.layer-block { margin-top: 48px; }
.layer-title { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; }
.layer-title h3 { font: 400 21px/1.55 var(--hand); color: var(--pen); }
.layer-title span { color: var(--ink2); font-size: 15px; }
.rows { list-style: none; margin: 0; padding: 0; background: var(--sheet); border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.row a { display: grid; grid-template-columns: 4px minmax(0, 2.2fr) minmax(0, 1fr) 76px 130px 120px; gap: 18px; align-items: center; padding: 16px 18px 16px 0; color: var(--ink); transition: background-color 150ms ease; }
.row + .row a { box-shadow: inset 0 1px 0 var(--rule); }
.row a:hover { background: var(--tint); text-decoration: none; }
.row .sw { align-self: stretch; border-radius: 0 3px 3px 0; opacity: .8; }
.row-name { font: 650 18px/1.3 var(--body); }
.row-desc { display: block; margin-top: 4px; font: 400 15px/1.5 var(--body); color: var(--ink2); }
.row-area, .row-unis { font-size: 15px; color: var(--ink2); }
.sig { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.sig i { width: 5px; border-radius: 1px; background: var(--tint2); }
.sig i.on { background: var(--ink2); }
.sig i:nth-child(1) { height: 5px; } .sig i:nth-child(2) { height: 8px; } .sig i:nth-child(3) { height: 11px; } .sig i:nth-child(4) { height: 14px; } .sig i:nth-child(5) { height: 16px; }
.row-prog { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink2); }
.row-prog .charge { flex: 1; }
.empty { padding: 40px; text-align: center; color: var(--ink2); background: var(--sheet); margin-top: 20px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }

/* ---------- course page ---------- */
.crumbs { padding-top: 36px; font-size: 15px; color: var(--ink2); }
.crumbs a { color: var(--ink2); }
.c-hero { padding: 16px 0 36px; display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 24px; }
.c-hero .sw { border-radius: 3px; opacity: .8; }
.c-hero h1 { font-size: clamp(30px, 3.8vw, 50px); max-width: 22ch; }
.facts { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 24px 0 0; padding: 0; list-style: none; }
.facts li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink2); }
.facts b { font: 600 17px/1.4 var(--body); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }

/* before / this course / after, drawn as a small concept map on squared paper */
.pinout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px) minmax(0, 1fr); align-items: center; padding: 32px 24px; margin-bottom: 32px; border-radius: 3px; background-color: var(--sheet); background-image: linear-gradient(#e3ebf5 1px, transparent 1px), linear-gradient(90deg, #e3ebf5 1px, transparent 1px); background-size: 24px 24px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.pins { display: flex; flex-direction: column; gap: 10px; }
.pins.in { align-items: flex-end; } .pins.out { align-items: flex-start; }
.pins h3 { font: 400 15px/1.6 var(--hand); color: var(--pen); margin-bottom: 2px; }
.pins.in h3 { margin-right: 44px; } .pins.out h3 { margin-left: 44px; }
.pin { display: inline-flex; align-items: center; max-width: 100%; }
.pin a, .pin span { padding: 8px 14px; background: var(--sheet); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; border-radius: var(--hand-r); border: 1.5px solid var(--ink2); transition: border-color 150ms ease, color 150ms ease; }
.pin a:hover { border-color: var(--pen); color: var(--pen); text-decoration: none; }
.pin span { color: var(--ink3); font-weight: 500; border-style: dashed; border-color: var(--ink3); }
.pins.in .pin::after, .pins.out .pin::before { content: ""; width: 40px; height: 12px; flex: none; background: no-repeat center / 40px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M2 6.5Q20 4.5 37 6M31 2l6 4-6 4' fill='none' stroke='%23555c69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.die { position: relative; aspect-ratio: 1.15; display: grid; place-items: center; text-align: center; padding: 22px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 46% 54% 48% 52% / 54% 46% 56% 44%; }
.die::after { content: ""; position: absolute; inset: -6px -3px -2px -5px; border: 1.2px solid var(--ink3); border-radius: 52% 48% 55% 45% / 47% 53% 46% 54%; pointer-events: none; }
.die-legs { display: none; }
.die b { font: 650 20px/1.25 var(--body); }
.die small { display: block; margin-top: 8px; font-size: 14px; color: var(--ink2); }
.die .charge { width: 80%; margin: 12px auto 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.panel { background: var(--sheet); padding: 24px; margin-bottom: 24px; border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.panel-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.panel-h h2 { font-size: 22px; }
.panel-h .tally { margin-left: auto; font-size: 15px; color: var(--ink2); }
.panel > p { margin: 0 0 14px; font-size: 15px; color: var(--ink2); }

/* checklists: a pencil box that gets a blue tick; what you have mastered is highlighted */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li + li { box-shadow: inset 0 1px 0 var(--rule); }
.checks label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; cursor: pointer; }
.checks .n { display: none; }
.checks input, .learned input { appearance: none; -webkit-appearance: none; width: 19px; height: 19px; margin: 3px 0 0; border: 1.6px solid var(--ink3); border-radius: 3px 5px 3px 6px; background: var(--sheet) no-repeat 50% 50% / 15px 15px; cursor: pointer; transition: border-color 150ms ease; }
.checks input:hover, .learned input:hover { border-color: var(--pen); }
.checks input:checked, .learned input:checked { border-color: var(--pen); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.4 4L13.5 2' fill='none' stroke='%232340a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.checks a { color: var(--ink); }
.checks a:hover { color: var(--pen); }
.checks input:checked ~ span:last-child, .checks input:checked ~ span:last-child a { text-decoration: underline .5em var(--marker-soft); text-underline-offset: -.28em; text-decoration-skip-ink: none; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tool { padding: 5px 12px; background: var(--sheet); font-size: 15px; font-weight: 600; color: var(--ink); border: 1.5px solid var(--line2); border-radius: var(--hand-r); }
a.tool:hover { border-color: var(--pen); text-decoration: none; }
.res { list-style: none; padding: 0; margin: 0; }
.res li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.res li + li { box-shadow: inset 0 1px 0 var(--rule); }
.res .kind { font-size: 14px; font-weight: 600; color: var(--ink2); padding-top: 1px; white-space: nowrap; }
.res .kind::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 40% 60% 55% 45%; background: var(--k); }
.res a { font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; }
.res a:hover { text-decoration-color: var(--pen); color: var(--pen); }
.res small { display: block; color: var(--ink2); font-size: 14px; margin-top: 2px; }
table.unis { width: 100%; border-collapse: collapse; font-size: 15px; }
table.unis th, table.unis td { text-align: left; padding: 10px 4px; vertical-align: top; }
table.unis tr + tr th, table.unis tr + tr td { box-shadow: inset 0 1px 0 var(--rule); }
table.unis th { width: 92px; font-weight: 700; white-space: nowrap; }
table.unis th a { color: var(--ink); }
table.unis td.none { color: var(--ink3); }
table.unis code { font: 500 13px var(--mono); color: var(--pen); margin-right: 6px; }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.steps a { display: block; padding: 20px 22px; background: var(--sheet); color: var(--ink); border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); transition: box-shadow 150ms ease; }
.steps a:hover { text-decoration: none; box-shadow: var(--sheet-shadow), 0 0 0 1.5px var(--pen); }
.steps small { display: block; color: var(--ink2); font-size: 14px; }
.steps b { font: 650 19px/1.35 var(--body); }
.steps a.next { text-align: right; grid-column: 2; }

/* ---------- lesson: a clean sheet on the notebook ---------- */
.readbar { position: fixed; left: 0; right: 0; top: 68px; height: 4px; z-index: 29; pointer-events: none; }
.readbar i { display: block; height: 100%; background: var(--marker-deep); transform-origin: 0 50%; transform: scaleX(0); }
.lesson-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); padding-top: 40px; align-items: start; }
.lesson-side { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow: auto; background: var(--sheet); padding: 22px; border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.side-course { margin: 0 0 4px; font-size: 15px; } .side-course a { color: var(--ink2); }
.lesson-side h2 { font-size: 19px; margin-bottom: 10px; }
.lesson-side ol { list-style: none; margin: 0 0 18px; padding: 0; }
.lesson-side li a { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; margin: 0 -10px; color: var(--ink2); font-size: 15px; line-height: 1.4; border-radius: 4px; transition: background-color 150ms ease; }
.lesson-side li a:hover { background: var(--tint); text-decoration: none; color: var(--ink); }
.lesson-side li.cur a { background: var(--marker-soft); color: var(--ink); font-weight: 600; }
.lesson-side .glyph { width: 16px; height: 16px; margin-top: 3px; }
.lesson-side .g-done::after { left: 5px; top: 2px; width: 4px; height: 8px; border-width: 0 2px 2px 0; }
.lesson { max-width: 820px; background: var(--sheet); padding: clamp(24px, 4vw, 56px); border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.lesson-k { margin: 0 0 10px; color: var(--ink2); font-size: 15px; }
.lesson h1 { font-size: clamp(28px, 3.4vw, 44px); max-width: 22ch; }
.prose { margin-top: 30px; font-size: 18px; line-height: 1.75; }
.prose p, .prose ul, .prose ol { max-width: 66ch; }
.prose li { margin: 4px 0; }
.prose h2 { font-size: 26px; margin: 52px 0 12px; }
.prose h3 { font-size: 20px; margin: 34px 0 8px; }
.prose a { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { background: linear-gradient(transparent 58%, var(--marker-soft) 58%); }
.prose code { font: 500 .86em var(--mono); background: var(--tint); border-radius: 3px; padding: 2px 6px; color: var(--pen); }
.prose pre.code { position: relative; margin: 22px 0; padding: 20px 22px; background: var(--tint); overflow-x: auto; font: 500 14.5px/1.65 var(--mono); color: var(--ink); border-radius: 4px; box-shadow: inset 3px 0 0 var(--pen); }
.prose pre.code code { background: none; padding: 0; font: inherit; color: inherit; }
.prose pre.code[data-lang]::before { content: attr(data-lang); position: absolute; top: 10px; right: 14px; font: 500 12px var(--body); color: var(--ink3); }
.prose .note { margin: 24px 0; padding: 16px 20px 16px 22px; background: #fff6f4; max-width: 66ch; box-shadow: inset 2px 0 0 var(--red); border-radius: 0 4px 4px 0; }
.prose details.sol { margin: 28px 0; background: var(--tint); border-radius: 4px; }
.prose details.sol summary { cursor: pointer; padding: 14px 20px; font: 400 17px/1.6 var(--hand); color: var(--pen); list-style: none; display: flex; align-items: center; gap: 12px; transition: background-color 150ms ease; border-radius: 4px; }
.prose details.sol summary:hover { background: var(--tint2); }
.prose details.sol summary::-webkit-details-marker { display: none; }
.prose details.sol summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--pen); border-bottom: 2px solid var(--pen); transform: rotate(-45deg); transition: transform 200ms var(--ease-out); }
.prose details.sol[open] summary::before { transform: rotate(45deg); }
.prose details.sol > div { padding: 0 20px 8px; }
.prose details.sol pre.code { background: var(--sheet); }
@media (prefers-reduced-motion: no-preference) { .prose details.sol[open] > div { animation: rise 220ms var(--ease-out); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.prose .tbl { overflow-x: auto; margin: 22px 0; }
.prose table { border-collapse: collapse; font-size: 15.5px; min-width: 100%; }
.prose th, .prose td { text-align: left; padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 700; border-bottom: 1.5px solid var(--ink3); }
.lesson-end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 52px 0 8px; padding-top: 30px; box-shadow: inset 0 1px 0 var(--rule); }
.learned { flex-basis: 100%; display: flex; align-items: center; gap: 10px; color: var(--ink2); font-size: 15px; cursor: pointer; }
.learned input { margin: 0; }

/* ---------- concept map page ---------- */
.net-hero { padding: 56px 0 28px; }
.netgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.net { position: relative; height: min(78vh, 780px); min-height: 480px; overflow: hidden; background: var(--sheet); border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.net-stage { position: absolute; inset: 0; }
.rede-tip { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; max-width: 270px; padding: 9px 12px; background: #fffbe0; color: var(--ink); font-size: 14px; line-height: 1.4; border-radius: 2px; box-shadow: 0 6px 16px -8px rgba(30, 45, 90, .45), 0 0 0 1px rgba(227, 182, 0, .35); }
.rede-tip b { display: block; font-weight: 650; }
.rede-tip span { color: var(--ink2); font-size: 13px; }
.net-ui { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; }
.net-btn { height: 36px; min-width: 36px; padding: 0 12px; border: 1.5px solid var(--line2); background: var(--sheet); color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; border-radius: var(--hand-r); }
.net-btn:hover { border-color: var(--pen); color: var(--pen); }
.net-btn.wide { font-size: 14px; font-weight: 600; }
.net-legend { position: absolute; z-index: 3; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 14px; background: rgba(255, 255, 255, .92); color: var(--ink2); font-size: 14px; max-width: calc(100% - 28px); border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.net-legend span { display: inline-flex; align-items: center; gap: 7px; }
.net-legend .dot { width: 14px; height: 10px; border-radius: 2px; }
.net-legend .hot { background: var(--marker); }
.net-legend .cold { background: var(--sheet); box-shadow: inset 0 0 0 1.4px var(--ink2); border-radius: 5px; }
.net-legend .den { width: 9px; height: 9px; border-radius: 1px; box-shadow: inset 0 0 0 1.3px var(--ink3); }
.net-legend .ln { width: 22px; height: 8px; background: no-repeat center / 22px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M1 4.5Q11 3 20 4M16 1l4 3-4 3' fill='none' stroke='%23555c69' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.net-hint { position: absolute; z-index: 3; left: 14px; top: 14px; margin: 0; max-width: 300px; padding: 4px 8px; background: rgba(255, 255, 255, .88); color: var(--ink2); font-size: 13.5px; border-radius: 3px; }
.inspector { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; background: var(--sheet); padding: 24px; border-radius: 3px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.insp-empty { color: var(--ink2); padding: 28px 4px; }
.insp-h { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 14px; margin-bottom: 10px; }
.insp-h .sw { border-radius: 3px; opacity: .8; }
.insp-h small { color: var(--ink2); font-size: 14px; }
.insp-h h2 { font-size: 23px; }
.inspector > p { font-size: 15px; margin: 0 0 16px; }
.insp-sec { margin-top: 22px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--rule); }
.insp-sec h3 { font-size: 17px; margin-bottom: 6px; }
.insp-sec .panel-h { margin-bottom: 0; }
.insp-sec .checks label { padding: 8px 0; font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .inspector.enter > * { animation: rise 220ms var(--ease-out) both; }
  .inspector.enter > *:nth-child(2) { animation-delay: 30ms; } .inspector.enter > *:nth-child(3) { animation-delay: 60ms; } .inspector.enter > *:nth-child(n+4) { animation-delay: 90ms; }
  .checks li.flash { animation: flash 1.4s var(--ease-out); }
}
@keyframes flash { 0%, 30% { background: var(--marker-soft); } 100% { background: transparent; } }

/* ---------- course map (cards in columns) ---------- */
.map-hero { padding: 56px 0 24px; }
.mapgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.board { overflow: hidden; border-radius: 3px; background-color: var(--sheet); background-image: linear-gradient(#e6edf6 1px, transparent 1px), linear-gradient(90deg, #e6edf6 1px, transparent 1px); background-size: 24px 24px; box-shadow: var(--sheet-shadow), 0 0 0 1px var(--line); }
.board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.map { display: block; }
.map .layer { fill: var(--pen); font: 400 13px var(--hand); }
.map .lane { fill: none; }
.map .trace { fill: none; stroke: var(--ink2); stroke-width: 1.3; stroke-linecap: round; opacity: .5; transition: stroke 150ms ease, opacity 150ms ease; }
.map .via, .map .chip .pin, .map .chip .notch { display: none; }
.map .chip .body { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.4; rx: 12px; }
.map .chip .fill { fill: var(--marker-deep); }
.map .chip .slot { fill: var(--tint2); }
.map .chip text { fill: var(--ink); font: 600 12.5px var(--body); }
.map .chip { cursor: pointer; outline: none; }
.map .chip:hover .body, .map .chip:focus-visible .body { stroke: var(--pen); stroke-width: 2.2; }
.map.focus .chip { opacity: .28; } .map.focus .trace { opacity: .1; }
.map.focus .chip.hl { opacity: 1; } .map.focus .chip.cur .body { stroke: var(--red); stroke-width: 2.4; }
.map.focus .trace.hl { opacity: .9; stroke: var(--pen); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .map.boot .trace { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: pencil 1s var(--ease-io) forwards; animation-delay: var(--d); }
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 14px 18px; font-size: 14px; color: var(--ink2); background: rgba(255, 255, 255, .9); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 40% 60% 55% 45%; opacity: .85; }

/* ---------- about ---------- */
.about { padding-top: 64px; max-width: 780px; }
.about h2 { margin: 44px 0 10px; }
.about li { margin-bottom: 8px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.btn { border: 1.5px solid var(--line2); background: var(--sheet); color: var(--ink); padding: 0 16px; height: 44px; display: inline-flex; align-items: center; border-radius: var(--hand-r); cursor: pointer; font-weight: 600; font-size: 15px; }
.btn:hover { border-color: var(--pen); color: var(--pen); }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); color: var(--red); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translateX(-50%); background: var(--pen); color: #fff; padding: 12px 18px; font-size: 15px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 200ms ease; border-radius: var(--hand-r); }
.toast.on { opacity: 1; }

/* ---------- route transitions: a quick page turn, nothing more ---------- */
::view-transition-old(root) { animation: vt-out 140ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 220ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .netgrid, .mapgrid { grid-template-columns: minmax(0, 1fr); }
  .inspector { position: static; max-height: none; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .row a { grid-template-columns: 4px minmax(0, 1fr) 76px 120px; }
  .row-area, .row-unis { display: none; }
  .lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .lesson-side { position: static; max-height: none; order: 2; }
  .how, .trail-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 900px) {
  .hero-net { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 28px; }
  .hero-canvas { height: 340px; min-height: 0; transform: rotate(.8deg); }
}
@media (max-width: 860px) {
  .nav a { padding: 8px 9px; }
  section.next { grid-template-columns: minmax(0, 1fr); }
  .next-after { padding: 20px 0 0; box-shadow: inset 0 1.5px 0 var(--rule); }
  .step a { grid-template-columns: 24px minmax(0, 1fr) 90px; }
  .step-state { grid-column: 2 / 4; grid-row: 2; }
  .step-bar { grid-column: 3; grid-row: 1; }
  .pinout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pins.in, .pins.out { align-items: stretch; }
  .pins.in h3, .pins.out h3 { margin: 0; }
  .pins.in .pin::after, .pins.out .pin::before { display: none; }
  .pin a, .pin span { flex: 1; }
  .die { aspect-ratio: auto; min-height: 150px; order: -1; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  :root { --mx: -10px; }
  body { font-size: 16px; }
  .top { height: auto; flex-wrap: wrap; gap: 6px 12px; padding-top: 10px; padding-bottom: 6px; }
  body { background-position: 0 0, 0 104px; }
  .brand { flex: 1; min-width: 0; }
  .brand-name { font-size: 14px; }
  .nav { order: 3; width: 100%; margin: 0; justify-content: space-between; }
  .nav a { flex: 1; text-align: center; padding: 8px 4px; font-size: 14px; }
  .lang { margin-left: auto; }
  .nav-cta { height: 36px; padding: 0 14px; font-size: 14px; }
  .readbar { top: 104px; }
  h1 { font-size: 30px; }
  .hero-canvas { height: 300px; }
  section.next::before { top: 62px; }
  .how, .stats, .trail { margin-top: 72px; }
  .how-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stats > div:last-child { grid-column: 1 / -1; box-shadow: inset 0 1px 0 var(--line); }
  .phase-head { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .phase-count { grid-column: 2; grid-row: 2; }
  .phase-toggle { grid-row: 1 / 3; grid-column: 3; }
  .steps-list { margin-left: 0; }
  .phases::before { display: none; }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .row a { grid-template-columns: 4px minmax(0, 1fr) 60px; gap: 12px; }
  .row-prog, .row-desc { display: none; }
  .c-hero { grid-template-columns: 4px minmax(0, 1fr); gap: 14px; }
  .steps { grid-template-columns: minmax(0, 1fr); } .steps a.next { grid-column: 1; }
  .res li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .net { height: 70vh; min-height: 440px; } .net-hint { display: none; }
  .lesson { padding: 22px 18px; margin: 0 calc(-1 * var(--m) + 6px); }
  .prose { font-size: 17px; }
  .foot { margin-top: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .btn-fire, .btn, .btn-link, .lang, .net-btn, .phase-toggle, .area-btn, .charge i, .step a, .row a, .cm-node, .cm-arrow, .cm-head { transition: none; }
}