:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#05040a;color:#f6f5ff}*{box-sizing:border-box}body{margin:0;background:#05040a}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #8cfaff;outline-offset:6px}.scene{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 44%,#17112e 0%,#080710 42%,#030308 80%)}.atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}.halo{position:absolute;left:50%;top:47%;width:min(52vw,500px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#b52af3;filter:blur(105px);opacity:.14;animation:breathe 7s ease-in-out infinite}.sun{position:absolute;top:43%;left:50%;width:clamp(220px,32vw,390px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(150deg,#fa8fd5 0%,#df40ac 26%,#643dcb 65%,#1b204b 100%);opacity:.65;box-shadow:0 0 100px #ab3ccd45;animation:breathe 7s ease-in-out infinite}.sun:after{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(to bottom,transparent 0 17px,#070710 18px 21px);opacity:.42}.horizon{position:absolute;top:56%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#f35bb4a8,#6deaffaa,transparent);box-shadow:0 0 24px #e55fb6}.grid{position:absolute;inset:56% -70% -65%;transform-origin:top center;transform:perspective(280px) rotateX(60deg);background-image:linear-gradient(#51dce52c 1px,transparent 1px),linear-gradient(90deg,#51dce52c 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(to bottom,#000,transparent 70%);animation:gridmove 8s linear infinite}.scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 3px,#ffffff05 4px);opacity:.35}.content{position:relative;z-index:1;text-align:center;padding:20px;transform:translateY(-5%)}.wordmark{margin:0;font-size:clamp(62px,12vw,150px);line-height:1;font-weight:800;letter-spacing:-.075em;color:#f9f8ff;text-shadow:4px 3px 0 #f347a777,-3px -2px 0 #52e9fa55,0 0 50px #07040d}.wordmark span{color:#d5faff}.wordmark i{color:#ff6cbf;font-style:normal}.divider{display:flex;justify-content:center;margin:25px auto 24px;width:90px;height:2px;background:#8cfaff80;box-shadow:0 0 14px #71eeff}.divider span{width:30px;background:#fb65bc}.contact-button{background:#090711c9;border:1px solid #89eefa;padding:12px 19px 12px 23px;min-width:130px;color:#ddfbff;text-transform:uppercase;letter-spacing:.19em;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;box-shadow:3px 3px 0 #d83c9c;transition:background .2s,transform .2s}.contact-button:hover{background:#16303a;transform:translateY(-2px)}.contact-button span{font-size:15px}dialog{background:#0d0a17;border:1px solid #81eff0;color:#f6f5ff;padding:85px 75px;max-width:calc(100vw - 32px);box-shadow:6px 6px 0 #d83c9c,0 25px 100px #000b}dialog::backdrop{background:#030308cc;backdrop-filter:blur(9px)}dialog>a{font-size:clamp(22px,4vw,42px);letter-spacing:-1px}dialog>a:hover{color:#8cfaff}.close-dialog{position:absolute;right:15px;top:15px;background:none;border:0;padding:7px;display:grid;place-items:center;color:#a6b0be}.close-dialog svg{stroke:currentColor;stroke-width:1.5;fill:none}body.modal-open{overflow:hidden}@keyframes gridmove{to{background-position:0 65px}}@keyframes breathe{50%{opacity:.4}}@media(max-width:600px){.sun{top:44%}.horizon{top:57%}.grid{top:57%}.wordmark{font-size:clamp(58px,14vw,85px)}dialog{padding:75px 30px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Rain-soaked city scene */
.scene{background:#06070e}
.atmosphere{background:linear-gradient(180deg,#03030b66,#05040a77),url('neon-city.png') center center / cover no-repeat}
.halo,.sun,.horizon,.grid{display:none}
.atmosphere:before,.atmosphere:after{content:'';position:absolute;inset:-120% -30%;pointer-events:none;background-image:repeating-linear-gradient(105deg,transparent 0 55px,#b4f5ff70 56px,#b4f5ff00 57px,transparent 60px 110px);background-size:200px 190px;animation:rain 1.1s linear infinite;opacity:.26}
.atmosphere:after{background-size:270px 260px;animation-duration:1.8s;animation-direction:reverse;opacity:.13;filter:blur(1px)}
.scan{opacity:.16}.content{padding:28px 36px;background:radial-gradient(ellipse,#070711b8,transparent 70%)}
.wordmark{text-shadow:3px 3px 0 #ed398b88,-2px -2px 0 #58e9ff66,0 2px 35px #000;animation:neon 6s ease-in-out infinite}
@keyframes rain{to{background-position:-100px 190px}}
@keyframes neon{50%{text-shadow:3px 3px 0 #ed398baa,-2px -2px 0 #58e9ff99,0 0 32px #f345aa77}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.atmosphere{background:linear-gradient(180deg,#08061335,#08061355),url('tokyo-window.png') center center / cover no-repeat}.atmosphere:before{opacity:.12}.atmosphere:after{opacity:.08}.content{background:radial-gradient(ellipse,#080614c9,transparent 72%)}

.atmosphere{background:linear-gradient(180deg,#08061324,#08061344),url('tokyo-desk.png') center center / cover no-repeat}

@media(max-width:900px){.atmosphere{background-position:center, 75% center}}

.atmosphere{background:linear-gradient(180deg,#05071235,#05071255),url('shinjuku-street.png') center center / cover no-repeat}.atmosphere:before{opacity:.22}.atmosphere:after{opacity:.12}@media(max-width:900px){.atmosphere{background-position:center center}}

.atmosphere{background:linear-gradient(180deg,#05071230,#05071250),url('neon-alley.png') center center / cover no-repeat}

.atmosphere{background-image:linear-gradient(180deg,#05071230,#05071250),url('neon-alley-no-flowers.png')}

.atmosphere{background-image:linear-gradient(180deg,#05071230,#05071250),url('neon-alley-multicolor.png')}

.atmosphere{filter:blur(3px) saturate(.9);transform:scale(1.015)}
.atmosphere{filter:blur(1px) saturate(.95)}
.wordmark{font-family:Arial,Helvetica,sans-serif;font-size:clamp(56px,10vw,125px);font-weight:500;letter-spacing:.04em;color:#e5ffff;-webkit-text-stroke:1px #a6faff;text-shadow:0 0 4px #fff,0 0 12px #48eaff,0 0 28px #13bddc,0 0 55px #148abb;animation:sign-glow 5s ease-in-out infinite}.wordmark span{color:inherit}.wordmark i{color:#fff3b8;-webkit-text-stroke:1px #ffdc6c;text-shadow:0 0 8px #ffdf75,0 0 22px #ffa632}@keyframes sign-glow{50%{text-shadow:0 0 3px #fff,0 0 9px #48eaff,0 0 22px #13bddc,0 0 40px #148abb}}@media(max-width:600px){.wordmark{font-size:clamp(48px,12vw,76px)}}@media(prefers-reduced-motion:reduce){.wordmark{animation:none}}
.wordmark{display:inline-block;padding:18px 28px 22px;border:2px solid #86f8ff;background:#071527c9;box-shadow:inset 0 0 8px #51eaff99,0 0 6px #a5fbff,0 0 20px #19d6ff99,0 0 45px #00b8f05c;line-height:1.05;border-radius:3px}.content{padding:28px 24px}.divider{margin-top:30px}@media(max-width:600px){.wordmark{padding:14px 17px 18px;border-width:2px;font-size:clamp(40px,10vw,65px);letter-spacing:.015em}}
.wordmark{text-transform:uppercase;font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;letter-spacing:.1em;font-size:clamp(48px,8vw,100px);color:#230309;-webkit-text-stroke:2px #ffe6e7;text-shadow:0 0 3px #fff,0 0 7px #ff5368,0 0 17px #ff163c,0 0 35px #e9002c;background:#160207e8;border:5px solid #ff9ba4;border-radius:8px;box-shadow:inset 0 0 5px #fff,inset 0 0 18px #ff123a,0 0 4px #fff,0 0 13px #ff264b,0 0 35px #d90030;animation:red-neon 5s ease-in-out infinite}.wordmark span{color:inherit}.wordmark i{color:inherit;-webkit-text-stroke:inherit;text-shadow:inherit}@keyframes red-neon{50%{text-shadow:0 0 2px #fff,0 0 6px #ff5368,0 0 13px #ff163c,0 0 27px #e9002c}}@media(max-width:600px){.wordmark{font-size:clamp(33px,8vw,58px);letter-spacing:.075em;padding:16px 15px 19px;-webkit-text-stroke:1.4px #ffe6e7;border-width:4px}}@media(prefers-reduced-motion:reduce){.wordmark{animation:none}}
.wordmark{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:.10em;color:transparent;-webkit-text-stroke:2px #ffb0b2;text-shadow:0 0 2px #fff,0 0 5px #ff454c,0 0 12px #ff0b2f,0 0 25px #c90024;background:linear-gradient(180deg,#24070be8,#120407ed);border:4px solid #ffb8ba;border-radius:7px;box-shadow:inset 0 0 3px #fff,inset 0 0 10px #ff344b,0 0 3px #fff,0 0 9px #ff193c,0 0 24px #e8002f,0 0 45px #be002566;animation:tube-glow 6s ease-in-out infinite}@keyframes tube-glow{50%{text-shadow:0 0 2px #fff,0 0 4px #ff5960,0 0 10px #ff1235,0 0 20px #c90024}}@media(max-width:600px){.wordmark{-webkit-text-stroke:1.5px #ffb0b2;letter-spacing:.07em}}@media(prefers-reduced-motion:reduce){.wordmark{animation:none}}
.wordmark{font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;letter-spacing:.12em;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.8px #ffe6e4;text-shadow:none;filter:drop-shadow(0 0 2px #ff5151) drop-shadow(0 0 5px #fa101c) drop-shadow(0 0 12px #df0012);animation:tube-flicker 8s ease-in-out infinite;background:#080104e8;border:4px solid #ffc4bb;box-shadow:inset 0 0 5px #ff4a3f,inset 0 0 14px #d90010,0 0 4px #ffdad1,0 0 12px #ff2525,0 0 28px #b80012}@keyframes tube-flicker{0%,94%,100%{filter:drop-shadow(0 0 2px #ff5151) drop-shadow(0 0 5px #fa101c) drop-shadow(0 0 12px #df0012)}96%{filter:drop-shadow(0 0 1px #ff5151) drop-shadow(0 0 3px #fa101c) drop-shadow(0 0 7px #df0012)}}@media(max-width:600px){.wordmark{-webkit-text-stroke:1.5px #ffe6e4}}@media(prefers-reduced-motion:reduce){.wordmark{animation:none}}
.wordmark{width:min(620px,88vw);padding:20px 25px;border:4px solid #ffb7b7;filter:none;animation:frame-glow 6s ease-in-out infinite}.neon-letters{display:block;width:100%;height:auto;overflow:visible}.neon-letters path{fill:none;stroke:#ffe2dd;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #ff313c) drop-shadow(0 0 9px #e00020)}.divider{display:none}.contact-button{display:inline-flex;margin-top:26px;justify-content:center;min-width:160px;padding:12px 24px;background:#100306e8;border:3px solid #ffb7b7;border-radius:6px;color:#ffe3de;font-family:Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:.13em;text-shadow:0 0 3px #fff,0 0 6px #ff313c,0 0 12px #e00020;box-shadow:inset 0 0 5px #ff3e46,0 0 4px #fff,0 0 12px #f01930,0 0 24px #d5002566}.contact-button:hover{background:#350b12;transform:translateY(-2px)}@keyframes frame-glow{50%{box-shadow:inset 0 0 5px #ff4a3f,inset 0 0 14px #d90010,0 0 4px #ffdad1,0 0 8px #ff2525,0 0 19px #b80012}}@media(max-width:600px){.wordmark{padding:14px 16px;width:min(480px,88vw)}.contact-button{font-size:14px}}@media(prefers-reduced-motion:reduce){.wordmark{animation:none}}
.wordmark{width:min(496px,70.4vw);background:linear-gradient(180deg,#24070b99,#120407aa);border-color:#ffa9aa;box-shadow:inset 0 0 5px #ff4a3f99,inset 0 0 12px #d9001099,0 0 4px #ffdad1,0 0 11px #ff2525,0 0 25px #b80012;animation:frame-glow 7s ease-in-out infinite}.neon-letters path{stroke:#ffd6d1;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #ff313c) drop-shadow(0 0 7px #e00020);animation:tube-variation 9s ease-in-out infinite}.contact-button{min-width:128px;margin-top:21px;padding:9px 19px;font-size:13px;background:#10030699;border-color:#ffa9aa;box-shadow:inset 0 0 5px #ff3e4688,0 0 4px #fff,0 0 10px #f01930,0 0 19px #d5002555}@keyframes tube-variation{0%,89%,92%,100%{opacity:1}90%,91%{opacity:.8}96%{opacity:.92}}@media(max-width:600px){.wordmark{width:min(384px,70.4vw);padding:11px 13px}.contact-button{font-size:12px}}@media(prefers-reduced-motion:reduce){.wordmark,.neon-letters path{animation:none}}

.content{display:flex;flex-direction:column;align-items:center}

.content{transform:translateY(28vh)}@media(max-height:600px){.content{transform:translateY(20vh)}}

.content{transform:translateY(-27vh)}@media(max-height:600px){.content{transform:translateY(-18vh)}}
.content{transform:translateY(-21vh)}.scene::after{content:'';position:absolute;z-index:0;pointer-events:none;left:50%;bottom:-3%;width:min(44vw,440px);height:31%;transform:translateX(-50%);background:repeating-linear-gradient(180deg,transparent 0 8px,#ff526025 9px 10px,transparent 12px 18px),radial-gradient(ellipse at 50% 5%,#ff34454d,transparent 65%);filter:blur(6px);opacity:.55;clip-path:polygon(37% 0,63% 0,95% 100%,5% 100%);mask-image:linear-gradient(to bottom,transparent,#000 25%,transparent 100%)}@media(max-height:600px){.content{transform:translateY(-13vh)}}
.content{transform:translate(12vw,-21vh)}.wordmark{width:min(320px,55vw);padding:12px 16px}.contact-button{margin-top:16px}@media(max-width:600px){.content{transform:translate(10vw,-21vh)}.wordmark{width:min(280px,55vw);padding:10px 12px}}@media(max-height:600px){.content{transform:translate(10vw,-13vh)}}
.content{transform:translate(6vw,-21vh)}.wordmark{width:min(350px,58vw)}@media(max-width:600px){.content{transform:translate(6vw,-21vh)}.wordmark{width:min(310px,58vw)}}@media(max-height:600px){.content{transform:translate(6vw,-13vh)}}

.scene::after{display:none}

.content{transform:translate(6vw,-18vh)}@media(max-height:600px){.content{transform:translate(6vw,-10vh)}}

.content{transform:translate(6vw,-13vh)}@media(max-height:600px){.content{transform:translate(6vw,-5vh)}}
/* Match the contact dialog to the red neon signs. */
dialog{background:linear-gradient(180deg,#24070bf2,#100306f5);border:3px solid #ffa9aa;border-radius:7px;box-shadow:inset 0 0 5px #ff4a3f99,inset 0 0 12px #d9001099,0 0 4px #ffdad1,0 0 11px #ff2525,0 0 25px #b80012;padding:70px 65px}
dialog>a{color:#ffe3de;font-size:clamp(20px,3vw,32px);letter-spacing:.02em;text-shadow:0 0 3px #fff,0 0 6px #ff313c,0 0 12px #e00020}
dialog>a:hover{color:#fff1ed}.close-dialog{color:#ffd6d1;filter:drop-shadow(0 0 4px #ff313c)}
@media(max-width:600px){dialog{padding:65px 30px}}
/* Still rain in the artwork, with occasional distant lights. */
.atmosphere:before,.atmosphere:after{display:none}
.content{transform:translate(0,-13vh)}
@media(max-height:600px){.content{transform:translate(0,-5vh)}}
.city-lights{position:absolute;inset:0;pointer-events:none}
.city-lights i{position:absolute;width:3px;height:4px;border-radius:1px;background:#b8faff;box-shadow:0 0 5px 2px #46e9ff;opacity:.1;animation:city-light 7s steps(1,end) infinite}
.city-lights i:nth-child(1){left:34%;top:43%;animation-delay:-1s}
.city-lights i:nth-child(2){left:38%;top:51%;background:#ffe9aa;box-shadow:0 0 5px 2px #ffc84d;animation-duration:11s;animation-delay:-5s}
.city-lights i:nth-child(3){left:63%;top:44%;background:#ffb7ef;box-shadow:0 0 5px 2px #ff4fd5;animation-duration:9s;animation-delay:-3s}
.city-lights i:nth-child(4){left:68%;top:54%;animation-duration:13s;animation-delay:-8s}
.city-lights i:nth-child(5){left:30%;top:57%;background:#c4ffdc;box-shadow:0 0 5px 2px #47ffad;animation-duration:12s;animation-delay:-2s}
.city-lights i:nth-child(6){left:73%;top:38%;background:#ffe9aa;box-shadow:0 0 5px 2px #ffc84d;animation-duration:8s;animation-delay:-6s}
@keyframes city-light{0%,20%,23%,61%,65%,100%{opacity:.08}21%,22%,24%,60%,62%,64%{opacity:.7}}
@media(prefers-reduced-motion:reduce){.city-lights i{animation:none;opacity:.15}}
/* Let the distant lights change only occasionally. */
.city-lights i{animation-duration:210s;animation-delay:-31s}
.city-lights i:nth-child(2){animation-duration:270s;animation-delay:-117s}
.city-lights i:nth-child(3){animation-duration:240s;animation-delay:-68s}
.city-lights i:nth-child(4){animation-duration:330s;animation-delay:-205s}
.city-lights i:nth-child(5){animation-duration:300s;animation-delay:-49s}
.city-lights i:nth-child(6){animation-duration:225s;animation-delay:-161s}
/* Keep the sign centered near the top of the scene. */
.scene{align-items:start}
.content{margin-top:clamp(30px,8vh,80px);transform:none}
@media(max-height:600px){.content{margin-top:20px;transform:none}}

.atmosphere{background-image:linear-gradient(180deg,#05071230,#05071250),url('neon-alley-named-shops.png')}
/* Blend the foreground sign into the atmospheric neon of the alley. */
.wordmark{background:linear-gradient(180deg,#19070bbb,#10060ac4);border-color:#ff9e9d;box-shadow:inset 0 0 6px #ff4a3f99,inset 0 0 15px #d9001088,0 0 5px #ffaaa0,0 0 14px #ff252599,0 0 28px #b8001288;filter:blur(.55px)}
.neon-letters path{stroke:#ffc4b9;stroke-width:4;filter:drop-shadow(0 0 2px #ffb7ae) drop-shadow(0 0 5px #ff313c) drop-shadow(0 0 10px #e00020)}
/* A hidden hotspot sits on the right-hand green neon sign. */
.sign-hit-area{position:absolute;z-index:2;width:max(100vw,177.683vh);height:max(100vh,56.28vw);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.theme-trigger{position:absolute;left:91%;top:5%;width:9%;height:62%;border:0;background:transparent;pointer-events:auto;cursor:pointer}
.return-city{position:absolute;z-index:3;right:20px;bottom:20px;padding:9px 14px;border:1px solid #ffdcac;border-radius:4px;color:#fff2df;background:#27150dbb;font-size:12px;letter-spacing:.08em}
.return-city[hidden]{display:none}
body.beach-theme .atmosphere{background-image:linear-gradient(180deg,#30150b44,#1b0e0833),url('anime-sunset-beach.png');filter:none}
body.beach-theme .city-lights,body.beach-theme .sign-hit-area{display:none}
body.beach-theme .wordmark{background:#2c170ca8;border-color:#ffe0a5;box-shadow:inset 0 0 8px #ffc163aa,0 0 8px #ffd68a,0 0 25px #ff9c3488}
body.beach-theme .neon-letters path{stroke:#fff0ce;filter:drop-shadow(0 0 2px #ffeac2) drop-shadow(0 0 5px #ffb846) drop-shadow(0 0 10px #e87b19)}
body.beach-theme .contact-button{background:#2c170cbb;border-color:#ffe0a5;color:#fff4df;text-shadow:0 0 5px #ffbd5c;box-shadow:inset 0 0 5px #ffb43e88,0 0 8px #ffc671,0 0 19px #ec8c2555}
@media(max-aspect-ratio:3/2){.sign-hit-area{width:100%;height:100%}.theme-trigger{left:auto;right:0;top:5%;width:12%;height:35%}}