/* poppukon.net — the app page. Colours, spacing, radii and faces are the app's
   tokens (tokens.css, generated from tokens.dart); the show cards and buttons
   keep the numbers of the app widgets they reproduce (AnimeCard, SharpButton).
   The brand law holds: sharp corners (2px at most), cream ink, red never. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-body), system-ui, sans-serif;
  font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.ic { width: 24px; height: 24px; flex: none; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-xxl); }

/* ---- type ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.eyebrow-ic { width: 16px; height: 16px; color: var(--c-fg); }

/* ---- buttons: SharpButton, scaled up for the page ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  height: 44px;
  padding: 0 var(--sp-xl);
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.btn .btn-ic { width: 16px; height: 16px; }
.btn-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
  padding-right: 3px; /* SharpButton's italic-lean compensation */
}
.btn-sm { height: 36px; padding: 0 var(--sp-lg); }
.btn-sm .btn-label { font-size: 12px; letter-spacing: 1px; }
.btn-lg { height: 56px; padding: 0 28px; }
.btn-lg .btn-label { font-size: 15px; letter-spacing: 1.4px; }
.btn-lg .btn-ic { width: 18px; height: 18px; }
/* AppButtonInk: inverse = fg fill + bg ink; hot = lerp(fg, bg, .12). */
.btn-inverse { background: var(--c-fg); border-color: var(--c-fg); color: var(--c-bg); }
.btn-inverse:hover, a:hover > .btn-inverse, .btn-inverse:focus-visible {
  background: color-mix(in srgb, var(--c-fg), var(--c-bg) 12%);
  border-color: color-mix(in srgb, var(--c-fg), var(--c-bg) 12%);
}
/* ghost = clear, fgMuted ink, border lerp(border, fg, .22); hot inverts. */
.btn-ghost {
  background: transparent;
  color: var(--c-fg-muted);
  border-color: color-mix(in srgb, var(--c-border), var(--c-fg) 22%);
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--c-fg); border-color: var(--c-fg); color: var(--c-bg); }
.btn:focus-visible, .dl-link:focus-visible .btn, .tab:focus-visible, .sha:focus-visible { outline: 2px solid var(--c-fg); outline-offset: 3px; }
.dl-link:focus-visible, .brand:focus-visible { outline: none; }

/* ---- nav ---- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-xxl);
  background: rgba(0, 0, 0, 0);
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
}
.nav[data-scrolled] {
  background: rgba(0, 0, 0, 0.72);
  border-bottom-color: var(--c-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand span {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.6px;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a:not(.btn) { font-size: 14px; font-weight: 500; color: var(--c-fg); transition: opacity 150ms; }
.nav-links > a:not(.btn):hover { opacity: 0.75; }

/* ---- hero ---- */
.hero {
  position: relative;
  /* Clip the tilted cover wall at the sides only: the phone hangs below the
     hero, and a full clip cut it off. */
  overflow-x: clip;
  padding: 168px var(--sp-xxl) 0;
  text-align: center;
  isolation: isolate;
}
.hero-wall {
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 900px;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 14px;
  transform: rotate(-8deg) translateY(-6%);
  opacity: 0.2;
  filter: saturate(0.85);
  animation: wall-drift 60s ease-in-out infinite alternate;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, #000 20%, transparent 78%);
}
.hero-wall img { width: 100%; aspect-ratio: 6 / 9; object-fit: cover; }
@keyframes wall-drift { to { transform: rotate(-8deg) translateY(-14%); } }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(0, 0, 0, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 30%, var(--c-bg) 72%);
}
.hero-mark, .closer-mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(120px, 23vw, 400px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c-fg) 8%, transparent);
  pointer-events: none;
  user-select: none;
}
.hero-mark { top: 120px; }
.hero-inner { position: relative; max-width: 980px; margin: 0 auto; }
.hero-title {
  margin-top: var(--sp-lg);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(52px, 8.6vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  padding-right: 0.06em; /* the italic overhang */
}
.hero-lede {
  max-width: 640px;
  margin: 28px auto 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--c-fg-muted);
}
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-md); margin-top: 40px; }
.hero-meta {
  margin-top: var(--sp-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--c-fg-dim);
}

/* ---- device frames (sharp: the brand has no rounded corners) ---- */
.device { position: relative; }
.device-screen {
  overflow: hidden;
  background: var(--c-surface);
  border: 10px solid var(--c-surface);
  outline: 1px solid var(--c-cover-edge);
  border-radius: var(--r-xs);
  box-shadow:
    0 50px 120px -20px rgba(0, 0, 0, 0.9),
    0 30px 60px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(0, 0, 0, 0.6);
}
.device-screen img { width: 100%; height: auto; }
.device-phone .device-screen { border-width: 7px; }

