@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root {
  --paper: #d9e5ec;
  --ink: #101522;
  --acid: #d6ff28;
  --cyan: #00e5ff;
  --coral: #ff3ca6;
  --silver: #f5fbff;
  --line: rgba(16, 21, 34, .2);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Space Mono', monospace; }
button { font: inherit; }
.stage { min-height: 100vh; position: relative; overflow: hidden; isolation: isolate; padding: 28px 4vw 24px; display: flex; flex-direction: column; }
.noise { position: absolute; inset: 0; opacity: .08; pointer-events: none; z-index: -1; background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--ink) 4px), repeating-linear-gradient(90deg, transparent 0 5px, var(--ink) 6px); mix-blend-mode: multiply; }
.masthead, .footer-bar { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2; }
.brand { font: 34px/1 'Archivo Black', sans-serif; letter-spacing: -2px; transform: rotate(-2deg); }
.brand span { color: var(--coral); }
.status, .edition, .footer-note, .footer-right { font-size: 10px; line-height: 1.35; font-weight: 700; }
.status i { width: 8px; height: 8px; display: inline-block; background: var(--coral); border-radius: 50%; margin-right: 6px; animation: blink 1.2s steps(2) infinite; }
.edition { text-align: right; }
.composition { flex: 1; min-height: 550px; position: relative; display: grid; place-items: center; }
.composition::before { content: ''; position: absolute; inset: 6% 12%; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; transform: rotate(-4deg); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); z-index: -1; }
.vertical-label { position: absolute; left: 2%; top: 32%; writing-mode: vertical-rl; font-size: 10px; letter-spacing: 3px; transform: rotate(180deg); }
.signal-copy { position: absolute; right: 3%; top: 12%; font: clamp(44px, 9vw, 150px)/.78 'Archivo Black', sans-serif; letter-spacing: -6px; text-align: right; transform: rotate(7deg); color: transparent; -webkit-text-stroke: 2px var(--ink); }
.signal-copy span { display: block; }
.signal-copy span:nth-child(2) { color: var(--acid); -webkit-text-stroke: 0; transform: translateX(-25px); }
.orbit { position: absolute; border: 2px solid var(--ink); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: min(62vw, 720px); height: min(22vw, 250px); top: 29%; left: 18%; }
.orbit-two { width: min(52vw, 590px); height: min(15vw, 170px); top: 38%; left: 26%; border-color: var(--coral); }
.slash { position: absolute; background: var(--cyan); transform: rotate(18deg); z-index: -1; }
.slash-one { width: 170px; height: 28px; left: 8%; bottom: 18%; }
.slash-two { width: 90px; height: 90px; right: 9%; bottom: 11%; background: var(--acid); clip-path: polygon(0 0, 100% 0, 65% 100%, 0 75%); }
.image-trigger { position: relative; width: clamp(230px, 31vw, 420px); aspect-ratio: 1; border: 0; padding: 0; cursor: pointer; background: transparent; z-index: 1; transition: transform .15s ease; }
.image-trigger:hover { transform: rotate(2deg) scale(1.03); }
.image-trigger:focus-visible { outline: 3px solid var(--coral); outline-offset: 9px; }
.image-trigger img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: contrast(1.08) saturate(.9); }
.image-frame { position: absolute; inset: 12%; border: 2px solid var(--ink); }
.frame-back { transform: translate(18px, 18px); background: var(--acid); z-index: -1; }
.frame-front { transform: rotate(6deg); border-color: var(--coral); z-index: -1; }
.trigger-stamp { position: absolute; right: -2%; top: 3%; width: 64px; height: 64px; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: var(--cyan); font-size: 10px; line-height: 1; font-weight: 700; transform: rotate(12deg); }
.instruction { position: absolute; bottom: 11%; left: 26%; font-size: 11px; transform: rotate(-3deg); }
.arrow { color: var(--coral); font-size: 25px; vertical-align: middle; }
.counter { position: absolute; right: 5%; bottom: 18%; font: 44px/1 'Archivo Black', sans-serif; transform: rotate(-5deg); }
.counter small { display: block; font: 10px 'Space Mono', monospace; text-align: right; letter-spacing: 2px; }
.footer-bar { border-top: 1px solid var(--ink); padding-top: 14px; align-items: center; }
.footer-note { flex: 1; }
.meter { height: 9px; width: 34%; border: 1px solid var(--ink); padding: 2px; transform: skew(-20deg); }
.meter span { display: block; width: 3%; height: 100%; background: var(--coral); transition: width .1s ease; }
.footer-right { flex: 1; text-align: right; }
.sound-mark { color: var(--coral); letter-spacing: -2px; }
.flash { position: absolute; inset: 0; background: var(--acid); opacity: 0; pointer-events: none; z-index: 5; }
.is-shaking { animation: shake .14s steps(2, end) infinite; }
.is-flashing { animation: flash .45s ease-out both; }
@keyframes shake { 0% { transform: translate(-4px, 2px) rotate(-2deg) skewX(-1deg); } 25% { transform: translate(5px, -3px) rotate(2deg) skewX(2deg); } 50% { transform: translate(-7px, -1px) rotate(-3deg) skewX(-2deg); } 75% { transform: translate(3px, 4px) rotate(3deg) skewX(1deg); } 100% { transform: translate(-4px, 2px) rotate(-2deg) skewX(-1deg); } }
@keyframes flash { 0%, 100% { opacity: 0; } 12% { opacity: .18; } }
@keyframes blink { 50% { opacity: .25; } }
@media (max-width: 620px) { .stage { padding: 20px 18px 18px; } .brand { font-size: 25px; } .edition { font-size: 8px; } .composition { min-height: 610px; } .signal-copy { top: 17%; right: -2%; font-size: 65px; } .vertical-label { left: 0; } .orbit-one { width: 110vw; height: 42vw; left: -6%; top: 34%; } .orbit-two { width: 95vw; height: 29vw; left: 2%; top: 41%; } .image-trigger { width: 76vw; } .instruction { left: 8%; bottom: 8%; } .counter { right: 4%; bottom: 17%; } .slash-one { left: -10%; bottom: 20%; } .footer-note { font-size: 8px; } .footer-right { font-size: 8px; } .meter { width: 25%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Y2K surface */
.stage { background: radial-gradient(circle at 78% 18%, rgba(0, 229, 255, .42), transparent 25%), radial-gradient(circle at 17% 76%, rgba(255, 60, 166, .25), transparent 24%), linear-gradient(135deg, #d4e1e9 0%, #f8fcff 42%, #b8cad7 100%); }
.noise { opacity: .12; background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--cyan) 4px), repeating-linear-gradient(90deg, transparent 0 7px, var(--coral) 8px); mix-blend-mode: screen; }
.brand { color: var(--ink); text-shadow: 3px 3px 0 var(--silver), 5px 5px 0 var(--coral); }
.brand span { color: var(--cyan); -webkit-text-stroke: 1px var(--ink); }
.status, .edition, .footer-note, .footer-right { letter-spacing: 1px; }
.status i { background: var(--acid); box-shadow: 0 0 0 3px var(--coral); }
.composition::before { background-size: 38px 38px; transform: rotate(-7deg); opacity: .8; }
.signal-copy { font-style: italic; text-shadow: 5px 5px 0 var(--silver); -webkit-text-stroke-color: var(--ink); }
.signal-copy span:nth-child(2) { color: var(--coral); text-shadow: 4px 4px 0 var(--cyan); }
.orbit-one { border: 3px solid var(--cyan); box-shadow: 8px 8px 0 rgba(255, 60, 166, .55); }
.orbit-two { border-color: var(--coral); border-style: dashed; }
.slash-one { background: var(--coral); box-shadow: 8px 8px 0 var(--cyan); }
.slash-two { background: var(--acid); border: 2px solid var(--ink); box-shadow: -8px 8px 0 var(--coral); }
.image-trigger img { filter: contrast(1.12) saturate(1.2); }
.image-frame { border-width: 3px; }
.frame-back { background: linear-gradient(135deg, var(--acid), var(--cyan)); box-shadow: 8px 8px 0 var(--coral); }
.frame-front { border-color: var(--coral); border-style: dashed; box-shadow: inset 0 0 0 4px rgba(255,255,255,.5); }
.trigger-stamp { background: var(--coral); color: var(--silver); border-width: 3px; box-shadow: 4px 4px 0 var(--ink); }
.instruction { background: var(--acid); padding: 5px 9px; box-shadow: 4px 4px 0 var(--ink); }
.counter { color: var(--coral); text-shadow: 3px 3px 0 var(--silver), 5px 5px 0 var(--cyan); }
.footer-bar { border-top-width: 2px; }
.meter { background: var(--silver); border-width: 2px; box-shadow: 4px 4px 0 var(--coral); }
.meter span { background: linear-gradient(90deg, var(--coral), var(--cyan), var(--acid)); }
.sound-mark { color: var(--cyan); text-shadow: 2px 2px 0 var(--coral); }
.flash { background: var(--cyan); }

/* Deliberately overstuffed web-2000 collage */
.stage { background: #08cfe8; }
.stage::before { content: ''; position: absolute; inset: 0; z-index: -2; background: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 2px, transparent 2px 16px), radial-gradient(ellipse at 30% 30%, #8dffff 0 7%, transparent 30%), radial-gradient(ellipse at 75% 70%, #2b5dff 0 5%, transparent 31%), linear-gradient(120deg, #00d8e8, #24a9ff 44%, #00edb2 75%, #fff500); filter: saturate(1.5); }
.stage::after { content: '!!! GUGUGAGA !!! GUGUGAGA !!! GUGUGAGA !!!'; position: absolute; left: -2%; right: -2%; bottom: 10%; z-index: -1; color: #fff600; font: 11vw/1 'Archivo Black', sans-serif; letter-spacing: -8px; transform: rotate(-7deg); opacity: .55; text-shadow: 4px 4px #ff19a9, 8px 8px #1c31ff; white-space: nowrap; }
.masthead { background: #fff; border: 4px solid #101522; padding: 7px 12px; box-shadow: 8px 8px 0 #ff19a9, 14px 14px 0 #1c31ff; transform: rotate(-1deg); }
.brand { font-size: 38px; color: #0811ff; text-shadow: 3px 3px 0 #fff, 6px 6px 0 #ff19a9; }
.status, .edition { color: #ff19a9; text-shadow: 1px 1px #101522; }
.composition { min-height: 590px; }
.composition::before { inset: 0; background-size: 28px 28px; background-image: linear-gradient(rgba(255,255,255,.35) 2px, transparent 2px), linear-gradient(90deg, rgba(0,57,255,.3) 2px, transparent 2px); transform: rotate(5deg) scale(1.2); mask-image: none; }
.chrome-strip { position: absolute; left: -7%; right: -7%; top: 5%; padding: 9px; color: #0012b8; background: #fff600; border: 5px solid #ff19a9; font: 700 13px 'Space Mono', monospace; letter-spacing: 5px; white-space: nowrap; transform: rotate(2deg); box-shadow: 0 6px #101522; }
.mega-type { position: absolute; left: 1%; top: 12%; z-index: 0; color: #fff600; font: 8vw/.75 'Archivo Black', sans-serif; letter-spacing: -5px; transform: rotate(-8deg); -webkit-text-stroke: 3px #ff19a9; text-shadow: 7px 7px #071dff; }
.mega-type em { color: #00ff79; font-style: normal; -webkit-text-stroke: 3px #ff19a9; }
.copy-stack { position: absolute; left: 3%; bottom: 6%; z-index: 2; padding: 8px; color: #fff; background: #ff19a9; border: 4px solid #101522; font: 700 17px/1.1 'Archivo Black', sans-serif; transform: rotate(-6deg); text-shadow: 2px 2px #071dff; box-shadow: 8px 8px 0 #fff600; }
.copy-stack b { color: #fff600; font-size: 28px; }
.ad-box { position: absolute; right: 4%; top: 10%; z-index: 2; width: 90px; padding: 8px; background: #fff; border: 5px solid #ff3b00; color: #ff3b00; text-align: center; font-size: 10px; transform: rotate(9deg); box-shadow: 7px 7px #101522; }
.ad-box strong { color: #071dff; font: 25px/.8 'Archivo Black', sans-serif; }
.pixel-note { position: absolute; right: 0; bottom: 5%; z-index: 3; padding: 8px; color: #fff600; background: #071dff; border: 3px solid #fff; font-size: 11px; line-height: 1.5; transform: rotate(5deg); box-shadow: 5px 5px #ff19a9; }
.sticker { position: absolute; z-index: 4; display: grid; place-items: center; width: 75px; height: 75px; border: 4px solid #fff; border-radius: 50%; color: #fff; background: #ff3b00; font: 700 13px/.85 'Archivo Black', sans-serif; text-align: center; text-shadow: 2px 2px #071dff; box-shadow: 5px 5px #101522; }
.sticker-one { left: 12%; top: 25%; transform: rotate(-18deg); }
.sticker-two { right: 17%; bottom: 27%; color: #101522; background: #00ff79; transform: rotate(16deg); }
.burst { position: absolute; right: 4%; bottom: 32%; z-index: 4; width: 74px; height: 74px; display: grid; place-items: center; background: #fff600; color: #ff19a9; clip-path: polygon(50% 0, 62% 29%, 88% 12%, 75% 41%, 100% 50%, 72% 59%, 87% 89%, 60% 72%, 50% 100%, 39% 72%, 12% 88%, 27% 60%, 0 50%, 29% 40%, 13% 12%, 40% 28%); font: 25px/.8 'Archivo Black', sans-serif; text-align: center; transform: rotate(-12deg); text-shadow: 2px 2px #071dff; }
.vertical-label { left: 1%; top: 38%; background: #fff600; color: #ff19a9; padding: 5px; border: 2px solid #071dff; }
.signal-copy { right: 4%; top: 24%; z-index: 2; color: #fff; -webkit-text-stroke: 3px #071dff; text-shadow: 7px 7px #ff19a9; }
.signal-copy span:nth-child(2) { color: #00ff79; text-shadow: 5px 5px #ff3b00; }
.orbit-one { border-color: #fff600; box-shadow: 10px 10px 0 #ff19a9, -8px -8px 0 #071dff; }
.orbit-two { border-color: #fff; border-width: 5px; }
.image-trigger { z-index: 5; }
.frame-back { background: #00ff79; box-shadow: 12px 12px 0 #ff19a9, 20px 20px 0 #071dff; }
.frame-front { border-color: #fff600; box-shadow: inset 0 0 0 5px #ff3b00; }
.trigger-stamp { background: #071dff; border-color: #fff600; }
.instruction { z-index: 6; }
.counter { z-index: 6; color: #fff600; -webkit-text-stroke: 2px #071dff; text-shadow: 5px 5px #ff19a9; }
.footer-bar { border-top-color: #fff; background: #071dff; color: #fff; margin: 0 -4vw -24px; padding: 12px 4vw; }
.footer-note, .footer-right { color: #fff600; }
.meter { background: #fff; border-color: #ff19a9; }
.sound-mark { color: #00ff79; }

/* Reference-style Japanese collage: keep the object centered, remove the UI boxes. */
.stage { min-height: 100vh; padding: 0; background: #09cce9; }
.stage::before { background: radial-gradient(ellipse at 30% 30%, #a1ffff 0 8%, transparent 30%), radial-gradient(ellipse at 78% 70%, #2c60ff 0 5%, transparent 31%), linear-gradient(125deg, #00d7e5, #2cb4ff 45%, #00efb3 78%, #fff500); filter: saturate(1.45) contrast(1.05); }
.stage::after { content: '迷子 迷子 迷子 迷子 迷子'; left: 0; right: auto; bottom: 2%; color: #fff600; font: 14vw/1 'Noto Sans JP', sans-serif; letter-spacing: -12px; transform: rotate(-8deg); opacity: .62; text-shadow: 5px 5px #ff15a8, 10px 10px #2439ff; }
.noise { opacity: .18; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px), repeating-linear-gradient(90deg, transparent 0 9px, #00a3ff 10px); mix-blend-mode: screen; }
.composition { min-height: 100vh; width: 100%; overflow: hidden; isolation: isolate; }
.composition::before { inset: -10%; background-size: 34px 34px; background-image: linear-gradient(rgba(255,255,255,.28) 2px, transparent 2px), linear-gradient(90deg, rgba(0,48,255,.25) 2px, transparent 2px); transform: rotate(7deg) scale(1.2); opacity: .75; mask-image: none; }
.jp-title, .jp-line, .jp-vertical, .jp-small, .scribble { position: absolute; z-index: 2; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; white-space: nowrap; }
.jp-title { top: 4%; right: 4%; color: #ff159e; font-size: clamp(42px, 8vw, 120px); letter-spacing: -8px; transform: rotate(4deg); text-shadow: 5px 5px #fff600, 10px 10px #1543ff; }
.jp-line { color: #fff; font-size: clamp(20px, 3.7vw, 55px); letter-spacing: -3px; -webkit-text-stroke: 2px #1749ff; text-shadow: 4px 4px #ff159e; }
.line-one { left: 3%; top: 15%; transform: rotate(-3deg); }
.line-two { left: 7%; bottom: 18%; color: #fff600; -webkit-text-stroke-color: #ff159e; text-shadow: 4px 4px #124bff; transform: rotate(3deg); }
.line-three { right: 7%; top: 30%; color: #00ff88; -webkit-text-stroke-color: #ff3b00; text-shadow: 4px 4px #ff159e; transform: rotate(-5deg); }
.jp-vertical { top: 22%; left: 1%; color: #fff600; font-size: 19px; line-height: 1.3; writing-mode: vertical-rl; text-shadow: 2px 2px #ff159e; }
.vertical-right { left: auto; right: 1%; top: 54%; color: #fff; text-shadow: 3px 3px #124bff; }
.jp-small { color: #ff19a9; font-size: 17px; line-height: 1.2; text-shadow: 2px 2px #fff600; transform: rotate(-8deg); }
.small-one { left: 4%; bottom: 8%; }
.small-two { right: 3%; bottom: 6%; color: #124bff; text-shadow: 2px 2px #fff; transform: rotate(8deg); }
.jp-side, .jp-mini { position: absolute; z-index: 4; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; white-space: nowrap; }
.jp-side { font-size: clamp(16px, 2.2vw, 32px); line-height: 1.2; color: #fff; -webkit-text-stroke: 1px #ff159e; text-shadow: 3px 3px #124bff; }
.side-left-one { left: 5%; top: 29%; color: #fff600; transform: rotate(-9deg); }
.side-left-two { left: 4%; top: 52%; color: #00ff88; -webkit-text-stroke-color: #ff3b00; transform: rotate(6deg); }
.side-left-three { left: 8%; bottom: 28%; color: #ff159e; -webkit-text-stroke-color: #fff; text-shadow: 3px 3px #fff600; transform: rotate(-4deg); }
.side-right-one { right: 4%; top: 24%; color: #fff600; -webkit-text-stroke-color: #124bff; transform: rotate(8deg); }
.side-right-two { right: 3%; top: 48%; color: #ff159e; -webkit-text-stroke-color: #fff600; text-shadow: 3px 3px #124bff; transform: rotate(-7deg); }
.side-right-three { right: 7%; bottom: 30%; color: #00ff88; -webkit-text-stroke-color: #ff3b00; transform: rotate(5deg); }
.jp-mini { font-size: clamp(12px, 1.4vw, 19px); color: #fff600; text-shadow: 2px 2px #ff159e; }
.mini-one { left: 2%; top: 9%; transform: rotate(-13deg); }
.mini-two { right: 2%; top: 8%; color: #fff; text-shadow: 2px 2px #124bff; transform: rotate(11deg); }
.mini-three { left: 39%; bottom: 7%; color: #124bff; text-shadow: 2px 2px #fff600; transform: rotate(-5deg); }
.star { position: absolute; z-index: 2; color: #fff; font: 100px/1 serif; text-shadow: 4px 4px #fff600, 8px 8px #ff159e; }
.star-one { left: 4%; top: 37%; }
.star-two { right: 6%; top: 15%; color: #fff600; font-size: 72px; }
.star-three { right: 20%; bottom: 10%; color: #fff; font-size: 90px; }
.color-ribbon { position: absolute; z-index: 1; height: 34px; transform: rotate(-14deg); }
.ribbon-one { width: 42%; left: -5%; bottom: 30%; background: #ff159e; box-shadow: 0 12px #fff600, 0 24px #1849ff; }
.ribbon-two { width: 30%; right: -4%; top: 43%; background: #00ff88; transform: rotate(20deg); box-shadow: 0 12px #ff3b00; }
.ribbon-three { width: 36%; left: 28%; top: 7%; height: 15px; background: #fff600; transform: rotate(-8deg); }
.scribble { color: #ff159e; font: 700 48px/1 'Space Mono', monospace; text-shadow: 3px 3px #00ff88; }
.scribble-one { left: 25%; top: 30%; transform: rotate(-15deg); }
.scribble-two { right: 24%; bottom: 20%; color: #fff600; transform: rotate(10deg); }
.image-trigger { width: clamp(240px, 35vw, 430px); z-index: 10; transition: none; }
.image-trigger:hover { transform: none; }
.image-trigger:focus-visible { outline: 4px solid #fff600; outline-offset: 8px; }
.image-trigger img { inset: 0; width: 100%; height: 100%; filter: contrast(1.15) saturate(1.22); mix-blend-mode: darken; }
.counter { right: 4%; bottom: 4%; z-index: 12; color: #fff600; font-family: 'Noto Sans JP', sans-serif; font-size: 25px; -webkit-text-stroke: 1px #1447ff; text-shadow: 3px 3px #ff159e; }
.blog-link { position: absolute; left: 50%; bottom: 12px; z-index: 20; padding: 4px 10px; color: #124bff; background: #fff600; font: 700 13px 'Space Mono', monospace; text-decoration: none; transform: translateX(-50%) rotate(-3deg); border: 2px solid #ff159e; box-shadow: 3px 3px #fff; }
.blog-link:hover, .blog-link:focus-visible { color: #fff600; background: #ff159e; }
.flash { background: #fff600; }
.is-shaking { animation: shake .14s steps(2, end) infinite; }
@media (max-width: 620px) {
  .jp-title { top: 6%; font-size: 42px; }
  .jp-line { font-size: 20px; letter-spacing: -2px; }
  .line-one { top: 18%; left: 3%; }
  .line-two { bottom: 17%; left: 2%; }
  .line-three { top: 31%; right: 1%; }
  .jp-vertical { font-size: 14px; }
  .jp-small { font-size: 12px; }
  .jp-side { font-size: 14px; }
  .jp-mini { font-size: 10px; }
  .side-left-one { left: 1%; top: 27%; }
  .side-left-two { left: 1%; top: 50%; }
  .side-left-three { left: 2%; bottom: 27%; }
  .side-right-one { right: 1%; top: 24%; }
  .side-right-two { right: 1%; top: 48%; }
  .side-right-three { right: 2%; bottom: 29%; }
  .mini-three { left: 34%; }
  .star { font-size: 63px; }
  .star-two { font-size: 48px; }
  .star-three { font-size: 58px; }
  .image-trigger { width: 76vw; }
  .blog-link { bottom: 8px; font-size: 11px; }
  .ribbon-one { width: 55%; bottom: 31%; }
  .ribbon-two { width: 42%; }
}