/* Mythtide Knowledgebase tokens: copied from vault/Product/branding/kb/_shared/kb.css (type token names normalised), generated from
   vault/Product/branding/assets/tokens/mythtide-tokens.json. Do not edit by hand. */

:root {
  --mt-bg: #18141C;
  --mt-bg-deep: #120F16;
  --mt-surface-low: #1C1720;
  --mt-surface: #211B26;
  --mt-surface-high: #2C2433;
  --mt-surface-highest: #362D3D;
  --mt-rule: #3D3345;
  --mt-outline: #806F84;
  --mt-ink: #EEE7DA;
  --mt-ink-muted: #B9AEB5;
  --mt-ink-faint: #968A93;
  --mt-gold: #D0B373;
  --mt-gold-text: #D0B373;
  --mt-gold-light: #EBD28B;
  --mt-gold-deep: #B18F53;
  --mt-plum: #462749;
  --mt-plum-soft: #624466;
  --mt-rose: #C2717D;
  --mt-rose-text: #D88E9B;
  --mt-action: #8E3F64;
  --mt-action-hover: #9A4A6E;
  --mt-action-press: #7E3558;
  --mt-on-action: #EEE7DA;
  --mt-success: #8FD6A8;
  --mt-warning: #E7C44A;
  --mt-danger: #FFB3AB;
  --mt-info: #9ECFFF;
  --mt-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mt-font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mt-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --mt-space-1: 4px;
  --mt-space-2: 8px;
  --mt-space-3: 12px;
  --mt-space-4: 16px;
  --mt-space-5: 24px;
  --mt-space-6: 32px;
  --mt-space-7: 48px;
  --mt-space-8: 64px;
  --mt-space-9: 96px;
  --mt-radius-xs: 2px;
  --mt-radius-sm: 4px;
  --mt-radius-md: 8px;
  --mt-radius-pill: 999px;
  --mt-bp-compact: 0px;
  --mt-bp-medium: 600px;
  --mt-bp-expanded: 900px;
  --mt-bp-large: 1200px;
  --mt-reading-column: 680px;
  --mt-type-display-large: 300 64px/68px var(--mt-font-display);
  --mt-type-display-large-tracking: -1.28px;
  --mt-type-display-medium: 300 48px/52px var(--mt-font-display);
  --mt-type-display-medium-tracking: -0.96px;
  --mt-type-display-small: 400 36px/44px var(--mt-font-display);
  --mt-type-display-small-tracking: -0.36px;
  --mt-type-headline-large: 400 32px/40px var(--mt-font-display);
  --mt-type-headline-medium: 400 28px/36px var(--mt-font-display);
  --mt-type-headline-small: 400 24px/32px var(--mt-font-display);
  --mt-type-title-large: 600 20px/28px var(--mt-font-ui);
  --mt-type-title-medium: 600 16px/24px var(--mt-font-ui);
  --mt-type-title-medium-tracking: 0.15px;
  --mt-type-title-small: 600 14px/20px var(--mt-font-ui);
  --mt-type-title-small-tracking: 0.1px;
  --mt-type-body-large: 400 16px/24px var(--mt-font-ui);
  --mt-type-body-medium: 400 14px/20px var(--mt-font-ui);
  --mt-type-body-small: 400 12px/16px var(--mt-font-ui);
  --mt-type-label-large: 600 14px/20px var(--mt-font-ui);
  --mt-type-label-large-tracking: 0.2px;
  --mt-type-label-medium: 600 12px/16px var(--mt-font-ui);
  --mt-type-label-medium-tracking: 0.4px;
  --mt-type-label-small: 600 11px/16px var(--mt-font-ui);
  --mt-type-label-small-tracking: 2.2px;
  --mt-type-reading-body: 300 20px/34px var(--mt-font-display);
  --mt-type-reading-quote: 300 32px/40px var(--mt-font-display);
  --mt-type-drop-cap: 400 84px/68px var(--mt-font-display);
  --mt-shadow-menu: 0 12px 32px rgba(8, 6, 10, 0.55);
  color-scheme: dark;
}

/* Day: reading pages, when the reader chooses it (reading options) */
:root[data-reading="day"] {
  --mt-bg: #F6F1E7;
  --mt-surface-low: #ECE4D5;
  --mt-surface: #FFFDF8;
  --mt-surface-high: #ECE4D5;
  --mt-surface-highest: #ECE4D5;
  --mt-rule: #DCD2C3;
  --mt-outline: #8A7F8C;
  --mt-ink: #1E1822;
  --mt-ink-muted: #5E5462;
  --mt-ink-faint: #5E5462;
  --mt-gold-text: #7A6234;
  --mt-success: #2D7A4F;
  --mt-warning: #8A6200;
  --mt-danger: #9B2C2C;
  --mt-info: #2A4A6E;
  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mt-bg);
  color: var(--mt-ink);
  font: var(--mt-type-body-large);
}
h1, h2, h3 { font-family: var(--mt-font-display); font-weight: 400; color: var(--mt-ink); }
h1 { font: var(--mt-type-display-small); letter-spacing: var(--mt-type-display-small-tracking); margin: 0 0 var(--mt-space-4); }
h2 { font: var(--mt-type-headline-medium); margin: var(--mt-space-7) 0 var(--mt-space-3); }
h3 { font: var(--mt-type-headline-small); margin: var(--mt-space-6) 0 var(--mt-space-2); }
h1 em, h2 em { font-style: italic; }
a { color: var(--mt-gold-text); text-underline-offset: 3px; }
a:hover { color: var(--mt-gold-light); }
:focus-visible { outline: 2px solid var(--mt-gold-light); outline-offset: 2px; border-radius: var(--mt-radius-xs); }
hr { border: 0; border-top: 1px solid var(--mt-rule); margin: var(--mt-space-6) 0; }

