:root{--neutral-50:oklch(98.5% .004 65);--neutral-100:oklch(96.6% .007 65);--neutral-200:oklch(93.5% .011 65);--neutral-300:oklch(88.8% .014 65);--neutral-400:oklch(82.8% .017 65);--neutral-500:oklch(75.2% .019 65);--neutral-600:oklch(64% .019 65);--neutral-700:oklch(54.5% .018 65);--neutral-800:oklch(45.5% .016 65);--neutral-900:oklch(33% .014 65);--neutral-950:oklch(21.5% .012 65);--surface:var(--neutral-50);--text-primary:var(--neutral-900);--text-body:var(--neutral-800);--text-muted:var(--neutral-700);--border:var(--neutral-300);--border-subtle:var(--neutral-200);--ink:var(--neutral-950);--font-display:"Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;--font-text:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--gap-section:5rem;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--surface);color:var(--text-primary);font-family:var(--font-text);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;margin:0;font-size:1rem;line-height:1.6}::selection{background:var(--neutral-200);color:var(--ink)}.type-display{font-family:var(--font-display);letter-spacing:-.025em;color:var(--ink);text-wrap:balance;margin:0;font-size:2.5rem;font-weight:700;line-height:1.1}.type-heading{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;margin:0;font-size:1.5rem;font-weight:700;line-height:1.2}.type-body{font-family:var(--font-text);letter-spacing:0;color:var(--text-body);text-wrap:wrap;margin:0;font-size:1rem;font-weight:400;line-height:1.6}.type-caption{font-family:var(--font-text);letter-spacing:.01em;color:var(--text-muted);font-variant-numeric:tabular-nums;margin:0;font-size:.8125rem;font-weight:400;line-height:1.45}.page{max-width:40rem;margin:0 auto;padding:5rem 1.5rem 9rem}.page--wide{max-width:48rem}.masthead{margin-bottom:var(--gap-section)}.masthead__sub{color:var(--text-muted);margin-top:.875rem}.section+.section,.entries+.section{margin-top:var(--gap-section)}.section__note{color:var(--text-muted);margin-top:.5rem}.entries{gap:var(--gap-section);flex-direction:column;display:flex}.entry__head{margin-bottom:1rem}.entry__title{margin-top:.375rem}.entry__context+.entry__context{margin-top:1rem}.slot{margin:1.75rem 0 0}.slot__frame{border:1px solid var(--border);background:var(--neutral-100);border-radius:.75rem;place-items:center;padding:1rem;display:grid}.slot__label{text-align:center;text-wrap:balance}.demo{flex-wrap:wrap;justify-content:center;align-items:center;gap:3.75rem;min-height:11.25rem;padding:2.25rem 1rem 1.5rem;display:flex}.demo__trigger{flex-direction:column;align-items:center;gap:.75rem;display:flex}.slot__caption{text-align:center;text-wrap:balance;margin-top:.625rem}.toast-viewport{--toast-h:4rem;--toast-gap:.5rem;--toast-enter-ms:.26s;--toast-exit-ms:.26s;--toast-fade-ms:.2s;--toast-expire-ms:.16s;--toast-expire-dip:2rem;--toast-ease:cubic-bezier(.33, 1, .68, 1);z-index:100;width:min(22rem,100vw - 2rem);height:calc(var(--toast-h) * 6 + var(--toast-gap) * 5);pointer-events:none;position:fixed;bottom:1.5rem;right:1.5rem}@media (width<=40rem){.toast-viewport{bottom:1rem;right:1rem}}.toast-stack{margin:0;padding:0;list-style:none}.toast{width:100%;height:var(--toast-h);pointer-events:auto;align-items:center;gap:.5rem;padding:0 .625rem 0 1rem;display:flex}.toast__copy{flex:1;min-width:0}.toast__title,.toast__body{white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}.toast__title{color:var(--ink);font-size:.875rem;font-weight:500;line-height:1.35}.toast__body{color:var(--text-muted);font-size:.8125rem;line-height:1.4}.toast__close{width:1.75rem;height:1.75rem;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;place-items:center;padding:0;transition:background-color .15s ease-out,color .15s ease-out;display:grid}.toast--plain{border:1px solid var(--border);transition:opacity var(--toast-fade-ms) ease-out;background:oklch(100% 0 0);border-radius:.5rem;align-items:flex-start;padding-top:.75rem}.toast--fading{opacity:0;pointer-events:none}.toast--plain .toast__close{margin-top:-.25rem}.toast--rich{border:1px solid var(--border-subtle);background:oklch(100% 0 0);border-radius:.5rem;box-shadow:0 0 0 1px oklch(21.5% .012 65/.02),0 1px 2px oklch(21.5% .012 65/.05),0 6px 16px -4px oklch(21.5% .012 65/.1)}.toast__undo{border:1px solid var(--border);background:var(--neutral-50);height:1.75rem;color:var(--ink);font-family:var(--font-text);cursor:pointer;border-radius:999px;flex:none;padding:0 .75rem;font-size:.8125rem;font-weight:500;transition:background-color .15s ease-out,border-color .15s ease-out}@media (hover:hover){.toast__close:hover{background:var(--neutral-200);color:var(--ink)}.toast__undo:hover{background:var(--neutral-200);border-color:var(--neutral-400)}}.toast__close:focus-visible,.toast__undo:focus-visible{outline:2px solid var(--neutral-600);outline-offset:2px}.toast-stack--static{gap:var(--toast-gap);flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0}.toast-stack--static .toast{flex:none}.toast-stack--animated{position:absolute;inset:0}.toast--animated{--step:calc(var(--toast-h) + var(--toast-gap));translate:0 calc(var(--slot) * var(--step) * -1);transition:translate var(--toast-enter-ms) var(--toast-ease), opacity var(--toast-enter-ms) var(--toast-ease);position:absolute;bottom:0;left:0}@starting-style{.toast--animated{translate:0 var(--toast-h);opacity:0}}.toast--leaving{z-index:-1;opacity:0;pointer-events:none}.toast--exit-close{translate:0 calc(var(--slot) * var(--step) * -1 + var(--toast-h));transition-duration:var(--toast-exit-ms)}.toast--exit-expire{translate:0 calc(var(--slot) * var(--step) * -1 + var(--toast-expire-dip));transition-duration:var(--toast-expire-ms)}.toast--exit-overflow{translate:0 calc((var(--slot) + 1) * var(--step) * -1);transition-duration:var(--toast-enter-ms)}.toast-stack--animated[data-phase=exit] .toast--animated:not(.toast--leaving,.toast--returning){transition-duration:var(--toast-exit-ms)}@starting-style{.toast--animated.toast--returning{translate:0 calc((var(--slot) + 1) * var(--step) * -1);opacity:0}}@media (prefers-reduced-motion:reduce){.toast--animated{transition-property:opacity}@starting-style{.toast--animated{translate:0}}.toast--leaving{translate:0 calc(var(--slot) * var(--step) * -1)}@starting-style{.toast--animated.toast--returning{translate:0 calc(var(--slot) * var(--step) * -1)}}}.demo__button{border:1px solid var(--border);background:var(--neutral-50);height:2.25rem;color:var(--text-primary);font-family:var(--font-text);cursor:pointer;border-radius:999px;padding:0 1.125rem;font-size:.8125rem;font-weight:500}.demo__button:focus-visible{outline:2px solid var(--neutral-600);outline-offset:2px}.verdict{border-radius:50%;place-items:center;width:1.125rem;height:1.125rem;display:grid}.verdict--worse{background:var(--neutral-200);color:var(--neutral-600)}.verdict--better{color:var(--neutral-50);background:oklch(62% .13 150)}.menu-root{position:relative}.menu{z-index:40;transform-origin:0 0;border:1px solid var(--border-subtle);background:oklch(100% 0 0);border-radius:.625rem;width:10.5rem;margin:0;padding:.25rem;list-style:none;position:absolute;top:calc(100% + .375rem);left:0;box-shadow:0 0 0 1px oklch(21.5% .012 65/.02),0 1px 2px oklch(21.5% .012 65/.05),0 6px 16px -4px oklch(21.5% .012 65/.1)}.menu--sub{width:9.5rem;top:-.3125rem;left:calc(100% + .5rem)}.menu--sub[data-place=left]{transform-origin:100% 0;left:auto;right:calc(100% + .5rem)}.menu--sub[data-place=overlap]{top:calc(100% - .25rem);left:1.5rem}.menu[data-place=left]:not(.menu--sub){transform-origin:100% 0;left:auto;right:0}.menu__entry{position:relative}.menu__separator{background:var(--border-subtle);height:1px;margin:.25rem -.25rem}.menu__item{width:100%;height:2rem;color:var(--text-primary);font-family:var(--font-text);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:.375rem;justify-content:space-between;align-items:center;padding:0 .5rem 0 .625rem;font-size:.8125rem;display:flex}.menu__item svg{color:var(--text-muted)}.menu__item--danger{color:oklch(55% .17 27)}.menu__item[data-open],.menu__item:focus-visible{background:var(--neutral-100);outline:none}@media (hover:hover){.menu__item:hover{background:var(--neutral-100)}.menu:has(>li>.menu__item:hover)>li>.menu__item[data-open]:not(:hover){background:0 0}}.toolbar{border:1px solid var(--border-subtle);background:var(--neutral-50);border-radius:999px;gap:.125rem;padding:.25rem;display:flex;position:relative}.toolbar__button{width:2rem;height:2rem;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid}@media (hover:hover){.toolbar__button:hover{background:var(--neutral-100);color:var(--ink)}}.tooltip.tooltip--shared[data-side=top]{bottom:calc(100% + var(--tooltip-offset) - .25rem)}.tooltip.tooltip--shared{transition-property:opacity,scale,translate,left;transition-duration:.1s,.1s,.1s,.15s;transition-timing-function:ease-out}.tooltip.tooltip--shared[data-open]{transition-duration:.15s,.15s,.15s,.15s;transition-timing-function:cubic-bezier(.33,1,.68,1),cubic-bezier(.33,1,.68,1),cubic-bezier(.33,1,.68,1),ease-out}.tooltip.tooltip--shared[data-instant]{transition-duration:0s,0s,0s,.15s}.toolbar__button:focus-visible{outline:2px solid var(--neutral-600);outline-offset:2px}.copy{border:1px solid var(--border);background:var(--neutral-50);width:2.25rem;height:2.25rem;color:var(--text-muted);cursor:pointer;border-radius:.5rem;place-items:center;padding:0;transition-property:background-color,color;transition-duration:.15s;transition-timing-function:ease-out;display:grid}@media (hover:hover){.copy:hover{background:var(--neutral-200);color:var(--ink)}}.copy:focus-visible{outline:2px solid var(--neutral-600);outline-offset:2px}.copy__icon{grid-area:1/1;place-items:center;display:grid}.misc{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1.5rem;margin:2rem 0 0;padding:0;list-style:none;display:grid}.misc__item .slot{margin:0}.misc__note{margin-top:.625rem}.misc__frame{aspect-ratio:4/3}.check{color:var(--text-primary);font-family:var(--font-text);cursor:pointer;background:0 0;border:0;align-items:center;gap:.5rem;padding:0;font-size:.875rem;display:inline-flex}.check__box{border:1px solid var(--neutral-400);background:var(--neutral-50);width:1.125rem;height:1.125rem;color:var(--neutral-50);border-radius:.3125rem;place-items:center;transition:background-color .15s ease-out,border-color .15s ease-out;display:grid}.check[aria-checked=true] .check__box{border-color:var(--ink);background:var(--ink)}.check:focus-visible{outline:none}.check:focus-visible .check__box{outline:2px solid var(--neutral-600);outline-offset:2px}.tooltip-anchor{flex:none;display:inline-flex;position:relative}.tooltip{--tooltip-offset:.5rem;z-index:50;background:var(--ink);color:var(--neutral-50);font-family:var(--font-text);letter-spacing:.01em;white-space:nowrap;pointer-events:none;opacity:0;border-radius:.375rem;padding:.25rem .5rem;font-size:.75rem;font-weight:500;line-height:1.4;transition:opacity .1s ease-out,scale .1s ease-out,translate .1s ease-out;position:absolute;left:50%;scale:.96;box-shadow:0 1px 2px oklch(21.5% .012 65/.12),0 4px 12px -2px oklch(21.5% .012 65/.16)}.tooltip[data-side=top]{bottom:calc(100% + var(--tooltip-offset));transform-origin:50% 100%;translate:-50% 2px}.tooltip[data-side=bottom]{top:calc(100% + var(--tooltip-offset));transform-origin:50% 0;translate:-50% -2px}.tooltip[data-open]{opacity:1;transition-duration:.15s;transition-timing-function:cubic-bezier(.33,1,.68,1);translate:-50%;scale:1}.tooltip[data-instant]{transition-duration:0s}.tooltip[data-variant=scale]{transition:opacity .16s,scale .16s,translate .16s;scale:.8}.tooltip[data-variant=scale][data-open]{scale:1}@media (prefers-reduced-motion:reduce){.tooltip,.tooltip[data-side]{transition-property:opacity;translate:-50%;scale:1}}