:root {
  color-scheme: light;
  --ink: #202036;
  --cream: #fffaed;
  --yellow: #ffdc55;
  --pink: #ffaacb;
  --purple: #c6b3fc;
  --lime: #d1f68b;
  --paper: #faf4e5;
  --shadow: 4px 4px 0 var(--ink);
  --sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --display: var(--sans);
  --mono: "Courier New", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.55 var(--sans); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #5630a4; outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
section, figure { scroll-margin-top: 1rem; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: middle; }
.wrap { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.mono { font-family: var(--mono); }
.skip { position: fixed; z-index: 5; top: 10px; left: 10px; padding: 8px 14px; background: white; transform: translateY(-160%); }
.skip:focus { transform: none; }
.site-header { background: var(--ink); color: var(--cream); border-bottom: 2px solid var(--ink); }
.nav { min-height: 67px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
.brand img { width: 35px; height: 35px; border: 1px solid #ffdc55; border-radius: 50%; }
.brand > span { font: 800 20px/1.1 var(--display); }
.nav nav { display: flex; align-items: center; gap: 27px; font-size: 15px; font-weight: 650; }
.nav nav a { display: inline-flex; align-items: center; min-height: 44px; }
.nav nav a:hover { color: var(--yellow); }
.nav-play-button { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--yellow); color: var(--yellow); font: 700 14px/1.25 var(--sans); }
.nav-play-button:hover { background: var(--yellow); color: var(--ink); }
.site-header :focus-visible { outline-color: var(--yellow); }

.front-page {
  overflow: clip;
  background:
    radial-gradient(circle at 1.5px 1.5px, #3d264315 1px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(ellipse at 50% 58%, #ffe98b 12%, transparent 64%),
    var(--yellow);
}
.hero { display: grid; grid-template-columns: minmax(0, .81fr) minmax(0, 1.39fr) minmax(0, .58fr); grid-template-areas: "title title title" "copy poster stickers"; gap: 10px clamp(20px, 3.4vw, 48px); align-items: center; padding-block: clamp(20px, 3vw, 39px) clamp(29px, 4vw, 54px); }
.hero-title { grid-area: title; z-index: 2; text-align: center; }
.poster-kicker { display: inline-block; padding: 5px 11px; border: 2px solid var(--ink); background: var(--cream); font-size: 14px; font-weight: 700; }
.poster-kicker span { color: #6b38a2; margin-inline: 4px; }
h1 { margin-block: 10px 7px; text-transform: uppercase; color: var(--ink); font: 850 clamp(62px, 10.4vw, 140px)/1 var(--display); letter-spacing: -.035em; }
.hero-copy { grid-area: copy; }
.hero-hook { font: 800 clamp(27px, 3.15vw, 43px)/1.12 var(--display); letter-spacing: -.03em; }
.hero-summary { margin-top: 10px; max-width: 28ch; color: var(--ink); font-size: clamp(16px, 1.42vw, 19px); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px 13px; margin-top: 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 13px; border: 2px solid var(--ink); font-size: 15px; font-weight: 750; line-height: 1.25; cursor: pointer; }
.primary { color: var(--ink); background: var(--pink); box-shadow: var(--shadow); }
.primary:hover { background: var(--cream); }
.primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px var(--ink); }
.secondary { color: var(--ink); background: var(--cream); }
.secondary:hover { background: var(--yellow); }
.secondary:active { background: #f3c94d; }
.play-icon { width: 0; height: 0; border-block: 5px solid transparent; border-left: 8px solid var(--ink); }
.evidence { grid-area: poster; isolation: isolate; position: relative; justify-self: center; width: 100%; max-width: 448px; }
.evidence::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--purple); border: 2px solid var(--ink); transform: translate(3px, 5px) rotate(6deg); }
.photo-card { position: relative; background: var(--ink); color: var(--cream); padding: 8px; border: 2px solid var(--ink); box-shadow: 6px 6px var(--ink); }
.photo-top, .photo-bottom { display: flex; justify-content: space-between; gap: 7px; align-items: center; font-size: 13px; font-weight: 650; }
.photo-top { padding: 0 2px 7px; }
.photo-top i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #ffaacb; margin-right: 5px; }
.photo-bottom { padding: 7px 2px 0; color: var(--yellow); }
.photo { position: relative; border: 1px solid #fbd8ad; background: var(--cream); }
.photo img { width: 100%; height: auto; }
.photo-button { position: absolute; bottom: 7px; right: 7px; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.photo-button:hover { background: var(--pink); }
.poster-spark { position: absolute; pointer-events: none; z-index: 1; line-height: 1; color: var(--cream); text-shadow: 2px 2px var(--ink), -1px -1px var(--ink); }
.spark-one { top: 8%; left: -7%; font-size: clamp(28px, 5vw, 60px); transform: rotate(-10deg); }
.spark-two { right: -6%; bottom: 7%; font-size: clamp(24px, 4vw, 51px); transform: rotate(8deg); }
.hero-stickers { grid-area: stickers; position: relative; display: grid; justify-items: center; gap: 15px; padding-bottom: 22px; }
.badge { width: min(100%, 170px); aspect-ratio: 1; display: grid; place-content: center; background: var(--ink); clip-path: polygon(50% 0, 58% 11%, 71% 4%, 74% 17%, 89% 14%, 88% 27%, 98% 34%, 93% 45%, 100% 56%, 89% 63%, 94% 76%, 80% 79%, 78% 94%, 65% 89%, 55% 100%, 47% 91%, 33% 98%, 29% 85%, 15% 89%, 15% 74%, 2% 68%, 8% 56%, 0 46%, 11% 37%, 5% 25%, 20% 23%, 23% 9%, 37% 14%); transform: rotate(9deg); }
.badge span { color: var(--pink); text-align: center; font: 800 clamp(13px, 1.7vw, 22px)/1.14 var(--display); }
.sticker-spark { position: absolute; color: #683fa2; top: -27px; right: 11%; font-size: 30px; line-height: 1; }
.arcade-sticker { color: var(--ink); background: var(--lime); border: 2px solid var(--ink); box-shadow: 2px 3px var(--ink); padding: 4px 7px; font-size: 14px; font-weight: 750; white-space: nowrap; }
.poster-strip { padding: 8px 14px; border-block: 2px solid var(--ink); background: var(--pink); color: var(--ink); text-align: center; font-size: 15px; font-weight: 750; }

h2 { font: 800 clamp(34px, 5.3vw, 64px)/1.08 var(--display); letter-spacing: -.035em; }
.section-tag { display: inline-block; padding: 3px 7px; border: 1px solid currentColor; font-size: 14px; font-weight: 700; line-height: 1.35; }
.text-link { color: inherit; background: none; border: none; padding: 3px 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; cursor: pointer; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.case-section { padding-block: clamp(36px, 6vw, 78px); }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.section-intro h2 { margin-top: 10px; }
.story-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin-top: 25px; }
.story-chapter { padding: clamp(15px, 2.4vw, 27px); border: 2px solid var(--ink); box-shadow: var(--shadow); background: #fff1bc; }
.story-chapter:nth-child(2) { background: #ffe0ec; }
.story-chapter:nth-child(3) { background: #eee5ff; }
.chapter-number { display: grid; place-items: center; width: 32px; height: 32px; background: var(--ink); color: var(--cream); font-size: 14px; font-weight: 750; }
.story-chapter h3 { margin-top: 10px; font-size: clamp(20px, 2.15vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.story-chapter p:last-child { margin-top: 10px; max-width: 58ch; font-size: 17px; line-height: 1.62; }
.story-end { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 11px 20px; margin-top: 25px; padding: 15px 0 3px; border-top: 2px solid var(--ink); }
.story-end p { font-size: clamp(18px, 2vw, 22px); font-weight: 800; }
.token-wrap { padding-bottom: clamp(34px, 5vw, 62px); }
.token-panel { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 22px; border: 2px solid var(--ink); background: var(--cream); box-shadow: var(--shadow); }
.token-panel h2 { font-size: clamp(28px, 3.7vw, 46px); margin: 6px 0; }
.token-panel p:last-child { color: #4c4350; font-size: 16px; }
.token-status { flex-shrink: 0; padding: 8px 10px; border: 1px solid var(--ink); background: var(--lime); font-size: 14px; font-weight: 700; }
.token-status span { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #4b653a; margin-right: 4px; }
.footer { display: flex; justify-content: space-between; align-items: start; gap: 11px; border-top: 2px solid var(--ink); padding: 15px 0 22px; }
.footer strong { font: 900 18px/1 var(--display); letter-spacing: -.04em; }
.footer p { margin-top: 4px; font-size: 14px; color: #4c4350; }
.footer-actions { text-align: right; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: end; gap: 3px 15px; }
.footer-links .text-link { min-height: 44px; }
.feedback { display: block; font-size: 14px; color: #482584; overflow-wrap: anywhere; }
.feedback:not(:empty) { margin-top: 5px; }
dialog { width: min(640px, calc(100% - 26px)); padding: 0; background: var(--cream); border: 2px solid var(--ink); color: var(--ink); box-shadow: 5px 5px var(--pink); }
dialog::backdrop { background: #202036ec; }
.dialog-bar { padding: 6px 10px 6px 13px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: bold; }
.dialog-bar button { width: 44px; height: 44px; cursor: pointer; background: var(--yellow); border: 1px solid var(--ink); color: var(--ink); font: 24px/1 var(--sans); }
dialog img { width: 100%; max-height: calc(100dvh - 88px); height: auto; object-fit: contain; background: var(--ink); }
@media (max-width: 950px) { .wrap { width: calc(100% - 57px); } }
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); grid-template-areas: "title title" "copy poster"; row-gap: 17px; }
  .evidence { width: min(93%, 415px); }
  .hero-stickers { display: none; }
}
@media (max-width: 820px) { .story-chapters { grid-template-columns: 1fr; gap: 13px; } }
@media (max-width: 700px) {
  .wrap { width: calc(100% - 34px); }
  .nav { grid-template-columns: 1fr auto; gap: 6px 10px; padding-top: 7px; }
  .nav nav { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; gap: 8px; border-top: 1px solid #fff3; }
  .brand img { width: 31px; height: 31px; }
  .brand > span { font-size: 18px; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "title" "copy" "poster"; gap: 15px; padding-block: 22px 36px; }
  h1 { font-size: clamp(45px, 12.9vw, 87px); }
  .evidence { width: min(82%, 340px); }
  .photo-top, .photo-bottom { font-size: 12px; }
  .hero-copy { text-align: center; padding: 3px 0 0; }
  .hero-hook { font-size: clamp(24px, 6vw, 36px); }
  .hero-hook br { display: none; }
  .hero-summary { margin: 7px auto 0; max-width: 32ch; }
  .hero-actions { justify-content: center; margin-top: 14px; }
  .hero .evidence { margin-top: 9px; }
  .section-intro { flex-wrap: wrap; }
  .story-chapters { margin-top: 17px; }
  .story-end { align-items: start; }
  .token-panel { display: grid; padding: 14px; }
  .token-status { width: fit-content; }
}
@media (max-width: 450px) {
  .footer { flex-direction: column; }
  .footer-actions { text-align: left; }
  .footer-links { justify-content: start; }
}
@media (max-width: 360px) {
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .hero-actions .button { padding-inline: 5px; font-size: 13px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }