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

:root {
  --widget-ink: #18181b;
  --widget-muted: #6d6d78;
  --widget-orange: #fa500f;
  --widget-page: #fbfbf8;
  --widget-surface: #f5f4ef;
  --widget-border: #e4e3de;
  --widget-action: #09090b;
  --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[data-widget], html[data-widget] body { margin: 0; width: 100%; background: transparent; }
html[data-widget] { color-scheme: light; }
html[data-widget] button { -webkit-tap-highlight-color: transparent; }

/* 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('/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); }

/* 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) {
  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(--widget-action);
  color: #fafafa;
  border-radius: 6px;
}
html[data-widget] :is(.frame-play, .cr-play, .sc-play, .btn):hover { background-color: var(--widget-ink); }
html[data-widget] :is(.frame-play, .cr-play, .sc-play, .btn):focus-visible { outline: 2px solid var(--widget-orange); outline-offset: 2px; }