/* deck.css: layout and blocks. Reads only --deck-* tokens (see themes/).
   Slides are a fixed 1920x1080 canvas, and every size below is in canvas
   pixels. On screen the viewer scales the canvas to the window; in print the
   page box is the canvas, so screen and PDF are the same layout at the same
   size. Docs are Markdown articles with their own styles (see "Doc kind").
   No colour, font, weight or radius here assumes a theme: a theme can be
   light or dark, any fonts from the self-hosted set, any brand colours.
   Display letter-spacing is written for Unbounded and scaled by the theme's
   --deck-display-tracking.
   House rules: no em dashes, 1px borders. */

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  color:var(--deck-text); font-family:var(--deck-font-sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:var(--deck-ground); background-attachment:fixed; min-height:100dvh;
}
h1,h2,h3{margin:0; font-family:var(--deck-font-display); letter-spacing:calc(-0.02em * var(--deck-display-tracking)); text-wrap:balance; line-height:1.1}
p{margin:0; max-width:68ch}
strong{font-weight:700; color:inherit}
a{color:var(--deck-link); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--deck-link) 30%, transparent)}
:where(a,button):focus-visible{outline:2px solid var(--deck-primary); outline-offset:2px; border-radius:4px}
code{font-family:var(--deck-font-mono); font-size:.88em; background:var(--deck-sunken); padding:1px 6px; border-radius:5px}
code.keep{white-space:nowrap}
.nobr{white-space:nowrap}
.grad{background:var(--deck-gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
.print-only{display:none}
/* An icon (render/icons.ts): 1em square in the text's colour. */
.ph{display:inline-block; width:1em; height:1em; flex:none; vertical-align:-.14em}

/* ── Canvas ─────────────────────────────────────────────────────────────── */
.slide{
  width:1920px; height:1080px; padding:37px 53px 48px;
  display:flex; position:relative; flex:none;
  /* The theme's radii are sized for apps; on the canvas they scale with it. */
  --deck-radius:var(--deck-canvas-radius); --deck-radius-sm:var(--deck-canvas-radius-sm);
}
.page{
  flex:1; min-width:0; position:relative; overflow:hidden;
  /* Restated from body, for hosts that set their own text colour around a
     slide (the editor's canvas). */
  color:var(--deck-text);
  background:var(--deck-sheet); border:1px solid var(--deck-sheet-border);
  border-radius:var(--deck-radius); box-shadow:var(--deck-sheet-shadow);
  padding:69px 75px 101px;
  display:flex; flex-direction:column; gap:29px;
}
/* A block that starts a new thought, pushed away from what's above it. */
.page > .block.spaced{margin-top:53px}

/* Present and share: one slide at a time, centred and scaled by viewer.js.
   Before the script runs, every slide shows stacked, which is still readable. */
body.js .deck{position:fixed; inset:0; overflow:hidden}
body.js .deck .slide{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(var(--scale,1));
  visibility:hidden;
}
body.js .deck .slide.current{visibility:visible; z-index:1}
/* A slide on its way out stays visible for the fade, but takes no clicks. */
body.js .deck .slide:not(.current){pointer-events:none}

/* Motion, viewer only (screen, with viewer.js). Nothing here is layout: the
   end of every animation is the static slide, which is what lint, previews and
   the PDF see. Off with the system's reduced-motion setting or the
   reduce-motion class. */
@media screen and (prefers-reduced-motion: no-preference){
  /* Changing slide when presenting or on a share link: the new one fades in
     over the old, which stays put underneath until the fade is done. */
  :root:not(.reduce-motion) body.js:is(.mode-present,.mode-share) .deck .slide{opacity:0; transition:visibility 0s linear 180ms, opacity 0s linear 180ms}
  :root:not(.reduce-motion) body.js:is(.mode-present,.mode-share) .deck .slide.current{opacity:1; transition:opacity 180ms var(--deck-ease)}

  /* First visit of a slide when presenting or on a share link (not in
     rehearse): heading and blocks rise into place one after the other.
     viewer.js adds .enter once per slide, so paging back doesn't replay. */
  :root:not(.reduce-motion) body.js:is(.mode-present,.mode-share) .slide.enter .page > :not(.foot){
    animation:deck-rise 460ms var(--deck-ease-out) both; animation-delay:calc(var(--i, 0) * 55ms + 60ms);
  }
  /* Bars and rails grow from the left once their block is in. */
  :root:not(.reduce-motion) body.js:is(.mode-present,.mode-share) .slide.enter :is(.bar, .b-dispro) .fill{
    transform-origin:left center; animation:deck-grow 720ms var(--deck-ease-out) both; animation-delay:calc(var(--i, 0) * 55ms + 220ms);
  }
}
.page > :nth-child(2){--i:1} .page > :nth-child(3){--i:2} .page > :nth-child(4){--i:3}
.page > :nth-child(5){--i:4} .page > :nth-child(6){--i:5} .page > :nth-child(7){--i:6}
.page > :nth-child(n+8){--i:7}
@keyframes deck-rise{from{opacity:0; transform:translateY(14px)}}
@keyframes deck-grow{from{transform:scaleX(0)}}
/* Screen only: in print this padding pushed the first slide onto page two. */
@media screen{ body:not(.js) .deck{display:flex; flex-direction:column; align-items:center; gap:24px; padding:24px 0} }

/* ── Foot: author lockup and page number ────────────────────────────────── */
.foot{
  position:absolute; left:75px; right:75px; bottom:40px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:17px; color:var(--deck-text-faint);
}
.foot .author{display:flex; align-items:center; gap:11px; color:inherit; border:0}
.foot .author:hover{color:var(--deck-text)}
.mm-mark{width:24px; height:24px; flex:none}
.pgno{font-family:var(--deck-font-mono); font-size:16px; font-variant-numeric:tabular-nums}

/* ── Type roles ─────────────────────────────────────────────────────────── */
.kicker{font-family:var(--deck-font-mono); font-size:24px; letter-spacing:.2em; text-transform:uppercase; color:var(--deck-primary-ink)}
h2.title{font-weight:var(--deck-display-bold); font-size:61px; letter-spacing:calc(-0.03em * var(--deck-display-tracking))}
h2.title.big{font-size:83px; letter-spacing:calc(-0.04em * var(--deck-display-tracking))}
/* Kicker and tagline belong to the title: they sit closer to it than the
   stack gap, so the three read as one heading. Shrink only: what follows moves
   up, nothing can grow. */
.page > .kicker + .title{margin-top:-13px}
.page > .title + .tagline{margin-top:-8px}
.tagline{font-size:29px; font-weight:600; line-height:1.35; max-width:56ch; text-wrap:balance}
.tagline.wide{max-width:none}
.b-text.tagline{font-size:29px; font-weight:600; line-height:1.35; max-width:56ch; text-wrap:balance}
.b-text.lead{font-size:23px; color:var(--deck-text-muted); max-width:64ch}
.b-text.body{font-size:23px; max-width:68ch}
.b-text.wide{max-width:none}

.b-heading{
  font-weight:var(--deck-display-bold); font-size:20px; letter-spacing:calc(-0.01em * var(--deck-display-tracking)); text-transform:uppercase;
  padding-left:16px; position:relative;
}
.b-heading::before{content:""; position:absolute; left:0; top:3px; bottom:3px; width:4px; border-radius:3px; background:var(--deck-gradient-v)}
/* A section label sits close to what it labels, so it pulls back the stack gap. */
.b-label{font-family:var(--deck-font-mono); font-size:19px; letter-spacing:.18em; text-transform:uppercase; color:var(--deck-text-muted); margin-bottom:-16px}

/* ── Cover and section: inverse sheets ──────────────────────────────────── */
.shell-cover .page,.shell-section .page{
  background:var(--deck-inverse-sheet); border-color:var(--deck-inverse-border); box-shadow:none;
  justify-content:center; gap:37px; color:var(--deck-inverse-text);
  /* Every block on a dark sheet reads its light-sheet tokens as their inverse
     twins, so text, cards, rules and links stay legible whatever block lands
     here, without a rule per block. */
  --deck-text:var(--deck-inverse-text); --deck-text-muted:var(--deck-inverse-muted); --deck-text-faint:var(--deck-inverse-faint);
  --deck-sheet:var(--deck-inverse-card); --deck-sheet-border:var(--deck-inverse-border);
  --deck-border:var(--deck-inverse-rule); --deck-border-subtle:var(--deck-inverse-rule);
  --deck-sunken:var(--deck-inverse-sunken); --deck-link:var(--deck-inverse-link); --deck-neutral:var(--deck-inverse-neutral);
  --deck-primary-ink:var(--deck-inverse-primary-ink); --deck-secondary-ink:var(--deck-inverse-secondary-ink);
  --deck-tertiary-ink:var(--deck-inverse-tertiary-ink); --deck-neutral-ink:var(--deck-inverse-neutral-ink);
}
/* The dark state text colours are for white; on a dark sheet labels take the bright ones. */
.shell-cover .panel.tone-success,.shell-section .panel.tone-success{--pl:var(--deck-success-edge)}
.shell-cover .panel.tone-warning,.shell-section .panel.tone-warning{--pl:var(--deck-warning-edge)}
.shell-cover .panel.tone-danger,.shell-section .panel.tone-danger{--pl:var(--deck-danger-edge)}
.shell-cover .panel.tone-info,.shell-section .panel.tone-info{--pl:var(--deck-info-edge)}
/* Dark cards pick up their colour: a solid tint, so lint still reads it. */
.shell-cover .panel,.shell-section .panel{background-color:color-mix(in srgb, var(--pc, transparent) 8%, var(--deck-inverse-card))}
/* The pale state fills sit on a dark sheet like stickers: there a pill is a
   wash of its own colour, lettered in it. */
:is(.shell-cover,.shell-section) .b-pills .pill{
  --pill-bg:color-mix(in srgb, var(--pill-edge) 16%, transparent); --pill-fg:var(--pill-edge);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pill-edge) 45%, transparent);
}
.shell-cover .page::after,.shell-section .page::after{
  content:""; position:absolute; inset:auto -20% -55% 40%; height:70%; border-radius:50%;
  background:radial-gradient(closest-side, var(--deck-inverse-glow), transparent 70%); pointer-events:none;
}
/* On screen the cover has a second, fainter glow top left, so the sheet has
   some light on both sides. The PDF keeps the single glow. */
