:root {
  --ink: #08102d;
  --blue: #1648cf;
  --blue-dark: #09247e;
  --sky: #99e2ff;
  --cream: #fff1bf;
  --paper: #fffaf0;
  --orange: #ff6814;
  --green: #2ca84b;
  --purple: #7650d5;
  --red: #ec3942;
  --font: "Microsoft YaHei UI", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-display: "Microsoft YaHei UI", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-ui: "Bahnschrift SemiCondensed", "Arial Narrow", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
html { background: #0b2d9a; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-kerning: normal;
  text-rendering: geometricPrecision;
  background:
    radial-gradient(circle at 12% 8%, rgba(89, 208, 255, .4), transparent 28rem),
    radial-gradient(circle at 86% 90%, rgba(24, 90, 232, .45), transparent 34rem),
    linear-gradient(145deg, #1647cd 0%, #071f73 52%, #113ba9 100%);
}
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 9px 13px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.pixel-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 32px 32px;
}
.pixel-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 3px 4px);
  mix-blend-mode: overlay;
}

.viewport-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.game-console {
  width: 1840px;
  height: 1220px;
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr) 150px;
  padding: 0 30px 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff8d8 0%, #efd48c 100%);
  border: 8px solid var(--ink);
  border-radius: 48px 48px 86px 86px;
  box-shadow:
    0 16px 0 #06164e,
    0 30px 85px rgba(1, 7, 31, .58),
    inset 10px 10px 0 rgba(255,255,255,.78),
    inset -12px -12px 0 rgba(170, 120, 32, .22);
  transform: translate(-50%, -50%) scale(var(--console-scale, .78));
  transform-origin: center;
  transition: transform .2s ease-out;
}

