/* ==========================================================================
   PatreonPad - design system
   Layout / type / motion study rebuilt from scratch.
   ========================================================================== */

:root {
  --radius: 1rem;

  --background: oklch(98.5% 0.004 285);
  --foreground: oklch(16% 0.01 280);
  --ink: oklch(13% 0.012 285);
  --card: oklch(100% 0 0);
  --muted: oklch(96.5% 0.006 285);
  --muted-foreground: oklch(55% 0.018 285);
  --border: oklch(92% 0.008 285);

  /* Taken from the logo. --green keeps the old accent's lightness so it
     still passes contrast as text on a light page; --green-bright is the
     logo's own value, for fills and marks where nothing has to be read. */
  --green: oklch(53% 0.14 157);
  --green-bright: oklch(74% 0.16 156);
  --green-soft: oklch(88% 0.07 160);
  --green-deep: oklch(30% 0.045 183);
  --coral: oklch(72% 0.16 32);
  --sky: oklch(78% 0.11 240);

  --glass: oklch(100% 0 0 / 0.62);
  --glass-strong: oklch(100% 0 0 / 0.82);
  --hairline: oklch(20% 0.02 285 / 0.08);

  --shadow-soft: 0 1px 2px oklch(20% 0.02 285 / 0.04), 0 6px 16px oklch(30% 0.05 170 / 0.05);
  --shadow-lift: 0 2px 6px oklch(20% 0.02 285 / 0.05), 0 14px 32px oklch(30% 0.06 170 / 0.10);

  --atmosphere: linear-gradient(180deg, oklch(97.3% 0.006 245), oklch(99.5% 0.002 260) 58%, oklch(98.6% 0.003 250));

  /* decorative "developer surface" panels behind the hero */
  --dev-line: oklch(39% 0.018 255 / 0.14);
  --dev-text: oklch(31% 0.014 260);
  --dev-dim: oklch(52% 0.015 260);
  --dev-blue: oklch(54% 0.048 244);
  --dev-panel: oklch(99.5% 0.002 245 / 0.86);
  --dev-panel-shadow: 0 12px 34px oklch(28% 0.025 250 / 0.07), 0 2px 8px oklch(28% 0.025 250 / 0.04);

  --sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1152px;   /* max-w-6xl */
  --rail: 768px;     /* max-w-3xl */
  /* Kept at its original height although the bar it was named for is gone:
     the nav, the hero and every page head are positioned from it, and zeroing
     it would move the whole composition up by 32px. */
  --ca-bar: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------- reset -- */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--ink);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
ul { list-style: none; }

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

/* ------------------------------------------------------- page scaffold -- */

.atmosphere {
  position: relative;
  min-height: 100vh;
  background: var(--atmosphere);
}

/* soft green bloom that sits behind the hero */
.atmosphere::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 900px;
  pointer-events: none;
  background:
    radial-gradient(620px 380px at 50% 26%, oklch(74% 0.14 156 / 0.10), transparent 70%),
    radial-gradient(520px 320px at 16% 44%, oklch(78% 0.09 240 / 0.08), transparent 72%),
    radial-gradient(520px 320px at 86% 38%, oklch(82% 0.07 175 / 0.07), transparent 72%);
}

.shell {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 20px;
}

.rail { max-width: var(--rail); margin-inline: auto; }

main { position: relative; z-index: 10; }
.ca-bar__copy.is-done { color: oklch(84% 0.16 150); }

/* ----------------------------------------------------------- nav pill -- */

.nav {
  position: fixed;
  inset-inline: 0;
  top: calc(var(--ca-bar) + 12px);
  z-index: 60;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  pointer-events: none;
}

.nav__inner {
  pointer-events: auto;
  display: flex;
  width: 100%;
  max-width: var(--rail);
  align-items: center;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 9999px;
  background: var(--glass-strong);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.5s var(--ease), background-color 0.5s var(--ease);
}

.nav.is-stuck .nav__inner { box-shadow: var(--shadow-lift); }

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 8px 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* The logo is an irregular shape on transparency, so it needs no tile and
   no rounding of its own. */
.nav__mark { width: 20px; height: 20px; display: block; object-fit: contain; }

.nav__links {
  display: none;
  align-items: center;
  gap: 2px;
}

.nav__link {
  padding: 7px 12px;
  border-radius: 9999px;
  font-size: 13.5px;
  white-space: nowrap;
  color: oklch(13% 0.012 285 / 0.62);
  transition: color 0.18s, background-color 0.18s;
}

.nav__link:hover { color: var(--ink); background: oklch(20% 0.02 285 / 0.05); }
.nav__link[aria-current="page"] { color: var(--ink); background: oklch(20% 0.02 285 / 0.06); }

.nav__spacer { flex: 1; }

/* ----------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.2s, color 0.2s;
}

.btn:active { transform: scale(0.97); }

/* A control that cannot act yet says so by looking inert, rather than looking
   ready and doing nothing when pressed. */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { box-shadow: none; }
.btn:disabled:active,
.btn[aria-disabled="true"]:active { transform: none; }

.btn--sm { height: 36px; padding-inline: 16px; font-size: 13px; }
.btn--lg { height: 56px; padding-inline: 28px; font-size: 15px; }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: oklch(22% 0.015 285); box-shadow: var(--shadow-lift); }

