/* shipdeck default styles.
   Layout: the deck is a horizontal scroller. Each slide fills the screen and
   centres a 16:9 canvas. Type and spacing use cqw so a canvas looks the same
   at any size, on screen and on paper. */

:root {
  --page: #e9ecee;
  --slide: #ffffff;
  --fg: #1c2226;
  --muted: #5b6770;
  --line: #d9dee2;
  --accent: #0b6e6e;
  --accent-fg: #ffffff;
  --code-bg: #eef1f3;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d1012;
    --slide: #1a2024;
    --fg: #e6eaed;
    --muted: #94a1aa;
    --line: #333c42;
    --accent: #2f8f8c;
    --accent-fg: #ffffff;
    --code-bg: #232b30;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--page); color: var(--fg); font-family: var(--font); }

/* ---------- screen ---------- */

.deck {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  counter-reset: slide;
}
.deck::-webkit-scrollbar { display: none; }
.deck:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) { .deck { scroll-behavior: smooth; } }

.slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  counter-increment: slide;
}

.canvas {
  position: relative;
  width: min(100vw, 100dvh * 16 / 9);
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
  background: var(--slide);
  padding: 6cqw 7cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6cqw;
  font-size: 2.8cqw;
  line-height: 1.4;
}
.canvas::after {
  content: counter(slide);
  position: absolute;
  right: 3cqw;
  bottom: 2cqw;
  font: 2cqw var(--mono);
  color: var(--muted);
}

/* ---------- content ---------- */

.canvas > * { margin: 0; min-width: 0; }
.canvas h1 { font-size: 5.2cqw; line-height: 1.15; font-weight: 650; text-wrap: balance; }
.canvas h2 { font-size: 4cqw; line-height: 1.2; font-weight: 650; text-wrap: balance; }
.canvas h3 { font-size: 3.2cqw; line-height: 1.25; }
.canvas p, .canvas li { font-size: 2.8cqw; }
.canvas ul, .canvas ol { padding-left: 3.6cqw; display: flex; flex-direction: column; gap: 0.8cqw; }
.canvas a { color: var(--accent); }
.canvas hr { width: 100%; border: 0; border-top: 0.2cqw solid var(--line); }
.canvas code { font: 0.9em var(--mono); background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 0.3cqw; }
.canvas pre { background: var(--code-bg); padding: 2cqw 2.4cqw; border-radius: 0.8cqw; overflow: hidden; font-size: 2.2cqw; line-height: 1.5; }
.canvas pre code { background: none; padding: 0; font-size: inherit; }
.canvas img { max-width: 100%; max-height: 100%; object-fit: contain; }
.canvas blockquote { margin: 0; padding-left: 2.4cqw; border-left: 0.6cqw solid var(--accent); color: var(--muted); }
.canvas table { border-collapse: collapse; font-size: 2.4cqw; }
.canvas th, .canvas td { text-align: left; padding: 0.8cqw 1.6cqw; border-bottom: 0.2cqw solid var(--line); }

/* ---------- code highlighting (Pygments classes) ----------
   Keywords are bold and comments are muted, so highlighting survives a monochrome theme and print.
   A theme adds colour by setting --tok-keyword, --tok-string, --tok-number and --tok-name. */

.canvas pre .k, .canvas pre .kc, .canvas pre .kd, .canvas pre .kn, .canvas pre .kp,
.canvas pre .kr, .canvas pre .kt, .canvas pre .ow { font-weight: 700; color: var(--tok-keyword, inherit); }
.canvas pre .s, .canvas pre .s1, .canvas pre .s2, .canvas pre .sa, .canvas pre .sb,
.canvas pre .sc, .canvas pre .se, .canvas pre .sf, .canvas pre .si { color: var(--tok-string, inherit); }
.canvas pre .mi, .canvas pre .mf, .canvas pre .mh, .canvas pre .mo { color: var(--tok-number, inherit); }
.canvas pre .nf, .canvas pre .fm, .canvas pre .nc { font-weight: 700; color: var(--tok-name, inherit); }
.canvas pre .bp, .canvas pre .nb, .canvas pre .nd { color: var(--tok-name, inherit); }
.canvas pre .c, .canvas pre .c1, .canvas pre .cm, .canvas pre .cs, .canvas pre .sd { color: var(--muted); font-style: italic; }

/* ---------- built-in layouts ---------- */

.layout-cover .canvas { background: var(--accent); color: var(--accent-fg); }
.layout-cover .canvas h1 { font-size: 8cqw; }
.layout-cover .canvas::after { display: none; }
.layout-cover .canvas a { color: inherit; }

.layout-section .canvas { justify-content: center; align-items: flex-start; }
.layout-section .canvas h1, .layout-section .canvas h2 { font-size: 7cqw; color: var(--accent); }

