/* "Level" chapter page concept for ByteSizeNotes (IGCSE 1.1).
   The homepage's world (void, circuit board, lime, Archivo) frames the chapter at the start and the end;
   the reading sheet in the middle stays calm. Motion plays once, on arrival or on reaching a point,
   and never loops while a student reads. */
@font-face { font-family: "Archivo"; font-weight: 700; font-display: swap; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 900; font-display: swap; src: url("fonts/archivo-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-display: swap; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); }

:root {
  --void: #05070a;
  --board: #0a0f0c;
  --frame: #0d1310;
  --ink-d: #eef3ef;
  --muted-d: #9fb0a6;
  --dim-d: #66786d;
  --lime: #c4f69a;
  --lime-ink: #10200a;
  --violet: #a78bfa;
  --paper: #ffffff;
  --ink: #14202c;
  --text: #3d4653;
  --rule: #e3e8ee;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --body: "Geist", "DM Sans", system-ui, sans-serif;
  --display: "Archivo", "Arial Black", sans-serif;
  --top: 60px;
  --lx-blue: #e6eef7; --lx-coral: #d66859; --lx-ink: #040608; --lx-lavender: #c9c6ff; --lx-lime: #c4f69a; --lx-line: #d9dee6; --lx-muted: #6c7079; --lx-paper: #f8fafc; --lx-purple: #4139c3;
  --as-ink: #14202c; --as-lime: #c4f69a; --as-lavender: #c9c6ff; --as-line: #d9dee6;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--void); color: var(--ink-d); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* top bar + reading progress */
.bar { position: sticky; top: 0; z-index: 50; height: var(--top); display: flex; align-items: center; gap: 18px; padding: 0 clamp(16px, 3vw, 32px); background: var(--void); border-bottom: 1px solid #ffffff14; }
.logo { font: 900 1.05rem/1 var(--display); letter-spacing: -.03em; text-decoration: none; color: #fff; }
.logo span { color: var(--lime); }
.crumb { font: 500 .8rem/1 var(--mono); color: var(--muted-d); }
.crumb b { color: var(--ink-d); font-weight: 600; }
.bar .sign { margin-left: auto; font-weight: 600; font-size: .9rem; text-decoration: none; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #ffffff38; }
.read { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #ffffff10; }
.read i { display: block; height: 100%; width: 0; background: var(--lime); box-shadow: 0 0 12px #c4f69a88; }
.read-n { position: absolute; right: clamp(16px, 3vw, 32px); top: calc(100% + 8px); font: 600 .7rem/1 var(--mono); color: var(--lime); background: var(--void); padding: 5px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #c4f69a40; opacity: 0; transition: opacity .3s; pointer-events: none; }
.read-n.on { opacity: 1; }

/* hero: the level start */
.start { position: relative; overflow: hidden; isolation: isolate; min-height: min(76vh, 720px); display: grid; align-content: end; padding: clamp(96px, 14vh, 160px) clamp(16px, 5vw, 72px) clamp(36px, 6vh, 64px); background: var(--board); border-bottom: 1px solid #c4f69a26; }
.start canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.start::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 80% at 18% 75%, #0a0f0cf2 25%, #0a0f0c80 55%, transparent 85%), linear-gradient(transparent 60%, #0a0f0c); }
.ghost { position: absolute; right: clamp(-20px, 2vw, 40px); top: 50%; transform: translateY(-46%); z-index: -1; font: 900 clamp(180px, 36vw, 520px)/.8 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px #a78bfa33; pointer-events: none; user-select: none; }
.level { display: inline-flex; align-items: center; gap: 10px; font: 600 .82rem/1 var(--mono); color: var(--lime); margin-bottom: 18px; }
.level i { width: 8px; height: 8px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.title { --L: 9; --pad: clamp(16px, 5vw, 72px); margin: 0; font: 900 min(150px, max(28px, calc((100vw - 2 * var(--pad)) / (var(--L) * .75))))/.9 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.title span { display: block; will-change: transform; }
.title span:last-child { color: var(--lime); text-shadow: 0 0 60px #c4f69a40; }
.lede { margin: 22px 0 0; max-width: 52ch; font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--muted-d); }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.stat { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff14; min-width: 104px; }
.stat b { font: 800 1.35rem/1.1 var(--display); color: #fff; white-space: nowrap; }
.stat span { font-size: .8rem; color: var(--muted-d); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; font: 700 .95rem/1 var(--body); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn.go { background: var(--lime); color: var(--lime-ink); }
.btn.ghosty { background: transparent; color: var(--ink-d); box-shadow: inset 0 0 0 1.5px #ffffff38; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.shock { position: absolute; border-radius: 50%; border: 2px solid var(--lime); box-shadow: 0 0 24px #c4f69a80; }
.bit { position: absolute; font: 700 15px/1 var(--mono); color: var(--lime); text-shadow: 0 0 8px #c4f69a; }
.bit.v { color: var(--violet); text-shadow: 0 0 8px var(--violet); }
html.intro .title span { opacity: 0; }

/* reading: rail + paper */
.read-wrap { display: grid; grid-template-columns: 250px minmax(0, 760px); justify-content: center; gap: clamp(20px, 3vw, 44px); padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 32px) 0; }
.rail { position: sticky; top: calc(var(--top) + 28px); align-self: start; padding: 4px 0; }
.rail h2 { margin: 0 0 14px; font: 600 .74rem/1 var(--mono); color: var(--lime); }
.rail ol { list-style: none; margin: 0; padding: 0; position: relative; }
.rail .fill { z-index: 0; } .rail li { z-index: 1; }
.rail .track { position: relative; }
.rail .track::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: #ffffff14; }
.rail .fill { position: absolute; left: 9px; top: 10px; width: 2px; height: 0; background: var(--lime); box-shadow: 0 0 10px #c4f69a99; transition: height .35s ease-out; }
.rail li { position: relative; }
.rail a { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 7px 0; text-decoration: none; font-size: .84rem; line-height: 1.4; color: var(--dim-d); transition: color .2s; }
.rail a::before { content: ""; width: 20px; height: 20px; border-radius: 6px; background: var(--void); box-shadow: inset 0 0 0 2px #ffffff26; transition: background .25s, box-shadow .25s; }
.rail li.done a { color: var(--muted-d); }
.rail li.done a::before { background: var(--lime); box-shadow: none; }
.rail li.here a { color: #fff; }
.rail li.here a::before { box-shadow: inset 0 0 0 2px var(--lime), 0 0 14px #c4f69a80; }
.rail li.try a::after { content: "try it"; grid-column: 2; justify-self: start; margin-top: 4px; font: 600 .66rem/1 var(--mono); color: var(--lime-ink); background: var(--lime); padding: 3px 6px; border-radius: 4px; }
.rail a:hover { color: #fff; }

.paper { background: var(--paper); color: var(--text); border-radius: 22px; padding: clamp(24px, 5vw, 56px); box-shadow: 0 30px 80px -40px #000; }
.ch-sec { scroll-margin-top: calc(var(--top) + 24px); padding-bottom: 2.6rem; margin-bottom: 2.6rem; border-bottom: 1px dashed var(--rule); }
.ch-sec:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ch-sec .num { display: inline-block; font: 700 .76rem/1 var(--mono); color: #5b6778; margin-bottom: 10px; }
.ch-h2 { margin: 0 0 18px; font: 800 clamp(1.4rem, 2.6vw, 1.85rem)/1.2 var(--display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.ch-h2 .mk { background: linear-gradient(var(--lime), var(--lime)) 0 88% / 100% 42% no-repeat; padding: 0 .05em; }
.ch-sub { margin: 22px 0 6px; font: 700 1rem/1.3 var(--display); color: var(--ink); }
.ch-list { list-style: none; margin: 0; padding: 0; }
.ch-list li { position: relative; padding: 12px 0 12px 32px; font-size: 1.02rem; line-height: 1.7; border-bottom: 1px solid var(--rule); }
.ch-list li:last-child { border-bottom: 0; }
.ch-list li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 12px; height: 12px; border-radius: 3px; background: var(--lime); box-shadow: inset 0 0 0 1px #8fbf63; }
.ch-list strong { color: var(--ink); }
.ch-note { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--board); color: #d8e2da; font-size: .97rem; line-height: 1.6; }
.ch-note-i { display: none; }
.ch-note::before { content: "Exam tip"; grid-row: 1; align-self: start; font: 700 .7rem/1 var(--mono); color: var(--lime-ink); background: var(--lime); padding: 5px 7px; border-radius: 5px; margin-top: 2px; }
.ch-note strong { color: #fff; }
.paper .bw { --bw-display: "Archivo", "Arial Black", sans-serif; --bw-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; }

/* AS lesson content (source cards, tables, code) */
.paper h3 { color: var(--ink); }
.source-card-grid { display: grid; gap: 14px; margin: 6px 0 4px; }
.source-card-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.source-card, .paper article.source-card { min-width: 0; padding: 18px 18px 8px; border-radius: 16px; background: #f7f9fb; border: 1px solid var(--rule); border-top: 5px solid var(--ink); }
.source-card + .source-card, .source-card + .source-table-shell, .source-table-shell + .source-card { margin-top: 14px; }
.source-card-grid > .source-card { margin-top: 0; }
.source-card-accent { border-top-color: #8fbf63; } .source-card-purple { border-top-color: #4139c3; } .source-card-coral { border-top-color: #d66859; } .source-card-blue { border-top-color: #6b9bd1; }
.source-card h3 { margin: 0 0 6px; font: 800 1.05rem/1.3 var(--display); letter-spacing: -.01em; }
.source-list, .source-example-list { list-style: none; margin: 0; padding: 0; }
.source-list li, .source-example-list li { position: relative; padding: 9px 0 9px 26px; line-height: 1.65; border-bottom: 1px solid var(--rule); }
.source-list li:last-child, .source-example-list li:last-child { border-bottom: 0; }
.source-list li::before, .source-example-list li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 10px; height: 10px; border-radius: 3px; background: var(--lime); box-shadow: inset 0 0 0 1px #8fbf63; }
.source-list-numbered { counter-reset: n; }
.source-list-numbered li { counter-increment: n; }
.source-list-numbered li::before { content: counter(n); width: 18px; height: 18px; top: 12px; left: 0; display: grid; place-items: center; font: 700 .7rem/1 var(--mono); color: var(--lime-ink); }
.source-code-point code, .paper code { font: 600 .9em/1.5 var(--mono); color: #302a87; background: #ecebfb; border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.source-table-shell, .c7-table-wrap { overflow-x: auto; margin-top: 14px; border-radius: 14px; border: 1px solid var(--rule); }
.paper table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.paper caption { text-align: left; padding: 12px 14px; font: 700 .8rem/1 var(--mono); color: #5b6778; }
.paper th, .paper td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.paper thead th { background: var(--board); color: #fff; font: 800 .95rem/1.2 var(--display); border-top: 0; }
.paper td .source-list li { padding-top: 6px; padding-bottom: 6px; }
.source-gap-card { padding: 16px 18px; border-radius: 14px; background: #fff8dc; border: 1px solid #e2ca78; color: #665619; }
.source-gap-card > strong { display: block; margin-bottom: 6px; }
.source-gap-card .source-list li::before { background: #e2ca78; box-shadow: none; }
.diagram-card { margin: 14px 0 0; padding: 16px; border-radius: 16px; background: #f7f9fb; border: 1px solid var(--rule); }
.diagram-card h3 { margin: 0 0 10px; font: 800 1rem/1.3 var(--display); }
.diagram-transcript { margin-top: 10px; font-size: .9rem; color: #5b6778; }
.source-topology-diagram { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.topology-sketch { position: relative; min-height: 285px; overflow: hidden; border: 1px solid #d5dce6; border-radius: 12px; background: #fff; }
.topology-sketch > strong { position: absolute; z-index: 3; top: 13px; left: 15px; padding: 5px 9px; border-radius: 999px; background: var(--board); color: var(--lime); font: 700 .66rem/1 var(--mono); }
.sketch-node { position: absolute; z-index: 2; width: 78px; min-height: 38px; display: grid; place-items: center; padding: 5px; border: 1px solid #9ec677; border-radius: 9px; background: var(--lime); color: #26351a; font-size: 10px; font-weight: 800; text-align: center; }
.sketch-node-centre { width: 92px; min-height: 48px; left: calc(50% - 46px); top: 119px; border-color: #9e98e7; background: var(--as-lavender); color: #302a87; }
.sketch-node-top { left: calc(50% - 39px); top: 54px; } .sketch-node-bottom { left: calc(50% - 39px); bottom: 35px; }
.sketch-node-left { left: 22px; top: 124px; } .sketch-node-right { right: 22px; top: 124px; }
.sketch-link { position: absolute; z-index: 1; display: block; height: 3px; border-radius: 999px; background: #8c86d7; transform-origin: left center; }
.sketch-link-vertical { width: 137px; left: 50%; top: 91px; transform: rotate(90deg); }
.sketch-link-horizontal { width: calc(100% - 122px); left: 61px; top: 146px; }
.sketch-node-nw { left: 28px; top: 59px; } .sketch-node-ne { right: 28px; top: 59px; } .sketch-node-sw { left: 28px; bottom: 37px; } .sketch-node-se { right: 28px; bottom: 37px; }
.mesh-link-top, .mesh-link-bottom { width: calc(100% - 184px); left: 92px; } .mesh-link-top { top: 78px; } .mesh-link-bottom { bottom: 55px; }
.mesh-link-left, .mesh-link-right { width: 133px; top: 79px; transform: rotate(90deg); } .mesh-link-left { left: 67px; } .mesh-link-right { right: -66px; }
.mesh-link-diagonal-a, .mesh-link-diagonal-b { width: calc(100% - 132px); left: 66px; top: 80px; } .mesh-link-diagonal-a { transform: rotate(34deg); } .mesh-link-diagonal-b { top: 205px; transform: rotate(-34deg); }
/* 7.1 (chapter-7.css loads after this file on that page) */
.paper.c7-notes .ch-sec { border-top: 0; padding-top: 0; }
.paper .c7-note { display: block; margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--board); color: #d8e2da; }
.paper .c7-note h3 { margin: 0 0 6px; font: 800 1rem/1.3 var(--display); color: var(--lime); }
.paper .c7-note .ch-list li { border-color: #ffffff1a; color: #d8e2da; }
.paper .c7-note .ch-list strong { color: #fff; }

/* chapter pager + AS draft tag + covered list */
.draft { font: 600 .7rem/1 var(--mono); color: #f2d49a; background: #2a2210; padding: 6px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #f2d49a40; }
.pager { display: flex; justify-content: space-between; gap: 12px; padding: 18px clamp(16px, 5vw, 72px); background: var(--board); border-top: 1px solid #ffffff10; }
.pager a { font-size: .9rem; color: var(--muted-d); text-decoration: none; max-width: 46%; }
.pager a:hover { color: var(--lime); }
.covered { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; padding: 0; max-width: 720px; }
.covered li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: .88rem; color: var(--ink-d); background: #ffffff0a; box-shadow: inset 0 0 0 1px #c4f69a33; }
.covered li::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font-size: 11px; font-weight: 800; }

/* level select (preview index) */
.select { padding: clamp(48px, 9vw, 110px) clamp(16px, 5vw, 72px) 60px; background: var(--board); }
.select .title { --L: 7; }
.courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 44px; }
.course h2 { margin: 0 0 14px; font: 900 1.6rem/1.1 var(--display); letter-spacing: -.03em; color: #fff; }
.course h2 small { font: 600 .8rem/1 var(--mono); color: var(--muted-d); margin-left: 8px; letter-spacing: 0; }
.unit { margin-bottom: 18px; }
.unit h3 { margin: 0 0 8px; font: 600 .78rem/1.2 var(--mono); color: var(--lime); }
.lvs { display: grid; gap: 6px; }
.lv { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; text-decoration: none; background: #ffffff06; box-shadow: inset 0 0 0 1px #ffffff12; transition: background .15s, box-shadow .15s; }
.lv:hover { background: #c4f69a14; box-shadow: inset 0 0 0 1px #c4f69a66; }
.lv b { font: 800 .95rem/1 var(--display); color: var(--lime); }
.lv span { color: var(--ink-d); font-size: .95rem; }
.lv i { font: 600 .66rem/1 var(--mono); font-style: normal; color: var(--lime-ink); background: var(--lime); padding: 4px 6px; border-radius: 4px; }

/* mobile contents */
.toc-m { display: none; }

/* the end: chapter cleared */
.end { position: relative; overflow: hidden; isolation: isolate; margin: clamp(40px, 7vw, 88px) auto 0; padding: clamp(48px, 9vw, 110px) clamp(16px, 5vw, 72px); background: var(--board); border-top: 1px solid #c4f69a26; text-align: center; }
.end::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#c4f69a0d 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, #c4f69a0d 1px, transparent 1px) 0 0 / 26px 26px; mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent); }
.stamp { display: inline-block; padding: 10px 22px 8px; border: 5px solid var(--lime); border-radius: 12px; font: 900 clamp(44px, 9vw, 104px)/.95 var(--display); letter-spacing: -.02em; color: var(--lime); transform: rotate(-6deg); text-shadow: 0 0 40px #c4f69a55; box-shadow: 0 0 50px -10px #c4f69a80, inset 0 0 30px -10px #c4f69a60; }
.stamp small { display: block; font: 700 .9rem/1.2 var(--mono); letter-spacing: .02em; color: var(--ink-d); margin-top: 6px; }
.end h2 { margin: 46px auto 0; max-width: 20ch; font: 900 clamp(30px, 5vw, 56px)/1 var(--display); letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.end p { margin: 14px auto 0; max-width: 46ch; color: var(--muted-d); }
.end .cta { justify-content: center; margin-top: 28px; }
.foot { padding: 28px clamp(16px, 5vw, 72px) 40px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: .84rem; color: var(--dim-d); background: var(--board); border-top: 1px solid #ffffff10; }

@media (max-width: 960px) {
  .courses { grid-template-columns: minmax(0, 1fr); }
  .draft { display: none; }
  .read-wrap { grid-template-columns: minmax(0, 760px); }
  .rail { display: none; }
  .toc-m { display: block; margin: 0 0 18px; border-radius: 14px; background: var(--frame); box-shadow: inset 0 0 0 1px #ffffff14; }
  .toc-m summary { cursor: pointer; padding: 14px 16px; font: 600 .86rem/1 var(--mono); color: var(--lime); }
  .toc-m ol { margin: 0; padding: 0 16px 14px 36px; color: var(--muted-d); font-size: .9rem; }
  .toc-m li { padding: 4px 0; }
  .toc-m a { text-decoration: none; }
  .crumb { display: none; }
}
@media (max-width: 560px) {
  .source-card-grid-two, .source-topology-diagram { grid-template-columns: minmax(0, 1fr); }
  .bar .sign { display: none; }
  .lv { grid-template-columns: 56px 1fr; } .lv i { display: none; }
  .start { min-height: 0; padding-top: 72px; }
  .ghost { top: 30%; font-size: 240px; }
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-width: 0; }
  .stat b { font-size: 1.15rem; }
  .paper { border-radius: 16px; }
  .read-wrap { padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .rail .fill, .rail a, .rail a::before, .read-n { transition: none; }
}
.paper { overflow-wrap: break-word; }
.end.soon .stamp { display: none; }
.end.soon h2 { margin-top: 0; }