/* ==========================================================================
   TikTok Banner — site styles
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `hidden` is the fallback for older engines; `clip` does the same clipping
     without turning body into a scroll container, which is what used to make
     position:sticky unreliable inside it on iOS. */
  overflow-x: hidden;
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px 420px at 8% -6%, rgba(70, 219, 214, 0.14), transparent 64%),
    radial-gradient(640px 380px at 96% 2%, rgba(255, 106, 134, 0.11), transparent 66%),
    radial-gradient(900px 520px at 50% 42%, rgba(167, 139, 250, 0.07), transparent 70%);
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

a {
  color: var(--cyan);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: #8ef0ec;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

::selection {
  background: rgba(70, 219, 214, 0.28);
  color: #fff;
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--cyan);
  color: var(--cyan-ink);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: 999px;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 14px;
  color: var(--cyan-ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 15, 22, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s var(--ease);
}

/* set by script the moment the page scrolls, so the bar reads as a separate
   surface instead of a band of identical dark */
.site-header.is-stuck {
  box-shadow: 0 14px 30px -22px #000;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  flex-wrap: wrap;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  /* the wordmark must not be the element that gives way when the header is
     tight: a shrunken brand wrapped its subtitle onto two lines */
  flex: 0 0 auto;
}

.brand:hover {
  color: var(--text);
}

.brand__glyph {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(150deg, #16202b, #0d141c);
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 20px -12px rgba(70, 219, 214, 0.7);
  flex: none;
}

.brand__text {
  display: grid;
  line-height: 1.15;
}

.brand__name {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.brand__sub {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.nav a[aria-current="page"],
.nav a[aria-current="true"] {
  color: var(--cyan);
  background: var(--cyan-soft);
}

/* The review date used to be absolutely centred, which was fine while the nav
   was five one-word homepage anchors. With four real page names the nav grew
   into that space, so the date now sits in the flow, immediately left of the
   nav, and only appears once there is room for brand + date + nav. */
.header-meta {
  display: none;
}

@media (min-width: 1200px) {
  .header-meta {
    display: block;
    margin-left: auto;
    margin-right: 12px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
  }
}

/* long label on wide screens, short label on phones — the sr-only tail in the
   markup keeps both the same name for a screen reader */
.nav__tight {
  display: none;
}

/* Above the breakpoint the row must not wrap at all: `.header-meta` carries a
   margin-left:auto, and an auto margin claims the whole free space before the
   nav is placed, which pushed a five-entry nav onto a second line even at
   1440px. Pinning the row to nowrap and letting the date shrink (it is the
   least important thing in the header) keeps brand and nav on one line. */
@media (min-width: 1121px) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .header-meta {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* the nav is the navigation: it never shrinks, so a tight row ellipses the
     date instead of breaking the labels onto a second line inside the row */
  .nav {
    flex: 0 0 auto;
  }
}

/* Five page names beside the wordmark need 890px of viewport (measured:
   256px of brand + 566px of nav + 2 gutters + the flex gap; at 890 there are
   36px spare). Below that the nav takes its own full-width row and switches to
   one-word labels, so the five entries stay on one line at 601px instead of
   wrapping 4 + 1. */
@media (max-width: 1120px) {
  /* Once the bar is pinned it is paid for on every screen of the article, so
     the 18px flex gap between the brand row and the nav row is dropped and the
     container padding trimmed: the bar measures 95px instead of 118px. */
  .site-header__inner {
    row-gap: 0;
    padding-block: 8px;
  }

  .nav {
    flex-basis: 100%;
    gap: 0;
    justify-content: space-between;
    margin-top: 4px;
    border-top: 1px solid var(--line);
  }

  .nav__wide {
    display: none;
  }

  .nav__tight {
    display: inline;
  }

  .nav a {
    min-height: 40px;
    padding: 0 4px;
    font-size: 0.84rem;
  }
}

@media (max-width: 600px) {
  .site-header__inner {
    min-height: 0;
    gap: 0;
    padding-block: 3px;
  }

  .brand__sub {
    display: none;
  }

  .brand__glyph {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  /* The bar used to scroll away on phones (position: static). That left a
     13,000px article with no way to reach another page except a flick back to
     the top, so the two rows now stay pinned. They are tightened to 84px so the
     bar costs about a tenth of an 812px screen rather than more: the brand row
     drops to the glyph's height and the nav keeps its 40px tap targets. */
  .site-header {
    position: sticky;
    top: 0;
  }

  .nav {
    margin-top: 0;
  }

  .nav a {
    min-height: 40px;
  }

  /* One line on a phone: three stacked eyebrow lines pushed the headline and
     the short answer below the fold. The first label carries the meaning. */
  .hero .eyebrow {
    display: inline-flex;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .hero .eyebrow span:nth-child(n + 2) {
    display: none;
  }

  .hero .eyebrow::before {
    display: none;
  }
}

/* ---------- back to top ---------- */

/* Built by main.js, never in the markup: with scripting off there is no dead
   control, and all ten pages get the same button from one place. It sits in the
   bottom corner the consent card uses, so when a measurement ID is configured
   and that card is on screen the button steps above it instead of burying it. */
.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(142, 163, 186, 0.42);
  border-radius: 50%;
  background: rgba(18, 24, 34, 0.95);
  color: var(--text);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -14px #000,
    0 0 0 1px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
    visibility 0.2s linear, border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  color: var(--cyan);
  border-color: rgba(70, 219, 214, 0.55);
}

.to-top:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.to-top svg {
  display: block;
  width: 20px;
  height: 20px;
}

body:has(#bs-analytics-consent) .to-top {
  bottom: 150px;
}

@media (min-width: 1025px) {
  .to-top {
    right: 24px;
    bottom: 24px;
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transform: none;
    transition: opacity 0.01s linear, visibility 0.01s linear;
  }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(34px, 6vw, 76px) clamp(40px, 6vw, 84px);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(700px 420px at 60% 10%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(700px 420px at 60% 10%, #000 10%, transparent 78%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(30px, 4vw, 48px);
  align-items: start;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    /* headline + answer beside the artwork, then one full-width row of actions */
    grid-template-areas:
      "copy art"
      "tasks tasks"
      "note note";
    align-items: center;
    gap: 30px 52px;
  }

  .hero__copy {
    grid-area: copy;
  }

  .hero__art {
    grid-area: art;
  }

  .tasks {
    grid-area: tasks;
    margin-top: 0;
  }

  .hero__note {
    grid-area: note;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-soft);
}

.hero h1 {
  font-size: clamp(2rem, 5.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 800;
  max-width: 20ch;
}

.h1-accent {
  color: var(--cyan);
  white-space: nowrap;
}

/* ---------- short answer ---------- */

.answer {
  margin-top: 22px;
  padding: 16px 18px 17px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  background: linear-gradient(150deg, rgba(70, 219, 214, 0.08), rgba(255, 255, 255, 0.014) 62%);
}

.answer__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}

.answer__list {
  display: grid;
  gap: 9px;
}

.answer__list li {
  position: relative;
  padding-left: 17px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

.answer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.55;
}

.answer__list b {
  color: var(--text);
  font-weight: 600;
}

.answer__list i {
  font-style: normal;
  color: var(--text);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.28);
}

.hero__lead {
  margin-top: 20px;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 56ch;
}

.hero__lead strong {
  color: var(--text);
  font-weight: 600;
}

.hero__caveat {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--line-strong);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--faint);
  max-width: 58ch;
}

/* task cards */

.tasks {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .tasks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.task {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 116px;
  padding: 16px 16px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease),
    background 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.task::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.75;
}

.task:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: var(--shadow-lift);
  color: var(--text);
}

.task__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  flex: none;
}

.task__label {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  display: block;
  padding-right: 16px;
}

@media (min-width: 560px) {
  .task__label {
    /* reserve two lines so the three descriptions start on the same baseline */
    min-height: 2.56em;
  }
}

.task__arrow {
  position: absolute;
  top: 16px;
  right: 15px;
  color: var(--accent);
  opacity: 0.55;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.task:hover .task__arrow {
  transform: translate(2px, -2px);
  opacity: 1;
}

.task__text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
}

.task--add {
  --accent: var(--cyan);
}

.task--fix {
  --accent: var(--coral);
}

.task--make {
  --accent: var(--violet);
}

.hero__note {
  margin-top: -12px;
  font-size: 0.79rem;
  color: var(--faint);
}

/* hero art */

.hero__art {
  position: relative;
}

.asset {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #101821, #0b1118 60%);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.asset > svg,
.asset > img {
  display: block;
  width: 100%;
  height: auto;
}

.asset__cap {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--faint);
  background: rgba(0, 0, 0, 0.18);
}

.asset--portrait {
  max-width: 360px;
  margin-inline: auto;
}

.asset__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
}

.tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.tag--cyan {
  color: var(--cyan);
}

.tag--coral {
  color: var(--coral);
}

.tag--violet {
  color: var(--violet);
}

/* ---------- section primitives ---------- */

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section--tight {
  padding-block: clamp(40px, 6vw, 72px);
}

.section__head {
  max-width: 62ch;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.kicker span {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--cyan);
  letter-spacing: 0.04em;
}

.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
  max-width: 120px;
}

.section h2 {
  font-size: clamp(1.5rem, 3.1vw, 2.1rem);
  letter-spacing: -0.028em;
}

.section__lead {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.62;
  max-width: 62ch;
}

.figcaption {
  margin-top: 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--faint);
  max-width: 70ch;
}

.figcaption b {
  color: var(--muted);
  font-weight: 600;
}

.inline-link {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(70, 219, 214, 0.4);
}

.inline-link:hover {
  text-decoration-color: currentColor;
}

/* ---------- types ---------- */