.btn--glass {
  background: var(--glass);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.btn--glass:hover { background: oklch(100% 0 0 / 0.86); box-shadow: var(--shadow-lift); }

/* ------------------------------------------------------------ forms ---- */

/* The one text input style. Shares the card's hairline and radius language so
   it sits with .kv and .split rather than against them. */
.field {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: oklch(100% 0 0 / 0.7);
  transition: border-color 0.2s, box-shadow 0.25s var(--ease), background-color 0.2s;
}

.field::placeholder { color: oklch(13% 0.012 285 / 0.58); }

.field:hover { background: oklch(100% 0 0 / 0.82); }

.field:focus {
  outline: 0;
  border-color: var(--green-soft);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.field:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.form-row .field { flex: 1; min-width: 260px; }

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

.hero {
  position: relative;
  padding-top: 190px;
  padding-bottom: 72px;
  /* Bounds the floating panel layer. clip, not hidden, so this never becomes a
     scroll container. */
  overflow: clip;
}

.hero__inner {
  position: relative;
  z-index: 10;
  /* Wider than the 768px rail so the headline holds two lines. The sub-head
     and graph set their own narrower measures, so only the title uses it. */
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.hero__title {
  font-size: clamp(3.1rem, 6.4vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 500;
}

.hero__title span { display: block; }

.hero__sub {
  max-width: 576px;
  margin: 24px auto 0;
  font-size: 15px;
  line-height: 1.625;
  color: oklch(13% 0.012 285 / 0.58);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.hero__status {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  background: oklch(98.5% 0.004 285 / 0.7);
  font-family: var(--mono);
  font-size: 11px;
  color: oklch(13% 0.012 285 / 0.65);
}

.pulse-dot {
  position: relative;
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.35;
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* the small branch diagram + caption under the hero */
.hero__graph {
  position: relative;
  max-width: var(--rail);
  margin-top: 26px;
  margin-inline: auto;
  height: 92px;
}

.hero__graph svg {
  position: absolute;
  inset: 0;
  margin-inline: auto;
  width: min(453px, 100%);
  height: 92px;
  overflow: visible;
}

.hero__graph path,
.hero__graph line { stroke: var(--dev-line); stroke-width: 1; fill: none; }
.hero__graph circle { fill: var(--background); stroke: var(--dev-line); stroke-width: 1; }

.hero__graph-caption {
  position: absolute;
  inset-inline: 0;
  top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  color: oklch(13% 0.012 285 / 0.58);
}

.hero__graph-caption span { padding-inline: 12px; }

/* -------------------------------------------------- floating dev world -- */

.world {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* The panels are anchored at calc(50% - 782px), so the composition needs
     about 1600px to sit on canvas. Rather than crop it against the viewport
     edge or drop it, scale the whole layer down below that: every panel keeps
     its exact position relative to the hero column, just smaller.
     The clip lives on .hero, not here: scaling this element would shrink its
     own overflow box and cut the very panels the scale just brought inside. */
  transform: scale(var(--world-scale, 1));
  transform-origin: 50% 0;
}

.world__panel {
  position: absolute;
  border: 1px solid var(--dev-line);
  border-radius: 10px;
  background: var(--dev-panel);
  box-shadow: var(--dev-panel-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dev-text);
  opacity: 0.55;
  animation: drift 18s ease-in-out infinite;
  will-change: transform;
}
.world__panel--faint { opacity: 0.3; }

.world__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-bottom: 1px solid var(--dev-line);
  font-size: 10px;
  color: var(--dev-dim);
}

.world__dots { letter-spacing: 2px; color: var(--dev-line); }
.world__body { padding: 8px 10px; display: grid; gap: 5px; }

.world__row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  color: var(--dev-text);
}
.world__row--top { align-items: flex-start; }
.world__push { margin-left: auto; }
.world__body--roomy { padding: 12px 10px; }
.world__body--gap { gap: 12px; }
.world__body--pad { padding: 10px; }
.world__bar--foot { border-bottom: 0; border-top: 1px solid var(--dev-line); }
.world__status { margin-left: auto; width: 5px; height: 5px; border-radius: 50%; background: oklch(60% 0.2 150); }
.world__row svg { flex: none; color: var(--dev-dim); }
.world__dim { color: var(--dev-dim); }

.world__code { display: grid; gap: 3px; padding: 10px; }
.world__code-line { display: flex; gap: 10px; white-space: pre; }
.world__ln { color: var(--dev-line); width: 14px; flex: none; }

.world__kw { color: oklch(48% 0.16 300); }
.world__fn { color: var(--dev-blue); }

.world__caret {
  display: inline-block;
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

/* Positions are anchored to the centre line so the cluster keeps its
   relationship to the hero column as the viewport widens. */
.world__panel[data-slot="profile"]    { top: 73px;  left: calc(50% - 782px); width: 250px; animation-delay: -1s; }
.world__panel[data-slot="tiers"]    { top: 67px;  right: calc(50% - 772px); width: 310px; animation-delay: -5s; }
.world__panel[data-slot="posts"] { top: 431px; left: calc(50% - 774px); width: 285px; animation-delay: -9s; }
.world__panel[data-slot="community"]  { top: 438px; right: calc(50% - 760px); width: 260px; animation-delay: -3s; }
.world__panel[data-slot="events"]  { top: 37px;  left: calc(50% - 446px); width: 180px; animation-delay: -12s; }
.world__panel[data-slot="wallet"]    { top: 618px; right: calc(50% - 436px); width: 225px; animation-delay: -7s; }

.world__ghost {
  position: absolute;
  font-family: var(--mono);
  font-size: 11px;
  color: oklch(13% 0.012 285 / 0.58);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: drift 22s ease-in-out infinite;
}

.world__ghost[data-slot="verified"] { top: 382px; left: calc(50% - 568px); animation-delay: -4s; }
.world__ghost[data-slot="live"] { top: 343px; right: calc(50% - 558px); animation-delay: -11s; }/* Each step is the largest scale that still keeps the outermost panel, anchored
   782px from centre, clear of the viewport edge at the narrow end of its band:
   scale <= (50vw - 16px) / 782px. */
@media (max-width: 1599px) { .world { --world-scale: 0.97; } }@media (max-width: 1560px) { .world { --world-scale: 0.91; } }@media (max-width: 1460px) { .world { --world-scale: 0.84; } }@media (max-width: 1360px) { .world { --world-scale: 0.78; } }@media (max-width: 1260px) { .world { --world-scale: 0.73; } }@media (max-width: 1180px) { .world { --world-scale: 0.68; } }/* Below this the scaled panels would reach the hero column and the panel text
   stops being legible, so the hero stands on its own. */
@media (max-width: 1100px) { .world { display: none; } }

/* ----------------------------------------------------------- ticker ---- */

.ticker {
  position: relative;
  z-index: 10;
  overflow: hidden;
  padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: marquee 46s linear infinite;
}

.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  background: var(--glass);
  /* No drop shadow. These sit shoulder to shoulder in a scrolling row, so
     any diffuse shadow under one merges with its neighbours into a single
     grey band under the whole strip. The border and the glass background
     are what separate a chip from the page, and they are enough. */
  font-size: 13px;
  white-space: nowrap;
}

.ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); flex: none; }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

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

.section { padding-block: 96px; }
.section--tight { padding-block: 64px; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.section__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

/* Two measures, replacing the four one-off max-widths that were set inline. */
.section__title--measure { max-width: 520px; }
.section__title--wide { max-width: 620px; }
.section__title--sm { font-size: clamp(1.6rem, 3vw, 2.2rem); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--green);
  margin-bottom: 14px;
}

.lede {
  max-width: 560px;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.65;
  color: oklch(13% 0.012 285 / 0.58);
}

.page-head { padding-top: 190px; padding-bottom: 8px; }
.page-head__title { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -0.04em; }

/* ------------------------------------------------------ package cards -- */

.pkgs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.pkg {
  position: relative;
  min-width: 0; /* grid items default to min-width:auto and would overflow */
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: oklch(100% 0 0 / 0.5);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.pkg:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.repo {
  display: block;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--card);
}

.repo__top { display: flex; align-items: flex-start; gap: 12px; }

/* Letter avatar. The only thing the markup still sets is --h, the hue, because
   it is per-item data; everything else used to be repeated inline. */
.repo__avatar {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  object-fit: cover;
  font-size: 14px;
  font-weight: 500;
  background: var(--muted);
}

.repo__avatar[data-hue] {
  background: oklch(92% 0.06 var(--h));
  color: oklch(40% 0.14 var(--h));
}

.repo__id { min-width: 0; flex: 1; }

.repo__name { font-size: 14px; color: oklch(13% 0.012 285 / 0.62); }
.repo__name b { font-weight: 500; color: var(--ink); }

.repo__url {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: oklch(13% 0.012 285 / 0.58);
}

/* One line, ellipsised. Wrapping split the url mid-token and left the icon
   stranded on the first line, which made neighbouring cards uneven. */
.repo__url span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-tag {
  flex: none;
  padding: 4px 9px;
  border-radius: 9999px;
  background: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: oklch(13% 0.012 285 / 0.62);
}

.repo__desc {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: oklch(13% 0.012 285 / 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.repo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 12px;
  color: oklch(13% 0.012 285 / 0.58);
}

.repo__meta span { display: inline-flex; align-items: center; gap: 5px; }
.lang-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tag-archived { color: var(--coral); }

.repo__topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.topic {
  padding: 4px 10px;
  border-radius: 9999px;
  background: oklch(96% 0.02 158);
  font-size: 11px;
  color: oklch(45% 0.09 158);
}

/* package body */
.pkg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-inline: 2px;
}

.pkg__name { font-size: 26px; letter-spacing: -0.03em; }

.stats {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  margin-top: 14px;
  padding-inline: 2px;
}

.stat__label {
  font-size: 11px;
  color: oklch(13% 0.012 285 / 0.58);
  margin-bottom: 2px;
}

.stat__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.stat--right { text-align: right; justify-items: end; }
.stat--right .stat__value { font-variant-numeric: tabular-nums; }

.pkg__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-inline: 2px;
}

.pkg__ago { font-size: 12px; color: oklch(13% 0.012 285 / 0.58); }

.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.kv-grid > * { min-width: 0; }

.kv {
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: oklch(100% 0 0 / 0.6);
}

.kv__k { font-size: 11px; color: oklch(13% 0.012 285 / 0.58); }
.kv__v { margin-top: 3px; font-size: 15px; letter-spacing: -0.01em; }
.kv__v--mono {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------- lifecycle strip -- */

.lifecycle { position: relative; margin-top: 56px; }

.lifecycle__rail {
  display: block;
  width: 100%;
  height: 24px;
  margin-bottom: 28px;
  overflow: visible;
}

.lifecycle__track {
  stroke: var(--hairline);
  stroke-width: 1;
}

.lifecycle__path {
  stroke: var(--green);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.lifecycle__bead {
  fill: var(--green);
  filter: drop-shadow(0 2px 6px oklch(55% 0.14 157 / 0.45));
}

/* Hidden until the script has a position for it, so it never flashes at the
   far end of the rail on first paint. */
.motion-on .lifecycle__bead { opacity: 0; }

.lifecycle__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.lifecycle__step {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* The steps are not dimmed ahead of the bead.

   On a wide screen every step is on screen at once, so dimming the ones the
   rail has not reached leaves most of the section sitting at an opacity no
   one can read, for as long as the reader is looking at it. The rail is the
   motion here; the words are the content, and content does not wait its
   turn. They get a staggered entrance instead, once. */

.lifecycle__key {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

.lifecycle__name { margin-top: 10px; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }

.lifecycle__copy {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: oklch(13% 0.012 285 / 0.58);
}

/* ------------------------------------------------------------- fees ---- */

.cards-3 { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }

.card {
  padding: 26px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: oklch(100% 0 0 / 0.62);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.card__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: oklch(96% 0.03 158);
  color: var(--green);
  margin-bottom: 26px;
}

.card__title { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }

.card__copy {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: oklch(13% 0.012 285 / 0.58);
}

.split {
  margin-top: 24px;
  padding: 24px 26px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: oklch(100% 0 0 / 0.62);
  box-shadow: var(--shadow-soft);
}

.split--loose { margin-top: 40px; }

.split__label { font-size: 12.5px; color: oklch(13% 0.012 285 / 0.58); }

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

.steps { display: grid; gap: 20px; margin-top: 44px; }

.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: oklch(100% 0 0 / 0.6);
  box-shadow: var(--shadow-soft);
}

.step__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green);
}

.step__title { font-size: 19px; font-weight: 500; letter-spacing: -0.025em; }

.step__copy {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: oklch(13% 0.012 285 / 0.58);
}

.step__list { display: grid; gap: 8px; margin-top: 16px; }

.step__list li {
  display: flex;
  gap: 9px;
  font-size: 13px;
  color: oklch(13% 0.012 285 / 0.58);
}

.step__list li::before { content: "·"; color: var(--green-soft); flex: none; }

/* --------------------------------------------------------- treasury ---- */

.stat-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }

.stat-card {
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: oklch(100% 0 0 / 0.62);
  box-shadow: var(--shadow-soft);
}

.stat-card__k { font-size: 12.5px; color: oklch(13% 0.012 285 / 0.58); }

.stat-card__v {
  margin-top: 12px;
  font-size: 30px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.stat-card__n { margin-top: 10px; font-size: 12px; color: oklch(13% 0.012 285 / 0.58); }

.empty {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 72px 24px;
  border: 1px dashed var(--border);
  border-radius: 24px;
  text-align: center;
  background: oklch(100% 0 0 / 0.4);
}

.empty__title { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.empty__copy { max-width: 400px; font-size: 13.5px; line-height: 1.6; color: oklch(13% 0.012 285 / 0.58); }
.empty .btn { margin-top: 8px; }

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

.footer { position: relative; z-index: 10; padding-block: 36px 110px; }

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.footer__brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.footer__note { font-size: 13px; color: oklch(13% 0.012 285 / 0.58); }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: oklch(13% 0.012 285 / 0.58); }
.footer__links a:hover { color: var(--ink); }

/* ------------------------------------------------------ mobile tabbar -- */

.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--glass-strong);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-top: 1px solid var(--hairline);
}

