/* Prompt KUB brand tokens — shared by every page. Fonts: Roboto (Latin) + Noto Sans Thai (Thai) self-hosted in fonts/g (OFL), Poppins for Latin display only. */
/* Self-hosted from Google Fonts (OFL). Regenerate: python -I tools\fetch_google_fonts.py */
@font-face{font-family:'PK Sans';src:url(fonts/g/roboto-400-latin-ext.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'PK Sans';src:url(fonts/g/roboto-400-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'PK Sans';src:url(fonts/g/roboto-500-latin-ext.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'PK Sans';src:url(fonts/g/roboto-500-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'PK Sans';src:url(fonts/g/roboto-700-latin-ext.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'PK Sans';src:url(fonts/g/roboto-700-latin.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'PK Sans';src:url(fonts/g/notothai-400-thai.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'PK Sans';src:url(fonts/g/notothai-500-thai.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'PK Sans';src:url(fonts/g/notothai-700-thai.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'PK Sans Head';src:url(fonts/g/roboto-700-latin-ext.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'PK Sans Head';src:url(fonts/g/roboto-700-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'PK Sans Head';src:url(fonts/g/notothai-700-thai.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:'Poppins';src:url(fonts/Poppins-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/Poppins-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/Poppins-ExtraBold.woff2) format('woff2');font-weight:800;font-display:swap}

/* Theme: <html data-theme="light|dark"> set by /assets/theme.js before paint (default LIGHT = white reading theme, 2026-10-16).
   Semantic tokens to use in page CSS:
     page bg  --bg / --bg-2 (sections, surfaces) / --bg-3 (raised)      text --text / --text-2 / --text-3
     lime as FILL  --lime (+ text on it: --on-lime)    lime as TEXT/icon  --lime-ink    lime as border  --lime-line
     tints  rgba(var(--fg-rgb),a) · rgba(var(--bg-rgb),a) · rgba(var(--lime-rgb),a)    black shadows  rgba(0,0,0,calc(a*var(--shk)))
   --ink / --ink-2 / --ink-3 stay dark ink in BOTH themes (brand ink, text on lime) — never use them as a page background.
   Light = a real white theme: no dark islands (the lesson player is white too). Lime is a sparse FILL only (buttons, small chips)
   with ink text on it; text/links/progress/active states use --lime-ink (dark green, AA on white). Never lime as text in light.
   .keep-dark still re-applies the dark set for legacy markup, but pages should not use it in light. */
:root {
  --ink: #0b0f19;
  --ink-2: #111726;
  --ink-3: #1a2133;
  --lime: #c8f542;
  --on-lime: #0b0f19;
  --radius: 18px;
  --radius-sm: 12px;
  --f-th: 'PK Sans', system-ui, sans-serif;
  --f-th-bold: 'PK Sans Head', 'PK Sans', system-ui, sans-serif;
  --f-lat: 'Poppins', 'PK Sans Head', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

:root, .keep-dark {
  color-scheme: dark;
  --bg: #0b0f19;
  --bg-2: #111726;
  --bg-3: #1a2133;
  --fg-rgb: 243, 245, 240;
  --bg-rgb: 11, 15, 25;
  --lime-rgb: 200, 245, 66;
  --c1-rgb: 26, 33, 51;
  --c2-rgb: 17, 23, 38;
  --line: rgba(243, 245, 240, .10);
  --line-2: rgba(243, 245, 240, .18);
  --lime-dim: rgba(200, 245, 66, .14);
  --lime-ink: #c8f542;
  --lime-line: #c8f542;
  --text: #f3f5f0;
  --text-2: rgba(243, 245, 240, .74);
  --text-3: rgba(243, 245, 240, .60);
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --on-warn: #0b0f19;
  --shk: 1;
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .3);
  --glow: 0 0 0 1px rgba(200, 245, 66, .35), 0 10px 40px rgba(200, 245, 66, .18);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f6f7f4;
  --bg-3: #eceee9;
  --fg-rgb: 11, 15, 25;
  --bg-rgb: 255, 255, 255;
  --lime-rgb: 122, 160, 0;
  --c1-rgb: 255, 255, 255;
  --c2-rgb: 255, 255, 255;
  --line: rgba(11, 15, 25, .10);
  --line-2: rgba(11, 15, 25, .16);
  --lime-dim: rgba(200, 245, 66, .30);
  --lime-ink: #4d6b00;
  --lime-line: #6f9200;
  --text: #0b0f19;
  --text-2: rgba(11, 15, 25, .74);
  --text-3: rgba(11, 15, 25, .64);
  --ok: #15803d;
  --warn: #b45309;
  --bad: #dc2626;
  --on-warn: #ffffff;
  --shk: .22;
  --shadow-lg: 0 1px 2px rgba(11, 15, 25, .05), 0 14px 36px rgba(11, 15, 25, .08);
  --glow: 0 0 0 1px rgba(111, 146, 0, .45), 0 12px 34px rgba(150, 200, 20, .22);
}
.keep-dark { color: var(--text); }

html { background: var(--bg); color: var(--text); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-th); -webkit-font-smoothing: antialiased; }
::selection { background: var(--lime); color: var(--on-lime); }

/* smooth swap only while toggling (theme.js adds .theme-anim for ~450ms) — never on first paint */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition-property: background-color, color, border-color, fill, stroke, box-shadow !important;
  transition-duration: .3s !important;
  transition-timing-function: ease !important;
}

/* theme toggle (injected by theme.js) */
.pk-theme-btn {
  position: fixed; z-index: 80;
  left: max(14px, env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: rgba(var(--bg-rgb), .82);
  border: 1px solid var(--line-2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, calc(.35 * var(--shk))), 0 1px 2px rgba(0, 0, 0, calc(.2 * var(--shk)));
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s, opacity .25s, border-color .2s, color .2s;
}
.pk-theme-btn.pk-tuck { transform: translateY(90px); opacity: 0; pointer-events: none; }
.pk-theme-btn:hover { transform: translateY(-1px); border-color: var(--lime-line); color: var(--lime-ink); }
.pk-theme-btn:focus-visible { outline: 2px solid var(--lime-line); outline-offset: 3px; }
.pk-theme-btn svg { width: 20px; height: 20px; display: block; }
.pk-theme-btn .pk-moon { display: none; }
:root[data-theme="light"] .pk-theme-btn .pk-sun { display: none; }
:root[data-theme="light"] .pk-theme-btn .pk-moon { display: block; }
@media print { .pk-theme-btn { display: none; } }