.types {
  display: grid;
  gap: 14px;
  margin-top: clamp(26px, 4vw, 38px);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.type {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.type__viz {
  height: 168px;
  padding: 14px;
  border-radius: var(--r-sm);
  background: radial-gradient(120% 120% at 20% 0%, #1b2634, #0d141c 70%);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.type h3 {
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}

.type__rows {
  display: grid;
  gap: 9px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}

.type__rows div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
}

.type__rows dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 2px;
}

.type__rows dd {
  margin: 0;
}

.type__foot {
  margin-top: auto;
  padding-top: 4px;
}

.type__foot a {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.type__foot a:hover {
  text-decoration: underline;
}

/* mini schematics (pure CSS) */

.viz-phone {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0b1118;
  padding: 7px;
  display: grid;
  gap: 5px;
}

.viz-phone--header {
  grid-template-rows: 1.25fr 0.75fr;
  padding-bottom: 9px;
}

.viz-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-inline: 4px;
}

.viz-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0b1118;
  border: 1px solid rgba(255, 255, 255, 0.22);
  flex: none;
}

.viz-lines {
  display: grid;
  gap: 4px;
  flex: 1;
}

.viz-lines i {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.24);
  display: block;
}

.viz-lines i + i {
  width: 58%;
  opacity: 0.6;
}

.viz-band {
  border-radius: 5px;
  background: linear-gradient(115deg, #46dbd6, #5f8cff 46%, #ff6a86);
  opacity: 0.85;
}

.viz-band-2 {
  border-radius: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16) 0 22px,
    rgba(255, 255, 255, 0.05) 22px 26px
  );
}

.viz-phone--grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 6px;
}

.viz-tile {
  border-radius: 4px;
  background: linear-gradient(180deg, #ff9d68, #ff6a86 55%, #a78bfa);
  opacity: 0.9;
}

.viz-tile:nth-child(2) {
  background: linear-gradient(180deg, #46dbd6, #4aa8ff 60%, #5f6bff);
}

.viz-tile:nth-child(3) {
  background: linear-gradient(180deg, #a78bfa, #7b6cf6 60%, #46dbd6);
}

.viz-stick {
  position: relative;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 3;
}

.viz-stick span {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(2px);
}

.viz-stick span:nth-child(1) {
  width: 46%;
  height: 26%;
  left: 6%;
  top: 16%;
  transform: rotate(-8deg);
  background: rgba(70, 219, 214, 0.22);
  border-color: rgba(70, 219, 214, 0.45);
}

.viz-stick span:nth-child(2) {
  width: 38%;
  height: 22%;
  right: 6%;
  top: 30%;
  transform: rotate(9deg);
  background: rgba(255, 106, 134, 0.2);
  border-color: rgba(255, 106, 134, 0.45);
}

.viz-stick span:nth-child(3) {
  width: 54%;
  height: 20%;
  left: 16%;
  bottom: 12%;
  transform: rotate(-3deg);
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.45);
}

/* ---------- steps ---------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 18px;
  margin-top: clamp(24px, 4vw, 34px);
}

@media (min-width: 820px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.step {
  position: relative;
  padding-top: 42px;
}

.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cyan-ink);
  background: var(--cyan);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.step h3 {
  font-size: 0.96rem;
  margin-bottom: 8px;
}

.step p {
  font-size: 0.88rem;
  line-height: 1.58;
  color: var(--muted);
}

/* get section: vertical step list beside the abstract editor figure */
.get-grid {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  margin-top: clamp(24px, 4vw, 34px);
}

@media (min-width: 900px) {
  .get-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

.add-col {
  display: grid;
  gap: 20px;
  align-content: start;
}

.steps--stack {
  grid-template-columns: 1fr !important;
  gap: 20px;
}

/* small honesty note that also balances the tall figure beside it */
.side-note {
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--faint);
}

.side-note b {
  color: var(--muted);
  font-weight: 600;
}

.steps--stack .step {
  padding-top: 0;
  padding-left: 44px;
}

.steps--stack .step::before {
  top: 2px;
}

.steps--stack .step::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: -14px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
}

.steps--stack .step:last-child::after {
  display: none;
}

.get-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--faint);
}

/* ---------- flow ---------- */

.flow {
  margin-top: clamp(26px, 4vw, 38px);
}

.flow__root {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 106, 134, 0.4);
  background: var(--coral-soft);
  color: #ffd0d9;
  font-size: 0.86rem;
  font-weight: 600;
}

.flow__root::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

.flow__rail {
  height: 26px;
  width: 1px;
  margin-left: 26px;
  background: linear-gradient(180deg, rgba(255, 106, 134, 0.5), var(--line));
}

.flow__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 760px) {
  .flow__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.branch {
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* three labelled rows per case: cause, check, fallback */
.branch dl {
  display: grid;
  gap: 11px;
}

.branch__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.branch__id {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--coral);
  border: 1px solid rgba(255, 106, 134, 0.35);
  border-radius: 6px;
  padding: 1px 6px;
  flex: none;
}

.branch h3 {
  font-size: 0.96rem;
}

.branch__row {
  display: grid;
  gap: 3px;
}

.branch__row dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}

.branch__row dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.52;
  color: var(--muted);
}

.branch__next {
  /* keep every card's link on the same baseline when one case runs longer */
  margin-top: auto;
  padding-top: 2px;
  font-size: 0.84rem;
  font-weight: 600;
}

/* Connector: root pill -> centred trunk -> one rail across the two column
   centres -> one drop per branch. Only the first row gets a drop; a second row
   is a continuation of the same list, not a child of the row above it. */
@media (min-width: 760px) {
  .flow__root {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  .flow__rail {
    height: 22px;
    margin-inline: auto;
    background: linear-gradient(180deg, rgba(255, 106, 134, 0.5), rgba(255, 106, 134, 0.45));
  }

  .flow__grid {
    margin-top: 26px;
  }

  /* 25% ± half the column gap lands exactly on each column centre */
  .flow__grid::before {
    content: "";
    position: absolute;
    top: -13px;
    left: calc(25% - 3.5px);
    right: calc(25% - 3.5px);
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(255, 106, 134, 0.12),
      rgba(255, 106, 134, 0.45) 18%,
      rgba(255, 106, 134, 0.45) 82%,
      rgba(255, 106, 134, 0.12)
    );
  }

  .branch {
    position: relative;
  }

  .branch:nth-child(-n + 2)::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    width: 1px;
    height: 13px;
    transform: translateX(-50%);
    background: rgba(255, 106, 134, 0.45);
  }
}

.flow__note {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--faint);
}

.flow__note svg {
  flex: none;
  margin-top: 2px;
  color: var(--amber);
}

/* ---------- make / tiles ---------- */

.make-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(24px, 4vw, 36px);
}

@media (min-width: 900px) {
  .make-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.make-steps {
  display: grid;
  gap: 20px;
}

.make-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
}

.make-step__num {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--violet);
  padding-top: 2px;
}

.make-step h3 {
  font-size: 0.96rem;
  margin-bottom: 6px;
}

.make-step p {
  font-size: 0.88rem;
  line-height: 1.58;
  color: var(--muted);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
}

.tile {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
  background: #0d141c;
}

.tile svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* one artwork, three windows into it — a real "split" rather than three images */
.tile {
  background-image: url("/assets/img/canvas.svg");
  background-repeat: no-repeat;
  background-size: 300% 100%;
}

.tile:nth-child(1) {
  background-position: 0% 50%;
}

.tile:nth-child(2) {
  background-position: 50% 50%;
}

.tile:nth-child(3) {
  background-position: 100% 50%;
}

.tiles {
  padding: 12px;
  background: #0a0f16;
}

.tile__label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  background: rgba(6, 10, 15, 0.78);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 5px;
  padding: 2px 5px;
}

.order {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
}

.order__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.order__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--muted);
}

.order__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
}

.order__chip b {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--violet);
}

.order__arrow {
  color: var(--faint);
}

@media (max-width: 560px) {
  .order__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }

  .order__arrow {
    display: none;
  }

  .order__chip {
    width: 100%;
    justify-content: flex-start;
  }
}

.make-note {
  margin-top: 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--faint);
}

/* ---------- evidence ---------- */

.evidence {
  display: grid;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 34px);
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .evidence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ev {
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 10px;
  align-content: start;
  border-top: 2px solid var(--ev);
}

.ev--known {
  --ev: var(--green);
}

.ev--reported {
  --ev: var(--amber);
}

.ev--unknown {
  --ev: var(--faint);
}

.ev__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ev);
}

.ev__head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ev);
  display: inline-block;
}

.ev p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}

.ev p strong {
  color: var(--text);
  font-weight: 600;
}

.ev-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--faint);
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.stamp b {
  color: var(--text);
  font-weight: 600;
}

/* ---------- faq ---------- */

.qa {
  margin-top: clamp(22px, 4vw, 32px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.qa__group {
  padding: 12px 0 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.qa__group:first-child {
  padding-top: 14px;
}

.qa__item {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
  .qa__item {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
    gap: 28px;
    align-items: start;
  }
}

.qa h3 {
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.qa p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

.qa p a {
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(70, 219, 214, 0.35);
}

.qa p a:hover {
  border-bottom-color: currentColor;
}

/* ---------- guides ---------- */

.guides {
  display: grid;
  gap: 14px;
  margin-top: clamp(24px, 4vw, 36px);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .guides {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .guide {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .guide__title {
    /* two-line reservation keeps the three descriptions aligned */
    min-height: 2.6em;
  }

  .guide__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

.guide {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
    background 0.2s var(--ease);
  align-items: start;
}

.guide:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
  color: var(--text);
}

.guide__thumb {
  width: 96px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0d141c;
}

.guide__thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}

.guide__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide__title {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.guide__intent {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.guide__state {
  /* pins to the card foot so all three status labels share a baseline */
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.guide__state i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
}

.guide__state--live i {
  background: var(--green);
}

.next-up {
  margin-top: 22px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--faint);
}

.next-up b {
  color: var(--muted);
  font-weight: 600;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  padding-block: clamp(38px, 6vw, 64px) 28px;
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  gap: 30px;
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.85fr));
    gap: 40px;
  }
}

.footer-brand p {
  margin-top: 14px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--faint);
  max-width: 56ch;
}

.footer-col h2 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}

.footer-col ul {
  display: grid;
  gap: 2px;
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--cyan);
}

