/* extra fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

h1,h2,h3 {
  font-family: "Oswald", sans-serif;
}

/* CodeCrew palette, taken from the logo artwork: deep purple-black ground
   (#0a0012 to #200040), cyan accent (#00d0f8), white type. Both palette
   entries in zensical.toml use primary/accent "custom", which hands colour
   control to the variables below. */
:root {
  --cc-ink: #0a0012;
  --cc-purple: #1a0a3a;
  --cc-purple-light: #2d1458;
  --cc-cyan: #00d0f8;
  --cc-cyan-deep: #0087a8;
  /* The cyan at 20% alpha: a soft fill for the primary button on the hero's
     dark ground, where the full cyan is too stark for a control. */
  --cc-cyan-tint: #00d0f833;
  /* Second accent, sampled from the "docs" text in the docs icon: the
     colour of links on the home page in slate (6:1 on the page ground,
     5.5:1 on the hero). Its deeper companion carries the light scheme,
     where the sampled pink reads at 3.1:1 (6.2:1 on the page, 5.2:1 on
     the darker bands). */
  --cc-pink: #ce5ae9;
  --cc-pink-deep: #9327ae;
}

/* Header, nav tabs and buttons in both schemes. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--cc-purple);
  --md-primary-fg-color--light: var(--cc-purple-light);
  --md-primary-fg-color--dark: var(--cc-ink);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

/* Light scheme: cool off-white ground, deep cyan links for contrast. */
[data-md-color-scheme="default"][data-md-color-accent="custom"] {
  --md-default-bg-color: #f7f5fb;
  --md-accent-fg-color: var(--cc-cyan-deep);
  --md-accent-fg-color--transparent: #0087a81a;
  --md-typeset-a-color: var(--cc-cyan-deep);
  --md-footer-bg-color: var(--cc-purple);
  --md-footer-bg-color--dark: var(--cc-ink);
}

/* Dark scheme: the logo's purple-black ground with bright cyan links. */
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-hue: 270;
  --md-default-bg-color: #0c0418;
  --md-default-bg-color--light: #0c0418b3;
  --md-default-bg-color--lighter: #0c041866;
  --md-default-bg-color--lightest: #0c04181a;
  --md-default-fg-color: #f2eefaf2;
  --md-default-fg-color--light: #f2eefab3;
  --md-default-fg-color--lighter: #f2eefa4d;
  --md-default-fg-color--lightest: #f2eefa1f;
  --md-code-bg-color: #180a30;
  --md-accent-fg-color: var(--cc-cyan);
  --md-accent-fg-color--transparent: #00d0f81a;
  --md-typeset-a-color: var(--cc-cyan);
  --md-footer-bg-color: #100020;
  --md-footer-bg-color--dark: var(--cc-ink);
}

/* Zensical's header takes the page background, which in the light scheme
   would swallow the white logo. Keep the header on the brand purple in both
   schemes by redefining the theme variables inside it. */
[data-md-color-scheme="default"] .md-header {
  --md-default-bg-color: var(--cc-purple);
  --md-default-bg-color--light: var(--cc-purple);
  --md-default-bg-color--lighter: #ffffff1f;
  --md-default-bg-color--lightest: #ffffff0d;
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #ffffffb3;
  --md-default-fg-color--lighter: #ffffff4d;
  --md-default-fg-color--lightest: #ffffff1f;
  --md-accent-fg-color: var(--cc-cyan);
}

/* navigation.sections renders second-level entries as always-open groups,
   ignoring the toggle. Honor the aria-expanded Zensical already sets. */
.md-nav__item--section > nav.md-nav[aria-expanded="false"] > .md-nav__list {
  display: none;
}

.md-copyright__registration {
  margin-top: 0.4rem;
  opacity: 0.7;
}

/* "All posts..." archive link in the nav: right-align and dim. */
.md-nav__link[href$="archive/"] {
  justify-content: flex-end;
  text-align: right;
  font-style: italic;
}

