/* Hence — graph paper, fountain-pen ink, a teacher's green pen.
   Display and maths: Latin Modern. Text: Inter. Annotations: Kalam.
   Vertical rhythm: every line box, margin and block is a multiple of one 5 mm cell (24 px),
   and the grid is shifted so that text baselines sit on its lines (see --shift). */
@font-face { font-family: "LM Display"; font-display: swap; src: url("fonts/LM-Display.woff2") format("woff2"); }
@font-face { font-family: "LM"; font-style: normal; font-display: swap; src: url("fonts/LM-Regular.woff2") format("woff2"); }
@font-face { font-family: "LM"; font-style: italic; font-display: swap; src: url("fonts/LM-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 400; font-display: swap; src: url("fonts/Kalam-Regular.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 700; font-display: swap; src: url("fonts/Kalam-Bold.woff2") format("woff2"); }

:root {
  --paper: #fbfcfd;
  --grid: #e1ebf4;
  --grid-major: #c6d8e8;
  --ink: #17233f;
  --ink-soft: #4b5672;
  --pen: #0b8a5f;
  --u: 24px;               /* one cell */
  --shift: 6px;            /* grid moved up so that a 24 px text line has its baseline on a grid line */
  --max: 1152px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink); background-color: var(--paper); position: relative;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: calc(var(--u)*5) calc(var(--u)*5), calc(var(--u)*5) calc(var(--u)*5), var(--u) var(--u), var(--u) var(--u);
  background-position: -1px calc(-1px - var(--shift));
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: var(--u); -webkit-font-smoothing: antialiased;
}
p { margin: 0 0 var(--u); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.hand, .note { font-family: "Kalam", "Comic Neue", cursive; color: var(--pen); font-weight: 400; }
.note { font-size: 22px; line-height: var(--u); display: inline-block; transform: rotate(-3deg); }
p.note { display: table; margin-bottom: 0; }
h1, h2, h3 { font-family: "LM Display", "LM", serif; font-weight: 400; margin: 0; }
h2 { font-size: clamp(34px, 4.4vw, 54px); line-height: calc(var(--u)*3); letter-spacing: -.01em; margin-bottom: var(--u); }
h3 { font-size: 26px; line-height: calc(var(--u)*1.5); }
.lede, .lede-2 { font-size: 19px; line-height: var(--u); color: var(--ink-soft); max-width: 33em; margin: 0 0 calc(var(--u)*2); }
section { padding: calc(var(--u)*5) 0; position: relative; overflow-x: clip; }

/* ---------- the edges of the sheet: lines dissolve into fine dots that grow toward the edge ---------- */
.edges { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.edge { position: absolute; top: 0; bottom: 0; width: 168px; }
.edge.l { left: 0; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='24'%3E%3Cg fill='%2396afc8'%3E%3Ccircle cx='0' cy='0' r='1.5'/%3E%3Ccircle cx='0' cy='24' r='1.5'/%3E%3Ccircle cx='24' cy='0' r='1.15'/%3E%3Ccircle cx='24' cy='24' r='1.15'/%3E%3Ccircle cx='48' cy='0' r='.85'/%3E%3Ccircle cx='48' cy='24' r='.85'/%3E%3Ccircle cx='72' cy='0' r='.6'/%3E%3Ccircle cx='72' cy='24' r='.6'/%3E%3Ccircle cx='96' cy='0' r='.4'/%3E%3Ccircle cx='96' cy='24' r='.4'/%3E%3C/g%3E%3C/svg%3E") -0.5px calc(-0.5px - var(--shift)) / 168px 24px repeat-y,
  linear-gradient(to right, var(--paper) 0, var(--paper) 40px, rgba(251,252,253,0) 150px); }
.edge.r { left: var(--edge-r, calc(100% - 168px)); background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='24'%3E%3Cg fill='%2396afc8'%3E%3Ccircle cx='168' cy='0' r='1.5'/%3E%3Ccircle cx='168' cy='24' r='1.5'/%3E%3Ccircle cx='144' cy='0' r='1.15'/%3E%3Ccircle cx='144' cy='24' r='1.15'/%3E%3Ccircle cx='120' cy='0' r='.85'/%3E%3Ccircle cx='120' cy='24' r='.85'/%3E%3Ccircle cx='96' cy='0' r='.6'/%3E%3Ccircle cx='96' cy='24' r='.6'/%3E%3Ccircle cx='72' cy='0' r='.4'/%3E%3Ccircle cx='72' cy='24' r='.4'/%3E%3C/g%3E%3C/svg%3E") -0.5px calc(-0.5px - var(--shift)) / 168px 24px repeat-y,
  linear-gradient(to left, var(--paper) 0, var(--paper) 52px, rgba(251,252,253,0) 160px); }
body > *:not(.edges) { position: relative; z-index: 1; }

/* ---------- navigation: index tabs ---------- */
body > .nav { position: sticky; top: 0; z-index: 20; }
.nav { background: rgba(251,252,253,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--ink); }
.nav .wrap { display: flex; align-items: flex-end; justify-content: space-between; height: 70.5px; gap: 16px; }
.brand { font-family: "LM Display", "LM", serif; font-size: 32px; line-height: 1; text-decoration: none; color: var(--ink); align-self: center; }
.tabs { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; align-items: flex-end; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: block; text-decoration: none; font-size: 15px; line-height: 24px; color: var(--ink-soft); padding: 8px 14px 8px; border: 1.5px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; white-space: nowrap; margin-bottom: -1.5px; position: relative; }
.tab:hover { color: var(--ink); border-color: var(--grid-major); background: rgba(255,255,255,.6); }
.tab.on { color: var(--ink); font-weight: 600; background: var(--paper); border-color: var(--ink); }
.tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--paper); }

/* ---------- buttons: one cell and a half, or two ---------- */
.btn { display: inline-block; border-radius: 6px; padding: 12px 20px; font-weight: 600; font-size: 15px; line-height: 24px; text-decoration: none; transition: background .15s ease, color .15s ease; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #24345c; }
.btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: rgba(251,252,253,.8); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-small { padding: 0 14px; line-height: 36px; font-size: 14px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: calc(var(--u)*2); }

/* ---------- a framed heading: corner marks, as on a proof sheet ---------- */
.framed { display: inline-block; position: relative; padding: 0 var(--u); margin-left: calc(-1 * var(--u)); }
.framed::before, .framed::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1.5px solid var(--ink); pointer-events: none; }
.framed::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.framed::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.framed .c2, .framed .c3 { position: absolute; width: 22px; height: 22px; border: 1.5px solid var(--ink); pointer-events: none; }
.framed .c2 { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.framed .c3 { left: 0; bottom: 0; border-right: 0; border-top: 0; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(var(--u)*30); display: flex; align-items: center; overflow: hidden; }
.plane { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.hero .wrap { width: 100%; padding-top: calc(var(--u)*3); padding-bottom: calc(var(--u)*2); }
.hero h1 { font-size: clamp(44px, 6vw, 80px); line-height: calc(var(--u)*4); letter-spacing: -.015em; max-width: 7.4em; margin-bottom: var(--u); }
.margin-mark { display: inline-block; font-size: 28px; line-height: 1; transform: rotate(-7deg) translate(.5em, -1.2em); white-space: nowrap; }
.refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 22em)); gap: 0 var(--u); font-size: 14px; color: var(--ink-soft); }
.refs li { display: grid; grid-template-columns: 34px 1fr; }
.refs b { font-family: "LM", serif; font-weight: 400; color: var(--ink); font-size: 16px; }
.cite { font-family: "LM", serif; font-size: .78em; vertical-align: super; line-height: 0; color: var(--pen); text-decoration: none; }
.turn-over { position: absolute; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: var(--u); font-family: "LM", serif; font-style: italic; font-size: 17px; line-height: var(--u); color: var(--ink-soft); text-decoration: none; }

/* ---------- how it works ---------- */
.steps { list-style: none; margin: 0 0 calc(var(--u)*3); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--u); counter-reset: s; }
.steps li { counter-increment: s; border-top: 1.5px solid var(--ink); padding-top: calc(var(--u) - 1.5px); }
.steps li::before { content: counter(s); font-family: "LM Display", serif; font-size: 40px; line-height: calc(var(--u)*2); color: var(--pen); display: block; }
.steps h3 { font-size: 22px; line-height: var(--u); margin-bottom: var(--u); }
.steps p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.principle { display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--u)*2); align-items: start; }
.exhibit { position: relative; background: #fff; border: 1.5px solid var(--ink); padding: calc(var(--u) - 1.5px) var(--u); font-family: "LM", serif; font-size: 18px; line-height: var(--u); box-shadow: 0 18px 36px -18px rgba(23,35,63,.35); }
.exhibit p { margin: 0 0 var(--u); }
.exhibit .qno { font-family: "LM Display", serif; font-size: 26px; margin-right: 10px; }
.exhibit .mm { float: right; font-size: 15px; color: var(--ink-soft); }
.exhibit .part { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 0 4px; margin: 0 0 var(--u); }
.exhibit .mk { color: var(--ink-soft); }
.exhibit .ct { background: linear-gradient(transparent 62%, rgba(11,138,95,.22) 62%); }
.exhibit .ms { border-left: 2.5px solid var(--pen); background: #f4f8f6; padding: 0 14px; font-size: 16px; }
.exhibit .ms div { display: flex; justify-content: space-between; gap: 12px; }
.exhibit .ms em { font-style: normal; color: var(--pen); font-family: "Inter", sans-serif; font-weight: 600; font-size: 13px; }
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; margin-bottom: var(--u); }
.notes .note { font-size: 24px; transform: rotate(-4deg); }
.notes p { margin: 0; color: var(--ink-soft); }
.notes b { color: var(--ink); font-weight: 600; }
.original { margin-top: calc(var(--u)*2); max-width: 46em; font-family: "LM", serif; font-size: 19px; }

/* ---------- about me ---------- */
.me { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--u)*3); align-items: start; }
.me p { max-width: 34em; }
.sig { font-family: "Kalam", cursive; color: var(--ink); font-size: 34px; line-height: calc(var(--u)*2); transform: rotate(-4deg); display: inline-block; }
.cv { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.cv li { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--u); padding: calc(var(--u)/2) 0; border-bottom: 1px solid var(--grid-major); line-height: var(--u); }
.cv li > span:first-child { font-family: "LM", serif; font-style: italic; color: var(--ink-soft); }
.cv .hand { font-size: 20px; }