.stage {
  position: relative;
  max-width: 1120px;
  margin: 88px auto 0;
  padding: 0 0 0 7%;
}
.stage::before {
  /* a cream bloom under the screen, so it lifts off the black */
  content: "";
  position: absolute;
  inset: 12% 8% 0 14%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--c-fg) 10%, transparent), transparent 65%);
  filter: blur(30px);
}
.stage .device-tv { width: 100%; }
/* The phone stands in front of the TV's lower-left corner and drops below
   it, so it covers the rail, not the spotlight's title. */
.stage .device-phone {
  position: absolute;
  left: 0;
  bottom: -18%;
  width: 18%;
}

/* ---- airing marquee ---- */
.airing { margin-top: 184px; }
.label { display: flex; align-items: center; min-width: 0; margin-bottom: var(--sp-lg); }
.label-slash {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--c-mark); /* the app's first-section accent */
  margin-right: var(--sp-md);
}
.label-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.6px;
  white-space: nowrap;
}
.label-meta {
  margin-left: var(--sp-md);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--c-fg-dim);
  white-space: nowrap;
}
.label-rule { flex: 1; height: 1px; background: var(--c-border); margin-left: var(--sp-lg); min-width: var(--sp-lg); }
.marquee {
  overflow: hidden;
  padding: 14px 0; /* AnimeCard.hoverLiftRoom */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--sp-lg);
  width: max-content;
  animation: marquee 90s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--sp-lg) / 2)); } }

/* ---- cards: AnimeCard ---- */
.card { width: 168px; flex: none; }
.cover {
  position: relative;
  aspect-ratio: 6 / 9;
  overflow: hidden;
  border: 1px solid var(--c-cover-edge);
  border-radius: var(--r-cover);
  box-shadow: var(--shadow-cover);
  background: var(--c-surface);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: var(--r-xs);
  background: var(--c-scrim);
  color: var(--c-fg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.2;
  text-transform: uppercase;
}
.pill.num { font-variant-numeric: tabular-nums; }
.pill-soon { background: var(--c-fg); color: var(--c-bg); }
.pill .star { width: 11px; height: 11px; color: #E8C13C; fill: #E8C13C; stroke-width: 0; } /* ScoreBadge._gold */
.tl { top: var(--sp-sm); left: var(--sp-sm); }
.bl { bottom: var(--sp-sm); left: var(--sp-sm); }
.br { bottom: var(--sp-sm); right: var(--sp-sm); }
.card-title {
  margin-top: var(--sp-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- feature rows ---- */
#features { margin-top: 64px; }
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 96px;
  padding: 112px var(--sp-xxl);
  border-top: 1px solid var(--c-border-dim);
}
.feature-wide { grid-template-columns: 5fr 7fr; gap: 72px; }
.feature-flip .feature-copy { order: 2; }
.feature-title, .section-title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  padding-right: 0.06em;
}
.feature-lede {
  margin-top: 24px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-fg-muted);
}
.ticks { margin-top: 32px; display: grid; gap: 14px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--c-fg-body); }
.tick { width: 18px; height: 18px; color: var(--c-fg); }
.device-phone.solo { width: 100%; max-width: 330px; justify-self: center; }
.device-monitor { width: 100%; }

/* ---- how it works ---- */
.how { padding-top: 128px; padding-bottom: 32px; border-top: 1px solid var(--c-border-dim); }
/* The account on top, branching down to the three screens. */
.devices {
  --dash: repeating-linear-gradient(90deg, var(--c-fg-dim) 0 6px, transparent 6px 12px);
  --dash-v: repeating-linear-gradient(180deg, var(--c-fg-dim) 0 6px, transparent 6px 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 960px;
  margin: 72px auto 0;
}
.hub { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); }
.hub .hub-ic {
  width: 64px;
  height: 64px;
  padding: 16px;
  border-radius: var(--r-xs);
  background: var(--c-fg);
  color: var(--c-bg);
}
.hub span, .device.mini figcaption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  color: var(--c-fg-dim);
}
.trunk { width: 1px; height: 32px; margin-top: var(--sp-md); background: var(--dash-v); }
/* The bar runs from the first column's centre to the last's (a third of the
   row in from each side), with a drop at each end and one in the middle. */
.branch {
  position: relative;
  width: 66.667%;
  height: 32px;
  background:
    var(--dash) top / 100% 1px no-repeat,
    var(--dash-v) left top / 1px 100% no-repeat,
    var(--dash-v) right top / 1px 100% no-repeat,
    var(--dash-v) center top / 1px 100% no-repeat;
}
.device-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  justify-items: center;
  margin-top: var(--sp-md);
}
.device.mini { display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); }
.device.mini .device-screen { border-width: 5px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); }
.device-phone.mini { width: 130px; }
.device-tv.mini { width: 290px; }
.device-monitor.mini { width: 270px; }
.steps {
  counter-reset: none;
  list-style: none;
  padding: 0;
  margin: 88px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.step { border-top: 1px solid var(--c-border); padding-top: var(--sp-xl); }
.step-no {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-fg-dim);
}
.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-lg);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.step-ic { width: 20px; height: 20px; }
.step p { margin-top: var(--sp-md); font-size: 15px; line-height: 1.6; color: var(--c-fg-muted); max-width: 340px; }
.syncs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-md) 28px;
  margin-top: 64px;
  padding: var(--sp-xl) 0;
  border-top: 1px solid var(--c-border-dim);
  border-bottom: 1px solid var(--c-border-dim);
}
.syncs li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--c-fg-body); }