/* Date suffix injected into nav titles by main.py:regenerate_nav. */
.md-nav__link .muted {
  opacity: 0.55;
  margin-left: 0.25rem;
  font-weight: 400;
}

/* Page metadata line rendered below the H1 by overrides/partials/content.html. */
.rr-page-meta {
  margin: -0.6rem 0 1.2rem;
  font-size: 0.85em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
}

.rr-page-meta__item {
  white-space: nowrap;
}

.rr-page-meta__label {
  opacity: 0.6;
  margin-right: 0.15rem;
}

.rr-page-meta__value {
  font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Home page: docs/index.md rendered by overrides/home.html.           */
/* Full-bleed sections; colours come from the palette variables above. */
/* ------------------------------------------------------------------ */

/* The home template drops the sidebars and the reading column, so let the
   page escape the 61rem grid and the top margin: sections run edge to edge
   and the hero sits flush under the nav tabs. */
.md-main__inner:has(> .cc-home) {
  max-width: none;
  margin-top: 0;
}

.cc-home .headerlink {
  display: none;
}

/* Links on the home page take the pink, so links and buttons no longer
   share the cyan; buttons, the step rule, the receipts' rule and the
   hero's bold keep it. Hover mixes the pink towards the scheme's text
   colour; buttons are excluded so their own colours hold. */
.cc-home {
  --md-typeset-a-color: var(--cc-pink-deep);
}

[data-md-color-scheme="slate"] .cc-home {
  --md-typeset-a-color: var(--cc-pink);
}

.cc-home .md-typeset a:not(.cc-button):is(:hover, :focus) {
  color: color-mix(in srgb, var(--cc-pink-deep) 80%, black);
}

[data-md-color-scheme="slate"] .cc-home .md-typeset a:not(.cc-button):is(:hover, :focus),
.cc-home .cc-hero a:not(.cc-button):is(:hover, :focus) {
  color: color-mix(in srgb, var(--cc-pink) 70%, white);
}

.cc-section {
  padding: 3rem 1rem;
}

.cc-section__inner {
  max-width: 56rem;
  margin: 0 auto;
}

/* Alternate sections (Why, Start now) sit darker than the page ground and
   carry a radial glow in the spirit of the logo artwork: a soft light
   centre on the purple-black. In slate the band runs from --cc-purple-light
   at the centre to --cc-ink at the edges (body text stays above 10:1, the
   muted text above 5.8:1); in default the off-white darkens a step and the
   same shape shows at low strength (body text above 11:1). */
.cc-section--alt {
  background: radial-gradient(60% 75% at 50% 40%, #eeeaf5 0%, #e6e1f0 55%, #ddd6ea 100%);
}

[data-md-color-scheme="slate"] .cc-section--alt {
  background: radial-gradient(60% 75% at 50% 40%, var(--cc-purple-light) 0%, var(--cc-purple) 45%, var(--cc-ink) 100%);
}

.md-typeset .cc-section h2 {
  margin: 0 0 1.6rem;
  font-size: 2rem;
  line-height: 1.1;
  text-align: center;
  letter-spacing: -0.01em;
}

.md-typeset .cc-section h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  line-height: 1.2;
}

.md-typeset .cc-section p {
  margin: 0 0 0.8rem;
}

/* Hero. The section carries the slate scheme attributes in the Markdown so
   the type, links and buttons take the dark palette whichever scheme the
   visitor chose; the ground is the logo's purple-to-ink gradient.

   Layout is a grid: stacked and centred on narrow viewports; from 60em
   (Zensical's own breakpoint) two columns, the logo on the left and the
   headline, sub-headline and calls to action on the right, left-aligned. */
.cc-hero {
  padding: 2.4rem 1rem 3rem;
  text-align: center;
  background: linear-gradient(180deg, var(--cc-purple) 0%, var(--cc-ink) 100%);
  color: var(--md-primary-bg-color);
}

.cc-hero .cc-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.4rem;
}

/* Markdown wraps the image in a <p>; the wrapper carries no margin so the
   grid gap alone spaces the logo from the headline. */