.layout-two-col .canvas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  align-content: center;
  column-gap: 4cqw;
  row-gap: 1.6cqw;
}
.layout-two-col .canvas > :is(h1, h2, h3) { grid-column: 1 / -1; }

.layout-quote .canvas { border-left: 1.2cqw solid var(--accent); }
.layout-quote .canvas p { font-size: 4.4cqw; font-style: italic; }
.layout-quote .canvas blockquote { border: 0; padding: 0; color: inherit; }

.layout-full .canvas { padding: 0; }
.layout-full .canvas > * { width: 100%; height: 100%; max-height: none; }
.layout-full .canvas pre { border-radius: 0; font-size: 2.6cqw; padding: 5cqw 6cqw; display: flex; align-items: center; }
.layout-full .canvas p:has(> img:only-child) { display: contents; }
.layout-full .canvas img { object-fit: cover; }

/* ---------- print ---------- */

@page { size: 13.333in 7.5in; margin: 0; }

@media print {
  :root {
    --page: #ffffff; --slide: #ffffff; --fg: #1c2226; --muted: #5b6770; --line: #d9dee2;
    --accent: #0b6e6e; --accent-fg: #ffffff; --code-bg: #eef1f3;
    color-scheme: light;
  }
  html, body { height: auto; background: var(--slide); }
  .deck { display: block; height: auto; overflow: visible; }
  .slide {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--slide);
    break-after: page;
    break-inside: avoid;
  }
  .slide:last-child { break-after: auto; }
  .canvas { width: min(100vw, 100vh * 16 / 9); height: auto; aspect-ratio: 16 / 9; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* fakos.dev theme: off-white page, black ink, hairlines, square corners, mono uppercase labels.
   Light tokens are the ones in fakos.dev/index.html. Dark mode inverts them. Print always uses the light
   tokens (the print block comes last), so the PDF is light whatever the viewer's theme. */

:root {
  --page: #f5f5f2;
  --slide: #f5f5f2;
  --fg: #111111;
  --muted: #6b6b66;
  --line: #d1d1cb;
  --accent: #111111;
  --code-bg: #ffffff;
  --panel: #ffffff;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --tok-string: #0a6b46;
  --tok-number: #8a5a00;
  --tok-name: #1d4ed8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #111111; --slide: #111111; --fg: #f5f5f2; --muted: #a3a39d; --line: #3a3a37;
    --accent: #f5f5f2; --code-bg: #1b1b1a; --panel: #1b1b1a; color-scheme: dark;
    --tok-string: #7fd6a8; --tok-number: #e0b36a; --tok-name: #8ab4ff;
  }
}
@media print {
  :root {
    --page: #f5f5f2; --slide: #f5f5f2; --fg: #111111; --muted: #6b6b66; --line: #d1d1cb;
    --accent: #111111; --code-bg: #ffffff; --panel: #ffffff; color-scheme: light;
    --tok-string: #0a6b46; --tok-number: #8a5a00; --tok-name: #1d4ed8;
  }
}