/* ---- platforms ---- */
.platforms { padding-top: 128px; padding-bottom: 128px; }
.platforms-head { text-align: center; }
.platforms-head .feature-lede { margin-left: auto; margin-right: auto; }
.tabs {
  display: flex;
  width: max-content;
  margin: 48px auto 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  padding: 4px;
  gap: 4px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  height: 46px;
  padding: 0 22px;
  border-radius: var(--r-xs);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-fg-muted);
  transition: background-color 150ms, color 150ms;
}
.tab:hover { color: var(--c-fg); }
.tab[aria-selected="true"] { background: var(--c-fg); color: var(--c-bg); }
.tab-ic { width: 18px; height: 18px; }
.panels { margin-top: 28px; }
.panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  padding: 56px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, color-mix(in srgb, var(--c-fg) 6%, transparent), transparent 60%),
    var(--c-surface);
}
.panel + .panel { margin-top: var(--sp-lg); }
.js .panel:not([data-active]) { display: none; }
.js .panel + .panel { margin-top: 0; }
.panel-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.panel-lede { margin-top: var(--sp-md); max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--c-fg-muted); }
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--sp-lg); }
.dl { display: flex; flex-direction: column; gap: var(--sp-sm); }
/* One lead per panel: every download after the first wears the ghost. */
.dl + .dl .btn-inverse {
  background: transparent;
  color: var(--c-fg-muted);
  border-color: color-mix(in srgb, var(--c-border), var(--c-fg) 22%);
}
.dl + .dl .dl-link:hover .btn-inverse, .dl + .dl .dl-link:focus-visible .btn-inverse {
  background: var(--c-fg); border-color: var(--c-fg); color: var(--c-bg);
}
.sha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--c-fg-dim);
  transition: color 150ms;
}
.sha:hover { color: var(--c-fg); }
.sha-ic { width: 12px; height: 12px; }
.sha[data-copied] { color: var(--c-fg); }
.dl-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--c-fg-dim);
}

/* ---- closer ---- */
.closer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 176px var(--sp-xxl) 176px;
  text-align: center;
  border-top: 1px solid var(--c-border-dim);
}
.closer-mark { top: 50%; transform: translate(-50%, -50%); }
.closer-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  padding-right: 0.06em;
}

/* ---- footer ---- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg) var(--sp-xl);
  padding-top: 40px;
  padding-bottom: 56px;
  border-top: 1px solid var(--c-border);
}
.foot .brand span { font-size: 17px; }
.foot-note { font-size: 13px; color: var(--c-fg-dim); }
.foot-copy { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.6px; color: var(--c-fg-dim); }

/* ---- scroll reveal (only when web.js runs) ---- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-wall, .marquee-track { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- narrower screens ---- */
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .device-phone.mini { width: 90px; }
  .device-tv.mini, .device-monitor.mini { width: 88%; }
  .feature, .feature-wide { grid-template-columns: 1fr; gap: 56px; padding-top: 88px; padding-bottom: 88px; }
  .feature-flip .feature-copy { order: 0; }
  .panel { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
}

/* the app's compact width */
@media (max-width: 599.98px) {
  .wrap { padding: 0 var(--sp-lg); }
  .nav { height: 60px; padding: 0 var(--sp-lg); }
  .nav-links > a:not(.btn) { display: none; }
  .hero { padding: 120px var(--sp-lg) 0; }
  .hero-mark { top: 96px; }
  .hero-lede { font-size: 16px; }
  .hero-cta { margin-top: 32px; }
  .hero-cta .btn { width: 100%; }
  .stage { margin-top: 56px; padding-left: 10%; }
  .stage .device-phone { width: 26%; bottom: -22%; }
  .device-screen { border-width: 6px; }
  .device-phone .device-screen { border-width: 4px; }
  .airing { margin-top: 120px; }
  .card { width: 124px; }
  .pill { padding: 1.5px 3px; font-size: 8px; gap: 2px; }
  .pill .star { width: 8px; height: 8px; }
  .card-title { font-size: 11px; }
  .feature { padding: 72px var(--sp-lg); gap: 44px; }
  .feature-lede { font-size: 16px; }
  .device-phone.solo { max-width: 260px; }
  .how { padding-top: 88px; }
  .devices { margin-top: 48px; }
  .device-phone.mini { width: 60px; }
  .device-tv.mini, .device-monitor.mini { width: 94%; }
  .device.mini .device-screen { border-width: 3px; }
  .device.mini figcaption { font-size: 9px; letter-spacing: 1px; }
  .hub .hub-ic { width: 48px; height: 48px; padding: 12px; }
  .step-no { font-size: 52px; }
  .syncs { justify-content: flex-start; }
  .platforms { padding-top: 88px; padding-bottom: 88px; }
  .tabs { width: 100%; }
  .tab { flex: 1; justify-content: center; padding: 0 var(--sp-sm); }
  .panel { padding: 28px var(--sp-lg); }
  .panel-actions, .dl, .dl-link { width: 100%; }
  .dl .btn { width: 100%; }
  .closer { padding: 112px var(--sp-lg); }
  .closer .hero-cta .btn { width: 100%; }
  .foot { flex-direction: column; align-items: flex-start; }
}

