.demo.svelte-4ny6lf{background:var(--color-brand-50);color:color-mix(in oklab, var(--color-brand-900) 80%, transparent);gap:16px;padding:22px 24px;display:grid}html.dark .demo.svelte-4ny6lf{background:var(--color-brand-900);color:color-mix(in oklab, var(--color-brand-100) 80%, transparent)}.row.svelte-4ny6lf{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.cell.svelte-4ny6lf{border:1px solid color-mix(in oklab, var(--color-brand-500) 22%, transparent);background:color-mix(in oklab, var(--color-brand-50) 55%, white);border-radius:10px;align-content:start;gap:12px;padding:16px;display:grid}html.dark .cell.svelte-4ny6lf{border-color:color-mix(in oklab, var(--color-brand-500) 26%, transparent);background:color-mix(in oklab, var(--color-brand-800) 45%, var(--color-brand-900))}header.svelte-4ny6lf{color:color-mix(in oklab, var(--color-brand-900) 72%, transparent);flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;display:flex}html.dark header.svelte-4ny6lf{color:color-mix(in oklab, var(--color-brand-100) 72%, transparent)}header.svelte-4ny6lf code:where(.svelte-4ny6lf){color:var(--color-brand-700);font-family:SFMono-Regular,Consolas,monospace}html.dark header.svelte-4ny6lf code:where(.svelte-4ny6lf){color:var(--color-brand-300)}.tag.svelte-4ny6lf{letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800}.tag.promote.svelte-4ny6lf{background:color-mix(in oklab, var(--color-brand-500) 20%, transparent);color:var(--color-brand-700)}.tag.stay.svelte-4ny6lf{background:color-mix(in oklab, var(--color-brand-900) 9%, transparent);color:color-mix(in oklab, var(--color-brand-900) 60%, transparent)}html.dark .tag.promote.svelte-4ny6lf{background:color-mix(in oklab, var(--color-brand-500) 26%, transparent);color:var(--color-brand-200)}html.dark .tag.stay.svelte-4ny6lf{background:color-mix(in oklab, var(--color-brand-100) 12%, transparent);color:color-mix(in oklab, var(--color-brand-100) 62%, transparent)}.lane.svelte-4ny6lf{border:1px solid color-mix(in oklab, var(--color-brand-500) 16%, transparent);background:color-mix(in oklab, var(--color-brand-500) 9%, var(--color-brand-50));border-radius:8px;align-items:center;height:124px;padding:0 16px;display:flex;position:relative;overflow:hidden}html.dark .lane.svelte-4ny6lf{border-color:color-mix(in oklab, var(--color-brand-500) 22%, transparent);background:color-mix(in oklab, var(--color-brand-500) 14%, var(--color-brand-900))}.demo .box{width:116px;height:92px;color:color-mix(in oklab, var(--color-brand-900) 90%, black);box-shadow:0 14px 40px color-mix(in oklab, var(--color-brand-500) 32%, transparent);border-radius:14px;flex:none;align-content:center;justify-items:center;gap:4px;display:grid}.demo .box.move{background:linear-gradient(135deg, var(--color-brand-400), var(--color-brand-600))}.demo .box.paint{background:#67e8f9}.demo .box small{letter-spacing:.1em;text-transform:uppercase;opacity:.72;font-size:9px;font-weight:850}.demo .box .val{color:#ecfeff;background:#031316d1;border-radius:999px;padding:2px 9px;font-family:SFMono-Regular,Consolas,monospace;font-size:15px;font-weight:700}.demo .box .val.on{color:#0b3b33;background:#ecfeff}button.svelte-4ny6lf{border:1px solid var(--color-brand-600);background:var(--color-brand-600);height:34px;color:var(--color-brand-50);cursor:pointer;border-radius:6px;justify-self:start;align-items:center;gap:7px;padding:0 13px;font-size:13px;font-weight:780;display:inline-flex}button.svelte-4ny6lf:hover{background:var(--color-brand-700);border-color:var(--color-brand-700)}@media (width<=720px){.row.svelte-4ny6lf{grid-template-columns:1fr}}