@media screen{
  .shell-cover .page::before{
    content:""; position:absolute; inset:-45% 45% auto -25%; height:80%; border-radius:50%;
    background:radial-gradient(closest-side, var(--deck-glow-2, transparent), transparent 72%); pointer-events:none;
  }
}
/* A custom theme's logo (--deck-logo, which its stylesheet sets): top left of
   the cover, at the sheet's padding, and smaller top right of a section, clear
   of the page number. none by default, so a theme without one draws exactly
   as before. */
.shell-cover .page,.shell-section .page{background-image:var(--deck-logo, none); background-repeat:no-repeat}
.shell-cover .page{background-position:75px 69px; background-size:auto 64px}
.shell-section .page{background-position:right 75px top 69px; background-size:auto 44px}
.shell-cover .kicker,.shell-section .kicker{position:relative; z-index:1}
.shell-cover h1{font-weight:var(--deck-display-heavy); font-size:144px; letter-spacing:calc(-0.05em * var(--deck-display-tracking)); line-height:.9; position:relative; z-index:1}
.shell-section h1{font-weight:var(--deck-display-heavy); font-size:96px; letter-spacing:calc(-0.045em * var(--deck-display-tracking)); line-height:.95; position:relative; z-index:1}
.shell-cover .tagline,.shell-section .tagline{color:var(--deck-inverse-muted); font-weight:500; position:relative; z-index:1}
.shell-cover .block,.shell-section .block{position:relative; z-index:1}
.shell-cover .foot,.shell-section .foot{color:var(--deck-inverse-dim)}
.shell-cover .foot .author:hover,.shell-section .foot .author:hover{color:var(--deck-inverse-muted)}
.rule{border-top:1px solid var(--deck-inverse-rule); padding-top:19px; position:relative; z-index:1; display:flex; flex-direction:column; gap:8px}
.who{font-family:var(--deck-font-mono); font-size:16px; letter-spacing:.18em; text-transform:uppercase; color:var(--deck-inverse-faint)}
.contact{font-size:20px; color:var(--deck-inverse-faint)}
.contact .sep{color:var(--deck-inverse-border); margin:0 11px}
.contact a{color:inherit}
/* The link text is the URL, so it still reads when printed. */
.deckLink{
  color:inherit; border:0; position:relative; z-index:1; width:fit-content;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
  text-decoration-color:color-mix(in srgb, var(--deck-inverse-muted) 45%, transparent); color:var(--deck-inverse-muted); font-size:24px;
}

/* Appendix: a smaller title, it labels a table rather than announcing an idea. */
.shell-appendix h2.title{font-size:43px}
/* A small tab, top right, says this is backup material, without a tint. It
   sits in the page's top padding, clear of the kicker and title. */
.shell-appendix .page::before{
  content:"Appendix"; position:absolute; top:24px; right:75px;
  padding:3px 14px; border-radius:var(--deck-radius-full); box-shadow:inset 0 0 0 1px var(--deck-border);
  font-family:var(--deck-font-mono); font-size:15px; line-height:1.55; letter-spacing:.16em; text-transform:uppercase; color:var(--deck-text-muted);
}

/* ── Blocks ─────────────────────────────────────────────────────────────── */
.b-bullets{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.b-bullets li{position:relative; padding-left:24px; font-size:23px; line-height:1.5; color:var(--deck-text-muted); max-width:70ch}
.b-bullets li::before{content:""; position:absolute; left:0; top:15px; width:8px; height:8px; border-radius:50%; background:var(--deck-gradient)}
.b-bullets li strong{color:var(--deck-text)}
.b-bullets.small li{font-size:19px}
.b-bullets.small li::before{top:12px; width:7px; height:7px}

.b-steps{margin:0; padding-left:32px; display:flex; flex-direction:column; gap:13px; font-size:23px; color:var(--deck-text-muted); list-style:none; counter-reset:step}
/* Numbered like the asks block: mono 01, 02 in primary, hung in the gutter
   the browser's own markers used, so the text doesn't move. */
.b-steps li{counter-increment:step; position:relative}
.b-steps li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:-32px; top:0;
  font-family:var(--deck-font-mono); font-size:16px; line-height:calc(23px * 1.55); letter-spacing:.06em; color:var(--deck-primary-ink);
}
.b-steps li strong{color:var(--deck-text)}

.b-quote{margin:0; display:flex; flex-direction:column; gap:13px}
.b-quote blockquote{
  margin:0; font-weight:600; font-size:37px; line-height:1.35; max-width:52ch; padding-left:24px; position:relative; text-wrap:balance;
}
.b-quote blockquote::before{content:""; position:absolute; left:0; top:5px; bottom:5px; width:4px; border-radius:3px; background:var(--deck-gradient-v)}
.b-quote figcaption{padding-left:24px; font-family:var(--deck-font-mono); font-size:17px; letter-spacing:.12em; text-transform:uppercase; color:var(--deck-text-muted)}