/* ======================= the show page ======================= */

/* The app's desktop detail hero (AnimeHero): the backdrop under the whole
   top, faded from the left where the copy starts and into the page at the
   foot; the poster and the copy start 120px down on it. */
.show-hero { position: relative; isolation: isolate; padding-top: 188px; }
.show-band { position: absolute; inset: 0 0 0 0; z-index: -1; overflow: hidden; }
.show-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%; /* Alignment(0, -0.44): faces sit high */
}
.show-band::before, .show-band::after { content: ""; position: absolute; inset: 0; }
.show-band::before {
  background:
    /* under the nav, so its links read on any art */
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 120px),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.82) 1%, rgba(0, 0, 0, 0.34) 26%, rgba(0, 0, 0, 0) 56%);
}
.show-band::after {
  background: linear-gradient(0deg,
    var(--c-bg) 1%, rgba(0, 0, 0, 0.48) 24%, rgba(0, 0, 0, 0) 58%);
}
.show-row {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-xl);
  padding-bottom: var(--sp-xl);
}
.show-poster {
  flex: none;
  width: 152px;
  box-shadow: var(--shadow-cover);
}
.show-poster img { width: 100%; aspect-ratio: 6 / 9; object-fit: cover; }
/* The app's desktop order: title, synopsis, genre pills, info pills,
   buttons. The title and pills share one .show-head block in the markup (the
   phone lays that block beside the poster), so here it dissolves and the
   pieces take their places by order. */
.show-copy { min-width: 0; max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; }
.show-head { display: contents; }
.show-head > .show-title, .show-head > .show-logo { order: 1; }
.show-copy > .synopsis { order: 2; }
.show-copy > .more { order: 3; }
.show-head > .badges:nth-of-type(1) { order: 4; }
.show-head > .badges:nth-of-type(2) { order: 5; }
.show-copy > .show-actions { order: 6; }
.show-copy, .show-copy .synopsis {
  /* TvHeroCopy.artShadows — the copy sits on the art */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 0, 0, 0.8);
}
.show-title {
  font-family: var(--font-body);
  font-size: var(--type-header-title-section-regular);
  font-weight: 700;
  line-height: 1.2;
}
/* beside a logo the title is for readers and search, not the eye */
.show-title-logo {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.show-logo { max-height: 96px; max-width: min(420px, 100%); width: auto; object-fit: contain; object-position: left bottom; }
.synopsis {
  margin-top: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.6px;
  line-height: 1.6;
  color: var(--c-fg);
}
.synopsis p + p { margin-top: 0.8em; }
.js .synopsis:not([data-open]) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.js .synopsis:not([data-open]) p + p { display: none; }
.more {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--c-fg-dim);
}
.more:hover { color: var(--c-fg); }
/* UserTitleBadge: cream pill, page ink, mono 9 w700 */
.badges { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-sm); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: var(--r-xs);
  background: var(--c-fg);
  color: var(--c-bg);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}
.badge-ic { width: 10px; height: 10px; }
.show-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-md); }
.show-actions .btn { height: 44px; text-shadow: none; }
.show-actions .btn-inverse { min-width: 152px; }

.show-body { padding-top: var(--sp-lg); }

/* IconTabBar: equal tabs, 40 tall, glyph 17 + mono 10.5 label, a 1px rule
   under each and a 2px cream one under the selected tab. */
.tab-strip { display: flex; margin-bottom: var(--sp-xl); }
.tab-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  height: 40px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-fg-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: color 150ms;
}
.tab-item:hover { color: var(--c-fg); }
.tab-item[aria-selected="true"] { color: var(--c-fg); border-bottom: 2px solid var(--c-fg); }
.tab-item:focus-visible { outline: 2px solid var(--c-fg); outline-offset: -2px; }
.tab-glyph { width: 17px; height: 17px; }
.js .tab-panel:not([data-active]) { display: none; }
.tab-panel + .tab-panel { margin-top: var(--sp-xxl); }
.js .tab-panel + .tab-panel { margin-top: 0; }
.tab-strip { display: none; }
.js .tab-strip { display: flex; }

