:root {
  --paper: #f5f0dc;
  --ink: #10100e;
  --zog: #a6cb72;
  --zog-dark: #789d50;
  --pink: #f0a4b8;
  --butter: #f8df79;
  --lav: #c8b8ed;
  --blue: #9bcce3;
  --red: #e76451;
  --freq: 33;
  --shadow: 8px 9px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  overflow-x: hidden;
  cursor: crosshair;
}
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--pink); color: var(--ink); }

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .1;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.cursor-dot {
  width: 24px; height: 24px; border: 3px solid var(--ink); border-radius: 50%; position: fixed;
  left: 0; top: 0; z-index: 1000; pointer-events: none; transform: translate(-50%,-50%); transition: width .2s, height .2s, background .2s; display: none;
}
.cursor-dot.on { width: 46px; height: 46px; background: rgba(240,164,184,.45); }

.loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--paper); transition: transform .8s cubic-bezier(.8,0,.2,1); }
.loader.gone { transform: translateY(-110%); }
.loader-face { width: 112px; height: 88px; background: var(--zog); border: 7px solid var(--ink); border-radius: 48% 52% 44% 56%; display: grid; place-items: center; font-size: 30px; transform: rotate(-4deg); animation: squish .7s infinite alternate; }
.loader p { margin: 0; font-weight: 900; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.scribble-line { width: 260px; height: 17px; border: 4px solid var(--ink); border-radius: 50%; padding: 2px; transform: rotate(1deg); }
.scribble-line span { display: block; height: 100%; width: 0; background: var(--pink); border-radius: 50%; animation: load 1.3s ease forwards; }

.topbar { position: fixed; left: 22px; right: 22px; top: 16px; height: 65px; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 12px; border: 4px solid var(--ink); border-radius: 24px 20px 26px 18px; background: rgba(245,240,220,.91); box-shadow: 4px 5px 0 var(--ink); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 1000; letter-spacing: -1px; }
.brand-face { width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 46% 54% 60% 40%; background: var(--zog); font-size: 14px; transform: rotate(-8deg); }
nav { display: flex; gap: 4px; }
.nav-link, footer button { border: 0; background: transparent; font-size: 12px; font-weight: 1000; padding: 10px; cursor: pointer; }
.nav-link:hover { text-decoration: underline 3px wavy var(--pink); text-underline-offset: 5px; }
.header-actions { display: flex; gap: 8px; }
.mini-btn { min-height: 40px; padding: 10px 15px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 14px 17px 13px 16px; font-size: 12px; font-weight: 1000; box-shadow: 3px 3px 0 var(--ink); transition: transform .2s, box-shadow .2s; }
.mini-btn:hover { transform: translate(3px,3px) rotate(-2deg); box-shadow: 0 0 0 var(--ink); }
.x-btn { background: var(--paper); }
.buy-btn { background: var(--pink); }

.panel { min-height: 100vh; position: relative; padding: 130px clamp(24px,5vw,86px) 80px; overflow: hidden; border-bottom: 5px solid var(--ink); }
.eyebrow { margin: 0 0 16px; font: 900 12px/1.2 Arial, sans-serif; letter-spacing: 2.2px; text-transform: uppercase; }
.live-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--red); animation: blink 1.2s steps(2) infinite; }
h1,h2,h3,p { text-wrap: balance; }
h1,h2 { font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -4px; }
.reveal { opacity: 0; transform: translateY(34px) rotate(.5deg); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.seen { opacity: 1; transform: none; }

.hero { min-height: 100svh; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; isolation: isolate; background: var(--paper); padding-bottom: 110px; }
.room-bg { position: absolute; inset: 0; background: linear-gradient(rgba(245,240,220,.18),rgba(245,240,220,.08)), url('assets/zog-room.png') center / cover no-repeat; z-index: -3; filter: saturate(.88) contrast(.96); transform: scale(1.01); }
.room-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 47% 45%, rgba(245,240,220,.97) 0 20%, rgba(245,240,220,.72) 42%, rgba(245,240,220,0) 72%); }
.hero-copy { position: relative; z-index: 2; padding-top: 25px; }
h1 { margin: 0; font-size: clamp(92px,13vw,210px); line-height: .67; transform: rotate(-2deg); text-shadow: 4px 4px 0 var(--paper), 9px 9px 0 var(--ink); }
h1 span, h1 em { display: block; font-style: normal; }
h1 em { color: var(--zog); margin-left: clamp(18px,7vw,100px); -webkit-text-stroke: 4px var(--ink); text-shadow: 5px 6px 0 var(--pink), 10px 11px 0 var(--ink); }
.tagline { display: inline-block; margin: 34px 0 24px; padding: 11px 16px; font: 1000 clamp(14px,1.25vw,19px)/1.1 Arial, sans-serif; background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1deg); }
.hero-actions,.final-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.doodle-btn { border: 4px solid var(--ink); border-radius: 21px 15px 23px 14px; padding: 15px 19px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; cursor: pointer; font-size: 13px; font-weight: 1000; box-shadow: 5px 6px 0 var(--ink); transition: .2s ease; }
.doodle-btn:hover { transform: translate(4px,5px) rotate(-1deg); box-shadow: 1px 1px 0 var(--ink); }
.doodle-btn span { font-size: 22px; }
.primary { background: var(--pink); }
.secondary { background: var(--paper); }

