@font-face { font-family: ALTMistral; src: url('https://ml4-blog-widgets.netlify.app/assets/ALTMistral-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: ALTMistral; src: url('https://ml4-blog-widgets.netlify.app/assets/ALTMistral-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: ALTMistral; src: url('https://ml4-blog-widgets.netlify.app/assets/ALTMistral-Semibold.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: Inter; src: url('https://ml4-blog-widgets.netlify.app/assets/Inter-VariableFont.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('https://ml4-blog-widgets.netlify.app/assets/SpaceMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* mistral.ai semantic tokens: :root is light, html.dark reassigns the same names.
   Cream surfaces become steel, text becomes warm off-white, actions invert, and the
   brand orange stays the same. */
:root {
  --color-surface-brand-primary: #fbfbf8;
  --color-surface-brand-secondary: #f5f4ef;
  --color-surface-brand-tertiary: #ebe9e0;
  --color-surface-card: #fff;
  --color-surface-invert: #151524;
  --color-surface-brand: #fa500f;
  --color-text-primary: #18181b;
  --color-text-secondary: #27272a;
  --color-text-tertiary: #3f3f46;
  --color-text-muted: #6d6d78;
  --color-text-faint: #a1a1aa;
  --color-text-invert: #fafafa;
  --color-text-invert-muted: #a1a1aa;
  --color-border-primary: #e4e3de;
  --color-border-secondary: #c9c9c4;
  --color-border-invert: #31313a;
  --color-action-primary: #09090b;
  --color-action-secondary: #18181b;
  --color-action-brand: #fafafa;
  --color-action-ghost-1: #07070b0d;
  --color-action-ghost-2: #07070b1a;
  --color-shadow: rgba(24, 24, 27, .12);

  --widget-ink: var(--color-text-primary);
  --widget-muted: var(--color-text-muted);
  --widget-orange: var(--color-surface-brand);
  /* CTF Speedrun's --color-yellow-500: the amber of its "Easy" bars and Malware Triage's RECON phase. */
  --widget-yellow: #ffaf01;
  --widget-page: var(--color-surface-brand-primary);
  --widget-surface: var(--color-surface-brand-secondary);
  --widget-border: var(--color-border-primary);
  --widget-action: var(--color-action-primary);
  --widget-radius: 20px;
  --widget-font: ALTMistral, ui-sans-serif, system-ui, sans-serif;
  --widget-data-font: Inter, ui-sans-serif, system-ui, sans-serif;
}
html.dark {
  --color-surface-brand-primary: #101013;
  --color-surface-brand-secondary: #1a1a1e;
  --color-surface-brand-tertiary: #27272b;
  --color-surface-card: #101013;
  --color-surface-invert: #fafaf4;
  --color-text-primary: #fafaf4;
  --color-text-secondary: #f2f1e8;
  --color-text-tertiary: #ccccd1;
  --color-text-muted: #a1a1aa;
  --color-text-faint: #6d6d78;
  --color-text-invert: #1a1a1e;
  --color-text-invert-muted: #6d6d78;
  --color-border-primary: #27272b;
  --color-border-secondary: #474754;
  --color-border-invert: #e4e3de;
  --color-action-primary: #f1f1f3;
  --color-action-secondary: #f9f9fa;
  --color-action-brand: #1a1a1e;
  --color-action-ghost-1: #f9f9fb0d;
  --color-action-ghost-2: #f9f9fb1a;
  --color-shadow: rgba(0, 0, 0, .5);
}
html[data-widget], html[data-widget] body { margin: 0; width: 100%; background: transparent; }
html[data-widget] button { -webkit-tap-highlight-color: transparent; }
html[data-theme-pending] body { opacity: 0; }

/* A standalone page owns its colour scheme. An embed keeps the root at the host's
   default scheme: a mismatch makes browsers paint an opaque backdrop behind the
   iframe, which would show square corners around the rounded card. */
html[data-widget]:not([data-widget-iframe]) { color-scheme: light; }
html[data-widget].dark:not([data-widget-iframe]) { color-scheme: dark; }
html[data-widget][data-widget-iframe] { color-scheme: normal; }
html[data-widget][data-widget-iframe].dark :is(#search-frame, #ctf-race-v2, .sc, .triage-frame, .ts-frame, .pb-frame) { color-scheme: dark; }

/* Every route's root is its complete, rounded iframe canvas. */
html[data-widget="document-search"] body { padding: 0; }
html[data-widget="document-search"] #wide-presentation { width: 100%; max-width: none; margin: 0; padding: 0; }
html[data-widget="document-search"] #search-frame { width: 100%; max-width: 100%; margin: 0; border-radius: var(--widget-radius); }
html[data-widget="ctf-speedrun"] #main { display: block; min-height: 0; margin: 0; padding: 0; }
html[data-widget="ctf-speedrun"] #main > div,
html[data-widget="ctf-speedrun"] #main > div > div,
html[data-widget="ctf-speedrun"] #main > div > div > div { width: 100%; max-width: none; margin: 0; padding: 0; }
html[data-widget="ctf-speedrun"] #ctf-race-v2 { width: 100%; max-width: none; margin: 0; }
html[data-widget="ctf-speedrun"] #ctf-race-v2 > .cr-quote-body { border-radius: var(--widget-radius); }
html[data-widget="ctf-speedrun"] .ctf-race { --px-orange: var(--widget-orange); --border: var(--widget-border); --cr-trophy: url('https://ml4-blog-widgets.netlify.app/assets/trophy.svg'); }
html[data-widget="visual-intelligence"] .blog-article { width: 100%; margin: 0; padding: 0; }
html[data-widget="visual-intelligence"] body { display: block; min-height: 0; }
html[data-widget="visual-intelligence"] .blog-demo { width: 100%; max-width: none; margin: 0; padding: 0; }
html[data-widget="visual-intelligence"] .blog-demo .sc { width: 100%; max-width: none; margin: 0; border-radius: var(--widget-radius); }
html[data-widget="visual-intelligence"] { --sc-font: var(--widget-data-font); --sc-accent: var(--widget-orange); }
html[data-widget="malware-triage"] .re { width: 100%; max-width: none; margin: 0; padding: 0; }
html[data-widget="malware-triage"] .triage-frame { border-radius: var(--widget-radius); }
html[data-widget="malware-triage"] .re { --orange: var(--widget-orange); --border: var(--widget-border); }
html[data-widget="timeseries-forecast"] .ts { width: 100%; max-width: none; margin: 0; padding: 0; }
html[data-widget="pareto-benchmarks"] .pb { width: 100%; max-width: none; margin: 0; padding: 0; }

/* The standalone page centers the card; ?iframe lets it fill its frame. */
html[data-widget]:not([data-widget-iframe]) { overflow: auto !important; background: var(--widget-page); }
html[data-widget]:not([data-widget-iframe]) body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto !important;
  min-height: 100dvh;
  margin: 0;
  padding: 24px;
  background: var(--widget-page);
}
html[data-widget]:not([data-widget-iframe]) :is(#wide-presentation, #search-frame, #main, .blog-article, .re, .ts, .pb) {
  width: min(880px, 100%) !important;
  max-width: 880px !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  html[data-widget]:not([data-widget-iframe]) body { padding: 12px; }
}

/* Shared button color and type; each original player keeps its motion and state handling. */
html[data-widget] :is(.frame-play, .cr-play, .sc-play, .btn) {
  font-family: var(--widget-font);
  background-color: var(--color-action-primary);
  color: var(--color-action-brand);
  border-radius: 6px;
}
html[data-widget] :is(.frame-play, .cr-play, .sc-play, .btn):hover { background-color: var(--color-action-secondary); }
html[data-widget] :is(.frame-play, .cr-play, .sc-play, .btn):focus-visible { outline: 2px solid var(--widget-orange); outline-offset: 2px; }