.sr{--sr-ink: #1c2633;--sr-ink-soft: #566170;--sr-on-ink: #f3f6f9;--sr-surface: rgb(255 255 255 / .8);--sr-hover: rgb(28 38 51 / .07);--sr-pressed: rgb(28 38 51 / .12);--sr-line: rgb(28 38 51 / .1);--sr-halo: rgb(255 255 255 / .9);--sr-accent: #d8232a;--sr-shadow: 0 1px 2px rgb(20 30 45 / .08), 0 8px 24px rgb(20 30 45 / .14);--sr-sky: #c7d4e3;--sr-gap: 14px;--sr-radius: 12px;position:relative;container-type:size;width:100%;height:100%;min-height:280px;overflow:hidden;background:var(--sr-sky);color:var(--sr-ink);font-size:13px;font-weight:500;line-height:1.3;-webkit-font-smoothing:antialiased;isolation:isolate}.sr-theme-dark{--sr-ink: #edf1f6;--sr-ink-soft: #a9b4c2;--sr-on-ink: #1c2633;--sr-surface: rgb(24 30 39 / .74);--sr-hover: rgb(255 255 255 / .1);--sr-pressed: rgb(255 255 255 / .17);--sr-line: rgb(255 255 255 / .14);--sr-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35)}@media (prefers-color-scheme: dark){.sr-theme-auto{--sr-ink: #edf1f6;--sr-ink-soft: #a9b4c2;--sr-on-ink: #1c2633;--sr-surface: rgb(24 30 39 / .74);--sr-hover: rgb(255 255 255 / .1);--sr-pressed: rgb(255 255 255 / .17);--sr-line: rgb(255 255 255 / .14);--sr-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35)}}.sr *,.sr *:before,.sr *:after{box-sizing:border-box}.sr.sr-is-fullscreen{border-radius:0}.sr-canvas,.sr-poster{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.sr-canvas{opacity:0;transition:opacity .7s ease}.sr-canvas[data-ready=true]{opacity:1}.sr-canvas canvas{display:block;width:100%;height:100%;outline:none;cursor:grab;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sr-is-fullscreen .sr-canvas canvas{touch-action:none}.sr-canvas canvas:active{cursor:grabbing}.sr-canvas canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--sr-accent)}.sr-poster{object-fit:cover;transition:opacity .7s ease}.sr-poster[data-hidden=true]{opacity:0;pointer-events:none}.sr-panel{display:flex;align-items:center;padding:4px;gap:2px;background:var(--sr-surface);border:1px solid var(--sr-line);border-radius:var(--sr-radius);box-shadow:var(--sr-shadow);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6)}.sr-column{flex-direction:column}.sr-button,.sr-text-button,.sr-chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0;border:0;border-radius:calc(var(--sr-radius) - 4px);background:none;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease}.sr-button{width:36px;height:36px;padding:0;flex:none}.sr-text-button{height:36px;padding:0 12px 0 9px}.sr-button:hover,.sr-text-button:hover,.sr-chip:hover{background:var(--sr-hover)}.sr-button:active,.sr-text-button:active,.sr-chip:active{background:var(--sr-pressed);transform:scale(.96)}.sr-button[aria-pressed=true],.sr-text-button[aria-pressed=true]{background:var(--sr-ink);color:var(--sr-on-ink)}.sr :focus-visible{outline:2px solid var(--sr-accent);outline-offset:1px}.sr-rule{flex:none;align-self:stretch;width:1px;margin:6px 3px;background:var(--sr-line)}.sr-top{position:absolute;top:var(--sr-gap);right:var(--sr-gap);z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.sr-menu{flex-direction:column;align-items:stretch;width:264px;padding:6px;gap:0;animation:sr-rise .16s ease}.sr-switch,.sr-slider{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 10px;border-radius:calc(var(--sr-radius) - 4px);cursor:pointer}.sr-switch:hover{background:var(--sr-hover)}.sr-switch-text{display:flex;flex-direction:column;gap:2px}.sr-switch-text small{color:var(--sr-ink-soft);font-size:11.5px;font-weight:400}.sr-switch input{position:absolute;opacity:0;pointer-events:none}.sr-switch-track{position:relative;flex:none;width:34px;height:20px;border-radius:10px;background:var(--sr-pressed);transition:background-color .18s ease}.sr-switch-track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #141e2d4d;transition:transform .18s ease}.sr-switch input:checked+.sr-switch-track{background:var(--sr-accent)}.sr-switch input:checked+.sr-switch-track:after{transform:translate(14px)}.sr-switch input:focus-visible+.sr-switch-track{outline:2px solid var(--sr-accent);outline-offset:2px}.sr-slider{flex-direction:column;align-items:stretch;gap:8px;cursor:default}.sr-slider .sr-switch-text{flex-direction:row;justify-content:space-between;align-items:baseline}.sr-slider input{width:100%;margin:0;accent-color:var(--sr-accent)}.sr-stack{position:absolute;top:50%;right:var(--sr-gap);z-index:2;display:flex;flex-direction:column;gap:8px;transform:translateY(-50%)}.sr-needle{display:inline-flex;transition:transform .05s linear}.sr-needle-north{fill:var(--sr-accent)}.sr-needle-south{fill:var(--sr-ink-soft);opacity:.55}.sr-rail{position:absolute;bottom:calc(var(--sr-gap) + 26px);left:50%;z-index:2;max-width:calc(100% - 2 * var(--sr-gap));transform:translate(-50%)}.sr-chips{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);padding:0 6px;margin:0 -4px}.sr-chips::-webkit-scrollbar{display:none}.sr-chip{flex:none;height:36px;padding:0 12px;color:var(--sr-ink-soft)}.sr-chip:hover{color:var(--sr-ink)}.sr-chip-home{padding-left:9px}.sr-chip[aria-current=true]{background:var(--sr-ink);color:var(--sr-on-ink)}.sr-foot{position:absolute;right:var(--sr-gap);bottom:calc(var(--sr-gap) - 4px);left:var(--sr-gap);z-index:1;display:flex;align-items:flex-end;gap:14px;color:#26313f;font-size:11.5px;text-shadow:0 0 2px var(--sr-halo-fixed, rgb(255 255 255 / .95)),0 0 5px rgb(255 255 255 / .9),0 0 9px rgb(255 255 255 / .7);pointer-events:none}.sr-scale{flex:none;padding-bottom:3px;border:solid currentColor;border-width:0 1.5px 1.5px;text-align:center;filter:drop-shadow(0 0 1.5px rgb(255 255 255 / .9));transition:width .2s ease}.sr-readout{font-variant-numeric:tabular-nums;white-space:pre}.sr-credit{display:inline-flex;align-items:center;gap:7px;margin-left:auto}.sr-credit:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sr-accent);opacity:0;transition:opacity .3s ease}.sr-credit[data-streaming=true]:before{opacity:1;animation:sr-pulse 1.1s ease-in-out infinite}.sr-divider{position:absolute;top:0;bottom:0;z-index:1;width:44px;margin-left:-22px;cursor:ew-resize;touch-action:none}.sr-divider:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px #141e2d1f,0 0 12px #141e2d40}.sr-grip{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#1c2633;box-shadow:var(--sr-shadow);transform:translate(-50%,-50%);transition:transform .12s ease}.sr-divider:hover .sr-grip,.sr-divider:active .sr-grip{transform:translate(-50%,-50%) scale(1.08)}.sr-tag{position:absolute;top:var(--sr-gap);z-index:1;padding:6px 10px;border-radius:999px;background:#141c26b8;color:#fff;font-size:12px;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;animation:sr-rise .2s ease}.sr-hint{position:absolute;top:var(--sr-gap);left:50%;z-index:4;max-width:calc(100% - 2 * var(--sr-gap));padding:8px 14px;border-radius:999px;background:#141c26c2;color:#fff;font-size:12.5px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translate(-50%);pointer-events:none;animation:sr-hint .3s ease}.sr-hint[data-kind=wheel],.sr-hint[data-kind=touch]{top:50%;padding:12px 20px;font-size:15px;transform:translate(-50%,-50%);animation-name:sr-fade}.sr-loading,.sr-notice{position:absolute;top:50%;left:50%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translate(-50%,-50%);text-align:center}.sr-loading{color:#33404f}.sr-spinner{width:26px;height:26px;border:2.5px solid rgb(28 38 51 / .15);border-top-color:#33404f;border-radius:50%;animation:sr-spin .8s linear infinite}.sr-progress{width:132px;height:3px;overflow:hidden;border-radius:2px;background:#1c263324}.sr-progress span{display:block;height:100%;background:#33404f;transform-origin:left;transition:transform .2s ease}.sr-notice{width:min(360px,calc(100% - 2 * var(--sr-gap)));padding:18px 20px;gap:6px;border-radius:var(--sr-radius);background:#ffffffe0;color:#1c2633;box-shadow:var(--sr-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.sr-notice strong{font-size:15px;font-weight:650}.sr-notice span{color:#566170;font-weight:400}@container (max-width: 720px){.sr-readout{display:none}.sr-hint[data-kind=intro]{top:calc(var(--sr-gap) + 56px)}}@container (max-width: 520px){.sr{--sr-gap: 10px}.sr-chip-home,.sr-text-button{font-size:0;gap:0;padding:0 8px}}@container (max-height: 430px){.sr-stack{top:calc(var(--sr-gap) + 54px);flex-direction:row-reverse;transform:none}.sr-stack .sr-column{flex-direction:row}}@media (pointer: coarse){.sr-button{width:40px;height:40px}.sr-text-button,.sr-chip{height:40px}}@keyframes sr-spin{to{transform:rotate(1turn)}}@keyframes sr-pulse{50%{opacity:.25}}@keyframes sr-rise{0%{opacity:0;translate:0 -4px}}@keyframes sr-hint{0%{opacity:0;translate:0 -6px}}@keyframes sr-fade{0%{opacity:0}}@media (prefers-reduced-motion: reduce){.sr *,.sr *:before,.sr *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;color:#1c2633;background:#f4f6f8}body{margin:0}.demo{max-width:1180px;margin:0 auto;padding:56px 24px 72px}.demo-kicker{margin:0 0 10px;color:#d8232a;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}.demo h1{margin:0;font-size:clamp(30px,4.4vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.08}.demo-lede{max-width:62ch;margin:16px 0 32px;color:#566170;font-size:17px;line-height:1.55}.demo-map{height:min(72vh,720px);min-height:420px;overflow:hidden;border-radius:20px;box-shadow:0 1px 2px #141e2d0f,0 24px 60px #141e2d29}.demo footer{margin-top:20px;color:#7a8593;font-size:13px}.demo-bare{position:fixed;top:0;right:0;bottom:0;left:0}
