/* ===========================================================================
   DOES PLAY DICE -- "INK"

   Bold black-and-paper typographic theme with one gold accent (the d20 from
   the masthead), implemented as a Material for MkDocs skin. Two deliberate
   palettes, not an inversion.

   The other dice keep their masthead colours too, but only where a die is
   named (the difficulty ladder, the odds grid, the rollers, the Screen's
   difficulty table), so each die has one colour everywhere and the accent
   stays the only highlight. --d4/--d8/--d12/--d20 are the text versions of
   the masthead colours: same hues, brightness moved until small text clears
   5:1 on the page and on --card. The d6 is ink, as it is in the masthead.

   --accent is for text, so it has to clear 4.5:1; on paper that pushes gold
   towards brown. --accent-ui is the brighter gold for everything that is not
   small text (borders, rails, fills, tints, the big ladder and roller
   numerals), which only needs 3:1. On dark the two are the same colour.

   Dark is the default.
   =========================================================================== */

:root{
  --dpd-display:"Archivo Black",Impact,sans-serif;
  --dpd-serif:"Literata",Georgia,serif;
  --dpd-sans:"Familjen Grotesk",system-ui,sans-serif;
  --dpd-mono:"JetBrains Mono",ui-monospace,monospace;
  --md-text-font:"Familjen Grotesk";
  --md-code-font:"JetBrains Mono";
}

/* ---------- Palettes -------------------------------------------------------- */
[data-md-color-scheme="slate"]{        /* dark, default */
  --bg:#050505; --ink:#F4F2EC; --muted:#9A978E; --line:#2A2926;
  --accent:#F7BA00; --die:#B42318; --pip:#FFFFFF; --card:#0F0E0D;
  --accent-ui:var(--accent); --on-accent:var(--bg);
  --d4:#CE7260; --d8:#5593BD; --d12:#619868; --d20:var(--accent);
}
[data-md-color-scheme="default"]{      /* light, warm paper */
  --bg:#F4F2EC; --ink:#0A0A0A; --muted:#66645E; --line:#D9D5C9;
  --accent:#8C6900; --die:#B42318; --pip:#FFFFFF; --card:#FBFAF6;
  --accent-ui:#B08400; --on-accent:var(--ink);
  --d4:#A14431; --d8:#346587; --d12:#436A48; --d20:var(--accent);
}

/* ---------- Map onto Material ----------------------------------------------- */
/* Every scheme has to be listed here. Material only ships `default` and
   `slate`; an unrecognised scheme name gets no variables of its own, so it
   silently falls back to Material's light defaults -- which is exactly what
   `terminal` did on its first run: the attribute flipped, the toggle icon
   changed, and the page stayed white. */
[data-md-color-scheme="slate"],
[data-md-color-scheme="default"],
[data-md-color-scheme="terminal"]{
  --md-default-bg-color:var(--bg);
  --md-default-fg-color:var(--ink);
  --md-default-fg-color--light:var(--muted);
  --md-default-fg-color--lighter:var(--line);
  --md-default-fg-color--lightest:var(--line);
  --md-typeset-color:var(--ink);
  --md-typeset-a-color:var(--ink);
  --md-accent-fg-color:var(--accent);
  --md-primary-fg-color:var(--bg);
  /* Material paints .md-nav__source -- the repository block at the top of the
     mobile drawer -- with --md-primary-fg-color--dark, and its default is
     indigo #303fa1. Mapping only the base colour left that one block bright
     blue in every scheme, which is what showed on a phone. --light is used for
     muted primary text and had the same problem. */
  --md-primary-fg-color--dark:var(--card);
  --md-primary-fg-color--light:var(--muted);
  --md-primary-bg-color:var(--ink);
  --md-primary-bg-color--light:var(--muted);
  --md-code-bg-color:var(--card);
  --md-code-fg-color:var(--ink);
  --md-footer-bg-color:var(--bg);
  --md-footer-bg-color--dark:var(--bg);
  --md-footer-fg-color:var(--ink);
  --md-footer-fg-color--light:var(--muted);
  --md-footer-fg-color--lighter:var(--muted);
}
body{ transition:background-color .35s, color .35s; }

/* ---------- Type ------------------------------------------------------------ */
.md-typeset{ font-family:var(--dpd-sans); font-size:.8rem; line-height:1.55; }