.zog-stage { position: relative; z-index: 1; min-height: min(72vh,760px); display: grid; place-items: center; }
.zog-main { width: min(72%,630px); aspect-ratio: 1; object-fit: contain; border: 6px solid var(--ink); border-radius: 48% 52% 46% 54%; mix-blend-mode: multiply; box-shadow: 12px 14px 0 rgba(16,16,14,.2); animation: floaty 4.2s ease-in-out infinite; position: relative; z-index: 3; }
.zog-stage.poked .zog-main { animation: poke .65s cubic-bezier(.3,1.5,.5,1); }
.poke-tag { position: absolute; right: 8%; bottom: 18%; z-index: 5; background: var(--butter); border: 3px solid var(--ink); padding: 9px 13px; border-radius: 50%; font-weight: 1000; cursor: pointer; transform: rotate(8deg); }
.speech { position: absolute; right: 0; top: 13%; z-index: 7; width: 180px; padding: 14px 16px; background: #fff; border: 4px solid var(--ink); border-radius: 50% 45% 48% 42%; font-size: 13px; font-weight: 900; text-align: center; transform: rotate(4deg) scale(0); transform-origin: bottom left; transition: transform .3s cubic-bezier(.2,1.5,.4,1); }
.speech.show { transform: rotate(4deg) scale(1); }
.speech::after { content: ""; position: absolute; left: -18px; bottom: -5px; width: 28px; height: 20px; background: #fff; border-left: 4px solid var(--ink); transform: rotate(-35deg); }
.orbit { position: absolute; border: 3px dashed var(--ink); border-radius: 50%; animation: spin 18s linear infinite; }
.orbit-one { width: 88%; height: 67%; }
.orbit-two { width: 64%; height: 88%; animation-direction: reverse; animation-duration: 13s; }
.orbit i { position: absolute; font-style: normal; font-size: 26px; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; }
.orbit i:nth-child(1){ left:8%; top:6%}.orbit i:nth-child(2){right:2%;top:45%}.orbit i:nth-child(3){left:34%;bottom:-18px}
.scroll-note { position: absolute; z-index: 5; left: 50%; bottom: 54px; transform: translateX(-50%) rotate(-1deg); font-size: 11px; font-weight: 1000; letter-spacing: 1px; text-align: center; }
.scroll-note span { font-size: 24px; display: inline-block; animation: nudge 1s ease-in-out infinite alternate; }
.scroll-note small { display: block; font-weight: 600; opacity: .62; letter-spacing: 0; }
.marquee { position: absolute; left: -2%; right: -2%; bottom: 0; height: 38px; border-block: 3px solid var(--ink); background: var(--zog); overflow: hidden; transform: rotate(-.5deg); }
.marquee div { white-space: nowrap; font: 1000 14px/32px Arial,sans-serif; letter-spacing: 1px; animation: marquee 17s linear infinite; }

.origin { background: var(--pink); }
.origin::before { content:""; position:absolute; inset:0; opacity:.22; background-image: radial-gradient(var(--ink) 1px,transparent 1px); background-size: 22px 22px; }
.section-stamp { position: absolute; top: 110px; right: 5vw; border: 3px solid var(--ink); padding: 9px 12px; border-radius: 50%; font-weight: 1000; transform: rotate(8deg); background: var(--butter); }
.origin-grid { position: relative; display: grid; grid-template-columns: .72fr 1.28fr; min-height: 630px; gap: 4vw; align-items: center; }
.story-title h2,.room-header h2,.route-head h2,.signal-card h2 { font-size: clamp(64px,9vw,140px); line-height: .78; margin: 0; }
.story-title h2 i,.signal-card h2 i { color: var(--paper); -webkit-text-stroke: 4px var(--ink); font-style: normal; text-shadow: 6px 7px 0 var(--ink); }
.story-title .intro { max-width: 330px; font-size: 16px; line-height: 1.5; font-weight: 700; }
.memory-counter { display: inline-block; border: 3px solid var(--ink); border-radius: 50%; padding: 14px 18px; background: var(--paper); font-size: 12px; font-weight: 1000; transform: rotate(-3deg); }
.memory-counter span { font-size: 26px; }
.memory-desk { position: relative; min-height: 600px; border: 5px solid var(--ink); border-radius: 4% 6% 3% 8%; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; transform: rotate(.7deg); }
.memory-desk::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(9deg,transparent 0 35px,rgba(16,16,14,.04) 36px 37px); }
.memory-note { position: absolute; width: 175px; min-height: 140px; padding: 18px; background: var(--butter); border: 4px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); cursor: pointer; text-align: left; transition: transform .25s; z-index: 3; }
.memory-note:hover,.memory-note.found { transform: rotate(0) scale(1.08); background: var(--zog); }
.memory-note b { display:block; font: 1000 35px/1 Impact,sans-serif; }
.memory-note span { font-size: 13px; font-weight: 1000; }
.note-a { left: 8%; top: 10%; transform: rotate(-8deg); }.note-b { right: 9%; top: 8%; transform: rotate(6deg); background:var(--blue) }.note-c { left: 18%; bottom: 10%; transform: rotate(4deg); background:var(--lav) }.note-d { right: 10%; bottom: 11%; transform: rotate(-7deg); background:var(--zog) }
.desk-doodles span { position:absolute; font: 900 90px/1 Impact,sans-serif; opacity:.26; }.phone-doodle{left:42%;top:32%;}.phone-doodle i{font-size:25px;position:absolute;left:27px;top:29px}.cross-doodle{left:6%;bottom:32%;transform:rotate(12deg)}.hat-doodle{right:10%;top:42%;transform:rotate(-12deg)}.headphone-doodle{left:48%;bottom:6%}
.memory-view { position: absolute; inset: 10%; z-index: 10; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px,5vw,70px); border: 5px solid var(--ink); border-radius: 10% 6% 8% 5%; background: var(--zog); box-shadow: 11px 12px 0 var(--ink); transform: scale(.6) rotate(-4deg); opacity: 0; pointer-events: none; transition: .35s cubic-bezier(.2,1.2,.4,1); }
.memory-view.show { transform: scale(1) rotate(-1deg); opacity:1; pointer-events:auto; }
.memory-view button,.item-card button { position:absolute; right:14px; top:9px; width:40px;height:40px;border:3px solid var(--ink);border-radius:50%;background:var(--paper);font-size:25px;cursor:pointer }
.memory-view > p { font: 1000 10px/1 Arial,sans-serif;letter-spacing:2px}.memory-view h3{font:900 clamp(26px,4vw,54px)/.95 Impact,sans-serif;text-transform:uppercase;margin:8px 0 20px}.memory-view div{font-size:clamp(15px,1.5vw,20px);line-height:1.45;font-weight:700;max-width:700px}
.origin-footer { position:relative; z-index:2; max-width:1000px; margin:50px auto 0; padding:24px 110px 24px 28px; border:4px solid var(--ink); background:var(--paper); box-shadow:6px 7px 0 var(--ink); transform:rotate(-1deg);font-size:clamp(16px,2vw,24px);line-height:1.35;font-weight:900 }.big-arrow{position:absolute;right:30px;top:10px;font-size:90px;color:var(--pink);-webkit-text-stroke:3px var(--ink)}