.empty {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xl) 0;
  font-size: 15px;
  color: var(--c-fg-muted);
}
.empty-ic { width: 20px; height: 20px; color: var(--c-fg-dim); }
.empty-cta { flex-direction: column; text-align: center; padding: 56px 0; gap: var(--sp-lg); }
.empty-cta .empty-ic { width: 28px; height: 28px; }

.themes { list-style: none; margin: 0; padding: 0; }
.theme {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--c-border-dim);
}
.theme-slug {
  flex: none;
  width: 80px; /* the longest slugs ("ED1-TV") keep the titles in one column */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.4px;
}
.theme-copy { min-width: 0; flex: 1; }
.theme-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-artists { margin-top: 2px; font-size: 13px; color: var(--c-fg-muted); }
.theme-eps { flex: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; color: var(--c-fg-dim); }
.show-note {
  display: flex; align-items: center; gap: var(--sp-sm);
  margin-top: var(--sp-lg);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; color: var(--c-fg-dim);
}
.note-ic { width: 14px; height: 14px; }

/* episode cards, as the app's episode grid draws them */
.episodes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-lg);
}
.episode { border: 1px solid var(--c-border); background: var(--c-bg); min-width: 0; }
.ep-still { position: relative; aspect-ratio: 16 / 9; background: var(--c-surface); overflow: hidden; }
.ep-still img { width: 100%; height: 100%; object-fit: cover; }
.ep-no {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 2px 10px 0 8px;
  background: var(--c-scrim);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.ep-title {
  padding: var(--sp-md) var(--sp-md) 14px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* related shows: the card grid, AnimeCard's column rule */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-lg);
}
.card-grid .card { width: auto; }

/* a card that goes somewhere lifts like the app's (PoppukonThumbPop: 5px, the
   2px cream ring, the dim) */
a.card { display: block; }
a.card .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--c-fg);
  background: rgba(0, 0, 0, 0.33);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}
a.card:hover .cover, a.card:focus-visible .cover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
a.card:hover .cover::after, a.card:focus-visible .cover::after { opacity: 1; }
a.card:focus-visible { outline: none; }


.show-cta {
  margin-top: 96px;
  padding-top: 96px;
  padding-bottom: 96px;
  text-align: center;
  border-top: 1px solid var(--c-border-dim);
}
.show-cta .feature-lede { margin-left: auto; margin-right: auto; }
.show-cta-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  padding-right: 0.06em;
}

.lost { min-height: 70vh; padding: 200px var(--sp-xxl) 96px; text-align: center; }
.lost .feature-lede { margin-left: auto; margin-right: auto; }
.lost .closer-title { margin-top: var(--sp-lg); }

@media (max-width: 599.98px) {
  /* the app's phone hero: the poster beside the title, smaller */
  /* The app's phone hero: the poster beside the title and pills, the buttons
     across, the synopsis full width under them. */
  .show-hero { padding-top: 148px; }
  /* the phone's banner is the top only; the buttons and copy sit on the page */
  .show-band { bottom: auto; height: 340px; }
  /* The phone hero: the title and both pill lines as one block at the
     poster's foot, the button across, the synopsis full width under it. */
  .show-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: var(--sp-md);
  }
  .show-copy { display: contents; }
  .show-poster { width: 104px; grid-column: 1; grid-row: 1; }
  .show-head { display: block; grid-column: 2; grid-row: 1; align-self: end; min-width: 0; }
  .show-actions { grid-column: 1 / -1; grid-row: 2; }
  .show-copy > .synopsis {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--sp-lg);
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.55;
    color: var(--c-fg-body);
    text-shadow: none;
  }
  .show-copy > .more { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
  .show-title { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -0.5px; }
  .show-logo { display: none; }
  .show-title-logo {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
  }
  .show-actions .btn { flex: 1; min-width: 0; }
  .episodes { grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
  .ep-no { font-size: 20px; }
  .ep-title { font-size: 13px; padding: 10px; }
  .card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
  .tab-item span { display: none; } /* glyphs alone on the phone, as the app */
  .lost { padding: 140px var(--sp-lg) 72px; }
}

/* ======================= the profile page ======================= */
/* The banner band: clamp(width × .2, 240, 820) × .96 (BannerImage), fading into
   the page at its foot; the 3:4 avatar card rides two thirds up onto it. */
.profile-hero { position: relative; isolation: isolate; }
.profile-band {
  position: relative;
  height: calc(clamp(240px, 20vw, 820px) * 0.96);
  background: var(--c-surface);
  overflow: hidden;
}
.profile-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.profile-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0, rgba(0, 0, 0, 0) 110px),
    linear-gradient(0deg, var(--c-bg) 0%, rgba(0, 0, 0, 0.55) 12%, rgba(0, 0, 0, 0) 40%);
}
.profile-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-xl);
  margin-top: calc(-152px / 0.75 * 2 / 3);
}
.profile-avatar {
  flex: none;
  width: 152px; /* AnimeCard.maxWidth */
  aspect-ratio: 3 / 4;
  padding: 1px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-copy { min-width: 0; padding-bottom: var(--sp-xs); }
.profile-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: var(--type-header-title-section-regular);
  letter-spacing: -1.4px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-copy .badges { margin-top: var(--sp-sm); }
.profile-bio {
  margin-top: var(--sp-sm);
  max-width: 760px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.6px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meta-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.meta-ic { width: 13px; height: 13px; }
.profile-body { padding-top: var(--sp-xl); }
.profile-body .tab-strip { margin-bottom: var(--sp-lg); }

/* EditorialStatStrip, free */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}
.stat { display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 0; text-align: left; }
.stat-tab { cursor: pointer; padding: 0; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-tab.is-active .stat-label { color: var(--c-fg); font-weight: 700; }
.stat-tab:hover .stat-label { color: var(--c-fg-muted); }
.stat-value {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -1.6px;
  line-height: 0.95;
  color: var(--c-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-value.is-dim { color: var(--c-fg-dim); }
/* the app's rule: a value over seven characters steps down to 23 */
.stat-value.is-long { font-size: 23px; letter-spacing: -0.8px; }
.stat-sub {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--c-fg-dim);
}
.stat-foot {
  display: flex;
  align-items: center;
  height: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-fg-dim);
  white-space: nowrap;
  overflow: hidden;
}
.mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 11px; }
.mini-bar { width: 7px; height: 2px; background: var(--c-fg-dim); }
.mini-bar.is-last { background: var(--c-fg); }
.share { display: flex; align-items: center; gap: var(--sp-sm); }
.share-track { position: relative; width: 76px; height: 2px; background: var(--c-border); }
.share-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c-fg); }