.footer-bottom {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--faint);
}

.footer-bottom p {
  max-width: 72ch;
}

.ext::after {
  content: "↗";
  font-size: 0.78em;
  margin-left: 3px;
  opacity: 0.7;
}

/* ---------- utility pages ---------- */

.page-head {
  padding-block: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}

.page-head h1 {
  font-size: clamp(1.8rem, 4.4vw, 2.7rem);
  letter-spacing: -0.03em;
}

.page-head p {
  margin-top: 14px;
  color: var(--muted);
  max-width: 64ch;
  font-size: 0.95rem;
}

.prose {
  padding-block: clamp(32px, 5vw, 56px) var(--section-y);
  max-width: 74ch;
}

.prose h2 {
  font-size: 1.24rem;
  margin-top: 34px;
  margin-bottom: 10px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.68;
  margin-bottom: 12px;
}

.prose ul {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.prose ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 0;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 1px;
  background: var(--cyan);
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.82rem;
}

.ledger caption {
  text-align: left;
  font-size: 0.76rem;
  color: var(--faint);
  padding-bottom: 10px;
}

.ledger th {
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.ledger td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
  line-height: 1.5;
}

.ledger td:first-child {
  font-family: var(--mono);
  color: var(--cyan);
  font-size: 0.76rem;
  white-space: nowrap;
}

.ledger a {
  color: var(--text);
  text-decoration-color: rgba(255, 255, 255, 0.25);
  word-break: break-word;
}

.ledger .lvl {
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 5px;
  color: var(--muted);
  white-space: nowrap;
}

/* Five columns need real width before they beat stacked rows: below ~980px the
   ledger reads as one card per entry instead of squeezing the source name into
   four characters a line. */
@media (max-width: 980px) {
  /* with the table flattened to blocks, the caption loses its table width and
     collapses into a one-word-per-line column */
  .ledger caption {
    display: block;
    width: 100%;
  }

  .ledger thead {
    display: none;
  }

  .ledger,
  .ledger tbody,
  .ledger tr,
  .ledger td {
    display: block;
    width: 100%;
  }

  .ledger tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .ledger td {
    border: 0;
    padding: 2px 0;
  }

  .ledger td:first-child {
    margin-bottom: 4px;
  }

  /* stacked rows lose the column headers, so the two prose cells say what they
     are; without this the supports and limits paragraphs read as one blob */
  .ledger td:nth-child(4)::before,
  .ledger td:nth-child(5)::before {
    display: block;
    margin-bottom: 2px;
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
  }

  .ledger td:nth-child(4)::before {
    content: "Supports";
  }

  .ledger td:nth-child(5)::before {
    content: "Cannot support";
  }
}

.callout {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  background: rgba(242, 183, 92, 0.06);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
}

.callout b {
  color: var(--text);
}

/* ---------- merge stub (/tiktok-banner-update/) ----------
   The page is noindex and awaiting a merge, so the first thing on it has to
   say where the answer went. One strip, no close button: a notice a reader can
   dismiss is a notice the next reader never sees. */
.merge-bar {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin: clamp(18px, 3vw, 28px) auto 0;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  border-radius: var(--r-sm);
  background: rgba(242, 183, 92, 0.06);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

.merge-bar b {
  color: var(--text);
}

.merge-bar a {
  color: var(--cyan);
}

/* ---------- single-action button for text pages ----------
   .btn only exists inside the maker (.maker .btn) and the gallery
   (.tg-page .btn); the article pages carry no button component at all. This is
   the smallest one that can hold an action in a table cell or under a stub
   page, and it deliberately does not reuse the class name those two scopes
   already define. */
.cut-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(70, 219, 214, 0.42);
  border-radius: 999px;
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.cut-btn:hover {
  border-color: var(--cyan);
  background: rgba(70, 219, 214, 0.18);
}

.cut-btn:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------- article page (TikTok Banner not showing) ---------- */

.post {
  padding-block: clamp(26px, 4vw, 46px) var(--section-y);
}

.post__head.wrap,
.post__body.wrap {
  max-width: 780px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.76rem;
  color: var(--faint);
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--cyan);
}

.post h1 {
  font-size: clamp(1.8rem, 4.6vw, 2.85rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.03em;
  max-width: 22ch;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.stamp--warn {
  border-color: rgba(242, 183, 92, 0.32);
  color: #f0d3a3;
}

.stamp--warn i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  display: inline-block;
  flex: none;
}

/* table of contents — after the answer, never before it */

.toc {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
}

.toc__title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.toc ol {
  counter-reset: toc;
  display: grid;
  gap: 1px;
  margin-top: 10px;
}

@media (min-width: 700px) {
  /* reading order must stay 01 → 05 → 06 → 10, so flow down the first column
     rather than across: a two-column grid reads 01, 03, 05 down the left. */
  .toc ol {
    display: block;
    columns: 2;
    column-gap: 26px;
  }

  .toc li {
    break-inside: avoid;
  }
}

.toc li {
  counter-increment: toc;
}

.toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--cyan);
  opacity: 0.75;
  flex: none;
}

.toc a:hover {
  color: var(--text);
}

/* body measure */

.post__body {
  margin-top: clamp(30px, 4vw, 44px);
}

.post__body > section + section {
  margin-top: clamp(34px, 5vw, 52px);
  padding-top: clamp(34px, 5vw, 52px);
  border-top: 1px solid var(--line);
}

.post__body h2 {
  font-size: clamp(1.32rem, 2.7vw, 1.78rem);
  line-height: 1.18;
  letter-spacing: -0.026em;
  max-width: 32ch;
}

.post__body h3 {
  margin-top: 28px;
  font-size: 1rem;
  letter-spacing: -0.012em;
}

.post__body p {
  margin-top: 14px;
  font-size: 0.97rem;
  line-height: 1.68;
  color: var(--muted);
}

.post__body b,
.post__body strong {
  color: var(--text);
  font-weight: 600;
}

.post__body i {
  font-style: normal;
  color: var(--text);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.26);
}

.post__aside {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 2px solid rgba(242, 183, 92, 0.55);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(242, 183, 92, 0.045);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

.post__foot {
  margin-top: 18px;
  font-size: 0.86rem;
  color: var(--faint);
}

/* dated evidence list */

.evlist {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.evlist > li {
  padding: 14px 16px;
  border-left: 2px solid var(--line-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255, 255, 255, 0.022);
}

.evlist p {
  margin-top: 0;
  font-size: 0.92rem;
  line-height: 1.62;
}

.evlist__note {
  margin-top: 8px;
  font-size: 0.77rem;
  line-height: 1.5;
  color: var(--faint);
}

/* see / do not see */

.split {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 700px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

.split__col {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--acc);
  border-radius: var(--r-md);
  background: var(--surface);
}

.split--yes {
  --acc: var(--cyan);
}

.split--no {
  --acc: var(--coral);
}

.split__label {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
}

.split__label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  flex: none;
  border: 0;
}

/* figure slots: named placeholders, never a drawn app screen */

.shot {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #101821, #0b1118 62%);
  box-shadow: var(--shadow-card);
}

.shot__frame {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  min-height: 210px;
  padding: 28px 22px;
  text-align: center;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.032) 0 1px,
    transparent 1px 13px
  );
}

.shot__id {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  border: 1px dashed rgba(242, 183, 92, 0.5);
  border-radius: 6px;
  padding: 3px 8px;
}

.shot__title {
  margin-top: 0;
  max-width: 42ch;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.shot__sub {
  margin-top: 0;
  max-width: 48ch;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--faint);
}

/* a published capture: the frame becomes a plain image plate, so the hatched
   placeholder styling (grid, min-height, guide text) must not leak through */
.shot__frame--img {
  display: block;
  min-height: 0;
  padding: 0;
  background-image: none;
}

.shot__img {
  display: block;
  width: 100%;
  height: auto;
  background: #0a0f16;
}

.shot__cap {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--faint);
  background: rgba(0, 0, 0, 0.18);
}

.shot__cap b {
  color: var(--muted);
  font-weight: 600;
}

.shots-pair {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 720px) {
  .shots-pair {
    grid-template-columns: 1fr 1fr;
    /* the two captures are different aspect ratios; stretching the shorter card
       to match leaves a large empty plate under its caption */
    align-items: start;
  }
}

.shot--half {
  margin-top: 0;
}

.shot--half .shot__frame {
  min-height: 168px;
}

.shots-note {
  font-size: 0.82rem;
  color: var(--faint);
}

/* click-to-load video */

.video {
  margin-top: 28px;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #101821, #0b1118 62%);
  box-shadow: var(--shadow-card);
}

@media (min-width: 720px) {
  .video {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.video__copy {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px 22px;
}

.video__label {
  margin-top: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}

.video__copy h3 {
  margin-top: 0;
  font-size: 1.02rem;
}

.video__copy p {
  margin-top: 0;
  font-size: 0.87rem;
  line-height: 1.6;
}

.video__meta {
  font-size: 0.77rem;
  color: var(--faint) !important;
}

.video__meta span {
  font-family: var(--mono);
  font-size: 0.74rem;
}

.video__links {
  margin-top: 4px;
}

.video__links a {
  font-size: 0.85rem;
  font-weight: 600;
}

.video__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  max-height: 420px;
  border-left: 1px solid var(--line);
  background: radial-gradient(120% 95% at 50% 0%, #17222f, #0a0f16 74%);
}

@media (max-width: 719px) {
  .video__stage {
    border-left: 0;
    border-top: 1px solid var(--line);
    /* a tall 4/5 slate leaves too much dead space under the copy on a phone */
    aspect-ratio: 3 / 2;
    max-height: 260px;
  }
}

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}

.video__play:hover {
  color: var(--text);
}

.video__play-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cyan);
  color: var(--cyan-ink);
  box-shadow: 0 12px 34px -14px rgba(70, 219, 214, 0.95);
  transition: transform 0.2s var(--ease);
}

.video__play:hover .video__play-icon {
  transform: scale(1.06);
}

.video__play-text {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.video__play-sub {
  max-width: 24ch;
  font-size: 0.73rem;
  line-height: 1.45;
  color: var(--faint);
}

/* The stage is a designed slate, not a player. There is no embed, so it must
   never read as a video that failed to load: the frame, the duration chip and
   the handle are always painted, before and after any click. */
.video__stage::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  pointer-events: none;
}

.video__chip {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0e1620;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.video__handle {
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--faint);
}

.video__cap {
  grid-column: 1 / -1;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--faint);
  background: rgba(0, 0, 0, 0.18);
}

/* numbered checklist */

.checklist {
  counter-reset: ck;
  display: grid;
  gap: 13px;
  margin-top: 16px;
}

.checklist > li {
  position: relative;
  padding-left: 33px;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--muted);
}

.checklist > li::before {
  counter-increment: ck;
  content: counter(ck);
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--cyan-ink);
  background: var(--cyan);
}

.checklist--plain > li {
  padding-left: 20px;
}

.checklist--plain > li::before {
  content: "";
  counter-increment: none;
  width: 8px;
  height: 1px;
  border-radius: 0;
  background: var(--cyan);
  top: 0.82em;
  left: 2px;
}

/* original stat strip */

.stats {
  margin-top: 26px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.stats__title {
  margin-top: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 640px) {
  .stats__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.stats__grid li {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
}

.stats__grid b {
  font-family: var(--mono);
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--cyan);
}

.stats__grid span {
  font-size: 0.71rem;
  line-height: 1.4;
  color: var(--faint);
}

.stats__cap {
  margin-top: 14px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--faint);
}

.stats__cap b {
  color: var(--muted);
  font-weight: 600;
}

/* risky-shortcut list */

.redflags {
  display: grid;
  gap: 11px;
  margin-top: 18px;
}

.redflags li {
  position: relative;
  padding-left: 24px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--muted);
}

.redflags li::before,
.redflags li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.63em;
  width: 12px;
  height: 1px;
  background: var(--coral);
  opacity: 0.85;
}

.redflags li::before {
  transform: rotate(45deg);
}

.redflags li::after {
  transform: rotate(-45deg);
}

/* four-layer comparison */

.mini-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.85rem;
}

.mini-table caption {
  padding-bottom: 10px;
  text-align: left;
  font-size: 0.76rem;
  color: var(--faint);
}

.mini-table th,
.mini-table td {
  padding: 11px 10px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}

.mini-table caption,
.mini-table thead th {
  font-weight: 700;
}

.mini-table thead th {
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
}

.mini-table tbody th {
  width: 30%;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
}

.mini-table td {
  color: var(--muted);
}

@media (max-width: 700px) {
  .mini-table thead {
    display: none;
  }

  .mini-table,
  .mini-table caption,
  .mini-table tbody,
  .mini-table tr,
  .mini-table th,
  .mini-table td {
    display: block;
    width: 100%;
  }

  .mini-table tr {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
  }

  .mini-table th,
  .mini-table td {
    padding: 2px 0;
    border: 0;
  }

  .mini-table tbody th {
    font-size: 0.9rem;
    margin-bottom: 4px;
  }

  .mini-table td::before {
    content: attr(data-label);
    display: block;
    margin-top: 6px;
    font-size: 0.63rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
  }
}

/* source list with limits attached */

.srclist {
  display: grid;
  gap: 11px;
  margin-top: 20px;
}

.srclist li {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.022);
}

.srclist__tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}

.srclist a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration-color: rgba(255, 255, 255, 0.24);
  word-break: break-word;
}

.srclist__date {
  font-size: 0.73rem;
  color: var(--faint);
}

.srclist__limit {
  margin-top: 3px;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--muted);
}

.post__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 20px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--faint);
}

.post__next p {
  margin-top: 0;
  font-size: 0.86rem;
  color: var(--faint);
}

/* keep the answer inside the first screen on a 375 × 812 phone */
@media (max-width: 540px) {
  .post {
    padding-top: 16px;
  }

  .crumbs {
    margin-bottom: 12px;
  }

  .post .eyebrow {
    margin-bottom: 12px;
  }

  .post__meta {
    margin-top: 14px;
  }

  .post .answer {
    margin-top: 16px;
  }

  .post__meta .stamp {
    padding: 4px 9px;
    font-size: 0.7rem;
  }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  body {
    background: #fff;
    color: #111;
  }

  .site-header,
  .site-footer,
  .to-top,
  .tasks {
    display: none;
  }
}

/* ==========================================================================
   V3 hub additions — path strip, brief fault cards, evidence chips, players
   ========================================================================== */

[hidden] {
  display: none !important;
}

/* hero entry 1: the "get" task uses the cyan accent, matching the
   background panel in IMG-01 */
.task--get {
  --accent: var(--cyan);
}

/* ---------- homepage: five-tap path strip ---------- */

.path {
  margin-top: clamp(22px, 3.6vw, 32px);
  padding: clamp(14px, 2.2vw, 20px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #101821, #0b1118 62%);
  box-shadow: var(--shadow-card);
}

.path__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: none;
}

@media (min-width: 780px) {
  .path__row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.path__step {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 12px 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.025);
}

.path__n {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--cyan);
}

.path__step b {
  font-size: 0.9rem;
  line-height: 1.3;
}

.path__note {
  font-size: 0.73rem;
  line-height: 1.4;
  color: var(--faint);
}

.path figcaption {
  margin-top: 14px;
}

/* ---------- homepage: four short fault cards ---------- */

.branch--brief {
  gap: 8px;
}

.branch__line {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
}

.branch__line b {
  color: var(--text);
  font-weight: 600;
}

.branch--brief .branch__next {
  margin-top: 2px;
}

/* ---------- evidence chips ---------- */

.ev-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}

.ev-chip--official {
  border-color: rgba(124, 227, 168, 0.45);
  background: rgba(124, 227, 168, 0.1);
  color: var(--green);
}

.ev-chip--report {
  border-color: rgba(242, 183, 92, 0.45);
  background: rgba(242, 183, 92, 0.1);
  color: var(--amber);
}

.ev-chip--unknown {
  border-color: rgba(170, 184, 196, 0.35);
  background: rgba(170, 184, 196, 0.08);
  color: var(--muted);
}

/* ---------- click-to-load player ---------- */

.player {
  margin-top: 27px;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #101821, #0b1118 62%);
  box-shadow: var(--shadow-card);
}

.player__grid {
  display: grid;
}

@media (min-width: 720px) {
  .player__grid {
    grid-template-columns: minmax(0, 1fr) 322px;
  }
}

.player__copy {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px 22px;
}

@media (min-width: 720px) {
  /* the stage is much taller than the copy; centring stops the left column
     from reading as a card with a large empty bottom half */
  .player__copy {
    align-content: center;
  }
}

.player__label {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}

.player__copy h3 {
  margin: 0;
  font-size: 1.02rem;
}

.player__copy p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.6;
}

.player__meta {
  font-size: 0.77rem !important;
  color: var(--faint);
}

.player__meta span {
  font-family: var(--mono);
  font-size: 0.74rem;
}

.player__links {
  margin-top: 2px !important;
}

.player__links a {
  font-size: 0.85rem;
  font-weight: 600;
}

.player__stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 440px;
  border-left: 1px solid var(--line);
  background: radial-gradient(120% 95% at 50% 0%, #17222f, #0a0f16 74%);
}

@media (max-width: 719px) {
  .player__stage {
    border-left: 0;
    border-top: 1px solid var(--line);
    aspect-ratio: 4 / 3;
    max-height: 300px;
  }
}

.player__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.player__poster svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* dark scrim so the play control and its label stay legible on top of the
   poster artwork — the poster is decorative, the control is the content */
.player__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 10, 15, 0.55), rgba(7, 10, 15, 0.82));
  pointer-events: none;
}

.player__cta {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}

.player__cta:hover {
  color: var(--text);
}

.player__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cyan);
  color: var(--cyan-ink);
  box-shadow: 0 12px 34px -14px rgba(70, 219, 214, 0.95);
  transition: transform 0.2s var(--ease);
}

.player__cta:hover .player__icon {
  transform: scale(1.06);
}

.player__play-text {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.player__play-sub {
  max-width: 26ch;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--faint);
}

/* once loaded, the slate becomes a real 9:16 player */
.player__stage--loaded {
  aspect-ratio: 9 / 16;
  max-height: none;
  height: min(68vh, 580px);
}

.player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.player__cap {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--faint);
  background: rgba(0, 0, 0, 0.18);
}

.player__cap b {
  color: var(--muted);
}

.player__fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  color: var(--faint);
  background: rgba(0, 0, 0, 0.26);
}

.player__fallback a {
  font-weight: 600;
}

.player--compact .player__stage {
  max-height: 380px;
}

@media (max-width: 719px) {
  .player--compact .player__stage {
    aspect-ratio: 16 / 10;
    max-height: 220px;
  }
}

/* ---------- two-up guide row ---------- */

@media (min-width: 760px) {
  .guides--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* outbound variant: the control opens the post elsewhere, so it must not
   read as "play here" — neutral ring instead of the cyan play disc */
.player__cta--out .player__icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}

.player__cta--out:hover .player__icon {
  background: rgba(255, 255, 255, 0.14);
}

/* ---------- make page: two-method comparison (2 columns, not 3) ---------- */

@media (min-width: 800px) {
  .types--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- homepage hub: in-page section nav ---------- */

.hub-toc {
  margin-top: -8px;
  margin-bottom: clamp(30px, 5vw, 44px);
}

.hub-toc .toc {
  margin-top: 0;
}

.hub-toc .toc ol {
  columns: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

@media (min-width: 700px) {
  .hub-toc .toc ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hub-toc .toc a[aria-current="true"] {
  color: var(--text);
}

.hub-toc .toc a[aria-current="true"]::before {
  opacity: 1;
}

.hub-toc .toc a {
  padding: 4px 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

/* ==========================================================================
   Sticky contents rail
   Long reads pin their contents list to the right edge of the layout, so the
   navigation stays clickable while the body scrolls. Below 1180px there is no
   room for a second column: the same list drops back into the flow between the
   short answer and the body, which keeps the reading order answer → contents →
   body at every width.
   ========================================================================== */

.post__rail {
  max-width: 780px;
  margin: clamp(22px, 3.4vw, 30px) auto 0;
  padding-inline: var(--gutter);
}

.post__rail .toc {
  margin-top: 0;
}

@media (min-width: 1180px) {
  .post--rail {
    display: grid;
    grid-template-columns: minmax(0, 780px) 244px;
    justify-content: center;
    column-gap: clamp(26px, 3vw, 48px);
    align-items: start;
  }

  /* head and body keep the 780px measure they had as standalone blocks */
  .post--rail > .post__head {
    grid-column: 1;
    grid-row: 1;
  }

  .post--rail > .post__body {
    grid-column: 1;
    grid-row: 2;
  }

  .post--rail > .post__rail {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: 96px;
    max-width: none;
    margin: 0;
    padding-inline: 0;
    max-height: calc(100vh - 128px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .post--rail .toc {
    padding: 14px 12px 16px;
  }

  .post--rail .toc ol {
    display: grid;
    columns: 1;
    gap: 0;
    margin-top: 8px;
  }

  .post--rail .toc a {
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .post--rail .toc a:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .post--rail .toc a[aria-current="true"] {
    color: var(--text);
    background: var(--cyan-soft);
  }

  .post--rail .toc a[aria-current="true"]::before {
    opacity: 1;
  }
}

/* ==========================================================================
   Sources appendix
   The ledger used to be a page of its own (/sources/). Nobody sets out to read
   a bibliography, so it is now the appendix of the guide above it: a closed
   <details> at the foot of the page, one line tall, no request to open it.
   The marker is drawn rather than inherited, because Safari's default triangle
   sits on a different baseline than Chrome's; the two never line up.
   ========================================================================== */

.sources {
  scroll-margin-top: 96px;
  border-top: 1px solid var(--line);
}

.sources__fold {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0 22px;
}

.sources__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 14px;
  align-items: baseline;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}

.sources__summary::-webkit-details-marker {
  display: none;
}

.sources__summary::marker {
  content: "";
}

.sources__label {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}

.sources__hint {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--faint);
}

/* the +/- is the only affordance, so it sits hard right and cannot be missed */
.sources__summary::after {
  content: "+";
  grid-column: 3;
  grid-row: 1;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--cyan);
}

.sources__fold[open] .sources__summary::after {
  content: "–";
}

.sources__summary:hover .sources__label,
.sources__summary:hover::after {
  color: var(--cyan);
}

.sources__summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 6px;
}

/* .prose caps a column at 74ch, which is right for the grading notes and wrong
   for a five-column ledger: it squeezed the table into a third of the panel.
   The panel takes the full width; the running text keeps its measure. */
.sources__body {
  max-width: none;
  padding-block: 0 26px;
}

.sources__body > h3,
.sources__body > p,
.sources__body > ul,
.sources__body > .callout {
  max-width: 76ch;
}

.sources__body h3 {
  margin-top: 26px;
}

.sources__table {
  overflow-x: auto;
}

/* auto layout gave the source name the least room of the five columns, so a
   domain like tiktokbanner.cloud broke mid-word. Fixed widths, and the name
   is allowed to stay whole. */
.sources .ledger th:nth-child(1) {
  width: 60px;
}

.sources .ledger th:nth-child(2) {
  width: 210px;
}

.sources .ledger th:nth-child(3) {
  width: 92px;
}

.sources .ledger a {
  word-break: normal;
  overflow-wrap: anywhere;
}

.sources tr.is-target td {
  background: var(--cyan-soft);
}

@media (max-width: 600px) {
  .sources__fold {
    padding: 0 16px;
  }

  .sources__summary {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .sources__hint {
    grid-column: 1;
    grid-row: 2;
  }

  .sources__summary::after {
    grid-column: 2;
  }
}

/* ==========================================================================
   Banner maker (/tiktok-banner-maker/)
   The tool is a page of this site, not a web app bolted onto it: same dark
   surfaces, same tokens, same restraint. Two columns from 1024px (stage on the
   left, controls on the right); one column below that, stage first, because the
   preview is the thing that answers "did I cut it right".
   ========================================================================== */

.tool-hero {
  padding-block: clamp(26px, 4.6vw, 52px) clamp(18px, 3vw, 28px);
  position: relative;
}

.tool-hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 24ch;
}

.tool-hero .answer {
  max-width: 70ch;
}

.tool-hero__note {
  margin-top: 18px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--faint);
  max-width: 72ch;
}

.tool-toc {
  padding-bottom: clamp(20px, 3vw, 32px);
}

.tool-toc .toc {
  margin-top: 0;
}

.tool-toc .toc ol {
  display: grid;
  columns: 1;
  grid-template-columns: 1fr;
  gap: 0 18px;
}

@media (min-width: 700px) {
  .tool-toc .toc ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tool-toc .toc a {
  padding: 4px 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Same marker as the sticky rail (.post--rail), because the list on this page
   is the same kind of list: a reader scrolling the tool needs to see where they
   are. The rail sets the pattern — text colour, soft cyan plate, lit counter —
   and this page reuses those three declarations rather than inventing a fourth
   marker language.
   The padding/margin pair is what makes the plate visible at all: the plate has
   to have air around the type, but shifting the type when the marker moves would
   make the list twitch as you scroll, so the extra inline padding is taken back
   with a matching negative margin. Net text position is unchanged, height is
   unchanged, and the 8px sits inside the list's own 18px padding — no overflow
   at 320px, where the list is a single full-width column. */
.tool-toc .toc a[aria-current="true"] {
  padding-inline: 8px;
  margin-inline: -8px;
  border-radius: 8px;
  color: var(--text);
  background: var(--cyan-soft);
}

.tool-toc .toc a[aria-current="true"]::before {
  opacity: 1;
}

/* ---------- tool shell ---------- */

.maker {
  margin-top: clamp(22px, 3.4vw, 32px);
}

.maker__grid {
  display: grid;
  gap: 18px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .maker__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.9fr);
    gap: 22px;
    align-items: start;
  }

  /* the panel is much taller than the stage; pinning the preview keeps the
     thing you are adjusting on screen while you scroll the controls */
  .maker__stage-col {
    position: sticky;
    top: 92px;
  }
}

.maker__stage-col,
.maker__panel-col {
  min-width: 0;
}

.maker__panel-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* ---------- the fallback (no JS) ---------- */

.maker__fallback {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  border-radius: var(--r-md);
  background: rgba(242, 183, 92, 0.06);
}

.maker__fallback h3 {
  font-size: 0.96rem;
}

.maker__fallback p {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 70ch;
}

/* ---------- preview tabs ---------- */

.maker__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.maker__tab {
  min-height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

.maker__tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.maker__tab[aria-selected="true"] {
  color: var(--cyan);
  background: var(--cyan-soft);
  border-color: rgba(70, 219, 214, 0.42);
}

/* ---------- the stage ---------- */

.maker__drop {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #0a0f16;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  touch-action: none;
  cursor: grab;
  transition: border-color 0.18s var(--ease);
}

.maker__drop:active {
  cursor: grabbing;
}

.maker__drop.is-over {
  border-color: rgba(70, 219, 214, 0.7);
}

.maker__drop:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.maker__canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.maker__profile-wrap {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #0a0f16;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.maker__hint {
  margin-top: 9px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--faint);
}

.maker__hint b {
  color: var(--muted);
  font-weight: 600;
}

/* ---------- control panel ---------- */

.maker__group {
  display: grid;
  gap: 8px;
  padding: 13px 15px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  min-width: 0;
}

.maker__group-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.maker__optional {
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}

.maker__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.maker__mono {
  font-family: var(--mono);
  font-size: 0.73rem;
  font-weight: 400;
  color: var(--cyan);
  white-space: nowrap;
}

.maker__row {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.maker__sub {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.maker__row--inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.maker__radio,
.maker__check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted);
  cursor: pointer;
}

.maker__radio:hover,
.maker__check:hover {
  color: var(--text);
}

.maker fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.maker legend {
  padding: 0;
  margin-bottom: 4px;
}

.maker input[type="radio"],
.maker input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex: none;
  accent-color: var(--cyan);
  margin: 0;
}

.maker input[type="range"] {
  width: 100%;
  min-width: 0;
  height: 26px;
  accent-color: var(--cyan);
  margin: 0;
}

.maker input[type="text"],
.maker select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
}

.maker input[type="text"]::placeholder {
  color: var(--faint);
}

.maker input[type="color"] {
  width: 46px;
  height: 32px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
  cursor: pointer;
}

/* ---------- file picker ----------
   A styled input[type="file"] is not one widget but several: Chrome paints its
   own button inside the field and labels it in the system language, so an
   English dark panel ends up with a light native control reading
   "选择文件 / 未选择任何文件". ::file-selector-button only reaches the inner
   button on some platforms and left the field's own colours alone, so the input
   is hidden from sight instead — .sr-only keeps it focusable, keeps its tab stop
   and keeps `change` firing, which is all the script ever used it for — and the
   visible control is a <label for> carrying the site's own .btn--primary. */

/* the tab stop lives on the hidden input, so the ring has to be drawn on the
   label standing in for it: a 1px clipped box cannot show an outline */
.maker__file:focus-visible + .maker__filebtn {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* the filename line: the native control used to carry this text, and it was the
   only place the reader could see which file the tool had actually taken */
.maker__filestate {
  margin-top: 7px;
  min-height: 1.4em;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--faint);
  overflow-wrap: anywhere;
}

.maker__filestate[data-tone="ok"] {
  color: var(--muted);
}

.maker__filestate[data-tone="error"] {
  color: var(--coral);
}

.maker__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.maker .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.maker .btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
}

.maker .btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.maker .btn--primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--cyan-ink);
}

.maker .btn--primary:hover:not(:disabled) {
  background: #6ce6e2;
  border-color: #6ce6e2;
  color: var(--cyan-ink);
}

.maker__status {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--muted);
}

/* the tool's own tables and lists borrow the article primitives, but the
   section wrapper is not a .post__body, so a couple of margins need setting */
#sizes .mini-table {
  margin-top: 22px;
}

/* two pixel sizes per row: wrapping "3240 x 1440 px" onto two lines reads as
   two separate numbers */
#sizes .mini-table td:nth-child(2),
#sizes .mini-table td:nth-child(3) {
  white-space: nowrap;
}

#sizes .post__aside,
#privacy .post__aside,
#order .post__aside {
  max-width: 74ch;
}

#privacy .checklist {
  margin-top: 20px;
  max-width: 74ch;
}

#privacy .checklist > li {
  font-size: 0.92rem;
  line-height: 1.62;
}

@media (max-width: 560px) {
  .maker__group {
    padding: 12px 13px 14px;
  }

  .maker .btn {
    width: 100%;
  }

  .maker__buttons {
    gap: 6px;
  }
}


.tool-hero { padding-bottom: 0; }
.tool-hero + #maker { padding-top: 1.5rem; }

/* On narrow screens, choose a photo before the preview and settings. */
@media (min-width: 1024px) {
  .maker__stage-col { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .maker__photo { grid-column: 2; grid-row: 1; }
  .maker__panel-col { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   Size page (/tiktok-banner-size/)
   Four things the page needs that the article layout did not have yet:
   a numeric spec strip, ratio cards, a to-scale canvas figure (inline SVG,
   styled from here) and a CSS-only crop lab. No JavaScript: the lab is four
   radio buttons, a general-sibling selector and a box-shadow doing the trim.
   ========================================================================== */

/* a fourth evidence level: a figure published for a platform surface, read
   through a third-party size guide. Distinct from "official" on purpose. */
.ev-chip--spec {
  border-color: rgba(70, 219, 214, 0.45);
  background: rgba(70, 219, 214, 0.1);
  color: var(--cyan);
}

/* ---------- the headline numbers ---------- */

.sheet {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.sheet__title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

@media (min-width: 520px) {
  .sheet__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .sheet__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.sheet__cell {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
}

.sheet__num {
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.5vw, 0.95rem);
  letter-spacing: -0.02em;
  color: var(--cyan);
  white-space: nowrap;
}

.sheet__num--amber {
  color: var(--amber);
}

.sheet__num--muted {
  color: var(--muted);
}

.sheet__cell span {
  font-size: 0.67rem;
  line-height: 1.35;
  color: var(--faint);
}

/* ---------- ratio cards: one rectangle per frame ---------- */

.frames {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

@media (min-width: 660px) {
  .frames {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* the caption belongs to the row, not to the first card */
.frames > .figcaption {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.frame-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #101821, #0b1118 64%);
}

.frame-card__viz {
  display: grid;
  place-items: center;
  /* one height for all three, so the three headings sit on one line even
     though a 4:1 header and a 3:4 tile are different shapes */
  height: 158px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #080d13;
}

/* one rectangle, drawn at the ratio it is arguing for.
   Height drives, width follows: a fixed width with a max-height would quietly
   turn a 3:4 tile into a landscape rectangle the moment the card narrowed. */
.frame {
  position: relative;
  height: var(--h, 132px);
  max-width: 100%;
  aspect-ratio: var(--ar, 3 / 4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate;
}

.frame__art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 88% at 16% 20%, var(--a1, rgba(70, 219, 214, 0.6)), transparent 62%),
    radial-gradient(68% 82% at 84% 16%, var(--a2, rgba(255, 106, 134, 0.46)), transparent 64%),
    radial-gradient(92% 88% at 52% 106%, var(--a3, rgba(167, 139, 250, 0.44)), transparent 70%),
    linear-gradient(150deg, #0d1620, #080d13);
}

.frame--wide {
  --a1: rgba(70, 219, 214, 0.58);
  --a2: rgba(255, 106, 134, 0.42);
  --a3: rgba(79, 156, 249, 0.42);
}

.frame--tile {
  --a1: rgba(255, 179, 122, 0.55);
  --a2: rgba(255, 106, 134, 0.5);
  --a3: rgba(167, 139, 250, 0.5);
}

/* the frame nobody can size: hatched, with the unknown edges marked */
.frame--unknown .frame__art {
  --a1: rgba(170, 184, 196, 0.2);
  --a2: rgba(170, 184, 196, 0.14);
  --a3: rgba(170, 184, 196, 0.12);
}

.frame--unknown::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.09) 0 1px,
    transparent 1px 7px
  );
}

/* the edges that may or may not survive, shown rather than promised */
.frame__trim {
  position: absolute;
  inset: 0 6%;
  border-left: 1px dashed rgba(255, 255, 255, 0.55);
  border-right: 1px dashed rgba(255, 255, 255, 0.55);
}

.frame__tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(6, 10, 15, 0.82);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: var(--text);
  z-index: 1;
}

.frame-card h3 {
  font-size: 0.9rem;
  line-height: 1.3;
}

.frame-card__rows {
  display: grid;
  gap: 5px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.frame-card__rows div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.frame-card__rows dt {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 2px;
  flex: none;
  min-width: 3.6em;
}

.frame-card__rows dd {
  flex: 1 1 8em;
  min-width: 0;
}

.frame-card__foot {
  font-size: 0.74rem;
  color: var(--faint);
}

.frame-card__foot a {
  color: var(--cyan);
  text-decoration: none;
}

.frame-card__foot a:hover {
  text-decoration: underline;
}

/* ---------- inline SVG figures ---------- */

.figure-svg {
  display: block;
  width: 100%;
  height: auto;
  background: #0a0f16;
}

.figure-svg text {
  font-family: var(--mono);
}

/* A 680-unit drawing rendered at 375 CSS px shrinks its labels to about half
   their designed size. Enlarging the type instead of the drawing keeps every
   label on screen — no horizontal scroll, no swipe to read a dimension. */
@media (max-width: 640px) {
  .figure-svg text {
    font-size: 15px;
  }

  .figure-svg text.text--small {
    font-size: 13px;
  }
}

/* ---------- the crop lab (CSS only) ---------- */

.crop-lab {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

/* the radios drive the picture; they stay focusable, not visible */
.crop-lab > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.crop-lab > label {
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.crop-lab > label:hover {
  color: var(--text);
}

.crop-lab > input:checked + label {
  border-color: transparent;
  background: var(--cyan);
  color: var(--cyan-ink);
}

.crop-lab > input:focus-visible + label {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.crop-stage {
  flex: 0 0 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 16px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #080d13;
}

.crop-source {
  position: relative;
  height: clamp(148px, 34vw, 200px);
  aspect-ratio: var(--src-ar, 9 / 16);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
}

.crop-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 44% at 50% 46%, rgba(255, 179, 122, 0.6), transparent 66%),
    radial-gradient(70% 50% at 18% 82%, rgba(70, 219, 214, 0.42), transparent 66%),
    radial-gradient(70% 50% at 84% 20%, rgba(255, 106, 134, 0.42), transparent 66%),
    linear-gradient(160deg, #12202b, #0a1118);
}

/* what sits near an edge, so the trim is visible rather than claimed */
.crop-art__band {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 11px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.34);
}

.crop-art__band--top {
  top: 7%;
}

.crop-art__band--bottom {
  bottom: 7%;
}

.crop-art__sub {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 52%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
}

/* the window a grid cell gives you: everything outside it is dimmed */
.crop-keep {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--kw, 100%);
  height: var(--kh, 75%);
  border: 1px dashed rgba(70, 219, 214, 0.9);
  border-radius: 3px;
  box-shadow: 0 0 0 999px rgba(6, 10, 15, 0.72);
}

.crop-keep b {
  position: absolute;
  left: 4px;
  top: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(6, 10, 15, 0.75);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--cyan);
}

.crop-stage__hint {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--faint);
  text-align: center;
}

#crop-916:checked ~ .crop-stage .crop-source {
  --src-ar: 9 / 16;
  --kw: 100%;
  --kh: 75%;
}

#crop-45:checked ~ .crop-stage .crop-source {
  --src-ar: 4 / 5;
  --kw: 93.75%;
  --kh: 100%;
}

#crop-11:checked ~ .crop-stage .crop-source {
  --src-ar: 1 / 1;
  --kw: 75%;
  --kh: 100%;
}

#crop-32:checked ~ .crop-stage .crop-source {
  --src-ar: 3 / 2;
  --kw: 50%;
  --kh: 100%;
}