/* Article text: the reading register */
.mt-reading { max-width: var(--mt-reading-column); margin-inline: auto; }
.mt-reading p, .mt-reading li { font: var(--mt-type-reading-body); }
@media (max-width: 599px) { .mt-reading p, .mt-reading li { font-size: 18px; line-height: 30px; } }

/* Overline / eyebrow */
.mt-overline {
  font: var(--mt-type-label-small);
  letter-spacing: var(--mt-type-label-small-tracking);
  text-transform: uppercase;
  color: var(--mt-gold-text);
}
.mt-overline::before { content: '◆'; margin-right: 8px; font-size: 0.8em; }

/* Ornament rule with a label */
.mt-ornament { display: flex; align-items: center; gap: var(--mt-space-3); color: var(--mt-gold-text); font: var(--mt-type-label-small); letter-spacing: var(--mt-type-label-small-tracking); text-transform: uppercase; }
.mt-ornament::before, .mt-ornament::after { content: ''; flex: 1; border-top: 1px solid var(--mt-gold-deep); }

/* Cards */
.mt-card { background: var(--mt-surface); border: 1px solid var(--mt-rule); border-radius: var(--mt-radius-md); padding: var(--mt-space-4); }

/* Callouts: always a glyph and a word, never colour alone */
.mt-callout { border-left: 3px solid var(--mt-gold); background: var(--mt-surface-low); padding: var(--mt-space-3) var(--mt-space-4); border-radius: 0 var(--mt-radius-sm) var(--mt-radius-sm) 0; }
.mt-callout > .mt-callout-title { font: var(--mt-type-title-small); margin: 0 0 var(--mt-space-1); }
.mt-callout.tip     { border-color: var(--mt-gold); }
.mt-callout.tour    { border-color: var(--mt-plum-soft); background: var(--mt-plum); }
.mt-callout.warning { border-color: var(--mt-warning); }
.mt-callout.parents { border-color: var(--mt-info); }
.mt-callout.ai-cost { border-color: var(--mt-rose); }

/* Buttons */
.mt-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--mt-radius-xs); font: var(--mt-type-label-large); text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.mt-button.filled { background: var(--mt-action); color: var(--mt-on-action); }
.mt-button.filled:hover { background: var(--mt-action-hover); }
.mt-button.outlined { border-color: var(--mt-gold); color: var(--mt-gold-text); background: transparent; }

/* Figures: the Nocturne figure style */
figure.mt-figure { margin: var(--mt-space-5) 0; }
figure.mt-figure img, figure.mt-figure video { display: block; max-width: 100%; height: auto; border-radius: var(--mt-radius-sm); border: 1px solid var(--mt-rule); }
figure.mt-figure figcaption { font: var(--mt-type-body-small); color: var(--mt-ink-muted); margin-top: var(--mt-space-2); }

/* The play frame: play screens shown exactly as they are, on a terminal mat */
.mt-play-frame { background: #0E0E12; border: 1px solid var(--mt-gold); border-radius: var(--mt-radius-xs); padding: 12px; }
.mt-play-frame img, .mt-play-frame video { display: block; max-width: 100%; height: auto; }
img.pixel, .pixel img { image-rendering: pixelated; image-rendering: crisp-edges; }
.mt-play-frame figcaption { font: 400 12px/16px var(--mt-font-mono); color: #8B949E; margin-top: 8px; }

/* Stat block */
.mt-stat-block { background: var(--mt-surface); border: 1px solid var(--mt-rule); border-radius: var(--mt-radius-md); padding: var(--mt-space-4); }
.mt-stat-block h3 { margin-top: 0; }
.mt-stat-block dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--mt-space-4); margin: 0; }
.mt-stat-block dt { font: var(--mt-type-label-small); letter-spacing: var(--mt-type-label-small-tracking); text-transform: uppercase; color: var(--mt-gold-text); }
.mt-stat-block dd { margin: 0; font: var(--mt-type-body-medium); }

/* Tables */
table.mt-table { width: 100%; border-collapse: collapse; font: var(--mt-type-body-medium); }
table.mt-table th { text-align: left; font: var(--mt-type-label-medium); color: var(--mt-ink-muted); border-bottom: 1px solid var(--mt-outline); padding: 8px; }
table.mt-table td { border-bottom: 1px solid var(--mt-rule); padding: 8px; vertical-align: top; }

/* Reduced motion: loops show their poster instead */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
  :root { --mt-bg: #fff; --mt-surface: #fff; --mt-surface-low: #f6f1e7; --mt-ink: #000; --mt-ink-muted: #333; --mt-rule: #ccc; --mt-gold-text: #5a4520; }
  body { font-size: 11pt; }
  nav, .mt-site-header, .mt-site-footer, .mt-on-this-page, .mt-helpful, .mt-reading-options { display: none !important; }
  a { color: inherit; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .mt-play-frame { border-color: #999; }
  figure, table, .mt-callout, .mt-stat-block { break-inside: avoid; }
}