.room { background:var(--paper); padding-inline:0; padding-bottom:0; }
.room-header { padding:0 clamp(24px,5vw,86px) 50px; display:grid;grid-template-columns:1fr .6fr;gap:5vw;align-items:end}.room-header h2{color:var(--zog);-webkit-text-stroke:4px var(--ink);text-shadow:7px 8px 0 var(--ink)}.room-header>p{font-size:clamp(17px,2vw,25px);line-height:1.4;font-weight:800;max-width:560px}
.playroom { position:relative; min-height:720px;overflow:hidden;border-block:5px solid var(--ink);background:#fff}.playroom>img{width:100%;height:100%;min-height:720px;position:absolute;inset:0;object-fit:cover;transition:filter .4s, transform .4s;filter:hue-rotate(calc((var(--freq) - 33) * .85deg)) saturate(calc(.8 + var(--freq)/100));transform:scale(calc(1 + var(--freq)/1500))}
.hotspot { position:absolute;width:56px;height:56px;border:4px solid var(--ink);border-radius:50%;background:var(--pink);box-shadow:4px 5px 0 var(--ink);cursor:pointer;z-index:4;animation:pulse 1.7s ease-in-out infinite; }.hotspot span{font:900 22px/1 Impact,sans-serif}.hot-phone{left:12%;top:29%}.hot-headphones{left:24%;top:49%;background:var(--butter)}.hot-hat{right:12%;bottom:9%;background:var(--zog)}.hot-cross{right:18%;top:9%;background:var(--lav)}
.item-card { position:absolute;left:50%;top:50%;z-index:8;width:min(430px,82vw);min-height:240px;padding:45px 35px 30px;background:var(--paper);border:5px solid var(--ink);border-radius:8% 5% 10% 5%;box-shadow:10px 11px 0 var(--ink);transform:translate(-50%,-50%) rotate(5deg) scale(0);opacity:0;transition:.3s cubic-bezier(.2,1.4,.4,1)}.item-card.show{transform:translate(-50%,-50%) rotate(-2deg) scale(1);opacity:1}.item-card small{font-weight:1000;letter-spacing:2px}.item-card h3{font:900 38px/.95 Impact,sans-serif;text-transform:uppercase;margin:12px 0}.item-card p{line-height:1.45;font-weight:700}
.tuner { min-height:210px;padding:35px clamp(24px,5vw,86px);display:grid;grid-template-columns:1fr .8fr 1.4fr .55fr;align-items:center;gap:30px;background:var(--zog);border-top:5px solid var(--ink)}.tuner h3{font:900 clamp(30px,4vw,54px)/1 Impact,sans-serif;margin:0}.tuner-copy p:last-child{font-weight:700;max-width:380px}.tuner label{font-size:12px;font-weight:1000}.tuner output{font:900 16px/1 Arial,sans-serif}.tuner input{width:100%;accent-color:var(--pink);cursor:grab}.tuner input::-webkit-slider-runnable-track{height:15px;background:var(--paper);border:3px solid var(--ink);border-radius:50%}.tuner input::-webkit-slider-thumb{-webkit-appearance:none;width:37px;height:37px;margin-top:-14px;background:var(--pink);border:4px solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 var(--ink)}

.route { background:var(--lav); min-height:1150px; }.route::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 49.7%,rgba(255,255,255,.22) 50%,transparent 50.3%)}
.route-head{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;align-items:end}.route-head .eyebrow{grid-column:1/-1}.route-head h2{color:var(--paper);-webkit-text-stroke:4px var(--ink);text-shadow:8px 9px 0 var(--ink)}.route-head>p:last-child{font-size:clamp(16px,2vw,24px);line-height:1.4;font-weight:800;max-width:500px}
.map-wrap{height:min(58vw,680px);min-height:580px;position:relative;margin-top:45px;border:5px solid var(--ink);border-radius:7% 3% 8% 5%;background:var(--paper);box-shadow:var(--shadow);overflow:hidden}.map-wrap::before{content:"";position:absolute;inset:0;opacity:.18;background-image:radial-gradient(var(--ink) 1.5px,transparent 1.5px);background-size:31px 31px}.route-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.route-shadow{fill:none;stroke:var(--ink);stroke-width:34;stroke-linecap:round;stroke-dasharray:4 8}.route-line{fill:none;stroke:var(--pink);stroke-width:18;stroke-linecap:round;stroke-dasharray:9 9;animation:dash 20s linear infinite;filter:url(#wobble)}.traveler{offset-path:path("M90,500 C170,90 400,570 520,270 S760,90 840,360 S1090,570 1130,110");offset-distance:0%;filter:drop-shadow(5px 6px 0 #111);transition:offset-distance 1s cubic-bezier(.4,0,.2,1)}
.route-stop{position:absolute;width:120px;min-height:92px;padding:9px;border:4px solid var(--ink);border-radius:46% 54% 44% 56%;background:var(--butter);box-shadow:5px 6px 0 var(--ink);cursor:pointer;z-index:4;transition:.2s}.route-stop:hover,.route-stop.active{background:var(--zog);transform:scale(1.12) rotate(-3deg)}.route-stop b{display:block;font:900 25px/1 Impact,sans-serif}.route-stop span{font:900 10px/1.1 Arial,sans-serif}.stop-0{left:3%;bottom:12%}.stop-1{left:29%;bottom:15%}.stop-2{left:43%;top:29%}.stop-3{right:25%;top:15%}.stop-4{right:2%;top:8%}
.stop-story{position:absolute;right:5%;bottom:6%;z-index:3;width:min(390px,45%);padding:22px 25px;background:var(--blue);border:4px solid var(--ink);box-shadow:6px 7px 0 var(--ink);transform:rotate(1deg)}.stop-story small{font-weight:1000;letter-spacing:2px}.stop-story h3{font:900 36px/.95 Impact,sans-serif;margin:9px 0;text-transform:uppercase}.stop-story p{margin:0;line-height:1.4;font-weight:700}

.signal { min-height:100svh;background:var(--zog);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding-bottom:140px}.signal::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 45%,var(--butter) 0 2%,transparent 2.3%),repeating-radial-gradient(circle at 78% 45%,transparent 0 45px,rgba(16,16,14,.15) 47px 50px)}
.signal-card{position:relative;z-index:3;padding:clamp(28px,5vw,70px);border:5px solid var(--ink);border-radius:5% 8% 4% 7%;background:var(--paper);box-shadow:12px 14px 0 var(--ink);transform:rotate(-1deg)}.signal-card h2{font-size:clamp(82px,11vw,165px)}.signal-card h2 i{color:var(--pink)}.signal-card>p:not(.eyebrow){font-size:clamp(17px,2vw,23px);line-height:1.4;font-weight:800;max-width:700px}.sticker{position:absolute;right:5%;top:6%;width:92px;height:92px;border:4px solid var(--ink);border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--butter);font:900 13px/1.05 Arial,sans-serif;transform:rotate(9deg)}
.contract-box{margin:25px 0}.contract-box>span{display:block;margin-bottom:8px;font-size:10px;font-weight:1000;letter-spacing:1.5px}.contract-box button{width:100%;display:flex;justify-content:space-between;gap:10px;padding:16px;border:3px solid var(--ink);border-radius:15px;background:#fff;font-family:monospace;font-weight:900;cursor:pointer}.contract-box button:hover{background:var(--butter)}
.signal-zog{position:relative;display:grid;place-items:center;z-index:2}.signal-zog img{width:min(75%,600px);border:6px solid var(--ink);border-radius:50%;mix-blend-mode:multiply;animation:floaty 3.6s ease-in-out infinite;position:relative;z-index:3}.signal-rings i{position:absolute;left:50%;top:50%;width:35%;aspect-ratio:1;border:5px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%);animation:ring 2.5s ease-out infinite}.signal-rings i:nth-child(2){animation-delay:.8s}.signal-rings i:nth-child(3){animation-delay:1.6s}
footer{position:absolute;left:0;right:0;bottom:0;min-height:65px;padding:20px clamp(24px,5vw,86px);display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:5px solid var(--ink);background:var(--ink);color:var(--paper);font-size:11px;font-weight:1000;letter-spacing:1px}footer button{color:var(--paper)}
.toast{position:fixed;left:50%;bottom:35px;z-index:500;padding:14px 20px;background:var(--butter);border:4px solid var(--ink);border-radius:50%;box-shadow:5px 6px 0 var(--ink);font-weight:1000;transform:translate(-50%,180%);transition:.3s}.toast.show{transform:translate(-50%,0) rotate(-2deg)}
body.full-zog .noise{opacity:.22;animation:noise-jump .16s steps(2) infinite}body.full-zog .topbar{box-shadow:6px 7px 0 var(--pink),10px 11px 0 var(--ink)}body.full-zog .hotspot{animation-duration:.48s}

