:root {
  color-scheme: light;
  --ink: #111827;
  --muted: #5d6a7a;
  --soft: #eef3f8;
  --line: #d8e1ec;
  --paper: #f6f8fb;
  --panel: #ffffff;
  --template-ink: #111827;
  --template-accent: #2563eb;
  --template-strong: #dc2626;
  --template-support: #06b6d4;
  --template-panel: #f9fafb;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--template-accent) 24%, transparent);
}

.template-tactical {
  --template-ink: #102033;
  --template-accent: #14b8a6;
  --template-strong: #f97316;
  --template-support: #eab308;
  --template-panel: #f8fbff;
}

.template-fantasy {
  --template-ink: #172033;
  --template-accent: #10b981;
  --template-strong: #ec4899;
  --template-support: #f59e0b;
  --template-panel: #fbfff7;
}

.template-indie {
  --template-ink: #111827;
  --template-accent: #2563eb;
  --template-strong: #dc2626;
  --template-support: #06b6d4;
  --template-panel: #f9fafb;
}

.template-playable {
  --template-ink: #172033;
  --template-accent: #22c55e;
  --template-strong: #f97316;
  --template-support: #2563eb;
  --template-panel: #f8fbff;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--template-accent) 12%, #ffffff), var(--paper) 46%),
    var(--paper);
  line-height: 1.65;
}

a { color: var(--template-ink); }

:where(input, textarea, select) {
  min-height: 44px;
  font: inherit;
}

:where(a, button, input, summary, iframe):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--template-accent) 70%, #ffffff);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

:where(a, button, summary) {
  touch-action: manipulation;
}

.site-header,
main,
footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  padding: 22px 0 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--template-ink);
  border-radius: 8px;
  background: var(--template-accent);
  color: #ffffff;
  font-weight: 900;
}

.brand strong,
.brand small {
  display: block;
  line-height: 1.1;
}

.brand small {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .72rem;
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
}

nav a:hover {
  border-color: var(--line);
  color: var(--template-ink);
  background: #ffffff;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .86fr);
  align-items: center;
  gap: 32px;
  padding: 42px 0 46px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 16px -16px 16px auto;
  width: min(44vw, 520px);
  border: 1px solid color-mix(in srgb, var(--template-accent) 24%, transparent);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--template-support) 12%, transparent) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--template-accent) 10%, transparent) 0 1px, transparent 1px 34px);
  transform: skewX(-8deg);
  opacity: .45;
  z-index: -1;
}

.eyebrow {
  color: var(--template-strong);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.82rem;
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 5.8rem);
  line-height: 1.02;
  letter-spacing: 0;
}

h2 { margin-top: 0; }

.description,
.guide-section p {
  max-width: 780px;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-quick-entry {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.hero-quick-entry > span {
  color: var(--template-strong);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-quick-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--template-accent) 36%, var(--line));
  border-radius: 999px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--template-accent) 10%, #ffffff);
  color: var(--template-ink);
  font-weight: 900;
  text-decoration: none;
}

.hero-quick-links a:hover {
  border-color: var(--template-accent);
  background: color-mix(in srgb, var(--template-accent) 16%, #ffffff);
}

.play-button,
.entry-placeholder,
.ghost-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 15px;
  background: var(--panel);
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}

.play-button {
  border-color: var(--template-ink);
  background: var(--template-ink);
  color: #ffffff;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--template-ink) 18%, transparent);
}

.ghost-button { color: var(--template-ink); }
.entry-placeholder { color: var(--muted); }

.play-button:hover,
.ghost-button:hover {
  transform: translateY(-2px);
}

.play-button:active,
.ghost-button:active,
.filter-chip:active {
  transform: translateY(0) scale(.98);
}

.design-badge-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.design-badge-row span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--template-accent) 28%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--template-ink);
  background: color-mix(in srgb, var(--template-accent) 10%, #ffffff);
  font-size: .78rem;
  font-weight: 900;
}

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

.quick-meta div,
.rating-card,
.signal-list div,
.ad-slot,
.timeline-strip div,
.monetize-grid span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--template-panel));
}

.quick-meta div {
  min-height: 92px;
  padding: 15px;
}

.quick-meta span,
.rating-card span,
.signal-list span,
.ad-slot span,
.section-kicker,
.timeline-strip span {
  color: var(--template-strong);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quick-meta strong,
.rating-card strong,
.signal-list strong {
  display: block;
  margin-top: 7px;
  color: var(--template-ink);
  font-size: 1.18rem;
  line-height: 1.15;
}

.hero-panel {
  display: grid;
  gap: 14px;
}

.cover-art {
  width: 100%;
  aspect-ratio: 1.45;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--template-ink) 22%, var(--line));
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 26px 60px rgba(15, 23, 42, .13);
}

.rating-card {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
}

.hero-memory-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--template-accent) 34%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--template-ink) 96%, #000000), color-mix(in srgb, var(--template-accent) 32%, var(--template-ink))),
    var(--template-ink);
  color: #ffffff;
}

.hero-memory-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 24px),
    linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: translateX(-58%);
  animation: memorySweep 4.6s var(--ease-standard) infinite;
}

.hero-memory-card > * {
  position: relative;
  z-index: 1;
}