/* Overview: the main column and the 340px side column */
.overview { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-xl); align-items: start; }
.overview-main, .overview-side { display: flex; flex-direction: column; gap: var(--sp-lg); min-width: 0; }
.pblock .label { padding: 0 0 var(--sp-sm); margin: 0; }
.pblock + .pblock { margin-top: var(--sp-lg); }
.overview .pblock + .pblock { margin-top: 0; }

/* _AchievementCard */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-sm); }
.ach-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ach { position: relative; padding: var(--sp-md); border: 1px solid var(--c-border); min-width: 0; }
.ach[hidden] { display: none; }
.ach-badge { position: absolute; top: var(--sp-md); right: var(--sp-md); width: 34px; height: 34px; object-fit: contain; }
.ach.is-locked .ach-badge { opacity: 0.4; }
.ach-head, .ach-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--c-fg-muted);
}
.ach.is-locked .ach-head, .ach.is-locked .ach-foot { color: var(--c-fg-dim); }
.ach-head { padding-right: calc(34px + var(--sp-md)); }
.pips { display: inline-flex; gap: 3px; }
.pip { width: 6px; height: 6px; border: 1px solid var(--c-fg-dim); }
.pip.is-held { background: var(--c-fg); border-color: var(--c-fg); }
.ach-name {
  margin-top: var(--sp-sm);
  padding-right: calc(34px + var(--sp-md));
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach.is-locked .ach-name { color: var(--c-fg-dim); }
.ach-copy {
  margin-top: var(--sp-xs);
  padding-right: calc(34px + var(--sp-md));
  height: calc(12.5px * 1.4 * 2);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ach.is-locked .ach-copy { color: var(--c-fg-dim); }
.ach-bar { position: relative; margin-top: var(--sp-sm); height: 3px; background: var(--c-border); }
.ach-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c-fg); }
.ach.is-locked .ach-fill { background: var(--c-fg-dim); }
.ach-gem { position: absolute; right: 0; bottom: 5px; width: 18px; height: 18px; }
.ach.is-locked .ach-gem { opacity: 0.4; }
.ach-foot { margin-top: var(--sp-sm); justify-content: space-between; }
.glyph-chips { display: flex; gap: 2px; margin-left: var(--sp-lg); }
.glyph-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--c-fg-dim); }
.glyph-chip:hover { color: var(--c-fg); }
.glyph-chip[aria-pressed="true"] { color: var(--c-fg); }
.chip-ic { width: 16px; height: 16px; }

/* Hall of Fame: three covers stacked, the front one full, the others peeking
   60px out each side at .82 scale and .45 opacity; a tap brings one forward. */
.podium { position: relative; height: calc(152px / 0.55); display: flex; justify-content: center; }
.podium-card {
  position: absolute;
  top: 0;
  width: 152px;
  transform: translateX(0) scale(0.82);
  opacity: 0.45;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), opacity 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.podium-card.is-front { transform: none; opacity: 1; z-index: 2; }