.md-typeset .cc-hero__logo p {
  margin: 0;
}

.md-typeset .cc-logo {
  display: block;
  max-width: 13rem;
  margin: 0;
  border-radius: 1rem;
}

/* The body is the centred grid item that carries the measure; the headline
   and paragraphs fill it, so none of them needs auto side margins. The
   paragraph rules below name .cc-hero so they outrank the general
   `.md-typeset .cc-section p` margin rule (specificity (0,2,1)), which used
   to strip the sub-headline's auto margins and leave it flush left. */
.cc-hero__body {
  max-width: 34rem;
}

.md-typeset .cc-hero .cc-hero__headline {
  margin: 0 0 1rem;
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-primary-bg-color);
}

.md-typeset .cc-hero .cc-hero__sub {
  margin: 0 0 1.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--md-primary-bg-color--light);
}

@media screen and (min-width: 60em) {
  .cc-hero {
    text-align: left;
  }
  .cc-hero .cc-section__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 3rem;
  }
  .md-typeset .cc-logo {
    max-width: 19rem;
  }
  /* The column bounds the body: 56rem inner, less the logo and the gap. */
  .cc-hero__body {
    max-width: none;
  }
}

/* The wordmark colours "Code" cyan and "Crew" white; echo it in the lead. */
.md-typeset .cc-hero__sub strong {
  color: var(--cc-cyan);
}

/* Calls to action: centred when stacked, flush left beside the logo. */
.md-typeset .cc-hero .cc-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
}

@media screen and (min-width: 60em) {
  .md-typeset .cc-hero .cc-cta {
    justify-content: flex-start;
  }
}

/* Buttons: two equal actions on the dark hero. The primary takes the soft
   translucent cyan, the secondary a quiet light border; both carry light
   text and no underline in any state (Zensical underlines every
   `.md-typeset a`). Hover and keyboard focus stay subtle: the primary's
   border firms up to the deep cyan, the secondary takes a faint wash. */
.md-typeset .cc-button {
  display: inline-block;
  padding: 0.55em 1.4em;
  border: 0.1rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  text-decoration: none;
  transition: background-color 125ms, border-color 125ms;
}

.md-typeset .cc-button--primary {
  background: var(--cc-cyan-tint);
  border-color: transparent;
}

.md-typeset .cc-button:is(:hover, :focus, :focus-visible) {
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.md-typeset .cc-button:is(:hover, :focus-visible) {
  background: var(--md-default-fg-color--lightest);
  border-color: var(--md-default-fg-color--light);
}

.md-typeset .cc-button--primary:is(:hover, :focus-visible) {
  background: var(--cc-cyan-tint);
  border-color: var(--cc-cyan-deep);
}

.md-typeset .cc-button:focus-visible {
  outline: 0.1rem solid var(--cc-cyan-deep);
  outline-offset: 0.1rem;
}

/* Plain links inside the hero take the pink whichever scheme is on: the
   section carries the slate attributes, whose selector sets the link
   colour at specificity (0,2,0); two classes match it, and this rule is
   later. The pink reads at 5.5:1 on the hero's purple, so it needs no
   lightening there. There are no such links today; this is the policy. */
.cc-section.cc-hero {
  --md-typeset-a-color: var(--cc-pink);
}

/* The install block at the close, as a terminal window: always on the ink,
   whichever scheme, with a title bar and three muted dots. Each command is
   a line span; the `$` prompt is ::before and the dim "output" beneath it
   is ::after from the span's data-out attribute, so neither is in the DOM
   text: Zensical's copy button (clipboard.js reads the selection's text)
   yields the five commands and nothing else. The window sizes to its
   longest line plus the prompt (fit-content), centred in the band, and is
   the positioned box, so Zensical's copy button (nav.md-code__nav) lands in
   the title bar. The light-type variables are set here as the header does,
   since the window is dark in the light scheme too. The chrome and type
   scale up from 45em; phones keep the tighter sizes that fit the
   42-character line plus prompt in the 420px column. */
.cc-install {
  max-width: 44rem;
  margin: 0 auto;
  text-align: left;
}

.cc-term {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  --md-default-fg-color: #f2eefaf2;
  --md-default-fg-color--light: #f2eefab3;
  --md-default-fg-color--lighter: #f2eefa4d;
  --md-default-fg-color--lightest: #f2eefa1f;
  --md-code-bg-color: var(--cc-ink);
  --md-code-fg-color: #f2eefaf2;
  --md-accent-fg-color: var(--cc-cyan);
  position: relative;
  overflow: hidden;
  border: 0.05rem solid #f2eefa33;
  border-radius: 0.5rem;
  background: var(--cc-ink);
  box-shadow: 0 1rem 2rem #0a001266;
}

.cc-term__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 0.05rem solid #f2eefa1f;
  background: #180a30;
}

.cc-term__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #f2eefa33;
}

.cc-term__title {
  margin-left: 0.4rem;
  font: 0.65rem/1 var(--md-code-font-family);
  color: #f2eefa80;
}

.md-typeset .cc-term pre {
  position: static;
  margin: 0;
}

.md-typeset .cc-term pre > code {
  display: block;
  padding: 0.8rem 0.6rem;
  border-radius: 0;
  background: var(--cc-ink);
  color: #f2eefaf2;
}

.cc-term__line::before {
  content: "$";
  display: inline-block;
  width: 1.5ch;
  color: var(--cc-cyan);
}

.cc-term__line[data-out]::after {
  content: "\A" attr(data-out);
  white-space: pre;
  color: #f2eefa80;
}

.cc-term .md-code__nav {
  top: 0.25rem;
  right: 0.5rem;
  background: transparent;
}

@media screen and (min-width: 45em) {
  .cc-term__bar {
    gap: 0.45rem;
    padding: 0.7rem 1rem;
  }
  .cc-term__dot {
    width: 0.7rem;
    height: 0.7rem;
  }
  .cc-term__title {
    margin-left: 0.5rem;
    font-size: 0.8rem;
  }
  .md-typeset .cc-term pre > code {
    padding: 1rem 1.6rem 1rem 1.2rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .cc-term .md-code__nav {
    top: 0.45rem;
    right: 0.7rem;
  }
}

/* How it works: the lead under the title, then four numbered steps, two by
   two from 45em up. (Four across a 56rem column gives each step 256px; the
   44-character verb lines need 356px, so the numbers carry the order
   instead of a row of arrows.) The lead names .cc-how for the same
   specificity reason as the hero paragraphs. */
.md-typeset .cc-how .cc-how__lead {
  max-width: 40rem;
  margin: -0.8rem auto 2rem;
  text-align: center;
}

/* Under each step, a two-line conversation in speech bubbles, CSS only:
   the human's on the left with the person glyph and one short line, the
   agent's on the right with the Claude glyph and the verb it runs as code.
   Grounds from the palette: a faint fg tint for the human, the cyan tint
   for the agent; the text is the scheme's own, above 10:1 on both in both
   schemes. Tails are a bordered pseudo-element outside the bubble, so the
   translucent grounds never overlap. The code never breaks; the bubble
   fits its content up to 88% of the card, so nothing scrolls on a phone. */
.cc-chat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0 0.4rem; /* room for the tails, so they stay inside the card */
}

.md-typeset .cc-step .cc-bubble {
  position: relative;
  width: fit-content;
  max-width: 88%;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--md-default-fg-color);
}

.md-typeset .cc-step .cc-bubble--you {
  align-self: flex-start;
  border-bottom-left-radius: 0.15rem;
  background: var(--md-default-fg-color--lightest);
}

.md-typeset .cc-step .cc-bubble--agent {
  align-self: flex-end;
  border-bottom-right-radius: 0.15rem;
  background: var(--cc-cyan-tint);
}

.md-typeset .cc-step .cc-bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 0.45rem solid transparent;
}

.md-typeset .cc-step .cc-bubble--you::before {
  left: -0.4rem;
  border-right: 0.45rem solid var(--md-default-fg-color--lightest);
}