.b-stats{display:flex; flex-wrap:nowrap; gap:75px; align-items:flex-start}
.stat{display:flex; flex-direction:column; gap:3px; min-width:0}
.stat .n{
  font-family:var(--deck-font-display); font-weight:var(--deck-display-heavy); font-size:96px; line-height:.92; letter-spacing:calc(-0.045em * var(--deck-display-tracking));
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* One gradient moment per slide, on the number that carries it. */
.stat .n.hero{background:var(--deck-gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
/* The unit sits on the baseline, close to its number: the mono face leaves
   room on both sides of a glyph, so it's drawn a little to the left. A shift,
   not a margin, so the stat keeps its width and nothing after it moves. */
.stat .n .u{font-family:var(--deck-font-mono); font-size:.4em; font-weight:700; color:var(--deck-text-muted); letter-spacing:0; -webkit-text-fill-color:var(--deck-text-muted); position:relative; left:-.08em}
/* The label wraps to its number's width rather than its own: contain keeps it
   out of the stat's sizing, so a wide "$45,000" gets a label as wide as it is.
   The ::after floor keeps a short "88%" from squeezing its label to a few
   letters a line (about the old 24ch cap). */
.stat .l{font-family:var(--deck-font-mono); font-size:16px; letter-spacing:.13em; text-transform:uppercase; color:var(--deck-text-muted); margin-top:13px; line-height:1.5; contain:inline-size}
.stat::after{content:""; display:block; width:280px; max-width:100%; height:0}

.b-panels{display:grid; gap:19px}
.b-panels.cols-1{grid-template-columns:1fr}
.b-panels.cols-2{grid-template-columns:repeat(2,1fr)}
.b-panels.cols-3{grid-template-columns:repeat(3,1fr)}
.panel{
  background:var(--deck-sheet); border:1px solid var(--deck-sheet-border); border-radius:var(--deck-radius);
  padding:24px 27px; display:flex; flex-direction:column; gap:11px;
}
.cardlabel{font-family:var(--deck-font-mono); font-size:16px; letter-spacing:.13em; text-transform:uppercase; color:var(--deck-text-muted)}
.panel h3{font-family:var(--deck-font-sans); font-size:24px; font-weight:700; letter-spacing:-0.01em; text-wrap:balance}
.panel p{font-size:21px; color:var(--deck-text-muted); max-width:none; line-height:1.5}
/* Raw colour on the stroke and the label, never a tinted fill: a pale wash
   reads as a highlighter, a full-strength 1px stroke reads as a decision.
   Neutral is a dark grey on the same terms, so a plain card holds its own
   next to a coloured one instead of fading into the sheet. */
.panel.tone-neutral{--pc:var(--deck-neutral)}
.panel.tone-primary{--pc:var(--deck-primary)}
.panel.tone-secondary{--pc:var(--deck-secondary)}
/* The brand orange as a 1px line on white is under 2:1 and fades out; a step
   towards its ink brings it to the 3:1 a boundary needs. On a dark sheet the
   ink is the orange itself, so nothing changes there. */
.panel.tone-tertiary{--pc:color-mix(in srgb, var(--deck-tertiary) 70%, var(--deck-tertiary-ink))}
.panel.tone-success{--pc:var(--deck-success-edge)}
.panel.tone-warning{--pc:var(--deck-warning-edge)}
.panel.tone-danger{--pc:var(--deck-danger-edge)}
.panel.tone-info{--pc:var(--deck-info-edge)}
.panel{border-color:var(--pc, var(--deck-sheet-border))}
.panel .cardlabel{color:var(--pl, var(--pc, var(--deck-text-muted)))}
/* A stroke can be paler than a label: labels take the role's ink, which the
   theme keeps at 4.5:1 on the sheet. Bright amber and green read fine as a
   1px stroke but not as small text on white, so state labels take the darker
   text colour. Same rule as mathieu-ds. */
.panel.tone-neutral{--pl:var(--deck-neutral-ink)}
.panel.tone-primary{--pl:var(--deck-primary-ink)}
.panel.tone-secondary{--pl:var(--deck-secondary-ink)}
.panel.tone-success{--pl:var(--deck-success-fg)}
.panel.tone-warning{--pl:var(--deck-warning-fg)}
.panel.tone-danger{--pl:var(--deck-danger-fg)}
.panel.tone-info{--pl:var(--deck-info-fg)}
.panel.tone-tertiary{--pl:var(--deck-tertiary-ink)}
/* The answer card (fill: true): filled with its tone, in the ink that reads
   on it, like a profile card without the ghost. A solid colour, not a
   gradient, so lint still checks every word on it. */
.b-panels .panel.filled{background-color:var(--pc, var(--deck-neutral)); color:var(--pi, var(--deck-on-neutral)); --pl:currentColor}
.panel.filled.tone-neutral{--pi:var(--deck-on-neutral)}
.panel.filled.tone-primary{--pi:var(--deck-on-primary)}
.panel.filled.tone-secondary{--pi:var(--deck-on-secondary)}
.panel.filled.tone-tertiary{--pi:var(--deck-on-tertiary)}
.panel.filled.tone-success{--pi:var(--deck-on-success)}
.panel.filled.tone-warning{--pi:var(--deck-on-warning)}
.panel.filled.tone-danger{--pi:var(--deck-on-danger)}
.panel.filled.tone-info{--pi:var(--deck-on-info)}
.panel.filled.tone-tertiary{--pc:var(--deck-tertiary)}
:is(.shell-cover,.shell-section) .panel.filled.tone-neutral{--pi:var(--deck-inverse-on-neutral)}
.panel.filled :is(p, li, strong, a){color:inherit}
.panel.filled a{border-bottom-color:color-mix(in srgb, currentColor 45%, transparent)}
.panel.filled .b-bullets li::before{background:currentColor}
/* On a fill, inline code sits on a dark wash (a light one drops white ink on
   blue under 3:1), and a gradient phrase is plain ink: the gradient would
   vanish into a card of the same colours. print.js skips it for the same
   reason. */
.panel.filled code{background:color-mix(in srgb, var(--deck-inverse-sheet) 16%, transparent)}
.panel.filled .grad{background:none; color:currentColor; -webkit-text-fill-color:currentColor}
@media screen{
  .panel,.kill{box-shadow:var(--deck-card-shadow, 0 0 transparent), 0 18px 36px -26px color-mix(in srgb, var(--pc, var(--deck-neutral)) var(--deck-card-tint, 0%), transparent)}
  .panel.filled{box-shadow:var(--deck-card-shadow, 0 0 transparent), 0 22px 44px -26px color-mix(in srgb, var(--pc, var(--deck-neutral)) 75%, transparent)}
}

.b-turn{font-size:28px; font-weight:700; letter-spacing:-0.015em; line-height:1.35; max-width:none}
.b-turn strong{
  font-family:var(--deck-font-display); font-weight:var(--deck-display-heavy); font-size:35px; letter-spacing:calc(-0.035em * var(--deck-display-tracking));
  background:var(--deck-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.b-ladder{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.b-ladder li{display:flex; gap:19px; font-size:21px; line-height:1.45; color:var(--deck-text-muted)}
.b-ladder b{font-family:var(--deck-font-mono); font-size:16px; letter-spacing:.1em; text-transform:uppercase; color:var(--deck-text); flex:none; width:253px; padding-top:4px; white-space:nowrap}

.b-flow{display:flex; align-items:center; gap:19px}
.b-flow .step{
  flex:1 1 0; text-align:center; padding:19px 21px; border-radius:var(--deck-radius);
  font-family:var(--deck-font-mono); font-size:19px; letter-spacing:.14em; text-transform:uppercase; color:var(--deck-on-walk);
  /* --c is set per step by the component: the gradient's stops, mixed. */
  background:var(--c, var(--deck-stop-0));
}
/* Past three quarters of the way, the last stop: its own ink. */
.b-flow .step.end{color:var(--deck-on-walk-end)}
.b-flow .arw{color:var(--deck-text-muted); font-size:29px; flex:none; display:inline-flex}

.b-table{max-width:100%}
.b-table table{width:100%; border-collapse:collapse; font-size:20px}
.b-table th,.b-table td{text-align:left; padding:11px 19px 11px 0; border-top:1px solid var(--deck-border-subtle); vertical-align:top}
.b-table thead th{border-top:0; border-bottom:1px solid var(--deck-border-subtle); font-family:var(--deck-font-mono); font-size:16px; text-transform:uppercase; letter-spacing:.11em; color:var(--deck-text-muted); font-weight:400}
.b-table td{color:var(--deck-text-muted)}
.b-table td strong{color:var(--deck-text)}
/* The head rule one step stronger than the body's, the first column in the
   text colour so row labels read as labels, and a closing rule under the
   last row, drawn inside the cell so the table doesn't grow. */
.b-table thead th{border-bottom-color:var(--deck-border)}
.b-table tbody td:first-child{color:var(--deck-text)}
.b-table tbody tr:last-child td{box-shadow:inset 0 -1px 0 var(--deck-border)}
.b-table .num{text-align:right; font-family:var(--deck-font-mono); font-variant-numeric:tabular-nums}

.b-bars{display:flex; flex-direction:column; gap:24px; max-width:1093px}
.bar .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:16px}
.bar .lb{font-size:21px; font-weight:600}
.bar .v{font-family:var(--deck-font-mono); font-size:19px; font-weight:700; color:var(--deck-text-muted)}
.bar:has(.fill.emphasis) .v{color:var(--deck-text)}
/* The gradient spans the track, not the bar: each bar shows the part of it
   it reaches, so a short bar stays violet. The track is the size container
   the fill's background is measured against. */
.bar .track{height:24px; background:var(--deck-sunken); border-radius:var(--deck-radius-full); overflow:hidden; container-type:inline-size}
.bar .fill{height:100%; border-radius:var(--deck-radius-full)}
.bar .fill.emphasis{background:var(--deck-gradient); background-size:100cqw 100%; background-repeat:no-repeat}
.bar .fill.muted{background:var(--deck-muted-fill)}

.b-dispro{display:grid; gap:64px}
.b-dispro.cols-2{grid-template-columns:repeat(2,1fr)}
.b-dispro.cols-3{grid-template-columns:repeat(3,1fr)}
.b-dispro .d{display:flex; flex-direction:column; gap:13px}
/* One gradient moment: only the biggest number (.top) carries it, the others
   are set in the text colour. Rails are to scale, like bars. */
.b-dispro .n{font-family:var(--deck-font-display); font-weight:var(--deck-display-heavy); font-size:51px; line-height:.95; letter-spacing:calc(-0.045em * var(--deck-display-tracking)); font-variant-numeric:tabular-nums; color:var(--deck-text); width:fit-content}
.b-dispro .top .n{background:var(--deck-gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
.b-dispro .track{height:11px; background:var(--deck-sunken); border-radius:var(--deck-radius-full); overflow:hidden; container-type:inline-size}
.b-dispro .fill{height:100%; background:var(--deck-gradient); background-size:100cqw 100%; background-repeat:no-repeat; border-radius:var(--deck-radius-full)}
.b-dispro .l{font-family:var(--deck-font-mono); font-size:16px; letter-spacing:.13em; text-transform:uppercase; color:var(--deck-text-muted); line-height:1.5; max-width:26ch}

.b-kills{display:flex; flex-direction:column; gap:16px}
.killhead{font-family:var(--deck-font-mono); font-size:16px; letter-spacing:.13em; text-transform:uppercase; color:var(--deck-secondary-ink)}
.killgrid{display:grid; gap:19px; grid-template-columns:repeat(var(--n,3),1fr)}
.killgrid.cols-1{--n:1} .killgrid.cols-2{--n:2} .killgrid.cols-3{--n:3} .killgrid.cols-4{--n:4}
.kill{display:flex; flex-direction:column; gap:21px; padding:24px; background:var(--deck-sheet); border:1px solid var(--deck-sheet-border); border-radius:var(--deck-radius)}
.kill h3{font-family:var(--deck-font-sans); font-size:25px; font-weight:700; letter-spacing:-0.015em; line-height:1.3}
/* Verdicts pinned to the bottom so the numbers line up across columns. */
.kill .verdict{display:flex; flex-wrap:nowrap; gap:27px; margin-top:auto}
.kill .v{display:flex; flex-direction:column; gap:4px; min-width:0}
.kill .v b{font-family:var(--deck-font-display); font-weight:var(--deck-display-heavy); font-size:33px; line-height:1; letter-spacing:calc(-0.035em * var(--deck-display-tracking)); font-variant-numeric:tabular-nums; white-space:nowrap}
.kill .v > span{font-family:var(--deck-font-mono); font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--deck-text-muted); line-height:1.45}
.kill .v.hero b{background:var(--deck-gradient); -webkit-background-clip:text; background-clip:text; color:transparent}

.b-qa{display:grid; grid-template-columns:repeat(2,1fr); gap:24px 59px}
.b-qa .q{font-weight:700; font-size:23px}
.b-qa .a{font-size:21px; color:var(--deck-text-muted); max-width:72ch; margin-top:3px}

.b-asks{list-style:none; margin:0; padding:0; counter-reset:ask; display:flex; flex-direction:column; gap:40px}
.b-asks li{counter-increment:ask; position:relative; padding-left:69px; max-width:54ch; font-size:35px; line-height:1.38; letter-spacing:-0.01em}
.b-asks li::before{content:counter(ask,decimal-leading-zero); position:absolute; left:0; top:.5em; font-family:var(--deck-font-mono); font-size:17px; letter-spacing:.1em; color:var(--deck-text-muted)}

.b-pills{display:flex; flex-wrap:wrap; gap:11px}
.pill{
  display:inline-flex; align-items:center; gap:9px; height:35px; padding:0 16px;
  border-radius:var(--deck-radius-full); font-family:var(--deck-font-mono); font-size:17px; letter-spacing:.02em; white-space:nowrap;
  background:var(--pill-bg); color:var(--pill-fg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pill-edge) 32%, transparent);
}
.pill::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--pill-edge); flex:none}
.pill.neutral{--pill-bg:var(--deck-neutral-bg); --pill-fg:var(--deck-neutral-fg); --pill-edge:var(--deck-neutral-edge)}
.pill.success{--pill-bg:var(--deck-success-bg); --pill-fg:var(--deck-success-fg); --pill-edge:var(--deck-success-edge)}
.pill.warning{--pill-bg:var(--deck-warning-bg); --pill-fg:var(--deck-warning-fg); --pill-edge:var(--deck-warning-edge)}
.pill.info{--pill-bg:var(--deck-info-bg); --pill-fg:var(--deck-info-fg); --pill-edge:var(--deck-info-edge)}
.pill.danger{--pill-bg:var(--deck-danger-bg); --pill-fg:var(--deck-danger-fg); --pill-edge:var(--deck-danger-edge)}

/* Media with height "fill" share the room left under the title and the other
   blocks. Each level passes the height down with flex, min-height:0 lets it
   shrink below the image's natural size. */
.page > .block.fill,.editor-body > :has(> .block.fill),.editor-body > :has(> .block.fill) > .block.fill{flex:1 1 0; min-height:0; display:flex; flex-direction:column}
.block.fill > *{flex:1 1 0; min-height:0}
.editor-body{flex:1 1 auto}

.b-image{margin:0; display:flex; flex-direction:column; gap:11px}
.b-image img{width:100%; display:block; border-radius:var(--deck-radius-sm); background:var(--deck-sunken)}
.block.fill .b-image img{flex:1 1 0; min-height:0}
/* Contained, it's only as wide as its height makes it: no letterbox. */
.block.fill .b-image.fit-contain img{width:auto; max-width:100%; align-self:flex-start; background:none; border:1px solid var(--deck-sheet-border)}
.b-image figcaption,.b-embed .url{font-size:19px; color:var(--deck-text-muted)}
.b-image figcaption{text-wrap:balance}

/* An embed is its iframe over a placeholder (the app icon and the title on
   the sunken fill): the iframe stays see-through until viewer.js marks the
   figure loaded, so a slow prototype isn't a blank box. */
.b-embed{margin:0; border:1px solid var(--deck-sheet-border); border-radius:var(--deck-radius); overflow:hidden; background:var(--deck-sunken); position:relative}
.b-embed .live{width:100%; height:100%; border:0; display:block; background:var(--deck-frame-bg, #fff); position:relative; z-index:1}
/* See-through only with the viewer running, which marks it loaded; the
   editor and anything else without viewer.js get the solid frame. */
body.js .b-embed:not(.loaded) .live{background:transparent}
.b-embed.loaded .loading{display:none}
.b-embed .loading{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  font-family:var(--deck-font-mono); font-size:17px; letter-spacing:.06em; color:var(--deck-text-muted); pointer-events:none;
}
.b-embed .loading .ph{font-size:48px; color:var(--deck-text-faint)}

/* Screenshots and embeds lift off the sheet on screen; the PDF keeps them
   flat. On a dark sheet a shadow can't show, a hairline ring does. */
@media screen{
  .b-image img,.b-annotated img,.b-embed{box-shadow:var(--deck-media-shadow, 0 0 transparent)}
  :is(.shell-cover,.shell-section) :is(.b-image img,.b-annotated img,.b-embed){box-shadow:0 0 0 1px var(--deck-inverse-border)}
}

.b-linkcard{
  display:flex; flex-direction:column; gap:8px; width:fit-content; min-width:560px; max-width:100%;
  padding:24px 29px; border:1px solid var(--deck-sheet-border); border-radius:var(--deck-radius);
  color:var(--deck-text); background:var(--deck-sheet);
}
@media screen and (hover:hover){
  .b-linkcard{transition:border-color .2s var(--deck-ease-out), box-shadow .2s var(--deck-ease-out)}
  a.b-linkcard:hover{border-color:var(--deck-primary); box-shadow:var(--deck-card-shadow, 0 0 transparent)}
}
.b-linkcard .t{font-family:var(--deck-font-display); font-weight:var(--deck-display-bold); font-size:29px; letter-spacing:calc(-0.02em * var(--deck-display-tracking))}
.b-linkcard .d{font-size:21px; color:var(--deck-text-muted)}
.b-linkcard .url{font-family:var(--deck-font-mono); font-size:17px; color:var(--deck-link)}
.shell-cover .b-linkcard,.shell-section .b-linkcard{background:transparent; border-color:var(--deck-inverse-border); color:var(--deck-inverse-text)}

/* Profiles: a card per place to find someone. The tone strokes the card and
   fills the icon's badge; the icon takes the ink that reads on that fill. */
.b-profiles{display:grid; grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); gap:19px}
.b-profiles.n1{--cols:1; max-width:640px} .b-profiles.n2{--cols:2} .b-profiles.n4{--cols:4}
/* Filled with the card's colour (--pc), fading towards --pc2, in the ink that
   reads on it (--pi). The ghost is the icon again, big and faint, cut off by
   the card's right edge. */
.profile{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:21px; min-width:0; padding:24px 27px;
  background:linear-gradient(120deg, var(--pc), var(--pc2, var(--pc))); border-radius:var(--deck-radius);
  color:var(--pi, var(--deck-on-walk)); box-shadow:0 18px 40px -26px var(--pc);
}
.profile-badge{
  flex:none; width:69px; height:69px; border-radius:var(--deck-radius-sm); display:grid; place-items:center;
  background:color-mix(in srgb, currentColor 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.profile-icon{width:37px; height:37px}
.profile-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.profile-name{font-family:var(--deck-font-display); font-weight:var(--deck-display-bold); font-size:29px; letter-spacing:calc(-0.02em * var(--deck-display-tracking)); line-height:1.1}
.profile-url{font-family:var(--deck-font-mono); font-size:17px; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.profile-go{flex:none; font-size:27px; opacity:.8; display:inline-flex}
.profile-ghost{position:absolute; right:-24px; top:50%; transform:translateY(-50%) rotate(-12deg); z-index:-1; opacity:.13; pointer-events:none}
.profile-ghost .profile-icon{width:150px; height:150px}
@media screen and (hover:hover){
  .profile{transition:transform .2s var(--deck-ease-out), box-shadow .2s var(--deck-ease-out)}
  .profile:hover{transform:translateY(-3px); box-shadow:0 24px 44px -24px var(--pc)}
  .profile:hover .profile-go{opacity:1}
}
/* Four across: the arrow gives its room to the address; the card is the link. */
.b-profiles.n4 .profile-go{display:none}
.b-profiles.n4 .profile{gap:18px; padding:21px}
.b-profiles.n4 .profile-url{white-space:normal}
.profile.tone-neutral{--pc:var(--deck-neutral); --pi:var(--deck-on-neutral)}
.profile.tone-primary{--pc:var(--deck-primary); --pi:var(--deck-on-primary)}
.profile.tone-secondary{--pc:var(--deck-secondary); --pi:var(--deck-on-secondary)}
.profile.tone-tertiary{--pc:var(--deck-tertiary); --pi:var(--deck-on-tertiary)}
.profile.tone-success{--pc:var(--deck-success-edge); --pi:var(--deck-on-success)}
.profile.tone-warning{--pc:var(--deck-warning-edge); --pi:var(--deck-on-warning)}
.profile.tone-danger{--pc:var(--deck-danger-edge); --pi:var(--deck-on-danger)}
.profile.tone-info{--pc:var(--deck-info-edge); --pi:var(--deck-on-info)}
:is(.shell-cover,.shell-section) .profile.tone-neutral{--pi:var(--deck-inverse-on-neutral-card)}

/* The shot is a size container, so the image can be capped by both of its
   sides (cqw, cqh) and the frame still shrinks to exactly the image: regions
   are percentages of the frame and have to land on the pixels they mark. */
.b-annotated{display:grid; grid-template-columns:minmax(0,1fr) 453px; gap:37px; align-items:start}
.block.fill .b-annotated{align-items:stretch}
/* A narrow image sits against its notes rather than floating mid-column. */
.b-annotated .shot{display:flex; justify-content:flex-end; align-items:flex-start; container-type:size; min-height:0}
.b-annotated .frame{position:relative; width:fit-content; height:fit-content}
.b-annotated img{max-width:100cqw; max-height:100cqh; width:auto; height:auto; display:block; border-radius:var(--deck-radius-sm); border:1px solid var(--deck-sheet-border)}
/* A mark is a solid line with a soft halo and a faint wash of its colour, so
   it holds on a busy screenshot; its number wears a ring of the sheet. */
.b-annotated .mark,.lightbox .mark{
  position:absolute; border:3px solid var(--mc); border-radius:8px;
  background-color:color-mix(in srgb, var(--mc) 8%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--mc) 22%, transparent);
}
.b-annotated .mark::before,.lightbox .mark::before{
  content:attr(data-n); position:absolute; top:-16px; left:-16px; width:32px; height:32px; border-radius:50%;
  background:var(--mc); color:var(--mi); font-family:var(--deck-font-mono); font-size:16px; font-weight:700;
  display:grid; place-items:center; box-shadow:0 0 0 3px var(--deck-mark-ring);
}
.b-annotated .notes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:19px}
.b-annotated .notes li{display:flex; gap:16px; font-size:20px; color:var(--deck-text-muted); line-height:1.45}
.b-annotated .notes b{flex:none; width:32px; height:32px; border-radius:50%; background:var(--mc); color:var(--mi); font-family:var(--deck-font-mono); font-size:16px; display:grid; place-items:center}
.mark.tone-neutral,.notes .tone-neutral{--mc:var(--deck-neutral); --mi:var(--deck-on-neutral)}
.mark.tone-primary,.notes .tone-primary{--mc:var(--deck-primary); --mi:var(--deck-on-primary)}
.mark.tone-secondary,.notes .tone-secondary{--mc:var(--deck-secondary); --mi:var(--deck-on-secondary)}
.mark.tone-tertiary,.notes .tone-tertiary{--mc:var(--deck-tertiary); --mi:var(--deck-on-tertiary)}
.mark.tone-success,.notes .tone-success{--mc:var(--deck-success-edge); --mi:var(--deck-on-success)}
.mark.tone-warning,.notes .tone-warning{--mc:var(--deck-warning-edge); --mi:var(--deck-on-warning)}
.mark.tone-danger,.notes .tone-danger{--mc:var(--deck-danger-edge); --mi:var(--deck-on-danger)}
.mark.tone-info,.notes .tone-info{--mc:var(--deck-info-edge); --mi:var(--deck-on-info)}
:is(.shell-cover,.shell-section) :is(.mark,.notes li).tone-neutral{--mi:var(--deck-inverse-on-neutral-card)}

/* Click to see it full screen, like on any website. viewer.js clones the
   [data-zoom] element (an annotated frame keeps its marks) into the box. */
[data-zoom]{cursor:zoom-in}
.lightbox{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:3vmin;
  background:rgba(10,8,20,.88); cursor:zoom-out; container-type:size;
}
.lightbox > *{cursor:zoom-out; margin:0}
.lightbox > img,.lightbox .frame > img{max-width:94cqw; max-height:94cqh; width:auto; height:auto; display:block; border-radius:8px; object-fit:contain; background:none}
.lightbox .frame{position:relative; width:fit-content; height:fit-content}
.lightbox .frame > img{border:0}
.lightbox .close{position:fixed; top:16px; right:20px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:22px; cursor:pointer; display:grid; place-items:center}
.lightbox .close:hover{background:rgba(255,255,255,.22)}
@media print{ [data-zoom]{cursor:auto} .lightbox{display:none} }

.b-markdown{font-size:23px; color:var(--deck-text); display:flex; flex-direction:column; gap:16px}
.b-markdown :where(h1,h2,h3,h4){font-size:29px; margin-top:8px}
.b-markdown :where(p,ul,ol){margin:0}
.b-markdown :where(ul,ol){padding-left:29px; color:var(--deck-text-muted)}
/* House bullets, as in the bullets block, hung where the browser's disc was. */
.b-markdown ul{list-style:none}
.b-markdown ul > li{position:relative}
.b-markdown ul > li::before{content:""; position:absolute; left:-24px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--deck-gradient)}
.b-markdown li strong{color:var(--deck-text)}
.b-markdown thead th{border-top:0; border-bottom:1px solid var(--deck-border)}
.b-markdown table{border-collapse:collapse; font-size:20px}
.b-markdown :where(th,td){border-top:1px solid var(--deck-border-subtle); padding:8px 16px 8px 0; text-align:left}
.b-markdown img{max-width:100%}

/* ── Doc kind: one Markdown text, set as an article ─────────────────────── */
/* Window pixels here, not canvas pixels: a doc is read, not projected. The
   white sheet sits on the gradient ground like a slide; the contents list
   rides alongside on wide screens. */
/* The same ground as the slide viewer, fixed to the window. Scrolling it with
   the page stretched the gradient over the doc's whole height, so a long doc
   only ever showed the violet end. A fixed layer rather than
   background-attachment:fixed, which Safari on iOS ignores. */
body.kind-doc{background:none}
body.kind-doc::before{content:""; position:fixed; inset:0; z-index:-1; background:var(--deck-ground); pointer-events:none}
.doc-col{display:flex; flex-direction:column; gap:20px; min-width:0}

/* The title card: a cover slide, smaller. Inverse sheet, mono kicker, the
   title in the display face, the glow in the corner, the author underneath. */
.title-card{
  position:relative; overflow:hidden; border-radius:var(--deck-radius); padding:44px 56px 36px;
  background:var(--deck-inverse-sheet); border:1px solid var(--deck-inverse-border); color:var(--deck-inverse-text);
}
.title-card::after{
  content:""; position:absolute; inset:auto -20% -70% 40%; height:90%; border-radius:50%;
  background:radial-gradient(closest-side, var(--deck-inverse-glow), transparent 70%); pointer-events:none;
}
@media screen{
  .title-card::before{
    content:""; position:absolute; inset:-70% 50% auto -25%; height:110%; border-radius:50%;
    background:radial-gradient(closest-side, var(--deck-glow-2, transparent), transparent 72%); pointer-events:none;
  }
}
.title-card .kicker{font-size:13px; letter-spacing:.2em; margin:0 0 14px; position:relative; z-index:1}
.title-card h1{font-weight:var(--deck-display-heavy); font-size:48px; line-height:.98; letter-spacing:calc(-0.045em * var(--deck-display-tracking)); margin:0; position:relative; z-index:1}
.title-card-by{
  display:flex; align-items:center; gap:8px; margin-top:24px; padding-top:14px; border-top:1px solid var(--deck-inverse-rule);
  font-family:var(--deck-font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--deck-inverse-faint);
  position:relative; z-index:1;
}
.title-card-by .mm-mark{width:16px; height:16px; color:var(--deck-inverse-dim)}
/* The theme's logo, top right of the card, as on a section slide. */
.title-card{background-image:var(--deck-logo, none); background-repeat:no-repeat; background-position:right 56px top 44px; background-size:auto 32px}

/* Task lists (- [ ] item): the checkbox is the bullet, so no dot. */
.md li:has(> input[type=checkbox]){padding-left:0; list-style:none}
.md li:has(> input[type=checkbox])::before{display:none}
.md li > input[type=checkbox]{accent-color:var(--deck-primary); margin:0 10px 0 0; vertical-align:-1px}
.doc{display:grid; grid-template-columns:minmax(0,780px); gap:32px; justify-content:center; padding:40px 24px 80px}
.doc.with-toc{grid-template-columns:220px minmax(0,780px)}
/* The side column: the back link (when the doc came from a folder) and the
   contents, sticky together so both stay in reach. */
.doc-side{position:sticky; top:40px; align-self:start; display:flex; flex-direction:column; gap:12px; min-width:0}
.toc{display:flex; flex-direction:column; gap:2px; background:var(--deck-sheet); border-radius:var(--deck-radius); padding:16px; border:1px solid var(--deck-sheet-border); max-height:calc(100dvh - 122px); overflow:auto}
.toc-hd{font-family:var(--deck-font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--deck-primary-ink); margin-bottom:8px}
.toc a{font-size:14px; line-height:1.35; color:var(--deck-text-muted); border:0; padding:4px 0}
.toc a.l3{padding-left:12px; font-size:13px}
.toc a:hover{color:var(--deck-text)}

.md{
  background:var(--deck-sheet); border:1px solid var(--deck-sheet-border); border-radius:var(--deck-radius);
  box-shadow:var(--deck-sheet-shadow); padding:56px 64px 40px; min-width:0;
  font-size:17px; line-height:1.65; color:var(--deck-text);
}
.md > div > :first-child{margin-top:0}
.md :where(p, ul, ol, blockquote, figure, .md-table, pre, hr){margin:0 0 18px}
.md p{max-width:none}
.md h1{font-weight:var(--deck-display-heavy); font-size:44px; line-height:1.05; letter-spacing:calc(-0.04em * var(--deck-display-tracking)); margin:0 0 24px}
.md h2{font-weight:var(--deck-display-bold); font-size:26px; letter-spacing:calc(-0.025em * var(--deck-display-tracking)); margin:44px 0 14px; padding-left:16px; position:relative; scroll-margin-top:24px}
.md h2::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:3px; background:var(--deck-gradient-v)}
.md h3{font-family:var(--deck-font-sans); font-weight:700; font-size:19px; letter-spacing:-0.01em; margin:28px 0 8px; scroll-margin-top:24px}
.md h4{font-family:var(--deck-font-mono); font-weight:400; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--deck-primary-ink); margin:24px 0 6px}
.md strong{color:var(--deck-text)}
.md a{color:var(--deck-link)}
/* ::profiles in a doc: the slide's cards at reading size, badge above the name. */
.md .b-profiles{margin:28px 0; gap:12px}
.md .profile{flex-direction:column; align-items:flex-start; gap:12px; padding:16px 18px; color:var(--pi, var(--deck-on-walk)); text-decoration:none; border-radius:var(--deck-radius)}
.md .profile-ghost .profile-icon{width:96px; height:96px}
.md .profile-badge{width:44px; height:44px; border-radius:9px}
.md .profile-icon{width:24px; height:24px}
.md .profile-name{font-size:19px}
.md .profile-url{font-size:12.5px; white-space:normal}
.md .profile-go{display:none}
.md ul{list-style:none; padding:0}
.md ul > li{position:relative; padding-left:20px; margin:6px 0}
.md ul > li::before{content:""; position:absolute; left:2px; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--deck-gradient)}
.md ol{padding-left:24px}
.md ol > li{margin:6px 0; padding-left:4px}
.md ol > li::marker{font-family:var(--deck-font-mono); font-size:13px; color:var(--deck-text-muted)}
.md li > :is(ul, ol){margin:6px 0 0}
.md blockquote{padding-left:20px; position:relative; font-size:20px; font-weight:600; line-height:1.45}
.md blockquote::before{content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:3px; background:var(--deck-gradient-v)}
.md blockquote p{margin:0 0 8px}
.md code{font-size:.86em}
.md pre{background:var(--deck-sunken); border-radius:var(--deck-radius-sm); padding:16px 18px; overflow-x:auto; font-size:14px; line-height:1.55}
.md pre code{background:none; padding:0; font-size:inherit}
.md hr{border:0; height:2px; border-radius:2px; background:var(--deck-gradient); margin:36px 0}
.md img{max-width:100%; height:auto; border-radius:var(--deck-radius-sm); display:block}
body:not([data-mode="print"]) .md img{cursor:zoom-in}
.md a img{cursor:pointer}
.md figure figcaption{font-size:14px; color:var(--deck-text-muted); margin-top:8px}
.md-table{overflow-x:auto}
.md table{width:100%; border-collapse:collapse; font-size:15px}
.md th,.md td{text-align:left; padding:9px 14px 9px 0; border-top:1px solid var(--deck-border-subtle); vertical-align:top}
.md thead th{border-top:0; border-bottom:1px solid var(--deck-border-subtle); font-family:var(--deck-font-mono); font-size:11px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--deck-text-muted)}
.md td{color:var(--deck-text-muted)}
.md-foot{margin-top:48px; padding-top:18px; border-top:1px solid var(--deck-border-subtle); font-size:13px; color:var(--deck-text-faint)}
.md-foot .author{display:inline-flex; align-items:center; gap:8px; color:inherit; border:0}
.md-foot .mm-mark{width:18px; height:18px}
.md-foot{display:flex; align-items:center; gap:16px}