/* ---------- course pages ---------- */
.course-head { padding: calc(var(--u)*3) 0 var(--u); position: relative; }
.course-head h1 { font-size: clamp(40px, 5vw, 68px); line-height: calc(var(--u)*3); margin: 0 0 var(--u); max-width: 10em; }
.course-kicker { font-size: 24px; line-height: var(--u); margin: 0 0 var(--u); transform: rotate(-2deg); display: inline-block; }
.course-art { position: absolute; right: var(--gutter); top: calc(var(--u)*3); width: min(30vw, 384px); }
.course-art .art { width: 100%; height: auto; }
.papers { list-style: none; padding: 0; margin: 0 0 var(--u); display: flex; flex-wrap: wrap; gap: 12px; }
.papers li { border: 1.5px solid var(--ink); background: var(--paper); padding: 0 14px; display: flex; flex-direction: column; height: 48px; justify-content: center; line-height: 20px; }
.papers b { font-family: "LM", serif; font-weight: 400; font-size: 18px; }
.papers span { font-size: 13px; color: var(--ink-soft); }
.course-count { max-width: 40em; color: var(--ink-soft); font-size: 15px; margin: 0; }
.course-count b { color: var(--ink); }
.catalogue { padding-bottom: calc(var(--u)*4); position: relative; }
.block { padding-top: calc(var(--u)*3); position: relative; }
.block-head { display: flex; align-items: baseline; gap: var(--u); flex-wrap: wrap; margin-bottom: var(--u); }
.topic-key { list-style: none; padding: 0; margin: 0 0 calc(var(--u)*2); display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 15px; }
.topic-key li { display: flex; align-items: baseline; gap: 8px; }
.tnum { font-family: "LM Display", serif; color: var(--c); font-size: 26px; }
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: calc(var(--u)*2) calc(var(--u)*1.5); }
.poster { display: flex; flex-direction: column; }
.cover-link { text-decoration: none; display: block; }
.cover { position: relative; background: color-mix(in srgb, var(--c) 6%, #fff); height: calc(var(--u)*13); border-left: 8px solid var(--c); padding: 12px 16px 16px; display: flex; flex-direction: column; box-shadow: 0 1px 1px rgba(23,35,63,.12), 0 16px 30px -14px rgba(23,35,63,.38); margin-bottom: var(--u); }
.cover-link:hover .cover { transform: translateY(-3px); }
.cover { transition: transform .25s ease; }
.cover-top { display: flex; justify-content: space-between; align-items: baseline; }
.cover-topic { font-family: "LM", serif; font-style: italic; font-size: 15px; color: var(--c); }
.cover-course { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--c); border: 1.2px solid var(--c); border-radius: 3px; padding: 0 6px; }
.cover .art { width: 100%; height: auto; margin: auto 0; }
.cover-title { font-size: 22px; line-height: var(--u); color: var(--ink); margin: 0; }
.stamp { position: absolute; right: 14px; top: 44%; transform: rotate(-12deg); font-family: "LM", serif; font-style: italic; font-size: 17px; line-height: 24px; color: var(--c); border: 1.5px solid var(--c); border-radius: 5px; padding: 0 10px; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--c); }
.poster-topic { font-size: 13px; color: var(--c); font-weight: 600; margin: 0; }
.poster p { font-size: 15px; color: var(--ink-soft); }
.state { font-size: 13px; color: var(--ink-soft); display: inline-block; margin-bottom: var(--u); }
.state.on { color: #fff; background: var(--c); padding: 0 9px; border-radius: 3px; font-weight: 600; }
.ask { margin-top: calc(var(--u)*3); max-width: 34em; }
.ask .note { font-size: 26px; margin-bottom: var(--u); }
.ask::after { content: ""; display: block; height: 48px; margin-top: var(--u); background: repeating-linear-gradient(to bottom, transparent 0 23px, var(--ink-soft) 23px 24px); -webkit-mask: repeating-linear-gradient(to right, #000 0 2px, transparent 2px 6px); mask: repeating-linear-gradient(to right, #000 0 2px, transparent 2px 6px); opacity: .5; }

/* the available pack, shown on its course page */
.product { display: grid; grid-template-columns: 1fr 1.1fr; gap: calc(var(--u)*3); align-items: start; }
.desk { position: relative; height: calc(var(--u)*22); }
.desk img { position: absolute; width: 62%; box-shadow: 0 1px 1px rgba(23,35,63,.12), 0 22px 40px -12px rgba(23,35,63,.35); }
.desk .under { right: 4%; top: 24px; transform: rotate(4deg); background: #fff; }
.desk .over { left: 4%; top: 72px; transform: rotate(-3deg); }
.ticks { list-style: none; padding: 0; margin: 0 0 var(--u); }
.ticks li { padding-left: 34px; position: relative; margin-bottom: 0; }
.ticks li::before { content: "✓"; font-family: "Kalam", cursive; font-weight: 700; color: var(--pen); position: absolute; left: 2px; top: -2px; font-size: 22px; transform: rotate(-8deg); }
.prices { border-top: 1.5px solid var(--ink); margin: 0 0 var(--u); max-width: 30em; }
.prices div { display: flex; align-items: baseline; gap: 10px; height: 48px; padding-top: 12px; border-bottom: 1px solid var(--grid-major); }
.prices b { font-weight: 600; white-space: nowrap; }
.prices span { color: var(--ink-soft); font-size: 14px; }
.prices i { flex: 1; border-bottom: 1.5px dotted var(--grid-major); transform: translateY(-4px); min-width: 12px; }
.prices em { font-family: "LM", serif; font-style: normal; font-size: 22px; }
.soon { font-size: 15px; color: var(--ink-soft); }
.downloads { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--u); }

/* ---------- GDC trainer ---------- */
.trainer { background: #fff; border: 1.5px solid var(--ink); box-shadow: 0 24px 48px -28px rgba(23,35,63,.45); }
.trainer-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--u); padding: 0 var(--u); height: 72px; border-bottom: 1px solid var(--grid-major); flex-wrap: wrap; }
.trainer-bar h3 { font-size: 28px; line-height: var(--u); }
.switch { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; }
.switch button { font: 600 14px/34px "Inter", sans-serif; padding: 0 14px; border: 0; background: #fff; color: var(--ink); cursor: pointer; }
.switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.trainer-body { display: grid; grid-template-columns: 260px 1fr 330px; min-height: calc(var(--u)*20); }
.moves { list-style: none; margin: 0; padding: var(--u) 0; border-right: 1px solid var(--grid-major); }
.moves button { display: grid; grid-template-columns: 28px 1fr; text-align: left; width: 100%; border: 0; background: none; padding: 0 var(--u); font: 400 15px/24px "Inter", sans-serif; color: var(--ink-soft); cursor: pointer; min-height: 48px; align-items: center; }
.moves button b { font-family: "LM Display", serif; font-weight: 400; font-size: 20px; color: var(--pen); }
.moves button[aria-current="true"] { color: var(--ink); font-weight: 600; background: #f4f8f6; box-shadow: inset 3px 0 0 var(--pen); }
.moves button:disabled { cursor: default; opacity: .55; }
.moves .later { font-family: "Kalam", cursive; color: var(--pen); font-size: 15px; margin-left: 6px; font-weight: 400; }
.work { padding: var(--u); }
.work .q { font-family: "LM", serif; font-size: 18px; margin-bottom: var(--u); }
.work .paper { border: 1px dashed var(--ink-soft); padding: 0 16px; margin-bottom: var(--u); font-size: 15px; }
.work .paper.after { border: 0; border-left: 2.5px solid var(--pen); background: #f4f8f6; }
.work .paper small { display: block; font-size: 12px; color: var(--pen); font-weight: 600; letter-spacing: .02em; }
.steps-list { list-style: none; margin: 0 0 var(--u); padding: 0; counter-reset: k; }
.steps-list li { counter-increment: k; display: grid; grid-template-columns: 28px 1fr; font-size: 15px; color: var(--ink-soft); padding: 0; min-height: 24px; margin-bottom: 12px; }
.steps-list li::before { content: counter(k); font-family: "LM Display", serif; color: var(--pen); }
.steps-list li.now { color: var(--ink); }
.steps-list li.todo { opacity: .35; }
.nextbar { display: flex; gap: 12px; margin-bottom: var(--u); }
.K { display: inline-block; border: 1px solid #c9cacc; background: #fff; border-radius: 4px; padding: 0 6px; font: 600 12px/20px "Inter", sans-serif; color: var(--ink); vertical-align: 1px; }
.M { font-weight: 600; color: var(--ink); }
.T { display: inline-block; background: rgba(11,138,95,.1); border-radius: 4px; padding: 0 6px; font-family: "LM", serif; color: var(--ink); line-height: 22px; }
.screen-col { border-left: 1px solid var(--grid-major); padding: var(--u); display: flex; flex-direction: column; align-items: center; gap: var(--u); background: color-mix(in srgb, var(--grid) 35%, #fff); }
.screen-col svg { width: 100%; max-width: 282px; height: auto; }
.trainer-note { font-size: 13px; color: var(--ink-soft); padding: 12px var(--u); border-top: 1px solid var(--grid-major); line-height: 24px; margin: 0; }

/* ---------- practice (preview) ---------- */
.dash { background: #fff; border: 1.5px solid var(--ink); box-shadow: 0 24px 48px -28px rgba(23,35,63,.45); padding: var(--u); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--u); }
.dash h3 { font-size: 22px; line-height: var(--u); margin-bottom: var(--u); }
.dash .meter { display: grid; grid-template-columns: 1fr 48px; gap: 0 10px; font-size: 14px; line-height: 24px; align-items: center; }
.dash .meter i { display: block; height: 8px; background: var(--grid); border-radius: 4px; overflow: hidden; position: relative; }
.dash .meter i span { position: absolute; inset: 0 auto 0 0; background: var(--c, var(--pen)); border-radius: 4px; }
.dash .meter em { font-style: normal; font-family: "LM", serif; text-align: right; }
.dash .tag { font-size: 14px; line-height: 24px; color: var(--ink-soft); }
.dash .big { font-family: "LM Display", serif; font-size: 64px; line-height: calc(var(--u)*3); color: var(--ink); }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*2); }
.tier { border-top: 1.5px solid var(--ink); padding-top: calc(var(--u) - 1.5px); }
.tier h3 { margin-bottom: var(--u); }
.tier ul { margin: 0 0 var(--u); padding-left: 20px; }
.tier li { color: var(--ink-soft); }
.preview-tag { display: inline-block; font-family: "LM", serif; font-style: italic; color: var(--pen); border: 1.5px solid var(--pen); border-radius: 5px; padding: 0 10px; line-height: 24px; transform: rotate(-3deg); margin-bottom: var(--u); }

/* ---------- prose pages ---------- */
.prose { max-width: 768px; margin: 0 auto; padding: calc(var(--u)*4) var(--gutter) calc(var(--u)*5); position: relative; }
.prose h1 { font-size: clamp(44px, 6vw, 68px); line-height: calc(var(--u)*3); margin: 0 0 var(--u); }
.prose .lede { font-size: 20px; color: var(--ink-soft); margin: 0 0 calc(var(--u)*2); }
.prose h2 { font-size: clamp(30px, 3.4vw, 38px); line-height: calc(var(--u)*2); margin: calc(var(--u)*2) 0 var(--u); }
.prose h3 { font-size: 18px; line-height: var(--u); font-family: "Inter", sans-serif; font-weight: 600; margin: 0; }
.prose p, .prose li { color: #26314d; }
.prose ul { padding-left: 22px; margin: 0 0 var(--u); }
.prose .todo { background: #fff4d6; border-radius: 4px; padding: 1px 6px; color: #7a5200; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; margin: 0 0 var(--u); }
.step .n { font-family: "Kalam", cursive; font-weight: 700; font-size: 32px; line-height: calc(var(--u)*2); color: var(--pen); transform: rotate(-6deg); }
.step p { margin: 0; }
.proof { border-left: 2px solid var(--ink); padding-left: 28px; font-family: "LM", serif; font-size: 19px; }
.proof ol { margin: 0 0 var(--u); padding: 0; list-style: none; counter-reset: c; }
.proof li { counter-increment: c; padding-left: 2.4em; position: relative; margin-bottom: 0; }
.proof li::before { content: "(" counter(c, lower-roman) ")"; position: absolute; left: 0; }
.proof .qed { text-align: right; }

/* ---------- footer ---------- */
footer { background: var(--paper); border-top: 1px solid var(--grid-major); color: var(--ink-soft); font-size: 14px; padding: calc(var(--u)*2 - 1px) 0 calc(var(--u)*2); }
footer .wrap { display: flex; justify-content: space-between; gap: var(--u); flex-wrap: wrap; }
footer a { color: var(--ink-soft); text-decoration: none; margin-right: 20px; }
footer a:hover { color: var(--ink); }
footer p { margin: 0; }
footer b { color: var(--ink); font-family: "LM Display", serif; font-weight: 400; font-size: 20px; }

/* ---------- drawings ---------- */
.write { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.6,.05,.3,1); }
.write.on { clip-path: inset(0 0 0 0); }
.plane .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.plane .fade { opacity: 0; }
.plane.ready .draw { animation: draw 1s cubic-bezier(.5,0,.2,1) .15s forwards; }
.plane.ready .draw.slow { animation-duration: 1.9s; animation-delay: .7s; }
.plane.ready .fade { animation: fade .7s ease .9s forwards; }
.plane.ready .fade.late { animation-delay: 2.5s; }
.plane.instant .draw, .plane.instant .fade { animation: none; stroke-dashoffset: 0; opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
svg.live { position: absolute; pointer-events: none; z-index: -1; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .write { clip-path: none; transition: none; }
  .plane .draw, .plane .fade { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
}

/* ---------- small screens ---------- */
@media (max-width: 1000px) {
  .trainer-body { grid-template-columns: 1fr; }
  .moves { border-right: 0; border-bottom: 1px solid var(--grid-major); display: flex; overflow-x: auto; padding: 0; }
  .moves button { white-space: nowrap; }
  .screen-col { border-left: 0; border-top: 1px solid var(--grid-major); }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  section { padding: calc(var(--u)*3) 0; }
  .hero { min-height: auto; display: block; }
  .hero .wrap { padding-top: calc(var(--u)*2); padding-bottom: var(--u); }
  .hero h1 { line-height: calc(var(--u)*2); }
  h2 { line-height: calc(var(--u)*2); }
  .plane { position: relative; height: 360px; }
  .margin-mark, .turn-over, svg.live.wide { display: none; }
  .refs { grid-template-columns: 1fr; }
  .principle, .me, .product, .tiers, .dash { grid-template-columns: 1fr; gap: calc(var(--u)*2); }
  .course-art { position: relative; right: auto; top: auto; width: 60%; max-width: 264px; margin-bottom: var(--u); }
  .course-head h1 { line-height: calc(var(--u)*2); }
  .nav .wrap { height: auto; flex-direction: column; align-items: stretch; gap: 0; padding-top: 12px; }
  .brand { align-self: flex-start; font-size: 28px; line-height: 36px; }
  .tab { padding: 6px 10px; font-size: 14px; }
  .edge { width: 48px; }
  .edge.r { left: var(--edge-r, calc(100% - 48px)); background-position: -120.5px calc(-0.5px - var(--shift)), 0 0; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .prices span { display: none; } .desk { height: calc(var(--u)*16); } }

.hero .lede { max-width: 29em; }
.refs { grid-template-columns: repeat(2, minmax(0, 17em)); }
#me { padding-bottom: calc(var(--u)*11); }
@media (max-width: 900px) { #me { padding-bottom: calc(var(--u)*3); } }
.block { overflow: visible; }
@media (max-width: 900px) { .refs { grid-template-columns: 1fr; } }

/* NumWorks in the trainer: the student presses every key; the screens come from the official emulator */
.nwc { width: 100%; max-width: 288px; background: #f4f4f2; border: 1px solid #d5d6d8; border-radius: 26px; padding: 18px 16px 18px; box-shadow: 0 14px 30px -18px rgba(23,35,63,.45); user-select: none; }
.nwc.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.nwc-screen { background: #2b2d31; border-radius: 6px; padding: 5px; margin-bottom: 14px; }
.nwc-screen img { width: 100%; height: auto; display: block; border-radius: 2px; image-rendering: auto; }
.nwc button { font: 600 12px/1 "Inter", sans-serif; color: #2b2d31; background: #fff; border: 1px solid #c9cacc; border-radius: 9px; cursor: pointer; padding: 0; box-shadow: 0 1px 0 #c9cacc; }
.nwc button:active { transform: translateY(1px); box-shadow: none; background: #eef1f4; }
.nwc button:focus-visible { outline: 2px solid var(--pen); }
.nwc-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
.dpad { position: relative; width: 84px; height: 84px; }
.dpad button { position: absolute; width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.dpad .u { left: 27px; top: 0; } .dpad .d { left: 27px; bottom: 0; } .dpad .l { left: 0; top: 27px; } .dpad .r { right: 0; top: 27px; }
.nwc-top .mid { display: grid; gap: 8px; justify-items: center; }
.nwc .home { width: 46px; height: 28px; background: #ffb734; border-color: #e09a16; color: #fff; font-size: 15px; }
.nwc .on { width: 46px; height: 28px; background: #2b2d31; border-color: #111; color: #fff; }
.nwc-top .okb { display: flex; gap: 6px; justify-content: flex-end; }
.nwc .ok, .nwc .back { width: 38px; height: 38px; border-radius: 50%; }
.nwc-fn { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
.nwc-fn button { height: 24px; border-radius: 12px; font-size: 11px; }
.nwc-num { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.nwc-num button { height: 30px; font-size: 14px; border-radius: 12px; }
.hint { font-size: 15px; color: var(--ink); background: #f4f8f6; border-left: 2.5px solid var(--pen); padding: 0 14px; margin-bottom: var(--u); min-height: 48px; padding-top: 12px; }
.hint .miss { color: #b4442b; }
.progress { height: 4px; background: var(--grid); border-radius: 2px; margin-bottom: var(--u); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--pen); transition: width .25s ease; }

/* scraps: small pieces of IB work scattered in the margins, as on a teacher's desk */
.scrap { position: absolute; z-index: 0; pointer-events: none; line-height: 24px; white-space: nowrap; opacity: .78; }
.scrap .q { font-family: "LM", serif; font-size: 15px; color: var(--ink-soft); display: block; }
.scrap .s { font-family: "Kalam", cursive; font-size: 17px; color: #33415f; display: block; }
.scrap .m { font-family: "Kalam", cursive; font-weight: 700; font-size: 16px; color: var(--pen); margin-left: 10px; }
.scrap .x { text-decoration: line-through; text-decoration-color: var(--pen); }
@media (max-width: 1100px) { .scrap { display: none; } }

/* about me: a letter, a photograph, a card */
.polaroid { position: relative; background: #fff; padding: 12px 12px 48px; box-shadow: 0 1px 1px rgba(23,35,63,.12), 0 18px 36px -16px rgba(23,35,63,.4); transform: rotate(2.5deg); width: 240px; margin: 0 0 calc(var(--u)*2) auto; }
.polaroid .ph { aspect-ratio: 1 / 1.1; background: repeating-linear-gradient(0deg, transparent 0 11px, rgba(198,216,232,.6) 11px 12px), repeating-linear-gradient(90deg, transparent 0 11px, rgba(198,216,232,.6) 11px 12px), #f6f8fa; display: grid; place-items: center; font-family: "LM Display", serif; font-size: 64px; color: #b8c6d6; }
.polaroid img { width: 100%; height: auto; display: block; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: "Kalam", cursive; color: var(--ink); font-size: 18px; line-height: 24px; }
.polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: rgba(240,226,180,.75); transform: rotate(-3deg); }
.card { border: 1.5px solid var(--ink); background: rgba(251,252,253,.92); padding: calc(var(--u) - 1.5px) var(--u); position: relative; }
.card-label { position: absolute; top: -13px; left: 18px; background: var(--paper); padding: 0 8px; font-family: "LM", serif; font-style: italic; font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.ps { font-family: "Kalam", cursive; font-size: 19px; color: var(--ink); line-height: 24px; margin-top: var(--u); }
.ps b { color: var(--pen); font-weight: 700; }
.original { border: 1.5px solid var(--ink); padding: calc(var(--u) - 1.5px) var(--u); background: rgba(251,252,253,.92); position: relative; }

.card .cv { border-top: 0; }
.card .cv li:last-child { border-bottom: 0; }
.course-head .wrap { position: relative; }

/* ================= the game layer ================= */
:root { --arena: #0d1530; --arena-2: #15214a; --gold: #d8b45a; }
/* HUD in the trainer */
.trainer-body { position: relative; overflow: hidden; }
.hud { display: flex; align-items: center; gap: 10px; font: 600 13px/24px "Inter", sans-serif; color: var(--ink); margin-left: auto; margin-right: var(--u); }
.hud .lv { background: var(--arena); color: #fff; border-radius: 4px; padding: 0 8px; letter-spacing: .04em; }
.hud .xpbar { width: 120px; height: 6px; background: var(--grid); border-radius: 3px; overflow: hidden; }
.hud .xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pen), #35c48f); transition: width .4s ease; }
.hud .xp { color: var(--ink-soft); font-weight: 400; }
.hud .combo { color: #b0700f; font-family: "Kalam", cursive; font-size: 18px; animation: pop .3s ease; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.moves .st { color: var(--gold); margin-left: 8px; font-size: 13px; letter-spacing: 1px; }
.moves .st em { font-style: normal; color: #d9dde3; }
.win { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13,21,48,.0); transition: background .3s ease; z-index: 5; }
.win.in { background: rgba(13,21,48,.55); }
.win-card { background: linear-gradient(160deg, var(--arena-2), var(--arena)); color: #fff; border: 1px solid rgba(216,180,90,.6); border-radius: 14px; padding: 24px 32px; min-width: 340px; text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); transform: scale(.85); opacity: 0; transition: transform .35s cubic-bezier(.2,1.4,.4,1), opacity .25s ease; }
.win.in .win-card { transform: scale(1); opacity: 1; }
.win-k { font: 600 12px/24px "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0; }
.win-card h4 { font-family: "LM Display", serif; font-weight: 400; font-size: 30px; line-height: 48px; margin: 0; }
.win-stars { font-size: 40px; line-height: 48px; margin: 0 0 12px; letter-spacing: 6px; }
.win-stars span { color: rgba(255,255,255,.18); display: inline-block; }
.win-stars span.on { color: var(--gold); animation: starIn .5s cubic-bezier(.2,1.6,.4,1) both; text-shadow: 0 0 18px rgba(216,180,90,.6); }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
.win-card dl { display: flex; justify-content: center; gap: 24px; margin: 0 0 18px; }
.win-card dt { font-size: 12px; color: rgba(255,255,255,.6); line-height: 24px; }
.win-card dd { margin: 0; font-family: "LM", serif; font-size: 22px; line-height: 24px; }
.win-btns { display: flex; gap: 10px; justify-content: center; }
.win .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); background: transparent; }
.win .btn-primary { background: var(--gold); color: var(--arena); }
.conf { position: absolute; top: -40px; font-family: "LM", serif; animation: fall 1.7s cubic-bezier(.3,.6,.5,1) forwards; pointer-events: none; z-index: 6; }
@keyframes fall { to { transform: translateY(520px) rotate(220deg); opacity: 0; } }

/* the arena: a dark band, like a console's home screen */
.arena { background: radial-gradient(1200px 400px at 70% 0%, #1f2f66 0%, transparent 60%), linear-gradient(180deg, var(--arena) 0%, #0a1126 100%); color: #fff; overflow: hidden; }
.arena::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: var(--u) var(--u); background-position: -1px calc(-1px - var(--shift)); pointer-events: none; }
.arena h2 { color: #fff; }
.arena .lede-2 { color: rgba(255,255,255,.7); }
.arena .note { color: #5fd3a5; }
.arena-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--u); flex-wrap: wrap; }
.player { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px 16px 6px 6px; margin-bottom: calc(var(--u)*2); }
.player .av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #a07b2a); display: grid; place-items: center; font-family: "LM Display", serif; color: var(--arena); font-size: 20px; }
.player b { display: block; font-size: 14px; line-height: 18px; }
.player span { font-size: 12px; line-height: 18px; color: rgba(255,255,255,.65); }
.modes { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 18px; perspective: 1200px; }
.mode { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: calc(var(--u)*14); border-radius: 14px; padding: 20px; text-decoration: none; color: #fff; overflow: hidden; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 20px 40px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s ease; outline: none; }
.mode:hover, .mode:focus-visible { transform: translateY(-8px) scale(1.03); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(95,211,165,.45), 0 40px 70px -24px rgba(0,0,0,.9); }
.mode svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; transition: transform .6s ease; }
.mode:hover svg, .mode:focus-visible svg { transform: scale(1.06); }
.mode .tag { position: absolute; top: 16px; left: 16px; font: 600 11px/22px "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 0 9px; border-radius: 4px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.mode .tag.gold { background: var(--gold); color: var(--arena); }
.mode h3 { position: relative; font-size: 30px; line-height: 36px; color: #fff; }
.mode p { position: relative; margin: 4px 0 0; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.78); max-width: 22em; }
.mode::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(5,10,25,.75) 100%); pointer-events: none; }
.mode > * { z-index: 1; }
.mode .shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%); transform: translateX(-60%); transition: transform .9s ease; z-index: 1; pointer-events: none; }
.mode:hover .shine, .mode:focus-visible .shine { transform: translateX(60%); }
.hint-keys { font-size: 12px; color: rgba(255,255,255,.5); margin-top: var(--u); }
.hint-keys kbd { font: 600 11px/18px "Inter", sans-serif; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 0 6px; margin: 0 2px; }

/* the player card, in the manner of a football game's rated cards */
.fut { display: grid; grid-template-columns: 300px 1fr; gap: calc(var(--u)*2); align-items: start; }
.card-fut { position: relative; width: 300px; height: 432px; clip-path: polygon(50% 0, 100% 7%, 100% 82%, 50% 100%, 0 82%, 0 7%); background: linear-gradient(155deg, #f3e2a8 0%, var(--gold) 38%, #9c7426 100%); padding: 6px; filter: drop-shadow(0 30px 40px rgba(13,21,48,.45)); }
.card-fut .in { height: 100%; clip-path: polygon(50% 0, 100% 7%, 100% 82%, 50% 100%, 0 82%, 0 7%); background: radial-gradient(260px 200px at 30% 15%, #26386f, transparent), linear-gradient(170deg, var(--arena-2), var(--arena)); color: #fff; padding: 36px 26px 0; position: relative; }
.card-fut .ovr { font-family: "LM Display", serif; font-size: 64px; line-height: 64px; color: var(--gold); }
.card-fut .pos { font: 600 14px/24px "Inter", sans-serif; letter-spacing: .1em; color: #fff; }
.card-fut .glyph { position: absolute; right: 22px; top: 40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(255,255,255,.02)); display: grid; place-items: center; font-family: "LM", serif; font-style: italic; font-size: 84px; color: rgba(255,255,255,.85); }
.card-fut .name { margin-top: 48px; text-align: center; font-family: "LM Display", serif; font-size: 28px; line-height: 36px; border-bottom: 1px solid rgba(216,180,90,.5); padding-bottom: 6px; }
.card-fut .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 12px 8px 0; }
.card-fut .stats div { display: flex; justify-content: space-between; font: 600 14px/28px "Inter", sans-serif; }
.card-fut .stats b { font-family: "LM", serif; font-weight: 400; font-size: 20px; color: var(--gold); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0 0 var(--u); }
.badge { border: 1.5px solid var(--ink); border-radius: 12px; padding: 12px 14px; background: #fff; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.badge i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: "LM", serif; font-size: 20px; color: var(--arena); background: linear-gradient(135deg, #f3e2a8, var(--gold)); }
.badge.locked { opacity: .5; } .badge.locked i { background: var(--grid); color: var(--ink-soft); }
.badge b { font-size: 14px; line-height: 18px; display: block; } .badge span { font-size: 12px; line-height: 18px; color: var(--ink-soft); }
.lvl { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font: 600 14px/24px "Inter", sans-serif; margin-bottom: var(--u); }
.lvl i { height: 10px; background: var(--grid); border-radius: 5px; overflow: hidden; display: block; }
.lvl i span { display: block; height: 100%; width: 64%; background: linear-gradient(90deg, var(--pen), #35c48f); }
@media (max-width: 900px) { .modes { grid-template-columns: 1fr 1fr; } .mode { height: calc(var(--u)*10); } .fut { grid-template-columns: 1fr; } .card-fut { margin: 0 auto; } }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mode svg { height: 72%; } .mode h3 { font-size: 26px; } }
@media (hover: none) { .hint-keys { display: none; } }

/* ================= bubbles: every piece of content sits in a bubble of tinted graph paper =================
   The page itself is the white and blue sheet; around the bubbles it carries small pieces of IB work.
   Light bubbles are for reading and deciding; the bold "play" bubble is for doing and scoring. */
.bubble { position: relative; isolation: isolate; border-radius: 40px; padding: calc(var(--u)*2) calc(var(--u)*2) var(--u);
  background-color: var(--bb);
  background-image: linear-gradient(var(--bgm) 1px, transparent 1px), linear-gradient(90deg, var(--bgm) 1px, transparent 1px),
                    linear-gradient(var(--bgl) 1px, transparent 1px), linear-gradient(90deg, var(--bgl) 1px, transparent 1px);
  background-size: calc(var(--u)*5) calc(var(--u)*5), calc(var(--u)*5) calc(var(--u)*5), var(--u) var(--u), var(--u) var(--u);
  background-position: var(--bx5, 0) var(--by5, 0), var(--bx5, 0) var(--by5, 0), var(--bx, 0) var(--by, 0), var(--bx, 0) var(--by, 0);
  box-shadow: inset 0 0 0 1.5px var(--bline), 0 36px 60px -44px rgba(23,35,63,.45); }
.b-green { --bb: #f2f8f4; --bgl: #d9ecdf; --bgm: #bfdcca; --bline: #a3cdb3; }
.b-blue  { --bb: #f1f6fb; --bgl: #dbe6f2; --bgm: #c0d3e8; --bline: #a9c3de; }
.b-sand  { --bb: #faf5ec; --bgl: #eee4d2; --bgm: #e0d0b4; --bline: #d4bf99; }
.b-play  { --bb: #111a3a; --bgl: rgba(255,255,255,.05); --bgm: rgba(255,255,255,.09); --bline: rgba(216,180,90,.55); color: #fff;
  background-color: #111a3a; box-shadow: inset 0 0 0 1.5px var(--bline), 0 40px 70px -40px rgba(13,21,48,.8); }
.b-play::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(900px 360px at 75% 0%, rgba(58,80,170,.45), transparent 65%), radial-gradient(600px 300px at 0% 100%, rgba(11,138,95,.22), transparent 70%); }
.b-play h2, .b-play h3 { color: #fff; } .b-play .lede-2 { color: rgba(255,255,255,.72); } .b-play .note { color: #5fd3a5; }
.b-play .framed::before, .b-play .framed::after, .b-play .framed .c2, .b-play .framed .c3 { border-color: #fff; }
.bubbles-gap { height: calc(var(--u)*5); }
section.bubble-sec { padding: calc(var(--u)*3) 0; }
main.catalogue > .block.bubble, main .bubble + .bubble { margin-top: calc(var(--u)*4); }
.catalogue > .block.bubble { padding-top: calc(var(--u)*2); }
@media (max-width: 900px) { .bubble { border-radius: 28px; padding: var(--u) var(--u) 1px; } section.bubble-sec { padding: calc(var(--u)*2) 0; } }
.arena.bubble-sec { background: none; color: inherit; overflow: visible; } .arena.bubble-sec::before { display: none; }

/* the margins: small IB fragments and drawings that sit exactly on the lines of the sheet */
.margins { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.margins > * { position: absolute; white-space: nowrap; line-height: 24px; }
.mg-t .q { font-family: "LM", serif; font-size: 15px; color: #56627c; display: block; }
.mg-t .s { font-family: "Kalam", cursive; font-size: 17px; color: #2f3d5c; display: block; }
.mg-t .m { font-family: "Kalam", cursive; font-weight: 700; font-size: 17px; color: var(--pen); margin-left: 10px; }
.mg-t .x { text-decoration: line-through; text-decoration-color: var(--pen); }
.mg-t, .mg-f { opacity: 0; transition: opacity .8s ease; } .margins.on .mg-t { opacity: .8; } .margins.on .mg-f { opacity: .75; }
.mg-f { overflow: visible; }
.mg-f .ink { stroke: #2f3d5c; fill: none; stroke-width: 1.4; stroke-linecap: round; }
.mg-f .pen { stroke: var(--pen); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.mg-f .dot { fill: var(--pen); } .mg-f .hole { fill: #fbfcfd; stroke: var(--pen); stroke-width: 1.6; }
.mg-f text { font-family: "LM", serif; font-size: 14px; fill: #4b5672; } .mg-f text.h { font-family: "Kalam", cursive; fill: var(--pen); font-size: 16px; }
.mg-f .shade { fill: rgba(11,138,95,.12); stroke: none; }

/* the edges of the sheet, denser and stronger */
.edge { width: 216px; }
.edge.l { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='24'%3E%3Cg fill='%237f9cbb'%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='0' cy='24' r='2'/%3E%3Ccircle cx='0' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='0' r='1.8'/%3E%3Ccircle cx='12' cy='24' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='24' cy='0' r='1.6'/%3E%3Ccircle cx='24' cy='24' r='1.6'/%3E%3Ccircle cx='24' cy='12' r='1.25'/%3E%3Ccircle cx='36' cy='0' r='1.35'/%3E%3Ccircle cx='36' cy='24' r='1.35'/%3E%3Ccircle cx='36' cy='12' r='1'/%3E%3Ccircle cx='48' cy='0' r='1.15'/%3E%3Ccircle cx='48' cy='24' r='1.15'/%3E%3Ccircle cx='48' cy='12' r='.8'/%3E%3Ccircle cx='60' cy='0' r='.95'/%3E%3Ccircle cx='60' cy='24' r='.95'/%3E%3Ccircle cx='72' cy='0' r='.8'/%3E%3Ccircle cx='72' cy='24' r='.8'/%3E%3Ccircle cx='72' cy='12' r='.5'/%3E%3Ccircle cx='96' cy='0' r='.62'/%3E%3Ccircle cx='96' cy='24' r='.62'/%3E%3Ccircle cx='120' cy='0' r='.48'/%3E%3Ccircle cx='120' cy='24' r='.48'/%3E%3Ccircle cx='144' cy='0' r='.36'/%3E%3Ccircle cx='144' cy='24' r='.36'/%3E%3C/g%3E%3C/svg%3E") -0.5px calc(-0.5px - var(--shift)) / 216px 24px repeat-y,
  linear-gradient(to right, var(--paper) 0, var(--paper) 30px, rgba(251,252,253,0) 170px); }
.edge.r { left: var(--edge-r, calc(100% - 216px)); background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='24'%3E%3Cg fill='%237f9cbb'%3E%3Ccircle cx='216' cy='0' r='2'/%3E%3Ccircle cx='216' cy='24' r='2'/%3E%3Ccircle cx='216' cy='12' r='1.7'/%3E%3Ccircle cx='204' cy='0' r='1.8'/%3E%3Ccircle cx='204' cy='24' r='1.8'/%3E%3Ccircle cx='204' cy='12' r='1.5'/%3E%3Ccircle cx='192' cy='0' r='1.6'/%3E%3Ccircle cx='192' cy='24' r='1.6'/%3E%3Ccircle cx='192' cy='12' r='1.25'/%3E%3Ccircle cx='180' cy='0' r='1.35'/%3E%3Ccircle cx='180' cy='24' r='1.35'/%3E%3Ccircle cx='180' cy='12' r='1'/%3E%3Ccircle cx='168' cy='0' r='1.15'/%3E%3Ccircle cx='168' cy='24' r='1.15'/%3E%3Ccircle cx='168' cy='12' r='.8'/%3E%3Ccircle cx='156' cy='0' r='.95'/%3E%3Ccircle cx='156' cy='24' r='.95'/%3E%3Ccircle cx='144' cy='0' r='.8'/%3E%3Ccircle cx='144' cy='24' r='.8'/%3E%3Ccircle cx='144' cy='12' r='.5'/%3E%3Ccircle cx='120' cy='0' r='.62'/%3E%3Ccircle cx='120' cy='24' r='.62'/%3E%3Ccircle cx='96' cy='0' r='.48'/%3E%3Ccircle cx='96' cy='24' r='.48'/%3E%3Ccircle cx='72' cy='0' r='.36'/%3E%3Ccircle cx='72' cy='24' r='.36'/%3E%3C/g%3E%3C/svg%3E") -0.5px calc(-0.5px - var(--shift)) / 216px 24px repeat-y,
  linear-gradient(to left, var(--paper) 0, var(--paper) 30px, rgba(251,252,253,0) 170px); }
@media (max-width: 900px) { .edge { width: 60px; } .edge.r { left: var(--edge-r, calc(100% - 60px)); background-position: -156.5px calc(-0.5px - var(--shift)), 0 0; } }

/* ================= Mark it ================= */
.mk { position: relative; }
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: calc(var(--u)*2); }
.mk-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; min-height: 96px; }
.mk-stat span { font: 600 11px/18px "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mk-stat b { font-family: "LM Display", serif; font-weight: 400; font-size: 36px; line-height: 44px; color: #fff; }
.mk-stat em { font-style: normal; font-size: 12px; line-height: 18px; color: rgba(255,255,255,.6); }
.mk-title b { color: var(--gold); font-size: 28px; }
.mk-title i { display: block; height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; margin: 2px 0 4px; }
.mk-title i span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #f3e2a8); transition: width .5s ease; }
.mk-league { opacity: .7; } .mk-league b { font-size: 26px; color: rgba(255,255,255,.75); }
.mk-grid { display: grid; grid-template-columns: 290px 1fr; gap: 20px; align-items: start; }
.mk-tree { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px; max-height: 1100px; overflow: auto; }
.mk-notion { margin-bottom: 14px; } .mk-notion.locked { opacity: .45; }
.mk-nh { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; line-height: 24px; }
.mk-nh b { font-family: "LM Display", serif; font-weight: 400; font-size: 20px; }
.mk-nh span { font: 600 12px/24px "Inter", sans-serif; color: rgba(255,255,255,.65); }
.mk-lock { font-family: "Kalam", cursive !important; color: #5fd3a5 !important; font-size: 15px !important; }
.mk-bar { display: block; height: 5px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; margin: 2px 0 8px; }
.mk-bar span { display: block; height: 100%; background: linear-gradient(90deg, #0b8a5f, #5fd3a5); transition: width .5s ease; }
.mk-sub { margin: 6px 0 10px 10px; }
.mk-sh { font-size: 13px; line-height: 20px; color: rgba(255,255,255,.75); }
.mk-sh .mk-bar { height: 3px; margin: 3px 0 4px; }
.mk-sub ul { list-style: none; margin: 0; padding: 0; }
.mk-sub button { display: grid; grid-template-columns: 14px 1fr; gap: 0 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; color: #fff; font: 400 14px/20px "Inter", sans-serif; padding: 6px 8px; cursor: pointer; }
.mk-sub button em { grid-column: 2; font-style: normal; font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .04em; }
.mk-sub button:hover { background: rgba(255,255,255,.07); }
.mk-sub button[aria-current="true"] { background: rgba(95,211,165,.16); box-shadow: inset 3px 0 0 #5fd3a5; }
.mk-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); margin-top: 5px; }
.mk-dot.half { background: linear-gradient(90deg, #5fd3a5 50%, transparent 50%); border-color: #5fd3a5; } .mk-dot.on { background: #5fd3a5; border-color: #5fd3a5; }
.mk-pane { position: relative; background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); min-height: 480px; overflow: hidden; }
.mk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--grid-major); flex-wrap: wrap; }
.mk-crumb { font-size: 12px; line-height: 18px; color: var(--ink-soft); margin: 0; letter-spacing: .02em; }
.mk-head h3 { font-size: 26px; line-height: 36px; color: var(--ink); }
.mk-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mk-tags span, .mk-pdf { font: 600 12px/24px "Inter", sans-serif; border: 1px solid var(--grid-major); border-radius: 6px; padding: 0 8px; color: var(--ink-soft); text-decoration: none; }
.mk-tags span:nth-child(2) { color: #b0841f; }
.mk-pdf { color: var(--ink); border-color: var(--ink); } .mk-pdf:hover { background: var(--ink); color: #fff; }
.mk-body { display: grid; grid-template-columns: 1fr 210px; }
.mk-paper { padding: 18px 22px 24px; font-family: "LM", serif; font-size: 18px; line-height: 24px; border-right: 1px solid var(--grid-major);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 24px; background-position: 0 17px; }
.mk-paper p { margin: 0 0 12px; }
.mk-mm { font-size: 15px; color: var(--ink-soft); text-align: right; }
.mk-graph { width: 100%; max-width: 420px; display: block; margin: 6px auto 14px; }
.mk-graph .gl { stroke: #dde6ef; stroke-width: 1; } .mk-graph .ax { stroke: #17233f; stroke-width: 1.4; }
.mk-graph .cv { fill: none; stroke: #0b8a5f; stroke-width: 2.4; } .mk-graph text { font-family: "LM", serif; font-size: 14px; fill: #17233f; paint-order: stroke; stroke: #fff; stroke-width: 4px; } .mk-graph .lab { fill: #0b8a5f; font-style: italic; font-size: 16px; }
.mk-part { border: 1.5px solid transparent; border-radius: 12px; padding: 8px 10px; margin: 0 -10px 10px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.mk-part.on { border-color: #3a3f9e; background: rgba(58,63,158,.04); }
.mk-part.ok { border-color: rgba(11,138,95,.5); background: rgba(11,138,95,.05); }
.mk-part.shown { border-color: rgba(176,112,15,.45); background: rgba(216,180,90,.07); }
.mk-q { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 4px; }
.mk-val { color: var(--ink-soft); }
.mk-lines { list-style: none; margin: 8px 0 0 2.2em; padding: 0; }
.mk-lines li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; margin-bottom: 6px; animation: pop .25s ease; }
.mk-lines input { font: 400 17px/24px "Kalam", cursive; color: var(--ink); border: 0; border-bottom: 1.5px dashed var(--grid-major); background: transparent; padding: 2px 4px; outline: none; width: 100%; }
.mk-lines input:focus { border-bottom-color: #3a3f9e; }
.mk-chip { font: 700 15px/28px "Kalam", cursive; color: #fff; background: var(--pen); border: 0; border-radius: 14px; cursor: pointer; padding: 0; }
.mk-chip:disabled { cursor: default; opacity: .85; }
.mk-empty { font: 400 14px/20px "Inter", sans-serif; color: var(--ink-soft); margin: 6px 0 0 2.2em !important; font-style: italic; }
.mk-fb { margin-left: 2.2em; font-family: "Inter", sans-serif; font-size: 14px; }
.mk-ok { color: var(--pen); font-weight: 600; margin: 6px 0 !important; } .mk-ok b { font-family: "Kalam", cursive; font-size: 18px; }
.mk-no { color: #a2541a; font-weight: 600; margin: 6px 0 !important; }
.mk-tip { color: var(--ink-soft); margin: 0 !important; }
.mk-ms { border-left: 2.5px solid var(--pen); background: #f4f8f6; padding: 6px 12px; margin: 6px 0; font-family: "LM", serif; font-size: 16px; }
.mk-ms b { font: 600 11px/20px "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--pen); }
.mk-ms div { display: flex; justify-content: space-between; gap: 12px; line-height: 24px; }
.mk-ms em { font: 600 13px/24px "Inter", sans-serif; font-style: normal; color: var(--pen); white-space: nowrap; }
.mk-ms p { font: 400 13px/20px "Inter", sans-serif; color: var(--ink-soft); margin: 4px 0 0 !important; }
.mk-palette { padding: 18px 16px; position: sticky; top: 90px; align-self: start; }
.mk-palette p { font: 600 12px/18px "Inter", sans-serif; color: var(--ink-soft); margin: 0 0 10px; letter-spacing: .02em; }
.mk-bubbles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.mk-b { font: 700 18px/1 "Kalam", cursive; height: 52px; border-radius: 26px; border: 0; cursor: pointer; color: #fff; box-shadow: 0 6px 14px -6px rgba(23,35,63,.5), inset 0 -3px 0 rgba(0,0,0,.18); transition: transform .15s ease; }
.mk-b:hover { transform: translateY(-2px) scale(1.04); } .mk-b:active { transform: scale(.95); }
.mk-b.pop { animation: pop .3s ease; }
.mk-M { background: linear-gradient(160deg, #4a50b8, #2c3080); } .mk-A { background: linear-gradient(160deg, #13a571, #0a6e4b); }
.mk-R { background: linear-gradient(160deg, #d29a2e, #9c6d12); } .mk-N { background: linear-gradient(160deg, #8a4b9e, #5c2c6e); }
.mk-b[data-m="AG"] { background: linear-gradient(160deg, #5a6478, #333b4d); grid-column: span 2; height: 40px; }
.mk-help { font-weight: 400 !important; font-size: 11px !important; line-height: 16px !important; }
.mk-palette .btn { width: 100%; text-align: center; margin-bottom: 8px; border: 0; cursor: pointer; font-family: "Inter", sans-serif; }
.mk-burst { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font: 700 44px/1 "Kalam", cursive; color: var(--pen); text-shadow: 0 2px 0 #fff; animation: rise 1.6s ease forwards; pointer-events: none; z-index: 7; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -120%) scale(1); } }
.mk-flash { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 14px; padding: 8px 14px; border-radius: 8px; z-index: 7; }
@media (max-width: 1000px) { .mk-grid { grid-template-columns: 1fr; } .mk-tree { max-height: none; } .mk-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .mk-body { grid-template-columns: 1fr; } .mk-paper { border-right: 0; } .mk-palette { position: sticky; bottom: 0; top: auto; background: #fff; border-top: 1px solid var(--grid-major); padding: 10px 12px; }
  .mk-bubbles { grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; } .mk-b { height: 40px; font-size: 16px; } .mk-b[data-m="AG"] { grid-column: auto; height: 40px; } .mk-help { display: none; } }
.ladder { list-style: none; margin: 0 0 var(--u); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ladder li { border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 12px; font-size: 13px; line-height: 30px; background: #fff; }
.ladder li b { font-weight: 600; margin-right: 6px; } .ladder li span { color: var(--ink-soft); }
.prose.bubble { margin-top: calc(var(--u)*4); margin-bottom: calc(var(--u)*5); padding: calc(var(--u)*3) calc(var(--u)*3) var(--u); }
@media (max-width: 900px) { .prose.bubble { margin: calc(var(--u)*2) var(--u) calc(var(--u)*3); padding: calc(var(--u)*2) var(--u) 1px; } }
.b-play .tier li, .b-play .soon { color: rgba(255,255,255,.75); }
.b-play .trainer { color: var(--ink); }
.b-play .trainer-note { color: var(--ink-soft); }
body > .margins { position: absolute; z-index: 0; }
/* room on the sheet around the bubbles, for the margins */
.bubble { max-width: 1056px; margin-left: auto; margin-right: auto; }
section.bubble-sec { padding: calc(var(--u)*4) 0; }
main.catalogue > .block.bubble { margin-top: calc(var(--u)*8); }
main.catalogue > .block.bubble:first-child { margin-top: calc(var(--u)*5); }
.catalogue { padding-bottom: calc(var(--u)*8); }
.ask { max-width: 1056px; margin-left: auto; margin-right: auto; padding: 0 var(--u); }
@media (max-width: 900px) { section.bubble-sec { padding: calc(var(--u)*2) 0; } main.catalogue > .block.bubble { margin-top: calc(var(--u)*4); } }
.prose.bubble svg.live.wide { display: none; }
@media (max-width: 1000px) { .mk-grid .mk-pane { order: -1; } }
.b-play .trainer h3 { color: var(--ink); }
/* finer margins */
.mg-f .ink { stroke: #3a4868; stroke-width: 1; }
.mg-f .pen { stroke: var(--pen); stroke-width: 1.15; }
.mg-f .thin { stroke: #6b7894; fill: none; stroke-width: .8; }
.mg-f .dash { stroke: #6b7894; fill: none; stroke-width: .8; stroke-dasharray: 3 3; }
.mg-f .dot { fill: #3a4868; } .mg-f .dot.faint { fill: #9fb2c8; }
.mg-f .shade { fill: rgba(11,138,95,.08); }
.mg-f text.lb { font-family: "LM", serif; font-style: italic; font-size: 13px; fill: #4b5672; }
.mg-f text.h { font-family: "Kalam", cursive; font-size: 14px; fill: var(--pen); }
.margins.on .mg-f { opacity: .82; } .margins.on .mg-t { opacity: .7; }
/* one light tint for every reading bubble, a little denser */
.b-green, .b-blue, .b-sand { --bb: #ecf4ef; --bgl: #d2e5d9; --bgm: #b4d2bf; --bline: #98c2a9; }
/* Mark it: choosing the course, levels, locks, recognised lines */
.mk-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: calc(var(--u)*1.5); }
.mk-course { display: flex; flex-direction: column; gap: 4px; }
.mk-course button { text-align: left; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.18); border-radius: 14px; padding: 12px 14px; color: #fff; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.mk-course button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.4); }
.mk-course.on button { background: rgba(95,211,165,.14); border-color: #5fd3a5; box-shadow: 0 0 0 4px rgba(95,211,165,.15); }
.mk-course b { font-family: "LM Display", serif; font-weight: 400; font-size: 26px; line-height: 32px; }
.mk-course span { grid-column: 1 / -1; font-size: 12px; line-height: 18px; color: rgba(255,255,255,.65); }
.mk-course em { grid-row: 1; grid-column: 2; align-self: center; font: 600 10px/20px "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; font-style: normal; border-radius: 4px; padding: 0 7px; }
.mk-course a { font-size: 12px; line-height: 20px; color: rgba(255,255,255,.6); text-decoration: none; padding-left: 4px; }
.mk-course a:hover { color: #fff; }
.tier-free { background: rgba(255,255,255,.14); color: #fff; } .tier-premium { background: #c9d3e6; color: #17233f; } .tier-excellence { background: var(--gold); color: var(--arena); }
.mk-sub em .tier-premium, .mk-sub em .tier-excellence { padding: 0 5px; border-radius: 3px; font-size: 10px; }
.mk-stats { grid-template-columns: repeat(5, 1fr); }
.mk-sub button.locked { color: rgba(255,255,255,.5); cursor: pointer; }
.mk-padlock { width: 10px; height: 10px; margin-top: 5px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 2px; position: relative; display: inline-block; }
.mk-padlock::before { content: ""; position: absolute; left: 1px; top: -6px; width: 5px; height: 5px; border: 1.5px solid rgba(255,255,255,.5); border-bottom: 0; border-radius: 4px 4px 0 0; }
.mk-padlock.big { width: 28px; height: 22px; border-color: var(--ink); border-width: 2px; margin: 0 0 12px; } .mk-padlock.big::before { width: 14px; height: 12px; left: 5px; top: -14px; border-color: var(--ink); border-width: 2px; border-radius: 8px 8px 0 0; }
.mk-locked { padding: calc(var(--u)*3) calc(var(--u)*2); text-align: center; } .mk-locked h3 { color: var(--ink); margin-bottom: 12px; } .mk-locked p { color: var(--ink-soft); }
.mk-loading { padding: var(--u); color: var(--ink-soft); }
.mk-lines li { grid-template-columns: 52px 1fr 20px; }
.mk-v { font: 700 16px/1 "Kalam", cursive; text-align: center; }
.mk-lines li.good .mk-v { color: var(--pen); } .mk-lines li.bad .mk-v { color: #b4442b; }
.mk-lines li.good input { border-bottom-color: rgba(11,138,95,.6); border-bottom-style: solid; } .mk-lines li.bad input { border-bottom-color: rgba(180,68,43,.5); }
.mk-lr { margin-left: 10px; font-weight: 400; color: var(--ink-soft); font-size: 13px; }
@media (max-width: 1000px) { .mk-pick { grid-template-columns: 1fr 1fr; } .mk-stats { grid-template-columns: 1fr 1fr; } }
.head-art { width: 100%; height: auto; }
/* course pages: notions and their sub-notions, with what each level opens */
.notions { display: flex; flex-direction: column; gap: 12px; }
.notion { background: rgba(255,255,255,.75); border: 1.5px solid var(--bline, #98c2a9); border-left: 6px solid var(--c); border-radius: 14px; padding: 0 18px; }
.notion summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; min-height: 56px; padding-top: 14px; }
.notion summary::-webkit-details-marker { display: none; }
.notion summary b { font-family: "LM Display", serif; font-weight: 400; font-size: 22px; line-height: 28px; flex: 1; }
.notion summary::after { content: "+"; font-family: "LM", serif; font-size: 22px; color: var(--ink-soft); }
.notion[open] summary::after { content: "−"; }
.nstate { font-family: "Kalam", cursive; color: var(--pen); font-size: 16px; }
.notion > p { color: var(--ink-soft); font-size: 15px; margin: 0 0 12px; }
.subs { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--grid-major); }
.subs li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grid); }
.sn { font-family: "LM", serif; font-size: 17px; }
.rs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.res { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/28px "Inter", sans-serif; border-radius: 14px; padding: 0 10px 0 12px; border: 1.2px solid var(--ink); color: var(--ink); text-decoration: none; background: #fff; white-space: nowrap; }
.res em { font-style: normal; font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; padding: 0 5px; line-height: 16px; }
.res[data-tier="free"] em { background: rgba(11,138,95,.14); color: var(--pen); } .res[data-tier="premium"] em { background: #dfe5f1; color: #2c3a66; } .res[data-tier="excellence"] em { background: #f1e4bd; color: #7a5a12; }
a.res:hover { background: var(--ink); color: #fff; }
.res.locked { color: var(--ink-soft); border-color: var(--grid-major); border-style: dashed; }
.res.locked::before { content: ""; width: 7px; height: 6px; border: 1.3px solid currentColor; border-radius: 1px; margin-right: 2px; box-shadow: 0 -4px 0 -2.2px transparent; }
.res.soon { opacity: .55; }
.your-level { color: var(--ink-soft); }
.modes.two { grid-template-columns: 1fr 1fr; } .modes.two .mode { height: calc(var(--u)*8); }
.cswitch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--u); }
.cswitch .cs { font: 600 14px/36px "Inter", sans-serif; color: #fff; text-decoration: none; border: 1.5px solid rgba(255,255,255,.3); border-radius: 18px; padding: 0 16px; }
.cswitch .cs.on { background: #fff; color: var(--arena); border-color: #fff; }
.moves button.locked { opacity: .5; cursor: pointer; } .moves .lk { font: 600 9px/16px "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; background: #f1e4bd; color: #7a5a12; border-radius: 3px; padding: 0 5px; margin-left: 6px; }
@media (max-width: 700px) { .subs li { grid-template-columns: 1fr; } .rs { justify-content: flex-start; } .modes.two { grid-template-columns: 1fr; } }
/* the packs on Home */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: var(--u); }
.plan { background: #fff; border: 1.5px solid var(--ink); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; }
.plan h3 { margin-bottom: 12px; } .plan ul { margin: 0 0 18px; padding-left: 18px; flex: 1; } .plan li { color: var(--ink-soft); font-size: 15px; }
.pl-k { font: 600 11px/24px "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--pen); }
.plan.prem { background: linear-gradient(170deg, #fff, #eef2f9); } .plan.prem .pl-k { color: #2c3a66; }
.plan.exc { background: linear-gradient(165deg, #1a2550, var(--arena)); color: #fff; border-color: var(--gold); } .plan.exc h3 { color: #fff; } .plan.exc li { color: rgba(255,255,255,.75); } .plan.exc .pl-k { color: var(--gold); }
.pl-soon { box-shadow: inset 0 0 0 1.5px currentColor; align-self: flex-start; opacity: .7; cursor: default; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
/* the card that turns over */
.mode.flip { perspective: 1200px; cursor: pointer; padding: 0; background: none; box-shadow: none; overflow: visible; }
.mode.flip::after { display: none; }
.mode.flip .face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.3,.7,.3,1); background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 20px 40px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12); }
.mode.flip .front { display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.mode.flip .front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(5,10,25,.75) 100%); pointer-events: none; }
.mode.flip .front > * { z-index: 1; position: relative; } .mode.flip .front svg { position: absolute; z-index: 0; }
.mode.flip .front .tag { position: absolute; }
.mode.flip .back { transform: rotateY(180deg); padding: 16px; display: grid; gap: 8px; align-content: center; background: linear-gradient(160deg, #2a0f16, #12060a); }
.mode.flip.flipped .front { transform: rotateY(-180deg); } .mode.flip.flipped .back { transform: rotateY(0); }
.mode.flip .bk { font: 600 11px/20px "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 4px; }
.mode.flip .back a { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 6px 10px; transition: background .2s ease, border-color .2s ease; }
.mode.flip .back a:hover, .mode.flip .back a:focus-visible { background: rgba(255,255,255,.1); border-color: var(--gold); }
.mode.flip .back b { font-family: "LM Display", serif; font-weight: 400; font-size: 22px; line-height: 28px; } .mode.flip .back span { font-size: 11px; line-height: 15px; color: rgba(255,255,255,.7); }
.mode.flip:hover .front, .mode.flip:focus-visible .front { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(95,211,165,.45), 0 40px 70px -24px rgba(0,0,0,.9); }
.mode.flip:hover, .mode.flip:focus-visible { transform: translateY(-8px); box-shadow: none; }
section.bubble-sec { padding: calc(var(--u)*5) 0; }
main.catalogue > .block.bubble { margin-top: calc(var(--u)*10); }
main.catalogue > .block.bubble:first-child { margin-top: calc(var(--u)*6); }
@media (max-width: 900px) { section.bubble-sec { padding: calc(var(--u)*2) 0; } main.catalogue > .block.bubble { margin-top: calc(var(--u)*4); } }
.mode.flip .back a { grid-template-columns: 76px 1fr; } .mode.flip .back b { white-space: nowrap; }
@media (max-width: 900px) { .edge { width: 36px; opacity: .7; } .edge.r { left: var(--edge-r, calc(100% - 36px)); background-position: -180.5px calc(-0.5px - var(--shift)), 0 0; } }
/* course tabs: documents, in three parts */
.notion .part { border-top: 1px solid var(--grid-major); padding: 12px 0 14px; }
.notion .part h4 { font-family: "LM Display", serif; font-weight: 400; font-size: 20px; line-height: 28px; margin: 0; display: flex; align-items: baseline; gap: 10px; }
.notion .part h4 span { font-family: "Kalam", cursive; color: var(--pen); font-size: 22px; }
.notion .ph { font-size: 14px; line-height: 20px; color: var(--ink-soft); margin: 2px 0 10px; }
.files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.exs { list-style: none; margin: 0; padding: 0; }
.exs li { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--grid); }
.exs li:last-child { border-bottom: 0; }
.pairs { display: flex; gap: 10px; flex-wrap: wrap; }
.pair { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.pair .doc + .doc { margin-left: 16px; position: relative; }
.pair .doc + .doc::before { content: ""; position: absolute; left: -10px; top: -6px; width: 8px; height: 20px; border-left: 1.2px solid var(--grid-major); border-bottom: 1.2px solid var(--grid-major); border-radius: 0 0 0 4px; }
.doc { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; background: #fff; border: 1.2px solid var(--ink); border-radius: 8px; padding: 5px 10px; font-size: 13px; line-height: 20px; color: var(--ink); text-decoration: none; transition: background .15s ease, transform .15s ease; }
.doc em { font-style: normal; font: 600 9px/16px "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; border-radius: 3px; padding: 0 5px; }
.doc[data-tier="free"] em { background: rgba(11,138,95,.14); color: var(--pen); } .doc[data-tier="premium"] em { background: #dfe5f1; color: #2c3a66; } .doc[data-tier="excellence"] em { background: #f1e4bd; color: #7a5a12; }
.dg { width: 14px; height: 18px; border: 1.2px solid currentColor; border-radius: 2px; position: relative; clip-path: polygon(0 0, 65% 0, 100% 28%, 100% 100%, 0 100%); }
.dg::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 5px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .6; }
a.doc:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }
.doc.locked { color: #8590a6; border-color: var(--grid-major); border-style: dashed; background: rgba(255,255,255,.6); }
.doc.locked .dg { border-style: dashed; }
.doc.soon:not(.locked) { color: #8590a6; border-color: var(--grid-major); background: rgba(255,255,255,.7); }
.doc.soon:not(.locked) em::after { content: " · soon"; }
@media (max-width: 700px) { .exs li { grid-template-columns: 1fr; } .pair { min-width: 0; width: 100%; } }
.exs li { grid-template-columns: 190px 1fr; }
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pair { min-width: 0; }
.doc .dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .pairs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .pairs { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .exs li { grid-template-columns: 1fr; } .files { grid-template-columns: 1fr; } }
/* typed maths in Mark it */
.mk-lines math-field { font-size: 19px; border: 0; border-bottom: 1.5px dashed var(--grid-major); background: transparent; padding: 2px 4px; width: 100%; min-height: 32px; outline: none; --caret-color: #3a3f9e; --selection-background-color: rgba(58,63,158,.15); --contains-highlight-background-color: transparent; }
.mk-lines math-field:focus-within { border-bottom-color: #3a3f9e; }
.mk-lines math-field::part(virtual-keyboard-toggle), .mk-lines math-field::part(menu-toggle) { display: none; }
.mk-lines math-field[read-only] { opacity: .9; }
.mk-lines li.good math-field { border-bottom: 1.5px solid rgba(11,138,95,.6); } .mk-lines li.bad math-field { border-bottom-color: rgba(180,68,43,.5); }
.mk-kb { margin: 4px 0 14px; } .mk-kb p { margin: 0 0 6px !important; }
.mk-kb > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mk-kb button { font: 400 14px/30px "LM", serif; height: 30px; border: 1px solid var(--grid-major); background: #fbfcfd; border-radius: 6px; color: var(--ink); cursor: pointer; padding: 0; }
.mk-kb button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.mk-kb button.txt { font-family: "Inter", sans-serif; font-size: 12px; }
.mk-paper .katex, .mk-ms .katex { font-size: 1.05em; }
.mk-body { grid-template-columns: 1fr 236px; }
@media (max-width: 700px) { .mk-kb > div { grid-template-columns: repeat(9, 1fr); } .mk-kb p { display: none; } }
/* the avatar */
.mk-top { display: grid; grid-template-columns: 330px 1fr; gap: 14px; margin-bottom: calc(var(--u)*2); align-items: stretch; }
.mk-top .mk-stats { margin: 0; grid-template-columns: repeat(3, 1fr); }
.av-card { position: relative; display: grid; grid-template-columns: 132px 1fr; gap: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(216,180,90,.45); border-radius: 16px; padding: 12px; }
.av-pic .av-svg { width: 132px; height: 158px; display: block; border-radius: 12px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.8); }
.av-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.av-k { font: 600 11px/18px "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.av-info b { font-family: "LM Display", serif; font-weight: 400; font-size: 30px; line-height: 36px; color: var(--gold); }
.av-lv { font-size: 13px; line-height: 20px; color: #fff; }
.av-bar { display: block; height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; margin: 4px 0; }
.av-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #f3e2a8); transition: width .5s ease; }
.av-next { font-size: 12px; line-height: 18px; color: rgba(255,255,255,.6); }
.av-open { margin-top: 8px; align-self: flex-start; font: 600 13px/32px "Inter", sans-serif; color: var(--arena); background: var(--gold); border: 0; border-radius: 16px; padding: 0 14px; cursor: pointer; }
.av-open:hover { background: #f3e2a8; }
.av-toast { position: absolute; left: 12px; right: 12px; bottom: -14px; background: var(--gold); color: var(--arena); font-size: 13px; line-height: 20px; padding: 6px 10px; border-radius: 10px; animation: pop .35s ease; z-index: 3; box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); }
.av-drawer { position: fixed; inset: 0; background: rgba(8,12,28,.55); z-index: 60; display: grid; place-items: center; padding: 16px; }
.av-dw { background: #fbfcfd; color: var(--ink); border-radius: 18px; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto auto 1fr auto; gap: 0 18px; padding: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.av-dh { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.av-dh b { font-family: "LM Display", serif; font-weight: 400; font-size: 28px; }
.av-x { font-size: 26px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--ink-soft); }
.av-prev { grid-row: 2 / 5; } .av-prev .av-svg { width: 220px; height: 264px; border-radius: 14px; }
.av-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.av-tabs button { font: 600 13px/32px "Inter", sans-serif; border: 1.5px solid var(--ink); background: #fff; border-radius: 16px; padding: 0 14px; cursor: pointer; color: var(--ink); }
.av-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.av-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.av-items button { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; border: 1.5px solid var(--grid-major); background: #fff; border-radius: 12px; padding: 8px 10px; cursor: pointer; font: 400 14px/20px "Inter", sans-serif; color: var(--ink); }
.av-items button span { grid-column: 2; } .av-items button i { grid-row: 1; width: 16px; height: 16px; border-radius: 50%; display: block; }
.av-items button em { grid-column: 2; font-style: normal; font-size: 11px; line-height: 16px; color: #7a5a12; }
.av-items button.on { border-color: var(--pen); box-shadow: inset 0 0 0 1.5px var(--pen); background: #f4f8f6; }
.av-items button.locked { opacity: .55; cursor: default; border-style: dashed; }
.av-note { grid-column: 2; font-size: 12px; line-height: 18px; color: var(--ink-soft); margin: 12px 0 0; }
@media (max-width: 1000px) { .mk-top { grid-template-columns: 1fr; } .mk-top .mk-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .av-dw { grid-template-columns: 1fr; } .av-prev { grid-row: auto; justify-self: center; } .av-prev .av-svg { width: 160px; height: 192px; } .av-note { grid-column: 1; } .av-items { grid-template-columns: 1fr; } }
body > .av-drawer { position: fixed; z-index: 60; }
.steps.five { grid-template-columns: repeat(5, 1fr); }
.steps .where { display: inline-block; margin-top: 8px; font: 600 10px/18px "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pen); }
.exhibit .katex { font-size: 1em; }
@media (max-width: 1000px) { .steps.five { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps.five { grid-template-columns: 1fr; } }
.mg-t .katex { font-size: 1.02em; } .mg-t .s .katex { color: #2f3d5c; } .mg-t .q .katex { color: #56627c; }
.mg-t .s { font-family: "LM", serif; font-size: 16px; }
.mg-f text.h { font-family: "LM", serif; font-style: italic; font-size: 14px; fill: var(--pen); }