.podium-card[data-pos="1"] { transform: translateX(60px) scale(0.82); z-index: 1; }
.podium-card[data-pos="-1"] { transform: translateX(-60px) scale(0.82); z-index: 1; }
.podium-card .card-title { text-align: center; visibility: hidden; }
.podium-card.is-front .card-title { visibility: visible; }
.podium-rank {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: var(--r-xs);
  background: var(--c-scrim);
  color: var(--c-medal-gold);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}
.podium-ic { width: 11px; height: 11px; }

/* On repeat */
.song { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-xs) 0; }
.song-cover { width: 48px; height: 48px; object-fit: cover; flex: none; }
.song-copy { min-width: 0; }
.song-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-meta, .song-show { margin-top: 2px; font-size: 12px; color: var(--c-fg-muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-show { color: var(--c-fg-dim); }
.song-ic { width: 12px; height: 12px; flex: none; }

/* _ListsCard */
.lists-row { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-md) 0; border-bottom: 1px solid var(--c-border-dim); }
.lists-row:last-child { border-bottom: 0; }
.lists-ic { width: 18px; height: 18px; flex: none; }
.lists-count { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 26px; letter-spacing: -0.8px; line-height: 1; }
.lists-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--c-fg-muted); }
.lists-stat { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-fg-dim); white-space: nowrap; }