.md-typeset .cc-step .cc-bubble--agent::before {
  right: -0.4rem;
  border-left: 0.45rem solid var(--cc-cyan-tint);
}

.md-typeset .cc-bubble .twemoji {
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.1em;
  color: var(--md-default-fg-color--light);
}

.md-typeset .cc-bubble--agent .twemoji {
  color: var(--md-accent-fg-color);
}

.md-typeset .cc-bubble .twemoji svg {
  width: 1em;
}

.md-typeset .cc-bubble--agent code {
  padding: 0;
  background: transparent;
  color: inherit;
  white-space: nowrap;
}

.cc-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  counter-reset: cc-step;
}

.cc-step {
  position: relative;
  padding-top: 0.8rem;
  border-top: 0.15rem solid var(--md-accent-fg-color);
  counter-increment: cc-step;
}

.md-typeset .cc-step h3::before {
  content: counter(cc-step);
  margin-right: 0.4rem;
  color: var(--md-accent-fg-color);
}

/* A Lucide glyph before each step's name, in the accent. */
.md-typeset .cc-step h3 .twemoji {
  height: 1em;
  margin-right: 0.3em;
  vertical-align: -0.1em;
  color: var(--md-accent-fg-color);
}

.md-typeset .cc-step h3 .twemoji svg {
  width: 1em;
}

@media screen and (min-width: 45em) {
  .cc-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 60em) {
  .cc-steps {
    gap: 1.6rem 2.4rem;
  }
}

/* The crew: five seat badges over the copy, on the page ground between
   How it works and the Why band; a hairline marks it off from the steps. */
.cc-crew {
  border-top: 0.05rem solid var(--md-default-fg-color--lightest);
}

.cc-crew__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.6rem;
  margin: 0 0 1.6rem;
}

.md-typeset .cc-crew__badge {
  margin: 0;
  padding: 0.4rem 0.5rem;
  text-align: center;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}

/* The badges are white marks on transparency (the hub's -t variants), so
   each sits on a rounded tile of the brand purple in both schemes: on the
   light ground the marks would otherwise vanish, and the tile is the
   ground the App avatars carry. */
.md-typeset .cc-crew__badge p {
  margin: 0; /* md_in_html wraps the image in a paragraph */
}

.md-typeset .cc-crew__badge img {
  display: block;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 0.4rem;
  padding: 0.5rem;
  border-radius: 1.2rem;
  background: var(--cc-purple);
}

.cc-crew__copy {
  max-width: 40rem;
  margin: 0 auto;
}

.md-typeset .cc-crew .cc-crew__verb {
  margin: 0 0 0.8rem;
}

/* Why: three panels on the glowing band, on the page ground. */
.cc-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.cc-panel {
  padding: 1.2rem 1.2rem 0.6rem;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  background: var(--md-default-bg-color);
}