/* canvas: content area, footer rule and footer labels */
.canvas, .layout-cover .canvas {
  padding: 6cqw 7cqw 11cqw;
  font-family: var(--font);
  color: var(--fg);
  background-color: var(--slide);
  background-image: linear-gradient(var(--line), var(--line));
  background-size: 86% 1px;
  background-position: center 90.5%;
  background-repeat: no-repeat;
  gap: 2.2cqw;
}
.canvas::before, .canvas::after, .layout-cover .canvas::after {
  position: absolute;
  bottom: 3.4%;
  z-index: 1;
  display: block;
  font: 600 1.5cqw/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.canvas::before { content: "Built with LOGIC"; left: 7%; }
.canvas::after, .layout-cover .canvas::after { content: "withlogic.co"; right: 7%; }

/* type */
.canvas h1, .canvas h2, .canvas h3 { font-family: var(--font); font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; }
.canvas h1 { font-size: 4.6cqw; }
.canvas strong { font-weight: 700; }
.canvas a { color: inherit; }
.canvas code { font: 0.9em var(--mono); color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 0.05em 0.3em; }
.canvas hr { border-top: 1px solid var(--line); }
.canvas blockquote { border-left: 0.4cqw solid var(--fg); color: var(--fg); }

/* bullets are the fakos "signal": a small black square */
.canvas ul { list-style: none; padding-left: 0; gap: 1.4cqw; }
.canvas ul li::before { content: ""; display: inline-block; width: 1.1cqw; height: 1.1cqw; margin-right: 1.8cqw; background: var(--fg); vertical-align: 0.05em; }

/* tables */
.canvas table { border-collapse: collapse; }
.canvas th { font: 600 1.6cqw/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.canvas th, .canvas td { border-bottom: 1px solid var(--line); }
.canvas td { font-size: 2.8cqw; font-variant-numeric: tabular-nums; }

/* cover: huge title, mono label line */
.layout-cover .canvas { color: var(--fg); gap: 2.2cqw; }
.layout-cover .canvas h1 { font-size: 11cqw; line-height: 0.9; }
.layout-cover .canvas p { font-size: 3cqw; color: var(--fg); }
.layout-cover .canvas > p:last-of-type { font: 600 1.7cqw/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.layout-cover .canvas > p:last-of-type strong { color: var(--fg); }

/* stat: one big number */
.layout-stat .canvas { align-items: flex-start; gap: 1.6cqw; }
.layout-stat .canvas h1 { font-size: 15cqw; line-height: 0.9; color: var(--fg); background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.layout-stat .canvas p { font-size: 3.6cqw; }
.layout-stat .canvas p:last-child { font-size: 2.6cqw; color: var(--muted); }

/* punch: one word, centred */
.layout-punch .canvas { align-items: center; text-align: center; }
.layout-punch .canvas h1 { font-family: var(--font); font-size: 10cqw; font-weight: 800; }
.layout-punch .canvas p { font-size: 3cqw; color: var(--muted); }
.layout-punch .canvas p strong { color: var(--fg); }
.layout-punch .canvas svg { width: 20cqw; height: auto; border-radius: 0; outline: 1px solid var(--fg); }
.layout-punch .canvas svg { shape-rendering: crispEdges; }
.layout-punch .canvas svg rect:first-child { fill: var(--slide); }
.layout-punch .canvas svg rect:not(:first-child) { fill: var(--fg); }

/* section divider */
.layout-section .canvas h1 { font-size: 9cqw; color: var(--fg); }
.layout-section .canvas p { font: 600 1.7cqw/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* dictionary entry */
.layout-dictionary .canvas { gap: 1.8cqw; }
.layout-dictionary .canvas h1 { font-size: 10cqw; line-height: 0.9; }
.layout-dictionary .canvas > p:first-of-type { font: 600 1.8cqw/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.layout-dictionary .canvas > p:first-of-type code { background: none; border: 0; padding: 0; color: var(--fg); font: 400 1.25em var(--font); text-transform: none; letter-spacing: 0; }
.layout-dictionary .canvas p em { font-style: normal; margin-left: 1.2cqw; }
.layout-dictionary .canvas ol { padding-left: 5.4cqw; gap: 1.6cqw; }
.layout-dictionary .canvas ol li { font-size: 3.2cqw; padding-left: 0.8cqw; }
.layout-dictionary .canvas ol li::marker { color: var(--fg); font: 700 1em var(--mono); }
.layout-dictionary .canvas blockquote { font-style: italic; font-size: 2.8cqw; color: var(--muted); }
.layout-dictionary .canvas blockquote p { font-size: 2.8cqw; }

/* code: a label over a white panel with a black hairline */
.layout-code .canvas { gap: 2cqw; }
.layout-code .canvas h1 { font: 600 1.8cqw/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.canvas pre { background: var(--panel); border: 1px solid var(--fg); border-radius: 0; }
.canvas pre code { color: var(--fg); background: none; border: 0; padding: 0; }
.layout-code .canvas pre { flex-shrink: 0; font-size: 1.9cqw; line-height: 1.45; padding: 2cqw 2.4cqw; }

/* numbers */
.layout-numbers .canvas { gap: 1.4cqw; }
.layout-numbers .canvas td { padding-block: 0.7cqw; font-size: 2.6cqw; }
.layout-numbers .canvas td:first-child { color: var(--muted); }
.layout-numbers .canvas td:last-child { font-weight: 700; color: var(--fg); }
.layout-numbers .canvas table + p { font: 600 1.5cqw/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* screenshot */
.layout-screenshot .canvas img { width: auto; height: auto; max-width: 100%; max-height: 62%; align-self: flex-start; border: 1px solid var(--fg); border-radius: 0; }

/* diagram */
.canvas svg.diagram { width: 100%; height: auto; }
.diagram .box { fill: var(--panel); stroke: var(--fg); stroke-width: 1.5; }
.diagram .box.hot { stroke-width: 5; }
.diagram text { text-anchor: middle; font-family: var(--font); }
.diagram .title { fill: var(--fg); font-size: 22px; font-weight: 800; }
.diagram .sub, .diagram .note { fill: var(--muted); font-size: 15px; }
.diagram .step { text-anchor: start; fill: var(--fg); font-size: 20px; }
.diagram .cap { text-anchor: start; fill: var(--muted); font-size: 15px; }
.diagram .arrow { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.diagram .arrow.dash { stroke-dasharray: 6 5; }
.diagram marker path { fill: var(--fg); }

/* chart: a screenshot with a mono caption */
.layout-chart .canvas figure { margin: 0; display: flex; flex-direction: column; gap: 1cqw; align-items: flex-start; }
.layout-chart .canvas img { width: auto; height: auto; max-width: 100%; max-height: 43cqw; border: 1px solid var(--fg); border-radius: 0; }