@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500&family=Space+Grotesk:wght@600;700&display=swap";:root{color-scheme:light;--bg: #eeece6;--surface: #f7f6f2;--surface-2: #e3e0d8;--glass: rgba(249, 248, 245, .86);--hairline: rgba(20, 32, 36, .14);--ink: #14181c;--ink-muted: #55606a;--accent: #00696b;--accent-ink: #ffffff;--hot: #b23a1e;--ok: #2f7a3f;--shadow: 0 1px 1px rgba(11, 18, 20, .05), 0 10px 30px -14px rgba(11, 18, 20, .35);--grid: rgba(20, 32, 36, .09);--ramp-0: #26547c;--ramp-1: #2a9d8f;--ramp-2: #e9c46a;--ramp-3: #f4703a;--font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--radius: 10px;--radius-sm: 6px;--rail-h: 28px}:root[data-theme=dark]{color-scheme:dark;--bg: #070d0e;--surface: #0d1517;--surface-2: #162023;--glass: rgba(13, 21, 23, .8);--hairline: rgba(168, 214, 210, .16);--ink: #e6eeee;--ink-muted: #8ea3a5;--accent: #38e0c8;--accent-ink: #04201c;--hot: #ff7a59;--ok: #6fd28a;--shadow: 0 1px 1px rgba(0, 0, 0, .5), 0 16px 44px -18px rgba(0, 0, 0, .85);--grid: rgba(168, 214, 210, .09)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;line-height:1.15}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}::selection{background:var(--accent);color:var(--accent-ink)}.mono,code,kbd,samp,.value-display,.readout,.kicker,.metric,.paint-prop{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.site-header,header{position:sticky;top:0;z-index:1000;background:var(--glass);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--hairline)}.header-content{max-width:1280px;margin:0 auto;padding:.7rem 1.25rem;display:flex;align-items:center;gap:1rem;justify-content:space-between}.brand,.logo{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;min-width:0}.brand:hover,.logo:hover{text-decoration:none}.brand-mark,.logo-icon{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;border-radius:5px;background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-weight:600;font-size:.8rem;letter-spacing:-.02em}.brand-name,.logo h1{font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-ver{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-muted);border:1px solid var(--hairline);border-radius:999px;padding:.05rem .4rem}.site-nav,nav{display:flex;align-items:center;gap:1.1rem}.site-nav a,nav a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;color:var(--ink-muted);text-decoration:none;padding:.2rem 0;border-bottom:1px solid transparent}.site-nav a:hover,nav a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--accent)}.seg{display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;position:relative;padding:2px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-2);cursor:pointer;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-muted);line-height:1;-webkit-appearance:none;appearance:none}.seg .seg-knob{position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);border-radius:999px;background:var(--ink);transition:transform .18s ease}.seg[aria-pressed=true] .seg-knob{transform:translate(100%)}.seg span:not(.seg-knob){position:relative;z-index:1;padding:.36rem .5rem;display:grid;place-items:center;transition:color .18s ease}.seg[aria-pressed=false] span:nth-of-type(2),.seg[aria-pressed=true] span:nth-of-type(3){color:var(--bg)}main{flex:1 0 auto;width:100%;max-width:1280px;margin:0 auto;padding:1.25rem}.page-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem;margin-bottom:1rem}.page-head h1{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem)}.page-head .lede{color:var(--ink-muted);font-size:.92rem;max-width:60ch}.example-container{display:grid;grid-template-columns:1fr;gap:1.25rem;height:calc(100vh - 190px);min-height:520px}.map-container{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);height:100%;min-height:460px}#map{width:100%;height:100%}.controls{position:absolute;top:.85rem;right:.85rem;z-index:100;width:320px;max-width:calc(100% - 1.7rem);max-height:calc(100% - 1.7rem);overflow-y:auto;overscroll-behavior:contain;background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink)}.panel-head{position:sticky;top:0;z-index:2;background:inherit;border-bottom:1px solid var(--hairline)}canvas.frame-rail,.frame-rail{display:block;width:100%;height:var(--rail-h);border-radius:var(--radius) var(--radius) 0 0;background:var(--surface-2)}.rail-legend{display:flex;align-items:center;gap:.5rem;padding:.3rem .75rem;border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.03em;color:var(--ink-muted)}.rail-legend .metric{color:var(--ink);font-weight:500}.rail-legend .spacer{flex:1}.rail-legend .over{color:var(--hot)}.controls h2{font-size:1.05rem;letter-spacing:-.01em;padding:.85rem .9rem 0}.kicker{display:block;padding:.25rem .9rem .85rem;font-size:.72rem;color:var(--accent);word-break:break-word}.controls>p{padding:0 .9rem .85rem;font-size:.83rem;color:var(--ink-muted);line-height:1.5}.controls>p code,.controls>p .paint-prop{font-size:.95em;color:var(--ink);background:var(--surface-2);padding:.05em .3em;border-radius:3px}.control-group{padding:.75rem .9rem;border-top:1px solid var(--hairline)}.control-group:first-child{border-top:none}.control-group>label,.control-group>.group-label{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;font-size:.78rem;font-weight:500;color:var(--ink-muted);margin-bottom:.45rem}.paint-prop{font-size:.75rem;color:var(--ink);font-weight:500}.value-display,.readout-value{margin-left:auto;text-align:right;font-size:.75rem;font-weight:500;color:var(--accent);white-space:nowrap}input,select,button,textarea{font:inherit;color:inherit}select,input[type=text],input[type=number]{width:100%;padding:.42rem .55rem;font-family:var(--font-mono);font-size:.78rem;color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm);-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:right .7rem center,right .45rem center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer}input[type=text],input[type=number]{background-image:none;cursor:text}select option{background:var(--surface);color:var(--ink)}input[type=range]{width:100%;height:18px;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--hairline);border-radius:2px}input[type=range]::-moz-range-track{height:2px;background:var(--hairline);border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:var(--accent);border:none}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--accent)}input[type=color]{width:100%;height:30px;padding:2px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm);cursor:pointer}input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}.checkbox-row{display:flex;align-items:center;gap:.5rem;padding:.18rem 0;font-family:var(--font-mono);font-size:.75rem;color:var(--ink);cursor:pointer}.btn,.controls .control-group button,.controls>button{display:block;width:100%;padding:.55rem .9rem;font-family:var(--font-display);font-weight:600;font-size:.85rem;letter-spacing:.01em;color:var(--accent-ink);background:var(--accent);border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:filter .15s ease,transform .06s ease}.btn:hover,.controls .control-group button:hover,.controls>button:hover{filter:brightness(1.12)}.btn:active,.controls .control-group button:active,.controls>button:active{transform:translateY(1px)}.btn.ghost,.controls .control-group button.ghost{color:var(--ink);background:transparent;border-color:var(--hairline)}.btn.ghost:hover,.controls .control-group button.ghost:hover{background:var(--surface-2);filter:none}.btn:disabled,button:disabled{opacity:.45;cursor:not-allowed}.chip-row{display:flex;flex-wrap:wrap;gap:.3rem}.chip{padding:.26rem .5rem;font-family:var(--font-mono);font-size:.7rem;color:var(--ink-muted);background:transparent;border:1px solid var(--hairline);border-radius:999px;cursor:pointer;width:auto}.chip:hover{color:var(--ink);background:var(--surface-2)}.chip[aria-pressed=true],.chip.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.readout{padding:.7rem .9rem;border-top:1px solid var(--hairline);font-size:.74rem;color:var(--ink-muted);background:linear-gradient(var(--grid),var(--grid))}.readout .row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:.12rem 0}.readout .row>span:last-child,.readout strong{color:var(--ink);font-weight:500}.readout .row>span:last-child{text-align:right;color:var(--accent)}.credit{padding:.6rem .9rem;border-top:1px solid var(--hairline);font-size:.68rem;color:var(--ink-muted)}.credit a{color:inherit;text-decoration:underline}.code-block{background:#0b1113;color:#d6e3e2;padding:1rem 1.1rem;border-radius:var(--radius);border:1px solid rgba(168,214,210,.14);overflow-x:auto;line-height:1.65;font-family:var(--font-mono);font-size:.8rem;box-shadow:var(--shadow)}.code-block code,pre code{background:transparent;padding:0;color:inherit;font-size:inherit}.code-keyword{color:#c4a7f0}.code-string{color:#8fd694}.code-number{color:#f0b27a}.code-function{color:#7fb8f5}.code-property{color:#6fd7e6}.code-comment{color:#6b7d80;font-style:italic}.code-cmd{color:#f2dc9a}.site-footer,footer{flex:0 0 auto;margin-top:2rem;padding:1.1rem 1.25rem;border-top:1px solid var(--hairline);color:var(--ink-muted);font-family:var(--font-mono);font-size:.72rem}.footer-content{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;justify-content:space-between}.site-footer a,footer a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--hairline)}.site-footer a:hover,footer a:hover{color:var(--ink);text-decoration:none}.maplibregl-ctrl-group{background:var(--glass)!important;border:1px solid var(--hairline);border-radius:var(--radius-sm)!important;box-shadow:var(--shadow)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.maplibregl-ctrl-group button+button{border-top:1px solid var(--hairline)!important}:root[data-theme=dark] .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) brightness(1.6)}.maplibregl-ctrl-attrib{background:var(--glass)!important;color:var(--ink-muted);font-family:var(--font-mono);font-size:10px;border-radius:var(--radius-sm) 0 0 0}.maplibregl-ctrl-attrib a{color:var(--ink-muted)}:root[data-theme=dark] .maplibregl-ctrl-attrib-button{filter:invert(1) brightness(1.6)}.maplibregl-popup-content{background:var(--glass);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius-sm);box-shadow:var(--shadow);font-family:var(--font-mono);font-size:.75rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}@media (max-width: 900px){.header-content{padding:.6rem .9rem;gap:.6rem}.site-nav,nav{gap:.75rem}main{padding:.9rem}.example-container{height:auto;min-height:0}.map-container{height:auto;min-height:0;display:flex;flex-direction:column}#map{height:56vh;min-height:320px;flex:0 0 auto}.controls{position:static;width:100%;max-width:100%;max-height:none;overflow:visible;border:none;border-top:1px solid var(--hairline);border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}canvas.frame-rail,.frame-rail{border-radius:0}}@media (max-width: 520px){body{font-size:14px}.brand-name,.logo h1{font-size:.88rem}.brand-ver,.site-nav a[data-testid=nav-examples],.site-nav a[data-testid=nav-npm]{display:none}.site-nav,nav{gap:.6rem}.site-nav a,nav a{font-size:.7rem}.header-content{padding:.55rem .7rem;gap:.5rem}main{padding:.7rem}.footer-content{justify-content:flex-start}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}