:root {
  --ink: #080808;
  --soft-ink: #111111;
  --paper: #f7f4eb;
  --yellow: #fff36e;
  --pink: #ff4cb5;
  --pink-deep: #c83284;
  --line: rgba(247, 244, 235, .34);
  --display: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --body: 'Trebuchet MS', 'Arial Rounded MT Bold', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--body);
}
button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
img { display: block; max-width: 100%; }

.hero, .eyes-scene, .mood-scene, .game-scene, .ca-scene, .end-scene {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  pointer-events: none;
}
.eyebrow, .hero-topline, .scroll-note, .mood-control, .external-links a, .end-links a, .contract-line button {
  letter-spacing: .13em;
  font-family: var(--display);
}
.eyebrow { margin: 0 0 1rem; color: var(--pink); font-size: clamp(.72rem, 1.2vw, .92rem); }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: .015em; }
h1 { margin-bottom: 1.1rem; font-size: clamp(3.45rem, 5.7vw, 6.1rem); white-space: pre-line; }
h2 { margin-bottom: 1.25rem; font-size: clamp(3rem, 6.5vw, 7.2rem); }
p { font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.45; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.hero {
  min-height: 100svh;
  padding: clamp(1.2rem, 2.5vw, 2.4rem) clamp(1.25rem, 5.2vw, 7rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 42% 45% at 83% 60%, rgba(255, 243, 110, .16), transparent 70%),
    linear-gradient(112deg, #080808 0%, #080808 61%, #161116 100%);
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: -4rem;
  bottom: 8%;
  z-index: -1;
  height: clamp(34px, 5vw, 82px);
  background: var(--pink);
  clip-path: polygon(0 29%, 31% 29%, 33% 0, 43% 0, 44% 74%, 59% 74%, 60% 38%, 77% 38%, 79% 100%, 100% 100%, 100% 100%, 79% 100%, 77% 38%, 60% 38%, 59% 74%, 44% 74%, 43% 0, 33% 0, 31% 29%, 0 29%);
  transform: rotate(-2.4deg);
}
.hero-topline { position: relative; z-index: 2; display: flex; align-items: center; gap: .7rem; color: var(--paper); font-size: .76rem; }
.pulse-dot { width: .68rem; height: .68rem; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 5px rgba(255, 76, 181, .13); }
.hero-copy { position: relative; z-index: 2; width: min(48rem, 56vw); margin-top: clamp(2.25rem, 5.5vh, 4.3rem); }
.zip-signal {
  width: min(22rem, 52%);
  margin: 0 0 clamp(.4rem, 1vw, .8rem);
  filter: drop-shadow(0 0 20px rgba(255, 76, 181, .2));
}
.main-wordmark { width: min(53rem, 100%); margin: 0 0 clamp(1.1rem, 2.2vw, 1.8rem); filter: drop-shadow(0 0 22px rgba(255, 243, 110, .12)); }
.hero-copy > p { width: min(30rem, 100%); margin-bottom: 1.75rem; color: rgba(247, 244, 235, .78); }
.zip-action {
  display: inline-flex;
  align-items: center;
  gap: .95rem;
  min-height: 3.65rem;
  padding: .55rem .7rem .55rem 1.2rem;
  border: 2px solid var(--paper);
  color: var(--ink);
  background: var(--paper);
  font-family: var(--display);
  letter-spacing: .085em;
  font-size: .98rem;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.zip-action i { display: inline-block; width: 2.25rem; height: 2.25rem; background: var(--pink); clip-path: polygon(0 0, 100% 0, 100% 30%, 70% 30%, 70% 67%, 100% 67%, 100% 100%, 0 100%, 0 67%, 30% 67%, 30% 30%, 0 30%); }
.zip-action:hover { color: var(--paper); background: var(--ink); transform: translateY(-3px); }
.hero-creature-wrap { position: absolute; right: clamp(1rem, 4vw, 6rem); bottom: clamp(3.5rem, 8vh, 6.5rem); z-index: 1; width: min(41vw, 39rem); }
.hero-creature { position: relative; z-index: 1; width: 100%; max-height: 81vh; object-fit: contain; object-position: bottom right; }
.creature-shadow { position: absolute; right: 6%; bottom: 3%; z-index: 0; width: 74%; height: 12%; border-radius: 50%; background: rgba(0, 0, 0, .9); filter: blur(16px); }
.hero-horn { position: absolute; z-index: 0; width: clamp(4.5rem, 11vw, 10rem); opacity: .65; filter: saturate(.8); }
.horn-one { top: 14%; left: 41%; transform: rotate(60deg); }
.horn-two { right: -1rem; top: 7%; transform: rotate(132deg); }
.scroll-note { position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: clamp(1.25rem, 5.2vw, 7rem); z-index: 2; margin: 0; color: rgba(247, 244, 235, .65); font-size: .7rem; text-transform: uppercase; }

.eyes-scene { min-height: 100svh; display: flex; align-items: center; padding: clamp(5rem, 10vw, 11rem) max(6vw, 2rem); background: #020202; }
.eyes-text { position: relative; z-index: 2; width: min(48rem, 54vw); }
.eyes-text > p:last-child { max-width: 26rem; color: rgba(247,244,235,.72); }
.eyes-art { position: absolute; z-index: 0; width: min(96vw, 95rem); right: -7vw; top: 52%; transform: translateY(-50%); opacity: .96; }
.zip-tail { position: absolute; z-index: 1; width: min(26vw, 20rem); right: 4%; bottom: -2%; transform: rotate(21deg); opacity: .88; }
.pink-route { position: absolute; height: 2.2rem; background: var(--pink); z-index: 1; clip-path: polygon(0 30%, 40% 30%, 40% 0, 54% 0, 54% 70%, 82% 70%, 82% 38%, 100% 38%, 100% 70%, 88% 70%, 88% 100%, 70% 100%, 70% 80%, 46% 80%, 46% 30%, 0 30%); }
.route-a { bottom: 15%; left: -2%; width: min(55vw, 55rem); transform: rotate(-6deg); }

.mood-scene { min-height: 100svh; padding: clamp(4rem, 10vw, 8rem) max(5vw, 1.5rem); background: var(--yellow); color: var(--ink); }
.mood-scene::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .12; background-image: radial-gradient(#000 1px, transparent 1px); background-size: 10px 10px; }
.mood-intro { position: relative; z-index: 2; width: min(38rem, 48%); }
.mood-intro .eyebrow { color: #5e1844; }
.mood-intro p:last-child { max-width: 26rem; }
.mood-stage { position: absolute; right: 2%; bottom: 4%; width: min(53vw, 48rem); text-align: center; }
.mood-image { max-height: 70vh; margin: 0 auto; object-fit: contain; transition: opacity .12s ease, transform .12s ease; }
.mood-image.is-switching { opacity: .12; transform: scale(.96); }
.mood-caption { width: max-content; max-width: 80%; margin: -.4rem auto 0; padding: .3rem .55rem; color: var(--paper); background: var(--ink); font-family: var(--display); font-size: clamp(.9rem, 1.5vw, 1.25rem); letter-spacing: .06em; }
.mood-controls { position: absolute; z-index: 3; bottom: clamp(2rem, 6vw, 5.5rem); left: max(5vw, 1.5rem); display: flex; flex-wrap: wrap; gap: .55rem; }
.mood-control { padding: .66rem .72rem; border: 2px solid var(--ink); color: var(--ink); background: transparent; font-size: .78rem; transition: color .16s, background .16s, transform .16s; }
.mood-control:hover, .mood-control.is-active { color: var(--yellow); background: var(--ink); transform: translateY(-2px); }
.loose-horn { position: absolute; width: min(16vw, 12rem); right: 7%; top: 6%; transform: rotate(148deg); }

.gallery-scene { padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(4rem, 7vw, 7rem); background: #0a0a0a; color: var(--paper); }
.gallery-heading { width: min(44rem, 92vw); margin: 0 max(6vw, 1.5rem) 2rem; }
.gallery-heading h2 { margin-bottom: 1.15rem; }
.gallery-heading > p:last-child { max-width: 31rem; margin-bottom: 0; color: rgba(247,244,235,.72); }
.gallery-tools { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin: 0 max(6vw, 1.5rem) 1.15rem; font-family: var(--display); letter-spacing: .09em; font-size: .76rem; }
.gallery-tools span { margin-right: auto; color: var(--pink); }
.gallery-tools button { border: 1px solid var(--line); padding: .62rem .72rem; color: var(--paper); background: transparent; font-family: inherit; font-size: inherit; letter-spacing: inherit; transition: background .16s, color .16s; }
.gallery-tools button:hover { color: var(--ink); background: var(--yellow); }
.meme-rail { display: flex; gap: clamp(.8rem, 1.8vw, 1.75rem); padding: .2rem max(6vw, 1.5rem) 1.2rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--pink) #202020; cursor: grab; }
.meme-rail:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.meme-rail:active, .meme-rail.is-dragging { cursor: grabbing; }
.meme-rail.is-dragging { scroll-snap-type: none; user-select: none; }
.meme-rail::-webkit-scrollbar { height: 9px; }
.meme-rail::-webkit-scrollbar-track { background: #202020; }
.meme-rail::-webkit-scrollbar-thumb { background: var(--pink); }
.meme-panel { position: relative; flex: 0 0 min(46vw, 42rem); margin: 0; scroll-snap-align: start; }
.meme-panel img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #151515; }
.meme-panel figcaption { position: absolute; left: 0; bottom: 0; max-width: 82%; margin: 0; padding: .45rem .55rem; color: var(--ink); background: var(--yellow); font-family: var(--display); font-size: clamp(.72rem, 1.1vw, .9rem); letter-spacing: .08em; text-transform: uppercase; }

.game-scene { min-height: 100svh; display: grid; grid-template-columns: minmax(15rem, .76fr) minmax(31rem, 1.24fr); align-items: center; gap: clamp(2.5rem, 6vw, 7rem); padding: clamp(4.5rem, 9vw, 9rem) max(6vw, 2rem); background: var(--pink); color: var(--ink); }
.game-scene::before { content: ''; position: absolute; inset: 1.1rem; z-index: -1; border: 3px solid var(--ink); clip-path: polygon(0 0, 99% 0, 99% 79%, 85% 79%, 85% 100%, 0 100%); }
.game-scene::after { content: ''; position: absolute; z-index: -1; width: min(34vw, 34rem); height: min(34vw, 34rem); right: -9%; bottom: -18%; border: clamp(1.4rem, 3vw, 3rem) solid var(--yellow); border-radius: 50%; }
.game-copy { align-self: center; max-width: 33rem; }
.game-copy .eyebrow { color: var(--ink); }
.game-copy > p:last-child { max-width: 26rem; }
.game-panel { position: relative; z-index: 1; width: min(100%, 48rem); justify-self: end; padding: clamp(.7rem, 1.5vw, 1.15rem); border: 4px solid var(--ink); outline: 3px solid var(--yellow); outline-offset: 8px; background: #08080b; color: var(--paper); box-shadow: 14px 14px 0 rgba(8, 8, 8, .95); }
.game-hud { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; justify-content: space-between; margin: 0 0 .65rem; color: var(--yellow); font-family: var(--display); font-size: clamp(.72rem, 1.25vw, .9rem); letter-spacing: .1em; }
.game-hud span:last-child { color: var(--pink); }
.game-hud b { color: var(--paper); font-weight: inherit; }
#zumix-run-canvas { display: block; width: 100%; height: auto; background: #111114; image-rendering: auto; touch-action: none; }
.game-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "message actions" "message controls"; gap: .75rem 1rem; align-items: center; margin-top: .85rem; }
.game-bottom > p { grid-area: message; max-width: 17rem; margin: 0; color: rgba(247,244,235,.78); font-size: clamp(.78rem, 1.15vw, .95rem); }
.game-actions { grid-area: actions; display: flex; justify-content: flex-end; gap: .45rem; }
.game-actions button, .game-controls button { border: 2px solid var(--paper); padding: .48rem .6rem; color: var(--ink); background: var(--paper); font-family: var(--display); font-size: .72rem; letter-spacing: .07em; transition: color .16s, background .16s, transform .16s; }
.game-actions button:hover:not(:disabled), .game-controls button:hover { color: var(--ink); background: var(--yellow); transform: translateY(-2px); }
.game-actions button:disabled { cursor: not-allowed; opacity: .42; }
.game-actions button[data-game-pause] { color: var(--paper); background: transparent; }
.game-actions button[data-game-pause]:hover:not(:disabled) { color: var(--ink); background: var(--pink); }
.game-controls { grid-area: controls; display: grid; grid-template-columns: repeat(3, minmax(2.2rem, 1fr)); width: min(100%, 14rem); margin-left: auto; gap: .25rem; }
.game-controls button { min-height: 2.3rem; padding: .35rem .4rem; }
.game-controls button[data-game-move="up"] { grid-column: 2; }
.game-controls button[data-game-move="left"] { grid-column: 1; grid-row: 2; }
.game-controls button[data-game-move="down"] { grid-column: 2; grid-row: 2; }
.game-controls button[data-game-move="right"] { grid-column: 3; grid-row: 2; }

.ca-scene { min-height: 100svh; display: flex; align-items: center; justify-content: flex-end; padding: clamp(5rem, 10vw, 10rem) max(6vw, 2rem); background: linear-gradient(145deg, #111111, #050505 74%); }
.ca-scene::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 8vw; min-height: 2.5rem; background: var(--yellow); clip-path: polygon(0 75%, 12% 75%, 12% 0, 16% 0, 16% 80%, 35% 80%, 35% 45%, 39% 45%, 39% 100%, 62% 100%, 62% 67%, 66% 67%, 66% 100%, 100% 100%, 100% 100%, 66% 100%, 66% 67%, 62% 67%, 62% 100%, 39% 100%, 39% 45%, 35% 45%, 35% 80%, 16% 80%, 16% 0, 12% 0, 12% 75%, 0 75%); }
.angry-monster { position: absolute; width: min(55vw, 51rem); left: -2%; bottom: 1%; max-height: 88%; object-fit: contain; object-position: bottom left; }
.ca-copy { position: relative; z-index: 2; width: min(45rem, 50vw); }
.ca-copy > p:not(.eyebrow) { color: rgba(247,244,235,.72); max-width: 32rem; }
.contract-notice { padding-left: 1rem; border-left: 4px solid var(--pink); }
.contract-line { display: flex; gap: .6rem; width: min(100%, 36rem); margin: 1.5rem 0; padding: .55rem; background: var(--paper); color: var(--ink); }
.contract-line code { flex: 1; min-width: 0; overflow: hidden; padding: .6rem; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.contract-line button { flex: none; border: 0; padding: .55rem .75rem; background: var(--pink); color: var(--ink); font-size: .7rem; }
.external-links, .end-links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.7rem; }
.external-links a, .end-links a { padding: .67rem .75rem; color: var(--ink); background: var(--yellow); text-decoration: none; font-size: .75rem; transition: transform .16s, background .16s; }
.external-links a:hover, .end-links a:hover { background: var(--pink); transform: translateY(-3px); }

.end-scene { min-height: 82svh; display: flex; align-items: center; padding: clamp(5rem, 11vw, 11rem) max(6vw, 2rem); background: var(--paper); color: var(--ink); }
.end-copy { position: relative; z-index: 2; width: min(44rem, 58%); }
.end-copy h2 { max-width: 41rem; }
.end-copy > p:not(.disclaimer) { max-width: 24rem; }
.end-links a { background: var(--ink); color: var(--paper); }
.disclaimer { margin-top: 2rem; color: rgba(8,8,8,.63); font-size: .82rem; }
.sleepy-monster { position: absolute; z-index: 1; width: min(52vw, 47rem); right: -2%; bottom: -1%; max-height: 88%; object-fit: contain; object-position: bottom right; }
.end-chain { position: absolute; z-index: 0; width: min(24vw, 18rem); right: 37%; bottom: -1%; transform: rotate(22deg); }

body.is-unzipped .hero { background: radial-gradient(ellipse 50% 55% at 83% 60%, rgba(255, 76, 181, .22), transparent 72%), #080808; }
body.is-unzipped .pulse-dot { background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 243, 110, .13); }

@media (max-width: 820px) {
  .hero { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 0; }
  .hero-copy { width: 100%; margin-top: 2.5rem; }
  .hero h1 { font-size: clamp(3.35rem, 16vw, 5.2rem); }
  .hero-creature-wrap { position: relative; right: auto; bottom: auto; width: min(100%, 33rem); margin: auto 0 0 auto; }
  .hero-creature-wrap { bottom: auto; }
  .hero-creature { max-height: 41svh; }
  .hero::after { bottom: 18%; height: 3rem; }
  .horn-one { left: 66%; top: 8%; }
  .horn-two { display: none; }
  .scroll-note { bottom: 1rem; }
  .eyes-scene { min-height: 92svh; align-items: flex-start; padding-top: 5rem; }
  .eyes-text { width: 100%; }
  .eyes-text h2 { max-width: 35rem; }
  .eyes-art { width: 150vw; right: -66vw; top: 59%; }
  .zip-tail { width: 44vw; right: 5%; bottom: 7%; }
  .route-a { width: 93vw; bottom: 13%; }
  .mood-scene { min-height: 105svh; padding-top: 4.5rem; }
  .mood-intro { width: 100%; }
  .mood-intro h2 { max-width: 28rem; }
  .mood-stage { right: 50%; bottom: 12%; width: min(100%, 35rem); transform: translateX(50%); }
  .mood-image { max-height: 53svh; }
  .mood-controls { bottom: 3%; }
  .loose-horn { width: 28vw; top: 2%; right: 3%; }
  .gallery-heading { margin-bottom: 1.5rem; }
  .meme-panel { flex-basis: min(78vw, 34rem); }
  .game-scene { min-height: 100svh; grid-template-columns: 1fr; gap: 2.25rem; padding-top: 4rem; padding-bottom: 4.25rem; }
  .game-copy { max-width: 31rem; }
  .game-panel { width: min(100% - 1rem, 44rem); justify-self: center; }
  .game-bottom { grid-template-columns: 1fr; grid-template-areas: "message" "actions" "controls"; }
  .game-bottom > p { max-width: 100%; }
  .game-actions { justify-content: flex-start; }
  .game-controls { margin-left: 0; }
  .ca-scene { min-height: 110svh; display: block; padding-top: 4.5rem; }
  .ca-copy { width: min(100%, 35rem); }
  .angry-monster { width: min(115vw, 45rem); left: 50%; bottom: 1%; transform: translateX(-50%); max-height: 48%; }
  .ca-scene::before { min-height: 3.2rem; }
  .end-scene { min-height: 100svh; align-items: flex-start; padding-top: 4.5rem; }
  .end-copy { width: 100%; }
  .end-copy h2 { max-width: 25rem; }
  .sleepy-monster { width: min(110vw, 45rem); max-height: 47%; right: 50%; bottom: 0; transform: translateX(50%); }
  .end-chain { width: 38vw; right: 2%; bottom: 4%; }
}

@media (max-width: 460px) {
  .hero { padding-left: 1.2rem; padding-right: 1.2rem; }
  .zip-signal { width: min(16rem, 50%); }
  .main-wordmark { width: 100%; }
  .zip-action { font-size: .82rem; }
  .eyes-scene, .mood-scene, .game-scene, .ca-scene, .end-scene { padding-left: 1.2rem; padding-right: 1.2rem; }
  .game-panel { outline-offset: 5px; box-shadow: 8px 8px 0 rgba(8, 8, 8, .95); }
  .game-hud { gap: .3rem .7rem; font-size: .68rem; }
  h2 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .mood-caption { max-width: 90%; font-size: .83rem; }
  .contract-line { align-items: stretch; flex-direction: column; }
  .contract-line button { width: 100%; }
  .external-links a, .end-links a { font-size: .67rem; }
  .meme-panel { flex-basis: 86vw; }
}

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