.console-top {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 12px 6px 8px;
}
.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 1000;
  text-decoration: none;
  letter-spacing: .03em;
}
.brand-light {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: var(--orange);
  border: 4px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(8,16,45,.25);
}
.game-slot {
  min-width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 22px;
  color: #fff;
  background: var(--blue);
  border: 5px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.game-slot, .nav-dot, .page-readout, .action-buttons, .dpad { font-family: var(--font-ui); }
.game-slot span { font-size: 15px; font-weight: 1000; letter-spacing: .13em; }
.game-slot b { font-size: 17px; }
.console-status { justify-self: end; display: flex; align-items: center; gap: 8px; }
.console-status i { width: 8px; height: 26px; background: var(--ink); box-shadow: inset 3px 0 #315fe0; }
.console-status b { width: 22px; height: 22px; margin-left: 6px; background: var(--orange); border: 5px solid var(--ink); box-shadow: 0 0 0 4px #ffb358; }

.screen-bezel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
  padding: 12px;
  overflow: hidden;
  background: var(--ink);
  border-radius: 30px;
  box-shadow: inset 0 0 0 6px #1b3274;
}
.screen-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.nav-dot {
  width: 38px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #bcd5ff;
  font-size: 15px;
  font-weight: 1000;
  cursor: pointer;
  background: #173683;
  border: 3px solid #07102e;
  box-shadow: 3px 3px 0 #02091c;
}
.nav-dot:hover, .nav-dot:focus-visible { color: #fff; outline: 3px solid var(--sky); outline-offset: 2px; }
.nav-dot.is-active { color: var(--ink); background: var(--cream); transform: translateY(2px); box-shadow: 1px 1px 0 #02091c; }

.game-screen {
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #9ee4ff;
  border: 6px solid #204fc3;
  border-radius: 18px;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.45), inset 0 0 70px rgba(7, 44, 135, .2);
  touch-action: pan-y;
}
.game-screen:focus-visible { outline: 5px solid #fff; outline-offset: -10px; }
.edge-nav {
  width: 78px;
  height: 210px;
  position: absolute;
  z-index: 18;
  top: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  color: #fff;
  font: 1000 72px/1 system-ui, sans-serif;
  border: 0;
  opacity: .025;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .18s ease, filter .18s ease, width .18s ease;
  filter: blur(.6px);
}
.edge-nav span { position: relative; z-index: 1; text-shadow: 0 4px 0 rgba(8,16,45,.72); transform: translateY(-4px); }
.edge-prev { left: 0; border-radius: 0 48px 48px 0; background: linear-gradient(90deg, rgba(8,16,45,.82), rgba(8,16,45,.06)); }
.edge-next { right: 0; border-radius: 48px 0 0 48px; background: linear-gradient(270deg, rgba(8,16,45,.82), rgba(8,16,45,.06)); }
.game-screen:hover .edge-nav:not(:disabled) { opacity: .13; }
.edge-nav:hover:not(:disabled), .edge-nav:focus-visible { width: 92px; opacity: .94; filter: none; outline: 4px solid rgba(255,255,255,.88); outline-offset: -8px; }
.edge-nav:active:not(:disabled) { opacity: 1; }
.edge-nav:disabled { opacity: 0; pointer-events: none; }
.scanlines {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .14;
  background: repeating-linear-gradient(0deg, transparent 0 4px, #0c347e 4px 5px);
  mix-blend-mode: multiply;
}
.slide-track {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  display: flex;
  will-change: left;
  transition: left .48s cubic-bezier(.22,.82,.22,1);
}
.slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  flex: 0 0 100%;
  overflow: hidden;
  isolation: isolate;
}
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(140deg, rgba(255,255,255,.72), rgba(255,255,255,.05) 38%),
    linear-gradient(180deg, #a3e8ff 0%, #6bc7ef 60%, #96d77e 100%);
}
.slide::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  opacity: .48;
  background:
    linear-gradient(135deg, transparent 42%, #347341 43% 55%, transparent 56%) 0 0 / 240px 130px,
    linear-gradient(45deg, transparent 45%, #4e9349 46% 58%, transparent 59%) 80px 30px / 280px 160px,
    linear-gradient(180deg, #5da64d, #2f6e35);
  clip-path: polygon(0 58%, 9% 38%, 18% 50%, 29% 20%, 39% 45%, 51% 15%, 63% 42%, 75% 22%, 87% 44%, 100% 19%, 100% 100%, 0 100%);
}

.eyebrow, .level { margin: 0; font-family: var(--font-ui); font-weight: 1000; letter-spacing: .08em; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.eyebrow span { padding: 6px 10px; color: #fff; background: var(--orange); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.level { color: #0c4bc6; font-size: 17px; letter-spacing: .17em; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 1000; }

.slide-hero {
  display: grid;
  grid-template-columns: 1.08fr .82fr;
  gap: 36px;
  align-items: center;
  padding: 58px 72px 48px;
}
.hero-copy { min-width: 0; position: relative; z-index: 3; }
.hero-copy h1 { max-width: 920px; margin-top: 24px; font-size: clamp(72px, 6vw, 106px); line-height: 1; letter-spacing: -.045em; }
.hero-copy h1 em { display: block; color: var(--blue); font-style: normal; text-shadow: 4px 4px 0 rgba(255,255,255,.62); }
.hero-lede { max-width: 840px; margin: 26px 0 0; font-size: 24px; line-height: 1.62; font-weight: 780; letter-spacing: .005em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 30px; }
.pixel-button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 22px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 1000;
  cursor: pointer;
  background: rgba(255,255,255,.62);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pixel-button.primary { color: #fff; background: var(--blue); }
.pixel-button b { font-size: 22px; }
.pixel-button:hover, .pixel-button:focus-visible { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--ink); outline: 4px solid #fff; outline-offset: 3px; }
.hero-art { min-width: 0; position: relative; align-self: stretch; display: grid; place-items: center; }
.hero-art::before { content: ""; position: absolute; width: 88%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.72) 0 36%, rgba(255,255,255,.12) 37% 54%, transparent 55%); box-shadow: inset 0 0 0 5px rgba(8,16,45,.15); }
.hero-art::after { content: ""; width: 82px; height: 58px; position: absolute; z-index: 1; left: 4%; top: 36%; background: #fff8d7; border: 4px solid var(--ink); box-shadow: 5px 5px 0 rgba(8,16,45,.35); transform: rotate(-8deg); animation: paper-feed 3.8s steps(4) infinite; }
.hero-art img { width: min(94%, 620px); position: relative; z-index: 2; filter: drop-shadow(12px 16px 0 rgba(8,16,45,.14)); transform-origin: 55% 62%; }
.slide.is-active .hero-art img { animation: mascot-bob 3.8s ease-in-out infinite; }
.hero-art:hover img { animation-play-state: paused; transform: translateY(-8px) rotate(1deg) scale(1.025); }
.ready-badge { position: absolute; z-index: 4; right: 5%; top: 10%; padding: 8px 12px; color: #fff; font-weight: 1000; background: var(--green); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); animation: ready-blink 2.4s steps(1) infinite; }
.paper-chip { position: absolute; z-index: 4; padding: 7px 10px; color: #fff; font-size: 14px; font-weight: 1000; border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.chip-in { left: 1%; top: 25%; background: var(--orange); transform: rotate(-6deg); }
.chip-out { right: 0; bottom: 24%; background: var(--blue); transform: rotate(5deg); }
.mascot-status { position: absolute; z-index: 4; left: 50%; bottom: 4%; padding: 9px 14px; color: #fff; font-size: 14px; font-weight: 1000; background: var(--ink); border: 3px solid #fff; transform: translateX(-50%); white-space: nowrap; }

.slide-heading h2, .platform-copy h2, .try-copy h2 { margin-top: 14px; font-size: clamp(62px, 5vw, 88px); line-height: 1.03; letter-spacing: -.04em; }
.slide-heading > p:last-child { max-width: 650px; margin: 20px 0 0; font-size: 22px; line-height: 1.55; font-weight: 780; }

.slide-steps {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 48px;
  align-items: center;
  padding: 58px 66px;
}
.slide-steps .slide-heading { position: relative; z-index: 3; align-self: start; padding-top: 25px; }
.steps-grid { min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 3; }
.step-card { min-height: 330px; padding: 28px; background: var(--cream); border: 5px solid var(--ink); box-shadow: 9px 10px 0 rgba(8,16,45,.72); }
.step-card.orange { background: #d8f2ff; }
.step-card.green { background: #e2ffd5; }
.step-card > span { color: var(--blue); font-family: var(--font-ui); font-size: 18px; font-weight: 1000; }
.step-card > b { width: 68px; height: 68px; display: grid; place-items: center; margin: 26px 0 24px; color: #fff; font-size: 34px; background: var(--blue); border: 5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.step-card.orange > b { background: var(--orange); }
.step-card.green > b { background: var(--green); }
.step-card h3 { font-size: 32px; line-height: 1.12; }
.step-card p { margin: 15px 0 0; font-size: 20px; line-height: 1.5; font-weight: 740; }
.steps-guide { position: absolute; z-index: 2; left: 30px; bottom: -38px; display: grid; justify-items: center; }
.steps-mascot { width: 260px; opacity: .92; filter: drop-shadow(8px 10px 0 rgba(8,16,45,.12)); transform: rotate(4deg); }
.steps-guide span { position: absolute; right: -30px; top: 30px; padding: 8px 12px; color: #fff; font-size: 14px; font-weight: 1000; white-space: nowrap; background: var(--blue); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(3deg); }
.slide.is-active .steps-guide { animation: helper-hop 3.6s ease-in-out infinite; }

.slide-scenes { display: grid; grid-template-columns: .62fr 1.38fr; gap: 30px; align-items: stretch; padding: 42px 52px 46px; }
.scenes-intro { min-width: 0; position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; }
.slide-heading.compact { display: block; }
.slide-heading.compact h2 { max-width: 650px; }
.slide-heading.compact > p:last-child { max-width: 500px; }
.scenes-guide { min-height: 270px; position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; }
.scenes-guide img { width: 260px; align-self: end; filter: drop-shadow(8px 10px 0 rgba(8,16,45,.12)); }
.scenes-guide span { align-self: center; margin-left: -20px; padding: 12px 14px; color: #fff; font-size: 17px; line-height: 1.35; font-weight: 1000; background: var(--orange); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-2deg); }
.slide.is-active .scenes-guide img { animation: helper-hop 3.9s ease-in-out infinite .3s; }
.scene-grid { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; position: relative; z-index: 2; }
.scene-card { min-width: 0; display: grid; grid-template-rows: minmax(120px, .95fr) auto; padding: 12px; overflow: hidden; background: rgba(255,250,236,.94); border: 5px solid var(--ink); box-shadow: 7px 8px 0 rgba(8,16,45,.68); transition: transform .18s ease, box-shadow .18s ease; }
.scene-card:nth-child(2) { background: rgba(220,244,255,.95); }
.scene-card:nth-child(3) { background: rgba(229,255,215,.95); }
.scene-card:nth-child(4) { background: rgba(243,232,255,.95); }
.scene-card:hover { transform: translateY(-6px); box-shadow: 10px 13px 0 rgba(8,16,45,.72); }
.slide.is-active .scene-card { animation: card-pop .46s cubic-bezier(.2,.85,.2,1) both; }
.slide.is-active .scene-card:nth-child(2) { animation-delay: .06s; }
.slide.is-active .scene-card:nth-child(3) { animation-delay: .12s; }
.slide.is-active .scene-card:nth-child(4) { animation-delay: .18s; }
.scene-visual { min-height: 0; overflow: hidden; background: rgba(255,255,255,.38); border: 3px solid var(--ink); }
.scene-visual svg { width: 100%; height: 100%; display: block; transition: transform .2s ease; }
.scene-card:hover .scene-visual svg { transform: scale(1.035); }
.scene-copy { min-width: 0; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 11px; padding: 13px 4px 2px; }
.scene-copy > b { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; color: #fff; font-size: 13px; background: var(--blue); border: 3px solid var(--ink); }
.scene-copy h3 { font-size: 27px; line-height: 1.12; }
.scene-copy p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.4; font-weight: 740; }
.scene-visual .scene-bg { fill: #8edcff; stroke: #08102d; stroke-width: 5; }
.scene-visual .window, .scene-visual .content-sheet, .scene-visual .chat-window { fill: #fff8d7; stroke: #08102d; stroke-width: 5; }
.scene-visual .back { fill: #d7efff; }
.scene-visual .front { fill: #fff1bf; }
.scene-visual .rail, .scene-visual .phone-line, .scene-visual .content-line, .scene-visual .clock-hand, .scene-visual .question, .scene-visual .share-arrow, .scene-visual .search-handle, .scene-visual .spark { fill: none; stroke: #08102d; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.scene-visual .head { fill: #ffcf9e; stroke: #08102d; stroke-width: 5; }
.scene-visual .body { fill: #1648cf; stroke: #08102d; stroke-width: 5; }
.scene-visual .phone { fill: #08102d; stroke: #ff6814; stroke-width: 5; }
.scene-visual .phone-line { stroke: #fff; stroke-width: 3; }
.scene-visual .clock { fill: #ff6814; stroke: #08102d; stroke-width: 5; }
.scene-visual .question { stroke: #ff6814; stroke-width: 6; }
.scene-visual .person-b { fill: #2ca84b; }
.scene-visual .share-card { fill: #fff; stroke: #08102d; stroke-width: 5; }
.scene-visual .share-arrow { stroke: #ff6814; }
.scene-visual .bubble { fill: #fff; stroke: #08102d; stroke-width: 4; }
.scene-visual .two { fill: #e2ffd5; }
.scene-visual .search { fill: #fff1bf; stroke: #08102d; stroke-width: 6; }
.scene-visual .search-handle, .scene-visual .spark { stroke: #1648cf; stroke-width: 6; }

.slide-platforms {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 34px;
  align-items: center;
  padding: 48px 62px;
}
.platform-copy { position: relative; z-index: 2; }
.platform-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.platform-grid section { min-height: 126px; display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 17px; padding: 18px; color: #fff; border: 5px solid var(--ink); box-shadow: 7px 8px 0 rgba(8,16,45,.7); transition: transform .18s ease, box-shadow .18s ease; }
.platform-grid section:hover { transform: translateY(-5px); box-shadow: 9px 12px 0 rgba(8,16,45,.74); }
.platform-logo { width: 64px; height: 64px; display: grid; place-items: center; padding: 11px; background: #fff; border: 4px solid var(--ink); box-shadow: 4px 4px 0 rgba(8,16,45,.34); }
.platform-logo img { width: 100%; height: 100%; object-fit: contain; }
.platform-text { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.platform-grid b { font-family: var(--font-display); font-size: 32px; }
.platform-grid small { font-size: 17px; line-height: 1.35; font-weight: 780; }
.platform-grid .xhs { background: #ef4054; }
.platform-grid .douyin { background: #14192e; }
.platform-grid .wechat { background: #22a84a; }
.platform-grid .bilibili { background: #4aa9d4; }
.community-card { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items: end; gap: 8px; padding: 34px 18px 28px 34px; overflow: hidden; background: linear-gradient(145deg, #f5e8ff, #dff4ff); border: 6px solid var(--ink); border-radius: 32px; box-shadow: 10px 12px 0 rgba(8,16,45,.72); transform: rotate(1deg); }
.community-copy { min-width: 0; position: relative; z-index: 2; }
.community-copy > span { color: #0a58c8; font-family: var(--font-ui); font-size: 16px; font-weight: 1000; letter-spacing: .15em; }
.community-card h3 { margin-top: 17px; font-size: clamp(38px, 3.4vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.community-card p { margin: 20px 0 0; font-size: 20px; line-height: 1.5; font-weight: 740; }
.community-card ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; list-style: none; }
.community-card li { padding: 8px 10px; font-size: 15px; font-weight: 900; background: #fff; border: 3px solid var(--ink); }
.community-mascot { width: 205px; align-self: end; margin: 0 -12px -32px -30px; filter: drop-shadow(8px 10px 0 rgba(8,16,45,.12)); transform: rotate(-5deg); }
.slide.is-active .community-mascot { animation: helper-hop 4s ease-in-out infinite .2s; }

.slide-try {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 48px;
  align-items: center;
  padding: 52px 76px;
}
.try-copy { position: relative; z-index: 2; }
.try-copy > p:not(.level) { max-width: 780px; margin: 25px 0 0; font-size: 23px; line-height: 1.58; font-weight: 760; }
.support-line { max-width: 720px; display: flex; align-items: center; gap: 14px; margin-top: 30px; padding: 15px 18px; background: rgba(255,255,255,.7); border: 4px solid var(--ink); }
.support-line b { flex: 0 0 auto; color: #fff; padding: 6px 9px; background: var(--blue); }
.support-line span { font-size: 18px; font-weight: 820; }
.qr-console { width: 310px; position: relative; z-index: 3; justify-self: center; padding: 18px; text-align: center; background: var(--blue); border: 6px solid var(--ink); box-shadow: 10px 12px 0 rgba(8,16,45,.7); zoom: var(--qr-zoom, 1.28205); }
.qr-console > p { margin: 0 0 15px; color: #fff; font-family: var(--font-ui); font-size: 17px; font-weight: 1000; letter-spacing: .14em; }
.qr-console > b { display: block; margin-top: 16px; color: #fff; font-size: 18px; }
.qr-window { width: 230px; height: 230px; position: relative; margin: 0 auto; overflow: hidden; background: #fff; border: 5px solid var(--ink); image-rendering: pixelated; }
.qr-window img { width: 940px; height: 1672px; max-width: none; position: absolute; left: -623px; top: -1424px; image-rendering: pixelated; }
.console-controls {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  gap: 20px;
  padding: 18px 68px 0;
}
.dpad { width: 150px; height: 104px; position: relative; justify-self: start; }
.dpad::before, .dpad::after { content: ""; position: absolute; background: var(--ink); box-shadow: 6px 7px 0 #314172; }
.dpad::before { width: 150px; height: 60px; left: 0; top: 22px; }
.dpad::after { width: 60px; height: 104px; left: 45px; top: 0; }
.dpad button { width: 48px; height: 48px; position: absolute; z-index: 3; display: grid; place-items: center; padding: 0; color: #fff; font-size: 20px; cursor: pointer; background: #1c2c59; border: 3px solid #384d83; }
.dpad button:hover, .dpad button:focus-visible { color: var(--sky); outline: 4px solid var(--blue); outline-offset: 2px; }
.dpad button:disabled, .action-buttons button:disabled { opacity: .35; cursor: not-allowed; }
.dpad-left { left: 7px; top: 28px; }
.dpad-right { right: 7px; top: 28px; }
.dpad i { width: 24px; height: 24px; position: absolute; z-index: 4; left: 63px; top: 40px; pointer-events: none; background: #19264b; border: 2px solid #30406c; }
.page-readout { justify-self: center; display: grid; justify-items: center; gap: 6px; }
.page-readout b { min-width: 126px; padding: 9px 16px; color: #fff; font-size: 18px; text-align: center; background: #172d73; border: 4px solid var(--ink); }
.page-readout span { font-size: 13px; font-weight: 900; letter-spacing: .07em; }
.action-buttons { justify-self: end; display: flex; gap: 18px; transform: rotate(-8deg); }
.action-buttons button { width: 76px; height: 76px; padding: 0; color: #fff; font-size: 24px; font-weight: 1000; cursor: pointer; border: 6px solid var(--ink); border-radius: 50%; box-shadow: 6px 7px 0 #8a2c0d; }
.action-buttons button:hover, .action-buttons button:focus-visible { outline: 5px solid var(--blue); outline-offset: 3px; transform: translate(2px,2px); }
.button-a { background: var(--orange); }
.button-b { background: var(--purple); }

@keyframes ready-blink { 0%, 80%, 100% { filter: brightness(1); } 85%, 92% { filter: brightness(1.35); } }
@keyframes mascot-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 48% { transform: translateY(-12px) rotate(1deg); } 56% { transform: translateY(-8px) rotate(0deg); } }
@keyframes helper-hop { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes paper-feed { 0%,22% { transform: translate(-18px,16px) rotate(-9deg); opacity: .25; } 46%,72% { transform: translate(36px,-12px) rotate(-3deg); opacity: 1; } 100% { transform: translate(86px,-52px) rotate(4deg); opacity: 0; } }
@keyframes card-pop { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes power-ping { 0%,100% { transform: scale(1); } 48% { transform: scale(1.45); background: #ffdf3c; } }
.game-console.is-turning .brand-light, .game-console.is-turning .console-status b { animation: power-ping .42s steps(3); }

@media (max-width: 900px) {
  .game-console {
    width: calc(100vw - 12px);
    height: calc(100svh - 12px);
    grid-template-rows: 52px minmax(0, 1fr) 86px;
    padding: 0 8px 10px;
    border-width: 5px;
    border-radius: 24px 24px 38px 38px;
    box-shadow: 0 8px 0 #06164e, 0 18px 42px rgba(1,7,31,.55), inset 5px 5px 0 rgba(255,255,255,.75), inset -6px -6px 0 rgba(170,120,32,.2);
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }
  .console-top { grid-template-columns: 1fr auto; gap: 8px; padding: 7px 3px 5px; }
  .brand { gap: 7px; font-size: 14px; }
  .brand-light { width: 14px; height: 14px; border-width: 3px; }
  .game-slot { min-width: 0; gap: 7px; padding: 6px 8px; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); }
  .game-slot span { display: none; }
  .game-slot b { font-size: 12px; }
  .console-status { display: none; }
  .screen-bezel { grid-template-rows: 38px minmax(0,1fr); padding: 7px; border-radius: 16px; box-shadow: inset 0 0 0 3px #1b3274; }
  .screen-nav { gap: 7px; }
  .nav-dot { width: 31px; height: 25px; font-size: 12.5px; border-width: 2px; box-shadow: 2px 2px 0 #02091c; }
  .game-screen { border-width: 4px; border-radius: 11px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), inset 0 0 35px rgba(7,44,135,.18); }
  .edge-nav { display: none; }

  .slide { padding: 18px; }
  .slide::after { height: 23%; opacity: .36; }
  .eyebrow { gap: 7px; font-size: 12px; }
  .eyebrow span { padding: 4px 6px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  .level { font-size: 12px; }

  .slide-hero { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 6px; align-items: start; padding: 20px 18px 12px; }
  .hero-copy h1 { max-width: none; margin-top: 12px; font-size: clamp(37px, 10.4vw, 46px); line-height: 1.01; letter-spacing: -.035em; }
  .hero-copy h1 em { display: inline; }
  .hero-lede { margin-top: 12px; font-size: 14.5px; line-height: 1.5; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .pixel-button { min-height: 42px; padding: 8px 9px; font-size: 13.5px; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); }
  .pixel-button b { font-size: 16px; }
  .hero-art { min-height: 0; align-self: stretch; place-items: end center; }
  .hero-art::before { width: 165px; }
  .hero-art::after { width: 38px; height: 28px; left: calc(50% - 96px); top: 36%; border-width: 2px; box-shadow: 2px 2px 0 rgba(8,16,45,.28); }
  .hero-art img { width: 184px; filter: drop-shadow(5px 6px 0 rgba(8,16,45,.1)); }
  .ready-badge { right: calc(50% - 93px); top: 10px; padding: 4px 7px; font-size: 10px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  .paper-chip { padding: 3px 5px; font-size: 8px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  .chip-in { left: calc(50% - 106px); top: 25%; }
  .chip-out { right: calc(50% - 106px); bottom: 20%; }
  .mascot-status { bottom: 0; padding: 4px 7px; font-size: 10.5px; border-width: 2px; }

  .slide-heading h2, .platform-copy h2, .try-copy h2 { margin-top: 7px; font-size: clamp(34px, 9.2vw, 41px); line-height: 1.02; letter-spacing: -.035em; }
  .slide-heading > p:last-child { margin-top: 9px; font-size: 13.5px; line-height: 1.4; }

  .slide-steps { display: block; padding: 17px; }
  .slide-steps .slide-heading { padding: 0; }
  .steps-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 7px; }
  .step-card { min-height: 0; display: grid; grid-template-columns: 32px 42px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 9px; padding: 10px 11px; border-width: 3px; box-shadow: 4px 4px 0 rgba(8,16,45,.65); }
  .step-card > span { grid-row: 1 / 3; font-size: 12px; }
  .step-card > b { grid-row: 1 / 3; width: 38px; height: 38px; margin: 0; font-size: 20px; border-width: 3px; box-shadow: 2px 2px 0 var(--ink); }
  .step-card h3 { font-size: 18px; }
  .step-card p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.32; }
  .steps-guide { display: none; }

  .slide-scenes { display: block; padding: 14px; }
  .scenes-intro { display: block; }
  .slide-heading.compact { display: block; }
  .slide-scenes .slide-heading.compact > p:last-child { display: none; }
  .scenes-guide { display: none; }
  .scene-grid { height: calc(100% - 102px); margin-top: 7px; gap: 6px; }
  .scene-card { grid-template-rows: 74px minmax(0,1fr); padding: 6px; border-width: 3px; box-shadow: 4px 4px 0 rgba(8,16,45,.6); }
  .scene-visual { border-width: 2px; }
  .scene-copy { grid-template-columns: 26px 1fr; column-gap: 5px; padding: 5px 1px 0; }
  .scene-copy > b { width: 24px; height: 24px; font-size: 8px; border-width: 2px; }
  .scene-copy h3 { font-size: 13.5px; line-height: 1.12; }
  .scene-copy p { margin-top: 3px; font-size: 11.5px; line-height: 1.28; }

  .slide-platforms { display: block; padding: 16px; }
  .platform-grid { margin-top: 10px; gap: 7px; }
  .platform-grid section { min-height: 72px; grid-template-columns: 36px 1fr; gap: 8px; padding: 8px; border-width: 3px; box-shadow: 3px 3px 0 rgba(8,16,45,.65); }
  .platform-logo { width: 32px; height: 32px; padding: 5px; border-width: 2px; box-shadow: 2px 2px 0 rgba(8,16,45,.28); }
  .platform-text { gap: 2px; }
  .platform-grid b { font-size: 17px; }
  .platform-grid small { font-size: 11.5px; line-height: 1.28; }
  .community-card { grid-template-columns: minmax(0,1fr) 82px; gap: 3px; margin-top: 10px; padding: 12px 4px 10px 12px; border-width: 3px; border-radius: 14px; box-shadow: 4px 4px 0 rgba(8,16,45,.65); transform: none; }
  .community-copy > span { font-size: 10.5px; }
  .community-card h3 { margin-top: 4px; font-size: 23px; }
  .community-card h3 br { display: none; }
  .community-card p { margin-top: 6px; font-size: 12.5px; line-height: 1.34; }
  .community-card ul { gap: 4px; margin-top: 7px; }
  .community-card li { padding: 4px 6px; font-size: 11.5px; border-width: 2px; }
  .community-mascot { width: 94px; margin: 0 -6px -18px -18px; filter: drop-shadow(3px 4px 0 rgba(8,16,45,.1)); }

  .slide-try { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 8px; align-items: start; padding: 17px; text-align: center; }
  .try-copy > p:not(.level) { margin: 9px auto 0; font-size: 13px; line-height: 1.38; }
  .support-line { display: none; }
  .qr-console { width: 256px; align-self: center; padding: 11px; border-width: 4px; box-shadow: 5px 6px 0 rgba(8,16,45,.68); zoom: 1; }
  .qr-console > p { margin-bottom: 7px; font-size: 11.5px; }
  .qr-console > b { margin-top: 7px; font-size: 12.5px; }
  .qr-window { width: 230px; height: 230px; border-width: 4px; }
  .qr-window img { width: 940px; height: 1672px; left: -623px; top: -1424px; }
  .console-controls { grid-template-columns: 86px 1fr 92px; gap: 6px; padding: 6px 12px 0; }
  .dpad { width: 78px; height: 58px; }
  .dpad::before { width: 78px; height: 34px; top: 12px; box-shadow: 3px 4px 0 #314172; }
  .dpad::after { width: 34px; height: 58px; left: 22px; box-shadow: 3px 4px 0 #314172; }
  .dpad button { width: 28px; height: 28px; font-size: 12px; border-width: 2px; }
  .dpad-left { left: 2px; top: 15px; }
  .dpad-right { right: 2px; top: 15px; }
  .dpad i { width: 14px; height: 14px; left: 32px; top: 22px; border-width: 1px; }
  .page-readout { gap: 2px; }
  .page-readout b { min-width: 76px; padding: 4px 8px; font-size: 12px; border-width: 2px; }
  .page-readout span { font-size: 10.5px; letter-spacing: 0; }
  .action-buttons { gap: 7px; }
  .action-buttons button { width: 38px; height: 38px; font-size: 13px; border-width: 3px; box-shadow: 3px 4px 0 #8a2c0d; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .slide-track { will-change: auto; }
}