.tabbar__link {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 12px;
  font-size: 10.5px;
  color: oklch(13% 0.012 285 / 0.58);
}

.tabbar__link[aria-current="page"] { color: var(--ink); }

/* ----------------------------------------------------------- reveal ---- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

[data-reveal].is-in { opacity: 1; transform: none; }/* ------------------------------------------------------- breakpoints --- */

@media (min-width: 640px) {
  .hero__cta { flex-direction: row; }
  .pkgs { grid-template-columns: 1fr 1fr; align-items: start; }
  /* staggered masonry feel: the right column is pushed down */
  .pkgs > .pkg:nth-child(even) { margin-top: 32px; }
  .hero__status { font-size: 12px; }
  .hero__sub { font-size: 16px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}@media (min-width: 768px) {
  .nav__links { display: flex; }
  .tabbar { display: none; }
  .footer { padding-bottom: 36px; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .lifecycle__steps { grid-template-columns: repeat(4, 1fr); }
  .step { grid-template-columns: 96px 1fr; gap: 28px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}@media (min-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   PatreonPad components
   Added in the conversion. Everything here reuses the existing tokens, radii
   and shadows rather than introducing a second visual language.
   ========================================================================== */

/* ------------------------------------------------ hero panel additions -- */

.world__avatar {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 6px;
  font-size: 10px;
  background: oklch(92% 0.06 265);
  color: oklch(40% 0.14 265);
}

.world__pip {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: oklch(74% 0.16 156);
}

.world__pip--two   { background: oklch(72% 0.14 240); }
.world__pip--three { background: oklch(72% 0.14 150); }

/* ------------------------------------------------------------- notice -- */

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  max-width: 720px;
  margin-bottom: 28px;
  padding: 14px 18px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: oklch(13% 0.012 285 / 0.58);
  background: oklch(100% 0 0 / 0.4);
}

.notice__tag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
  background: oklch(95% 0.03 158);
}

.creator .stats { margin-top: 20px; }


/* ----------------------------------------------------- verified badge -- */

.verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: oklch(45% 0.13 155);
  background: oklch(94% 0.05 155);
}

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

.panel {
  margin-top: 20px;
  padding: 26px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: oklch(100% 0 0 / 0.62);
  box-shadow: var(--shadow-soft);
}

.panel--quiet { background: oklch(100% 0 0 / 0.38); box-shadow: none; }

/* A step that cannot be started yet. Reads as inactive, not as broken. */
.panel--locked { background: oklch(100% 0 0 / 0.3); box-shadow: none; }
.panel--locked .panel__title { color: oklch(13% 0.012 285 / 0.58); }

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel__title { font-size: 19px; font-weight: 500; letter-spacing: -0.025em; }

/* When the title is not inside a .panel__head it has to carry its own gap. */
.panel > .panel__title { margin-bottom: 10px; }

.panel__copy {
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.65;
  color: oklch(13% 0.012 285 / 0.6);
}

.panel__note {
  max-width: 62ch;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: oklch(13% 0.012 285 / 0.58);
}

.panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.panel__hint { font-size: 12.5px; color: oklch(13% 0.012 285 / 0.58); }

.status-chip {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: oklch(13% 0.012 285 / 0.58);
  background: var(--muted);
}

/* ------------------------------------------------------ creator page --- */

.page-head--profile { padding-bottom: 0; }

.profile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  margin-top: 8px;
}