/* "Made with Deck": the credit, quiet, centred at the foot of a slide, a doc
   and a landing page. */
.made-with,.md .made-with{display:inline-flex; align-items:center; gap:7px; color:inherit; border:0; text-decoration:none; white-space:nowrap}
.made-with .made-icon{display:inline-flex; color:var(--deck-text-muted)}
.made-with .deck-mark{width:14px; height:14px}
.made-with b{font-weight:600; color:var(--deck-text-muted)}
.made-with:hover b{color:var(--deck-primary-ink)}
.page-credit .made-icon,.viewer-credit .made-icon{color:var(--deck-text)}
.viewer-credit .deck-mark{width:calc(var(--hh,30px) * .5); height:calc(var(--hh,30px) * .5)}
/* Under a deck's slide, on the ground, level with the page counter. */
/* viewer.js gives it the hud's --hh and bottom, so the two share one line. */
.viewer-credit{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:40; margin:0; max-width:none;
  font-size:calc(var(--hh,30px) * .433); color:var(--deck-text-muted)}
.viewer-credit .made-with{height:var(--hh,30px); box-sizing:border-box; padding:0 calc(var(--hh,30px) * .47); gap:calc(var(--hh,30px) * .25); border-radius:99px; background:var(--deck-chip-bg); box-shadow:var(--deck-chip-shadow)}
.viewer-credit .made-with b{color:var(--deck-text)}
/* A phone has no room in the middle: it moves to the left, clear of the counter. */
@media (max-width: 600px){ .viewer-credit{left:16px; transform:none} }
/* Under a doc's sheet and a landing page's owner card. */
.page-credit{margin:0; width:100%; max-width:none; display:flex; justify-content:center; font-size:13px; color:var(--deck-text-muted)}
/* A short landing page ends on the gradient, a long one on white: a small
   white pill, like the page's other buttons, reads on both. */
