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

:root {
  --milk: #f5f0e8;
  --white: #fffdf8;
  --ink: #11120f;
  --blue: #062a82;
  --blue-2: #003bc0;
  --blue-dark: #001b5d;
  --red: #ed2830;
  --acid: #b9f31d;
  --orange: #f4a62a;
  --border: 2px solid var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--milk); color: var(--ink); font-family: "Space Mono", "Courier New", monospace; overflow-x: hidden; }
body.gate-open { overflow: hidden; }
body.mint-mode { --milk: #dfff74; --acid: #fffdf8; }
::selection { color: var(--white); background: var(--red); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }

.grain { position: fixed; z-index: 98; inset: 0; pointer-events: none; opacity: .065; 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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.cursor-blob { position: fixed; z-index: 97; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 50% 35% 60% 42%; background: var(--white); pointer-events: none; transform: translate(-50%,-50%); transition: width .15s, height .15s, background .15s; mix-blend-mode: exclusion; }
.cursor-blob.hot { width: 44px; height: 44px; background: var(--acid); }
.splat { position: fixed; z-index: 96; width: 22px; height: 22px; pointer-events: none; border-radius: 63% 37% 71% 29% / 45% 60% 40% 55%; background: var(--white); border: 1px solid rgba(0,0,0,.4); animation: splat .65s ease-out forwards; }
.read-progress { position: fixed; z-index: 99; left: 0; top: 0; width: 100%; height: 4px; background: transparent; }
.read-progress span { display: block; width: 0; height: 100%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }

.entry-gate { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 30px; color: var(--white); background: var(--blue); transition: clip-path .9s cubic-bezier(.85,0,.15,1), visibility .9s; clip-path: circle(150% at 50% 50%); }
.entry-gate.exit { clip-path: circle(0 at 50% 58%); visibility: hidden; }
.gate-noise { position: absolute; inset: 0; opacity: .4; background: radial-gradient(circle at 20% 70%, transparent 0 15%, rgba(0,0,0,.32) 15.3% 16%, transparent 16.3%), repeating-linear-gradient(97deg, transparent 0 42px, rgba(255,255,255,.045) 43px 45px); }
.gate-code { position: absolute; left: 30px; top: 18px; font-size: 10px; letter-spacing: 2px; }
.gate-lockup { position: relative; display: grid; grid-template-columns: minmax(250px, 430px) minmax(340px, 640px); align-items: center; gap: clamp(30px, 7vw, 110px); width: min(1120px, 95vw); }
.gate-tube { width: 100%; aspect-ratio: 1.35; border-radius: 45% 8% 8% 45%; border: 4px solid var(--ink); background: linear-gradient(156deg, #fff 0 8%, #d7d4cd 20%, #fff 38% 62%, #c7c5bd 83%, #fff 100%); box-shadow: inset -50px 0 80px rgba(0,0,0,.18), 22px 25px 0 var(--ink); transform: rotate(-8deg); position: relative; }
.gate-tube::after { content: ""; position: absolute; right: -70px; top: 17%; width: 90px; height: 67%; border-radius: 15px 32px 32px 15px; border: 4px solid var(--ink); background: repeating-linear-gradient(90deg,#fff 0 7px,#cfcfc8 8px 10px); }
.gate-tube span { position: absolute; inset: 20% 12% 20% 34%; display: grid; place-items: center; color: var(--white); background: var(--blue); border: 3px solid var(--ink); font: 900 clamp(20px,3.1vw,42px)/.86 "Archivo Black", sans-serif; transform: skew(-8deg); text-align: center; text-shadow: 3px 3px var(--red); }
.gate-lockup h2 { margin: 10px 0 22px; font: 900 clamp(66px,8vw,132px)/.75 "Archivo Black", sans-serif; letter-spacing: -7px; text-shadow: 6px 6px 0 var(--red); }
.micro { max-width: 410px; font-size: 10px; opacity: .7; }
.enter-button { position: relative; width: min(390px,100%); height: 62px; overflow: hidden; border: 3px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; box-shadow: 7px 7px 0 var(--ink); }
.enter-button strong { position: relative; z-index: 2; }
.enter-fill { position: absolute; inset: 0; background: var(--acid); transform: scaleX(0); transform-origin: left; }
.enter-button.holding .enter-fill { animation: fill 1s linear forwards; }

.site-header { position: fixed; z-index: 50; inset: 18px 22px auto; height: 58px; border: var(--border); border-radius: 9px; background: rgba(245,240,232,.9); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 7px 14px; box-shadow: 4px 4px 0 var(--ink); transition: transform .3s; }
.site-header.hidden { transform: translateY(-95px); }
.brand { display: flex; align-items: center; gap: 10px; font-family: "Archivo Black", sans-serif; letter-spacing: -1px; }
.brand sup { color: var(--red); font-size: 8px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50% 45% 55% 40%; color: var(--milk); background: var(--blue); border: var(--border); transform: rotate(-7deg); }
nav { display: flex; gap: clamp(14px,3vw,42px); font-size: 11px; font-weight: 700; text-transform: uppercase; }
nav a { position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; background: var(--red); transition: .2s; }
nav a:hover::after { right: 0; }
.nav-actions { display: flex; gap: 7px; align-items: center; }
.signal-button { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.signal-button span { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); border: 1px solid var(--ink); box-shadow: 0 0 0 3px rgba(185,243,29,.3); }
.x-button, .buy-button { display: grid; place-items: center; height: 40px; border: var(--border); font-weight: 800; }
.x-button { width: 40px; border-radius: 50%; background: var(--white); }
.buy-button { padding: 0 18px; border-radius: 5px 15px 5px 15px; color: white; background: var(--red); box-shadow: 2px 2px 0 var(--ink); }
.side-channel { position: fixed; z-index: 45; right: 10px; top: 40%; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.side-channel span { writing-mode: vertical-rl; font-size: 8px; letter-spacing: 2px; color: var(--white); mix-blend-mode: difference; }
.side-channel button { width: 34px; height: 34px; border: var(--border); border-radius: 50%; background: var(--acid); font-weight: 900; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.side-channel i { width: 2px; height: 48px; background: currentColor; opacity: .4; }

.hero { min-height: 100svh; position: relative; overflow: hidden; background: var(--blue); isolation: isolate; }
.hero-world { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.03); animation: slowZoom 16s ease-in-out infinite alternate; }
.hero-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg,rgba(7,12,20,.12) 0%,rgba(5,20,73,.02) 48%,rgba(2,10,35,.64) 100%),linear-gradient(0deg,rgba(2,9,32,.5),transparent 55%); }
.hero-copy { position: relative; z-index: 2; width: min(760px,80vw); padding: 145px 0 80px clamp(25px,6vw,96px); color: var(--white); will-change: transform; }
.eyebrow { display: inline-block; margin: 0 0 18px; padding: 8px 12px; color: var(--ink); background: var(--acid); border: var(--border); transform: rotate(-1.5deg); font-size: 10px; font-weight: 700; box-shadow: 3px 3px 0 var(--ink); }
h1 { margin: 0; font: 900 clamp(76px,12vw,192px)/.72 "Archivo Black", sans-serif; letter-spacing: clamp(-8px,-.55vw,-2px); text-transform: uppercase; text-shadow: 6px 7px 0 var(--blue),9px 10px 0 var(--red); transform: skew(-3deg); }
h1 span { display: block; }
h1 span:last-child { margin-left: .21em; color: var(--acid); }
.hero-lede { max-width: 630px; margin: 40px 0 25px 8px; font: 700 clamp(16px,1.5vw,22px)/1.45 "Syne", sans-serif; text-shadow: 0 2px 16px #00184c; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-left: 8px; }
.primary-cta, .quack-button { min-height: 52px; padding: 0 19px; border: var(--border); border-radius: 6px; display: inline-flex; align-items: center; gap: 18px; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: transform .2s,box-shadow .2s; }
.primary-cta { background: var(--white); color: var(--ink); }
.quack-button { background: var(--acid); color: var(--ink); }
.primary-cta:hover,.quack-button:hover { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.hero-card { position: absolute; z-index: 3; right: clamp(25px,5vw,70px); bottom: 75px; width: 180px; margin: 0; padding: 8px 8px 11px; background: var(--white); border: var(--border); box-shadow: 7px 7px 0 var(--red); transform: rotate(4deg); transition: transform .15s; }
.photo-wrap { aspect-ratio: 1; overflow: hidden; filter: contrast(1.05) saturate(.9); }
.photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.hero-card p { margin: 9px 2px 1px; font-size: 10px; }
.hero-card > span:last-child { margin-left: 2px; color: var(--blue); font-size: 8px; font-weight: 700; }
.tape { position: absolute; z-index: 3; width: 48px; height: 16px; background: rgba(217,209,183,.78); border: 1px solid rgba(0,0,0,.15); }
.tape-a { top: -7px; left: -19px; transform: rotate(-32deg); }.tape-b { bottom: -6px; right: -23px; transform: rotate(-18deg); }
.scroll-note { position: absolute; right: -83px; top: 46%; z-index: 3; rotate: 90deg; color: var(--white); font-size: 9px; letter-spacing: 2px; }
.hero-ticket { position: absolute; z-index: 2; left: 48%; bottom: 26px; padding: 9px 14px; display: flex; gap: 12px; align-items: center; background: var(--white); border: var(--border); transform: rotate(-3deg); font-size: 8px; }
.hero-ticket b { background: var(--red); color: var(--white); padding: 4px; }.hero-ticket small { opacity: .55; }
.float-object { position: absolute; z-index: 4; border: 0; cursor: pointer; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.55)); transition: transform .25s; animation: float 4s ease-in-out infinite alternate; }
.float-object:hover { transform: scale(1.18) rotate(-8deg); }
.phone-prop { right: 25%; top: 21%; width: 44px; height: 76px; border-radius: 9px; border: 3px solid var(--ink); background: #101010; color: var(--acid); transform: rotate(17deg); }
.phone-prop::before { content: ""; position: absolute; inset: 7px 4px; border-radius: 4px; background: linear-gradient(150deg,#003bc0,#03102f); }
.phone-prop span { position: relative; font-size: 7px; }
.cross-prop { left: 48%; top: 17%; background: transparent; color: silver; font: 72px/1 Georgia,serif; text-shadow: 2px 2px var(--ink); animation-delay: -.7s; }
.beanie-prop { right: 8%; top: 18%; width: 90px; height: 82px; border-radius: 58% 58% 16% 16%; border: 3px solid var(--ink); background: repeating-linear-gradient(86deg,#181818 0 5px,#2f2f2f 6px 8px); animation-delay: -1.4s; }
.beanie-prop::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 27px; border: 3px solid var(--ink); background: #222; }
.headphone-prop { left: 35%; bottom: 7%; background: transparent; color: var(--ink); font: 700 40px/1 "Space Mono"; animation-delay: -2.2s; }

.crawl { overflow: hidden; color: var(--white); background: var(--red); border-block: 3px solid var(--ink); transform: rotate(-.6deg) scale(1.01); }
.crawl div { display: flex; width: max-content; gap: 30px; align-items: center; padding: 13px 0; animation: marquee 22s linear infinite; font: 800 15px "Syne",sans-serif; }
.crawl i { color: var(--acid); font-style: normal; }
.section-pad { padding: clamp(85px,11vw,160px) clamp(22px,6vw,94px); }
.story { position: relative; background-color: var(--milk); background-image: linear-gradient(rgba(6,42,130,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(6,42,130,.06) 1px,transparent 1px); background-size: 32px 32px; }
.story::before { content: "CONFIDENTIAL / QUACK DIVISION"; position: absolute; right: -95px; top: 220px; color: rgba(237,40,48,.26); font: 900 54px "Archivo Black"; transform: rotate(90deg); }
.kicker { margin: 0 0 16px; color: var(--blue-2); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.kicker.light { color: var(--acid); }
.section-heading { position: relative; max-width: 950px; }
.section-heading h2,.why-copy h2,.route-top h2,.lab-heading h2,.finale h2 { margin: 0; font: 900 clamp(48px,7vw,112px)/.83 "Archivo Black",sans-serif; letter-spacing: clamp(-5px,-.35vw,-1px); }
h2 em { color: var(--red); font-style: normal; -webkit-text-stroke: 1px var(--ink); }
.heading-note { position: absolute; right: -30%; bottom: 5%; width: 230px; font: 700 13px/1.5 "Syne",sans-serif; transform: rotate(-4deg); }
.heading-note::before { content: "↖"; display: block; color: var(--red); font-size: 45px; }
.story-machine { display: grid; grid-template-columns: 220px 1fr minmax(220px,330px); max-width: 1280px; margin: 85px auto 0; border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--blue); background: var(--white); }
.chapter-tabs { display: flex; flex-direction: column; border-right: var(--border); background: var(--blue); }
.chapter-tab { min-height: 92px; padding: 18px; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); text-align: left; font-size: 10px; font-weight: 700; cursor: pointer; }
.chapter-tab span { display: block; margin-bottom: 7px; color: var(--acid); font: 900 24px "Archivo Black"; }
.chapter-tab:hover,.chapter-tab.active { color: var(--ink); background: var(--acid); }.chapter-tab.active span { color: var(--red); }
.chapter-reader { padding: clamp(24px,4vw,55px); outline: 0; overflow: hidden; }
.chapter-reader.switching > * { animation: chapterIn .42s both; }
.chapter-meta { display: flex; justify-content: space-between; margin-bottom: 34px; color: var(--blue); font-size: 9px; letter-spacing: 1px; }
.chapter-reader h3 { max-width: 700px; margin: 0 0 22px; font: 800 clamp(27px,3vw,46px)/1.04 "Syne",sans-serif; }
.chapter-reader > p { max-width: 690px; font-size: 13px; line-height: 1.85; }
.chapter-reader blockquote { margin: 32px 0 12px; padding-left: 18px; border-left: 6px solid var(--red); color: var(--blue); font: 800 16px/1.5 "Syne",sans-serif; }
.chapter-photo { position: relative; padding: 12px; border-left: var(--border); background: #ddd7cd; }
.chapter-photo img { width: 100%; height: calc(100% - 30px); object-fit: cover; filter: grayscale(.15) contrast(1.06); }
.chapter-photo span { position: absolute; right: 18px; bottom: 18px; padding: 5px; background: var(--acid); border: 1px solid var(--ink); font-size: 7px; transform: rotate(-2deg); }
.waveform { height: 40px; margin-top: 34px; display: flex; align-items: center; gap: 5px; }
.waveform i,.equalizer i { width: 4px; height: 40%; background: var(--blue); animation: wave .85s ease-in-out infinite alternate; transform-origin: center; }
.waveform i:nth-child(2n),.equalizer i:nth-child(2n) { animation-delay: -.3s; }.waveform i:nth-child(3n),.equalizer i:nth-child(3n) { animation-delay: -.55s; }
.evidence-strip { display: grid; grid-template-columns: 1.35fr repeat(4,1fr); max-width: 1350px; margin: 110px auto 0; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--red); }
.evidence-intro { padding: 24px; color: var(--white); background: var(--blue); }
.evidence-intro span { color: var(--acid); font-size: 8px; }.evidence-intro h3 { margin: 25px 0 0; font: 800 21px/1.05 "Syne",sans-serif; }
.evidence-card { min-height: 230px; padding: 20px 12px; border: 0; border-left: var(--border); background: var(--white); cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; transition: .2s; }
.evidence-card:hover { background: var(--acid); transform: translateY(-10px) rotate(1deg); box-shadow: 0 10px var(--ink); }
.evidence-icon { margin: auto auto 20px; color: var(--blue); font: 900 53px/1 Georgia,serif; }.evidence-card small { color: var(--red); font-size: 7px; }.evidence-card b { margin: 5px 0; font: 800 13px "Syne"; }.evidence-card i { color: #777; font-size: 7px; font-style: normal; }

.why-section { background: var(--white); border-top: 3px solid var(--ink); }
.why-grid { display: grid; grid-template-columns: minmax(350px,.9fr) 1.1fr; gap: clamp(45px,8vw,120px); align-items: center; max-width: 1450px; margin: auto; }
.why-visual { position: relative; padding: 25px 25px 100px; background: var(--blue); border: 3px solid var(--ink); box-shadow: 13px 13px 0 var(--acid); transform: rotate(-1.5deg); }
.paste-frame { height: 540px; overflow: hidden; border: var(--border); }.paste-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 50%; }
.hand-arrow { position: absolute; left: 28px; bottom: 38px; color: var(--white); font: 800 14px/1.4 "Syne"; transform: rotate(-3deg); }.specimen-label { position: absolute; right: -40px; top: 24px; padding: 9px; background: var(--white); border: var(--border); box-shadow: 4px 4px var(--red); font-size: 8px; transform: rotate(5deg); }
.why-copy > p:not(.kicker) { max-width: 730px; margin: 32px 0; font: 500 16px/1.75 "Syne"; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; border: var(--border); }
.fact-grid div { min-height: 110px; padding: 17px; display: flex; flex-direction: column; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }.fact-grid div:nth-child(even) { border-right: 0; }.fact-grid div:nth-child(n+3) { border-bottom: 0; }
.fact-grid b { color: var(--blue); font: 900 27px "Archivo Black"; }.fact-grid span { margin-top: auto; font-size: 9px; }

.route { position: relative; color: var(--white); background: var(--blue-dark); overflow: hidden; }
.route::before { content: ""; position: absolute; inset: 0; opacity: .24; background: radial-gradient(circle at 10% 20%,var(--blue-2),transparent 30%),radial-gradient(circle at 88% 70%,#0045da,transparent 27%),repeating-linear-gradient(110deg,transparent 0 95px,rgba(255,255,255,.05) 96px 98px); }
.route-top { position: relative; z-index: 2; display: grid; grid-template-columns: 1.5fr .5fr; gap: 40px; align-items: end; max-width: 1380px; margin: auto; }
.route-top h2 em { color: var(--acid); -webkit-text-stroke: 1px var(--white); }.route-top > p { max-width: 420px; margin: 0 0 8px; font: 500 13px/1.7 "Syne"; opacity: .8; }
.route-board { position: relative; z-index: 2; height: 720px; max-width: 1400px; margin: 65px auto 0; border: 3px solid var(--ink); border-radius: 40px 9px 55px 13px; background: linear-gradient(145deg,#063ab1,#00194f); box-shadow: 14px 14px 0 var(--red); overflow: hidden; }
.route-map { position: absolute; inset: 0; width: 100%; height: 100%; }.route-map path { fill: none; stroke-linecap: round; }
.route-shadow { stroke: var(--ink); stroke-width: 57; opacity: .65; }.route-line { stroke: var(--white); stroke-width: 43; filter: drop-shadow(0 0 14px rgba(255,255,255,.4)); }.route-dash { stroke: var(--blue); stroke-width: 3; stroke-dasharray: 3 19; animation: dash 1.5s linear infinite; }
.route-node { position: absolute; z-index: 4; left: var(--x); top: var(--y); width: 92px; height: 92px; transform: translate(-50%,-50%); border: 3px solid var(--ink); border-radius: 50% 44% 52% 40%; color: var(--ink); background: var(--white); cursor: pointer; box-shadow: 5px 6px 0 var(--ink); transition: .25s; }
.route-node:hover,.route-node.active { color: var(--ink); background: var(--acid); transform: translate(-50%,-50%) scale(1.15) rotate(-5deg); }.route-node span { position: absolute; top: -10px; left: -8px; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: var(--white); background: var(--red); border: 2px solid var(--ink); font-size: 9px; }.route-node b { display: block; font: 800 10px/1.1 "Syne"; }.route-node i { display: block; margin-top: 5px; color: var(--blue); font-size: 8px; font-style: normal; }
.route-duck { --duck-x:6%; --duck-y:78%; position: absolute; z-index: 5; left: var(--duck-x); top: calc(var(--duck-y) - 64px); width: 45px; height: 30px; border: var(--border); border-radius: 55% 55% 48% 48%; color: var(--ink); background: var(--white); transform: translate(-50%,-50%); display: grid; place-items: center; font-size: 11px; transition: left .75s cubic-bezier(.2,.9,.2,1),top .75s cubic-bezier(.2,.9,.2,1); }.route-duck span { position: absolute; right: -15px; color: var(--orange); font-size: 28px; }
.route-detail { position: absolute; z-index: 6; left: 4%; top: 5%; width: min(330px,30vw); padding: 23px; color: var(--ink); background: var(--white); border: var(--border); box-shadow: 8px 8px 0 var(--ink); transform: rotate(-1deg); }.route-detail > span { color: var(--red); font-size: 8px; font-weight: 700; }.route-detail h3 { margin: 10px 0; color: var(--blue); font: 900 28px/.95 "Archivo Black"; }.route-detail p { min-height: 78px; font-size: 10px; line-height: 1.55; }.route-detail button { border: 0; padding: 0; background: none; color: var(--blue); font-size: 9px; font-weight: 800; cursor: pointer; }
.route-meter { height: 9px; margin: 17px 0 13px; border: 1px solid var(--ink); background: #dedbd5; }.route-meter i { display: block; width: 20%; height: 100%; background: var(--acid); transition: width .4s; }
.route-scribble { position: absolute; right: 5%; bottom: 5%; z-index: 3; color: var(--acid); font: 700 15px/1.3 "Syne"; transform: rotate(6deg); }

.lab { background-color: #dcd9d0; background-image: linear-gradient(90deg,rgba(6,42,130,.09) 1px,transparent 1px),linear-gradient(rgba(6,42,130,.09) 1px,transparent 1px); background-size: 26px 26px; }
.lab-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; max-width: 1350px; margin: auto auto 80px; }.lab-heading .kicker { grid-column: 1/-1; }.lab-heading > p:last-child { max-width: 400px; justify-self: end; margin-bottom: 10px; font: 600 14px/1.6 "Syne"; }
.lab-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px; max-width: 1350px; margin: auto; }.lab-grid article { border: 3px solid var(--ink); background: var(--white); box-shadow: 9px 9px 0 var(--ink); }
.panel-label { min-height: 40px; padding: 9px 13px; display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border); background: var(--blue); color: var(--white); font-size: 8px; letter-spacing: 1px; }.panel-label i { color: var(--acid); font-style: normal; }
.dress-stage { position: relative; height: 470px; overflow: hidden; background: var(--ink); }.dress-stage > img { width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; }.drop-hint { position: absolute; top: 20px; right: 20px; padding: 7px; background: var(--acid); border: var(--border); font-size: 8px; transform: rotate(3deg); }
.placed-prop { position: absolute; z-index: 4; display: grid; place-items: center; min-width: 58px; min-height: 58px; padding: 8px; border: 3px solid var(--ink); border-radius: 50%; background: var(--acid); box-shadow: 4px 4px 0 var(--ink); font: 900 27px "Space Mono"; cursor: grab; touch-action: none; }
.prop-tray { display: grid; grid-template-columns: repeat(4,1fr); border-top: var(--border); }.drag-prop { min-height: 82px; border: 0; border-right: var(--border); background: var(--white); font-size: 7px; font-weight: 700; cursor: grab; }.drag-prop:last-child { border-right: 0; }.drag-prop:hover { background: var(--acid); }.drag-prop span { display: block; color: var(--blue); font-size: 26px; }
.small-action { margin: 10px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font-size: 8px; cursor: pointer; }
.signal-mixer { min-height: 620px; }.scanner-display { min-height: 300px; padding: 40px 30px 30px; color: var(--acid); background: var(--ink); }.scanner-display p { margin: 40px 0 30px; min-height: 100px; font: 800 clamp(21px,2.2vw,34px)/1.2 "Syne"; }.scanner-display > span { color: var(--white); opacity: .45; font-size: 8px; }
.equalizer { height: 55px; display: flex; align-items: center; gap: 8px; }.equalizer i { width: 9px; height: 70%; background: var(--acid); }
.scan-button { width: calc(100% - 40px); height: 56px; margin: 20px; border: var(--border); color: var(--white); background: var(--red); box-shadow: 4px 4px 0 var(--ink); font-size: 10px; font-weight: 800; cursor: pointer; }
.soundboard { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 20px; border: var(--border); }.soundboard button { min-height: 85px; border: 0; border-right: 1px solid var(--ink); background: #eeece5; cursor: pointer; }.soundboard button:last-child { border: 0; }.soundboard button:active { background: var(--acid); transform: translateY(2px); }.soundboard b { display: block; color: var(--blue); font: 900 22px "Archivo Black"; }.soundboard span { font-size: 7px; }
.frequency { display: grid; grid-template-columns: auto 1fr 24px; gap: 14px; align-items: center; margin: 22px; font-size: 8px; }.frequency input { width: 100%; accent-color: var(--acid); }.frequency output { color: var(--red); font-weight: 700; }
.draw-panel { grid-column: 1/-1; }.draw-panel canvas { display: block; width: 100%; height: 440px; background: linear-gradient(135deg,#032a7c,#001642); cursor: crosshair; touch-action: none; }.draw-controls { min-height: 65px; display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; }.draw-controls p { font-size: 9px; }.draw-controls button { padding: 9px 13px; border: var(--border); background: var(--acid); font-size: 8px; font-weight: 700; cursor: pointer; }

.finale { position: relative; min-height: 950px; display: grid; align-items: center; padding: 110px clamp(22px,8vw,130px); color: var(--white); background: var(--blue); overflow: hidden; isolation: isolate; }.finale-bg { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg,rgba(0,17,68,.9),rgba(0,17,68,.15)),url('./dp-world-2026.jpg') center/cover; transform: scale(1.03); }.finale::after { content: ""; position: absolute; z-index: -1; inset: auto -8% -30% 25%; height: 58%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg,rgba(255,253,248,.98),rgba(222,218,206,.96)); transform: rotate(-7deg); filter: drop-shadow(0 -10px 20px rgba(0,0,0,.35)); }
.finale-content { position: relative; z-index: 2; max-width: 820px; }.finale h2 em { color: var(--acid); -webkit-text-stroke: 1px var(--white); }.finale-content > p:not(.kicker) { max-width: 650px; font: 600 15px/1.75 "Syne"; text-shadow: 0 2px 8px var(--blue-dark); }.finale-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 35px; }.finale-buy,.x-big { min-height: 58px; padding: 0 22px; display: inline-flex; align-items: center; border: var(--border); box-shadow: 5px 5px 0 var(--ink); font-size: 11px; font-weight: 800; }.x-big { color: var(--ink); background: var(--white); gap: 24px; }.x-big span { font-size: 21px; }
.finale-sticker { position: absolute; z-index: 3; right: 7%; top: 22%; width: 180px; height: 180px; border: 4px solid var(--ink); border-radius: 50% 45% 52% 43%; display: grid; place-items: center; color: var(--blue); background: var(--acid); text-align: center; font: 900 27px/.86 "Archivo Black"; box-shadow: 10px 10px 0 var(--red); transform: rotate(9deg); animation: float 3s ease-in-out infinite alternate; }

footer { min-height: 230px; padding: 45px clamp(22px,5vw,80px); display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 40px; align-items: end; border-top: 3px solid var(--ink); background: var(--acid); }.footer-logo { font: 900 clamp(35px,5vw,77px)/.8 "Archivo Black"; letter-spacing: -4px; }.footer-logo sup { color: var(--red); font: 700 9px "Space Mono"; letter-spacing: 0; }.contract-block span { display: block; margin-bottom: 8px; font-size: 7px; }.contract-block button { width: 100%; padding: 11px; display: flex; justify-content: space-between; border: var(--border); background: var(--white); font-size: 8px; cursor: pointer; }.contract-block b { color: var(--red); }footer p,footer > a { font-size: 8px; line-height: 1.7; }footer > a { text-decoration: underline; font-weight: 700; }

.evidence-modal { width: min(620px,90vw); padding: 38px; border: 3px solid var(--ink); border-radius: 4px 35px 4px 35px; background: var(--white); box-shadow: 14px 14px 0 var(--red); }.evidence-modal::backdrop { background: rgba(0,20,78,.72); backdrop-filter: blur(9px); }.evidence-modal h2 { margin: 8px 0 15px; color: var(--blue); font: 900 clamp(34px,5vw,68px)/.85 "Archivo Black"; }.evidence-modal > p:not(.kicker) { font: 600 14px/1.7 "Syne"; }.evidence-modal small { font-size: 7px; opacity: .5; }.modal-close { position: absolute; right: 13px; top: 11px; width: 37px; height: 37px; border: var(--border); border-radius: 50%; background: var(--acid); font-size: 22px; cursor: pointer; }.modal-icon { float: right; margin: 15px 20px; color: var(--red); font: 900 70px "Space Mono"; }
.toast { position: fixed; z-index: 110; left: 50%; bottom: 24px; padding: 13px 18px; border: var(--border); color: var(--white); background: var(--blue); box-shadow: 5px 5px 0 var(--red); transform: translate(-50%,120px); transition: .35s; font-size: 9px; }.toast.show { transform: translate(-50%,0); }
.reveal { opacity: 0; transform: translateY(45px) rotate(.2deg); transition: opacity .7s,transform .8s cubic-bezier(.2,.8,.2,1); }.reveal.visible { opacity: 1; transform: none; }

@keyframes slowZoom { to { transform: scale(1.04); } }
@keyframes float { to { translate: 0 13px; rotate: 3deg; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes dash { to { stroke-dashoffset: -22; } }
@keyframes wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes fill { to { transform: scaleX(1); } }
@keyframes splat { to { opacity: 0; transform: scale(2.8) rotate(70deg); } }
@keyframes chapterIn { from { opacity: 0; transform: translateX(24px); } }

@media (max-width: 1060px) {
  .cursor-blob { display: none; }
  .story-machine { grid-template-columns: 170px 1fr; }.chapter-photo { display: none; }
  .evidence-strip { grid-template-columns: repeat(2,1fr); }.evidence-intro { grid-column: 1/-1; }.evidence-card { border-top: var(--border); }
  .why-grid { grid-template-columns: 1fr; }.paste-frame { height: 460px; }
  .route-board { height: 670px; }.route-detail { width: 310px; }
  .lab-grid { grid-template-columns: 1fr; }.draw-panel { grid-column: auto; }
  footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .grain { opacity: .04; }
  .entry-gate { padding: 24px; }.gate-lockup { grid-template-columns: 1fr; text-align: center; }.gate-tube { width: 230px; margin: 20px auto 5px; }.gate-lockup h2 { font-size: 64px; letter-spacing: -4px; }.micro { margin-inline: auto; }.gate-code { left: 15px; }
  .site-header { inset: 10px 10px auto; height: 54px; }.site-header nav,.signal-button { display: none; }.brand { font-size: 12px; }.brand-mark { width: 32px; height: 32px; }.buy-button { padding: 0 10px; font-size: 10px; }.x-button { width: 36px; height: 36px; }.side-channel { display: none; }
  .hero { min-height: 920px; }.hero-world { object-position: 43% center; }.hero-shade { background: linear-gradient(0deg,rgba(0,14,55,.82),transparent 70%); }.hero-copy { width: 100%; padding: 114px 18px 310px; }.eyebrow { font-size: 8px; }.hero h1 { font-size: clamp(67px,25vw,105px); letter-spacing: -6px; text-shadow: 4px 5px 0 var(--blue),7px 8px 0 var(--red); }.hero-lede { margin-top: 32px; font-size: 15px; }.hero-card { right: 24px; bottom: 58px; width: 145px; }.hero-ticket,.scroll-note,.headphone-prop,.cross-prop { display: none; }.phone-prop { right: 12%; top: 54%; }.beanie-prop { right: auto; left: 7%; top: 60%; width: 62px; height: 58px; }
  .section-pad { padding: 80px 18px; }.section-heading h2,.why-copy h2,.route-top h2,.lab-heading h2,.finale h2 { font-size: clamp(46px,14vw,72px); }.heading-note { position: relative; right: auto; bottom: auto; width: auto; margin: 35px 0 0 35%; }.heading-note::before { display: none; }
  .story-machine { grid-template-columns: 1fr; margin-top: 50px; }.chapter-tabs { display: grid; grid-template-columns: 1fr 1fr; border-right: 0; }.chapter-tab { min-height: 72px; padding: 12px; border-right: 1px solid rgba(255,255,255,.2); }.chapter-tab span { display: inline; margin-right: 5px; font-size: 15px; }.chapter-reader { padding: 25px 19px; }.chapter-reader h3 { font-size: 29px; }.chapter-reader > p { font-size: 11px; }.evidence-strip { grid-template-columns: 1fr 1fr; margin-top: 70px; }.evidence-card { min-height: 180px; }.evidence-icon { font-size: 38px; }
  .why-visual { padding: 14px 14px 85px; }.paste-frame { height: 380px; }.specimen-label { right: -6px; top: -25px; }.why-copy { margin-top: 28px; }.fact-grid b { font-size: 22px; }
  .route-top { grid-template-columns: 1fr; }.route-top > p { font-size: 11px; }.route-board { height: 850px; border-radius: 20px 4px 25px 8px; }.route-map { left: -130px; width: 150%; }.route-node { width: 70px; height: 70px; }.route-node:nth-of-type(1) { --x:14%!important;--y:72%!important; }.route-node:nth-of-type(2) { --x:42%!important;--y:58%!important; }.route-node:nth-of-type(3) { --x:68%!important;--y:47%!important; }.route-node:nth-of-type(4) { --x:84%!important;--y:34%!important; }.route-node:nth-of-type(5) { --x:91%!important;--y:20%!important; }.route-node b { font-size: 7px; }.route-detail { left: 5%; top: auto; bottom: 4%; width: 90%; }.route-scribble { top: 5%; bottom: auto; }.route-duck { display: none; }
  .lab-heading { grid-template-columns: 1fr; }.lab-heading .kicker { grid-column: auto; }.lab-heading > p:last-child { margin-top: 28px; justify-self: start; font-size: 12px; }.dress-stage { height: 390px; }.prop-tray { grid-template-columns: 1fr 1fr; }.drag-prop { border-bottom: var(--border); }.scanner-display p { font-size: 24px; }.soundboard b { font-size: 18px; }.frequency { grid-template-columns: 1fr 23px; }.frequency input { grid-column: 1/-1; grid-row: 2; }.draw-panel canvas { height: 380px; }.draw-controls p { max-width: 55%; }
  .finale { min-height: 900px; padding: 90px 20px 250px; }.finale-sticker { width: 120px; height: 120px; right: 9%; top: auto; bottom: 70px; font-size: 18px; }.finale-content > p:not(.kicker) { font-size: 12px; }.finale-actions { flex-direction: column; align-items: stretch; }.finale-buy,.x-big { justify-content: center; font-size: 9px; }
  footer { grid-template-columns: 1fr; gap: 25px; align-items: start; }.footer-logo { font-size: 52px; }
}

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