:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-surface:#fff;--color-line:#ddd;--color-text:#222;--color-muted:#666;--color-accent:#3223b3;--color-accent-contrast:#fff;--color-surface-hover:color-mix(in oklab, var(--color-surface) 95%, var(--color-text) 5%);--color-surface-muted:color-mix(in oklab, var(--color-line) 20%, var(--color-surface));--color-axis-line:color-mix(in oklab, var(--color-text) 25%, var(--color-line))}*{box-sizing:border-box}html,body{background:#f5f5f5}body{min-height:100vh;color:var(--color-text);margin:0;font-family:sans-serif;font-size:1rem}button,dialog,[popover]{font:inherit}button{appearance:none;color:inherit;white-space:normal;-webkit-user-select:none;user-select:none;background:0 0;border:0}a{color:inherit}.page{width:100%;margin-inline:auto;padding:0}.stage{background:var(--color-surface);border:0;border-radius:0;align-content:center;justify-items:center;gap:16px;min-height:100vh;padding:24px;display:grid}@media (width<=640px){.stage{padding:16px}}.button{border:1px solid var(--color-line);background:var(--color-surface);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;min-height:44px;padding-inline:16px;transition:scale .3s,color .2s,border-color .2s;display:inline-flex}@media (any-hover:hover){.button:hover{color:var(--color-accent);border-color:var(--color-accent)}}.button:active{scale:.98}.surface-card{--surface-radius:18px;border:1px solid var(--color-line);border-radius:var(--surface-radius);background:var(--color-surface);min-width:0}.demo-compare{gap:16px;width:100%;min-width:0;display:grid}.demo-compare>.button{justify-self:end}.demo-replay{gap:8px}.demo-replay .replay-icon{flex:none;place-items:center;width:18px;height:18px;display:grid}.demo-replay .replay-icon:before{content:"";transform-origin:50%;background:currentColor;width:16px;height:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6 0 .34-.03.67-.08 1h2.02c.04-.33.06-.66.06-1 0-4.42-3.58-8-8-8Zm-6 6c0-.34.03-.67.08-1H4.06A8.93 8.93 0 0 0 4 11c0 4.42 3.58 8 8 8v3l4-4-4-4v3c-3.31 0-6-2.69-6-6Z' fill='black'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6 0 .34-.03.67-.08 1h2.02c.04-.33.06-.66.06-1 0-4.42-3.58-8-8-8Zm-6 6c0-.34.03-.67.08-1H4.06A8.93 8.93 0 0 0 4 11c0 4.42 3.58 8 8 8v3l4-4-4-4v3c-3.31 0-6-2.69-6-6Z' fill='black'/%3E%3C/svg%3E") 50%/contain no-repeat}@media (any-hover:hover){.demo-replay:hover .replay-icon:before{animation:.5s replay-spin}}@keyframes replay-spin{to{rotate:-1turn}}.demo-visual{justify-items:center;width:100%;min-width:0;display:grid}.demo-graph-panel{justify-items:center;gap:10px;width:100%;min-width:0;display:grid}.close-button{block-size:40px;inline-size:40px;border-radius:999px;flex:none;place-items:center;min-height:40px;padding:0;display:inline-grid}.close-icon{width:14px;height:14px;transition:rotate .8s var(--spring-bouncy);pointer-events:none;position:relative;rotate:0deg}@media (any-hover:hover){.close-button:hover .close-icon{rotate:90deg}}.close-icon:before,.close-icon:after{content:"";background:currentColor;width:14px;height:2px;position:absolute;top:50%;left:50%;translate:-50% -50%}.close-icon:before{rotate:45deg}.close-icon:after{rotate:-45deg}.row{flex-wrap:wrap;gap:12px;display:flex}