:root {
  --ink: #1b140f;
  --paper: #f6ead7;
  --dot: #e4d3b8;
  --panel: #fff9f2;
  --yellow: #ffd23a;
  --red: #e23d32;
  --claude: #e25a2a;
  --grok: #c9962a;
  --gpt: #1c9a62;
  --cursor: #2a4fd6;
  --pplx: #1498a8;
  --desk: #231c16;
  --ticker-h: 40px;
  --pager-h: 74px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--desk);
  color: var(--ink);
  font-family: "Comic Neue", "Comic Sans MS", cursive;
}

body {
  display: grid;
  grid-template-rows: var(--ticker-h) minmax(0, 1fr) auto;
  height: 100dvh;
  overflow: hidden;
}

img { display: block; max-width: 100%; }

::selection {
  background: var(--yellow);
  color: var(--ink);
}

.ticker {
  background: var(--ink);
  color: var(--yellow);
  overflow: hidden;
  border-bottom: 3px solid var(--yellow);
  display: flex;
  align-items: center;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tick 28s linear infinite;
  font-family: Bangers, "Arial Black", Impact, sans-serif;
  font-size: 1.35rem;
  letter-spacing: 1px;
  line-height: 1;
}

@keyframes tick {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.comic {
  position: relative;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: var(--desk);
  min-height: 0;
}

.page {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: min(1080px, 100%);
  margin-inline: auto;
  padding: 14px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.15px, transparent 1.2px);
  background-size: 7px 7px;
  overflow: hidden;
}

.mast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  flex: none;
}

.mast .brand { justify-self: start; }
.mast .folio { justify-self: end; }

.mast p,
.mast h2 {
  margin: 0;
  font-family: Bangers, "Arial Black", Impact, sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
}

.mast h2 { text-align: center; }

.folio {
  background: var(--ink);
  color: var(--yellow);
  padding: 4px 8px 1px;
}

.page-body {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--panel);
  border: 4px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
}

.tone-red { box-shadow: 7px 7px 0 var(--red); }
.tone-claude { box-shadow: 7px 7px 0 var(--claude); }
.tone-cursor { box-shadow: 7px 7px 0 var(--cursor); }
.tone-gpt { box-shadow: 7px 7px 0 var(--gpt); }
.tone-grok { box-shadow: 7px 7px 0 var(--grok); }
.tone-pplx { box-shadow: 7px 7px 0 var(--pplx); }

.panel-art {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #f4efe6;
}

.panel-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.cover-panel .panel-art img,
.end-logo .panel-art img {
  object-fit: contain;
  object-position: center;
  background: #fbf6ef;
}

.pnum {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-family: Bangers, Impact, sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}

.burst {
  position: absolute;
  z-index: 2;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.burst.big { width: 168px; height: 168px; }
.burst.tr { top: 8px; right: 8px; }
.burst.tl { top: 8px; left: 42px; }

.burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yellow);
  clip-path: polygon(
    50% 0%, 61% 14%, 80% 6%, 74% 24%, 98% 28%, 80% 42%,
    100% 58%, 78% 64%, 86% 86%, 64% 76%, 50% 100%, 36% 76%,
    14% 86%, 22% 64%, 0% 58%, 20% 42%, 2% 28%, 26% 24%,
    20% 6%, 39% 14%
  );
}

.burst span {
  position: relative;
  z-index: 1;
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  line-height: 0.85;
  text-align: center;
  color: #fff;
  letter-spacing: 1px;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  transform: rotate(-8deg);
}

.burst.big span { font-size: clamp(2.4rem, 4vw, 3.6rem); }

.page.is-active .burst span {
  animation: slam 0.45s cubic-bezier(0.2, 1.35, 0.3, 1) both;
}

@keyframes slam {
  from { transform: scale(1.45) rotate(-14deg); opacity: 0; }
  to { transform: scale(1) rotate(-8deg); opacity: 1; }
}

.stamp {
  margin: 0;
  font-family: Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  line-height: 1;
  border: 3px solid currentColor;
  padding: 5px 8px 2px;
  transform: rotate(-8deg);
}

.stamp-on-art {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 12px;
  color: var(--red);
  background: #fff;
  font-size: 1.25rem;
}

.cover-body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 0;
}

.cover-copy { text-align: left; padding-right: 8px; }

.kicker {
  margin: 0 0 8px;
  font-weight: 700;
  background: #fff;
  border: 3px solid var(--ink);
  display: inline-block;
  padding: 3px 8px;
  box-shadow: 3px 3px 0 var(--ink);
}

h1, .end-title {
  margin: 0;
  font-family: "Titan One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 6.5vw, 5.4rem);
  line-height: 0.86;
  letter-spacing: -1px;
  color: #fff;
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--red);
}

.ticker-badge {
  display: inline-block;
  margin: 10px 0 0;
  background: var(--yellow);
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: 1px;
  line-height: 1;
  padding: 8px 16px 4px;
  transform: rotate(-2deg);
}

.cover-copy .ca {
  margin-top: 14px;
  transform: none;
}

.cover-copy .action-row {
  margin-top: 10px;
}

.tagline {
  margin: 16px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  max-width: 18em;
}

.hint {
  margin: 14px 0 0;
  font-size: 0.98rem;
}

.hint b {
  font-family: Bangers, Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 0 6px;
}

.narration, .caption {
  flex: none;
  margin: 0;
  font-weight: 700;
  background: #fff3b0;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 4px 10px;
  align-self: flex-start;
}

