.ss-demo{margin-block:2.5rem 3rem}.ss-demo>.ss-fit{outline-offset:-1px;border-radius:.5rem;outline:1px solid oklch(0% 0 0/.1);overflow:hidden}.ss-demo{--demo-blue:#2563eb;--demo-blue-2:#4f7cff;--demo-violet:#7c3aed;--demo-pink:#db2777;--demo-orange:#f97316;--demo-yellow:#facc15;--demo-green:#16a34a;--demo-green-ink:#15803d;--demo-red:#dc2626;--demo-grid:oklch(0% 0 0/.045)}.ss-demo .ss-stage:not([data-theme=dark]){--ss-text:#636367;--ss-text-faint:#6c6c70}.ss-demo .ss-stage{--ss-font:var(--font-sans);--ss-accent:var(--demo-blue);--ss-accent-2:var(--demo-blue-2);--ss-shadow-card:0 0 0 1px oklch(0% 0 0/.05), 0 2px 6px oklch(0% 0 0/.05), 0 10px 24px -10px oklch(0% 0 0/.14);background:0 0;overflow:clip}.ss-demo>.ss-fit{background-color:#f6f6f7;background-image:linear-gradient(to right, var(--demo-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--demo-grid) 1px, transparent 1px);background-position:-1px -1px;background-size:20px 20px}.ss-demo__hint{color:var(--color-muted-foreground);margin-top:.5rem;font-size:.75rem;line-height:1.4}.ss-demo button{cursor:pointer;font:inherit;color:inherit}.ss-demo button:disabled{cursor:default}.ss-demo .demo-seg{background:var(--ss-ink-1);border-radius:8px;padding:2px;display:inline-flex}.ss-demo .demo-seg button{height:26px;color:var(--ss-text);background:0 0;border:1px solid #0000;border-radius:6px;padding-inline:10px;font-size:12px;transition:background-color .15s ease-out,color .15s ease-out}.ss-demo .demo-seg button[aria-pressed=true]{background:linear-gradient(180deg, var(--demo-blue-2), var(--demo-blue));color:#fff;border-color:#1d4ed8;box-shadow:0 1px 2px oklch(35% .2 265/.3)}.ss-demo .demo-btn{border:1px solid var(--color-border-strong);height:30px;color:var(--ss-text-strong);background:var(--ss-surface);border-radius:999px;padding-inline:12px;font-size:13px;font-weight:500;transition:background-color .15s ease-out,scale .15s ease-out}@media (hover:hover){.ss-demo .demo-btn:hover:not(:disabled){background:var(--ss-canvas)}}@media (prefers-reduced-motion:no-preference){.ss-demo .demo-btn:active:not(:disabled){scale:.96}}.ss-demo .demo-btn[data-tone=primary]{color:#fff;background:linear-gradient(180deg, var(--demo-blue-2), var(--demo-blue));border-color:#1d4ed8;box-shadow:0 1px 2px oklch(35% .2 265/.3),inset 0 1px oklch(100% 0 0/.25)}@media (hover:hover){.ss-demo .demo-btn[data-tone=primary]:hover:not(:disabled){background:linear-gradient(180deg, var(--demo-blue-2), #1d4ed8)}}@keyframes demo-rise{0%{opacity:0;filter:blur(4px);translate:0 12px}}@keyframes demo-fade{0%{opacity:0}}.ss-demo[data-in] :is(.demo-card,.demo-rise){animation:.3s ease-out backwards demo-fade;animation-delay:var(--rise,0s)}@media (prefers-reduced-motion:no-preference){.ss-demo[data-in] :is(.demo-card,.demo-rise){animation:.45s cubic-bezier(.22,1,.36,1) backwards demo-rise;animation-delay:var(--rise,0s)}}.ss-demo .demo-card{border-radius:var(--ss-radius-lg);background:var(--ss-surface);box-shadow:var(--ss-shadow-card)}.ss-demo .demo-btn:disabled{opacity:.5}.ss-demo .demo-sr{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.mw .mw-board{color:var(--ss-text-strong);grid-template-columns:330px minmax(0,1fr);gap:14px;font-size:12px;display:grid;position:absolute;inset:16px 18px}.mw .ss-stage[data-layout=compact] .mw-board{grid-template-rows:300px auto;grid-template-columns:minmax(0,1fr);align-content:start;inset:12px}.mw .mw-map{border-radius:var(--ss-radius-lg);box-shadow:var(--ss-shadow-card);background:radial-gradient(80% 70% at 50% 45%,#10283e,#08131e);place-items:center;display:grid;overflow:hidden}.mw .mw-map canvas{cursor:crosshair;touch-action:manipulation;display:block}.mw .mw-map canvas:focus-visible{outline-offset:-4px;border-radius:var(--ss-radius-lg);outline:2px solid #fff}.mw .mw-side{flex-direction:column;gap:10px;min-width:0;display:flex}.mw .mw-layers{background:var(--ss-surface);box-shadow:var(--ss-shadow-card);display:flex}.mw .mw-layers button{white-space:nowrap;flex:1;padding-inline:4px;font-size:11.5px}.mw .mw-owned{align-self:flex-start;align-items:center;gap:7px;font-size:12px;display:inline-flex}.mw .mw-check{border:1.5px solid var(--color-border-strong);border-radius:4px;place-items:center;width:14px;height:14px;transition:background-color .15s ease-out,border-color .15s ease-out;display:grid}.mw .mw-owned[aria-pressed=true] .mw-check{background:var(--demo-blue);border-color:#1d4ed8}.mw .mw-owned[aria-pressed=true] .mw-check:after{content:"";border:0 solid #fff;border-width:0 0 1.5px 1.5px;width:6px;height:3px;margin-top:-2px;rotate:-45deg}.mw .mw-card{flex-direction:column;gap:4px;padding:12px 14px;display:flex}.mw .mw-card__head{align-items:center;gap:8px;min-width:0;display:flex}.mw .mw-card__head strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;overflow:hidden}.mw .mw-swatch{border-radius:5px;flex:none;width:18px;height:18px;box-shadow:inset 0 0 0 1px oklch(0% 0 0/.15)}.mw .mw-badge{border:1px solid var(--color-border-strong);color:var(--ss-text);border-radius:999px;flex:none;margin-left:auto;padding:1px 8px;font-size:11px;font-weight:500}.mw .mw-badge[data-owned]{border-color:var(--demo-green-ink);color:#fff;background:var(--demo-green-ink)}.mw .mw-coords{font-family:var(--font-mono);color:var(--ss-text);font-size:11px}.mw .mw-levels{flex-direction:column;gap:6px;margin:6px 0 0;display:flex}.mw .mw-levels>div{grid-template-columns:64px minmax(0,1fr);align-items:center;display:grid}.mw .mw-levels dt{color:var(--ss-text);font-size:11px}.mw .mw-levels dd{margin:0}.mw .mw-meter{background:var(--ss-ink-1);border-radius:3px;height:6px;display:block;overflow:hidden}.mw .mw-meter>span{border-radius:inherit;height:100%;transition:width .2s ease-out;display:block}.mw .mw-legend,.mw .mw-legend-note{color:var(--ss-text);margin:0;font-size:11px}.mw .mw-legend{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.mw .mw-ramp{background:linear-gradient(90deg,#0012e7,#11c1c8,#10e800,#eac200,#f37c00,#d21300);border-radius:4px;height:8px}.mw .mw-legend-biomes ul{grid-template-columns:1fr 1fr;gap:5px 10px;margin:0 0 6px;padding:0;list-style:none;display:grid}.mw .mw-legend-biomes li{white-space:nowrap;text-transform:capitalize;color:var(--ss-text-strong);align-items:center;gap:6px;font-size:11px;display:flex;overflow:hidden}.mw .mw-legend-biomes .mw-swatch{border-radius:3px;width:12px;height:12px}.mw .mw-card{--rise:.12s}.mw .mw-card .mw-swatch{transition:background-color .15s ease-out}.mw .mw-badge{transition:background-color .15s ease-out,color .15s ease-out}@keyframes mw-swap{0%{opacity:0;translate:0 4px}}@media (prefers-reduced-motion:no-preference){.mw .mw-swap{animation:.22s ease-out mw-swap}}