/* Full Stack Solutions: the landing page, "the town lights up" (made by tools/public/make_landing.py; edit that, then
   run it). One full-screen scene: never scrolls, fills any screen (the town crops at the sides on narrow ones). No
   scripts, no images, nothing loaded from outside. Text: white on the night sky (220+ apart). */
:root { color-scheme: dark; --T: 24s; --ink: #f4f6fb; --ink-2: #c3c9da; --ink-3: #9098ad; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { position: relative; height: 100vh; height: 100dvh; margin: 0; overflow: hidden; background: #04050a; color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.4; }

/* the scene fills the screen behind everything */
.town { position: absolute; inset: 0; width: 100%; height: 100%; }
.town text { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 800; }
.star { animation: twinkle 4s ease-in-out infinite; }
.star.t2 { animation-duration: 5.5s; animation-delay: -1.3s; }
.star.t3 { animation-duration: 3.2s; animation-delay: -2.1s; }
.star.t4 { animation-duration: 6.4s; animation-delay: -0.7s; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.95; } }
.horizon { animation: breathe 9s ease-in-out infinite alternate; transform-origin: center bottom; transform-box: fill-box; }
@keyframes breathe { from { opacity: 0.7; } to { opacity: 1; } }
.signbg { fill: #0b0e1c; stroke: #232b4d; stroke-width: 1.5; }
.signtx { font-size: 17px; letter-spacing: 0.12em; opacity: 0.18; }
.signglow, .winglow, .spill, .signlit, .awnlit { opacity: 0; }
.win, .up { fill: #0b0e1c; stroke: #232b4d; stroke-width: 1.5; }
.door { fill: #080a14; stroke: #232b4d; stroke-width: 1.5; }
.lan-rise { opacity: 0; }
.lan-sway { transform-box: fill-box; transform-origin: 50% 0; animation: sway 5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.chip { opacity: 0; transform-box: fill-box; transform-origin: center; }
.chip text { font-size: 17px; fill: #0b0d16; }

/* the words on top */
.lp-top { position: absolute; top: 0; right: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.9rem, 2.6vh, 2rem) clamp(1rem, 3.5vw, 3rem); }
.lp-brand { display: flex; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; }
.lp-logo { width: clamp(2.6rem, 4vw, 3.4rem); height: auto; }
.lp-name { font-size: clamp(0.85rem, 1.2vw, 1.05rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-signin { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.8rem; padding: 0 1.3rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: rgba(6, 8, 14, 0.35); color: var(--ink); font-size: 1rem; font-weight: 700; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.15s ease, color 0.15s ease; }
.lp-signin:hover { background: #f4f6fb; color: #0b0d16; }
.lp-signin:focus-visible, .lp-brand:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
.lp-hero { position: absolute; top: clamp(5.5rem, 16vh, 11rem); right: 0; left: 0; z-index: 2; display: grid; justify-items: center; gap: clamp(0.4rem, 1.4vh, 0.9rem); padding: 0 1rem; text-align: center; pointer-events: none; }
.lp-badge { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.35rem 0.95rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(6, 8, 14, 0.35); font-size: clamp(0.72rem, 1vw, 0.9rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.lp-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #2ee6c8; box-shadow: 0 0 0 0 rgba(46, 230, 200, 0.7); animation: pulse 2s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 0.7rem rgba(46, 230, 200, 0); } }
.lp-h1 { margin: 0; font-size: clamp(2.6rem, min(8.5vw, 11vh), 8rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; text-shadow: 0 4px 30px rgba(4, 5, 10, 0.8); }
.lp-h1 span { background: linear-gradient(100deg, #c8b8ff, #8fb0ff 55%, #7ff0dc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { max-width: 40rem; margin: 0; font-size: clamp(0.95rem, min(1.6vw, 2.3vh), 1.3rem); font-weight: 500; color: var(--ink-2); text-shadow: 0 2px 12px rgba(4, 5, 10, 0.9); }
.lp-foot { position: absolute; right: 0; bottom: clamp(0.5rem, 1.6vh, 1rem); left: 0; z-index: 2; font-size: clamp(0.7rem, 1vw, 0.85rem); color: var(--ink-3); text-align: center; }
@media (max-height: 640px) { .lp-lead { display: none; } }
@media (max-width: 640px) { .lp-name { display: none; } }

@keyframes lit4 { 0%, 6% { opacity: 0; } 7.2%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes chip4 { 0%, 6.8% { opacity: 0; transform: translateY(12px); } 7.8% { opacity: 1; transform: none; } 12.5% { opacity: 1; transform: translateY(-40px); } 14%, 100% { opacity: 0; transform: translateY(-70px); } }
.s4 .win, .s4 .up { animation: win4 var(--T) ease-in-out infinite; }
@keyframes win4 { 0%, 6% { fill: #0b0e1c; } 7.2%, 90% { fill: #ffe3a0; } 96%, 100% { fill: #0b0e1c; } }
.s4 .winglow, .s4 .spill, .s4 .signglow, .s4 .signlit, .s4 .awnlit { animation: lit4 var(--T) ease-in-out infinite; }
.s4 .signtx { animation: sign4 var(--T) ease-in-out infinite; }
@keyframes sign4 { 0%, 6% { fill: #2ee6c8; opacity: 0.2; } 6.4% { fill: #05060a; opacity: 1; } 6.7% { fill: #2ee6c8; opacity: 0.6; } 7.1%, 90% { fill: #05060a; opacity: 1; } 96%, 100% { fill: #2ee6c8; opacity: 0.2; } }
.chip.h4 { animation: chip4 var(--T) ease-out infinite; }
@keyframes lit1 { 0%, 14.5% { opacity: 0; } 15.7%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes chip1 { 0%, 15.3% { opacity: 0; transform: translateY(12px); } 16.3% { opacity: 1; transform: none; } 21% { opacity: 1; transform: translateY(-40px); } 22.5%, 100% { opacity: 0; transform: translateY(-70px); } }
.s1 .win, .s1 .up { animation: win1 var(--T) ease-in-out infinite; }
@keyframes win1 { 0%, 14.5% { fill: #0b0e1c; } 15.7%, 90% { fill: #ffe3a0; } 96%, 100% { fill: #0b0e1c; } }
.s1 .winglow, .s1 .spill, .s1 .signglow, .s1 .signlit, .s1 .awnlit { animation: lit1 var(--T) ease-in-out infinite; }
.s1 .signtx { animation: sign1 var(--T) ease-in-out infinite; }
@keyframes sign1 { 0%, 14.5% { fill: #8fb0ff; opacity: 0.2; } 14.9% { fill: #05060a; opacity: 1; } 15.2% { fill: #8fb0ff; opacity: 0.6; } 15.6%, 90% { fill: #05060a; opacity: 1; } 96%, 100% { fill: #8fb0ff; opacity: 0.2; } }
.chip.h1 { animation: chip1 var(--T) ease-out infinite; }
@keyframes lit7 { 0%, 23% { opacity: 0; } 24.2%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes chip7 { 0%, 23.8% { opacity: 0; transform: translateY(12px); } 24.8% { opacity: 1; transform: none; } 29.5% { opacity: 1; transform: translateY(-40px); } 31%, 100% { opacity: 0; transform: translateY(-70px); } }
.s7 .win, .s7 .up { animation: win7 var(--T) ease-in-out infinite; }
@keyframes win7 { 0%, 23% { fill: #0b0e1c; } 24.2%, 90% { fill: #ffe3a0; } 96%, 100% { fill: #0b0e1c; } }
.s7 .winglow, .s7 .spill, .s7 .signglow, .s7 .signlit, .s7 .awnlit { animation: lit7 var(--T) ease-in-out infinite; }
.s7 .signtx { animation: sign7 var(--T) ease-in-out infinite; }
@keyframes sign7 { 0%, 23% { fill: #c3a6ff; opacity: 0.2; } 23.4% { fill: #05060a; opacity: 1; } 23.7% { fill: #c3a6ff; opacity: 0.6; } 24.1%, 90% { fill: #05060a; opacity: 1; } 96%, 100% { fill: #c3a6ff; opacity: 0.2; } }
.chip.h7 { animation: chip7 var(--T) ease-out infinite; }
@keyframes lit2 { 0%, 31.5% { opacity: 0; } 32.7%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes chip2 { 0%, 32.3% { opacity: 0; transform: translateY(12px); } 33.3% { opacity: 1; transform: none; } 38% { opacity: 1; transform: translateY(-40px); } 39.5%, 100% { opacity: 0; transform: translateY(-70px); } }
.s2 .win, .s2 .up { animation: win2 var(--T) ease-in-out infinite; }
@keyframes win2 { 0%, 31.5% { fill: #0b0e1c; } 32.7%, 90% { fill: #ffe3a0; } 96%, 100% { fill: #0b0e1c; } }
.s2 .winglow, .s2 .spill, .s2 .signglow, .s2 .signlit, .s2 .awnlit { animation: lit2 var(--T) ease-in-out infinite; }
.s2 .signtx { animation: sign2 var(--T) ease-in-out infinite; }
@keyframes sign2 { 0%, 31.5% { fill: #ffd23f; opacity: 0.2; } 31.9% { fill: #05060a; opacity: 1; } 32.2% { fill: #ffd23f; opacity: 0.6; } 32.6%, 90% { fill: #05060a; opacity: 1; } 96%, 100% { fill: #ffd23f; opacity: 0.2; } }
.chip.h2 { animation: chip2 var(--T) ease-out infinite; }
@keyframes lit6 { 0%, 40% { opacity: 0; } 41.2%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes chip6 { 0%, 40.8% { opacity: 0; transform: translateY(12px); } 41.8% { opacity: 1; transform: none; } 46.5% { opacity: 1; transform: translateY(-40px); } 48%, 100% { opacity: 0; transform: translateY(-70px); } }
.s6 .win, .s6 .up { animation: win6 var(--T) ease-in-out infinite; }
@keyframes win6 { 0%, 40% { fill: #0b0e1c; } 41.2%, 90% { fill: #ffe3a0; } 96%, 100% { fill: #0b0e1c; } }
.s6 .winglow, .s6 .spill, .s6 .signglow, .s6 .signlit, .s6 .awnlit { animation: lit6 var(--T) ease-in-out infinite; }
.s6 .signtx { animation: sign6 var(--T) ease-in-out infinite; }
@keyframes sign6 { 0%, 40% { fill: #8fb0ff; opacity: 0.2; } 40.4% { fill: #05060a; opacity: 1; } 40.7% { fill: #8fb0ff; opacity: 0.6; } 41.1%, 90% { fill: #05060a; opacity: 1; } 96%, 100% { fill: #8fb0ff; opacity: 0.2; } }
.chip.h6 { animation: chip6 var(--T) ease-out infinite; }
@keyframes lit0 { 0%, 48.5% { opacity: 0; } 49.7%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes chip0 { 0%, 49.3% { opacity: 0; transform: translateY(12px); } 50.3% { opacity: 1; transform: none; } 55% { opacity: 1; transform: translateY(-40px); } 56.5%, 100% { opacity: 0; transform: translateY(-70px); } }
.s0 .win, .s0 .up { animation: win0 var(--T) ease-in-out infinite; }
@keyframes win0 { 0%, 48.5% { fill: #0b0e1c; } 49.7%, 90% { fill: #ffe3a0; } 96%, 100% { fill: #0b0e1c; } }
.s0 .winglow, .s0 .spill, .s0 .signglow, .s0 .signlit, .s0 .awnlit { animation: lit0 var(--T) ease-in-out infinite; }
.s0 .signtx { animation: sign0 var(--T) ease-in-out infinite; }
@keyframes sign0 { 0%, 48.5% { fill: #2ee6c8; opacity: 0.2; } 48.9% { fill: #05060a; opacity: 1; } 49.2% { fill: #2ee6c8; opacity: 0.6; } 49.6%, 90% { fill: #05060a; opacity: 1; } 96%, 100% { fill: #2ee6c8; opacity: 0.2; } }
.chip.h0 { animation: chip0 var(--T) ease-out infinite; }
@keyframes lit5 { 0%, 57% { opacity: 0; } 58.2%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes chip5 { 0%, 57.8% { opacity: 0; transform: translateY(12px); } 58.8% { opacity: 1; transform: none; } 63.5% { opacity: 1; transform: translateY(-40px); } 65%, 100% { opacity: 0; transform: translateY(-70px); } }
.s5 .win, .s5 .up { animation: win5 var(--T) ease-in-out infinite; }
@keyframes win5 { 0%, 57% { fill: #0b0e1c; } 58.2%, 90% { fill: #ffe3a0; } 96%, 100% { fill: #0b0e1c; } }
.s5 .winglow, .s5 .spill, .s5 .signglow, .s5 .signlit, .s5 .awnlit { animation: lit5 var(--T) ease-in-out infinite; }
.s5 .signtx { animation: sign5 var(--T) ease-in-out infinite; }
@keyframes sign5 { 0%, 57% { fill: #ffd23f; opacity: 0.2; } 57.4% { fill: #05060a; opacity: 1; } 57.7% { fill: #ffd23f; opacity: 0.6; } 58.1%, 90% { fill: #05060a; opacity: 1; } 96%, 100% { fill: #ffd23f; opacity: 0.2; } }
.chip.h5 { animation: chip5 var(--T) ease-out infinite; }
@keyframes lit8 { 0%, 65.5% { opacity: 0; } 66.7%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes chip8 { 0%, 66.3% { opacity: 0; transform: translateY(12px); } 67.3% { opacity: 1; transform: none; } 72% { opacity: 1; transform: translateY(-40px); } 73.5%, 100% { opacity: 0; transform: translateY(-70px); } }
.s8 .win, .s8 .up { animation: win8 var(--T) ease-in-out infinite; }
@keyframes win8 { 0%, 65.5% { fill: #0b0e1c; } 66.7%, 90% { fill: #ffe3a0; } 96%, 100% { fill: #0b0e1c; } }
.s8 .winglow, .s8 .spill, .s8 .signglow, .s8 .signlit, .s8 .awnlit { animation: lit8 var(--T) ease-in-out infinite; }
.s8 .signtx { animation: sign8 var(--T) ease-in-out infinite; }
@keyframes sign8 { 0%, 65.5% { fill: #2ee6c8; opacity: 0.2; } 65.9% { fill: #05060a; opacity: 1; } 66.2% { fill: #2ee6c8; opacity: 0.6; } 66.6%, 90% { fill: #05060a; opacity: 1; } 96%, 100% { fill: #2ee6c8; opacity: 0.2; } }
.chip.h8 { animation: chip8 var(--T) ease-out infinite; }
@keyframes lit3 { 0%, 74% { opacity: 0; } 75.2%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes chip3 { 0%, 74.8% { opacity: 0; transform: translateY(12px); } 75.8% { opacity: 1; transform: none; } 80.5% { opacity: 1; transform: translateY(-40px); } 82%, 100% { opacity: 0; transform: translateY(-70px); } }
.s3 .win, .s3 .up { animation: win3 var(--T) ease-in-out infinite; }
@keyframes win3 { 0%, 74% { fill: #0b0e1c; } 75.2%, 90% { fill: #ffe3a0; } 96%, 100% { fill: #0b0e1c; } }
.s3 .winglow, .s3 .spill, .s3 .signglow, .s3 .signlit, .s3 .awnlit { animation: lit3 var(--T) ease-in-out infinite; }
.s3 .signtx { animation: sign3 var(--T) ease-in-out infinite; }
@keyframes sign3 { 0%, 74% { fill: #c3a6ff; opacity: 0.2; } 74.4% { fill: #05060a; opacity: 1; } 74.7% { fill: #c3a6ff; opacity: 0.6; } 75.1%, 90% { fill: #05060a; opacity: 1; } 96%, 100% { fill: #c3a6ff; opacity: 0.2; } }
.chip.h3 { animation: chip3 var(--T) ease-out infinite; }
@keyframes lan0-0 { 0%, 50.58% { opacity: 0; transform: translate(0, 0); } 53.08% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(68.7px, -156.7px); } 96%, 100% { opacity: 0; transform: translate(79.1px, -180.5px); } }
.lan.n0-0 .lan-rise { animation: lan0-0 var(--T) linear infinite; }
.lan.n0-0 .lan-sway { animation-duration: 5.4s; }
@keyframes lan0-1 { 0%, 55.55% { opacity: 0; transform: translate(0, 0); } 58.05% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(34.6px, -154.0px); } 96%, 100% { opacity: 0; transform: translate(40.6px, -180.8px); } }
.lan.n0-1 .lan-rise { animation: lan0-1 var(--T) linear infinite; }
.lan.n0-1 .lan-sway { animation-duration: 4.4s; }
@keyframes lan0-2 { 0%, 58.69% { opacity: 0; transform: translate(0, 0); } 61.19% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(34.7px, -130.9px); } 96%, 100% { opacity: 0; transform: translate(41.4px, -156.0px); } }
.lan.n0-2 .lan-rise { animation: lan0-2 var(--T) linear infinite; }
.lan.n0-2 .lan-sway { animation-duration: 5.6s; }
@keyframes lan1-0 { 0%, 16.58% { opacity: 0; transform: translate(0, 0); } 19.08% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(105.4px, -382.6px); } 96%, 100% { opacity: 0; transform: translate(114.0px, -413.9px); } }
.lan.n1-0 .lan-rise { animation: lan1-0 var(--T) linear infinite; }
.lan.n1-0 .lan-sway { animation-duration: 4.3s; }
@keyframes lan1-1 { 0%, 23.19% { opacity: 0; transform: translate(0, 0); } 25.69% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(73.6px, -287.1px); } 96%, 100% { opacity: 0; transform: translate(80.2px, -312.9px); } }
.lan.n1-1 .lan-rise { animation: lan1-1 var(--T) linear infinite; }
.lan.n1-1 .lan-sway { animation-duration: 6.1s; }
@keyframes lan1-2 { 0%, 25.29% { opacity: 0; transform: translate(0, 0); } 27.79% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(91.1px, -299.3px); } 96%, 100% { opacity: 0; transform: translate(99.5px, -327.1px); } }
.lan.n1-2 .lan-rise { animation: lan1-2 var(--T) linear infinite; }
.lan.n1-2 .lan-sway { animation-duration: 4.3s; }
@keyframes lan2-0 { 0%, 33.58% { opacity: 0; transform: translate(0, 0); } 36.08% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(100.2px, -251.6px); } 96%, 100% { opacity: 0; transform: translate(110.9px, -278.4px); } }
.lan.n2-0 .lan-rise { animation: lan2-0 var(--T) linear infinite; }
.lan.n2-0 .lan-sway { animation-duration: 4.9s; }
@keyframes lan2-1 { 0%, 39.29% { opacity: 0; transform: translate(0, 0); } 41.79% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(97.0px, -245.1px); } 96%, 100% { opacity: 0; transform: translate(108.5px, -274.1px); } }
.lan.n2-1 .lan-rise { animation: lan2-1 var(--T) linear infinite; }
.lan.n2-1 .lan-sway { animation-duration: 4.8s; }
@keyframes lan2-2 { 0%, 44.91% { opacity: 0; transform: translate(0, 0); } 47.41% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(82.8px, -192.5px); } 96%, 100% { opacity: 0; transform: translate(93.8px, -218.1px); } }
.lan.n2-2 .lan-rise { animation: lan2-2 var(--T) linear infinite; }
.lan.n2-2 .lan-sway { animation-duration: 6.5s; }
@keyframes lan3-0 { 0%, 76.08% { opacity: 0; transform: translate(0, 0); } 78.58% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(26.0px, -56.8px); } 96%, 100% { opacity: 0; transform: translate(37.2px, -81.3px); } }
.lan.n3-0 .lan-rise { animation: lan3-0 var(--T) linear infinite; }
.lan.n3-0 .lan-sway { animation-duration: 5.3s; }
@keyframes lan3-1 { 0%, 79.96% { opacity: 0; transform: translate(0, 0); } 82.46% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(16.5px, -50.9px); } 96%, 100% { opacity: 0; transform: translate(26.4px, -81.4px); } }
.lan.n3-1 .lan-rise { animation: lan3-1 var(--T) linear infinite; }
.lan.n3-1 .lan-sway { animation-duration: 4.9s; }
@keyframes lan3-2 { 0%, 88.22% { opacity: 0; transform: translate(0, 0); } 90.72% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(2.7px, -9.0px); } 96%, 100% { opacity: 0; transform: translate(11.7px, -39.1px); } }
.lan.n3-2 .lan-rise { animation: lan3-2 var(--T) linear infinite; }
.lan.n3-2 .lan-sway { animation-duration: 6.4s; }
@keyframes lan4-0 { 0%, 8.08% { opacity: 0; transform: translate(0, 0); } 10.58% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(84.6px, -396.1px); } 96%, 100% { opacity: 0; transform: translate(90.8px, -425.1px); } }
.lan.n4-0 .lan-rise { animation: lan4-0 var(--T) linear infinite; }
.lan.n4-0 .lan-sway { animation-duration: 5.7s; }
@keyframes lan4-1 { 0%, 15.14% { opacity: 0; transform: translate(0, 0); } 17.64% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(106.6px, -358.7px); } 96%, 100% { opacity: 0; transform: translate(115.1px, -387.4px); } }
.lan.n4-1 .lan-rise { animation: lan4-1 var(--T) linear infinite; }
.lan.n4-1 .lan-sway { animation-duration: 4.3s; }
@keyframes lan4-2 { 0%, 18.66% { opacity: 0; transform: translate(0, 0); } 21.16% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(73.5px, -351.4px); } 96%, 100% { opacity: 0; transform: translate(79.7px, -381.0px); } }
.lan.n4-2 .lan-rise { animation: lan4-2 var(--T) linear infinite; }
.lan.n4-2 .lan-sway { animation-duration: 4.5s; }
@keyframes lan5-0 { 0%, 59.08% { opacity: 0; transform: translate(0, 0); } 61.58% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(62.0px, -123.3px); } 96%, 100% { opacity: 0; transform: translate(74.0px, -147.2px); } }
.lan.n5-0 .lan-rise { animation: lan5-0 var(--T) linear infinite; }
.lan.n5-0 .lan-sway { animation-duration: 5.2s; }
@keyframes lan5-1 { 0%, 64.66% { opacity: 0; transform: translate(0, 0); } 67.16% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(50.6px, -107.9px); } 96%, 100% { opacity: 0; transform: translate(62.6px, -133.4px); } }
.lan.n5-1 .lan-rise { animation: lan5-1 var(--T) linear infinite; }
.lan.n5-1 .lan-sway { animation-duration: 5.2s; }
@keyframes lan5-2 { 0%, 68.98% { opacity: 0; transform: translate(0, 0); } 71.48% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(24.0px, -86.6px); } 96%, 100% { opacity: 0; transform: translate(30.8px, -111.3px); } }
.lan.n5-2 .lan-rise { animation: lan5-2 var(--T) linear infinite; }
.lan.n5-2 .lan-sway { animation-duration: 4.7s; }
@keyframes lan6-0 { 0%, 42.08% { opacity: 0; transform: translate(0, 0); } 44.58% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(79.9px, -203.0px); } 96%, 100% { opacity: 0; transform: translate(89.9px, -228.4px); } }
.lan.n6-0 .lan-rise { animation: lan6-0 var(--T) linear infinite; }
.lan.n6-0 .lan-sway { animation-duration: 4.2s; }
@keyframes lan6-1 { 0%, 47.23% { opacity: 0; transform: translate(0, 0); } 49.73% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(90.0px, -206.2px); } 96%, 100% { opacity: 0; transform: translate(102.6px, -235.1px); } }
.lan.n6-1 .lan-rise { animation: lan6-1 var(--T) linear infinite; }
.lan.n6-1 .lan-sway { animation-duration: 5.4s; }
@keyframes lan6-2 { 0%, 53.7% { opacity: 0; transform: translate(0, 0); } 56.2% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(74.1px, -179.4px); } 96%, 100% { opacity: 0; transform: translate(86.3px, -209.1px); } }
.lan.n6-2 .lan-rise { animation: lan6-2 var(--T) linear infinite; }
.lan.n6-2 .lan-sway { animation-duration: 6.2s; }
@keyframes lan7-0 { 0%, 25.08% { opacity: 0; transform: translate(0, 0); } 27.58% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(93.4px, -260.8px); } 96%, 100% { opacity: 0; transform: translate(102.0px, -284.9px); } }
.lan.n7-0 .lan-rise { animation: lan7-0 var(--T) linear infinite; }
.lan.n7-0 .lan-sway { animation-duration: 5.7s; }
@keyframes lan7-1 { 0%, 29.04% { opacity: 0; transform: translate(0, 0); } 31.54% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(70.4px, -264.7px); } 96%, 100% { opacity: 0; transform: translate(77.3px, -290.7px); } }
.lan.n7-1 .lan-rise { animation: lan7-1 var(--T) linear infinite; }
.lan.n7-1 .lan-sway { animation-duration: 4.3s; }
@keyframes lan7-2 { 0%, 32.58% { opacity: 0; transform: translate(0, 0); } 35.08% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(80.1px, -224.5px); } 96%, 100% { opacity: 0; transform: translate(88.5px, -248.0px); } }
.lan.n7-2 .lan-rise { animation: lan7-2 var(--T) linear infinite; }
.lan.n7-2 .lan-sway { animation-duration: 6.2s; }
@keyframes lan8-0 { 0%, 67.58% { opacity: 0; transform: translate(0, 0); } 70.08% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(28.3px, -97.5px); } 96%, 100% { opacity: 0; transform: translate(35.9px, -123.6px); } }
.lan.n8-0 .lan-rise { animation: lan8-0 var(--T) linear infinite; }
.lan.n8-0 .lan-sway { animation-duration: 5.0s; }
@keyframes lan8-1 { 0%, 71.74% { opacity: 0; transform: translate(0, 0); } 74.24% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(27.8px, -82.9px); } 96%, 100% { opacity: 0; transform: translate(36.9px, -110.1px); } }
.lan.n8-1 .lan-rise { animation: lan8-1 var(--T) linear infinite; }
.lan.n8-1 .lan-sway { animation-duration: 4.4s; }
@keyframes lan8-2 { 0%, 75.76% { opacity: 0; transform: translate(0, 0); } 78.26% { opacity: 1; transform: translate(0, -4px); } 90% { opacity: 1; transform: translate(27.9px, -58.3px); } 96%, 100% { opacity: 0; transform: translate(39.6px, -82.9px); } }
.lan.n8-2 .lan-rise { animation: lan8-2 var(--T) linear infinite; }
.lan.n8-2 .lan-sway { animation-duration: 4.3s; }

/* the 3D town (town.js): fades in over the vector town once its first frame is drawn, then the vector one stops */
.town3d { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
html.webgl .town3d { opacity: 1; }
html.webgl .town { opacity: 0; transition: opacity 1s ease; }
html.webgl-ready .town { display: none; }
.lp-chips { position: absolute; inset: 0; z-index: 1; display: none; overflow: hidden; pointer-events: none; }
html.webgl .lp-chips { display: block; }
.lp-chip { position: absolute; top: 0; left: 0; padding: 0.35em 0.95em; border-radius: 999px; background: #f4f6fb; box-shadow: 0 6px 24px rgba(4, 5, 10, 0.45); color: #0b0d16; font-size: clamp(0.72rem, 1vw, 0.95rem); font-weight: 800; white-space: nowrap; opacity: 0; will-change: transform, opacity; }


/* reduce motion: the town fully lit and still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .win, .up { fill: #ffe3a0; }
  .signglow, .winglow, .spill, .signlit, .awnlit, .lan-rise { opacity: 1; }
  .signtx { opacity: 1; fill: #05060a; }
  .chip, .lp-chips { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lan.n0-0 .lan-rise { transform: translate(61.7px, -140.8px); }
  .lan.n0-1 .lan-rise { transform: translate(30.6px, -136.1px); }
  .lan.n0-2 .lan-rise { transform: translate(30.3px, -114.2px); }
  .lan.n1-0 .lan-rise { transform: translate(99.6px, -361.8px); }
  .lan.n1-1 .lan-rise { transform: translate(69.2px, -269.9px); }
  .lan.n1-2 .lan-rise { transform: translate(85.4px, -280.8px); }
  .lan.n2-0 .lan-rise { transform: translate(93.1px, -233.8px); }
  .lan.n2-1 .lan-rise { transform: translate(89.4px, -225.8px); }
  .lan.n2-2 .lan-rise { transform: translate(75.4px, -175.4px); }
  .lan.n3-0 .lan-rise { transform: translate(18.5px, -40.5px); }
  .lan.n3-1 .lan-rise { transform: translate(9.9px, -30.6px); }
  .lan.n3-2 .lan-rise { transform: translate(0.0px, -0.0px); }
  .lan.n4-0 .lan-rise { transform: translate(80.5px, -376.7px); }
  .lan.n4-1 .lan-rise { transform: translate(100.9px, -339.5px); }
  .lan.n4-2 .lan-rise { transform: translate(69.4px, -331.7px); }
  .lan.n5-0 .lan-rise { transform: translate(54.0px, -107.3px); }
  .lan.n5-1 .lan-rise { transform: translate(42.6px, -90.8px); }
  .lan.n5-2 .lan-rise { transform: translate(19.4px, -70.1px); }
  .lan.n6-0 .lan-rise { transform: translate(73.2px, -186.0px); }
  .lan.n6-1 .lan-rise { transform: translate(81.6px, -186.9px); }
  .lan.n6-2 .lan-rise { transform: translate(65.9px, -159.7px); }
  .lan.n7-0 .lan-rise { transform: translate(87.6px, -244.7px); }
  .lan.n7-1 .lan-rise { transform: translate(65.8px, -247.3px); }
  .lan.n7-2 .lan-rise { transform: translate(74.5px, -208.9px); }
  .lan.n8-0 .lan-rise { transform: translate(23.3px, -80.1px); }
  .lan.n8-1 .lan-rise { transform: translate(21.7px, -64.7px); }
  .lan.n8-2 .lan-rise { transform: translate(20.0px, -41.9px); }
}