.prologue-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.splash {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.banner-art { min-height: 0; }
.banner-art img {
  object-fit: contain;
  object-position: center;
  background: #f7f1e8;
}

.bubble-row {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 10px 10px;
  background: var(--panel);
  border-top: 4px solid var(--ink);
}

.say {
  flex: none;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px 16px 16px 4px;
  padding: 8px 10px;
  box-shadow: 4px 4px 0 var(--ink);
}

.say.mini {
  position: relative;
  margin-top: 8px;
  box-shadow: 3px 3px 0 var(--ink);
}

.say.mini::before,
.say.mini::after {
  content: "";
  position: absolute;
  left: 16px;
  width: 0;
  height: 0;
}

.say.mini::before {
  top: -12px;
  border-width: 0 9px 12px 9px;
  border-style: solid;
  border-color: transparent transparent var(--ink) transparent;
}

.say.mini::after {
  top: -8px;
  left: 18px;
  border-width: 0 7px 10px 7px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

.say h3, .who {
  margin: 0;
  font-family: Bangers, Impact, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  line-height: 1;
}

.say.mini p {
  margin: 2px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
}

.say p { margin: 0; }

.role {
  margin: 2px 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.line {
  font-size: 1.02rem;
  line-height: 1.25;
}

.claude h3, .claude .who { color: var(--claude); }
.grok h3, .grok .who { color: #a97812; }
.gpt h3, .gpt .who { color: var(--gpt); }
.cursor h3, .cursor .who { color: var(--cursor); }
.pplx h3, .pplx .who { color: var(--pplx); }

.tick {
  font-family: Bangers, Impact, sans-serif;
  letter-spacing: 0.5px;
  color: var(--claude);
}

.duo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.gutter-sfx {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) rotate(-8deg);
  margin: 0;
  text-align: center;
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 0.82;
  letter-spacing: 1px;
  color: var(--yellow);
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
}

.feature-body {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.feature-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: 0;
}

.say.tall .who { font-size: 2.4rem; }
.say.tall .line { font-size: 1.2rem; }

.road-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.road-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.chapter {
  position: relative;
  min-height: 0;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 12px 14px 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chapter h3 {
  margin: 0 0 6px;
  font-family: "Titan One", "Arial Black", sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 400;
  line-height: 1.05;
}

.chapter p { margin: 0; font-weight: 700; line-height: 1.3; }

.ch-no {
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1;
  margin: 0 0 2px;
}

.chapter .stamp {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: #fff;
  font-size: 1.15rem;
}

.ch1 { background: #ffe1d4; color: #8a3418; }
.ch2 { background: #d9f5e4; color: #0e6b40; }
.ch3 { background: #dce6ff; color: #1d3e9e; }
.ch4 { background: #fff0c2; color: #8a5a08; }

.ch1 h3, .ch2 h3, .ch3 h3, .ch4 h3,
.ch1 .ch-no, .ch2 .ch-no, .ch3 .ch-no, .ch4 .ch-no { color: var(--ink); }

.end-body {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 0;
}

.end-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.tbc {
  margin: 0 0 4px;
  background: var(--ink);
  color: #fff;
  font-family: Bangers, Impact, sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: 1px;
  line-height: 1;
  padding: 10px 14px 6px;
  transform: rotate(-1.5deg);
  box-shadow: 8px 8px 0 var(--red);
}

.end-title { font-size: clamp(3rem, 6vw, 4.6rem); }

.ca {
  margin-top: 8px;
  background: #fff;
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 8px 12px;
  transform: rotate(1deg);
  max-width: 100%;
}

.ca-kicker {
  margin: 0;
  font-family: Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  font-size: 1rem;
  color: var(--red);
}

.ca-value {
  margin: 4px 0 8px;
  font-family: "Comic Neue", "Courier New", monospace;
  font-size: clamp(0.72rem, 1.5vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  word-break: break-all;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Bangers, Impact, sans-serif;
  font-size: 1.35rem;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 14px 5px;
  cursor: pointer;
  background: var(--yellow);
}

.action-btn.buy { background: #7dff9a; }
.action-btn.x { background: #fff; }
.action-btn.copy { background: var(--yellow); }
.action-btn.ca-copy { width: 100%; margin-top: 2px; }

.action-btn:hover { filter: brightness(1.05); }
.action-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
.action-btn.is-copied {
  background: #7dff9a;
}

.fine {
  margin: 8px 0 0;
  max-width: 36em;
  font-size: 0.86rem;
  font-weight: 700;
}

.pager {
  background: var(--paper);
  border-top: 4px solid var(--ink);
}

.pager-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pager-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dots { display: flex; gap: 6px; }

.dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid var(--ink);
  background: #fff;
  cursor: pointer;
}

.dot[aria-current="true"] { background: var(--red); }

.count {
  margin: 0;
  font-family: Bangers, Impact, sans-serif;
  letter-spacing: 1px;
  font-size: 1rem;
  line-height: 1;
}

.nav-btn {
  font-family: Bangers, Impact, sans-serif;
  font-size: 1.7rem;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 18px 5px;
  cursor: pointer;
}

.nav-btn:hover { background: #ffe56a; }

.nav-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.nav-btn:disabled {
  background: #ddd4c6;
  color: #6d655c;
  box-shadow: 4px 4px 0 #8d847a;
  cursor: not-allowed;
}

.nav-btn:focus-visible,
.dot:focus-visible {
  outline: 3px solid var(--cursor);
  outline-offset: 2px;
}

.wipe {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--yellow);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

.wipe.go { animation: wipe 0.48s ease; }

@keyframes wipe {
  0% { transform: scaleX(0); transform-origin: left center; }
  42% { transform: scaleX(1); transform-origin: left center; }
  58% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track,
  .page.is-active .burst span,
  .wipe.go { animation: none; }
  .comic { scroll-behavior: auto; }
}