.hero-memory-card span {
  color: color-mix(in srgb, var(--template-support) 62%, #ffffff);
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-memory-card strong,
.hero-memory-card small {
  display: block;
}

.hero-memory-card strong {
  margin-top: 9px;
  font-size: 1rem;
  line-height: 1.35;
}

.hero-memory-card small {
  margin-top: 8px;
  color: rgba(255, 255, 255, .74);
  line-height: 1.5;
}

@keyframes memorySweep {
  0%, 46% { transform: translateX(-62%); opacity: .55; }
  72%, 100% { transform: translateX(62%); opacity: .18; }
}

.rating-card strong {
  margin: 0;
  font-size: 3rem;
  color: var(--template-accent);
}

.rating-card small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.signal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.signal-list div { padding: 16px; }

.ad-slot {
  margin-bottom: 28px;
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 18px 22px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--template-accent) 10%, #ffffff), #ffffff 55%),
    #ffffff;
}

.ad-slot strong {
  font-size: 1.05rem;
  color: var(--template-ink);
}

.sitebuildplan-ad-slot {
  inline-size: min(100%, var(--ad-slot-width));
  min-block-size: 0;
  margin: 18px auto 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 8px;
}

.sitebuildplan-ad-slot[data-ad-slot-devices="desktop"] {
  display: none;
}

@media (min-width: 1024px) {
  .sitebuildplan-ad-slot[data-ad-slot-devices="desktop"] {
    display: grid;
  }

  .sitebuildplan-ad-slot[data-ad-slot-devices="mobile"] {
    display: none;
  }
}

.sitebuildplan-ad-slot .ad-slot-creative {
  inline-size: var(--ad-slot-width);
  max-inline-size: 100%;
  block-size: var(--ad-slot-height);
  overflow: clip;
}

.sitebuildplan-ad-slot iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.ad-slot--sticky {
  position: sticky;
  top: 12px;
  z-index: 1;
}

.ad-slot-dismiss {
  min-block-size: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--template-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ad-slot-dismiss:hover {
  border-color: var(--template-accent);
}

.guide-section,
.split-section,
.faq,
.content-hub,
.monetize-section,
.article-page,
.category-page {
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.guide-section {
  display: grid;
  grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
  gap: 28px;
}

.split-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.split-section > div,
.faq details {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.timeline-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 10px 0 34px;
  border-bottom: 1px solid var(--line);
}

.timeline-strip div {
  min-height: 154px;
  padding: 18px;
}

.timeline-strip strong {
  display: block;
  margin: 11px 0 8px;
  color: var(--template-ink);
  font-size: 1.18rem;
}

.timeline-strip small {
  color: var(--muted);
  line-height: 1.5;
}

.search-panel,
.answer-snapshot,
.release-calendar,
.source-checklist,
.related-guides,
.build-plan-modules,
.design-system-panel,
.critical-entry-grid,
.latest-updates,
.category-hubs {
  padding: 30px;
  margin: 30px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--template-accent) 7%, #ffffff), #ffffff 54%),
    var(--panel);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.design-system-panel {
  margin: 0 0 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--template-ink) 94%, #000000), color-mix(in srgb, var(--template-accent) 26%, var(--template-ink))),
    var(--template-ink);
  color: #ffffff;
  box-shadow: 0 22px 60px color-mix(in srgb, var(--template-ink) 18%, transparent);
}

.design-system-panel .section-kicker,
.design-system-panel .section-head p:last-child {
  color: color-mix(in srgb, var(--template-support) 62%, #ffffff);
}

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

.design-system-grid article {
  min-height: 150px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

.design-system-grid span {
  color: color-mix(in srgb, var(--template-support) 72%, #ffffff);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.design-system-grid p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: .92rem;
  line-height: 1.52;
}

.answer-snapshot {
  margin: 0 0 28px;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.answer-grid article {
  min-height: 186px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.answer-grid span {
  color: var(--template-strong);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.answer-grid strong {
  display: block;
  margin: 10px 0 8px;
  color: var(--template-ink);
  line-height: 1.28;
}

.answer-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
}

.section-head {
  display: grid;
  gap: 6px;
  max-width: 860px;
}

.section-head h2,
.related-guides h2 {
  margin-bottom: 0;
}

.section-head p:last-child,
.related-guides p {
  color: var(--muted);
}

.guide-toolbar {
  margin: 18px 0 16px;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: end;
}

.guide-toolbar label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
  font-size: .86rem;
}

.guide-toolbar input {
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--ink);
  background: #ffffff;
  font: inherit;
  font-weight: 700;
}

.guide-toolbar input:focus {
  outline: 3px solid color-mix(in srgb, var(--template-accent) 24%, transparent);
  border-color: var(--template-accent);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.filter-chip {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px;
  background: #ffffff;
  color: var(--muted);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.filter-chip.active,
.filter-chip:hover {
  border-color: color-mix(in srgb, var(--template-accent) 50%, var(--line));
  background: color-mix(in srgb, var(--template-accent) 14%, #ffffff);
  color: var(--template-ink);
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.entry-grid,
.category-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.entry-card,
.category-hub-card {
  min-height: 164px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
}

.entry-card span,
.category-hub-card span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--template-support) 14%, #ffffff);
  color: var(--template-ink);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.entry-card strong,
.category-hub-card strong {
  color: var(--template-ink);
  font-size: 1.08rem;
}

.entry-card small,
.category-hub-card small {
  color: var(--muted);
  line-height: 1.45;
}

.latest-list,
.hub-list {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.latest-list li,
.hub-list-item,
.article-side-block,
.article-toc,
.next-step {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.latest-list li {
  display: grid;
  gap: 4px;
}

.latest-list small,
.hub-list-item p,
.next-step p {
  color: var(--muted);
}

.breadcrumb {
  justify-content: flex-start;
  margin-bottom: 18px;
  gap: 8px;
}

.breadcrumb a,
.breadcrumb span {
  min-height: 0;
  padding: 4px 0;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 800;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 30px;
  align-items: start;
}

.article-layout > * {
  min-width: 0;
}

.article-sidebar {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 14px;
  padding-top: 34px;
}

.article-side-block h2,
.article-toc h2 {
  margin-top: 0;
  font-size: 1rem;
}

.article-side-block ul,
.article-toc ol {
  margin-bottom: 0;
  padding-left: 20px;
}

.next-step {
  margin-top: 24px;
}

.build-plan-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.build-plan-module {
  min-height: 190px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.build-plan-module span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--template-accent) 14%, #ffffff);
  color: var(--template-ink);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.build-plan-module strong {
  color: var(--template-ink);
  font-size: 1.08rem;
}

.build-plan-module p,
.build-plan-module small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.build-plan-module a {
  color: var(--template-ink);
  font-weight: 900;
}

.guide-card {
  min-height: 210px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.guide-card:hover {
  border-color: color-mix(in srgb, var(--template-accent) 60%, var(--line));
  box-shadow: 0 18px 38px rgba(15, 23, 42, .11);
  transform: translateY(-2px);
}

.guide-card.hidden { display: none; }

.card-kicker {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--template-support) 20%, #ffffff);
  color: var(--template-ink);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.guide-card strong {
  color: var(--template-ink);
  font-size: 1.18rem;
  line-height: 1.25;
}

.guide-card small,
.guide-card .card-note {
  color: var(--muted);
  line-height: 1.5;
}

.guide-card .card-note {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}

.guide-empty {
  margin: 16px 0 0;
  padding: 15px 16px;
  border: 1px dashed color-mix(in srgb, var(--template-accent) 48%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--template-accent) 8%, #ffffff);
  color: var(--template-ink);
  font-weight: 900;
}

.calendar-status {
  margin: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-status span,
.calendar-status strong,
.related-grid span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 11px;
  background: #ffffff;
  color: var(--template-ink);
  font-weight: 900;
}

.calendar-grid,
.source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.calendar-item,
.source-item {
  min-height: 166px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.calendar-item span,
.source-item span {
  display: inline-grid;
  min-width: 38px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: var(--template-ink);
  color: #ffffff;
  font-weight: 900;
}

.calendar-item strong,
.source-item strong {
  display: block;
  margin-top: 12px;
  color: var(--template-ink);
}

.calendar-item p,
.source-item p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .94rem;
}

.source-item a {
  color: var(--template-ink);
  font-weight: 900;
}

.related-guides {
  display: grid;
  grid-template-columns: minmax(250px, .42fr) minmax(0, 1fr);
  gap: 22px;
}

.related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-content: start;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.content-card {
  min-height: 160px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
}

.content-card:hover {
  border-color: color-mix(in srgb, var(--template-accent) 52%, var(--line));
  box-shadow: 0 18px 36px rgba(15, 23, 42, .08);
  transform: translateY(-2px);
}

.content-card span {
  color: var(--template-strong);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.content-card strong { font-size: 1.2rem; }
.content-card small { color: var(--muted); line-height: 1.5; }

.timeline {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.timeline div {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.timeline span { color: var(--muted); }

.monetize-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .56fr);
  gap: 28px;
  align-items: start;
}

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

.monetize-grid span {
  min-height: 82px;
  display: grid;
  place-items: center;
  padding: 14px;
  color: var(--template-ink);
  font-weight: 900;
  text-align: center;
}

.article-page {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding-top: 56px;
}

.utility-page {
  max-width: 920px;
  padding: 40px 0 26px;
}

.utility-hero {
  padding: 34px 0 18px;
  border-bottom: 1px solid var(--line);
}

.utility-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.policy-card {
  margin: 18px 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--template-accent) 7%, #ffffff), #ffffff 64%),
    #ffffff;
}

.policy-card h2 {
  color: var(--template-ink);
}

.policy-card p,
.policy-card li {
  color: var(--muted);
}

.contact-card {
  border-color: color-mix(in srgb, var(--template-accent) 40%, var(--line));
}

.playable-site {
  min-height: 100vh;
  background:
    repeating-linear-gradient(90deg, rgba(34, 197, 94, .07) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(37, 99, 235, .06) 0 1px, transparent 1px 42px),
    linear-gradient(180deg, #f7fbff, #eef5f3 58%, #f7fafc);
}

.playable-header,
.playable-main,
.playable-site footer {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
}

.playable-header {
  padding: 20px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.playable-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.playable-header nav a {
  padding: 9px 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  color: #334155;
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  background: rgba(255, 255, 255, .78);
}

.playable-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(310px, .72fr) minmax(420px, 1.28fr);
  gap: 22px;
  align-items: stretch;
  padding: 20px;
  border: 1px solid rgba(125, 145, 170, .18);
  border-radius: 30px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 28px 90px rgba(15, 23, 42, .12);
}

.playable-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 24px;
  pointer-events: none;
  z-index: -1;
  transform: rotate(-1.2deg);
}

.playable-copy {
  min-height: 520px;
  padding: 24px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(145deg, #172033, #22314b);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.playable-copy .eyebrow { color: #86efac; }

.playable-copy h1 {
  margin: 0;
  font-size: clamp(42px, 6vw, 76px);
  line-height: .95;
  letter-spacing: 0;
}

.playable-copy .description { color: #d8f3e5; }

.share-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0;
}

.playable-stage {
  min-height: 520px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(248, 250, 252, .96), rgba(236, 253, 245, .88));
  overflow: hidden;
  display: grid;
  gap: 12px;
}

.playable-stage .hero-memory-card {
  margin: 14px 14px 0;
  border-radius: 18px;
}

.game-frame-shell,
.mini-game-shell {
  min-height: 100%;
  padding: 14px;
}

.frame-toolbar,
.mini-game-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.frame-toolbar span,
.mini-game-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.frame-toolbar button,
.mini-game-head button,
.mini-game-controls button,
.wall-form button {
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  padding: 10px 14px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #22c55e, #2563eb);
  cursor: pointer;
}

.game-frame {
  width: 100%;
  min-height: 470px;
  border: 0;
  border-radius: 18px;
  background: #0f172a;
}

.iframe-fallback-card {
  margin-top: 12px;
  padding: 16px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(34, 197, 94, .24);
  border-radius: 18px;
  background: rgba(240, 253, 244, .92);
}

.iframe-fallback-card strong {
  color: #14532d;
  font-size: 1rem;
}

.iframe-fallback-card p {
  margin: 0;
  color: #47605a;
  font-weight: 700;
}

.iframe-fallback-card a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 8px 12px;
  color: #ffffff;
  background: #0f766e;
  font-weight: 900;
  text-decoration: none;
}

.mini-game-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mini-game-head strong {
  display: block;
  color: #172033;
  font-size: 36px;
  line-height: 1;
}

.mini-game-board {
  width: min(100%, 460px);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  border-radius: 24px;
  outline: none;
  background: #b7c2cf;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1);
}

.mini-cell {
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #172033;
  background: #e7edf3;
  font-size: clamp(20px, 5vw, 40px);
  font-weight: 950;
}

.mini-cell[data-value="2"] { background: #ecfdf5; }
.mini-cell[data-value="4"] { background: #dbeafe; }
.mini-cell[data-value="8"] { background: #fed7aa; color: #7c2d12; }
.mini-cell[data-value="16"] { background: #fdba74; color: #7c2d12; }
.mini-cell[data-value="32"] { background: #fca5a5; color: #7f1d1d; }
.mini-cell[data-value="64"] { background: #fb7185; color: #fff; }
.mini-cell[data-value="128"],
.mini-cell[data-value="256"],
.mini-cell[data-value="512"],
.mini-cell[data-value="1024"],
.mini-cell[data-value="2048"] { background: linear-gradient(135deg, #22c55e, #2563eb); color: #fff; }

.mini-game-shell p {
  margin: 0;
  color: #526174;
  text-align: center;
  font-weight: 700;
}

.mini-game-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.delayed-ad-slot { margin-top: 22px; }

.control-grid {
  margin: 22px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.control-grid article,
.leaderboard,
.player-wall {
  padding: 22px;
  border: 1px solid rgba(125, 145, 170, .18);
  border-radius: 22px;
  background: rgba(255, 255, 255, .88);
}

.control-grid span {
  color: var(--template-accent);
  font-weight: 950;
}

.control-grid strong,
.player-wall h2 {
  display: block;
  margin: 6px 0;
  color: #172033;
  font-size: 20px;
}

.ugc-zone {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin: 22px 0;
}

.leaderboard ol {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.leaderboard li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: #f1f5f9;
}

.leaderboard li span,
.leaderboard li b {
  font-weight: 950;
  color: #0f766e;
}

.player-wall p { color: #64748b; }

.wall-form {
  display: grid;
  gap: 10px;
}

.playable-seo-notes { margin-top: 22px; }

.intent-map,
.link-hub,
.mini-game-hub {
  margin-top: 22px;
  padding: 28px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.08);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
}

th,
td {
  padding: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  text-align: left;
  vertical-align: top;
}

th {
  color: #0f766e;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #eff6ff;
}

td small {
  display: block;
  margin-top: 6px;
  color: #64748b;
}

.link-hub-grid,
.mini-game-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.mini-game-hub-grid { grid-template-columns: 1.1fr 0.9fr; }

.link-hub-grid > div,
.mini-game-hub-grid > div {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.link-hub-grid h3,
.mini-game-hub-grid h3 {
  margin-top: 0;
}

.mini-game-hub-grid li {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.not-found-page {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

li { margin-bottom: 8px; }
details { margin-bottom: 12px; }
summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  font-weight: 800;
}
footer { padding: 28px 0 48px; color: var(--muted); }
.footer-links {
  margin-top: 12px;
  justify-content: flex-start;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: 0;
  color: var(--template-ink);
}

@media (max-width: 760px) {
  .site-header,
  .playable-header { align-items: flex-start; flex-direction: column; }
  nav { justify-content: flex-start; }
  .hero,
  .playable-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 24px;
  }
  .playable-copy,
  .playable-stage { min-height: auto; }
  .playable-copy { padding: 20px; }
  .game-frame { min-height: 360px; }
  .quick-meta,
  .signal-list,
  .timeline-strip,
  .guide-section,
  .article-layout,
  .guide-toolbar,
  .guide-grid,
  .entry-grid,
  .category-hub-grid,
  .build-plan-module-grid,
  .answer-grid,
  .calendar-grid,
  .source-grid,
  .design-system-grid,
  .related-guides,
  .link-hub-grid,
  .mini-game-hub-grid,
  .monetize-section,
  .control-grid,
  .ugc-zone {
    grid-template-columns: 1fr;
  }
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .article-sidebar {
    position: static;
    padding-top: 0;
  }
  .mini-game-controls { grid-template-columns: repeat(2, 1fr); }
  .filter-row { justify-content: flex-start; }
  .split-section,
  .content-grid { grid-template-columns: 1fr; }
  .search-panel,
  .release-calendar,
  .source-checklist,
  .build-plan-modules,
  .design-system-panel,
  .related-guides,
  .intent-map,
  .link-hub,
  .mini-game-hub { padding: 22px; }
  .table-scroll {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }
  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  table {
    min-width: 0;
    background: transparent;
  }
  thead {
    display: none;
  }
  tr {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
  }
  td {
    padding: 10px 0;
    border-bottom: 0;
  }
  td::before {
    display: block;
    margin-bottom: 4px;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  td:nth-child(1)::before { content: "Target query"; }
  td:nth-child(2)::before { content: "Search intent"; }
  td:nth-child(3)::before { content: "Page response"; }
  td:nth-child(4)::before { content: "Build note"; }
  .hero::before { display: none; }
  .design-badge-row span { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

.adsterra-canary-review {
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 56px) 16px;
}

.adsterra-canary-slot {
  inline-size: min(300px, 100%);
  aspect-ratio: 6 / 5;
  box-sizing: border-box;
  overflow: hidden;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px dashed rgba(103, 232, 249, 0.72);
  border-radius: 20px;
  background: #0f172a;
  color: #f8fafc;
  text-align: center;
  contain: layout paint;
}

.adsterra-canary-slot strong { font-size: 18px; line-height: 1.35; }
.adsterra-canary-slot span { color: #cbd5e1; font-size: 14px; line-height: 1.55; }
.adsterra-canary-slot .section-kicker { margin: 0; color: #67e8f9; }

.adsterra-canary-frame {
  display: block;
  inline-size: min(300px, calc(100vw - 8px));
  block-size: auto;
  aspect-ratio: 6 / 5;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  contain: layout paint;
}