/* Cadence — plain CSS, no external fonts or CDNs.
   Palette matches the intro card / demo video so the page and the
   video read as one surface rather than a light page with a dark hole. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
    "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #e6eaf2;
  background: #0e1120;
}

a {
  color: #4ad4d4;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: #7fe6e6;
}

a:focus-visible {
  outline: 2px solid #4ad4d4;
  outline-offset: 2px;
}

.wrap {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

header.site-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #232a40;
  text-align: center;
}

header.site-header img.logo {
  width: 160px;
  height: auto;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

header.site-header h1 {
  margin: 0 0 0.9rem;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

header.site-header .tagline {
  margin: 0 auto;
  line-height: 1.7;
  max-width: 34rem;
  color: #96a0b6;
  font-size: 0.95rem;
}

nav.site-nav {
  margin-top: 0.85rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: 0.95rem;
}

nav.site-nav a {
  text-decoration: none;
  font-weight: 500;
}

nav.site-nav a:hover {
  text-decoration: underline;
}

main h2 {
  margin: 1.75rem 0 0.65rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

main p,
main li {
  color: #ccd3e0;
}

main p {
  margin: 0 0 0.85rem;
}

main ul {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}

main li {
  margin-bottom: 0.4rem;
}

.lead {
  font-size: 1.05rem;
  color: #dde3ee;
}

.card {
  background: #151a2c;
  border: 1px solid #232a40;
  border-radius: 8px;
  padding: 1.15rem 1.25rem;
  margin: 1rem 0 1.5rem;
}

.card h2 {
  margin-top: 0;
}

code,
.mono {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    monospace;
  font-size: 0.88em;
  background: #1c2236;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  word-break: break-word;
}

/* The clone command sits in a <pre>, which keeps its line unbroken by
   default and was pushing the whole page sideways on a phone. The box
   scrolls instead; the page never does. */
pre {
  background: #1c2236;
  border-radius: 6px;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  margin: 0 0 1rem;
}

pre code {
  background: none;
  padding: 0;
}

footer.site-footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid #232a40;
  font-size: 0.88rem;
  color: #8b95ab;
  text-align: center;
}

footer.site-footer p {
  margin: 0 0 0.4rem;
  color: inherit;
}

footer.site-footer a {
  color: #4ad4d4;
}

@media (max-width: 480px) {
  .wrap {
    padding: 1.15rem 1rem 2.5rem;
  }

  header.site-header h1 {
    font-size: 1.4rem;
  }
}

/* Secondary/aside text: "Last updated" lines and closing caveats. */
.meta {
  color: #8b95ab;
  font-size: 0.92em;
}

/* Demo video: matches the text column width and centres with it.
   No width/height attributes on the element — they would override this. */
/* The video is wider than the 42rem text column. Its wrapper spans the full
   viewport width so the video centres on the page rather than the column,
   while max-width keeps the page from ever scrolling sideways. */
.demo-wrap {
  /* Full-bleed via symmetric negative margins rather than `width:100vw`:
     100vw includes the scrollbar, so the old version overflowed by half a
     scrollbar each side and every page had a sideways scroll. The negative
     margins resolve against the centred column, so this also centres on the
     visible area rather than on viewport-plus-scrollbar. The +8px backs the
     bleed off by about a scrollbar's width — there is no CSS unit for
     "viewport minus scrollbar", and the wrapper's edges are invisible
     (its own padding is wider), so the trim cannot be seen. */
  margin-left: calc(50% - 50vw + 8px);
  margin-right: calc(50% - 50vw + 8px);
  margin-bottom: 0.6rem;
  padding: 0 1.25rem;
  display: flex;
  justify-content: center;
}

.demo {
  display: block;
  /* Width comes from .demo-frame, which also anchors the unmute button. */
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid #232a40;
  border-radius: 8px;
  background: #0b0f18;
}

/* Positioning context for the unmute button, sized to the video. */
.demo-frame {
  position: relative;
  width: 52rem;
  max-width: 100%;
  margin-bottom: 1.9rem;
}

.demo-frame .demo {
  width: 100%;
}

/* Floats over the top-right of the video until the sound is on. */
.demo-unmute {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: #0e1120;
  background: #4ad4d4;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.demo-unmute:hover {
  background: #7fe6e6;
}

.demo-unmute:focus-visible {
  outline: 2px solid #e6eaf2;
  outline-offset: 2px;
}

.demo-unmute[hidden] {
  display: none;
}

/* Header nav links are pill buttons, each prefixed with its own mark. The
   colours are all derived from currentColor, so this same block sits in every
   project stylesheet unchanged and picks up whatever palette the page has. */
nav.site-nav {
  gap: 0.5rem;
}

nav.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  line-height: 1.35;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
}

nav.site-nav a:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, currentColor 58%, transparent);
  background: color-mix(in srgb, currentColor 14%, transparent);
}

nav.site-nav a[aria-current="page"] {
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Marks keep their own size when the label wraps. GitHub's is the one icon
   that does not take the link colour: its mark is black on light backgrounds
   and near-white on dark ones, which is how GitHub asks for it to be shown. */
nav.site-nav .ico {
  flex: none;
}

nav.site-nav .ico-gh {
  color: #eef1f5;
}

/* The back button, top left of every page but the homepage. Like the nav
   pills above, its colours come from currentColor, so this same block works
   on every theme on the site. */
nav.backnav {
  padding: 1rem 0 0 1.25rem;
}

.backbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  line-height: 1.35;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  transition: border-color 0.15s, background 0.15s;
}

.backbtn:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, currentColor 58%, transparent);
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.backbtn svg {
  flex: none;
}

/* The nav is two rows: where the site goes, then the two policies, with the
   same line between them that the header draws under itself. */
.navrule {
  height: 0;
  width: min(22rem, 80%);
  margin: 0.9rem auto;
  border: 0;
  border-top: 1px solid #232a40;
}

/* The mark is a prefix to the title now, not a block standing under it.
   On its own it cost roughly 150px at the top of every page and pushed the
   first screenshot below the fold — costly on a site a reader gives a few
   minutes. Inline it identifies the project just as well. `1.5em` sizes it
   off the h1, so it tracks the heading at every breakpoint, and the h1
   wraps rather than squashing the mark on a narrow screen. */
header.site-header h1{display:flex;align-items:center;justify-content:center;
  gap:.5rem;flex-wrap:wrap}
header.site-header img.logo{width:1.5em;height:1.5em;object-fit:contain;
  margin:0;flex:none;border-radius:0}

/* ── Wide screens ────────────────────────────────────────────────────────────
   Everything on the page is sized in rem, so raising the root size scales the
   whole thing at once — type, spacing, column and screenshots together —
   rather than leaving 16px text stranded in the middle of a 27-inch monitor.

   The column is `min(92vw, …)`, so it takes nearly the whole window on a large
   display and screenshots grow with it. Prose does not grow all the way with
   it: a paragraph keeps a 44rem measure, because past about ninety characters
   a line is harder to read, not easier. Cards take the same 44rem so the page
   has two widths rather than three — one for reading, one for pictures. */
@media (min-width: 1280px) {
  html { font-size: 17px; }
  .wrap { max-width: min(92vw, 68rem); }
  main p, main ul, main ol { max-width: 44rem; margin-inline: auto; }
  .card, .notice { max-width: 44rem; margin-inline: auto; }
}
@media (min-width: 1800px) {
  html { font-size: 18px; }
  .wrap { max-width: min(92vw, 76rem); }
}
@media (min-width: 2400px) {
  html { font-size: 19px; }
  .wrap { max-width: min(92vw, 84rem); }
}