.profile__id { min-width: 0; flex: 1; }

.profile__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.035em;
}

.profile__handle {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: oklch(13% 0.012 285 / 0.58);
}

.profile__line { margin-top: 10px; font-size: 15px; color: oklch(13% 0.012 285 / 0.6); }

.profile__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.profile-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* ---------------------------------------------------------------- tiers -- */

.tiers { display: grid; gap: 8px; margin-top: 16px; }

.tier {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.5);
}

.tier__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: oklch(74% 0.16 156); }
.tier__name { font-size: 14px; }

/* ------------------------------------------------------------ helpers -- */

.kv-grid--stack { grid-template-columns: 1fr; }
.stat-card__v--sm { font-size: 20px; letter-spacing: -0.02em; }
.stat__value--sm { font-size: 15px; }
.nav__link--quiet { display: none; }

.footer__legal {
  max-width: 62ch;
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.6;
  color: oklch(13% 0.012 285 / 0.58);
}/* -------------------------------------------- conversion breakpoints --- */

@media (min-width: 640px) {
  .kv-grid--stack { grid-template-columns: 1fr 1fr; }
}@media (min-width: 768px) {
  .nav__link--quiet { display: inline-flex; }
  .profile-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .kv-grid--stack { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   Reconstruction: forms, states, motion scaffolding
   Added when the front end was wired to the real API. Every rule below reuses
   the tokens, radii and shadows already defined above.
   ========================================================================== */

/* ------------------------------------------------------------ skip link -- */

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 200;
  transform: translate(-50%, -200%);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible { transform: translate(-50%, 0); }

main:focus { outline: none; }

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

/* The split title. The mask is what the words rise out of; without the
   overflow it is just a slide. inline-block so each word keeps its own box. */
.is-split .line { display: block; }

.is-split .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* A hair of room so a descender is not clipped by its own mask. */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.is-split .word {
  display: inline-block;
  transform-origin: 0 100%;
  will-change: transform;
}

/* While the hero panels are being assembled the CSS drift loop is off, so
   GSAP's transform is the only one on the element. It is handed back as soon
   as the entrance finishes. */
.world--entering .world__panel,
.world--entering .world__ghost { animation: none !important; }

/* ------------------------------------------------------------- spinner -- */

.spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 0.7;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ skeleton -- */

.skeleton {
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    oklch(94% 0.004 285) 25%,
    oklch(97% 0.004 285) 37%,
    oklch(94% 0.004 285) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton--card { height: 290px; }
.skeleton--row { height: 76px; border-radius: 16px; }

.skeleton-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.skeleton-list { display: grid; gap: 14px; }

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* --------------------------------------------------------------- forms -- */

.form { display: grid; gap: 20px; margin-top: 22px; }

.form--inline {
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
}

.field-group { display: grid; gap: 7px; min-width: 0; }

.field-row { display: grid; grid-template-columns: 1fr; gap: 20px; }

.label {
  font-size: 12.5px;
  font-weight: 500;
  color: oklch(13% 0.012 285 / 0.62);
}

.field--area {
  height: auto;
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}

.field-prefixed {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: oklch(100% 0 0 / 0.7);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s var(--ease);
}

.field-prefixed:focus-within {
  border-color: var(--green-soft);
  box-shadow: var(--shadow-soft);
}

.field-prefix {
  flex: none;
  padding-inline: 16px 0;
  font-family: var(--mono);
  font-size: 13px;
  color: oklch(13% 0.012 285 / 0.58);
}

.field-prefixed .field {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 8px;
}

.field-prefixed .field:focus { box-shadow: none; }

.field-hint { font-size: 12px; color: oklch(13% 0.012 285 / 0.58); }

.field-error,
.form-error {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--coral);
}

.form-error {
  padding: 12px 16px;
  border: 1px solid oklch(72% 0.16 32 / 0.3);
  border-radius: 14px;
  background: oklch(97% 0.03 32);
}

.field[aria-invalid="true"] { border-color: var(--coral); }

.link {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link:hover { color: var(--ink); }

/* ---------------------------------------------------------- panel extras -- */

.panel--narrow { max-width: 460px; }
.panel__done { margin-top: 4px; }

.btn--danger {
  color: var(--coral);
  background: oklch(97% 0.03 32);
  box-shadow: none;
}

.btn--danger:hover { background: oklch(94% 0.05 32); box-shadow: none; }

/* -------------------------------------------------------------- wallets -- */

.wallets { display: grid; gap: 10px; margin-top: 18px; }

.wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.5);
}

.wallet__addr {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
}

.wallet__state,
.wallet__net {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: oklch(13% 0.012 285 / 0.58);
  background: var(--muted);
}

.challenge {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: oklch(13% 0.012 285 / 0.6);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ------------------------------------------------------------- empties -- */

.empty--wide { grid-column: 1 / -1; }

.empty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* -------------------------------------------------------------- toasts -- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  z-index: 90;
  display: grid;
  gap: 8px;
  transform: translateX(-50%);
  width: min(92vw, 420px);
  pointer-events: none;
}

.toast {
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 13.5px;
  color: var(--background);
  background: var(--ink);
  box-shadow: var(--shadow-lift);
  animation: toast-in 0.26s var(--ease);
}

.toast--error { background: oklch(44% 0.17 28); }
.toast--ok { background: oklch(36% 0.1 155); }
.toast.is-going { opacity: 0; transition: opacity 0.35s var(--ease); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------- reconstruction breaks -- */

@media (min-width: 640px) {
  .skeleton-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .toasts { bottom: 28px; }
}

/* Mobile keeps the toast clear of the tab bar, and the wallet row stacks
   rather than squeezing a monospace address into a sliver. */
@media (max-width: 520px) {
  .wallet { gap: 8px; }
  .wallet__addr { flex-basis: 100%; }
  .form--inline { grid-template-columns: 1fr; }
  .form--inline .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .spinner { animation-duration: 1.4s; }
  .toast { animation: none; }
}

/* The hidden attribute must win.

   The UA stylesheet sets [hidden] { display: none }, but any component rule
   with a display of its own beats it on specificity. That silently broke
   every JS-toggled state on the creator page: the "no creator" message, the
   verified badge and both follow buttons all rendered at once, on top of the
   creator who had in fact loaded. */
[hidden] { display: none !important; }

/* ==========================================================================
   Restored components
   These rules were lost when the stylesheet was forked for another product,
   which renamed or removed them. Every class below is referenced by the
   markup or by app.js, and each reuses the tokens defined at the top of this
   file rather than introducing anything new.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------- filter rail -- */

.filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.filters::-webkit-scrollbar { display: none; }

.filters__chip {
  flex: none;
  padding: 8px 15px;
  border-radius: 9999px;
  font-size: 13px;
  white-space: nowrap;
  color: oklch(13% 0.012 285 / 0.58);
  background: transparent;
  transition: background-color 0.2s, color 0.2s;
}

.filters__chip:hover { color: var(--ink); }
.filters__chip[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 500; }

.section__head--start { justify-content: flex-start; }

/* -------------------------------------------------------- creator cards -- */

.creators {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}

.creator {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--glass);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.creator:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.creator__top { display: flex; align-items: flex-start; gap: 12px; }
.creator__id { min-width: 0; flex: 1; }

.creator__name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator__handle {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: oklch(13% 0.012 285 / 0.58);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator__line {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: oklch(13% 0.012 285 / 0.62);
}

.creator__creating {
  margin-top: 14px;
  font-size: 13px;
  color: oklch(13% 0.012 285 / 0.58);
}

.creator__creating b { font-weight: 500; color: var(--ink); }

.creator__tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* The card's footer sits at the bottom whatever the card's height, so a row
   of cards lines its buttons up. */
.creator .market__foot { margin-top: auto; padding-top: 18px; }

/* --------------------------------------------------------- creator page -- */

.profile__avatar {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  flex: none;
  border-radius: 22px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  background: oklch(92% 0.06 var(--h, 265));
  color: oklch(40% 0.14 var(--h, 265));
}

.tier__meta {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: oklch(13% 0.012 285 / 0.58);
}

.tier__dot--two   { background: oklch(72% 0.14 240); }
.tier__dot--three { background: oklch(72% 0.14 150); }

/* -------------------------------------------------------------- scopes -- */

.scopes { display: grid; gap: 10px; margin-top: 18px; }

.scope {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.5);
}

.scope__name {
  flex: none;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--green);
}

.scope__why { font-size: 13px; color: oklch(13% 0.012 285 / 0.58); }

/* -------------------------------------------------------- restored grid -- */

@media (min-width: 640px) {
  .creators { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* The hidden attribute must win over any component display. Repeated here so
   it stays last in the cascade after these restorations. */
[hidden] { display: none !important; }

/* The mobile tab bar is fixed to the bottom, so the footer has to reserve the
   space it covers. The legal line added height inside the footer after that
   reserve was set, which pushed it under the bar. */
@media (max-width: 767px) {
  .footer { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Links, provenance and wallet states
   ========================================================================== */

/* --------------------------------------------------------- creator links -- */

.profile-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.profile-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 13px;
  color: oklch(13% 0.012 285 / 0.62);
  background: oklch(100% 0 0 / 0.5);
  transition: color 0.2s, background-color 0.2s, box-shadow 0.25s var(--ease);
}

.profile-link:hover {
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

/* The editor row. Label, address, remove: stacks on a phone rather than
   squeezing a url into a sliver. */
.link-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }

/* ----------------------------------------------------------- provenance -- */

/* Where a figure came from, under the figure. Deliberately quiet: it is
   context, not a claim competing with the number. */
.kv__src {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: oklch(13% 0.012 285 / 0.58);
}

/* -------------------------------------------------------- wallet states -- */

/* Connected and verified must never look the same. Verified is the only one
   that gets the affirmative colour. */
.wallet__state.is-verified {
  color: oklch(45% 0.13 155);
  background: oklch(94% 0.05 155);
}

@media (min-width: 640px) {
  .link-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: start; }
}

/* ------------------------------------------------- very narrow screens --- */

/* 320px is a real device width and the nav pill, its call to action and the
   tab bar all have to fit inside it. Nothing is hidden: the chrome just gets
   tighter rather than pushing the page sideways. */
@media (max-width: 360px) {
  .nav { padding-inline: 10px; }
  .nav__inner { gap: 2px; padding: 8px; }
  .nav__brand span { display: none; }
  .btn--sm { height: 34px; padding-inline: 12px; font-size: 12.5px; }
  .tabbar__link { font-size: 10px; }
  .tabbar__link svg { width: 16px; height: 16px; }
  .shell { padding-inline: 16px; }
  .panel { padding: 20px 18px; }
  .creator { padding: 18px; }
  .page-head__title { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* A long single word in a headline cannot be allowed to set the page width. */
.is-split .word { max-width: 100%; }
.page-head__title,
.section__title,
.hero__title { overflow-wrap: break-word; }

/* ==========================================================================
   The activity feed
   ========================================================================== */

.events { display: grid; gap: 10px; }

.event {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 14px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: oklch(100% 0 0 / 0.55);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.2s;
}

.event:hover {
  transform: translateY(-2px);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.event__tag {
  grid-row: 1;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: oklch(13% 0.012 285 / 0.58);
  background: var(--muted);
}

/* A page going live is the affirmative event; the others stay neutral so the
   feed is scannable rather than a wall of colour. */
.event__tag--live { color: oklch(45% 0.13 155); background: oklch(94% 0.05 155); }
.event__tag--follow { color: oklch(45% 0.12 158); background: oklch(95% 0.03 158); }

.event__line {
  grid-row: 1;
  font-size: 14.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event__when {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  color: oklch(13% 0.012 285 / 0.58);
}

.feed-more { display: flex; justify-content: center; margin-top: 22px; }
.feed-more--grid { grid-column: 1 / -1; }

@media (min-width: 640px) {
  /* Wide enough for the timestamp to sit on the same line. */
  .event { grid-template-columns: auto 1fr auto; }
  .event__when { grid-column: 3; grid-row: 1; }
}

/* ------------------------------------------------------------- sessions -- */

.sessions { display: grid; gap: 8px; margin-top: 16px; }

.session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.5);
}

.session__when { font-size: 13px; color: oklch(13% 0.012 285 / 0.58); }

.session__current {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  color: oklch(45% 0.13 155);
  background: oklch(94% 0.05 155);
}

/* ==========================================================================
   Creator headquarters: a still of the dashboard, drawn in markup
   ========================================================================== */

.hq { margin-top: 48px; }

.hq__frame {
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.hq__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hairline);
  background: oklch(100% 0 0 / 0.6);
}

.hq__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.hq__path {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: oklch(13% 0.012 285 / 0.58);
}

.hq__live {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: oklch(45% 0.13 155);
  background: oklch(94% 0.05 155);
}

.hq__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: 22px;
}

.hq__label {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: oklch(13% 0.012 285 / 0.58);
}

.hq__label:first-child { margin-top: 0; }

.hq__input {
  margin-top: 6px;
  padding: 11px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: oklch(100% 0 0 / 0.7);
  font-size: 14px;
}

.hq__input--mono { font-family: var(--mono); font-size: 12.5px; }
.hq__input--tall { line-height: 1.5; }

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

.hq__link {
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12.5px;
  background: oklch(100% 0 0 / 0.7);
}

/* The one element that reads as an affordance rather than a value. */
.hq__link--add {
  border-style: dashed;
  color: oklch(13% 0.012 285 / 0.58);
}

.hq__col--side { display: grid; gap: 12px; align-content: start; }

.hq__card {
  padding: 15px 16px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: oklch(100% 0 0 / 0.55);
}

.hq__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hq__card-title { font-size: 13.5px; font-weight: 500; }

.hq__pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  color: oklch(13% 0.012 285 / 0.58);
  background: var(--muted);
}

.hq__pill--ok { color: oklch(45% 0.13 155); background: oklch(94% 0.05 155); }

.hq__meta {
  margin-top: 5px;
  font-size: 12px;
  color: oklch(13% 0.012 285 / 0.58);
}

.hq__meta--mono { font-family: var(--mono); font-size: 11.5px; }

.hq__big {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 450;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.hq__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.hq__btn {
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 13px;
  background: oklch(100% 0 0 / 0.7);
}

.hq__btn--ink { border-color: transparent; color: #fff; background: var(--ink); }

@media (min-width: 880px) {
  .hq__body { grid-template-columns: 1.55fr 1fr; gap: 34px; padding: 28px; }
}

/* ------------------------------------------- the seven-stage chain ----- */

@media (min-width: 640px) {
  .lifecycle--long .lifecycle__steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .lifecycle--long .lifecycle__steps { grid-template-columns: repeat(4, 1fr); }
}

/* Six across only once there is genuinely room for six columns of prose. */
@media (min-width: 1440px) {
  .lifecycle--long .lifecycle__steps {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }
  .lifecycle--long .lifecycle__name { font-size: 15px; }
  .lifecycle--long .lifecycle__copy { font-size: 12.5px; }
}

/* ==========================================================================
   Motion support
   ========================================================================== */

/* The scrubbed statement needs room: its words start displaced and rotated,
   and a mask would clip the part of the movement that makes it read. */
[data-scrub-title] .word-mask { overflow: visible; }
[data-scrub-title] .word { transform-origin: 50% 50%; }

/* ---------------------------------------------- micro-interactions ------ */

/* Fast and tactile. Transitions rather than animations, so an interrupted
   hover reverses from wherever it got to instead of snapping. */
.btn,
.filters__chip,
.hq__btn,
.nav__link,
.footer__links a {
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.22s var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.nav__link { position: relative; }

/* An underline that grows from the side it was approached from would be
   cleverness nobody asked for. It grows from the middle. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  transition: left 0.22s var(--ease), right 0.22s var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after { left: 10px; right: 10px; }

/* The active page never animates its own indicator. */
.nav__link[aria-current="page"]::after { left: 10px; right: 10px; opacity: 0.25; }

.creator,
.event { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
                     background-color 0.2s var(--ease); }

.field { transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); }

/* Reduced motion: nothing moves, but state is still legible. Colour and
   border feedback stay, because removing them removes information. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .creator:hover,
  .event:hover { transform: none; }

  .nav__link::after { transition: none; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Preview bar
   ========================================================================== */

/* A preview is the real page with a bar on top. The bar is the only thing
   that distinguishes them, so it has to be unmissable without redecorating
   the page underneath it. */

.preview-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: #fff;
}

.preview-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 11px 24px;
}

.preview-bar__tag {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: oklch(92% 0.17 100);
}

.preview-bar__copy {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 13.5px;
  color: oklch(100% 0 0 / 0.88);
}

.preview-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* The glass button sits on near-black here, so it needs its own treatment
   rather than the one tuned for a near-white page. */
.preview-bar .btn--glass {
  color: #fff;
  border-color: oklch(100% 0 0 / 0.3);
  background: oklch(100% 0 0 / 0.1);
}

.preview-bar .btn--glass:hover { background: oklch(100% 0 0 / 0.18); }

.preview-bar .btn--ink {
  color: var(--ink);
  background: #fff;
  border-color: transparent;
}

.preview-bar .btn--ink:hover { background: oklch(96% 0 0); }

/* The floating nav would otherwise sit under the bar. */
.has-preview-bar .nav { top: 76px; }

@media (max-width: 560px) {
  .preview-bar__inner { padding: 10px 16px; }
  .preview-bar__copy { flex-basis: 100%; order: 3; }
  .preview-bar__actions { margin-left: 0; }
  .has-preview-bar .nav { top: 116px; }
}

/* ==========================================================================
   Signing in
   ========================================================================== */

.signin__methods { display: grid; gap: 14px; }

.signin__method { width: 100%; justify-content: center; }

/* A rule with the word sitting in it, rather than a word floating above a
   line. The pseudo-elements are the rule; the span is the gap. */
.signin__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 2px;
  font-size: 12.5px;
  color: oklch(13% 0.012 285 / 0.58);
}

.signin__or::before,
.signin__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* A six digit code is read back in pairs, so it is spaced and monospaced:
   proportional digits at this size are genuinely harder to check. */
.field--code {
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: 0.3em;
  text-align: center;
}

.signin__unavailable .panel__copy { margin-top: 0; }

@media (min-width: 560px) {
  .signin__method { width: auto; }
  .signin__methods { justify-items: start; }
}

/* ---------------------------------------------- sign-in micro-motion ---- */

/* The code form replaces the email form in place. Without a transition the
   swap reads as a glitch rather than as a step forward. */
.signin__methods,
[data-signin-email-form],
[data-signin-code-form] {
  transition: opacity 0.22s var(--ease);
}

/* A field being typed into gets a quiet border response, not a glow. */
.field--code { transition: border-color 0.16s var(--ease), letter-spacing 0.2s var(--ease); }
.field--code:focus-visible { letter-spacing: 0.34em; }

/* The wallet and email buttons are controls, so they press like the rest. */
.signin__method:active { transform: translateY(1px); }

/* ------------------------------------------------------------- launch --- */

/* Borrowed from the wallet list on purpose: a launch is the same kind of
   object, a few facts about a thing on a chain, and it should not arrive in
   its own visual language. */

.checklist {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.5);
  font-size: 13px;
  color: oklch(13% 0.012 285 / 0.72);
}

/* A tick or a dash, never a cross: nothing here has gone wrong, it is simply
   not done yet. */
.checklist__mark {
  flex: none;
  width: 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: oklch(13% 0.012 285 / 0.4);
}

.checklist__item.is-done { color: var(--ink); }
.checklist__item.is-done .checklist__mark { color: var(--green); }

.review,
.launched { margin-top: 18px; }

.review__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.5);
  font-size: 13px;
}

.review__list dt {
  color: oklch(13% 0.012 285 / 0.58);
}

.review__list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}

@media (max-width: 560px) {
  .review__list { grid-template-columns: 1fr; gap: 2px 0; }
  .review__list dd { margin-bottom: 8px; }
}