#crop-34:checked ~ .crop-stage .crop-source {
  --src-ar: 3 / 4;
  --kw: 100%;
  --kh: 100%;
}

.crop-note {
  display: none;
  flex: 0 0 100%;
  font-size: 0.82rem;
  line-height: 1.58;
  color: var(--muted);
}

.crop-note b {
  color: var(--text);
}

.crop-note code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--cyan);
}

#crop-916:checked ~ .crop-note--916,
#crop-45:checked ~ .crop-note--45,
#crop-11:checked ~ .crop-note--11,
#crop-32:checked ~ .crop-note--32,
#crop-34:checked ~ .crop-note--34 {
  display: block;
}

/* the caption is the last row of the lab, under whichever note is showing */
.crop-lab > .figcaption {
  flex: 0 0 100%;
  margin-top: 2px;
}

/* ---------- the sizes around the banner ---------- */

.around {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
}

.around__item {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.around__frame {
  position: relative;
  height: 74px;
  aspect-ratio: var(--ar, 1 / 1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(70, 219, 214, 0.34), transparent 70%),
    linear-gradient(160deg, #13202b, #0a1118);
}

.around__frame--pink {
  background:
    radial-gradient(70% 70% at 70% 24%, rgba(255, 106, 134, 0.34), transparent 70%),
    linear-gradient(160deg, #1a1620, #0a1118);
}

.around__frame--violet {
  background:
    radial-gradient(70% 70% at 40% 70%, rgba(167, 139, 250, 0.34), transparent 70%),
    linear-gradient(160deg, #16162a, #0a1118);
}

/* a 9:16 cover, and the ~3:4 band the grid keeps of it */
.around__frame--crop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 12.5%;
  bottom: 12.5%;
  border-top: 1px dashed rgba(255, 255, 255, 0.5);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

.around__item span {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--faint);
  text-align: center;
}

/* ---------- narrow-screen adjustments ---------- */

@media (max-width: 560px) {
  .sheet {
    padding: 13px;
  }

  .crop-lab {
    padding: 13px;
  }

  .crop-lab > label {
    font-size: 0.7rem;
    padding: 5px 9px;
  }

  .around {
    gap: 9px 11px;
  }

  .around__frame {
    height: 62px;
  }
}

/* Inside the 780px article column a three-across card grid leaves each
   description about 80px of measure, which is not readable. The article keeps
   one card per row instead: same components, room for the sentence. */
.guides--rows {
  grid-template-columns: 1fr;
}

.guides--rows .guide__thumb {
  width: 96px;
  aspect-ratio: 4 / 3;
}

.guides--rows .guide__title {
  min-height: 0;
}

/* The guide brings the existing maker into the reading flow. */
.make-workspace {
  margin-top: clamp(32px, 5vw, 54px);
  margin-bottom: clamp(24px, 4vw, 40px);
  min-width: 0;
}
.make-workspace__intro {
  display: grid;
  gap: 20px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.make-workspace__intro h2 { margin: 10px 0; }
.make-workspace__intro p:not(.kicker) { max-width: 56ch; color: var(--muted); }
.make-workspace__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .8rem;
}
.make-workspace__steps b { margin-right: 5px; color: var(--cyan); font-family: var(--mono); }
@media (min-width: 1180px) {
  .post--rail > .make-workspace { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .post--rail > .post__body { grid-row: 3; }
  .post--rail > .post__rail { grid-row: 3; }
}

/* ==========================================================================
   Article index (/all/)
   The one page that has to hold every route, so it is a list of cards rather
   than prose: a reader lands here knowing they want a page, not an answer.
   ========================================================================== */

.lib-head {
  padding-block: clamp(26px, 4.6vw, 52px) clamp(14px, 2.4vw, 22px);
}

.lib-head .crumbs {
  margin-bottom: 16px;
}

.lib-head h1 {
  font-size: clamp(1.85rem, 4.4vw, 2.85rem);
  letter-spacing: -0.032em;
  line-height: 1.12;
  max-width: 22ch;
}

.lib-head__lead {
  margin-top: 18px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.62;
}

/* The evidence legend, carried from the article pages so a reader meets the
   four labels before the labels meet them. */
.lib-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 24px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--faint);
}

.lib-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.lib {
  display: grid;
  gap: 14px;
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .lib {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.lib > li {
  display: flex;
}

.lib-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  align-items: start;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.lib-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.lib-card:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.lib-card__thumb {
  display: block;
  width: 64px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #0d141c;
  overflow: hidden;
}

.lib-card__thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lib-card__body {
  display: block;
  min-width: 0;
}

.lib-card__q {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.lib-card__intent {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.48;
  color: var(--muted);
}

.lib-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.lib-chip {
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}

.lib-chip--new {
  color: var(--cyan-ink);
  background: var(--amber);
  border-color: transparent;
  font-weight: 700;
}

.lib-chip--tool {
  color: var(--cyan);
  background: var(--cyan-soft);
  border-color: rgba(70, 219, 214, 0.34);
}

/* the newest page gets a full-width card: same shape, more room for the
   only artwork on this page that is drawn to scale. The span has to sit on
   the list item — that is the grid child; the card is a flex child of it. */
.lib > .lib-item--wide {
  grid-column: 1 / -1;
}

.lib-card--wide {
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 18px;
}

.lib-card__thumb--wide {
  width: 100%;
  aspect-ratio: 320 / 120;
}

.lib-card--wide .lib-card__intent {
  max-width: 58ch;
}

.lib-note {
  margin-top: 22px;
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--muted);
}

.lib-note b {
  color: var(--text);
}

/* planned pages: honest dashes, no links */
.plan {
  display: grid;
  gap: 10px;
  margin: clamp(20px, 3vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}

.plan li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 13px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

.plan b {
  color: var(--text);
}

.plan__state {
  margin-left: auto;
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .lib-card--wide {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lib-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .lib-card__thumb {
    width: 52px;
  }

  .lib-card__q {
    font-size: 0.92rem;
  }

  .plan__state {
    margin-left: 0;
  }
}

/* Live profile and posting examples use the reader's current image. */
.maker__live-profile {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.maker__live-profile canvas {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 12px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.your-posts {
  margin: 24px 0;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.your-posts[hidden] { display: none; }
.your-posts__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.post__body .your-posts__head h3 { margin: 8px 0 0; }
.post__body .your-posts > p { margin: 12px 0 16px; }
.your-posts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.your-posts__grid > div { min-width: 0; display: grid; gap: 5px; font-size: .8rem; }
.your-posts__grid canvas { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.your-posts__grid span, .your-posts figcaption { color: var(--muted); font-size: .75rem; }
.your-posts figcaption { margin-top: 14px; }

/* Guide landing: one clear action before the editor is opened. */
.make-hero { width: 100%; }
.make-hero__grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.make-hero__copy h1 { max-width: 13ch; margin: 16px 0; }
.make-hero__copy > p:not(.eyebrow) { max-width: 55ch; color: var(--muted); font-size: 1.04rem; line-height: 1.7; }
.make-hero__example { max-width: 380px; margin-top: 28px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.make-hero__example-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .8rem; }
.make-hero__example-head small { display: block; margin-top: 2px; color: var(--muted); }
.make-hero__avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), #a870c7); }
.make-hero__example-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.make-hero__example-row span { height: 78px; background-image: radial-gradient(ellipse at 72% 35%, #f7ad88 0%, transparent 32%), linear-gradient(135deg, #157a81, #31436c 54%, #bd6385); background-size: 300% 100%; }
.make-hero__example-row span:nth-child(1) { background-position: left; }
.make-hero__example-row span:nth-child(2) { background-position: center; }
.make-hero__example-row span:nth-child(3) { background-position: right; }
.make-hero__caption { display: block; margin-top: 9px; color: var(--faint); font-size: .7rem; }
.make-upload { min-height: 390px; display: grid; place-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.make-upload__inner { width: 100%; min-height: 360px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 28px; border: 1px dashed rgba(70,219,214,.4); border-radius: var(--r-sm); }
.make-upload.is-dragging { border-color: var(--cyan); background: var(--cyan-soft); }
.make-upload__icon { display: flex; gap: 3px; margin-bottom: 22px; }
.make-upload__icon span { width: 15px; height: 32px; border: 1px solid var(--cyan); border-radius: 3px; background: var(--cyan-soft); }
.make-upload h2 { margin: 0 0 10px; font-size: 1.4rem; }
.make-upload__inner > p { margin: 0; color: var(--muted); font-size: .9rem; }
.make-upload__button { margin: 22px 0 14px; cursor: pointer; }
.make-upload__inner .make-upload__hint, .make-upload__inner .make-upload__privacy, .make-upload__inner .make-upload__status { font-size: .75rem; }
.make-upload__inner .make-upload__privacy { margin-top: 22px; color: var(--faint); }
.make-upload__inner .make-upload__status:not(:empty) { margin-top: 12px; color: var(--cyan); }
#guide-file:focus-visible + .make-upload__button { outline: 3px solid var(--cyan); outline-offset: 4px; }
.make-workspace[hidden] { display: none; }
.make-workspace { scroll-margin-top: 100px; }
@media (min-width: 760px) { .make-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1180px) {
  .post--rail > .make-hero { grid-column: 1 / -1; grid-row: 1; }
  .post--rail > .make-workspace { grid-row: 2; }
  .post--rail > .post__head { grid-column: 1; grid-row: 3; }
  .post--rail > .post__body { grid-column: 1; grid-row: 4; }
  .post--rail > .post__rail { grid-column: 2; grid-row: 3 / span 2; }
}
.make-hero + .make-workspace + .post__head { margin-top: clamp(42px, 6vw, 72px); }
.make-upload__button { display: inline-flex; justify-content: center; align-items: center; min-width: 190px; padding: 12px 24px; border: 1px solid var(--cyan); border-radius: 999px; background: var(--cyan); color: #071318; font-weight: 700; line-height: 1.2; }
.make-upload__button:hover { filter: brightness(1.08); }
/* The hero figure is the finished three-post row on a device frame this site
   drew itself; the frame is part of the artwork, so no card sits behind it. */
.make-hero__example--phone {
  width: 100%; max-width: 360px; margin: 0 auto;
  padding: 0; border: 0; background: transparent;
}
.make-hero__example--phone img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.5));
}
.make-hero__example--phone .make-hero__caption {
  margin: 14px 0 0; text-align: center; line-height: 1.5;
}

@media (max-width: 640px) {
  /* the eyebrow is two flex items, so on a narrow screen they sat beside each
     other and the separator floated between two ragged columns */
  .make-hero .eyebrow { display: block; position: relative; padding-left: 17px; line-height: 1.7; }
  .make-hero .eyebrow::before { position: absolute; left: 0; top: .6em; }
}


/* The upload sits under the title; the example gets its own column. */
.make-hero__grid { align-items: start; }
.make-hero__copy h1 { max-width: 18ch; font-size: clamp(2rem, 3.2vw, 2.9rem); margin: 12px 0; }
.make-hero__copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.55; }
.make-hero__copy .make-upload { margin-top: 24px; min-height: 0; }
.make-hero__copy .make-upload__inner { min-height: 245px; padding: 20px; }
.make-hero__copy .make-upload__icon { margin-bottom: 12px; }
.make-hero__copy .make-upload__button { margin: 14px 0 10px; }
.make-hero__copy .make-upload__privacy { margin-top: 12px; }

/* Both previews stay visible; all editing controls follow beneath them. */
.maker__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.maker__stage-col { position: static; display: grid; gap: 20px; min-width: 0; }
.maker__preview { min-width: 0; }
.maker__preview > .maker__group-title { margin-bottom: 12px; }
.maker__profile-wrap { max-width: 380px; }
@media (min-width: 760px) {
  .maker__stage-col { grid-template-columns: minmax(0, 1fr) minmax(240px, .56fr); align-items: start; }
}
@media (min-width: 1024px) {
  .maker__grid { grid-template-columns: minmax(0, 1fr); }
  .maker__stage-col, .maker__photo, .maker__panel-col { grid-column: 1; grid-row: auto; }
}

/* Keep the guide's editor focused on its most-used controls. */
.make-workspace .maker__photo [data-maker-sample],
.make-workspace .maker__photo > .maker__hint,
.make-workspace .maker__photo > p:has(a[href="#maker-export"]),
.make-workspace .maker__background-options,
.make-workspace .maker__guide-options,
.make-workspace .maker__text-options,
.make-workspace [data-maker-center],
.make-workspace .maker__framing > .maker__hint,
.make-workspace [data-maker-download-one],
.make-workspace [data-maker-download-full] { display: none; }
.make-workspace .maker__panel-col { display: contents; }
.make-workspace .maker__photo .maker__filebtn { width: auto; }
.make-workspace .maker__framing .maker__buttons,
.make-workspace .maker__export .maker__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.make-workspace .maker__framing .maker__buttons .btn,
.make-workspace .maker__export .maker__buttons .btn { width: 100%; }
.make-workspace .maker__export fieldset { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.make-workspace .maker__export fieldset legend { margin-bottom: 6px; }
@media (min-width: 760px) {
  .make-workspace .maker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .make-workspace .maker__stage-col { grid-column: 1 / -1; grid-row: 1; }
  .make-workspace .maker__photo { grid-column: 1; grid-row: 2; }
  .make-workspace .maker__framing { grid-column: 2; grid-row: 2; }
  .make-workspace .maker__export { grid-column: 1 / -1; }
  .make-workspace .maker__status { grid-column: 1 / -1; }
}
.make-workspace .maker__photo .maker__filebtn { justify-self: start; min-width: 160px; }
.make-workspace .maker__framing .maker__buttons,
.make-workspace .maker__export .maker__buttons { grid-template-columns: repeat(2, minmax(0, 200px)); }
.make-workspace .maker__export [data-maker-export-note] { display: none; }

/* Keep framing actions next to the banner they adjust. */
.maker__preview-controls { display: grid; gap: 10px; margin-top: 15px; }
.maker__preview-controls .maker__buttons { display: flex; flex-wrap: wrap; }
.maker__zoom-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.maker__zoom-presets .btn { min-width: 58px; }
.maker__zoom-presets .btn[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-soft); }
@media (max-width: 560px) {
  .maker__preview-controls .maker__buttons .btn,
  .maker__preview-controls .maker__zoom-presets .btn { width: auto; }
}

@media (min-width: 760px) {
  .make-workspace .maker__photo,
  .make-workspace .maker__framing { align-self: stretch; }
}

/* Optional GA4 consent, displayed only when a TTB measurement ID exists. */
#bs-analytics-consent {
  position: fixed; inset: auto 16px 16px auto; z-index: 1200;
  width: min(440px, calc(100vw - 32px)); padding: 18px 20px;
  border: 1px solid rgba(142, 163, 186, .4); border-radius: 12px;
  background: #141c29; color: #f5f8fd; box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  font-size: 14px; line-height: 1.5;
}
#bs-analytics-consent p { margin: 0 0 12px; }
#bs-analytics-consent a { color: #96e8e4; text-decoration: underline; }
#bs-analytics-consent .bs-consent-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
#bs-analytics-consent button {
  border: 1px solid #7593a9; border-radius: 8px; padding: 8px 12px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
#bs-analytics-consent button[data-consent="grant"] {
  border-color: #46dbd6; background: #46dbd6; color: #08121c; font-weight: 700;
}
#bs-analytics-consent button:focus-visible { outline: 3px solid #8db4ff; outline-offset: 2px; }


/* Latest published resource on the homepage: a direct path to the template library. */
.home-latest {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
  margin: 4px 0 28px;
  padding: clamp(18px, 3vw, 26px);
  background: linear-gradient(115deg, rgba(70,219,214,.075), rgba(167,139,250,.055)), var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
}
.home-latest__tag { color: var(--cyan); font-weight: 750; text-transform: uppercase; letter-spacing: .08em; font-size: .73rem; margin-bottom: 9px; }
.home-latest h3 { font-size: clamp(1.2rem,2vw,1.55rem); line-height: 1.22; margin: 0 0 9px; }
.home-latest h3 a { color: var(--text); text-decoration: none; }
.home-latest h3 a:hover { color: var(--cyan); }
.home-latest p { color: var(--muted); margin: 0 0 14px; font-size: .92rem; }
.home-latest__cta { color: var(--cyan); font-weight: 760; text-decoration: none; }
.home-latest__thumb { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #151b27; }
.home-latest__thumb img { width: 100%; height: auto; aspect-ratio: 9 / 4; display: block; object-fit: cover; }
@media (max-width: 600px) {
  .home-latest { grid-template-columns: 1fr; }
  .home-latest__thumb { order: -1; }
}

/* ==========================================================================
   BannerShape homepage modules (2026-11-12)
   Scope statement, tool grid, steps and the plain index list. Same tokens as
   the rest of the sheet; no new palette, no new font.
   ========================================================================== */

.section__note {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--line-strong);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--faint);
  max-width: 78ch;
}

/* ---------- which platforms are covered ---------- */

.platforms {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .platform--live {
    grid-column: 1 / -1;
  }
}

.platform {
  padding: 18px 20px 19px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}

.platform--live {
  border-color: color-mix(in srgb, var(--cyan) 32%, transparent);
  background: linear-gradient(150deg, rgba(70, 219, 214, 0.09), rgba(255, 255, 255, 0.014) 60%);
}

.platform--soon {
  background: rgba(255, 255, 255, 0.014);
}

.platform__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.platform__top h3 {
  font-size: 1.06rem;
  letter-spacing: -0.012em;
}

.platform__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
}

.platform--live .platform__state {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
}

.platform__state i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.platform p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

.platform__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.platform__links a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  padding-bottom: 1px;
}

.platform__links a:hover {
  color: var(--cyan);
}

/* ---------- tool cards ---------- */

.toolgrid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .toolgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

.toolcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: var(--shadow-card);
}

.toolcard__tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.toolcard h3 {
  font-size: 1.16rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.toolcard h3 a {
  color: var(--text);
  text-decoration: none;
}

.toolcard h3 a:hover {
  color: var(--cyan);
}

.toolcard p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}

.toolcard__list {
  display: grid;
  gap: 7px;
  margin: 2px 0 4px;
}

.toolcard__list li {
  position: relative;
  padding-left: 17px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--faint);
}

.toolcard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--cyan) 55%, transparent);
}

.toolcard__cta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cyan);
  text-decoration: none;
}

.toolcard__cta:hover {
  text-decoration: underline;
}

/* ---------- three steps ---------- */

.steps3 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .steps3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.steps3__item {
  position: relative;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
}

.steps3__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 10px;
}

.steps3__item h3 {
  font-size: 1rem;
  margin-bottom: 9px;
}

.steps3__item p {
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--muted);
}

.cta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
}

.cta-strip > span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  margin-right: 4px;
}

/* ---------- plain index list ---------- */

.index-list {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
}

.index-list li {
  border-bottom: 1px solid var(--line);
}

.index-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 14px 2px;
  text-decoration: none;
  transition: background 0.18s var(--ease), padding-left 0.18s var(--ease);
}

@media (min-width: 700px) {
  .index-list a {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    align-items: baseline;
    gap: 24px;
  }
}

.index-list a:hover {
  background: rgba(255, 255, 255, 0.025);
  padding-left: 10px;
}

.index-list b {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.index-list a:hover b {
  color: var(--cyan);
}

.index-list span {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--faint);
}