.page-credit .made-with{padding:7px 14px; border-radius:99px; background:var(--deck-chip-bg); box-shadow:var(--deck-chip-shadow)}
.page-credit .made-with b{color:var(--deck-text)}
/* "Report": quieter still, beside the credit, or alone where the pill is off. */
.viewer-credit,.page-credit{display:flex; align-items:center; justify-content:center; gap:12px}
.report-link,.md .report-link{color:var(--deck-text-muted); border:0; text-decoration:underline; text-underline-offset:2px; font-size:12px; white-space:nowrap}
.report-link:hover{color:var(--deck-text)}

/* ── Folder: the front page of a shared folder ──────────────────────────── */
.folder-intro{margin-bottom:28px; color:var(--deck-text-muted)}
/* .md sets list padding and link colour for prose; a folder's list of cards
   is not prose, so these restate the card styles at .md's specificity. */
.md .folder-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.md .folder-list > li{padding:0; margin:0}
.md .folder-list > li::before{display:none}
/* A section heading groups the cards after it: the docs' h2, with its
   gradient bar, and a line under it in the muted text. */
.md .folder-list > li.folder-section{margin-top:28px}
.md .folder-list > li.folder-section:first-child{margin-top:0}
.md .folder-section h2{margin:0}
.md .folder-section p{margin:6px 0 4px; padding-left:16px; color:var(--deck-text-muted); font-size:15px}
/* Each item filled like a profile card: decks violet, docs pink, each fading
   a little along the gradient, in white, with the kind's icon in a badge and
   again behind the title, big and faint. */