.md-typeset h1{
  font-family:var(--dpd-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(56px,9vw,112px); line-height:.88; letter-spacing:-.04em;
  color:var(--ink); margin:0 0 18px; text-wrap:balance;
}
.md-typeset h2{
  font-family:var(--dpd-sans); font-weight:600; font-size:28px; line-height:1.2;
  letter-spacing:-.02em; color:var(--ink); margin:56px 0 16px; border:0;
  text-wrap:balance;
}
.md-typeset h2.dpd-display{
  font-family:var(--dpd-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(36px,4.5vw,52px); line-height:.95; letter-spacing:-.03em;
}
.md-typeset h3{
  font-family:var(--dpd-sans); font-weight:600; font-size:19px;
  letter-spacing:-.01em; color:var(--ink); margin:36px 0 10px;
}
.md-typeset h4{
  font-family:var(--dpd-mono); font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  margin:28px 0 8px;
}
.md-typeset p,
.md-typeset li{
  font-family:var(--dpd-serif); font-size:18px; line-height:1.65;
  color:var(--ink); text-wrap:pretty;
}
.md-typeset p{ max-width:680px; }
.md-typeset li{ font-size:17px; }
.md-typeset strong{ font-weight:600; color:var(--ink); }
.md-typeset em{ font-style:italic; }

/* Numbered rules: **1.** at the start of a paragraph becomes a mono accent
   number. Scoped to .dpd-steps, and it has to be: `p > strong:first-child`
   looks like it means "a paragraph that begins with bold", but :first-child
   ignores text nodes, so it also matches bold appearing anywhere in a
   paragraph as long as no element precedes it. That styled about 85 runs of
   ordinary prose as mono accent numerals, and the 10px margin-right left a
   visible gap before the following punctuation -- "the text ." on the
   Contribute page. Twenty-five paragraphs wanted this; the rest did not. */
.md-typeset .dpd-steps p > strong:first-child{
  font-family:var(--dpd-mono); font-weight:500; font-size:13px;
  color:var(--accent); margin-right:10px;
}
.md-typeset a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.md-typeset a:hover{ color:var(--accent); border-bottom-color:var(--accent-ui); }
.md-typeset code{
  font-family:var(--dpd-mono); font-size:.82em; background:var(--card);
  border:1px solid var(--line); border-radius:0; padding:.1em .35em; color:var(--ink);
}
.dpd-kicker{
  font-family:var(--dpd-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); display:block;
}
.dpd-kicker--muted{ color:var(--muted); }

/* ---------- Chrome ---------------------------------------------------------- */
/* ---------- Masthead ---------------------------------------------------------
   The Set wordmark over its band of faint dice, inlined from
   overrides/partials/masthead.html. No ground of its own: it sits on --bg, and
   every colour below comes from the palette, so it belongs to whichever
   scheme is active. The wordmark shares the grid's left edge with the header
   and the tabs; the dice run the full width and fade out at both ends. */
.dpd-masthead{
  --mh-d4:#c4553f; --mh-d8:#3f7aa3; --mh-d12:#5b8f62; --mh-d20:#f7ba00;
  --mh-dice:#f7ba00; --mh-dice-op:.45;   /* fainter goes olive on black */
  position:relative; overflow:hidden; background:var(--bg);
}
[data-md-color-scheme="default"] .dpd-masthead{ --mh-d20:#e0a800; --mh-dice:#c48f00; --mh-dice-op:.38; }
[data-md-color-scheme="terminal"] .dpd-masthead{
  --mh-d4:var(--muted); --mh-d8:var(--muted); --mh-d12:var(--muted); --mh-d20:var(--accent);
  --mh-dice:var(--ink); --mh-dice-op:.22;
}
.dpd-masthead-bd{
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:var(--mh-dice); stroke-width:2; stroke-linejoin:round;
  opacity:var(--mh-dice-op);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.dpd-masthead-inner{ position:relative; padding:20px .8rem 16px; }
.dpd-masthead-mark{ display:inline-block; line-height:0; }
/* The negative margin cancels the side-bearing inside the drawing, so the ink
   of DOES and DICE starts on the same line as the tab labels and page text. */
.dpd-masthead-mark svg{ display:block; height:112px; width:auto; margin-left:-11px; }
.dpd-masthead .mh-ink{ fill:var(--ink); stroke:var(--ink); }
.dpd-masthead .mh-d4{ fill:var(--mh-d4); stroke:var(--mh-d4); }
.dpd-masthead .mh-d8{ fill:var(--mh-d8); stroke:var(--mh-d8); }
.dpd-masthead .mh-d12{ fill:var(--mh-d12); stroke:var(--mh-d12); }
.dpd-masthead .mh-d20{ fill:var(--mh-d20); stroke:var(--mh-d20); }
.dpd-masthead .mh-cut{ stroke:var(--bg); }
.dpd-masthead .mh-pip{ fill:var(--bg); }
.dpd-masthead .mh-halo{ flood-color:var(--bg); }
@media screen and (max-width:76.1875em){
  .dpd-masthead-inner{ padding:14px 16px 10px; }
  .dpd-masthead-mark svg{ height:72px; margin-left:-7px; }
}

/* Desktop: the header's controls (theme, search, repository) move up into the
   masthead band, on the right, so the top of the page is one band and not a
   band plus a mostly empty bar. The header stops being sticky here; the tabs
   were never sticky, and the back-to-top button covers the long pages. On
   smaller screens the header keeps its own sticky row, because it carries the
   menu button. */
@media screen and (min-width:76.25em){
  /* Doubled class: the general .md-header rule further down must not win. */
  .md-header.md-header{
    position:absolute; top:0; left:0; right:0;
    background:transparent; border-bottom:0; box-shadow:none;
  }
  .md-header__inner{ height:148px; align-items:center; }
  .md-header__title{ visibility:hidden; }
  .md-tabs{ border-top:1px solid var(--line); }
  /* Material pins the sidebars below the header by setting their top to the
     header's height (here, the whole masthead) and sizing them to what is left.
     With the header no longer sticky that left a 148px gap when scrolled. */
  .md-sidebar{ top:24px !important; }
  .md-sidebar__scrollwrap{ height:auto !important; max-height:calc(100vh - 48px); }
  /* Quieter dice behind the controls, so search and the repository line read
     cleanly over them. */
  .dpd-masthead-bd{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 50%,rgba(0,0,0,.3) 62%,rgba(0,0,0,.3) 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 10%,#000 50%,rgba(0,0,0,.3) 62%,rgba(0,0,0,.3) 92%,transparent);
  }
}

/* The masthead already says the name, so the header row does not repeat it.
   The topic slot stays: Material swaps the page title into it once the page's
   own heading scrolls away, and that is still useful. */
.md-header__button.md-logo{ display:none; }
.md-header__title .md-header__topic:first-child{ visibility:hidden; }

.md-header{
  background:var(--bg); color:var(--ink);
  box-shadow:none; border-bottom:1px solid var(--line);
}
.md-header__title{
  font-family:var(--dpd-display); font-size:14px; letter-spacing:.08em;
  text-transform:uppercase;
}
.md-header__title .md-header__topic:first-child{ font-weight:400; }
.md-tabs{ background:var(--bg); border-bottom:1px solid var(--line); }
.md-tabs__link{
  font-family:var(--dpd-sans); font-size:14px; font-weight:500;
  color:var(--muted); opacity:1; text-transform:none; letter-spacing:0;
}
.md-tabs__link:hover{ color:var(--accent); }
.md-tabs__link--active{ color:var(--ink); }
.md-nav{ font-family:var(--dpd-sans); }
.md-nav__title{
  font-family:var(--dpd-mono); font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  background:transparent; box-shadow:none;
}
.md-nav__link{ font-size:14px; color:var(--muted); }
.md-nav__link:hover{ color:var(--accent); }
.md-nav__link--active,.md-nav__link--active:hover{ color:var(--ink); font-weight:600; }
.md-search__form{
  background:var(--card); border-radius:0;
  /* An inset shadow, not a border: it draws the same 1px rule but occupies no
     layout space, so Material's full-height input still fills the form exactly
     and the placeholder centres. A real border shifted the text down a pixel. */
  box-shadow:inset 0 0 0 1px var(--line);
}
.md-search__input{ font-family:var(--dpd-sans); }
.md-search__input::placeholder{ color:var(--muted); }
.md-footer{ border-top:1px solid var(--line); }
.md-footer-meta{ background:var(--bg); }
.md-copyright{ font-family:var(--dpd-sans); font-size:13px; color:var(--muted); }
.md-copyright a{ color:var(--ink); }
.md-footer__link{ font-family:var(--dpd-sans); }

/* ---------- The two sidebars ---------------------------------------------------
   They do different jobs and were not saying so. The right one had a proper
   label ("Table of contents", 11px mono caps); the left had none, because
   Material hides .md-nav__title on desktop -- so the section name sat in the
   list at 14px/700 while its own children sat at 14px/600. One weight step
   apart, same face, same size. It read as a slightly bolder sibling rather
   than a heading.

   Both now carry the same kind of label, with a rule beneath it that groups
   the label to its list. Left names the section you are in; right says what
   it is. -------------------------------------------------------------- */
.md-sidebar--primary .md-nav__item--section > label.md-nav__link,
.md-sidebar--secondary .md-nav__title{
  font-family:var(--dpd-mono); font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  padding-bottom:9px; margin-bottom:10px;
  border-bottom:1px solid var(--line);
}
/* The section label is not a destination -- it opens nothing on desktop -- so
   it should not offer a hover state that suggests otherwise. */
.md-sidebar--primary .md-nav__item--section > label.md-nav__link{
  cursor:default;
}
.md-sidebar--primary .md-nav__item--section > label.md-nav__link:hover{
  color:var(--muted);
}
.md-sidebar--secondary .md-nav__link{ font-size:14px; }

/* ---------- Tables: rule-lines, not boxes ----------------------------------- */
.md-typeset table:not([class]){
  border:0; box-shadow:none; border-radius:0;
  border-top:2px solid var(--ink);
  font-family:var(--dpd-sans); font-size:15px; display:table; width:100%;
}
.md-typeset table:not([class]) th{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  font-family:var(--dpd-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  /* Right gutter only. The table's left and right edges stay flush with the
     text column -- that alignment is the point of the design -- but every
     column needs air after it or the cells read as one run-on line. */
  padding:14px 24px 14px 0; text-align:left;
}
.md-typeset table:not([class]) td{
  border:0; border-bottom:1px solid var(--line); padding:14px 24px 14px 0;
  font-family:var(--dpd-sans); font-size:15px; color:var(--ink);
  vertical-align:top;
}
.md-typeset table:not([class]) tbody tr:hover{ background:transparent; }
.md-typeset table:not([class]) td:first-child{ font-weight:600; }
/* The last column has nothing after it, so its gutter would push the table's
   right edge in and break the alignment with the text column above. */
.md-typeset table:not([class]) th:last-child,
.md-typeset table:not([class]) td:last-child{ padding-right:0; }

/* Material puts `overflow:hidden` on the table and nothing on its wrapper, so
   a table wider than the screen is CLIPPED rather than scrolled. On a phone
   the four-column decisions table runs 30px past a 375px viewport and its last
   column -- the one saying when each decision is due -- simply disappears with
   no way to reach it. Let the wrapper scroll instead.

   Material's own padding on the wrapper is left alone: it is what lines the
   table up with the text column, and zeroing it pulled every table 16px left
   of the prose above it. */
.md-typeset .md-typeset__table{ overflow-x:auto; max-width:100%; }

/* ---------- Buttons --------------------------------------------------------- */
.md-typeset .md-button{
  font-family:var(--dpd-sans); font-weight:600; font-size:15px;
  border-radius:0; border:1px solid var(--line); color:var(--ink);
  padding:14px 24px; transition:opacity .15s;
}
.md-typeset .md-button:hover{ background:transparent; color:var(--accent); border-color:var(--accent-ui); }
.md-typeset .md-button--primary{
  background:var(--ink); color:var(--bg); border-color:var(--ink); padding:15px 24px;
}
.md-typeset .md-button--primary:hover{ background:var(--ink); color:var(--bg); opacity:.85; border-color:var(--ink); }

/* ---------- Difficulty ladder ------------------------------------------------ */
.dpd-ladder{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:20px 0 0; }
.dpd-ladder > div{ border:1px solid var(--line); padding:22px 20px; display:flex; flex-direction:column; gap:10px; }
.dpd-ladder b{ font-family:var(--dpd-display); font-weight:400; font-size:40px; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.dpd-ladder span{ font-family:var(--dpd-sans); font-size:14px; color:var(--muted); }
.dpd-ladder > div.is-accent{ border-color:var(--accent-ui); }
.dpd-ladder > div.is-accent b{ color:var(--accent-ui); }

/* ---------- Dice colours -------------------------------------------------------
   Each die in its masthead colour wherever one is named. All of these lists run
   d4, d6, d8, d12, d20 in that order, so position picks the die; the d6 stays
   ink. Grouped here so the mapping lives in one place. */
.dpd-ladder > div:nth-child(1) b,
.md-typeset .dpd-odds-grid tbody tr:nth-child(1) th,
.md-typeset .dpd-odds-grid thead th:nth-child(2),
.md-typeset .dpd-diff tbody tr:nth-child(1) td:first-child strong{ color:var(--d4); }
.dpd-ladder > div:nth-child(3) b,
.md-typeset .dpd-odds-grid tbody tr:nth-child(3) th,
.md-typeset .dpd-odds-grid thead th:nth-child(4),
.md-typeset .dpd-diff tbody tr:nth-child(3) td:first-child strong{ color:var(--d8); }
.dpd-ladder > div:nth-child(4) b,
.md-typeset .dpd-odds-grid tbody tr:nth-child(4) th,
.md-typeset .dpd-odds-grid thead th:nth-child(5),
.md-typeset .dpd-diff tbody tr:nth-child(4) td:first-child strong{ color:var(--d12); }
.md-typeset .dpd-odds-grid tbody tr:nth-child(5) th,
.md-typeset .dpd-odds-grid thead th:nth-child(6),
.md-typeset .dpd-diff tbody tr:nth-child(5) td:first-child strong{ color:var(--d20); }
.md-typeset .dpd-odds-grid tbody tr:nth-child(2) th{ color:var(--ink); }
/* The selected die in the rules roller, and the Screen's quick-roll buttons. */
.dpd-roller-pick:nth-child(1),.dpd-quickroll-btn:nth-child(1){ --die-c:var(--d4); }
.dpd-roller-pick:nth-child(2),.dpd-quickroll-btn:nth-child(2){ --die-c:var(--ink); }
.dpd-roller-pick:nth-child(3),.dpd-quickroll-btn:nth-child(3){ --die-c:var(--d8); }
.dpd-roller-pick:nth-child(4),.dpd-quickroll-btn:nth-child(4){ --die-c:var(--d12); }
.dpd-roller-pick:nth-child(5),.dpd-quickroll-btn:nth-child(5){ --die-c:var(--d20); }

/* ---------- Hero -------------------------------------------------------------- */
.dpd-hero{ margin:40px 0 0; }
/* The masthead carries the name, so the hero leads with the pitch. */
.md-typeset .dpd-hero h1{ font-size:clamp(40px,6.4vw,84px); line-height:.95; margin:0 0 28px; }
.dpd-lede{
  font-family:var(--dpd-serif); font-size:clamp(20px,2.4vw,26px); line-height:1.45;
  max-width:640px; color:var(--ink); margin:18px 0 28px;
}
.dpd-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:8px; }
/* Markdown wraps the two buttons in a <p>, so .dpd-actions has a single child
   and its gap applies to nothing. Inline, a whitespace node hides that; once
   they stack on a narrow screen the buttons sit flush and read as a glitch.
   Style the paragraph as the flex row too, so the gap lands on the buttons
   whether or not markdown wraps them.

   Margin is deliberately left alone. Zeroing it here also removed Material's
   18px top margin on the paragraph, which pulled the buttons up under the lede
   and lost the air that framed the hero. Only the flex behaviour was ever
   needed; the spacing was already right. */
.md-typeset .dpd-actions > p{
  display:flex; flex-wrap:wrap; gap:14px;
}

/* ---------- Entry cards ------------------------------------------------------- */
.dpd-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); column-gap:48px; border-top:1px solid var(--line); margin-top:24px; }
.dpd-cards a{ display:block; padding:28px 0; border-bottom:1px solid var(--line); text-decoration:none; border-top:0; }
.dpd-cards a:hover .dpd-card-title{ color:var(--accent); }
.dpd-card-num{ font-family:var(--dpd-mono); font-size:12px; letter-spacing:.14em; color:var(--accent); display:block; margin-bottom:12px; }
.dpd-card-title{ font-family:var(--dpd-sans); font-weight:600; font-size:20px; color:var(--ink); display:block; margin-bottom:8px; }
.dpd-card-desc{ font-family:var(--dpd-sans); font-size:15px; line-height:1.5; color:var(--muted); display:block; margin-bottom:14px; }
.dpd-card-go{ font-family:var(--dpd-sans); font-size:14px; font-weight:600; color:var(--ink); }

/* Two-column display section */
.dpd-split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:48px; margin:112px 0 0; }
.dpd-split--tight{ margin-top:96px; }
.dpd-rule{ border-top:1px solid var(--line); margin:112px 0 0; padding-top:28px; }

/* ---------- Admonitions ------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details{
  border:0; border-left:2px solid var(--line); border-radius:0;
  background:transparent; box-shadow:none; font-size:16px; padding-left:20px;
}
.md-typeset .admonition-title,
.md-typeset summary{
  background:transparent; border:0; padding-left:0;
  font-family:var(--dpd-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.md-typeset .admonition-title::before,
.md-typeset summary::before{ display:none; }
.md-typeset .admonition > p,
.md-typeset details > p{ font-family:var(--dpd-serif); font-size:16px; }
.md-typeset .admonition.quote,.md-typeset .admonition.note{ border-left-color:var(--accent-ui); }
.md-typeset .admonition.warning,.md-typeset .admonition.danger,
.md-typeset .admonition.decision{ border-left-color:var(--accent-ui); }
.md-typeset .admonition.decision .admonition-title{ color:var(--accent); }

/* ---------- Preserved utility classes ----------------------------------------- */
.dpd-protobar{
  border:0; border-left:2px solid var(--accent-ui); background:transparent;
  padding:2px 0 2px 20px; margin-bottom:32px;
  font-family:var(--dpd-sans); font-size:14px; line-height:1.55; color:var(--muted);
}
.dpd-protobar strong{ color:var(--ink); }
.dpd-status{
  display:inline-block; font-family:var(--dpd-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; padding:3px 8px;
  border:1px solid currentColor; border-radius:0; vertical-align:middle; margin-left:12px;
}
.dpd-status.ready{ color:var(--muted); }
.dpd-status.stub{ color:var(--accent); }
.dpd-sheet{ border:1px solid var(--line); border-radius:0; padding:28px 30px; margin:24px 0; background:transparent; }
.dpd-field{ border-bottom:1px solid var(--line); min-height:30px; margin:6px 0 22px; }
.dpd-field-label{ font-family:var(--dpd-mono); font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted); }

/* Material grid cards -> rule-line cards */
.md-typeset .grid.cards > ul > li{
  border:0; border-top:1px solid var(--line); border-radius:0;
  background:transparent; box-shadow:none; padding:24px 0 8px; margin:0;
}
.md-typeset .grid.cards > ul > li:hover{ box-shadow:none; border-color:var(--line); }
.md-typeset .grid.cards > ul > li > hr{ display:none; }

/* ---------- Responsive --------------------------------------------------------- */
@media screen and (max-width:600px){
  .dpd-split,.dpd-rule{ margin-top:64px; }
}

/* ---------- The colophon in the footer --------------------------------------------
   Two short lines instead of one long one: who wrote it and under what, then who
   built it. The heart is the only piece of accent colour down here. */
.md-copyright .dpd-colophon{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
}
.md-copyright .dpd-colophon-by{ opacity:.72; }
.md-copyright .dpd-heart{
  color:var(--accent); font-style:normal; line-height:1;
}
.md-copyright a{ color:inherit; }
.md-copyright a:hover{ color:var(--accent); }

/* ---------- The five solids, as a cosmology ---------------------------------------
   Five cards that have to read as one row of objects rather than five boxes, so
   there is no border and no fill -- the wireframes carry it, and each one leans
   a little brighter than the last, the way they do on the home page. */
.dpd-cosmos{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(6px,1.4vw,18px);
  margin:34px 0 40px; align-items:start;
}
.dpd-solid{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.dpd-solid-fig{ color:var(--ink); line-height:0; }
.dpd-solid-fig svg{ width:100%; max-width:104px; height:auto; display:block; }
/* A gentler ramp than the home page's. There the solids are 74px in a stack and
   the fade reads as depth; here they are the subject, and starting at .5 just
   made the tetrahedron look unfinished. */
.dpd-cosmos .dpd-solid:nth-child(1) .dpd-solid-fig{ opacity:.7; }
.dpd-cosmos .dpd-solid:nth-child(2) .dpd-solid-fig{ opacity:.78; }
.dpd-cosmos .dpd-solid:nth-child(3) .dpd-solid-fig{ opacity:.85; }
.dpd-cosmos .dpd-solid:nth-child(4) .dpd-solid-fig{ opacity:.93; }
.dpd-cosmos .dpd-solid:nth-child(5) .dpd-solid-fig{ opacity:1; }
.md-typeset .dpd-solid-die{
  font-family:var(--dpd-display); font-size:clamp(20px,3vw,30px); line-height:1;
  color:var(--accent); margin-top:12px; font-weight:400;
}
.dpd-solid-el{
  font-family:var(--dpd-sans); font-size:clamp(13px,1.5vw,16px); color:var(--ink);
  margin-top:7px;
}
/* Name, faces and planet each get their own line. Run them together and
   "dodecahedron - 12 faces" wraps while "tetrahedron - 4 faces" does not, which
   leaves the five solids sitting at five different heights. */
.dpd-solid-name,.dpd-solid-meta,.dpd-solid-planet{
  font-family:var(--dpd-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); line-height:1.7;
  white-space:nowrap;
}
.dpd-solid-name{ margin-top:6px; color:var(--ink); opacity:.7; }
.dpd-solid-planet{ color:var(--accent); opacity:.75; margin-top:3px; }

/* Kepler's nesting reads as one line of objects, so let it. */
.md-typeset .dpd-kepler{
  font-family:var(--dpd-mono); font-size:13px; line-height:2.1;
  border-left:2px solid var(--accent-ui); padding:4px 0 4px 16px;
  margin:22px 0 26px; color:var(--muted);
}
.md-typeset .dpd-kepler strong{ color:var(--ink); font-weight:500; }

/* Five across is only legible while there is room for five. */
@media screen and (max-width:820px){
  .dpd-cosmos{ grid-template-columns:repeat(3,1fr); row-gap:26px; }
}
@media screen and (max-width:440px){
  .dpd-cosmos{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- A game, played -------------------------------------------------------
   A transcript, not a rules example. The speech is set like prose so it reads at
   reading speed; the rolls interrupt it as objects, because at a table that is
   exactly what they do. */
.dpd-play{ margin:32px 0 40px; }
.md-typeset .dpd-say{
  font-family:var(--dpd-serif); font-size:17px; line-height:1.62;
  margin:0 0 14px; padding-left:16px; border-left:2px solid transparent;
  color:var(--ink);
}
.md-typeset .dpd-say b{
  font-family:var(--dpd-mono); font-weight:500; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-right:10px;
  white-space:nowrap;
}
/* The Narrator is the one voice that is not a player, so it gets the rule --
   but not a dimmer colour. The Narrator is doing the actual scene-writing here,
   and greying out the best prose on a page whose whole job is to make you feel
   the fiction is the wrong trade for a bit of extra contrast. */
.md-typeset .dpd-say--nar{ border-left-color:var(--line); }
.md-typeset .dpd-say--nar b{ color:var(--accent); }

.dpd-roll{
  border:1px solid var(--line); padding:14px 16px 12px; margin:20px 0 22px;
  display:grid; gap:6px;
}
.dpd-roll-line{
  display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:12px;
}
.dpd-roll-who{
  font-family:var(--dpd-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.md-typeset .dpd-roll-line b{
  font-family:var(--dpd-mono); font-size:13px; font-weight:500; color:var(--muted);
  min-width:34px; text-align:right;
}
.dpd-roll-num{
  font-family:var(--dpd-display); font-size:26px; line-height:1; color:var(--ink);
  min-width:38px; text-align:right;
}
.md-typeset .dpd-roll-out{
  font-family:var(--dpd-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; margin:8px 0 0; padding-top:10px;
  border-top:1px solid var(--line); color:var(--muted);
}
/* The tie is the one the page is about, so it is the only one wearing colour. */
.dpd-roll[data-outcome="tie"]{ border-color:var(--accent-ui); }
.dpd-roll[data-outcome="tie"] .dpd-roll-num{ color:var(--accent); }
.md-typeset .dpd-roll[data-outcome="tie"] .dpd-roll-out{
  color:var(--accent); border-top-color:var(--accent-ui);
}

@media screen and (max-width:600px){
  .dpd-roll-line{ grid-template-columns:1fr auto auto; gap:8px; }
  .dpd-roll-who{ font-size:10px; }
  .dpd-roll-num{ font-size:22px; }
}

/* ---------- Print --------------------------------------------------------------- */
@media print{
  .dpd-masthead,.md-header,.md-tabs,.md-sidebar,.md-footer,.dpd-protobar,.md-content__button{ display:none !important; }
  [data-md-color-scheme]{ --bg:#fff; --ink:#000; --muted:#444; --line:#bbb; --accent:#6B5000; --accent-ui:var(--accent);
    --d4:#8E3A2A; --d8:#2B5573; --d12:#38593C; }
  .md-typeset p{ font-size:12pt; }
  .md-main__inner{ margin:0; } .md-content{ max-width:100%; }
}

/* --- fixes found on first render -------------------------------------------- */
.md-typeset .dpd-hero h1{ overflow-wrap:normal; }
/* One column width for the whole page. The main area was narrowed to 1120px
   while the header, tabs and footer kept Material's 1220px, so the tabs, the
   sidebar and the page text each started at a different left edge. Every grid
   now shares the same width, and the masthead, tabs, sidebar and text line up. */
.md-grid{ max-width:1120px; }

/* --- fixes, round two --------------------------------------------------------- */

/* Page titles must never break inside a word. "NARRATORS" at 112px cannot fit a
   588px content column, and Material's default overflow-wrap:break-word was
   chopping it. Content pages get a size that fits the longest real title
   ("CONTRIBUTE"); the home hero has its own size, set with .dpd-hero above. */
.md-typeset h1{
  font-size:clamp(36px,5.6vw,72px);
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.md-typeset .dpd-hero h1{ font-size:clamp(40px,6.4vw,84px); }

/* The status pill should sit on its own line rather than stretch the title. */
.md-typeset h1 .dpd-status{ margin-left:0; margin-top:14px; display:inline-block; }

/* ---------- Download page ------------------------------------------------------ */
.md-typeset .dpd-lede-sm{
  font-family:var(--dpd-serif); font-size:20px; line-height:1.5;
  color:var(--muted); max-width:560px; margin:0 0 48px;
}
.dpd-dlcards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  column-gap:48px; border-top:1px solid var(--line);
}
.dpd-dlcards a{
  display:flex; flex-direction:column; padding:28px 0;
  border-bottom:1px solid var(--line); text-decoration:none; border-top:0;
}
.dpd-dlcards a:hover .dpd-dl-title{ color:var(--accent); }
.dpd-dl-title{ font-family:var(--dpd-sans); font-weight:600; font-size:22px; color:var(--ink); margin:12px 0 8px; }
.dpd-dl-desc{ font-family:var(--dpd-sans); font-size:15px; line-height:1.5; color:var(--muted); }
.dpd-dl-go{ font-family:var(--dpd-sans); font-size:14px; font-weight:600; color:var(--ink); margin-top:auto; padding-top:18px; }

.dpd-filelist{ border-top:2px solid var(--ink); margin-top:24px; }
.dpd-filelist a{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start;
  padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none; border-top:0;
}
.dpd-filelist a:hover b{ color:var(--accent); }
.dpd-file-main b{ font-family:var(--dpd-sans); font-weight:600; font-size:17px; color:var(--ink); display:block; margin-bottom:5px; }
.dpd-file-main span{ font-family:var(--dpd-sans); font-size:15px; line-height:1.5; color:var(--muted); display:block; max-width:52ch; }
.dpd-file-name{ font-family:var(--dpd-mono); font-size:12px; color:var(--muted); white-space:nowrap; padding-top:3px; }
@media screen and (max-width:600px){
  .dpd-filelist a{ grid-template-columns:1fr; gap:8px; }
}

/* The split is two columns when there is room and stacks when there isn't.
   When stacked, the h2's own top margin doubled up with the grid gap. */
.md-typeset .dpd-split > div > h2:first-child{ margin-top:0; }
.dpd-split{ margin-top:88px; }
@media screen and (max-width:1219px){ .dpd-split{ gap:20px; margin-top:64px; } }

/* Two download cards describe things that do not exist yet. They used to be
   <a href="#">, which looks clickable and does nothing. They are now <span>,
   so they need the card layout without the link affordance -- and they are
   dimmed, so the eye sorts available from not-yet before the cursor does. */
.dpd-dlcards > *{
  display:flex; flex-direction:column; padding:28px 0;
  border-bottom:1px solid var(--line); text-decoration:none; border-top:0;
}
.dpd-dl-soon{ opacity:.45; }
/* An odd card out spans the row instead of sitting alone in half of it. */
.dpd-dlcards > :last-child:nth-child(odd){ grid-column:1 / -1; }
.dpd-dl-soon .dpd-dl-go{ font-weight:400; color:var(--muted); font-style:italic; }

/* ---------- The try-it dice roller ---------------------------------------------
   Sits on the rules page directly after the mechanic is explained. Hidden until
   dice.js has built the controls, so nobody sees an empty frame.
   -------------------------------------------------------------------------- */
.dpd-roller{ visibility:hidden; border-top:2px solid var(--ink); margin:40px 0 8px; padding-top:20px; }
.dpd-roller.is-ready{ visibility:visible; }

.dpd-roller-kicker{
  font-family:var(--dpd-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px;
}
.md-typeset .dpd-roller-lede{
  font-size:15px; color:var(--muted); margin:0 0 22px; max-width:52ch;
}

.dpd-roller-grid{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:start;
}
.dpd-roller-vs{
  font-family:var(--dpd-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding-top:34px;
}
.dpd-roller-label{
  font-family:var(--dpd-mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:10px;
}

.dpd-roller-picks{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:14px; }
.dpd-roller-pick{
  flex:1 1 0; min-width:44px; background:transparent; border:1px solid var(--line);
  border-radius:0; padding:8px 2px 6px; cursor:pointer; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:border-color .15s, color .15s;
}
.dpd-roller-pick:hover{ border-color:var(--muted); color:var(--ink); }
.dpd-roller-pick.is-on{ border-color:var(--die-c,var(--accent-ui)); color:var(--die-c,var(--accent)); }

/* The solids are injected as inline SVG by dice.js. Not a CSS mask -- that
   renders nothing at all in headless Chrome, so the icons would be missing
   from every screenshot and PDF -- and not an <img>, which cannot inherit
   currentColor and would leave black wireframes in dark mode.

   Inline also means the drawing can be tuned for this size: these are 120-unit
   drawings with 1.05 strokes, which at 26px works out to about a quarter of a
   pixel and simply disappears. Thicker strokes and flat opacity make them
   legible small; the delicate original stays on the home page at full size. */
.dpd-roller-solid{ width:26px; height:26px; display:block; color:inherit; }
.dpd-roller-solid svg{ width:100%; height:100%; display:block; }
.dpd-roller-solid svg line{ stroke-width:3.4; opacity:1 !important; }
.dpd-roller-solid svg circle{ display:none; }
.dpd-roller-dname{ font-family:var(--dpd-mono); font-size:10px; letter-spacing:.05em; }

.dpd-roller-result{
  border:1px solid var(--line); min-height:96px;
  display:flex; align-items:center; justify-content:center;
}
.dpd-roller-num{
  font-family:var(--dpd-display); font-size:52px; line-height:1; color:var(--ink);
}
.dpd-roller.is-rolling .dpd-roller-num{ color:var(--muted); }

/* The winning side is the only accent once a roll lands; a tie lights both,
   which is the point of the tie rule. */
.dpd-roller[data-result="you"] [data-side="you"] .dpd-roller-result,
.dpd-roller[data-result="narrator"] [data-side="narrator"] .dpd-roller-result,
.dpd-roller[data-result="tie"] .dpd-roller-result{ border-color:var(--accent-ui); }
.dpd-roller[data-result="you"] [data-side="you"] .dpd-roller-num,
.dpd-roller[data-result="narrator"] [data-side="narrator"] .dpd-roller-num,
.dpd-roller[data-result="tie"] .dpd-roller-num{ color:var(--accent-ui); }

.dpd-roller-go{
  margin-top:18px; background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  border-radius:0; font-family:var(--dpd-sans); font-size:15px; font-weight:600;
  padding:11px 26px; cursor:pointer; transition:opacity .15s;
}
.dpd-roller-go:hover{ opacity:.82; }
.dpd-roller-go:disabled{ opacity:.45; cursor:default; }

.md-typeset .dpd-roller-outcome{
  min-height:52px; margin:16px 0 0; font-size:15px; line-height:1.5;
  color:var(--muted); max-width:56ch;
}
.dpd-roller-outcome strong{ color:var(--ink); }

@media screen and (max-width:560px){
  .dpd-roller-grid{ grid-template-columns:1fr; gap:14px; }
  .dpd-roller-vs{ padding-top:0; }
  .dpd-roller-num{ font-size:42px; }
  .dpd-roller-result{ min-height:76px; }
}

/* ---------- The odds grid -------------------------------------------------------
   25 pairings, three numbers each. Dense by nature, so the hierarchy does the
   work: the win figure is the one you read, the other two sit under it quietly.
   -------------------------------------------------------------------------- */
.md-typeset table.dpd-odds-grid{
  width:100%; border-collapse:collapse; margin:8px 0 10px;
  border-top:2px solid var(--ink); font-family:var(--dpd-sans); display:table;
}
.md-typeset .dpd-odds-grid th,
.md-typeset .dpd-odds-grid td{
  border:0; border-bottom:1px solid var(--line); padding:12px 6px; text-align:center;
}
.md-typeset .dpd-odds-grid thead th{
  font-family:var(--dpd-mono); font-size:12px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line);
}
/* The difficulty word under each die label, so the grid can be read without
   flipping back to the difficulty table. */
.dpd-odds-grid thead th span{
  display:block; font-size:9px; letter-spacing:.08em; color:var(--muted);
  margin-top:3px; text-transform:none; font-weight:400;
}
.dpd-odds-grid .odds-corner{
  font-size:9px; letter-spacing:.06em; color:var(--muted); text-transform:none;
  font-weight:400; white-space:nowrap;
}
.md-typeset .dpd-odds-grid tbody th{
  font-family:var(--dpd-mono); font-size:13px; font-weight:500; color:var(--accent);
  text-align:left; width:1%; white-space:nowrap; padding-right:14px;
}
.dpd-odds-grid td{ line-height:1.25; }
.dpd-odds-grid .odds-w{
  display:block; font-family:var(--dpd-display); font-size:19px; color:var(--ink);
}
.dpd-odds-grid .odds-t{
  display:block; font-family:var(--dpd-mono); font-size:10.5px; color:var(--accent);
  margin-top:3px;
}
.dpd-odds-grid .odds-l{
  display:block; font-family:var(--dpd-mono); font-size:10.5px; color:var(--muted);
}
/* The diagonal is the even contest, and the most interesting line in the grid. */
.dpd-odds-grid tbody tr:nth-child(1) td:nth-child(2),
.dpd-odds-grid tbody tr:nth-child(2) td:nth-child(3),
.dpd-odds-grid tbody tr:nth-child(3) td:nth-child(4),
.dpd-odds-grid tbody tr:nth-child(4) td:nth-child(5),
.dpd-odds-grid tbody tr:nth-child(5) td:nth-child(6){
  background:color-mix(in srgb, var(--accent-ui) 8%, transparent);
}
.md-typeset .dpd-odds-key{
  font-family:var(--dpd-mono); font-size:11px; letter-spacing:.08em;
  color:var(--muted); margin:0 0 34px;
}
.dpd-odds-key span{ margin-right:4px; }
.dpd-odds-key .odds-w{ color:var(--ink); }
.dpd-odds-key .odds-t{ color:var(--accent); }
.dpd-odds-key .odds-l{ color:var(--muted); }

/* Below about 700px the grid stops fitting; let it scroll inside its own
   container rather than shrinking the numbers into illegibility. */
@media screen and (max-width:700px){
  .dpd-odds{ overflow-x:auto; }
  .md-typeset table.dpd-odds-grid{ min-width:560px; }
}

/* ---------- Terminal: the third palette -----------------------------------------
   Amber phosphor CRT. Not a gimmick bolted on the side -- it reuses the same
   tokens as the other two schemes, so every component follows without special
   cases.

   NOTE ON SELECTORS. Material sets data-md-color-scheme on <body> ITSELF, so
   the overlays must be written `body[data-md-color-scheme="terminal"]::after`.
   Written as a descendant selector -- `[data-md-color-scheme="terminal"] body`
   -- it matches nothing at all, because there is no body inside a body. That
   is why the scanlines and the flicker silently never rendered in the first
   version: the colours worked, because those rules target the attribute
   directly, and every effect did not.
   -------------------------------------------------------------------------- */
[data-md-color-scheme="terminal"]{
  --bg:#0C0700; --ink:#F0A500; --muted:#9A6A00; --line:#3A2800;
  --accent:#FFC533; --die:#7A4A00; --pip:#0C0700; --card:#160D00;
  --accent-ui:var(--accent); --on-accent:var(--bg);
  /* One phosphor: the dice lose their colours, and the d20 keeps the accent. */
  --d4:var(--ink); --d8:var(--ink); --d12:var(--ink); --d20:var(--accent);
  color-scheme:dark;
}

/* A terminal has one typeface. Forcing it everywhere is the whole joke, and it
   costs nothing because the layout is driven by the grid, not the face. */
[data-md-color-scheme="terminal"] body,
[data-md-color-scheme="terminal"] .md-typeset,
[data-md-color-scheme="terminal"] .md-typeset h1,
[data-md-color-scheme="terminal"] .md-typeset h2,
[data-md-color-scheme="terminal"] .md-typeset h3,
[data-md-color-scheme="terminal"] .md-typeset p,
[data-md-color-scheme="terminal"] .md-typeset li,
[data-md-color-scheme="terminal"] .md-typeset td,
[data-md-color-scheme="terminal"] .dpd-ladder b,
[data-md-color-scheme="terminal"] .dpd-roller-num,
[data-md-color-scheme="terminal"] .dpd-tl-num{
  font-family:var(--dpd-mono) !important;
  letter-spacing:0;
}
/* Archivo Black is a single very heavy weight, so swapping it for mono at 400
   visibly thins the wordmark -- the mark looked lighter in this scheme than in
   the other two. The self-hosted mono is a variable face spanning 400-700, so
   the display roles take the bold end and keep their presence. A terminal
   renders emphasis as bold anyway, which is the honest way to fix this without
   putting a non-terminal typeface back into a terminal. */
[data-md-color-scheme="terminal"] .md-typeset h1,
[data-md-color-scheme="terminal"] .md-typeset h2,
[data-md-color-scheme="terminal"] .dpd-ladder b,
[data-md-color-scheme="terminal"] .dpd-roller-num,
[data-md-color-scheme="terminal"] .dpd-quickroll-num,
[data-md-color-scheme="terminal"] .dpd-tl-num{
  font-weight:700;
}

/* Mono is much wider than Archivo Black, so the display sizes come down or the
   wordmark runs off the page. */
[data-md-color-scheme="terminal"] .md-typeset .dpd-hero h1{
  font-size:clamp(38px,7.4vw,86px); line-height:1.02; letter-spacing:-.02em;
}
[data-md-color-scheme="terminal"] .md-typeset h1{ font-size:clamp(26px,3.6vw,44px); }

/* The wordmark keeps Archivo Black here. Everything else is mono -- that is
   still the joke -- but the mark is the mark, and mono at 700 reads visibly
   thinner than a face that has no lighter weight at all. The glow and the
   scanlines are what say "screen"; the logo does not have to. */
[data-md-color-scheme="terminal"] .md-header__title,
[data-md-color-scheme="terminal"] .md-typeset .dpd-hero h1{
  font-family:var(--dpd-display) !important;
  font-weight:400;
}
[data-md-color-scheme="terminal"] .md-typeset .dpd-hero h1{
  font-size:clamp(40px,6.4vw,84px); line-height:.95; letter-spacing:normal;
}
[data-md-color-scheme="terminal"] .md-header__title{ letter-spacing:.08em; }

/* Phosphor bloom. Amber glows warmer and wider than green. */
[data-md-color-scheme="terminal"] .md-typeset,
[data-md-color-scheme="terminal"] .md-header__title{
  text-shadow:0 0 6px rgba(255,176,0,.45), 0 0 22px rgba(255,120,0,.18);
}

/* Scanlines and vignette, painted over everything and click-through.
   multiply rather than a flat overlay: it darkens the lit phosphor instead of
   greying it out, which is what a real shadow mask does to the picture. */
body[data-md-color-scheme="terminal"]::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0 2px,
      rgba(0,0,0,.30) 2px 4px
    ),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
  mix-blend-mode:multiply;
}

@media (prefers-reduced-motion: no-preference){
  /* The tracking bar: a faint band drifting down the screen the way a CRT that
     is fractionally out of sync rolls. This is the detail that sells it --
     static scanlines alone read as a texture rather than a screen. */
  body[data-md-color-scheme="terminal"]::before{
    content:""; position:fixed; left:0; right:0; top:0; height:190px;
    z-index:9997; pointer-events:none;
    background:linear-gradient(
      to bottom,
      rgba(255,176,0,0)    0%,
      rgba(255,176,0,.05)  38%,
      rgba(255,190,60,.16) 52%,
      rgba(255,176,0,.05)  66%,
      rgba(255,176,0,0)    100%);
    animation:dpd-crt-roll 7.5s linear infinite;
  }
  @keyframes dpd-crt-roll{
    0%{ transform:translateY(-190px); }
    100%{ transform:translateY(100vh); }
  }

  /* Power-on surge, once. Switching into this scheme newly matches the rule,
     so the animation starts fresh -- far better than a permanent hum, which is
     charming for four seconds and then just makes the page hard to read. */
  body[data-md-color-scheme="terminal"]{
    animation:dpd-crt-on .62s steps(1,end) 1;
  }
  @keyframes dpd-crt-on{
    0%{ filter:brightness(2.4) contrast(1.5); }
    10%{ filter:brightness(.15); }
    22%{ filter:brightness(1.7); }
    36%{ filter:brightness(.5); }
    52%{ filter:brightness(1.25); }
    70%{ filter:brightness(.85); }
    86%{ filter:brightness(1.08); }
    100%{ filter:none; }
  }
}

[data-md-color-scheme="terminal"] .md-header{ border-bottom:1px solid var(--line); }

/* ---------- The Narrator's screen -----------------------------------------------
   Read at a table, in bad light, while talking. Bigger type than the rest of
   the site, blocks that can be found by shape rather than by reading, and
   nothing that needs two hands.
   -------------------------------------------------------------------------- */
.dpd-screen{ margin-top:8px; }
.md-typeset .dpd-screen-block{
  border-top:1px solid var(--line); padding:22px 0 6px; margin:0;
}
.md-typeset .dpd-screen-block:first-of-type{ border-top:2px solid var(--ink); }
.dpd-screen-label{
  display:block; font-family:var(--dpd-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.md-typeset .dpd-screen-block p,
.md-typeset .dpd-screen-block li{ font-size:16.5px; line-height:1.55; }
.md-typeset .dpd-screen-block table{ font-size:16px; }
.md-typeset .dpd-screen-todo{ opacity:.6; }

/* Quick roller: one tap, one big number. */
.dpd-quickroll{ visibility:hidden; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.dpd-quickroll.is-ready{ visibility:visible; }
.dpd-quickroll-picks{ display:flex; gap:8px; flex-wrap:wrap; flex:1 1 auto; }
.dpd-quickroll-btn{
  flex:1 1 auto; min-width:58px; min-height:52px;   /* thumb-sized on purpose */
  background:transparent; border:1px solid var(--line); border-radius:0;
  font-family:var(--dpd-mono); font-size:15px; color:var(--ink);
  cursor:pointer; transition:border-color .12s, color .12s;
}
.dpd-quickroll-btn:hover{ border-color:var(--die-c,var(--accent-ui)); color:var(--die-c,var(--accent)); }
.dpd-quickroll-btn:active{ background:var(--card); }
.dpd-quickroll-out{
  min-width:104px; min-height:96px; border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.dpd-quickroll-num{
  font-family:var(--dpd-display); font-size:44px; line-height:1; color:var(--ink);
}
.dpd-quickroll-die{
  font-family:var(--dpd-mono); font-size:11px; letter-spacing:.12em; color:var(--muted);
  margin-top:6px; min-height:13px;
}
/* A single frame of acknowledgement, so a repeated number still reads as a new
   roll. Skipped for anyone who has asked for less motion. */
@media (prefers-reduced-motion: no-preference){
  .dpd-quickroll.is-hit .dpd-quickroll-out{ animation:dpd-hit .34s ease-out; }
  @keyframes dpd-hit{
    0%{ border-color:var(--accent-ui); transform:scale(1.03); }
    100%{ border-color:var(--line); transform:scale(1); }
  }
}
@media screen and (max-width:520px){
  .dpd-quickroll{ flex-direction:column; align-items:stretch; }
  .dpd-quickroll-out{ min-height:112px; }
}

/* ---------- Take it (the fork page) ---------------------------------------------
   Two columns of permissions, then numbered steps. The "may" column is the
   generous one and gets the accent; the "must" column is the short one, and
   deliberately does not read as a warning -- there are only two obligations
   and neither is onerous.
   -------------------------------------------------------------------------- */
.dpd-fork-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:36px;
  border-top:2px solid var(--ink); padding-top:26px; margin:26px 0 34px;
}
.md-typeset .dpd-fork-grid h3{
  font-family:var(--dpd-mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; margin:0 0 14px;
}
.md-typeset .dpd-fork-yes h3{ color:var(--accent); }
.md-typeset .dpd-fork-no h3{ color:var(--muted); }
.md-typeset .dpd-fork-grid ul{ margin:0; padding-left:18px; }
.md-typeset .dpd-fork-grid li{ margin-bottom:9px; line-height:1.5; }

.dpd-forksteps{
  border-top:1px solid var(--line); margin:26px 0 30px; padding-top:8px;
}
.md-typeset .dpd-forksteps > p{
  border-bottom:1px solid var(--line); padding:18px 0; margin:0;
}
.md-typeset .dpd-forksteps > p:last-child{ border-bottom:0; }
/* Same numeral treatment as the rules page, scoped the same careful way. */
.md-typeset .dpd-forksteps p > strong:first-child{
  font-family:var(--dpd-mono); font-weight:500; font-size:13px;
  color:var(--accent); margin-right:10px;
}

@media screen and (max-width:720px){
  .dpd-fork-grid{ grid-template-columns:1fr; gap:26px; }
}

/* ---------- The character sheet, when it is fillable -----------------------------
   The fields stay ruled lines rather than becoming inputs: no browser form
   chrome, and it still prints like paper. All these rules do is make it
   obvious you can type, and give focus somewhere to land.
   -------------------------------------------------------------------------- */
.dpd-field.is-fillable{
  font-family:var(--dpd-sans); font-size:16px; line-height:1.5;
  color:var(--ink); padding:2px 2px 4px; cursor:text;
  transition:border-color .12s, background-color .12s;
}
.dpd-field.is-fillable:hover{ border-bottom-color:var(--muted); }
.dpd-field.is-fillable:focus{
  outline:none; border-bottom-color:var(--accent-ui);
  background:color-mix(in srgb, var(--accent-ui) 5%, transparent);
}
/* The die cell in the Skills table. Centred, mono, and wide enough for "d12". */
/* The die cell. There are five dice and there will only ever be five, so this
   is a chooser -- but it has to look like the rest of the sheet rather than like
   a browser form control, which is what appearance:none is doing here. */
/* The die column takes only the room it needs. It was claiming 100px for three
   characters, which pushed "Strength, senses, fine motor skills, stamina" one
   pixel past its column and wrapped it onto a second line.
   Two things are needed, and only one of them is obvious. width:1% is the old
   auto-layout trick for "shrink this column to its contents" -- but on its own
   it does nothing here, because Material puts min-width:5rem on every th, which
   at its 125% root is a hard 100px floor per column. Clear that first. */
/* Material wraps tables in a shrink-to-fit inline-block, so once the columns
   stopped being padded out the Skills table pulled 91px narrower than the ruled
   lines above it and stopped looking like part of the same sheet. Let it fill
   the sheet; the slack goes to "what it covers", which is what wants it. */
.md-typeset .dpd-sheet .md-typeset__table{ display:block; width:100%; }
.md-typeset .dpd-sheet table{ width:100%; }
.md-typeset .dpd-sheet table th{ min-width:0; }
.md-typeset .dpd-sheet table th:last-child,
.md-typeset .dpd-sheet table td:last-child{
  width:1%; white-space:nowrap; padding-right:0;
}
.md-typeset .dpd-sheet td.is-die{
  text-align:center; padding-left:8px; min-width:0;
}
.dpd-die-select{
  appearance:none; -webkit-appearance:none;
  font-family:var(--dpd-mono); font-size:16px; line-height:1.4;
  color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:3px 2px 5px; width:auto; min-width:46px;
  text-align:center; text-align-last:center;
  cursor:pointer; transition:border-color .12s, background-color .12s;
}
.dpd-die-select:hover{ border-bottom-color:var(--muted); }
.dpd-die-select:focus{
  outline:none; border-bottom-color:var(--accent-ui);
  background:color-mix(in srgb, var(--accent-ui) 7%, transparent);
}
.dpd-die-select.is-empty{ color:var(--line); }
/* The dropdown itself is drawn by the browser, so it needs real colours. */
.dpd-die-select option{ color:var(--ink); background:var(--bg); }

.md-typeset .dpd-sheet-note{
  font-size:14px; color:var(--muted); line-height:1.55;
  border-left:2px solid var(--line); padding-left:16px; margin:0 0 22px;
}
/* The buttons are a different kind of thing from the sentence above them, and
   were reading as part of it. Give them their own line and room to breathe. */
.md-typeset .dpd-sheet-actions{ display:block; margin-top:16px; }
.md-typeset .dpd-sheet-actions .dpd-sheet-get{ margin-left:0; }
.dpd-sheet-get,
.dpd-sheet-clear{
  font-family:var(--dpd-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:0; padding:5px 10px;
  margin:0 0 0 6px; cursor:pointer;
  transition:color .12s, border-color .12s, background-color .12s;
}
.dpd-sheet-clear:hover{ color:var(--accent); border-color:var(--accent-ui); }
/* Downloading is the thing you came here to do; clearing is the way out. */
.dpd-sheet-get{ background:var(--accent-ui); border-color:var(--accent-ui); color:var(--on-accent); }
.dpd-sheet-get:hover{ background:var(--ink); border-color:var(--ink); }
.dpd-sheet-get[disabled]{ opacity:.6; cursor:default; }
.dpd-sheet-error{ display:block; margin-top:8px; color:var(--accent); }

@media print{
  /* The note and the button are for the screen. The typed text is the point. */
  .dpd-sheet-note{ display:none !important; }
  .dpd-field.is-fillable:focus{ background:none; }
  /* On paper the chooser is just the letters someone picked. */
  .dpd-die-select{ background:none; border-bottom:0; color:var(--ink); }
  .dpd-die-select.is-empty{ color:transparent; }
}