/* Only the two overview pages load these stack illustration tokens. */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/ibm-plex-mono-500.woff2') format('woff2')}
:root{
  --f-top:#fff;--f-left:#ece9e3;--f-right:#d8d4cc;--f-edge:#9e9a93;
  --grid:#e6e2db;--floor:#f1eee8;
  --a-top:#ff8a66;--a-left:#ff5a2e;--a-right:#d9461f;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,Pretendard,monospace;
}
.dl-visual{
  --accent:var(--orange);--visual-bg:var(--paper);--visual-surface:var(--white);
  --visual-ink:var(--ink);--visual-muted:var(--muted);--visual-line:var(--line);
  --visual-edge:#c9c4bc;--visual-accent-ink:#b93812;
}
/* Dark values match the supplied prototype and stay inside the illustrations. */
@media(prefers-color-scheme:dark){html:not([data-theme="light"]) .dl-visual:not([data-theme="light"]){
  --f-top:#3a3833;--f-left:#2c2a26;--f-right:#221f1c;--f-edge:#5a564f;--grid:#262420;--floor:#1c1b18;
  --a-top:#ff8a66;--a-left:#ff5a2e;--a-right:#c43f1c;
  --visual-bg:#161513;--visual-surface:#1f1e1b;--visual-ink:#f2efe9;--visual-muted:#9a958d;--visual-line:#33312d;--visual-edge:#44413b;--visual-accent-ink:#ff9a7c;
}}
html[data-theme="dark"] .dl-visual,.dl-visual[data-theme="dark"]{
  --f-top:#3a3833;--f-left:#2c2a26;--f-right:#221f1c;--f-edge:#5a564f;--grid:#262420;--floor:#1c1b18;
  --a-top:#ff8a66;--a-left:#ff5a2e;--a-right:#c43f1c;
  --visual-bg:#161513;--visual-surface:#1f1e1b;--visual-ink:#f2efe9;--visual-muted:#9a958d;--visual-line:#33312d;--visual-edge:#44413b;--visual-accent-ink:#ff9a7c;
}