.folder-card{display:flex; align-items:stretch; gap:10px}
.folder-card.kind-slides{--pc:var(--deck-primary); --pc2:color-mix(in srgb, var(--deck-secondary) 18%, var(--deck-primary))}
.folder-card.kind-doc{--pc:var(--deck-secondary); --pc2:color-mix(in srgb, var(--deck-tertiary) 18%, var(--deck-secondary))}
/* Links take the colour they were given (LINK_COLOURS). Coral sits two thirds
   along the gradient, before the orange where white letters stop reading;
   orange itself takes dark ink, so does the light grey, which also needs an
   edge to stand off the sheet. --pi is the card's ink. */
.folder-card.kind-slides{--pi:var(--deck-on-primary)}
.folder-card.kind-doc{--pi:var(--deck-on-secondary)}
.folder-card.colour-coral{--pc:color-mix(in srgb, var(--deck-tertiary) 30%, var(--deck-secondary)); --pc2:color-mix(in srgb, var(--deck-tertiary) 46%, var(--deck-secondary)); --pi:var(--deck-on-coral)}
.folder-card.colour-orange{--pc:var(--deck-tertiary); --pc2:color-mix(in srgb, var(--deck-tertiary) 85%, var(--deck-secondary)); --pi:var(--deck-on-tertiary)}
.folder-card.colour-navy{--pc:var(--deck-inverse-sheet); --pc2:color-mix(in srgb, var(--deck-primary) 22%, var(--deck-inverse-sheet)); --pi:var(--deck-inverse-text)}
.folder-card.colour-grey{--pc:var(--deck-neutral-bg); --pc2:color-mix(in srgb, var(--deck-sheet-border) 60%, var(--deck-neutral-bg)); --pi:var(--deck-text)}
.md .folder-card.colour-grey .folder-open{box-shadow:inset 0 0 0 1px var(--deck-sheet-border)}
.md .folder-card.colour-grey .folder-open:hover{box-shadow:inset 0 0 0 1px var(--deck-neutral-edge), 0 18px 40px -28px color-mix(in srgb, var(--deck-text) 35%, transparent)}
.folder-open,.md .folder-open{
  flex:1; min-width:0; display:flex; align-items:center; gap:16px; padding:18px 20px;
  position:relative; overflow:hidden; isolation:isolate; border:0; border-radius:var(--deck-radius);
  color:var(--pi, var(--deck-on-primary)); background:linear-gradient(120deg, var(--pc), var(--pc2)); box-shadow:0 18px 40px -26px var(--pc);
  transition:transform .2s var(--deck-ease-out), box-shadow .2s var(--deck-ease-out);
}
.md .folder-open:hover{transform:translateY(-2px); box-shadow:0 22px 44px -24px var(--pc)}
/* Back on the landing page: the card just read rings twice, in its own colour,
   so the reader sees where they were. */
