:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#f4f5f1)var(--lightningcss-dark,#101615);--panel:var(--lightningcss-light,#fbfcf9)var(--lightningcss-dark,#151d1b);--card:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1a2321);--card-soft:var(--lightningcss-light,#f7faf8)var(--lightningcss-dark,#1e2826);--ink:var(--lightningcss-light,#18201f)var(--lightningcss-dark,#e6efec);--ink-soft:var(--lightningcss-light,#55635f)var(--lightningcss-dark,#9fada9);--ink-faint:var(--lightningcss-light,#8d9a96)var(--lightningcss-dark,#71807b);--ink-faint-soft:var(--lightningcss-light,#b6c7c3)var(--lightningcss-dark,#505b57);--line:var(--lightningcss-light,#d8e0dc)var(--lightningcss-dark,#2a3533);--line-soft:var(--lightningcss-light,#dadedc)var(--lightningcss-dark,#222c2a);--accent:var(--lightningcss-light,#2563eb)var(--lightningcss-dark,#5b9bf8);--accent-soft:var(--lightningcss-light,#e6edfd)var(--lightningcss-dark,#16233d);--accent-ink:var(--lightningcss-light,#1d4ed8)var(--lightningcss-dark,#a9c8ff);--code-bg:var(--lightningcss-light,#17201f)var(--lightningcss-dark,#0b1211);--code-ink:var(--lightningcss-light,#eef7f4)var(--lightningcss-dark,#dff0ec);--grid:var(--lightningcss-light,#18201f0d)var(--lightningcss-dark,#ffffff0d);--shadow:var(--lightningcss-light,#12201c21)var(--lightningcss-dark,#00000073)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.35}body{margin:0}:is(.code-panel,.doc-body,.doc-demo) .token.comment{color:#6f807c}:is(.code-panel,.doc-body,.doc-demo) .token.tag,:is(.code-panel,.doc-body,.doc-demo) .token.keyword,:is(.code-panel,.doc-body,.doc-demo) .token.selector{color:#82b1ff}:is(.code-panel,.doc-body,.doc-demo) .token.attr-name,:is(.code-panel,.doc-body,.doc-demo) .token.property{color:#a5d6a7}:is(.code-panel,.doc-body,.doc-demo) .token.attr-value,:is(.code-panel,.doc-body,.doc-demo) .token.string{color:#ffd79a}:is(.code-panel,.doc-body,.doc-demo) .token.number,:is(.code-panel,.doc-body,.doc-demo) .token.unit,:is(.code-panel,.doc-body,.doc-demo) .token.boolean{color:#ffab91}:is(.code-panel,.doc-body,.doc-demo) .token.function{color:#c792ea}:is(.code-panel,.doc-body,.doc-demo) .token.punctuation,:is(.code-panel,.doc-body,.doc-demo) .token.operator{color:#93a29e}.top-bar{border-bottom:1px solid var(--line-soft);background:var(--bg);flex-wrap:wrap;align-items:center;gap:12px;padding:10px 24px;display:flex}.top-brand{color:var(--accent);align-items:center;gap:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:800;text-decoration:none;display:flex}.top-mark{background:var(--accent);width:26px;height:26px;-webkit-mask:var(--mark) center / contain no-repeat;-webkit-mask:var(--mark) center / contain no-repeat;mask:var(--mark) center / contain no-repeat}.top-links{flex-wrap:wrap;gap:4px;margin-left:12px;margin-right:auto;display:flex}.top-links a{color:var(--ink-soft);border-radius:6px;padding:6px 10px;font-size:13px;font-weight:650;text-decoration:none}.top-links a[href^=http]:after{content:"↗" / "";color:var(--ink-faint);vertical-align:1px;margin-left:4px;font-size:.9em}.top-links a[href^=http]:hover:after{color:inherit}.top-links a:hover{background:var(--card);color:var(--ink)}.top-links a[aria-current]{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-ink)}.top-article{position:relative}.top-article>button{color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:4px;padding:6px 10px;font-family:inherit;font-size:13px;font-weight:650;display:flex}.top-article>button:after{content:"▾";color:var(--ink-faint);font-size:.9em}.top-article>button:hover,.top-article>button[aria-expanded=true]{background:var(--card);color:var(--ink)}.top-article-menu{z-index:20;border:1px solid var(--line);background:var(--panel);box-shadow:0 10px 24px var(--shadow);border-radius:8px;gap:2px;padding:4px;display:grid;position:absolute;top:calc(100% + 6px);left:0}.top-article-menu a{color:var(--ink-soft);border-radius:6px;padding:5px 10px;font-size:13px;font-weight:650;text-decoration:none}.top-article-menu a:hover{background:var(--card);color:var(--ink)}.top-theme{border:1px solid var(--line);background:var(--card);border-radius:8px;gap:2px;padding:2px;display:flex}.top-theme button{color:var(--ink-faint);cursor:pointer;letter-spacing:.04em;background:0 0;border:0;border-radius:6px;min-height:24px;padding:3px 9px;font-family:inherit;font-size:11px;font-weight:700}.top-theme button:hover{color:var(--ink)}.top-theme button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-ink)}@media (width<=860px){.top-bar{padding:10px 16px}}.chrome-scroll .ms-bar{border-radius:999px}.chrome-scroll .ms-thumb .scroll-thumb:not(.playground-thumb){corner-shape:bevel;border-radius:20px;width:8px;height:100%}.chrome-scroll .ms-thumb.ms-grabbing .scroll-thumb:not(.playground-thumb){width:10px;margin:0 -1px}.chrome-scroll .scroll-thumb:not(.playground-thumb){color:var(--ink-faint-soft)}.chrome-scroll .ms-bar:hover .scroll-thumb:not(.playground-thumb),.chrome-scroll .ms-thumb.ms-grabbing .scroll-thumb:not(.playground-thumb){color:var(--ink-faint)}.chrome-scroll .ms-edge:not(.ms-disabled) .ms-edge-inner{background:linear-gradient(var(--fade,var(--bg)) 0%, transparent 100%);width:20px}:root{--item-ink:var(--lightningcss-light,#17201f)var(--lightningcss-dark,#e6efec);--tone-0:var(--lightningcss-light,#dff3ef)var(--lightningcss-dark,#14403d);--tone-1:var(--lightningcss-light,#f7e5bf)var(--lightningcss-dark,#43371c);--tone-2:var(--lightningcss-light,#e8e3fb)var(--lightningcss-dark,#322c4c);--tone-3:var(--lightningcss-light,#f5d6cf)var(--lightningcss-dark,#452c27);--tone-4:var(--lightningcss-light,#dceafb)var(--lightningcss-dark,#1e3348);--tone-5:var(--lightningcss-light,#e8f0ce)var(--lightningcss-dark,#2f3a1f)}[morph-scroll].playground-scroll{isolation:isolate;background:var(--card);box-shadow:0 10px 28px var(--shadow)}.playground-scroll .ms-content,.playground-scroll .ms-viewport{border-radius:10px}.playground-scroll .ms-objects-wrapper{align-content:flex-start}.playground-scroll .ms-object-box{transition:opacity .16s,transform .16s}.playground-scroll .ms-object-box:focus{outline:2px solid var(--accent);outline-offset:-2px}.playground-scroll .ms-object-box.remove{opacity:.28;transform:scale(.96)}body.no-select{-webkit-user-select:none;user-select:none}.demo-item{opacity:var(--ms-content-visibility,1);corner-shape:round bevel round round;width:100%;min-width:82px;height:100%;min-height:68px;color:var(--item-ink);border:1px solid #7f8c8940;border-radius:2px 14px 2px 2px;flex-direction:column;justify-content:space-between;padding:11px;display:flex;overflow:hidden}@keyframes item-in{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}.demo-item{animation:.26s ease-in-out item-in}@media (prefers-reduced-motion:reduce){.demo-item{animation:none}}.demo-item header{justify-content:space-between;align-items:center;gap:8px;min-width:0;display:flex}.demo-item b{letter-spacing:0;font-size:17px}.demo-item span{opacity:.7;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:11px;font-weight:750;overflow:hidden}.demo-item p{opacity:.66;margin:8px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}.demo-item.is-wide{padding-inline:14px}.demo-item[ms-custom-drag]{cursor:grab}.demo-item[ms-custom-drag]:active{cursor:grabbing}.demo-item.is-dragging{opacity:.4}.demo-item.is-drop-target{outline:2px solid var(--accent);outline-offset:-2px}.tone-0{background:var(--tone-0)}.tone-1{background:var(--tone-1)}.tone-2{background:var(--tone-2)}.tone-3{background:var(--tone-3)}.tone-4{background:var(--tone-4)}.tone-5{background:var(--tone-5)}.item-action{min-height:26px;color:inherit;background:#7f8c8933;border:0;border-radius:999px;align-self:flex-start;padding:2px 10px;font-size:11px;font-weight:700}.playground-scroll .ms-bar{opacity:var(--ms-bar-visibility,1);background:#7f8c8929;border-radius:999px;transition:opacity .18s,background .18s}.playground-scroll .ms-bar.ms-hover,.playground-scroll .ms-slider.ms-hover{background:var(--accent-soft)}.playground-scroll .ms-thumb{width:10px;min-height:28px;margin-inline:2px;transition:width .1s,margin .1s}.playground-scroll .ms-thumb:active{width:14px;margin-inline:0}.scroll-thumb,.scroll-thumb-frame,.scroll-thumb-shape{width:100%;height:100%;display:block}.scroll-thumb{color:var(--accent);transition:color .18s}.playground-scroll .ms-bar:hover .scroll-thumb,.playground-scroll .ms-thumb.ms-grabbing .scroll-thumb{color:var(--accent-ink)}.playground-scroll .ms-slider{opacity:var(--ms-bar-visibility,1);background:#7f8c892e;border-radius:999px;gap:6px;padding:6px;transition:opacity .18s,background .18s}.playground-scroll .ms-slider-item{background:var(--card);width:28px;height:18px;color:var(--ink);border-radius:999px;place-items:center;font-size:10px;font-weight:800;display:grid}.playground-scroll .ms-slider-item.ms-active{background:var(--accent);color:#fff}.slider-progress-dot{opacity:.55;background:currentColor;border-radius:1px;width:6px;height:6px;transition:opacity .14s,transform .14s;display:block;transform:rotate(45deg)}.playground-scroll .ms-slider-item.ms-active .slider-progress-dot{opacity:1;transform:rotate(45deg)scale(1.35)}.slider-menu-button{width:100%;height:100%;min-height:0;color:inherit;background:0 0;border:0;border-radius:6px;place-items:center;padding:0;font-size:10px;font-weight:800;display:grid}.arrow-mark{background:var(--card);width:100%;height:100%;color:var(--accent-ink);box-shadow:0 2px 8px var(--shadow);border-radius:999px;place-items:center;font-weight:900;transition:opacity .18s;display:grid}.playground-scroll .ms-arrow-box.ms-disabled .arrow-mark{opacity:.25}.playground-scroll .playground-edge{background:linear-gradient(var(--card), transparent);width:100%;height:100%;opacity:var(--ms-edge-visibility,1);transition:opacity .18s}.playground-scroll .ms-edge.ms-disabled .playground-edge{opacity:0}.empty-fallback,.cell-fallback{border:1px dashed var(--line);background:var(--card);width:100%;height:100%;min-height:56px;color:var(--ink-faint);border-radius:8px;place-items:center;font-size:12px;font-weight:750;display:grid}
