/* Open Logix slide decks: one look for every deck; the overview deck (docs/overview/)
   is the first and the baseline. 16:9 slides on a dark backdrop, with text that
   scales with the slide. The page snaps from slide to slide without JavaScript. */
:root {
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --brand: #6366f1;
  --brand2: #06b6d4;
  --backdrop: #0b1020;
  --bar: 56px;
}
* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; scroll-padding-top: var(--bar); }
body {
  margin: 0; color: var(--ink); background: var(--backdrop);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  counter-reset: slide;
}
a { color: inherit; }

/* Top bar: deck name and a link back to the website */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 10; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
  color: #94a3b8; font-size: 14px; background: rgba(11,16,32,.85); backdrop-filter: blur(8px);
}
.bar .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #e2e8f0; }
.bar .brand img { width: 26px; height: 26px; }
.bar .brand b { font-weight: 800; color: #e2e8f0; }
.bar .brand span { color: #94a3b8; }
.bar nav a { color: #94a3b8; text-decoration: none; margin-left: 20px; }
.bar nav a:hover { color: #fff; }

/* Slides: each fills the screen below the bar, with a 16:9 slide centered in it */
.frame {
  height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar));
  display: grid; place-items: center; padding: 20px;
  scroll-snap-align: start;
}
main { padding-top: var(--bar); }
.slide {
  --u: 1cqw;                     /* 1% of the slide width: every size scales with it */
  container-type: inline-size;
  counter-increment: slide;
  position: relative; overflow: hidden;
  width: min(100%, calc((100svh - var(--bar) - 40px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #fff; border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.slide > .body {
  position: absolute; inset: 0; padding: calc(var(--u) * 6) calc(var(--u) * 7) calc(var(--u) * 7);
  display: flex; flex-direction: column; justify-content: center;
}
/* Content slides: the title always starts at the same height, whatever follows it */
.slide:not(.title) > .body { justify-content: flex-start; padding-top: calc(var(--u) * 6.5); }
.slide .heading { align-items: flex-start; }
.slide::after {
  content: counter(slide) " / " var(--slides, ""); position: absolute; right: calc(var(--u) * 2.5); bottom: calc(var(--u) * 1.8);
  font-size: calc(var(--u) * 1.2); font-weight: 600; color: #94a3b8;
}
.slide .mark { position: absolute; left: calc(var(--u) * 2.5); bottom: calc(var(--u) * 1.6); height: calc(var(--u) * 2); width: auto; opacity: .9; }

/* Slide text */
.slide h1 { font-size: calc(var(--u) * 6); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 calc(var(--u) * 1.5); }
.slide h2 { font-size: calc(var(--u) * 3.6); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 calc(var(--u) * 2.5); }
.slide p, .slide li { font-size: calc(var(--u) * 1.9); line-height: 1.45; color: var(--muted); }
.slide p { margin: 0 0 calc(var(--u) * 1.2); }
.slide ul { margin: 0; padding-left: calc(var(--u) * 2.4); }
.slide li { margin-bottom: calc(var(--u) * 1); }
.slide li::marker { color: var(--brand); }
.slide h2 + ul, .slide .heading + ul { margin-top: calc(var(--u) * 1.8); }   /* more room between a title and its bullets */
.slide strong { color: var(--ink); }
.slide code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; padding: .1em .35em; border-radius: .3em; background: #f1f5f9; color: var(--ink); }
.slide .kicker { font-size: calc(var(--u) * 1.3); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 calc(var(--u) * 1.5); }
/* Slide heading with a product icon */
.slide .heading { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2.5); }
.slide .heading img { width: calc(var(--u) * 7); height: calc(var(--u) * 7); flex: none; filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * 1.2) rgba(15,23,42,.18)); }
.slide .heading h2 { margin: 0 0 calc(var(--u) * .4); }
.slide .heading p { margin: 0; font-size: calc(var(--u) * 2); }
.slide .fine { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 1.7); margin: 0; text-align: center; font-size: calc(var(--u) * 1); color: #94a3b8; }
.grad-text { background: linear-gradient(90deg, var(--brand), var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Screenshot slide: a title like the other slides, then one picture filling the rest */
.slide.screenshot .shotbox { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.slide.screenshot .shot { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border: 1px solid var(--line); border-radius: calc(var(--u) * .8); box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 4) rgba(15,23,42,.18); }

/* Example slides: points on the left, a terminal or code panel on the right */
.slide .example { display: grid; grid-template-columns: 1fr 1.35fr; gap: calc(var(--u) * 3.5); align-items: start; margin-top: calc(var(--u) * 1.5); }
.slide .example ul { margin-top: 0; }
.slide .example li { font-size: calc(var(--u) * 1.6); }
.slide .panel {
  margin: 0; padding: calc(var(--u) * 1.8) calc(var(--u) * 2); border-radius: calc(var(--u) * 1);
  background: #0f172a; color: #e2e8f0; white-space: pre; overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: calc(var(--u) * 1.15); line-height: 1.55;
  box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(15,23,42,.25);
}
.slide .panel.code { font-size: calc(var(--u) * .92); }
.slide .panel .c { color: #64748b; }
.slide .panel .p { color: #22d3ee; }
.slide .panel .you { color: #fff; font-weight: 600; }
.slide .panel .t { color: #a78bfa; }
.slide .panel .ok { color: #34d399; font-weight: 600; }
.slide .panel .k { color: #c084fc; }
.slide .panel .s { color: #86efac; }

/* Resources slide: one link per row, name, what it is, and the address */
.slide .resources { display: grid; gap: calc(var(--u) * .7); margin-top: calc(var(--u) * 1.5); }
.slide .res {
  display: grid; grid-template-columns: calc(var(--u) * 16) 1fr auto; align-items: baseline; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * .75) calc(var(--u) * 1.6); border: 1px solid var(--line); border-radius: calc(var(--u) * .9);
  text-decoration: none; color: inherit; font-size: calc(var(--u) * 1.6);
}
.slide .res:hover { border-color: #c7d2fe; background: #f8fafc; }
.slide .res span { color: var(--muted); }
.slide .res code { font-size: calc(var(--u) * 1.25); color: var(--brand); background: none; padding: 0; }

/* Share button, added to each slide by the page's script */
.slide .share, .slide .fullscreen {
  position: absolute; top: calc(var(--u) * 1.8); right: calc(var(--u) * 2); z-index: 2;
  width: calc(var(--u) * 3); height: calc(var(--u) * 3); padding: calc(var(--u) * .65);
  display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.8); color: #94a3b8;
  transition: color .15s, border-color .15s;
}
.slide .share svg, .slide .fullscreen svg { width: 100%; height: 100%; }
.slide .fullscreen { right: calc(var(--u) * 5.8); }
.slide .fullscreen:hover, .slide .fullscreen:focus-visible { color: var(--brand); border-color: #c7d2fe; }
/* In full screen the top bar goes, and each slide fills the screen */
:root:fullscreen { --bar: 0px; }
:root:fullscreen .bar { display: none; }
:root:-webkit-full-screen { --bar: 0px; }
:root:-webkit-full-screen .bar { display: none; }
.slide .share:hover, .slide .share:focus-visible { color: var(--brand); border-color: #c7d2fe; }
.slide .share::after {
  content: attr(data-message); position: absolute; top: 50%; right: calc(100% + var(--u) * .8); transform: translateY(-50%);
  white-space: nowrap; padding: calc(var(--u) * .35) calc(var(--u) * .8); border-radius: calc(var(--u) * .5);
  background: var(--ink); color: #fff; font: 600 calc(var(--u) * 1.05) / 1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.slide .share.done { color: #10b981; border-color: #a7f3d0; }
.slide .share.done::after { opacity: 1; }
@media (max-width: 700px) { .slide .share, .slide .fullscreen { width: 30px; height: 30px; padding: 6px; top: 10px; right: 10px; } .slide .fullscreen { right: 46px; } .slide .share::after { font-size: 12px; } }

/* Previous and next, added to each slide by the page's script in place of the number */
.has-pager .slide::after { display: none; }
.slide .pager {
  position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * 1.3); z-index: 2;
  display: flex; align-items: center; gap: calc(var(--u) * .7);
  font-size: calc(var(--u) * 1.2); font-weight: 600; color: #94a3b8;
}
.slide .pager .step {
  width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.8);
  color: #94a3b8; text-decoration: none; font-size: calc(var(--u) * 1.9); line-height: 1; padding-bottom: calc(var(--u) * .2);
  transition: color .15s, border-color .15s;
}
.slide .pager a.step:hover, .slide .pager a.step:focus-visible { color: var(--brand); border-color: #c7d2fe; }
.slide .pager .off { visibility: hidden; }
.slide .pager .count { min-width: calc(var(--u) * 4.5); text-align: center; }
@media (max-width: 700px) { .slide .pager { font-size: 12px; gap: 6px; } .slide .pager .step { width: 28px; height: 28px; font-size: 20px; } .slide .pager .count { min-width: 44px; } }

/* Board resources slide: resource types as small cards, and stacked panels */
.slide .types { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .7); }
.slide .types div { padding: calc(var(--u) * .55) calc(var(--u) * 1); border: 1px solid #fecaca; border-radius: calc(var(--u) * .8); background: #fef2f2; }
.slide .types b { display: block; font-size: calc(var(--u) * 1.3); }
.slide .types span { display: block; font-size: calc(var(--u) * 1.1); color: var(--muted); }
.slide .also { margin-top: calc(var(--u) * 1.1); font-size: calc(var(--u) * 1.2); }
.slide .stack { display: flex; flex-direction: column; }
.slide .stack .panel { font-size: calc(var(--u) * .98); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.8); }
.slide .becomes { text-align: center; color: #94a3b8; font-size: calc(var(--u) * 1.1); padding: calc(var(--u) * .45) 0; }
.slide .becomes::before { content: "↓ "; }

/* Family model slide: families → toolchain → what it runs, one row per toolchain */
.slide .familymap { display: grid; grid-template-columns: 1.5fr auto 1fr 1.6fr; align-items: center; gap: calc(var(--u) * 1.2) calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1.5); }
.slide .familymap .head { font-size: calc(var(--u) * 1.1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.slide .familymap .fams { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .6); }
.slide .familymap .fam { padding: calc(var(--u) * .5) calc(var(--u) * 1.1); border-radius: 999px; border: 1px solid #fecaca; background: #fef2f2; font-size: calc(var(--u) * 1.45); font-weight: 600; }
.slide .familymap .to { color: #a5b4fc; font-size: calc(var(--u) * 2.2); font-weight: 700; }
.slide .familymap .tc { padding: calc(var(--u) * .6) calc(var(--u) * 1.2); border-radius: calc(var(--u) * .8); border: 2px solid #c4b5fd; background: #f5f3ff; text-align: center; }
.slide .familymap .tc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: calc(var(--u) * 1.45); font-weight: 700; color: #5b21b6; background: none; padding: 0; }
.slide .familymap + .also { margin-top: calc(var(--u) * 2.8); }
.slide .familymap .tools { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: calc(var(--u) * 1.15); color: var(--muted); }

/* Title slide: light, with a soft wash of the brand colors */
.slide.title {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(6,182,212,.18), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(99,102,241,.16), transparent 70%),
    #fff;
}
.slide.title .logo { width: calc(var(--u) * 9); height: auto; margin-bottom: calc(var(--u) * 3); filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(99,102,241,.3)); }
.slide.title h1 { font-size: calc(var(--u) * 7.5); }
.slide.title h1 .open { font-weight: 400; color: var(--muted); }
.slide.title p { font-size: calc(var(--u) * 2.4); }
.slide.title .date { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 1.6); font-weight: 600; letter-spacing: .04em; color: var(--brand); }

/* Block diagram: rows of boxes joined by short links */
.diagram { display: flex; flex-direction: column; margin-top: calc(var(--u) * 1.5); }
.diagram .row { display: grid; gap: calc(var(--u) * 1.4); }
.diagram .fronts { grid-template-columns: repeat(5, 1fr); }
.diagram .fronts .box { justify-content: flex-start; }   /* icons line up even when a subtitle wraps */
/* Bottom row: catalog → engine → board, with the open API on top of the engine
   and the open source tools it runs under it */
.diagram .core { grid-template-columns: 1fr auto 1.6fr auto 1fr; grid-template-rows: auto auto auto; row-gap: 0; align-items: stretch; }
.diagram .core > :nth-child(1) { grid-area: 2 / 1; }
.diagram .core > :nth-child(2) { grid-area: 2 / 2; }
.diagram .core > :nth-child(3) { grid-area: 2 / 3; }
.diagram .core > :nth-child(4) { grid-area: 2 / 4; }
.diagram .core > :nth-child(5) { grid-area: 2 / 5; }
.diagram .core > .api { grid-area: 1 / 3; border: 2px solid #c4b5fd; border-bottom: 0; border-radius: calc(var(--u) * 1) calc(var(--u) * 1) 0 0; }
.diagram .core > .engine { border-radius: 0; }
.diagram .core > .tools { grid-area: 3 / 3; border: 2px solid #c4b5fd; border-top: 0; border-radius: 0 0 calc(var(--u) * 1) calc(var(--u) * 1); background: #f8fafc; }
.diagram .box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--u) * 1) calc(var(--u) * .8); border-radius: calc(var(--u) * 1);
  border: 1px solid var(--line); background: #fff;
}
.diagram .box img, .diagram .box svg { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); margin-bottom: calc(var(--u) * .6); }
.diagram b { font-size: calc(var(--u) * 1.5); line-height: 1.2; }
.diagram small { font-size: calc(var(--u) * 1.1); color: var(--muted); }
.diagram .box small { margin-top: calc(var(--u) * .45); line-height: 1.3; }
.diagram .third { border: 2px dashed #94a3b8; background: #f8fafc; }
.diagram .plus {
  display: grid; place-items: center; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); margin-bottom: calc(var(--u) * .6);
  border-radius: calc(var(--u) * 1.3); background: #e2e8f0; color: var(--muted); font-size: calc(var(--u) * 3.6); font-weight: 700; line-height: 1;
}
.diagram .link { height: calc(var(--u) * 3); width: 2px; margin: 0 auto; background: #a5b4fc; }
.diagram .band {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * .9); border-radius: calc(var(--u) * 1); font-size: calc(var(--u) * 1.3); color: var(--muted);
}
.diagram .band { text-align: center; }
.diagram .band b { font-size: inherit; color: var(--ink); }
.diagram .api { background: linear-gradient(90deg, #eef2ff, #ecfeff); border: 1px solid #c7d2fe; }
.diagram .remote { border-color: #a5f3fc; background: #f0fdff; }
.diagram .engine { border: 2px solid #c4b5fd; background: linear-gradient(120deg, #f5f3ff, #ede9fe); }
.diagram .catalog { border-color: #fecaca; background: #fef2f2; }
.diagram .arrow { display: grid; place-items: center; color: #a5b4fc; font-size: calc(var(--u) * 2.4); font-weight: 700; }

/* Phones: slides keep their order but grow to fit their text */
@media (max-width: 700px) {
  html { scroll-snap-type: none; }
  .frame { height: auto; padding: 12px; }
  .slide { --u: 8px; width: 100%; aspect-ratio: auto; min-height: 56vw; }
  .slide > .body { position: relative; }
  .bar nav a:not(.gh) { display: none; }
}