html {
    font-size: clamp(16px, 0.5vw + 14px, 18px);
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button,
a,
input,
select,
textarea,
.upload-zone {
    touch-action: manipulation;
}

:root {
    --bg: #141313;
    --blue: #5364fd;
    --blue-dark: #1b2fe9;
    --blue-light: #16161a;
    --border: #31313131;
    --text-dark: #ffffff;
    --text-mid: #e2e2e9;
    --text-soft: #a0a0ab;
    --card-surface: #1c1b1b;
    --gradient: linear-gradient(90deg, #4145fa 0%, #b21fb1 50%, #fe006f 100%);
    color-scheme: dark;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    background-color: var(--bg);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    position: relative;
}

@font-face {
    font-family: "Google Sans Code";
    src: url("../../LAMBU-Fonts/GoogleSansCode-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}







@font-face {
    font-family: "Lexend Deca";
    src: url("../../LAMBU-Fonts/LexendDeca-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Lexend Deca";
    src: url("../../LAMBU-Fonts/LexendDeca-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Lexend Deca";
    src: url("../../LAMBU-Fonts/LexendDeca-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Lexend Deca";
    src: url("../../LAMBU-Fonts/LexendDeca-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}


@font-face {
    font-family: "Poppins";
    src: url("../../LAMBU-Fonts/Poppins-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../../LAMBU-Fonts/Poppins-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../../LAMBU-Fonts/Poppins-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../../LAMBU-Fonts/Poppins-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Kalam";
    src: url("../../LAMBU-Fonts/Kalam-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Kalam";
    src: url("../../LAMBU-Fonts/Kalam-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* ── KaTeX math rendering overrides ──────────────────────────────────────
   KaTeX injects its own CSS + HTML structure. These rules are minimal
   touch-ups to blend KaTeX output into LAMBU's dark UI.
   ─────────────────────────────────────────────────────────────────────── */

/* Long formulas (e.g. $\{Sunday, Monday, ..., Saturday\}$) used to be
   handled by forcing white-space: normal on .katex/.katex-html so they'd
   wrap on small screens. That broke KaTeX's internal layout — it positions
   glyphs (fraction bars, brace pairs, etc.) assuming one continuous line,
   so letting the browser insert a line-break mid-formula could visually
   slice a character in half at the wrap point, or get silently clipped by
   an ancestor's overflow:hidden.
   Fix: leave KaTeX's own nowrap alone, and instead give every rendered
   formula a quiet horizontal-scroll lane (.math-scroll, applied in
   js/utils.js formatMath()) — the same nowrap + overflow-x:auto pattern
   already used for code blocks in cards.css. A scrollbar only appears
   when a formula is genuinely wider than its card; anything that already
   fits renders identically to before. */
.math-scroll--display {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(75, 66, 48, 0.28) transparent;
}

.math-scroll--inline {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* 4px buffer guarantees KaTeX font overhangs (italics/subscripts) never trigger
       false-positive scrollbars on small variables ($X_1$, $Y$), while still allowing
       true horizontal scrolling whenever a formula actually exceeds the card width */
    padding: 0 4px;
    margin: 0 -2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(75, 66, 48, 0.28) transparent;
}

/* Thin, quiet scrollbar — mirrors the code-block scrollbar treatment in
   cards.css, tuned to the kraft card's warm ink tone instead of the dark
   code-card theme, so it reads as part of the card rather than a browser
   chrome element. */
.math-scroll--display::-webkit-scrollbar,
.math-scroll--inline::-webkit-scrollbar {
    height: 3px;
}

.math-scroll--display::-webkit-scrollbar-track,
.math-scroll--inline::-webkit-scrollbar-track {
    background: transparent;
}

.math-scroll--display::-webkit-scrollbar-thumb,
.math-scroll--inline::-webkit-scrollbar-thumb {
    background-color: rgba(75, 66, 48, 0.22);
    border-radius: 99px;
}

.math-scroll--display::-webkit-scrollbar-thumb:hover,
.math-scroll--inline::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 66, 48, 0.38);
}

/* Inside kraft cards — deepen the ink color so math stands out against the
   warm paper background (#4B4230 body text) without clashing. */
.def-card .katex {
    color: #1a0f00;
}