:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#d5e4e7;font-synthesis:none;background:#080e12;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}a{color:inherit;text-decoration:none}button,select{color:#afc3ca;cursor:pointer;background:#111e25;border:1px solid #25373d;border-radius:5px;padding:9px 12px;font-size:12px}button:hover,select:hover{color:#e7fffa;border-color:#65928f}button:disabled{opacity:.45;cursor:default}:focus-visible{outline-offset:4px;outline:2px solid #82f0dc}.demo-header{border-bottom:1px solid #1e2a30;justify-content:space-between;align-items:center;height:64px;padding:0 32px;display:flex}.wordmark{letter-spacing:.16em;font-size:14px;font-weight:750}.wordmark span{color:#71858d;margin-left:12px;font-size:10px;font-weight:450}.connection{color:#8da8b1;align-items:center;gap:8px;font-size:11px;display:flex}i{background:#79e4ce;border-radius:50%;width:5px;height:5px;display:inline-block;box-shadow:0 0 9px #79e4ce66}main{width:min(1600px,100% - 64px,183.333svh - 473px);margin:0 auto}.scene-heading{justify-content:space-between;align-items:flex-end;padding:24px 0 20px;display:flex}.eyebrow,.control-label{color:#839aa3;letter-spacing:.14em;margin:0 0 9px;font-size:9px}h1{letter-spacing:-.025em;margin:0;font-size:22px;font-weight:550}h1 span{color:#8ba1a9;letter-spacing:0;margin-left:18px;font-size:12px;font-weight:400}.scene-number{color:#6a858e;letter-spacing:.07em;font-size:10px}.scene{aspect-ratio:11/6;isolation:isolate;background:#11232b;border:1px solid #2e444b;border-radius:8px;width:100%;position:relative;overflow:hidden}.scene img,.scene canvas{width:100%;height:100%;display:block}.scene canvas{opacity:0;touch-action:none;position:absolute;inset:0}.scene canvas.ready{opacity:1}.scene canvas.map-canvas{pointer-events:none;width:256px;height:256px}.scene canvas.light-canvas{opacity:1;pointer-events:none;mix-blend-mode:screen;z-index:2}.show-original .light-canvas{visibility:hidden}.scene canvas.rain-canvas{opacity:1;pointer-events:none;z-index:0}.show-original .rain-canvas{visibility:hidden}.billboard-layer{transform-origin:0 0;pointer-events:none;z-index:1;width:2048px;height:1117px;position:absolute;inset:0 auto auto 0}.billboard{transform-origin:0 0;background:#082b69;position:absolute;inset:0 auto auto 0;overflow:hidden;box-shadow:0 0 9px #2b89ff60}.billboard-scroll{filter:grayscale()sepia()saturate(4)hue-rotate(165deg)brightness(1.2);height:200%;translate:0 calc(var(--hcss-number) * 50%);animation:billboard-slide-down var(--hcss-duration) linear infinite;animation-delay:calc(-1 * var(--hcss-delay,0s))}.scene .billboard-scroll canvas{opacity:1;width:100%;height:50%;position:static}.billboard:after{content:"";background:repeating-linear-gradient(#0000 0 2px,#05256125 2px 3px);position:absolute;inset:0}.show-original .billboard-layer{visibility:hidden}.show-original .billboard-scroll{animation-play-state:paused}@keyframes billboard-slide-down{0%{--hcss-number:-1}to{--hcss-number:0}}@media (prefers-reduced-motion:reduce){.billboard-layer:not([data-hcss-motion=full]) .billboard-scroll{animation:none}}:where([data-hcss-motion=none],[data-hcss-theme=high-contrast]) .billboard-scroll{animation:none}.scene-caption{z-index:3;pointer-events:none;letter-spacing:.12em;color:#bdd7de;background:linear-gradient(#0000,#061017c4);justify-content:space-between;width:100%;padding:27px 20px 15px;font-size:9px;display:flex;position:absolute;bottom:0;left:0}.scene-caption i{margin-right:8px}#hint{letter-spacing:.01em;color:#c7d9dd}.controls{background:#0d161c;border:1px solid #223139;border-radius:8px;align-items:center;gap:24px;margin-top:14px;padding:17px 20px;display:flex}.control-label{justify-content:space-between;gap:10px;display:flex}.modes{gap:3px;display:flex}.modes button{background:0 0;border-color:#0000;padding:8px 11px}.modes button[aria-pressed=true]{color:#b5ffee;background:#193831;border-color:#31554b}.slider-control{flex:1;min-width:70px;max-width:170px}output{color:#c8e6e0;letter-spacing:0}input[type=range]{accent-color:#8ae9d1;cursor:pointer;width:100%;height:22px;margin:0}.map-control select{min-width:85px;padding:7px 8px}.actions{white-space:nowrap;flex-wrap:wrap;gap:7px;margin-left:auto;padding-top:14px;display:flex}#original[aria-pressed=true]{color:#b5ffee;background:#193831;border-color:#568c7e}footer{color:#6d858f;justify-content:space-between;gap:16px;padding:15px 2px 20px;font-size:10px;display:flex}.footer-divider{margin:0 10px}@media (width<=1050px){main{width:calc(100% - 40px)}.controls{flex-wrap:wrap;gap:16px}.mode-control{flex:1 0 45%}.slider-control{max-width:none}.actions{padding-top:0}}@media (width<=640px){.demo-header{height:56px;padding:0 18px}.wordmark span,.scene-number{display:none}main{width:calc(100% - 24px)}.scene-heading{padding:24px 2px 16px}h1 span{margin:7px 0 0;display:block}.scene-caption{padding:20px 10px 10px;font-size:7px}#hint{display:none}.controls{gap:16px;padding:14px}.mode-control{flex-basis:100%}.modes button{flex:1}.slider-control{flex-basis:35%}.map-control{flex:1}.actions{flex:2 100%;justify-content:flex-end}footer{flex-wrap:wrap;font-size:9px}}