:root{--bg-page: #FFF8EC;--bg-panel: #F7EBD8;--bg-object: #FFFFFF;--ink-body: #111827;--ink-soft: #4A5480;--ink-strong: #2C40A7;--accent: #F237A1;--accent-soft: #D62B8C;--line: #2C40A7;--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--radius-ctl: 12px;--radius-card: 16px;--pop-sm: 3px 3px 0 var(--ink-strong);--pop-md: 6px 6px 0 var(--ink-strong);--focus-ring: 3px solid var(--accent);--page: #140d24;--ink: #2a1f3d;--paper: #fbf6e6;--rule: #c6d9ec;--pen: #27324f;--hot: #e8512f;--crayon: #ffe07a;--hand: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Marker Felt", "Comic Sans MS", "Comic Neue", cursive;--mk: "Marker Felt", "Chalkboard SE", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:var(--bg-page);color:var(--ink-body);font:500 15px/1.45 var(--font-display);overscroll-behavior:none}:focus-visible{outline:var(--focus-ring);outline-offset:3px}::selection{background:var(--accent-soft);color:var(--bg-page)}html{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#skip-menu{user-select:text;-webkit-user-select:text}body{display:flex;flex-direction:column;height:100dvh}.stage,.layer,.panel,.camera,.world,.upright,.actor,.vehicle,.light{position:absolute}.stage,.upright,.actor,.vehicle,.light{left:0;top:0;transform-origin:0 0}.layer,.world{width:0;height:0}.layer{left:0;bottom:0}.layer,.world,.actor,.vehicle{will-change:transform}.panel.ground{left:0;top:0;transform-origin:0 0}.panel svg.doodle{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.street{position:relative;flex:1;display:grid;place-items:center;overflow:hidden;min-height:0}.stage-frame{position:relative;overflow:hidden;border:3px solid var(--ink-strong);border-radius:4px;box-shadow:var(--pop-md);box-sizing:content-box}.stage,.camera{overflow:hidden}.stage:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:#07031a;opacity:0;transition:opacity 1.5s ease}.stage:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(180deg,#0b061866 0%,transparent 22%,transparent 84%,#1a123066 100%)}.camera{inset:0}.world{transform-style:preserve-3d}.world.flat{transform-style:flat}.world.flat .upright.prop,.world.flat .upright.face{clip-path:none}.world.flat .face.roof svg.doodle{filter:brightness(.8)}.upright,.face{transition:opacity .25s;backface-visibility:visible}.see-through{opacity:.28}.passed{opacity:0!important;transition:opacity .4s}.upright.prop,.upright.face{clip-path:inset(0)}.face.side svg.doodle{filter:brightness(.72)}.face.roof svg.doodle{filter:brightness(.86)}.boil{animation:boil .36s steps(1,end) infinite}.boil.v1{animation-delay:-.24s}.boil.v2{animation-delay:-.12s}@keyframes boil{0%{opacity:1}33.4%{opacity:0}to{opacity:0}}svg text{font-family:var(--mk);font-weight:700;letter-spacing:.02em;paint-order:stroke fill}svg text.marker{stroke:#2a1f3d;stroke-width:.6px;fill:#2a1f3d}.portal svg text.marker{fill:#2a1f3d;stroke:none}svg text.neon{fill:var(--c);stroke:#fff6;stroke-width:.5px;filter:drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 7px var(--c)) drop-shadow(0 0 16px var(--c));animation:neon 5.3s infinite}@keyframes neon{0%,18%,22%,63%,to{opacity:1}19%{opacity:.55}21%{opacity:.85}64%{opacity:.7}66%{opacity:1}}.light{pointer-events:none;animation:shimmer 2.8s ease-in-out infinite}.light.cone{background:radial-gradient(ellipse 50% 100% at 50% 0%,var(--glow) 0%,color-mix(in srgb,var(--glow) 45%,transparent) 30%,transparent 72%);opacity:.75}.light.cone{clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}.light.cone.up{clip-path:polygon(0 0,100% 0,62% 100%,38% 100%)}.light.cone.up{background:radial-gradient(ellipse 50% 100% at 50% 100%,var(--glow) 0%,color-mix(in srgb,var(--glow) 40%,transparent) 30%,transparent 72%);opacity:.6}.light.pool{background:radial-gradient(ellipse at 50% 50%,var(--glow) 0%,color-mix(in srgb,var(--glow) 40%,transparent) 35%,transparent 70%);opacity:.55}.light.pool.spill{animation:none;opacity:0}.light.ball{background:radial-gradient(circle,var(--glow) 0%,transparent 60%);opacity:.6;border-radius:50%}.light{transition:filter 1.5s ease}.night-deep .light.cone,.night-deep .light.pool{filter:opacity(.18)}.night-deep .light.ball{filter:opacity(.6)}.night-deep:before{opacity:.32}@keyframes shimmer{0%,to{opacity:.72}37%{opacity:.86}52%{opacity:.66}70%{opacity:.82}}.portal svg.snap{position:absolute;inset:0;width:100%;height:100%;display:block}.portal.billboard{box-shadow:0 0 18px #ffeab055}.portal .lamp-wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 30% 90% at 20% 100%,#fff0c055,transparent 70%),radial-gradient(ellipse 30% 90% at 80% 100%,#fff0c055,transparent 70%),linear-gradient(180deg,#1a123044,transparent 40%)}.portal.door{transform-style:preserve-3d}.portal.door>svg.doodle{filter:drop-shadow(0 0 8px #ffb34788)}.portal .leaf,.portal .poster{position:absolute}.portal .leaf{transform-origin:0 50%;backface-visibility:visible}.portal .poster{transform:rotate(-1.5deg);box-shadow:2px 3px #0006}.portal .poster .lamp-wash{background:radial-gradient(ellipse 80% 80% at 90% 50%,#ffd27a33,transparent 70%)}.actor .art,.vehicle .art{position:absolute;inset:0}.actor .art svg,.vehicle .art svg{width:100%;height:100%;overflow:visible;display:block}.actor.flip .art{transform:scaleX(-1)}.actor .art.sheet{background-repeat:no-repeat;image-rendering:auto;animation:sheetbook calc(var(--frames) / var(--fps) * 1s) steps(var(--frames)) infinite}@keyframes sheetbook{0%{background-position-x:0}to{background-position-x:calc(var(--frames) * var(--cell) * -1)}}@media(prefers-reduced-motion:reduce){.actor .art.sheet{animation-play-state:paused}}.actor.aboard{visibility:hidden}.shadow3d{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:50%;background:radial-gradient(ellipse at center,#000a 0%,#0007 40%,transparent 72%);pointer-events:none;will-change:transform}@media(prefers-reduced-motion:reduce){.boil{animation:none}.boil.v1,.boil.v2{opacity:0}.light,svg text.neon{animation:none}}.world svg{pointer-events:none}.rest-hit{pointer-events:auto;cursor:pointer}.actor,.light,.tap-mark,.shadow3d,.layer,.upright.prop,.upright.face.side,.upright.climbable,.upright.door:not(.portal){pointer-events:none}.hotspot{pointer-events:auto}.vehicle,.portal,.hotspot{cursor:pointer}.hotspot{position:absolute}.tap-mark{position:absolute;left:0;top:0;transform-origin:0 0}.tap-mark .ring{position:absolute;inset:0;border:4px solid var(--crayon);border-radius:48% 54% 46% 52%/52% 46% 55% 47%;box-shadow:0 0 0 1.5px var(--pen),inset 0 0 0 1.5px var(--pen);animation:tapmark .8s ease-out forwards}@keyframes tapmark{0%{transform:scale(.35) rotate(0);opacity:1}70%{opacity:.8}to{transform:scale(1.25) rotate(25deg);opacity:0}}@media(prefers-reduced-motion:reduce){.tap-mark .ring{animation-duration:.01s;animation-delay:.6s}}.takeover{position:fixed;z-index:50;display:grid;place-items:center;background:var(--face);color:var(--accent);font:700 clamp(28px,9vw,120px) var(--font-display);letter-spacing:-.01em;text-shadow:4px 4px 0 var(--ink-strong);border:3px solid var(--ink-strong);box-shadow:var(--pop-md)}.takeover.snapshot{background:var(--face) center / cover no-repeat}.takeover span{text-transform:uppercase}.prompt,.toast,.card,#skip-menu,#pad button{background:var(--bg-object);color:var(--ink-strong);border:2px solid var(--line);border-radius:var(--radius-ctl);box-shadow:var(--pop-sm)}.hud{position:absolute;inset:auto 16px 16px;display:grid;justify-items:center;gap:8px;pointer-events:none}.prompt,.toast{padding:5px 14px 5px 6px;font:600 15px/1.3 var(--font-display);display:flex;align-items:center;gap:8px}.prompt:not(:has(.verb)){padding-left:14px}.prompt .verb{font:700 13px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:var(--ink-body);border:2px solid var(--ink-strong);border-radius:8px;padding:4px 8px}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%) rotate(-1.5deg);padding:6px 14px;background:var(--bg-page)}.card{position:fixed;left:16px;top:16px;bottom:auto;width:min(380px,calc(100vw - 32px));max-width:520px;padding:14px 18px;pointer-events:none;border-radius:var(--radius-card);box-shadow:var(--pop-md);color:var(--ink-body)}.card-title{margin:0 0 4px;font:700 20px/1.15 var(--font-display);letter-spacing:-.01em;color:var(--ink-strong)}.card-text{margin:0;color:var(--ink-soft)}.card-link,#skip-menu a{color:var(--ink-strong);font-weight:700;text-decoration:underline 3px var(--accent);text-underline-offset:4px;pointer-events:auto}.card-link{display:inline-block;margin-top:8px}.card-link:hover,#skip-menu a:hover{color:var(--accent-soft)}#skip-menu{position:fixed;top:12px;right:12px;z-index:10;max-width:min(360px,calc(100vw - 24px));padding:6px 14px;font-size:14px;color:var(--ink-body)}#skip-menu summary{cursor:pointer;font:700 12px/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-strong)}#skip-menu summary::marker{color:var(--accent)}#skip-menu ul{margin:6px 0 0;padding-left:18px}#controls{flex:none;display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;min-height:46px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--bg-page);border-top:3px solid var(--line);color:var(--ink-strong);font:500 13px/1.2 var(--font-display)}#controls .ctl{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;flex:1 1 auto;min-width:0}#controls .mute{margin-left:auto;flex:none;pointer-events:auto;cursor:pointer;font:700 12px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-strong);background:var(--bg-object);border:2px solid var(--line);border-radius:999px;box-shadow:2px 2px 0 var(--ink-strong);padding:5px 10px;white-space:nowrap}#controls .mute:active{box-shadow:1px 1px 0 var(--ink-strong);transform:translate(1px,1px)}#controls .note{order:3;flex:1 1 100%;margin:2px 0 0;font:500 11px/1.2 var(--font-mono);letter-spacing:.02em;color:var(--ink-soft)}#controls .mute{order:2}#controls .ctl{order:1}#controls .mute[aria-pressed=false]{background:var(--accent);color:var(--ink-body)}#controls .mode{font:700 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;display:flex;gap:8px;align-items:center}#controls .buzz{color:var(--ink-body);background:var(--accent);border:2px solid var(--ink-strong);border-radius:999px;padding:2px 8px;transform:rotate(-3deg)}#controls .legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none}#controls li{display:flex;align-items:center;gap:4px;white-space:nowrap}#controls .or{color:var(--ink-soft)}#controls .does{margin-left:3px;color:var(--ink-body)}#controls kbd{font:700 12px/1 var(--font-mono);color:var(--ink-strong);background:var(--bg-object);border:2px solid var(--line);border-radius:6px;box-shadow:2px 2px 0 var(--ink-strong);padding:3px 6px}#controls[data-mode=coffee] .does{font-style:italic}:root{--float: rgb(255 248 236 / .82);--gut: 8px;--wing: 160px}#pad{display:none}.stage-frame{border:0;border-radius:0;box-shadow:none}#controls{position:fixed;z-index:20;left:var(--gut);right:var(--gut);bottom:calc(var(--gut) + env(safe-area-inset-bottom));min-height:0;padding:6px 10px;gap:4px 12px;background:var(--float);border:2px solid var(--line);border-radius:var(--radius-ctl);box-shadow:var(--pop-sm);font-size:12px;pointer-events:none}#controls .legend,#controls .ctl{gap:4px 12px}#controls kbd{padding:2px 5px;font-size:11px}.hud{z-index:22;bottom:calc(var(--controls-h, 46px) + var(--gut) * 3)}.prompt,.card{background:var(--float)}.card{position:fixed;top:56px;left:var(--gut);right:auto;width:min(380px,calc(100vw - var(--gut) * 2));padding:10px 14px}.card-title{font-size:17px}.card-text{font-size:13px}html[data-input=touch] body{display:grid;grid-template:"street" minmax(0,1fr) "controls" auto "pad" auto / minmax(0,1fr);touch-action:manipulation}html[data-input=touch] #street{grid-area:street;min-width:0;min-height:0;background:#07031a}html[data-input=touch] #controls{grid-area:controls;min-width:0;position:static;z-index:auto;min-height:0;padding:4px var(--gut) 4px 12px;gap:8px;flex-wrap:nowrap;align-items:center;background:var(--bg-panel);border:0;border-top:2px solid var(--line);border-bottom:2px solid var(--line);border-radius:0;box-shadow:none;font-size:11px;pointer-events:none}html[data-input=touch] #controls .ctl{flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;pointer-events:auto}html[data-input=touch] #controls .ctl::-webkit-scrollbar{display:none}html[data-input=touch] #controls .legend{flex-wrap:nowrap;gap:10px}html[data-input=touch] #controls .mode{flex:none}html[data-input=touch] #controls .note{display:none}html[data-input=touch] #controls .mute{order:2;flex:none;padding:4px 9px;font-size:11px}html[data-input=touch] #controls kbd{padding:1px 4px;font-size:10px;box-shadow:1px 1px 0 var(--ink-strong)}html[data-input=touch] #pad{grid-area:pad;display:flex;justify-content:space-between;align-items:center;padding:10px max(20px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));touch-action:none;background:var(--bg-page)}html[data-input=touch] .dpad{display:grid;grid-template:". up ." 48px "left . right" 48px ". down ." 48px / 48px 48px 48px;gap:2px;touch-action:none}.dpad [data-dir=up]{grid-area:up}.dpad [data-dir=left]{grid-area:left}.dpad [data-dir=right]{grid-area:right}.dpad [data-dir=down]{grid-area:down}#pad button{font:700 18px var(--font-mono);touch-action:none;color:var(--ink-strong)}#pad button:active{box-shadow:1px 1px 0 var(--ink-strong);transform:translate(2px,2px)}html[data-input=touch] #pad .acts{display:flex;gap:14px;align-items:center;touch-action:none}#pad .act{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--ink-body)}#pad .act.jump{width:54px;height:54px;margin-top:28px;background:var(--bg-object);color:var(--ink-strong)}html[data-input=touch] .hud{inset:44px var(--gut) var(--gut);align-content:end}html[data-input=touch] .prompt{font-size:14px}html[data-input=touch] .card{position:absolute;top:0;left:0;width:min(380px,100%)}@media(orientation:landscape){html[data-input=touch] body{grid-template:"dpad street acts" minmax(0,1fr) "dpad controls acts" auto / calc(var(--wing) + env(safe-area-inset-left,0px)) minmax(0,1fr) calc(var(--wing) + env(safe-area-inset-right,0px))}html[data-input=touch] #pad{display:contents}html[data-input=touch] .dpad{grid-area:dpad;align-self:center;justify-self:center;margin-left:env(safe-area-inset-left)}html[data-input=touch] #pad .acts{grid-area:acts;align-self:center;justify-self:center;flex-direction:column-reverse;gap:10px;margin-right:env(safe-area-inset-right)}html[data-input=touch] #pad .act{margin:0 0 0 28px}html[data-input=touch] #pad .act.jump{margin:0 28px 0 0}html[data-input=touch] #controls{border-bottom:0;padding-bottom:calc(4px + env(safe-area-inset-bottom))}}.street>.caption{position:absolute;z-index:6;transform:translate(-50%);white-space:nowrap;font:700 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-strong);background:var(--float, var(--bg-object));border:2px solid var(--line);border-radius:999px;padding:4px 9px;box-shadow:var(--pop-sm);pointer-events:none}.jet{pointer-events:none;transform-origin:50% 100%}.jet svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.jet.rise svg{animation:jet-rise .5s cubic-bezier(.2,.8,.3,1) forwards;transform-origin:50% 100%}.jet.fade svg{animation:jet-fade 1.6s ease-in forwards;transform-origin:50% 100%}.jet .drop{animation:jet-drop .9s linear infinite}@keyframes jet-rise{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes jet-fade{0%{transform:scaleY(1);opacity:1}70%{opacity:.8}to{transform:scaleY(.1);opacity:0}}@keyframes jet-drop{0%{transform:translateY(-40px);opacity:1}to{transform:translateY(380px);opacity:0}}.curtain{position:fixed;inset:0;z-index:40;overflow:hidden;pointer-events:none}.curtain .water{position:absolute;left:0;right:0;top:0;height:100%;transform:translateY(-110%);background:repeating-linear-gradient(90deg,#ffffff22 0 3px,transparent 3px 41px),linear-gradient(180deg,#7cc8ff,#9fdcff 55%,#b9e8ff);box-shadow:inset 0 -30px 60px #2c40a733}.curtain .water .edge{position:absolute;left:0;right:0;top:100%;width:100%;height:22vh;display:block}.curtain .water .edge .drip{fill:#b9e8ff;stroke:#2c40a7;stroke-width:2;animation:drip-wobble 1.1s ease-in-out infinite;transform-origin:50% 0}@keyframes drip-wobble{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.18)}}.curtain .squeegee{position:absolute;left:0;right:0;top:0;height:26vh;transform:translateY(-30vh);opacity:0}.curtain.wiping .squeegee{opacity:1}.curtain .squeegee svg{width:100%;height:100%;display:block}.curtain .squeegee .arm{fill:var(--arm, #e8714b);stroke:var(--arm-ink, #3a1f16);stroke-width:5;stroke-linejoin:round}.curtain .squeegee .sucker{fill:var(--sucker, #ffc9a6);stroke:var(--arm-ink, #3a1f16);stroke-width:2}.curtain .squeegee .blade{fill:#3a3a4a;stroke:#111827;stroke-width:3}.curtain .squeegee .rubber{fill:#111827}.hydrant-hit{pointer-events:auto;cursor:pointer}