@media screen and (min-width: 45em) {
  .cc-panels {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* One large glyph at the top of each panel, in the accent, nothing else. */
.md-typeset .cc-panel .cc-panel__glyph {
  margin: 0 0 0.6rem;
  line-height: 1;
}

.md-typeset .cc-panel__glyph .twemoji {
  height: 2.4rem;
  color: var(--md-accent-fg-color);
}

.md-typeset .cc-panel__glyph .twemoji svg {
  width: 2.4rem;
}

/* One muted line under the pair, centred. */
.md-typeset .cc-proof .cc-captures__caption {
  margin: -1.2rem 0 2.4rem;
  font-size: 0.75rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* Proof: the receipts, two columns on desktop. */

/* Proof captures: one PR review split across two panels, the upper and
   lower halves of the same page (overlapping by about 100px), as cards
   under the heading in a thin rounded frame with a soft shadow, angled
   towards each other with a perspective on the row and a mirrored 8deg
   rotateY. The continuity cue is a mask fade, not baked into the files:
   the first card fades out over its bottom 14%, the second in over its
   top 14%, on the whole card so the frame fades with the image. At
   26.5rem each the cards are readable; to fit the section the second
   overlaps the first's right edge by 4rem and sits above it (z-index),
   which covers the left capture's GitHub sidebar, with its shadow selling
   the depth. Flat, full-width and unoverlapped on phones with the fades
   kept (the media query at the end). */
.cc-captures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2.4rem;
  perspective: 60rem;
}

.md-typeset .cc-capture {
  position: relative;
  flex: 0 1 26.5rem;
  margin: 0;
  overflow: hidden;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.6rem;
  background: var(--cc-ink);
  box-shadow: 0 1.2rem 2.4rem #0a001259;
}

.md-typeset .cc-capture img {
  display: block;
  width: 100%;
  height: auto;
}

.md-typeset .cc-capture:nth-child(1) {
  transform: rotateY(8deg);
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}

.md-typeset .cc-capture:nth-child(2) {
  z-index: 1;
  margin-left: -4rem;
  transform: rotateY(-8deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%);
}

.cc-receipts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem 2rem;
}

.cc-receipt {
  padding-top: 0.8rem;
  border-top: 0.15rem solid var(--md-accent-fg-color);
}

.md-typeset .cc-receipt p {
  margin: 0;
}

/* Each receipt: a glyph in the accent, a short header, a strapline, and
   the popover on the whole card. */
.md-typeset .cc-receipt .cc-receipt__glyph {
  margin: 0 0 0.3rem;
  line-height: 1;
}

.md-typeset .cc-receipt__glyph .twemoji {
  height: 1.4rem;
  color: var(--md-accent-fg-color);
}

.md-typeset .cc-receipt__glyph .twemoji svg {
  width: 1.4rem;
}

.md-typeset .cc-receipt .cc-receipt__strap {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

@media screen and (min-width: 45em) {
  .cc-receipts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Popovers, CSS only: a Markdown panel inside its trigger, hidden at rest
   and shown while the trigger is hovered or holds focus (the trigger has
   tabindex="0", so keyboard users and a tap on a phone open it too). On
   desktop the panel sits below the trigger, centred; below 45em it is a
   sheet fixed to the bottom of the viewport, so it can never leave the
   screen. Page ground, hairline border, shadow, the scheme's own text.
   Anything that opens a popover shows an accent-tint outline and lifts
   2px on hover and focus-within; nothing else lifts. The outline rests
   at full width in transparent, so only its colour transitions and it
   starts from nothing: with no resting outline, outline-color computes to
   currentColor (the text colour) and the first frames of the transition
   painted a near-white ring in slate and a near-black one in the light
   scheme. Keyboard focus shows the same sustained ring; there is no
   brighter focus-visible state. The lifted trigger is a stacking context
   (the transform), so its panel's z-index ranks only inside it and later
   siblings in the grid painted over a row-1 panel; the open trigger
   therefore takes z-index 5, above every sibling at auto. */
.cc-pop {
  position: relative;
  cursor: default;
  border-radius: 0.4rem;
  outline: 0.08rem solid transparent;
  outline-offset: 0.3rem;
  transition: transform 125ms, outline-color 125ms;
}

.cc-pop:hover, .cc-pop:focus-within {
  z-index: 5;
  outline-color: color-mix(in srgb, var(--cc-cyan) 45%, transparent);
  transform: translateY(-2px);
}

/* The receipts already carry the accent rule on their top edge, and a
   second ring around the card read as a double border; they keep the
   lift and lose the ring. The crew badges keep both. */
.cc-receipts .cc-pop:hover, .cc-receipts .cc-pop:focus-within {
  outline-color: transparent;
}

/* The panel rises out of its card: its top edge overlaps the card's
   bottom (1.5rem into a receipt, whose strapline it covers; 0.5rem into a
   badge tile, its padding only, so a wide panel never sits over a
   neighbouring badge's caption; the tile is 7rem wide now and a 22rem
   panel still reaches its neighbours, so the depth stays at the padding). Clearly raised: white with a firmer
   shadow on the off-white page, where white is the lightest ground there
   is; --cc-purple-light, two shades up from the page, in slate. Type at
   0.95rem. */
.md-typeset .cc-pop .cc-pop__panel {
  position: absolute;
  top: calc(100% - 1.5rem);
  left: 50%;
  z-index: 4;
  width: 22rem;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0.8rem 1rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.4rem;
  background: #ffffff;
  color: var(--md-default-fg-color);
  box-shadow: 0 0.8rem 2rem #0a001259;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 125ms, visibility 125ms;
}

.md-typeset .cc-crew__badge .cc-pop__panel {
  top: calc(100% - 0.5rem);
}

[data-md-color-scheme="slate"] .md-typeset .cc-pop .cc-pop__panel {
  background: var(--cc-purple-light);
}

.cc-pop:hover .cc-pop__panel, .cc-pop:focus-within .cc-pop__panel {
  visibility: visible;
  opacity: 1;
}

.md-typeset .cc-pop__panel p {
  margin: 0 0 0.5rem;
}

.md-typeset .cc-pop__panel p:last-child {
  margin-bottom: 0;
}

.md-typeset .cc-proof .cc-proof__not-yet {
  margin: 1.6rem 0 0;
  font-size: 0.75rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* Closing install call to action. */
.cc-start {
  text-align: center;
}

.md-typeset .cc-start p {
  max-width: 40rem;
  margin: 1rem auto 0;
}

/* The terminal and the payoff line: stacked and centred on phones, two
   columns from 60em with the terminal on the left and the line beside it,
   vertically centred. The line is the section's close: the quote in the
   heading face, the lead-in small and muted above it (kept because the
   quote alone does not say who it is said to); the quotes carry the
   emphasis, so the italic goes. */
.cc-start__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: center;
  justify-items: center;
}

.md-typeset .cc-start .cc-start__payoff {
  max-width: 24rem;
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

.cc-start__lead {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--md-text-font-family);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--md-default-fg-color--light);
}

@media screen and (min-width: 60em) {
  .cc-start__pair {
    grid-template-columns: auto 1fr;
    gap: 3rem;
    justify-items: start;
    text-align: left;
  }
  .cc-start__pair .cc-term {
    margin: 0;
  }
}

/* The footer meta strip after the Start now band. Zensical's modern
   stylesheet paints .md-footer with --md-default-bg-color and the strip
   with --md-default-fg-color--lightest (the --md-footer-bg-color values
   above never apply), which made the footer the page ground plus the same
   faint tint the old band had. The home footer takes the brand purple with
   light type in both schemes, the header's own trick, and a hairline. */
.cc-footer {
  --md-default-bg-color: var(--cc-purple);
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #ffffffb3;
  --md-default-fg-color--lighter: #ffffff4d;
  --md-default-fg-color--lightest: #ffffff1f;
  --md-accent-fg-color: var(--cc-cyan);
  border-top: 0.05rem solid var(--md-default-fg-color--lighter);
}

@media screen and (max-width: 44.9375em) {
  .cc-section {
    padding: 2rem 0.8rem;
  }
  .cc-captures {
    gap: 1.2rem;
    perspective: none;
  }
  .md-typeset .cc-capture {
    flex-basis: 100%;
  }
  /* Outranks the nth-child rules above, which are one class more specific. */
  .md-typeset .cc-capture:nth-child(n) {
    margin-left: 0;
    transform: none;
  }
  /* The lift as a relative offset here: a transformed trigger would become
     the containing block of its fixed sheet below and pin it to the badge. */
  .cc-pop:hover, .cc-pop:focus-within {
    top: -2px;
    transform: none;
  }
  /* The popover as a sheet at the bottom of the viewport. */
  .md-typeset .cc-pop .cc-pop__panel {
    position: fixed;
    top: auto;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
    max-width: none;
    transform: none;
  }
  .md-typeset .cc-section h2 {
    font-size: 1.6rem;
  }
  .md-typeset .cc-hero .cc-hero__headline {
    font-size: 1.9rem;
  }
}