@keyframes folder-just-read{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--pc) 60%, transparent), 0 18px 40px -26px var(--pc)}
  100%{box-shadow:0 0 0 16px transparent, 0 18px 40px -26px var(--pc)}
}
.md .folder-open.just-read{animation:folder-just-read 900ms var(--deck-ease-out) 2}
@media (prefers-reduced-motion: reduce){ .md .folder-open.just-read{animation:none; outline:3px solid color-mix(in srgb, var(--pc) 60%, transparent); outline-offset:3px} }
.folder-n{font-family:var(--deck-font-mono); font-size:13px; opacity:.7; flex:none; width:22px}
.folder-badge{
  flex:none; width:48px; height:48px; border-radius:10px; display:grid; place-items:center; font-size:26px;
  background:color-mix(in srgb, currentColor 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.folder-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.folder-kind{font-family:var(--deck-font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.8}
.folder-title{font-family:var(--deck-font-display); font-weight:var(--deck-display-bold); font-size:20px; letter-spacing:calc(-0.02em * var(--deck-display-tracking)); line-height:1.2}
.folder-detail{font-size:14px; opacity:.85}
.folder-go{flex:none; font-size:22px; display:inline-flex; opacity:.8}
.folder-open:hover .folder-go{opacity:1}
.folder-ghost{position:absolute; right:44px; top:50%; transform:translateY(-50%) rotate(-12deg); z-index:-1; opacity:.13; pointer-events:none; font-size:120px; display:flex}

/* The end of a landing page: who made it, and where to find them. Not a card
   but a line straight on the ground, the page's signature, in the ink the
   theme found to read on every point of its ground. */
.owner-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:4px 4px; font-size:14px; color:var(--deck-ground-ink-muted);
}
.owner-name{display:inline-flex; align-items:center; gap:10px}
.owner-name .mm-mark{width:20px; height:20px; color:var(--deck-ground-ink)}
.owner-card a{color:var(--deck-ground-ink-muted); border:0; text-decoration:none}
.owner-name a{color:var(--deck-ground-ink); font-weight:600}
.owner-card a:hover{color:var(--deck-ground-ink)}
.owner-links{display:flex; gap:22px}
.owner-links a{display:inline-flex; align-items:center; gap:7px}
.owner-links .owner-icon{display:inline-flex}
.owner-links .profile-icon{width:15px; height:15px}

/* An item opened from a folder: the way back, top left, outside the slide. */
/* --bh is its height. viewer.js sets it to the room above the sheet, so the
   button never lands on the slide: smaller as the window shrinks, then just
   the arrow (.icon) when there's no room for words. */
.back{
  position:fixed; left:16px; top:16px; z-index:40; display:inline-flex; align-items:center; gap:calc(var(--bh,30px) * .2);
  height:var(--bh,30px); padding:0 calc(var(--bh,30px) * .47); max-width:min(560px, calc(100vw - 32px));
  /* A dark pill, like the title card's ground. */
  border-radius:var(--deck-radius-full); background:var(--deck-inverse-sheet); border:1px solid var(--deck-inverse-border);
  font-size:calc(var(--bh,30px) * .433); font-weight:600; color:var(--deck-inverse-muted); white-space:nowrap;
  box-shadow:var(--deck-pill-shadow);
}
.back > span{overflow:hidden; text-overflow:ellipsis; min-width:0}
.back.icon{width:var(--bh); padding:0; justify-content:center; font-size:calc(var(--bh) * .5)}
.back.icon > span{display:none}
.back:hover{color:var(--deck-inverse-text)}
/* In a doc the back link is part of the layout, not floating: the same pill,
   as wide as the contents under it. */
.kind-doc .back{
  position:static; align-self:stretch; height:auto; padding:12px 18px;
  font-size:14px;
  min-width:0; overflow:hidden; white-space:nowrap;
}
.kind-doc .back > span{overflow:hidden; text-overflow:ellipsis}
/* The contents panel gives up the back card's height so both fit the window. */
.doc-side:has(.back) .toc{max-height:calc(100dvh - 176px)}

/* Screen only. In print, width queries resolve against the paper size in the
   dialogue, not @page, and they'd collapse the layout. */
@media screen and (max-width:900px){
  .doc,.doc.with-toc{grid-template-columns:minmax(0,1fr); padding:16px}
  .doc-side{position:static}
  .toc{max-height:none}
  .md{padding:32px 22px 28px}
  .md h1{font-size:32px}
  .md .b-profiles{grid-template-columns:minmax(0,1fr)}
  .md .profile{flex-direction:row; align-items:center}
  .md h2{font-size:22px}
  .title-card{padding:30px 24px 24px}
  .title-card h1{font-size:34px}
}

/* ── Chrome: hud, help, rehearse ────────────────────────────────────────── */
/* Window pixels, not canvas pixels: these sit outside the scaled slide. */
/* --hh is the height of everything in the hud. viewer.js sets it to the room
   below the sheet, as it does for the back button above it, so the counter
   and buttons shrink with the window instead of landing on the slide. */
.hud{position:fixed; right:16px; bottom:16px; z-index:40; display:flex; gap:calc(var(--hh,30px) * .27); align-items:center}
.hud .count,.hud .timer{
  display:inline-flex; align-items:center; height:var(--hh,30px); padding:0 calc(var(--hh,30px) * .36);
  font-family:var(--deck-font-mono); font-size:calc(var(--hh,30px) * .4); color:var(--deck-text); font-variant-numeric:tabular-nums;
  background:var(--deck-hud-bg); border-radius:var(--deck-radius-full);
}
.hud-btn{
  display:inline-flex; align-items:center; justify-content:center; height:var(--hh,30px); padding:0 calc(var(--hh,30px) * .47);
  font-family:var(--deck-font-sans); font-size:calc(var(--hh,30px) * .433); font-weight:600; color:var(--deck-text-muted);
  background:var(--deck-hud-btn-bg); border:1px solid var(--deck-sheet-border); border-radius:var(--deck-radius-full); cursor:pointer;
}
.hud-btn:hover{color:var(--deck-text); border-color:var(--deck-border)}
.hud-btn.icon{width:var(--hh,30px); padding:0}
.hud-btn{gap:calc(var(--hh,30px) * .2)}
.hud-btn .ph{font-size:calc(var(--hh,30px) * .5)}
.help{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:24px; background:var(--deck-scrim)}
/* display:grid beats the user agent rule for [hidden], so restate it. */
.help[hidden]{display:none}
.helpCard{width:min(440px,100%); background:var(--deck-sheet); border-radius:var(--deck-radius); padding:24px; box-shadow:var(--deck-sheet-shadow)}
.helpCard h2{font-size:20px; margin:0 0 16px}
.helpCard dl{display:grid; grid-template-columns:auto 1fr; gap:10px 16px; margin:0 0 20px; align-items:baseline}
.helpCard dt,.helpCard dd{margin:0}
.helpCard .close{height:32px; padding:0 16px; font-weight:600; color:var(--deck-sheet); background:var(--deck-text); border:0; border-radius:var(--deck-radius-full); cursor:pointer; font-family:inherit}
.kbd{font-family:var(--deck-font-mono); font-size:12px; border:1px solid var(--deck-sheet-border); border-radius:4px; padding:1px 6px; color:var(--deck-text-muted)}

/* Rehearse: the slide shrinks into the top of the window and the notes sit
   under it, readable at arm's length. */
.mode-rehearse .rehearse-notes{display:none}
.mode-rehearse.js .notes-panel{
  position:fixed; left:0; right:0; bottom:0; height:30vh; overflow:auto; z-index:30;
  background:var(--deck-inverse-sheet); color:var(--deck-inverse-muted); padding:20px 32px;
  font-size:20px; line-height:1.5; display:flex; flex-direction:column; gap:12px;
}
.mode-rehearse.js .notes-panel p{max-width:80ch}
.mode-rehearse.js .notes-panel .none{color:var(--deck-inverse-dim)}
.mode-rehearse.js .notes-panel strong{color:var(--deck-inverse-text)}
.mode-rehearse.js .deck{bottom:30vh}

/* ── Print ──────────────────────────────────────────────────────────────── */
@page{size:1920px 1080px; margin:0}
@media print{
  html,body{background:none; margin:0; padding:0}
  *{animation:none !important; transition:none !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  [data-print-hide],.hud,.help,.rehearse-notes,.notes-panel{display:none !important}
  .print-only{display:flex}
  body.js .deck,.deck{position:static; display:block; padding:0}
  /* Every slide paints its own ground: there is no fixed body background in a PDF. */
  .deck .slide,body.js .deck .slide{
    position:relative; left:auto; top:auto; transform:none; visibility:visible;
    background:var(--deck-ground); break-after:page; break-inside:avoid;
  }
  .deck .slide:last-child{break-after:auto}
  .page{box-shadow:none}
  .b-embed .live{display:none}
  .b-embed .poster{flex-direction:column; height:100%; border:0; color:var(--deck-text-muted)}
  /* Posters are mostly screenshots of pages, where the top is what matters. */
  .b-embed .poster img{flex:1; min-height:0; width:100%; object-fit:cover; object-position:top}
  .b-embed .noposter{flex:1; display:grid; place-items:center; font-family:var(--deck-font-display); font-size:29px; color:var(--deck-text)}
  .b-embed .url{padding:11px 16px; font-family:var(--deck-font-mono); font-size:17px; background:var(--deck-url-bg)}
  .b-embed .loading{display:none}

  /* Gradient text flattens to one colour in print, and it has to. Chromium
     applies the background-clip:text glyph mask only inside the first raster
     tile (about 430px), then paints the raw gradient box for the rest. Every
     workaround fails at the same pixel. A flat colour and SVG text hold. */
  .grad,.stat .n.hero,.b-turn strong,.kill .v.hero b,.b-dispro .top .n{
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    color:var(--deck-gradient-print); -webkit-text-fill-color:var(--deck-gradient-print);
  }
  .stat .n.hero .u{color:var(--deck-text-muted); -webkit-text-fill-color:var(--deck-text-muted)}
  /* When static/print.js has redrawn a phrase as SVG (server PDFs), the HTML
     text stays in place for layout and selection but paints nothing. */
  .grad-drawn{color:transparent !important; -webkit-text-fill-color:transparent !important}
  .grad-drawn .u{color:var(--deck-text-muted) !important; -webkit-text-fill-color:var(--deck-text-muted) !important}

  /* Docs print on A4 and flow across pages. The ground and the sheet are a
     screen thing: on paper the page is the sheet. */
  body.kind-doc::before{content:none}
  .kind-doc .doc{display:block; padding:0}
  .md{border:0; border-radius:0; box-shadow:none; padding:0; font-size:11pt}
  .doc-col{gap:28px}
  .title-card{padding:30px 34px 24px; break-inside:avoid}
  .title-card h1{font-size:30pt}
  .md h1{font-size:28pt}
  .md h2{font-size:16pt}
  .md h3{font-size:12.5pt}
  .md blockquote{font-size:13pt}
  /* Keep a heading with what follows it, and never split a table row, a
     figure or a code block across two pages. */
  .md :is(h1, h2, h3, h4){break-after:avoid}
  .md :is(tr, figure, pre, blockquote, img){break-inside:avoid}
  .md-foot{break-inside:avoid}
}
/* The page numbers in the bottom-right margin are the theme's (themes/*.css):
   they need plain values. */
@page doc{size:A4; margin:18mm 16mm 20mm}
.kind-doc .doc{page:doc}

/* Motion is off on request, not by OS setting, same rule as mathieu-ds. */
:root.reduce-motion *{animation:none !important; transition:none !important}