:root {
  --black: #101010;
  --paper: #f0eee7;
  --red: #ff4a2e;
  --blue: #3155ff;
  --yellow: #f9d84b;
  --green: #a6e85b;
  --dock-height: 94px;
  --shell: min(1220px, calc(100% - 72px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--black);
  background: var(--paper);
  font-family: Arial, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--dock-height);
}
body, a, button { cursor: none; }
a { color: inherit; text-decoration: none; }
.content-shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 14px; color: #fff; background: var(--black); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  width: 100%;
  height: 68px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  mix-blend-mode: difference;
}
.brand, .header-right { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.brand-symbol { font-size: 18px; }
.header-right { gap: 26px; }
.header-right a { position: relative; }
.header-right a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px; background: currentColor; transition: right .18s ease; }
.header-right a:hover::after { right: 0; }
.available { display: flex; align-items: center; gap: 7px; }
.available i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(166,232,91,.22); }

.hero {
  position: relative;
  height: calc(100svh - var(--dock-height));
  min-height: 590px;
  overflow: hidden;
  color: #fff;
  background: var(--blue);
  isolation: isolate;
}
.hero-canvas, .hero-noise { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-noise {
  z-index: 1;
  pointer-events: none;
  opacity: .12;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.15) 4px), repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.12) 6px);
  mix-blend-mode: soft-light;
}
.hero-copy { position: relative; z-index: 4; height: 100%; padding: 92px 4vw 42px; display: flex; flex-direction: column; justify-content: center; }
.hero-eyebrow { position: absolute; top: 92px; left: 4vw; margin: 0; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.hero-title { margin: 0; font-size: clamp(72px, 13.3vw, 198px); line-height: .71; letter-spacing: -.095em; font-weight: 900; text-transform: uppercase; }
.title-line { display: block; position: relative; width: max-content; }
.title-line-one { margin-left: 2vw; color: var(--paper); }
.title-line-two { margin-left: 24vw; color: var(--yellow); }
.title-line-three { margin-left: 6vw; color: var(--red); }
.title-line-three > span { display: inline-block; color: var(--green); transform: rotate(8deg); }
.hero-note { position: absolute; right: 5vw; bottom: 68px; display: flex; align-items: end; gap: 18px; }
.hero-note p { margin: 0; font-size: clamp(13px, 1.25vw, 17px); line-height: 1.5; font-weight: 700; }
.hero-note > span { font-size: 40px; }
.hero-index { position: absolute; z-index: 4; left: 28px; right: 28px; bottom: 22px; display: flex; justify-content: space-between; font-size: 8px; font-weight: 900; letter-spacing: .15em; }

.hero-orbit { position: absolute; z-index: 2; pointer-events: none; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; }
.orbit-a { width: 52vw; height: 25vw; right: -11vw; top: 3vh; transform: rotate(-20deg); animation: orbit-a 12s ease-in-out infinite alternate; }
.orbit-b { width: 34vw; height: 34vw; left: -9vw; bottom: -17vw; border-color: var(--yellow); animation: orbit-b 15s ease-in-out infinite alternate; }
@keyframes orbit-a { to { transform: rotate(-8deg) translate(-4vw, 5vh); } }
@keyframes orbit-b { to { transform: rotate(24deg) translate(7vw, -6vh); } }
.hero-object { position: absolute; z-index: 3; display: grid; place-items: center; pointer-events: none; border: 3px solid var(--black); box-shadow: 10px 10px 0 var(--black); font-weight: 900; }
.object-a { top: 13%; right: 8%; width: clamp(85px, 11vw, 160px); aspect-ratio: 1; color: var(--black); background: var(--yellow); border-radius: 50%; animation: float-a 5s ease-in-out infinite alternate; }
.object-a span { animation: spin 10s linear infinite; }
.object-b { left: 46%; bottom: 7%; width: clamp(72px, 8vw, 116px); aspect-ratio: 1; background: var(--red); border-radius: 50% 50% 4px 50%; transform: rotate(28deg); animation: float-b 6s ease-in-out infinite alternate; }
.object-c { left: 7%; top: 22%; width: clamp(64px, 7vw, 100px); aspect-ratio: 1; color: var(--paper); background: var(--black); font-size: clamp(38px, 5vw, 70px); transform: rotate(-12deg); animation: float-c 7s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes float-a { to { transform: translate(-28px, 25px) rotate(13deg); } }
@keyframes float-b { to { transform: translate(22px, -30px) rotate(43deg); } }
@keyframes float-c { to { transform: translate(18px, 35px) rotate(4deg); } }

.about { position: relative; overflow: hidden; background: var(--paper); }
.about-intro { position: relative; min-height: 1100px; padding-top: 130px; }
.section-index { margin: 0 0 80px; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.about-title { margin: 0; font-size: clamp(58px, 10vw, 148px); line-height: .78; letter-spacing: -.085em; font-weight: 900; }
.about-line { display: block; width: max-content; }
.line-left { margin-left: 2vw; }
.line-right { margin: 2vh 0 0 auto; color: var(--red); }
.line-tilt { margin: 10vh 0 0 11vw; color: var(--blue); transform: rotate(-4deg); }
.line-center { margin: 1vh auto 0; }
.floating-sticker { position: absolute; display: grid; place-items: center; width: 140px; height: 140px; border: 2px solid var(--black); box-shadow: 8px 8px 0 var(--black); font-size: 17px; line-height: 1.05; font-weight: 900; text-align: center; }
.sticker-red { top: 37%; left: 2%; color: #fff; background: var(--red); border-radius: 50%; transform: rotate(-12deg); }
.sticker-blue { right: 6%; bottom: 18%; color: #fff; background: var(--blue); transform: rotate(9deg); }
.about-lead { position: absolute; left: 8%; bottom: 7%; max-width: 510px; margin: 0; font-size: clamp(18px, 2vw, 26px); line-height: 1.55; font-weight: 700; }

.story-stage { position: relative; min-height: 1000px; padding-block: 80px 180px; }
.story-card { position: absolute; border: 2px solid var(--black); box-shadow: 12px 12px 0 var(--black); }
.story-card-yellow { z-index: 2; top: 8%; left: 2%; width: min(430px, 38vw); min-height: 330px; padding: 36px; background: var(--yellow); transform: rotate(-5deg); }
.story-card-yellow p { margin: 100px 0 0; font-size: clamp(24px, 3vw, 40px); line-height: 1.05; letter-spacing: -.045em; font-weight: 900; }
.card-no { font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.story-card-paper { z-index: 3; top: 35%; right: 3%; width: min(480px, 42vw); min-height: 390px; padding: 40px; background: #fff; transform: rotate(5deg); }
.story-card-paper h3 { margin: 74px 0 28px; font-size: 36px; letter-spacing: -.05em; }
.story-card-paper ul { margin: 0; padding: 0; list-style: none; }
.story-card-paper li { padding: 13px 0; border-top: 1px solid var(--black); font-size: 15px; font-weight: 700; }
.story-word { position: absolute; z-index: 1; top: 21%; left: 30%; color: var(--red); font-size: clamp(150px, 28vw, 430px); line-height: .7; letter-spacing: -.12em; font-weight: 900; transform: rotate(-9deg); opacity: .95; }
.story-ring { position: absolute; z-index: 4; left: 24%; bottom: 15%; width: 190px; height: 190px; display: grid; place-items: center; color: #fff; background: var(--blue); border: 2px solid var(--black); border-radius: 50%; box-shadow: 10px 10px 0 var(--black); transform: rotate(-13deg); }
.story-ring::after { content: ""; position: absolute; inset: 18px; border: 2px dashed #fff; border-radius: 50%; animation: spin 12s linear infinite; }
.story-ring span { font-size: 23px; font-weight: 900; }
.story-side { position: absolute; right: 8%; bottom: 4%; margin: 0; font-size: 17px; line-height: 1.65; font-weight: 700; }

.manifesto { overflow: hidden; color: #fff; background: var(--black); }
.manifesto-stripe { width: 110%; margin-left: -5%; padding: 18px 0; overflow: hidden; border-block: 1px solid #fff; transform: rotate(-2deg); background: var(--red); }
.manifesto-stripe span { display: block; width: max-content; font-size: 14px; font-weight: 900; letter-spacing: .1em; white-space: nowrap; animation: stripe-move 24s linear infinite; }
@keyframes stripe-move { to { transform: translateX(-45%); } }
.manifesto-body { min-height: 940px; padding-block: 140px 120px; }
.manifesto-small { margin: 0 0 30px; color: var(--yellow); font-size: 15px; font-weight: 900; }
.manifesto-title { margin: 0; font-size: clamp(58px, 9.8vw, 144px); line-height: .83; letter-spacing: -.085em; }
.manifesto-title span { display: block; }
.manifesto-title span:nth-child(2) { margin-left: 12vw; color: var(--red); transform: rotate(2deg); }
.manifesto-title span:nth-child(3) { margin-left: 4vw; color: var(--yellow); }
.manifesto-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10vw; margin-top: 100px; }
.manifesto-grid > p { max-width: 470px; margin: 0; font-size: clamp(17px, 2vw, 25px); line-height: 1.6; font-weight: 700; }
.manifesto-shape { position: relative; justify-self: center; width: 220px; height: 220px; display: grid; place-items: center; color: var(--black); background: var(--green); border-radius: 50% 50% 5% 50%; transform: rotate(20deg); }
.manifesto-shape span { font-size: 100px; font-weight: 900; transform: rotate(-20deg); }
.manifesto-shape i { position: absolute; inset: -26px; border: 2px solid var(--green); border-radius: 50%; animation: spin 15s linear infinite; }

.contact { min-height: 820px; overflow: hidden; color: var(--black); background: var(--yellow); }
.contact-inner { padding-block: 130px 100px; }
.contact-kicker { margin: 0 0 22px; font-size: 17px; font-weight: 800; }
.contact-title { margin: 0; font-size: clamp(88px, 17vw, 250px); line-height: .72; letter-spacing: -.1em; }
.contact-title span { color: var(--blue); }
.contact-links { margin-top: 90px; padding-top: 22px; display: flex; justify-content: space-between; gap: 24px; border-top: 2px solid var(--black); font-size: 13px; font-weight: 900; }
.contact-links a:hover { color: var(--red); }
.site-footer { height: 64px; padding: 0 28px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; color: #fff; background: var(--black); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.site-footer i { font-style: normal; }
.site-footer span:nth-child(2) { text-align: center; }
.site-footer a { text-align: right; }

.game-dock {
  position: fixed;
  z-index: 200;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dock-height);
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: stretch;
  color: var(--black);
  background: transparent;
  pointer-events: none;
}
.dock-label { display: flex; align-items: center; align-self: stretch; padding: 0 20px; gap: 9px; background: var(--paper); border: 2px solid var(--black); border-bottom: 0; pointer-events: auto; }
.dock-label strong { font-size: 12px; letter-spacing: .1em; }
.dock-label small { display: none; font-size: 9px; }
.dock-live { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: dock-pulse 1.7s ease-in-out infinite; }
@keyframes dock-pulse { 50% { transform: scale(.55); opacity: .45; } }
.game-rail { display: flex; align-items: center; gap: 34px; padding: 9px 34px; overflow-x: auto; overflow-y: hidden; background: transparent; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; pointer-events: auto; }
.game-rail::-webkit-scrollbar { display: none; }
.game-entry {
  position: relative;
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  min-width: 74px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid var(--black);
  border-radius: 50%;
  appearance: none;
  color: inherit;
  background: rgba(240,238,231,.86);
  scroll-snap-align: start;
  isolation: isolate;
  text-align: center;
  transition: transform .22s cubic-bezier(.2,.75,.25,1), box-shadow .22s ease;
}
.game-entry::before { content: ""; position: absolute; z-index: 0; inset: 50%; border-radius: 50%; background: var(--entry-color, var(--yellow)); transition: inset .25s cubic-bezier(.2,.75,.25,1); }
.game-entry:hover, .game-entry:focus-visible { transform: translateY(-5px) rotate(-3deg); box-shadow: 5px 6px 0 var(--black); }
.game-entry:hover::before, .game-entry:focus-visible::before { inset: 0; }
.entry-icon { position: relative; z-index: 1; display: block; width: 64%; height: 64%; object-fit: contain; pointer-events: none; transition: transform .2s ease, filter .2s ease; }
.game-entry:hover .entry-icon, .game-entry:focus-visible .entry-icon { transform: scale(1.08) rotate(3deg); }
.game-entry.is-disabled { opacity: .42; }

.cursor { position: fixed; z-index: 300; top: 0; left: 0; width: 22px; height: 22px; display: grid; place-items: center; pointer-events: none; color: #fff; background: var(--red); border: 1px solid var(--black); border-radius: 50%; transform: translate(-50%, -50%); transition: width .18s ease, height .18s ease, background .18s ease; mix-blend-mode: normal; }
.cursor span { opacity: 0; font-size: 9px; font-weight: 900; transition: opacity .12s ease; }
.cursor.is-hovering { width: 62px; height: 62px; background: var(--blue); }
.cursor.is-hovering span { opacity: 1; }

.reveal { opacity: 0; transform: translateY(80px) rotate(1.5deg); transition: opacity .85s ease, transform .95s cubic-bezier(.16,.75,.2,1); }
.reveal.from-left { transform: translate(-90px, 30px) rotate(-3deg); }
.reveal.from-right { transform: translate(90px, 30px) rotate(3deg); }
.reveal.is-visible { opacity: 1; transform: translate(0,0) rotate(0); }
.reveal-now { animation: reveal-now .9s .1s both cubic-bezier(.16,.75,.2,1); }
.hero-title.reveal-now { animation-delay: .22s; }
.hero-note.reveal-now { animation-delay: .5s; }
@keyframes reveal-now { from { opacity: 0; transform: translateY(45px); } }

@media (max-width: 900px) {
  :root { --shell: calc(100% - 40px); --dock-height: 82px; }
  body, a, button { cursor: auto; }
  .cursor { display: none; }
  .site-header { height: 58px; padding: 0 18px; }
  .available, .header-right a:first-of-type { display: none; }
  .hero { min-height: 620px; }
  .hero-copy { padding: 80px 20px 54px; }
  .hero-eyebrow { top: 78px; left: 20px; }
  .hero-title { font-size: clamp(68px, 17vw, 128px); line-height: .75; }
  .title-line-one { margin-left: 0; }
  .title-line-two { margin-left: 14vw; }
  .title-line-three { margin-left: 0; }
  .hero-note { right: 20px; bottom: 65px; }
  .hero-note > span { display: none; }
  .hero-index { left: 18px; right: 18px; bottom: 18px; }
  .object-a { top: 15%; right: 2%; }
  .object-b { left: 56%; bottom: 9%; }
  .object-c { left: 4%; top: 26%; }
  .about-intro { min-height: 940px; padding-top: 100px; }
  .section-index { margin-bottom: 58px; }
  .about-title { font-size: clamp(56px, 14vw, 98px); }
  .line-right { margin-top: 2vh; }
  .line-tilt { margin: 9vh 0 0 4vw; }
  .floating-sticker { width: 105px; height: 105px; font-size: 13px; }
  .sticker-red { top: 36%; }
  .sticker-blue { right: 2%; bottom: 24%; }
  .about-lead { left: 3%; bottom: 5%; max-width: 520px; }
  .story-stage { min-height: 920px; }
  .story-card-yellow { width: 52vw; }
  .story-card-paper { top: 41%; width: 56vw; }
  .story-word { top: 26%; left: 17%; }
  .story-ring { left: 10%; bottom: 12%; width: 150px; height: 150px; }
  .story-side { right: 2%; }
  .manifesto-body { min-height: 820px; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 70px; }
  .manifesto-shape { width: 170px; height: 170px; justify-self: end; margin-right: 10%; }
  .contact { min-height: 700px; }
  .game-dock { grid-template-columns: 56px minmax(0,1fr); }
  .dock-label { padding: 0; justify-content: center; }
  .dock-label strong { writing-mode: vertical-rl; font-size: 9px; }
  .game-rail { gap: 28px; padding-inline: 28px; }
  .game-entry { flex-basis: 64px; width: 64px; height: 64px; min-width: 64px; padding: 8px; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 30px); --dock-height: 76px; }
  .header-right { gap: 12px; }
  .hero { height: calc(100svh - var(--dock-height)); min-height: 570px; }
  .hero-title { font-size: clamp(58px, 20vw, 90px); line-height: .79; }
  .title-line-two { margin: 1vh 0 0 9vw; }
  .title-line-three { margin-top: 1vh; }
  .hero-note { max-width: 180px; bottom: 62px; }
  .hero-note p { font-size: 12px; }
  .hero-index span:last-child { display: none; }
  .object-a { width: 78px; }
  .object-b { width: 64px; }
  .object-c { width: 58px; }
  .about-intro { min-height: 820px; }
  .about-title { font-size: clamp(48px, 15.5vw, 74px); line-height: .82; }
  .line-tilt { margin-top: 8vh; }
  .floating-sticker { width: 82px; height: 82px; font-size: 10px; box-shadow: 5px 5px 0 var(--black); }
  .sticker-red { top: 38%; left: 0; }
  .sticker-blue { bottom: 25%; }
  .about-lead { font-size: 16px; line-height: 1.55; }
  .story-stage { min-height: 850px; padding-bottom: 110px; }
  .story-card { box-shadow: 7px 7px 0 var(--black); }
  .story-card-yellow { left: 0; width: 76vw; min-height: 250px; padding: 24px; }
  .story-card-yellow p { margin-top: 70px; font-size: 25px; }
  .story-card-paper { top: 38%; right: 0; width: 79vw; min-height: 320px; padding: 26px; }
  .story-card-paper h3 { margin: 55px 0 20px; font-size: 28px; }
  .story-card-paper li { font-size: 13px; }
  .story-word { top: 31%; left: 1%; font-size: 180px; }
  .story-ring { left: 3%; bottom: 7%; width: 105px; height: 105px; box-shadow: 5px 5px 0 var(--black); }
  .story-ring::after { inset: 10px; }
  .story-ring span { font-size: 15px; }
  .story-side { right: 0; bottom: 4%; font-size: 13px; line-height: 1.55; }
  .manifesto-body { min-height: 720px; padding-block: 110px 90px; }
  .manifesto-title { font-size: clamp(48px, 15vw, 72px); line-height: .88; }
  .manifesto-title span:nth-child(2) { margin: 2vh 0 0 5vw; }
  .manifesto-title span:nth-child(3) { margin: 2vh 0 0; }
  .manifesto-grid { margin-top: 70px; gap: 55px; }
  .manifesto-shape { width: 115px; height: 115px; }
  .manifesto-shape span { font-size: 62px; }
  .contact { min-height: 590px; }
  .contact-inner { padding-block: 95px 70px; }
  .contact-title { font-size: clamp(68px, 23vw, 105px); line-height: .78; }
  .contact-links { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; font-size: 11px; }
  .contact-links a:first-child { grid-column: 1 / -1; }
  .site-footer { height: 54px; padding: 0 15px; grid-template-columns: 1fr auto; }
  .site-footer span:nth-child(2) { display: none; }
  .game-dock { grid-template-columns: 44px minmax(0,1fr); }
  .game-rail { gap: 24px; padding: 7px 24px; }
  .game-entry { flex-basis: 60px; width: 60px; height: 60px; min-width: 60px; }
}

@media (pointer: coarse) {
  body, a, button { cursor: auto; }
  .cursor { display: none; }
  .game-entry:active::before { inset: 0; }
}

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