/* _ActivityRow */
.feed { list-style: none; margin: 0; padding: 0; }
.feed-row { border-bottom: 1px solid var(--c-border-dim); }
.feed-link { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-md) 0; }
.feed-compact .feed-link { padding: var(--sp-sm) 0; }
a.feed-link:hover .feed-text { text-decoration: underline; text-underline-offset: 3px; }
.feed-thumb { position: relative; flex: none; width: 44px; height: 62px; background: var(--c-surface); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.feed-compact .feed-thumb { width: 36px; height: 50px; }
.feed-thumb > img:not(.feed-badge) { width: 100%; height: 100%; object-fit: cover; }
.feed-badge { width: 34px; height: 34px; object-fit: contain; }
.feed-glyph { position: absolute; right: 2px; bottom: 2px; display: inline-flex; padding: 2px; background: var(--c-scrim); }
.feed-glyph.is-bare { position: static; background: none; }
.feed-ic { width: 12px; height: 12px; }
.feed-glyph.is-bare .feed-ic { width: 18px; height: 18px; color: var(--c-fg-muted); }
.feed-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.feed-text { font-size: 14px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-compact .feed-text { font-size: 13px; -webkit-line-clamp: 1; }
.feed-ago { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-fg-dim); }
.feed-note { padding: var(--sp-md) 0; font-size: 13px; color: var(--c-fg-dim); }

/* _WatchActivityCard */
.chart-head { display: flex; align-items: flex-start; gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.chart-readout { flex: 1; min-width: 0; font-size: 12.5px; color: var(--c-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-readout.is-picked { color: var(--c-fg); }
.chart-ranges { display: flex; gap: var(--sp-xs); }
.range-btn {
  height: 26px;
  padding: 0 var(--sp-md);
  border: 1px solid color-mix(in srgb, var(--c-border), var(--c-fg) 22%);
  border-radius: var(--r-xs);
  color: var(--c-fg-muted);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.range-btn.is-on, .range-btn:hover { background: var(--c-fg); border-color: var(--c-fg); color: var(--c-bg); }
.chart { position: relative; }
/* One unit of the drawing is one pixel down (the app's 170-tall painter: a
   152 plot and an 18 footer); across, it stretches to the card. */
.chart-plot { position: relative; height: 170px; }
.chart-plot[hidden] { display: none; }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-grid { stroke: var(--c-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-bar { fill: var(--c-fg); }
.chart-bar.is-partial { fill: var(--c-fg-dim); }
.chart-bar:hover { opacity: 0.8; }
.chart-label, .chart-tick { position: absolute; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.8px; color: var(--c-fg-dim); white-space: nowrap; }
.chart-label { top: 157px; transform: translateX(-50%); }
.chart-tick { left: 0; width: 22px; text-align: right; transform: translateY(-50%); }

/* list tabs + playlists */
.list-panel[hidden] { display: none; }
.playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: var(--sp-lg); }
.playlist-art {
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: var(--c-surface);
  border: 1px solid var(--c-cover-edge);
  overflow: hidden;
}
.playlist-art img { width: 100%; height: 100%; object-fit: cover; }
.playlist-art img:only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.playlist-count { margin-top: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; color: var(--c-fg-dim); }

@media (max-width: 1099.98px) {
  .ach-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .overview { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
  /* the app's phone hero: the banner stretched, the avatar at the card's
     compact width */
  /* The banner is the top of the page under the nav, the avatar riding up
     onto its foot, as the phone detail hero does. */
  .profile-band { height: 250px; }
  .profile-row { gap: var(--sp-md); margin-top: -104px; align-items: flex-end; }
  .profile-avatar { width: 104px; }
  .profile-name { font-size: var(--type-header-title-compact); letter-spacing: -1.2px; }
  .profile-bio { font-size: 11px; }
  .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-lg) var(--sp-md); }
  .stat-value { font-size: 36px; }
  .stat-value.is-word { font-size: 23px; letter-spacing: -0.8px; }
  .ach-grid, .ach-grid-3 { grid-template-columns: 1fr; }
  .chart-head { flex-direction: column; }
}

/* ---- the DNA tab (the app's _DnaTab, a visitor's view) ---- */
.label-ic { width: 14px; height: 14px; margin-left: var(--sp-md); color: var(--c-fg-dim); flex: none; }
.dna-mono { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; color: var(--c-fg-muted); }
.dna-dim { color: var(--c-fg-dim); }
.dna-11 { font-size: 11px; }
.dna-gap-xs { margin-top: var(--sp-xs); color: var(--c-fg); }
.dna-center { text-align: center; margin-top: var(--sp-sm); }
.dna-strain {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -1.8px;
  line-height: 1;
  margin-bottom: var(--sp-sm);
}
.dna-body { margin-top: var(--sp-lg); font-size: 15px; line-height: 1.6; color: var(--c-fg-body); max-width: 760px; }
.dna-glyph-line { display: flex; align-items: flex-start; gap: var(--sp-sm); margin-top: var(--sp-md); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; color: var(--c-fg); }
.dna-glyph-line + .dna-glyph-line { margin-top: var(--sp-xs); }
.dna-glyph-line.dna-dim { color: var(--c-fg-dim); }
.dna-line-ic { width: 12px; height: 12px; margin-top: 1px; flex: none; }
.dna-chips { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-lg); }
.dna-chip { padding: var(--sp-xs) var(--sp-sm); border: 1px solid var(--c-fg-dim); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; color: var(--c-fg); }
.dna-chip.is-lit { border-color: var(--c-mark); }
/* The drawing is 340 wide; the viewBox keeps 28 either side for the axis
   labels, which the app clamps inside its box. */
.dna-radar { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
.radar-ring { fill: none; stroke: color-mix(in srgb, var(--c-fg) 14%, transparent); stroke-width: 1; }
.radar-spoke { stroke: color-mix(in srgb, var(--c-fg) 8%, transparent); stroke-width: 0.6; }
.radar-avg { fill: none; stroke: var(--c-mark); stroke-width: 1.5; stroke-dasharray: 5 4; }
.radar-you { fill: color-mix(in srgb, var(--c-fg) 24%, transparent); stroke: var(--c-fg); stroke-width: 2; }
.radar-you.is-unknown { fill: color-mix(in srgb, var(--c-fg-dim) 24%, transparent); stroke: var(--c-fg-dim); }
.radar-rung { stroke: var(--c-fg); stroke-width: 2; }
.radar-rung.is-down { stroke: var(--c-mark); }
.radar-tip { fill: var(--c-fg); }
.radar-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 1px; fill: var(--c-fg-dim); }
.radar-value { font-size: 10px; font-weight: 800; fill: var(--c-fg); }
.radar-value.is-unknown { fill: var(--c-fg-dim); }
.dna-rare { display: flex; align-items: flex-end; gap: var(--sp-xs); }
.dna-rare-n { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 44px; letter-spacing: -1.8px; line-height: 1; }
.dna-rare .dna-mono { padding-bottom: 6px; }
.dna-rare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg) 0; margin-top: var(--sp-lg); }
.dna-rare-v { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 22px; letter-spacing: -0.6px; line-height: 1; margin-bottom: var(--sp-xs); }
.dna-note { font-size: 12.5px; line-height: 1.45; color: var(--c-fg-muted); margin-bottom: var(--sp-md); }
.dna-gene { padding: var(--sp-sm) 0; border-top: 1px solid var(--c-border-dim); }
.dna-gene:first-of-type { border-top: 0; }
.dna-gene-head { display: flex; align-items: baseline; gap: var(--sp-sm); }
.dna-gene-label { flex: 1; font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: -0.3px; }
.dna-ellipsis { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kin { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-sm) 0; border-top: 1px solid var(--c-border-dim); }
.pblock .label + .kin { border-top: 0; }
.kin:hover .kin-name { text-decoration: underline; text-underline-offset: 3px; }
.kin-avatar { width: 36px; height: 36px; flex: none; background: var(--c-surface); overflow: hidden; }
.kin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kin-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kin-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kin-match { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 20px; letter-spacing: -0.6px; }
@media (max-width: 599.98px) {
  .dna-strain { font-size: 30px; letter-spacing: -1.2px; }
}