@keyframes load{to{width:100%}}@keyframes squish{to{transform:rotate(5deg) scale(1.08,.92)}}@keyframes blink{50%{opacity:.25}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes floaty{50%{transform:translateY(-16px) rotate(1deg)}}@keyframes poke{30%{transform:scale(1.12,.78) rotate(-5deg)}60%{transform:scale(.85,1.15) rotate(4deg)}}@keyframes nudge{to{transform:translateY(7px) rotate(5deg)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes pulse{50%{transform:scale(1.14) rotate(5deg);box-shadow:7px 8px 0 var(--ink)}}@keyframes dash{to{stroke-dashoffset:-200}}@keyframes ring{0%{opacity:.8;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}@keyframes noise-jump{50%{transform:translate(1px,-1px)}}

@media (min-width:900px) and (pointer:fine){.cursor-dot{display:block}body{cursor:none}a,button,input{cursor:none}}
@media (max-width: 900px){
  .topbar{left:10px;right:10px;top:8px;height:58px}.topbar nav{display:none}.brand>span:last-child{display:none}.mini-btn{min-height:35px;padding:8px 11px}.panel{padding:100px 20px 65px}.hero{grid-template-columns:1fr;padding-top:110px}.hero-copy{text-align:center}.hero-actions{justify-content:center}h1{font-size:clamp(86px,27vw,160px)}.zog-stage{min-height:470px}.zog-main{width:min(72%,420px)}.speech{right:3%;top:10%}.scroll-note{display:none}.origin-grid{grid-template-columns:1fr}.section-stamp{top:86px}.story-title{text-align:center}.story-title .intro{margin-inline:auto}.memory-desk{min-height:550px}.memory-note{width:135px;min-height:110px}.origin-footer{padding:22px;margin-top:35px}.big-arrow{display:none}.room-header{grid-template-columns:1fr;padding-inline:20px}.playroom,.playroom>img{min-height:570px}.playroom>img{object-position:center}.tuner{grid-template-columns:1fr;padding-inline:20px}.route{min-height:1000px}.route-head{grid-template-columns:1fr}.map-wrap{height:650px;min-height:650px;overflow:visible}.route-map{transform:rotate(90deg) scale(.68);transform-origin:center}.route-stop{width:104px}.stop-0{left:2%;bottom:5%}.stop-1{left:21%;bottom:34%}.stop-2{left:43%;top:30%}.stop-3{right:20%;top:17%}.stop-4{right:0;top:3%}.stop-story{width:82%;right:9%;bottom:3%;padding:14px 18px}.stop-story h3{font-size:27px}.signal{grid-template-columns:1fr;gap:60px}.signal-card{padding:35px 22px}.signal-zog img{width:70%}footer{flex-wrap:wrap;justify-content:center}.sticker{width:70px;height:70px;font-size:10px}
}
@media (max-width: 520px){.header-actions .x-btn{display:none}.hero-actions .doodle-btn{width:100%}.orbit-one{width:100%}.memory-desk{min-height:515px}.note-a{left:5%}.note-b{right:5%}.note-c{left:7%}.note-d{right:5%}.memory-view{inset:5%;padding:50px 22px 25px}.hotspot{width:47px;height:47px}.hot-headphones{left:18%}.hot-cross{right:11%}.route-head h2,.room-header h2,.story-title h2{font-size:58px}.map-wrap{border-radius:24px}.signal-card h2{font-size:80px}.final-actions .doodle-btn{width:100%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.cursor-dot{display:none}}