@layer reset,tokens,theme,base,layout,components,utilities;@font-face{font-family:pixelify sans;src:url(/static/fonts/pixelify-sans.e2dcbbba37b0.woff2)format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+20-7E,U+A0-BF,U+D7,U+F7,U+2010-2014,U+2018-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2190-2193,U+2212,U+2248,U+2260,U+2264-2265,U+2500,U+2502,U+250C,U+2510,U+2514,U+2518,U+251C,U+2524,U+252C,U+2534,U+253C}@font-face{font-family:jetbrains mono;src:url(/static/fonts/jetbrains-mono.e794f4344660.woff2)format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+20-7E,U+A0-BF,U+D7,U+F7,U+2010-2014,U+2018-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2190-2193,U+2212,U+2248,U+2260,U+2264-2265,U+2500,U+2502,U+250C,U+2510,U+2514,U+2518,U+251C,U+2524,U+252C,U+2534,U+253C}@property --lith-seam-glow{syntax: "<number>";
	inherits: true;
	initial-value: 0.7;
}@property --lith-sweep{syntax: "<percentage>";
	inherits: false;
	initial-value: -30%;
}@layer tokens{:root{--lith-stone-0:oklch(98.5% 0.003 80);--lith-stone-1:oklch(95.5% 0.005 75);--lith-stone-2:oklch(90.5% 0.007 75);--lith-stone-3:oklch(83% 0.009 72);--lith-stone-4:oklch(72% 0.011 70);--lith-stone-5:oklch(62% 0.012 68);--lith-stone-6:oklch(51% 0.012 66);--lith-stone-7:oklch(42% 0.011 64);--lith-stone-8:oklch(34% 0.01 62);--lith-stone-9:oklch(27.5% 0.009 60);--lith-stone-10:oklch(23% 0.008 60);--lith-stone-11:oklch(19.5% 0.007 60);--lith-stone-12:oklch(16.5% 0.006 60);--lith-stone-13:oklch(13.5% 0.005 60);--lith-paper:oklch(97.5% 0.004 78);--lith-paper-raised:oklch(99.3% 0.002 80);--lith-paper-inset:oklch(95% 0.006 75);--lith-ember-1:oklch(95% 0.044 80);--lith-ember-2:oklch(90% 0.085 78);--lith-ember-3:oklch(85% 0.12 74);--lith-ember-4:oklch(80% 0.15 68);--lith-ember-5:oklch(74% 0.165 60);--lith-ember-6:oklch(66% 0.162 52);--lith-ember-7:oklch(58% 0.155 46);--lith-ember-8:oklch(50% 0.145 42);--lith-ember-9:oklch(41% 0.125 40);--lith-ember-10:oklch(30% 0.09 42);--lith-red-dark:oklch(50% 0.17 25);--lith-red-light:oklch(72% 0.15 25);--lith-green-dark:oklch(48% 0.11 150);--lith-green-light:oklch(80% 0.12 150);--lith-sage-dark:oklch(46% 0.08 145);--lith-sage-light:oklch(82% 0.06 140);--lith-gold-dark:oklch(50% 0.1 70);--lith-gold-light:oklch(88% 0.09 85);--lith-space-1:0.25rem;--lith-space-2:0.5rem;--lith-space-3:0.75rem;--lith-space-4:1rem;--lith-space-5:1.25rem;--lith-space-6:1.5rem;--lith-space-8:2rem;--lith-space-10:2.5rem;--lith-space-12:3rem;--lith-space-16:4rem;--lith-space-20:5rem;--lith-space-24:6rem;--lith-font-display:"Pixelify Sans", ui-monospace, monospace;--lith-font-body:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--lith-font-code:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--lith-font-ui:var(--lith-font-code);--lith-text-xs:0.75rem;--lith-text-sm:0.875rem;--lith-text-md:1rem;--lith-text-lg:1.125rem;--lith-text-xl:clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);--lith-text-2xl:clamp(1.5rem, 1.2rem + 1.2vw, 2rem);--lith-text-3xl:clamp(2rem, 1.3rem + 2.8vw, 3.25rem);--lith-text-4xl:clamp(2.75rem, 1.6rem + 5vw, 5.5rem);--lith-leading-tight:1.08;--lith-leading-snug:1.3;--lith-leading-normal:1.6;--lith-tracking-caps:0.08em;--lith-notch:1;--lith-frame-step:3px;--lith-radius-sm:6px;--lith-radius-md:9px;--lith-radius-lg:14px;--lith-dur-1:120ms;--lith-dur-2:200ms;--lith-dur-3:320ms;--lith-dur-4:460ms;--lith-dur-5:640ms;--lith-ease-glide:cubic-bezier(0.22, 1, 0.36, 1);--lith-ease-zoom:cubic-bezier(0.16, 1, 0.3, 1);--lith-ease-reveal:cubic-bezier(0.65, 0, 0.35, 1);--lith-ease-snap:cubic-bezier(0.2, 0, 0, 1);--lith-ease-exit:cubic-bezier(0.4, 0, 1, 1);--lith-ease-steps:steps(4, end);--lith-z-raised:1;--lith-z-sticky:10;--lith-z-overlay:40;--lith-z-tooltip:70;--lith-content-max:76rem;--lith-prose-max:44rem;--lith-header-height:3.75rem;--lith-control-height:2.5rem}}@layer theme{:root{color-scheme:dark;--lith-bg:light-dark(var(--lith-paper), var(--lith-stone-12));--lith-bg-glow:light-dark(oklch(91% 0.06 70 / 0.55), oklch(42% 0.12 52 / 0.24));--lith-surface-1:light-dark(var(--lith-paper-raised), var(--lith-stone-11));--lith-surface-2:light-dark(var(--lith-stone-1), var(--lith-stone-10));--lith-surface-inset:light-dark(var(--lith-paper-inset), var(--lith-stone-13));--lith-surface-hover:light-dark(var(--lith-stone-1), var(--lith-stone-9));--lith-surface-overlay:light-dark(oklch(99.3% 0.002 80 / 0.92), oklch(19.5% 0.007 60 / 0.92));--lith-border:light-dark(var(--lith-stone-3), var(--lith-stone-8));--lith-border-subtle:light-dark(var(--lith-stone-2), var(--lith-stone-9));--lith-border-strong:light-dark(var(--lith-stone-4), var(--lith-stone-7));--lith-text-1:light-dark(var(--lith-stone-11), var(--lith-stone-1));--lith-text-2:light-dark(var(--lith-stone-8), var(--lith-stone-3));--lith-text-muted:light-dark(var(--lith-stone-6), var(--lith-stone-4));--lith-accent:var(--lith-ember-5);--lith-accent-strong:light-dark(var(--lith-ember-6), var(--lith-ember-4));--lith-accent-text:light-dark(var(--lith-ember-8), var(--lith-ember-4));--lith-accent-edge:light-dark(var(--lith-ember-8), var(--lith-ember-5));--lith-accent-subtle:light-dark(oklch(74% 0.165 60 / 0.14), oklch(74% 0.165 60 / 0.12));--lith-on-accent:var(--lith-stone-12);--lith-glow-color:light-dark(oklch(74% 0.165 60 / 0.35), oklch(74% 0.165 60 / 0.5));--lith-danger:light-dark(var(--lith-red-dark), var(--lith-red-light));--lith-danger-subtle:light-dark(oklch(50% 0.17 25 / 0.08), oklch(72% 0.15 25 / 0.12));--lith-ok:light-dark(var(--lith-green-dark), var(--lith-green-light));--lith-focus:light-dark(var(--lith-ember-8), var(--lith-ember-4));--lith-selection:oklch(74% 0.165 60 / 0.32);--lith-shadow-1:0 1px 2px light-dark(oklch(30% 0.01 60 / 0.12), oklch(0% 0 0 / 0.4));--lith-shadow-2:0 10px 30px -12px light-dark(oklch(30% 0.01 60 / 0.25), oklch(0% 0 0 / 0.7));--lith-shadow-overlay:0 18px 48px -12px light-dark(oklch(30% 0.01 60 / 0.3), oklch(0% 0 0 / 0.75));--lith-code-bg:var(--lith-surface-inset);--lith-code-text:light-dark(var(--lith-stone-9), var(--lith-stone-2));--lith-code-keyword:light-dark(var(--lith-ember-8), var(--lith-ember-4));--lith-code-function:light-dark(var(--lith-stone-11), var(--lith-stone-0));--lith-code-tag:light-dark(var(--lith-ember-8), var(--lith-ember-3));--lith-code-string:light-dark(var(--lith-sage-dark), var(--lith-sage-light));--lith-code-number:light-dark(var(--lith-gold-dark), var(--lith-gold-light));--lith-code-comment:light-dark(var(--lith-stone-6), var(--lith-stone-5));--lith-art-seam-core:var(--lith-ember-1);--lith-art-seam:var(--lith-ember-5);--lith-art-seam-edge:var(--lith-ember-7)}[data-lith-theme=light]{color-scheme:light}[data-lith-theme=system]{color-scheme:light dark}[data-lith-style=smooth]{--lith-notch:0;--lith-frame-step:1px;--lith-font-display:var(--lith-font-body)}}@layer theme{:root{--sb-bg:var(--lith-bg);--sb-bg-glow:var(--lith-bg-glow);--sb-surface-raised:var(--lith-surface-1);--sb-surface-card:var(--lith-surface-1);--sb-surface-inset:var(--lith-surface-inset);--sb-surface-hover:var(--lith-surface-hover);--sb-surface-overlay:light-dark(oklch(30% 0.01 60 / 0.35), oklch(9% 0.005 60 / 0.62));--sb-border:var(--lith-border);--sb-border-subtle:var(--lith-border-subtle);--sb-border-strong:var(--lith-border-strong);--sb-text-1:var(--lith-text-1);--sb-text-2:var(--lith-text-2);--sb-text-muted:var(--lith-text-muted);--sb-text-on-brand:var(--lith-on-accent);--sb-text-on-danger:light-dark(var(--lith-stone-0), var(--lith-stone-12));--sb-brand:var(--lith-accent);--sb-brand-hover:var(--lith-accent-strong);--sb-brand-light:var(--lith-accent-text);--sb-brand-subtle:var(--lith-accent-subtle);--sb-accent:var(--lith-accent);--sb-datastar:var(--lith-ok);--sb-ok:var(--lith-ok);--sb-ok-subtle:color-mix(in oklch, var(--lith-ok) 14%, transparent);--sb-warn:var(--lith-accent-text);--sb-warn-subtle:var(--lith-accent-subtle);--sb-danger:var(--lith-danger);--sb-danger-subtle:var(--lith-danger-subtle);--sb-info:var(--lith-text-2);--sb-info-subtle:color-mix(in oklch, var(--lith-text-2) 12%, transparent);--sb-control-bg:var(--lith-surface-inset);--sb-control-border:var(--lith-border);--sb-control-border-hover:var(--lith-border-strong);--sb-control-text:var(--lith-text-1);--sb-control-placeholder:var(--lith-text-muted);--sb-control-radius:calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));--sb-radius:calc(var(--lith-radius-md) * (1 - var(--lith-notch)));--sb-frame-color:var(--lith-accent);--sb-glow-brand:0 0 0 1px var(--lith-accent-edge), 0 8px 28px -10px var(--lith-glow-color);--sb-focus-ring:0 0 0 2px var(--lith-bg), 0 0 0 4px var(--lith-focus);--sb-selection:var(--lith-selection);--sb-shadow-overlay:0 16px 32px light-dark(oklch(30% 0.01 60 / 0.28), oklch(0% 0 0 / 0.7));--sb-code-keyword:var(--lith-code-keyword);--sb-code-function:var(--lith-code-function);--sb-code-tag:var(--lith-code-tag);--sb-code-string:var(--lith-code-string);--sb-code-number:var(--lith-code-number);--sb-font-display:var(--lith-font-display);--sb-font-ui:var(--lith-font-ui);--sb-font-body:var(--lith-font-body);--sb-font-heading:var(--lith-font-body);--sb-display-case:none;--sb-notch:var(--lith-notch);--sb-frame-step:var(--lith-frame-step);--sb-z-sticky:var(--lith-z-sticky);--sb-z-overlay:var(--lith-z-overlay);--sb-z-toast:60;--sb-z-tooltip:var(--lith-z-tooltip)}}@layer components{sb-drawer:not(:defined),sb-toast:not(:defined),sb-popover:not(:defined){display:none}sb-tabs:not(:defined){display:block;& > [slot]:not(:first-of-type){display:none}}}@layer reset{*,*::before,*::after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:none;text-size-adjust:none;interpolate-size:allow-keywords}body{min-block-size:100dvh;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-inline-size:100%}input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul[role=list],ol[role=list]{list-style:none;padding:0}:where(a){color:inherit}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}}@layer base{html{background:var(--lith-bg);color:var(--lith-text-1);scrollbar-color:var(--lith-border)var(--lith-bg);scroll-padding-block-start:calc(var(--lith-header-height) + var(--lith-space-6));accent-color:var(--lith-accent)}body{background:radial-gradient(64rem 28rem at 78% -6rem,var(--lith-bg-glow),transparent 70%),var(--lith-bg);font-family:var(--lith-font-body);font-size:var(--lith-text-md);line-height:var(--lith-leading-normal)}::selection{background:var(--lith-selection);color:var(--lith-text-1)}h1,h2,h3,h4{line-height:var(--lith-leading-snug);text-wrap:balance;font-weight:650;color:var(--lith-text-1)}p,li,dd,figcaption{text-wrap:pretty}a{color:var(--lith-accent-text);text-decoration-color:color-mix(in oklch,currentColor 45%,transparent);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--lith-dur-1)var(--lith-ease-snap),text-decoration-color var(--lith-dur-1)var(--lith-ease-snap);&:hover{text-decoration-color:initial}}:focus-visible{outline:2px solid var(--lith-focus);outline-offset:2px}code,kbd,samp,pre{font-family:var(--lith-font-code);font-size:.86em;font-variant-ligatures:none}:not(pre)>code{padding:.08em .36em;border-radius:4px;background:var(--lith-surface-inset);box-shadow:inset 0 0 0 1px var(--lith-border-subtle);color:var(--lith-text-1);overflow-wrap:break-word}kbd{padding:.05em .4em;border:1px solid var(--lith-border);border-block-end-width:2px;border-radius:4px;background:var(--lith-surface-2);font-size:var(--lith-text-xs)}hr{border:0;border-block-start:1px solid var(--lith-border-subtle)}img{block-size:auto}[hidden]{display:none!important}}@layer layout{.site{display:grid;grid-template-rows:auto 1fr auto;min-block-size:100dvh}.site-main{container:page/inline-size;display:flex;flex-direction:column;min-inline-size:0}.site-update{position:fixed;inset-block-end:var(--lith-space-4);inset-inline:var(--lith-space-4);z-index:var(--lith-z-sticky);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--lith-space-3);margin:0;padding:var(--lith-space-3)var(--lith-space-4);background:var(--lith-surface-2);border:1px solid var(--lith-border-strong);color:var(--lith-text-1)}.site-update:empty{display:none}.wrap{--_gutter:clamp(var(--lith-space-4), 4vw, var(--lith-space-8));inline-size:min(100% - 2 * var(--_gutter),var(--lith-content-max));margin-inline:auto}.stack{display:flex;flex-direction:column;gap:var(--gap,var(--lith-space-4))}.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,var(--lith-space-3))}.docs{container:docs/inline-size;display:grid;grid-template-columns:15rem minmax(0,1fr)13rem;grid-template-areas:"nav article toc";gap:var(--lith-space-10);align-items:start;padding-block:var(--lith-space-8)var(--lith-space-16);@container page (width < 72rem){grid-template-columns: 14rem minmax(0, 1fr);
			grid-template-areas: "nav article";
			gap: var(--lith-space-8);
		}@container page (width < 52rem){grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "article";
		}}.demo-body{container:demo-body/inline-size;display:grid;grid-template-columns:minmax(0,1.55fr)minmax(16rem,1fr);gap:var(--lith-space-6);align-items:start;@container page (width < 60rem){grid-template-columns: minmax(0, 1fr);
		}}}@layer components{.notched{--_n:calc(3px * var(--lith-notch));clip-path:polygon(var(--_n) 0,calc(100% - var(--_n)) 0,calc(100% - var(--_n)) var(--_n),100% var(--_n),100% calc(100% - var(--_n)),calc(100% - var(--_n)) calc(100% - var(--_n)),calc(100% - var(--_n)) 100%,var(--_n) 100%,var(--_n) calc(100% - var(--_n)),0 calc(100% - var(--_n)),0 var(--_n),var(--_n) var(--_n));border-radius:calc(var(--lith-radius-sm) * (1 - var(--lith-notch)))}.btn{--_bg:var(--lith-surface-2);--_fg:var(--lith-text-1);--_edge:var(--lith-border-strong);--_n:calc(3px * var(--lith-notch));display:inline-flex;align-items:center;justify-content:center;gap:var(--lith-space-2);min-block-size:var(--lith-control-height);padding:0 var(--lith-space-5);border:1px solid var(--_edge);border-radius:calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));clip-path:polygon(var(--_n) 0,calc(100% - var(--_n)) 0,calc(100% - var(--_n)) var(--_n),100% var(--_n),100% calc(100% - var(--_n)),calc(100% - var(--_n)) calc(100% - var(--_n)),calc(100% - var(--_n)) 100%,var(--_n) 100%,var(--_n) calc(100% - var(--_n)),0 calc(100% - var(--_n)),0 var(--_n),var(--_n) var(--_n));background:var(--_bg);color:var(--_fg);font-family:var(--lith-font-ui);font-size:var(--lith-text-sm);font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--lith-dur-1)var(--lith-ease-snap),border-color var(--lith-dur-1)var(--lith-ease-snap),translate var(--lith-dur-1)var(--lith-ease-snap);& svg{inline-size:1.1em;block-size:1.1em;flex:none}&:hover{--_bg:var(--lith-surface-hover);--_edge:var(--lith-text-muted);translate:0 -1px}&:active{translate:0 1px}&:focus-visible{outline:2px solid var(--lith-focus);outline-offset:-5px}}.btn--primary{--_bg:var(--lith-accent);--_fg:var(--lith-on-accent);--_edge:var(--lith-accent-edge);background-image:linear-gradient(105deg,transparent calc(var(--lith-sweep) - 18%),oklch(100% 0 0/.38) var(--lith-sweep),transparent calc(var(--lith-sweep) + 18%));&:hover{--_bg:var(--lith-accent-strong);--_edge:var(--lith-accent-edge);animation:sweep 900ms var(--lith-ease-glide)}&:focus-visible{outline-color:var(--lith-on-accent)}}@keyframes sweep{from{--lith-sweep:-20%}to{--lith-sweep:120%}}.btn--ghost{--_bg:transparent;--_edge:transparent}.btn--sm{min-block-size:2rem;padding-inline:var(--lith-space-3);font-size:var(--lith-text-xs)}.btn[aria-busy=true]{cursor:progress;opacity:.75;&::after{content:"";inline-size:6px;block-size:6px;background:currentColor;animation:busy .8s steps(4,end)infinite}}@keyframes busy{0%{translate:0 -3px}25%{translate:3px 0}50%{translate:0 3px}75%{translate:-3px 0}}.icon-btn{display:inline-grid;place-items:center;inline-size:2.25rem;block-size:2.25rem;padding:0;border:0;border-radius:var(--lith-radius-sm);background:0 0;color:var(--lith-text-2);cursor:pointer;transition:color var(--lith-dur-1)var(--lith-ease-snap),background-color var(--lith-dur-1)var(--lith-ease-snap);& svg{inline-size:1.25rem;block-size:1.25rem}&:hover{color:var(--lith-text-1);background:var(--lith-surface-hover)}}.field{display:grid;gap:var(--lith-space-1);& > span{color:var(--lith-text-2);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);font-weight:600;letter-spacing:.02em;transition:color var(--lith-dur-1)var(--lith-ease-snap)}&:has(:focus-visible) > span{color:var(--lith-accent-text)}&:has(:user-invalid) > span{color:var(--lith-danger)}}.input{--_n:calc(3px * var(--lith-notch));inline-size:100%;min-block-size:var(--lith-control-height);padding:var(--lith-space-2)var(--lith-space-3);border:1px solid var(--lith-border);border-radius:calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));clip-path:polygon(var(--_n) 0,calc(100% - var(--_n)) 0,calc(100% - var(--_n)) var(--_n),100% var(--_n),100% calc(100% - var(--_n)),calc(100% - var(--_n)) calc(100% - var(--_n)),calc(100% - var(--_n)) 100%,var(--_n) 100%,var(--_n) calc(100% - var(--_n)),0 calc(100% - var(--_n)),0 var(--_n),var(--_n) var(--_n));background:var(--lith-surface-inset);color:var(--lith-text-1);transition:border-color var(--lith-dur-1)var(--lith-ease-snap),background-color var(--lith-dur-1)var(--lith-ease-snap);&::placeholder{color:var(--lith-text-muted)}&:hover{border-color:var(--lith-border-strong)}&:focus-visible{border-color:var(--lith-accent-edge);outline:2px solid var(--lith-focus);outline-offset:-4px}&[readonly]{color:var(--lith-text-2);border-style:dashed}&:user-invalid{border-color:var(--lith-danger)}}textarea.input{resize:vertical;min-block-size:5.5rem;line-height:1.5}.outcome{min-block-size:1.5em;color:var(--lith-text-2);font-size:var(--lith-text-sm);&.is-refused, &.is-problem{color:var(--lith-danger)}&:empty{display:none}}}@layer components{.skip-link{position:absolute;inset-block-start:var(--lith-space-2);inset-inline-start:var(--lith-space-2);z-index:calc(var(--lith-z-sticky) + 1);padding:var(--lith-space-2)var(--lith-space-3);background:var(--lith-accent);color:var(--lith-on-accent);font-weight:600;translate:0 -200%;&:focus-visible{translate:0 0}}.site-header{container:header/inline-size;position:sticky;inset-block-start:0;z-index:var(--lith-z-sticky);border-block-end:1px solid var(--lith-border-subtle);background:color-mix(in oklch,var(--lith-bg) 84%,transparent);backdrop-filter:blur(12px)saturate(1.2);view-transition-name:site-header}.site-header__inner{display:flex;align-items:center;gap:var(--lith-space-6);block-size:var(--lith-header-height)}.brand{display:inline-flex;align-items:center;gap:var(--lith-space-3);color:var(--lith-text-1);text-decoration:none;& .brand__logo{inline-size:auto;block-size:2.25rem;view-transition-name:logo;filter:drop-shadow(0 0 calc(var(--lith-seam-glow) * 10px) var(--lith-glow-color));animation:breathe 6s ease-in-out infinite alternate}& .brand__word{font-family:var(--lith-font-display);font-size:1.65rem;font-weight:600;line-height:1;letter-spacing:.02em}&:hover .brand__logo{--lith-seam-glow:1}}@keyframes breathe{from{--lith-seam-glow:0.45}to{--lith-seam-glow:1}}.px-art{& .halo{opacity:calc(.25 + var(--lith-seam-glow) * .75)}& .seam{opacity:calc(.8 + var(--lith-seam-glow) * .2)}}.menu-button{display:none;order:-1;margin-inline-start:calc(-1 * var(--lith-space-2));@container header (width < 34rem){display: inline-grid;
		}}.site-nav{display:flex;align-items:center;gap:var(--lith-space-1);margin-inline-start:auto;@container header (width < 34rem){display: none;
		}& a{position:relative;padding:var(--lith-space-2)var(--lith-space-3);color:var(--lith-text-2);font-family:var(--lith-font-ui);font-size:var(--lith-text-sm);font-weight:600;text-decoration:none;&::after{content:"";position:absolute;inset-inline:var(--lith-space-3);inset-block-end:-3px;block-size:3px;background:var(--lith-accent);scale:0 1;transform-origin:left;transition:scale var(--lith-dur-3)var(--lith-ease-glide)}&:hover{color:var(--lith-text-1)}&[aria-current=page]{color:var(--lith-text-1);&::after{scale:1 1}}}}.prefs-button{@container header (width < 34rem){margin-inline-start: auto;
		}}.menu-drawer{--sb-drawer-size:min(20rem, 86vw);&::part(heading){font-family:var(--lith-font-display);font-size:1.5rem;font-weight:600}}.menu-drawer__nav{display:grid;gap:var(--lith-space-1);margin-block-end:var(--lith-space-6);padding-block-end:var(--lith-space-4);border-block-end:1px solid var(--lith-border-subtle);& a{padding:var(--lith-space-2)var(--lith-space-3);color:var(--lith-text-1);font-family:var(--lith-font-ui);font-weight:600;text-decoration:none;&[aria-current=page]{box-shadow:inset 3px 0 0 var(--lith-accent);background:var(--lith-accent-subtle)}}}.prefs-button{anchor-name:--prefs}.menu{--_s:var(--lith-frame-step);position:fixed;position-anchor:--prefs;position-area:block-end span-inline-start;position-try-fallbacks:flip-block,flip-inline;margin:var(--lith-space-3)0 0;inset:auto;min-inline-size:15rem;padding:var(--lith-space-3);border:0;border-radius:calc(var(--lith-radius-md) * (1 - var(--lith-notch)));background:var(--lith-surface-1);color:var(--lith-text-1);box-shadow:0 calc(-1 * var(--_s))0 0 var(--lith-border-strong),0 var(--_s)0 0 var(--lith-border-strong),calc(-1 * var(--_s))0 0 0 var(--lith-border-strong),var(--_s)0 0 0 var(--lith-border-strong),var(--lith-shadow-overlay);opacity:0;translate:0 -.4rem;transition:opacity var(--lith-dur-2)var(--lith-ease-glide),translate var(--lith-dur-2)var(--lith-ease-glide),display var(--lith-dur-2)allow-discrete,overlay var(--lith-dur-2)allow-discrete;&:popover-open{opacity:1;translate:0 0;@starting-style{opacity: 0;
				translate: 0 -0.4rem;
			}}}.menu__group{display:grid;gap:var(--lith-space-2);& + &{margin-block-start:var(--lith-space-4)}}.menu__label{color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);letter-spacing:var(--lith-tracking-caps);text-transform:uppercase}.choice{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;border-radius:calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));background:var(--lith-surface-inset);& button{display:inline-flex;align-items:center;justify-content:center;gap:var(--lith-space-1);padding:var(--lith-space-2);border:0;border-radius:calc(4px * (1 - var(--lith-notch)));background:0 0;color:var(--lith-text-2);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);font-weight:600;cursor:pointer;& svg{inline-size:1rem;block-size:1rem}&:hover{color:var(--lith-text-1)}&[aria-pressed=true]{background:var(--lith-surface-2);color:var(--lith-text-1);box-shadow:inset 0 -2px 0 var(--lith-accent)}}}.tip{anchor-name:--tip;anchor-scope:--tip;text-decoration:underline dotted color-mix(in oklch,currentColor 55%,transparent);text-underline-offset:.25em;cursor:help}.tip__bubble{position:absolute;position-anchor:--tip;position-area:block-start;position-try-fallbacks:flip-block;z-index:var(--lith-z-tooltip);inline-size:max-content;max-inline-size:18rem;margin-block:var(--lith-space-2);padding:var(--lith-space-2)var(--lith-space-3);border-radius:calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));background:var(--lith-text-1);color:var(--lith-bg);font-family:var(--lith-font-body);font-size:var(--lith-text-xs);font-weight:500;line-height:1.45;letter-spacing:normal;text-align:start;text-transform:none;box-shadow:var(--lith-shadow-2);pointer-events:none;opacity:0;translate:0 .25rem;transition:opacity var(--lith-dur-2)var(--lith-ease-glide),translate var(--lith-dur-2)var(--lith-ease-glide)}.tip:is(:hover,:focus-visible) .tip__bubble{opacity:1;translate:0 0;transition-delay:120ms}@supports not (anchor-name:--tip){.tip__bubble{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}}.site-footer{margin-block-start:var(--lith-space-16);border-block-start:1px solid var(--lith-border-subtle);color:var(--lith-text-muted);font-size:var(--lith-text-sm);& .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--lith-space-4)var(--lith-space-8);padding-block:var(--lith-space-8)}& a{color:var(--lith-text-2)}& nav{display:flex;flex-wrap:wrap;gap:var(--lith-space-2)var(--lith-space-5)}}.site-footer__about{display:flex;align-items:center;gap:var(--lith-space-3);& svg{block-size:1.75rem;inline-size:auto}}}@layer components{.hero{container:hero/inline-size;position:relative;isolation:isolate;overflow:clip;padding-block:var(--lith-space-12)var(--lith-space-16);border-block-end:1px solid var(--lith-border-subtle)}.hero__party{container:party/size;position:absolute;inset:0;z-index:0;pointer-events:none;& > *{pointer-events:auto}}.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr)minmax(0,.75fr);align-items:center;gap:var(--lith-space-10);pointer-events:none;& :is(a, button, input, [tabindex]){pointer-events:auto}@container hero (width < 46rem){grid-template-columns: minmax(0, 1fr) auto;
			column-gap: var(--lith-space-4);
			row-gap: 0;

			& > .hero__copy {
				display: contents;
			}

			& > .hero__copy > :not(.acrostic) {
				grid-column: 1 / -1;
			}

			& > .hero__copy > .acrostic {
				grid-column: 1;
			}
		}}.eyebrow{color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);letter-spacing:var(--lith-tracking-caps);text-transform:uppercase}.acrostic{display:grid;gap:.1em;margin-block:var(--lith-space-4)var(--lith-space-6);font-family:var(--lith-font-display);font-size:clamp(2.2rem,1.2rem + 4.2cqi,4.4rem);font-weight:600;line-height:1;letter-spacing:.01em;& > span{display:grid;justify-self:start;grid-template-columns:.78em auto;align-items:baseline;opacity:1}& b{color:var(--lith-accent);text-shadow:0 0 .45em var(--lith-glow-color)}& i{font-style:normal;color:var(--lith-text-1);font-size:.62em}}.hero__lede{max-inline-size:36rem;color:var(--lith-text-2);font-size:var(--lith-text-lg);line-height:1.55}.hero__actions{margin-block-start:var(--lith-space-8);--gap:var(--lith-space-3)}.hero__art{position:relative;display:grid;justify-items:center;@container hero (width < 46rem){grid-column: 2;
			grid-row: 2;
			align-self: center;
		}@container hero (width < 22rem){display: none;
		}& svg{inline-size:auto;block-size:clamp(18rem,34cqi,30rem);@container hero (width < 46rem){block-size: clamp(9rem, 30cqi, 14rem);
			}filter:drop-shadow(0 0 calc(var(--lith-seam-glow) * 36px) var(--lith-glow-color));animation:breathe 6s ease-in-out infinite alternate}}.embers{position:absolute;inset:0;pointer-events:none;& i{position:absolute;inset-block-end:12%;inset-inline-start:calc(50% + var(--x));inline-size:4px;block-size:4px;background:var(--lith-accent);box-shadow:0 0 8px var(--lith-glow-color);opacity:0;animation:ember var(--d,7s)steps(28,end)var(--delay,0s)infinite}}@keyframes ember{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:var(--drift,12px)-22rem}}@media(prefers-reduced-motion:no-preference){.acrostic>span{animation:rise var(--lith-dur-5)var(--lith-ease-glide)both;animation-delay:calc(var(--i) * 90ms + 80ms)}.hero__lede,.hero__actions{animation:rise var(--lith-dur-5)var(--lith-ease-glide)480ms both}}@keyframes rise{from{opacity:0;translate:0 .6rem;filter:blur(3px)}}.section{padding-block:var(--lith-space-16)0}.section__head{display:grid;gap:var(--lith-space-2);max-inline-size:46rem;margin-block-end:var(--lith-space-8);& h2{font-family:var(--lith-font-display);font-size:var(--lith-text-3xl);font-weight:600;line-height:var(--lith-leading-tight);letter-spacing:.01em}& p{color:var(--lith-text-2);font-size:var(--lith-text-lg)}}.ideas{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--lith-space-6)}.idea{container:idea/inline-size;display:grid;grid-template-columns:minmax(0,1fr)minmax(0,1.15fr);gap:var(--lith-space-8);align-items:center;padding:var(--lith-space-8);border:1px solid var(--lith-border-subtle);border-radius:calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));background:color-mix(in oklch,var(--lith-surface-1) 70%,transparent);@container page (width < 56rem){grid-template-columns: minmax(0, 1fr);
			padding: var(--lith-space-6);
		}}.idea__text{display:grid;gap:var(--lith-space-3);align-content:start;& h3{display:flex;align-items:baseline;gap:var(--lith-space-3);font-family:var(--lith-font-display);font-size:var(--lith-text-2xl);font-weight:600}& p{color:var(--lith-text-2)}& a{justify-self:start;font-family:var(--lith-font-ui);font-size:var(--lith-text-sm);font-weight:600}}.idea__letter{display:inline-grid;place-items:center;inline-size:2.4rem;block-size:2.4rem;background:var(--lith-accent-subtle);color:var(--lith-accent-text);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--lith-accent) 45%,transparent)}.idea__slot{container:slot/inline-size;min-inline-size:0;& .code{margin:0}}.landing-more{display:contents}.band{--band:raised;margin-block-start:var(--lith-space-16);padding-block:var(--lith-space-12);border-block:1px solid var(--lith-border-subtle);background:var(--lith-surface-1);& .section{padding-block-start:0}}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lith-space-4);@container page (width < 60rem){grid-template-columns: repeat(2, minmax(0, 1fr));
		}@container page (width < 36rem){grid-template-columns: minmax(0, 1fr);
		}}.stat{display:grid;gap:var(--lith-space-2);align-content:start;padding:var(--lith-space-5);border:1px solid var(--lith-border-subtle);border-radius:calc(var(--lith-radius-md) * (1 - var(--lith-notch)));background:var(--lith-surface-1);& dd{order:-1;margin:0;color:var(--lith-accent-text);font-family:var(--lith-font-code);font-size:var(--lith-text-2xl);font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}& dt{color:var(--lith-text-2);font-size:var(--lith-text-sm)}& small{display:block;margin-block-start:var(--lith-space-1);color:var(--lith-text-muted);font-size:var(--lith-text-xs)}}@container style(--band:raised){.stat {
			background: var(--lith-surface-2);
			border-color: var(--lith-border);
		}
	}.note{margin-block-start:var(--lith-space-6);color:var(--lith-text-muted);font-size:var(--lith-text-sm)}.quickstart{display:grid;grid-template-columns:minmax(0,.8fr)minmax(0,1.2fr);gap:var(--lith-space-8);align-items:start;@container page (width < 56rem){grid-template-columns: minmax(0, 1fr);
		}& ol{display:grid;gap:var(--lith-space-3);padding-inline-start:var(--lith-space-5);color:var(--lith-text-2);& li::marker{color:var(--lith-accent-text);font-family:var(--lith-font-ui);font-weight:600}}}.credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--lith-space-4);& article{display:grid;gap:var(--lith-space-2);padding:var(--lith-space-5);border-inline-start:3px solid var(--lith-accent);background:var(--lith-surface-1)}& h3{font-size:var(--lith-text-lg)}& p{color:var(--lith-text-2);font-size:var(--lith-text-sm)}}@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 28%}.hero__art svg{animation:breathe 6s ease-in-out infinite alternate,sink linear both;animation-timeline:auto,scroll(root block);animation-range:normal,0 60vh}}}@keyframes reveal{from{translate:0 2.5rem;scale:.985}}@keyframes sink{to{translate:0 4rem;opacity:.55}}}@layer components{.starts{display:block;min-inline-size:0;&::part(tablist){margin-block-end:var(--lith-space-3);font-family:var(--lith-font-ui);font-size:var(--lith-text-sm)}}.starts__panel{display:grid;gap:var(--lith-space-3);& > p{color:var(--lith-text-2);font-size:var(--lith-text-sm)}}}@layer components{.card-grid{container:cards/inline-size;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:var(--lith-space-4);padding:0;list-style:none}.demo-card.demo-card--featured{@container cards (width >= 35rem){grid-column: span 2;

			& .demo-card__art svg {
				block-size: 6rem;
			}

			& .demo-card__body .demo-card__title {
				font-size: var(--lith-text-2xl);
			}
		}@container cards (width >= 53rem){grid-row: span 2;
			grid-template-rows: 1fr auto;

			& .demo-card__stage {
				block-size: auto;
				min-block-size: 8.5rem;
			}

			& .demo-card__art svg {
				block-size: 9rem;
			}
		}}@container page (width >= 76rem){.landing-demos .card-grid {
			grid-template-columns: repeat(5, minmax(0, 1fr));
		}

		.landing-demos .demo-card.demo-card--featured {
			grid-row: auto;
			grid-template-rows: auto 1fr;

			& .demo-card__stage {
				block-size: 8.5rem;
			}

			& .demo-card__art svg {
				block-size: 6rem;
			}
		}
	}.demo-card{--_n:calc(4px * var(--lith-notch));container:card/inline-size;position:relative;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--lith-border);border-radius:calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));clip-path:polygon(var(--_n) 0,calc(100% - var(--_n)) 0,calc(100% - var(--_n)) var(--_n),100% var(--_n),100% calc(100% - var(--_n)),calc(100% - var(--_n)) calc(100% - var(--_n)),calc(100% - var(--_n)) 100%,var(--_n) 100%,var(--_n) calc(100% - var(--_n)),0 calc(100% - var(--_n)),0 var(--_n),var(--_n) var(--_n));background:var(--lith-surface-1);transition:border-color var(--lith-dur-2)var(--lith-ease-snap),translate var(--lith-dur-3)var(--lith-ease-glide),background-color var(--lith-dur-2)var(--lith-ease-snap);&:hover, &:has(a:focus-visible){border-color:var(--lith-accent-edge);translate:0 -3px;& .demo-card__art{--lith-seam-glow:1}& .demo-card__go{translate:.25rem 0;color:var(--lith-accent-text)}}}.demo-card__stage{display:grid;place-items:center;block-size:8.5rem;--_grid:color-mix(in oklch, var(--lith-border) 55%, transparent);background:radial-gradient(circle at 50% 115%,var(--lith-accent-subtle),transparent 65%),linear-gradient(var(--_grid) 1px,transparent 1px),linear-gradient(90deg,var(--_grid) 1px,transparent 1px),var(--lith-surface-inset);background-size:auto,12px 12px,12px 12px,auto;border-block-end:1px solid var(--lith-border-subtle)}.demo-card__art,.demo-head__art{& svg{block-size:4.5rem;inline-size:auto;filter:drop-shadow(0 0 calc(var(--lith-seam-glow) * 14px) var(--lith-glow-color));transition:filter var(--lith-dur-3)var(--lith-ease-glide)}}.demo-card__body{display:grid;grid-template-rows:auto 1fr auto;gap:var(--lith-space-2);padding:var(--lith-space-5);& .demo-card__title{font-family:var(--lith-font-display);font-size:var(--lith-text-xl);font-weight:600;inline-size:fit-content}& p{color:var(--lith-text-2);font-size:var(--lith-text-sm)}& a{color:var(--lith-text-1);text-decoration:none;&::after{content:"";position:absolute;inset:0}&:focus-visible{outline:none;&::after{outline:2px solid var(--lith-focus);outline-offset:-6px}}}}.demo-card__go{display:inline-flex;align-items:center;gap:var(--lith-space-2);color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);font-weight:600;transition:translate var(--lith-dur-3)var(--lith-ease-glide),color var(--lith-dur-2)var(--lith-ease-snap);& svg{inline-size:.9rem;block-size:.9rem}}}@layer components{.docs-nav{grid-area:nav;font-size:var(--lith-text-sm);&[data-docs-nav]{position:sticky;inset-block-start:calc(var(--lith-header-height) + var(--lith-space-6));max-block-size:calc(100dvh - var(--lith-header-height) - var(--lith-space-10));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 var(--lith-space-2)var(--lith-space-6)0;view-transition-name:docs-nav;@container docs (width < 52rem){display: none;
			}}& ul{display:grid;gap:1px;margin:0 0 var(--lith-space-5);padding:0;list-style:none}& a{position:relative;display:block;padding:var(--lith-space-1)var(--lith-space-3);color:var(--lith-text-2);text-decoration:none;text-wrap:pretty;transition:color var(--lith-dur-1)var(--lith-ease-snap);&:hover{color:var(--lith-text-1)}&[aria-current=page]{color:var(--lith-text-1);font-weight:600}}}.docs-nav__section{margin-block-end:var(--lith-space-2);padding-inline:var(--lith-space-3);color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);font-weight:600;letter-spacing:var(--lith-tracking-caps);text-transform:uppercase;& a{display:inline;padding:0;color:inherit}}.docs-nav__marker{position:absolute;inset:0;z-index:-1;border-inline-start:3px solid var(--lith-accent);background:var(--lith-accent-subtle);view-transition-name:docs-nav-marker}.docs-sections{margin-block-start:var(--lith-space-8);& > li{display:grid;align-content:start;gap:var(--lith-space-2)}& h2, & p{margin:0}}.docs-nav__marker--still{view-transition-name:none}.docs-nav li{position:relative;isolation:isolate}.docs-menu-button{display:none;justify-self:start;margin-block-end:var(--lith-space-4);@container docs (width < 52rem){display: inline-flex;
		}}.docs-article{grid-area:article;display:grid;grid-template-columns:minmax(0,1fr);min-inline-size:0;max-inline-size:var(--lith-prose-max)}.page-head{display:grid;gap:var(--lith-space-3);padding-block-end:var(--lith-space-6);margin-block-end:var(--lith-space-8);border-block-end:1px solid var(--lith-border-subtle);& h1{font-family:var(--lith-font-display);font-size:var(--lith-text-3xl);font-weight:600;line-height:var(--lith-leading-tight);letter-spacing:.01em;inline-size:fit-content}& .lede{color:var(--lith-text-2);font-size:var(--lith-text-lg)}}.page-title{view-transition-name:page-title}.crumbs{display:flex;flex-wrap:wrap;gap:var(--lith-space-2);color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);letter-spacing:.02em;& a{color:var(--lith-text-2);text-decoration:none;&:hover{color:var(--lith-accent-text)}}}.draft-badge{justify-self:start;padding:.1em .5em;border:1px dashed var(--lith-accent-edge);color:var(--lith-accent-text);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs)}.docs-toc{grid-area:toc;position:sticky;inset-block-start:calc(var(--lith-header-height) + var(--lith-space-6));display:grid;align-content:start;gap:var(--lith-space-2);max-block-size:calc(100dvh - var(--lith-header-height) - var(--lith-space-10));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;font-size:var(--lith-text-sm);@container docs (width < 72rem){display: none;
		}& h2{color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);letter-spacing:var(--lith-tracking-caps);text-transform:uppercase}& ul{display:grid;gap:var(--lith-space-1);padding:0;list-style:none;border-inline-start:1px solid var(--lith-border-subtle)}& li{padding-inline-start:var(--lith-space-3);&.is-sub{padding-inline-start:var(--lith-space-6)}}& a{color:var(--lith-text-2);text-decoration:none;&:hover{color:var(--lith-accent-text)}}}.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--lith-space-4);margin-block-start:var(--lith-space-12);& a{--_n:calc(3px * var(--lith-notch));display:grid;gap:var(--lith-space-1);padding:var(--lith-space-4)var(--lith-space-5);border:1px solid var(--lith-border);border-radius:calc(var(--lith-radius-md) * (1 - var(--lith-notch)));clip-path:polygon(var(--_n) 0,calc(100% - var(--_n)) 0,calc(100% - var(--_n)) var(--_n),100% var(--_n),100% calc(100% - var(--_n)),calc(100% - var(--_n)) calc(100% - var(--_n)),calc(100% - var(--_n)) 100%,var(--_n) 100%,var(--_n) calc(100% - var(--_n)),0 calc(100% - var(--_n)),0 var(--_n),var(--_n) var(--_n));color:var(--lith-text-1);text-decoration:none;transition:border-color var(--lith-dur-2)var(--lith-ease-snap),background-color var(--lith-dur-2)var(--lith-ease-snap);&:hover{border-color:var(--lith-accent-edge);background:var(--lith-surface-1)}& span{color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs)}& strong{font-weight:600}}& .pager__next{grid-column:2;text-align:end}}.docs-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--lith-space-2)var(--lith-space-6);margin-block-start:var(--lith-space-6);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);color:var(--lith-text-muted);& a{color:var(--lith-text-muted)}}.docs-foot__updated{min-inline-size:0;overflow-wrap:anywhere}@supports(animation-timeline:scroll()){.read-progress{position:fixed;inset:var(--lith-header-height)0 auto;z-index:var(--lith-z-sticky);block-size:2px;background:var(--lith-accent);transform-origin:left;scale:0 1;animation:progress linear both;animation-timeline:scroll(root block);pointer-events:none}}@keyframes progress{to{scale:1 1}}}@layer components{.chart{--_n:calc(3px * var(--lith-notch));--_c1:light-dark(oklch(58% 0.155 46), oklch(66% 0.162 52));--_c2:light-dark(oklch(52% 0.11 245), oklch(62% 0.11 240));--_c3:light-dark(oklch(56% 0.12 150), oklch(64% 0.12 150));--_c4:light-dark(oklch(48% 0.14 350), oklch(55% 0.14 350));display:grid;margin:0;border:1px solid var(--lith-border);border-radius:calc(var(--lith-radius-md) * (1 - var(--lith-notch)));clip-path:polygon(var(--_n) 0,calc(100% - var(--_n)) 0,calc(100% - var(--_n)) var(--_n),100% var(--_n),100% calc(100% - var(--_n)),calc(100% - var(--_n)) calc(100% - var(--_n)),calc(100% - var(--_n)) 100%,var(--_n) 100%,var(--_n) calc(100% - var(--_n)),0 calc(100% - var(--_n)),0 var(--_n),var(--_n) var(--_n));background:var(--lith-surface-inset);.prose &{margin-block:var(--lith-space-6)}}.chart__bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--lith-space-1)var(--lith-space-4);padding:var(--lith-space-2)var(--lith-space-4);border-block-end:1px solid var(--lith-border-subtle);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs)}.chart__title{color:var(--lith-text-1);font-weight:600}.chart__source{color:var(--lith-text-muted)}.chart__plot{overflow-x:auto;padding:var(--lith-space-3)var(--lith-space-3)0;background:linear-gradient(to right,var(--lith-surface-inset) 40%,transparent)0/2.5rem 100% no-repeat local,linear-gradient(to left,var(--lith-surface-inset) 40%,transparent)100%/2.5rem 100% no-repeat local,linear-gradient(to right,var(--lith-border-strong),transparent)0/.75rem 100% no-repeat,linear-gradient(to left,var(--lith-border-strong),transparent)100%/.75rem 100% no-repeat;& svg{display:block;inline-size:100%;min-inline-size:34rem;block-size:auto}}.chart__s1{--_c:var(--_c1)}.chart__s2{--_c:var(--_c2)}.chart__s3{--_c:var(--_c3)}.chart__s4{--_c:var(--_c4)}.chart svg{& text{font-family:var(--lith-font-ui);font-size:12px;font-variant-numeric:tabular-nums}& .chart__tick, & .chart__axis{fill:var(--lith-text-muted)}& .chart__value{fill:var(--lith-text-2);font-size:11.5px}& .chart__grid{stroke:var(--lith-border-subtle);stroke-width:1;shape-rendering:crispEdges}& .chart__baseline{stroke:var(--lith-border-strong);stroke-width:1;shape-rendering:crispEdges}& .chart__mark{fill:var(--_c);shape-rendering:crispEdges}& .chart__line{fill:none;stroke:var(--_c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}& .chart__dot{fill:var(--_c);stroke:var(--lith-surface-inset);stroke-width:2}& .chart__hit{fill:transparent}& .chart__hit:hover{fill:var(--_c);fill-opacity:.35}}.chart .chart__legend{display:flex;flex-wrap:wrap;gap:var(--lith-space-1)var(--lith-space-5);margin:0;padding:var(--lith-space-2)var(--lith-space-4)var(--lith-space-3);list-style:none;color:var(--lith-text-2);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);& li{display:inline-flex;align-items:center;gap:var(--lith-space-2);margin:0}}.chart__key{inline-size:.75rem;block-size:.75rem;background:var(--_c);.chart--lines &{block-size:3px;inline-size:1rem}}.chart .chart__data{border-block-start:1px solid var(--lith-border-subtle);font-size:var(--lith-text-xs);& summary{padding:var(--lith-space-2)var(--lith-space-4);color:var(--lith-text-muted);font-family:var(--lith-font-ui);cursor:pointer}& table{display:block;max-block-size:20rem;margin:0;padding:0 var(--lith-space-4)var(--lith-space-3);overflow:auto;font-family:var(--lith-font-ui);font-variant-numeric:tabular-nums}& :is(th, td){min-inline-size:0;text-align:end}}.prose table:has(th:nth-child(5)) td{min-inline-size:0}.matrix{--_good:var(--lith-ok);--_fair:light-dark(oklch(50% 0.1 85), oklch(82% 0.13 90));--_poor:var(--lith-danger)}.matrix__scroll{overflow-x:auto;background:linear-gradient(to right,var(--lith-surface-inset) 40%,transparent)0/2.5rem 100% no-repeat local,linear-gradient(to left,var(--lith-surface-inset) 40%,transparent)100%/2.5rem 100% no-repeat local,linear-gradient(to right,var(--lith-border-strong),transparent)0/.75rem 100% no-repeat,linear-gradient(to left,var(--lith-border-strong),transparent)100%/.75rem 100% no-repeat;&:focus-visible{outline:2px solid var(--lith-focus);outline-offset:-2px}}.matrix .matrix__table{display:table;inline-size:100%;min-inline-size:52rem;margin:0;border-collapse:separate;border-spacing:3px;padding:var(--lith-space-2);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);line-height:1.4;font-variant-numeric:tabular-nums;& :is(th, td){min-inline-size:0;padding:var(--lith-space-2);border:0;vertical-align:top}& thead th{color:var(--lith-text-muted);font-weight:600;white-space:normal}& tbody th{position:sticky;inset-inline-start:0;z-index:1;inline-size:9rem;background:var(--lith-surface-inset);color:var(--lith-text-1);white-space:normal}& code{font-size:1em}}.matrix__cell{--_c:var(--lith-border-strong)}.matrix .matrix__table .matrix__cell{border-inline-start:3px solid var(--_c);background:color-mix(in oklch,var(--_c) 10%,transparent);color:var(--lith-text-2)}.matrix__cell--good{--_c:var(--_good)}.matrix__cell--fair{--_c:var(--_fair)}.matrix__cell--poor{--_c:var(--_poor)}.matrix .matrix__table .matrix__cell--none{border-inline-start-style:dashed;background:0 0;color:var(--lith-text-muted)}.matrix__state{display:block;color:var(--_c);font-weight:700;letter-spacing:.02em;text-transform:uppercase}.matrix .matrix__note{margin:0;padding:0 var(--lith-space-4)var(--lith-space-3);color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs)}.diagram__plot svg{min-inline-size:52rem}.diagram svg{& text{fill:var(--lith-text-2);font-family:var(--lith-font-ui);font-size:12px}& .diagram__name{fill:var(--lith-text-1);font-weight:600}& .diagram__stage rect, & .diagram__fix rect{fill:var(--lith-surface-1);stroke:var(--lith-border-strong)}& .diagram__fix rect{stroke-dasharray:4 3}& .diagram__stage--wait rect{fill:var(--lith-accent-subtle);stroke:var(--lith-accent-strong);stroke-width:2}& .diagram__wait{fill:var(--lith-accent-text);font-weight:600}& :is(.diagram__flow, .diagram__back, .diagram__link){fill:none;stroke:var(--lith-text-muted);stroke-width:1.5}& .diagram__link{stroke-dasharray:3 3}& .diagram__head{fill:var(--lith-text-muted)}& .diagram__label{fill:var(--lith-text-muted)}}.diagram .diagram__note{margin:0;padding:var(--lith-space-3)var(--lith-space-4);color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs)}@media(forced-colors:active){.chart__mark,.chart__key{forced-color-adjust:none}}}@layer components{.prose{color:var(--lith-text-2);font-size:1.0625rem;line-height:1.7;& > * + *{margin-block-start:var(--lith-space-4)}& :is(h2, h3, h4){position:relative;color:var(--lith-text-1);scroll-margin-block-start:calc(var(--lith-header-height) + var(--lith-space-6))}& h2{margin-block-start:var(--lith-space-12);font-size:var(--lith-text-xl)}& h3{margin-block-start:var(--lith-space-8);font-size:var(--lith-text-lg)}& :is(h2, h3) + *{margin-block-start:var(--lith-space-3)}& .anchor{margin-inline-start:.4em;color:var(--lith-text-muted);text-decoration:none;opacity:0;transition:opacity var(--lith-dur-1)var(--lith-ease-snap);&::before{content:"#";font-family:var(--lith-font-ui);font-weight:400}&:focus-visible{opacity:1}}& :is(h2, h3, h4):hover .anchor{opacity:1}& strong{color:var(--lith-text-1);font-weight:650}& :is(ul, ol){padding-inline-start:var(--lith-space-6);& li + li{margin-block-start:var(--lith-space-2)}& li::marker{color:var(--lith-accent-text)}}& blockquote{padding:var(--lith-space-3)var(--lith-space-5);border-inline-start:3px solid var(--lith-accent);background:var(--lith-accent-subtle);color:var(--lith-text-1)}& table{display:block;inline-size:100%;overflow-x:auto;border-collapse:collapse;font-size:var(--lith-text-sm);line-height:1.5}& :is(th, td){padding:var(--lith-space-2)var(--lith-space-3);border-block-end:1px solid var(--lith-border-subtle);text-align:start;vertical-align:top}& th{color:var(--lith-text-1);font-weight:600;white-space:nowrap}& td{min-inline-size:8rem}& hr{margin-block:var(--lith-space-10)}}.prose--small{font-size:var(--lith-text-sm);line-height:1.65;& > * + *{margin-block-start:var(--lith-space-3)}& h2{margin-block-start:var(--lith-space-8);font-size:var(--lith-text-md)}& h3{margin-block-start:var(--lith-space-6);font-size:var(--lith-text-sm)}}.notice{display:grid;gap:var(--lith-space-2);padding:var(--lith-space-4)var(--lith-space-5);border-inline-start:3px solid var(--lith-accent);background:var(--lith-accent-subtle);color:var(--lith-text-1)}}@layer components{.code{--_n:calc(3px * var(--lith-notch));margin:0;border:1px solid var(--lith-border);border-radius:calc(var(--lith-radius-md) * (1 - var(--lith-notch)));clip-path:polygon(var(--_n) 0,calc(100% - var(--_n)) 0,calc(100% - var(--_n)) var(--_n),100% var(--_n),100% calc(100% - var(--_n)),calc(100% - var(--_n)) calc(100% - var(--_n)),calc(100% - var(--_n)) 100%,var(--_n) 100%,var(--_n) calc(100% - var(--_n)),0 calc(100% - var(--_n)),0 var(--_n),var(--_n) var(--_n));background:var(--lith-code-bg);overflow:hidden;.prose &{margin-block:var(--lith-space-6)}}.code__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--lith-space-3);padding:var(--lith-space-1)var(--lith-space-2)var(--lith-space-1)var(--lith-space-4);border-block-end:1px solid var(--lith-border-subtle);color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs)}.code__label{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;& a{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}}.code__copy{display:inline-grid;place-items:center;min-block-size:1.5rem;min-inline-size:1.5rem;padding:var(--lith-space-1)var(--lith-space-2);border:0;background:0 0;color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);cursor:pointer;& > span{grid-area:1/1;transition:opacity var(--lith-dur-2)var(--lith-ease-snap),translate var(--lith-dur-2)var(--lith-ease-glide)}& .code__copy-done{color:var(--lith-accent-text);opacity:0;translate:0 .4em}&:hover{color:var(--lith-text-1)}&[data-copied]{& .code__copy-idle{opacity:0;translate:0 -.4em}& .code__copy-done{opacity:1;translate:0 0}}}.chroma{margin:0;padding:var(--lith-space-4)var(--lith-space-5);overflow-x:auto;color:var(--lith-code-text);font-size:.8125rem;line-height:1.7;tab-size:4;& code{font-size:inherit}& .line{display:block}& :is(.k, .kc, .kd, .kn, .kp, .kr, .kt){color:var(--lith-code-keyword)}& :is(.nt, .nb, .bp){color:var(--lith-code-tag)}& :is(.na, .nf, .fm){color:var(--lith-code-function)}& :is(.s, .s1, .s2, .sb, .sc, .sd, .se, .sh, .si, .sx, .sr, .ss, .dl){color:var(--lith-code-string)}& :is(.m, .mb, .mf, .mh, .mi, .il, .mo){color:var(--lith-code-number)}& :is(.c, .ch, .cm, .c1, .cs, .cp, .cpf){color:var(--lith-code-comment);font-style:italic}& :is(.o, .ow, .p){color:var(--lith-text-muted)}& :is(.nv, .vc, .vg, .vi, .nx, .n){color:var(--lith-code-text)}& .gp{color:var(--lith-text-muted);user-select:none}}}@layer components{.demo-page{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--lith-space-8);padding-block:var(--lith-space-8)var(--lith-space-12)}.demo-head{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"art crumbs" "art title" "art lede";column-gap:var(--lith-space-6);row-gap:var(--lith-space-2);align-items:center;padding:var(--lith-space-6);border:1px solid var(--lith-border-subtle);border-radius:calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));background:var(--lith-surface-1);@container page (width < 36rem){grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "crumbs" "title" "lede";

			& .demo-head__art {
				display: none;
			}
		}& .crumbs{grid-area:crumbs}& h1{grid-area:title;inline-size:fit-content;font-family:var(--lith-font-display);font-size:var(--lith-text-3xl);font-weight:600;line-height:var(--lith-leading-tight)}& .lede{grid-area:lede;color:var(--lith-text-2);font-size:var(--lith-text-lg)}}.demo-head__art{grid-area:art;display:grid;place-items:center;padding:var(--lith-space-4);--_grid:color-mix(in oklch, var(--lith-border) 55%, transparent);background:linear-gradient(var(--_grid) 1px,transparent 1px),linear-gradient(90deg,var(--_grid) 1px,transparent 1px),var(--lith-surface-inset);background-size:12px 12px}.demo-stage{container:stage/inline-size;position:relative;min-inline-size:0;padding:var(--lith-space-6);border:1px solid var(--lith-border);border-radius:calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));--_grid:color-mix(in oklch, var(--lith-border-subtle) 70%, transparent);background:radial-gradient(circle at 50% 0%,var(--lith-accent-subtle),transparent 55%),linear-gradient(var(--_grid) 1px,transparent 1px),linear-gradient(90deg,var(--_grid) 1px,transparent 1px),var(--lith-surface-inset);background-size:auto,16px 16px,16px 16px,auto;@container page (width < 36rem){padding: var(--lith-space-4);
		}}.live-badge{position:absolute;inset-block-start:var(--lith-space-3);inset-inline-end:var(--lith-space-3);display:inline-flex;align-items:center;gap:var(--lith-space-2);color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);letter-spacing:var(--lith-tracking-caps);text-transform:uppercase;&::before{content:"";inline-size:6px;block-size:6px;background:var(--lith-text-muted)}&.is-live::before{background:var(--lith-ok);box-shadow:0 0 8px var(--lith-ok);animation:blink 2s steps(2,jump-none)infinite}&.is-held::before{background:var(--lith-accent);box-shadow:0 0 8px var(--lith-glow-color)}}@keyframes blink{50%{opacity:.3}}.panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--lith-space-3);padding:var(--lith-space-6);border:1px solid var(--lith-border-subtle);border-radius:calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));background:var(--lith-surface-1);& > h2{color:var(--lith-text-muted);font-family:var(--lith-font-ui);font-size:var(--lith-text-xs);letter-spacing:var(--lith-tracking-caps);text-transform:uppercase}}.howto{border:1px solid var(--lith-border-subtle);border-radius:calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));background:var(--lith-surface-1);& > summary{display:flex;align-items:center;gap:var(--lith-space-3);padding:var(--lith-space-5)var(--lith-space-6);color:var(--lith-text-1);font-family:var(--lith-font-display);font-size:var(--lith-text-xl);font-weight:600;cursor:pointer;list-style:none;&::-webkit-details-marker{display:none}&::before{content:"";inline-size:8px;block-size:12px;background:var(--lith-accent);clip-path:polygon(0 0,3px 0,3px 2px,5px 2px,5px 4px,8px 4px,8px 8px,5px 8px,5px 10px,3px 10px,3px 12px,0 12px);transition:rotate var(--lith-dur-3)var(--lith-ease-steps)}&:hover{color:var(--lith-accent-text)}}&[open] > summary::before{rotate:90deg}&::details-content{block-size:0;overflow:clip;transition:block-size var(--lith-dur-4)var(--lith-ease-glide),content-visibility var(--lith-dur-4)allow-discrete}&[open]::details-content{block-size:auto}& .prose{padding:0 var(--lith-space-6)var(--lith-space-6)}}.page-intro{display:grid;gap:var(--lith-space-3);max-inline-size:46rem;padding-block:var(--lith-space-10)var(--lith-space-8);& h1{font-family:var(--lith-font-display);font-size:var(--lith-text-3xl);font-weight:600;line-height:var(--lith-leading-tight);inline-size:fit-content}& p{color:var(--lith-text-2);font-size:var(--lith-text-lg)}}.lost{display:grid;justify-items:start;gap:var(--lith-space-4);padding-block:var(--lith-space-16);& svg{block-size:7rem;inline-size:auto}}}@view-transition{navigation: auto;
}@layer components{::view-transition-group(*){animation-duration:var(--lith-dur-4);animation-timing-function:var(--lith-ease-glide)}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}::view-transition-old(site-header),::view-transition-new(site-header),::view-transition-old(logo),::view-transition-new(logo),::view-transition-old(docs-nav),::view-transition-new(docs-nav),::view-transition-old(docs-nav-marker),::view-transition-new(docs-nav-marker){animation:none;mix-blend-mode:normal}::view-transition-old(*):only-child{animation:vt-fade-out var(--lith-dur-2)var(--lith-ease-exit)both}::view-transition-new(*):only-child{animation:vt-fade-in var(--lith-dur-3)var(--lith-ease-glide)80ms both}html:active-view-transition-type(forward){&::view-transition-old(root){animation:vt-out-to-start var(--lith-dur-2)var(--lith-ease-exit)both}&::view-transition-new(root){animation:vt-in-from-end var(--lith-dur-4)var(--lith-ease-glide)110ms both}}html:active-view-transition-type(backward){&::view-transition-old(root){animation:vt-out-to-end var(--lith-dur-2)var(--lith-ease-exit)both}&::view-transition-new(root){animation:vt-in-from-start var(--lith-dur-4)var(--lith-ease-glide)110ms both}}html:active-view-transition-type(zoom-in){&::view-transition-old(root){animation:vt-zoom-past var(--lith-dur-3)var(--lith-ease-exit)both}&::view-transition-new(root){animation:vt-zoom-up var(--lith-dur-5)var(--lith-ease-zoom)both}}html:active-view-transition-type(zoom-out){&::view-transition-old(root){animation:vt-zoom-away var(--lith-dur-3)var(--lith-ease-exit)both}&::view-transition-new(root){animation:vt-zoom-down var(--lith-dur-5)var(--lith-ease-zoom)both}}html:active-view-transition-type(fade){&::view-transition-old(root){animation:vt-fade-out var(--lith-dur-2)var(--lith-ease-exit)both}&::view-transition-new(root){animation:vt-fade-in var(--lith-dur-3)var(--lith-ease-glide)60ms both}}::view-transition-group(page-title),::view-transition-group(.demo),::view-transition-group(.demo-title),::view-transition-group(.demo-art){animation-duration:var(--lith-dur-5);animation-timing-function:var(--lith-ease-zoom)}::view-transition-old(page-title),::view-transition-new(page-title),::view-transition-old(.demo-title),::view-transition-new(.demo-title){block-size:100%;inline-size:auto;object-fit:fill}::view-transition-image-pair(.demo){overflow:clip}::view-transition-old(.demo),::view-transition-new(.demo){inset:0 auto auto 0;inline-size:auto;block-size:auto;object-fit:none;animation-duration:var(--lith-dur-3)}html:active-view-transition-type(theme){&::view-transition-old(root), &::view-transition-new(root){animation:none;mix-blend-mode:normal}}html[data-vt=theme] *,html:active-view-transition-type(theme) *{view-transition-name:none!important}[data-demo-card],.demo-head{view-transition-class:demo}[data-demo-card] .demo-card__title,.demo-head h1{view-transition-class:demo-title}.demo-card__art,.demo-head__art{view-transition-class:demo-art}}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-fade-in{from{opacity:0}}@keyframes vt-out-to-start{to{opacity:0;translate:-1.5rem 0}}@keyframes vt-in-from-end{from{opacity:0;translate:3.5rem 0}}@keyframes vt-out-to-end{to{opacity:0;translate:1.5rem 0}}@keyframes vt-in-from-start{from{opacity:0;translate:-3.5rem 0}}@keyframes vt-zoom-past{to{opacity:0;scale:1.05;filter:blur(3px)}}@keyframes vt-zoom-up{from{opacity:0;scale:.94}}@keyframes vt-zoom-away{to{opacity:0;scale:.95;filter:blur(3px)}}@keyframes vt-zoom-down{from{opacity:0;scale:1.05}}@media(prefers-reduced-motion:reduce){@view-transition{navigation: none;
	}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}@layer utilities{.visually-hidden{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pixel-frame{--_s:var(--lith-frame-step);--_c:var(--frame, var(--lith-border-strong));box-shadow:0 calc(-1 * var(--_s))0 0 var(--_c),0 var(--_s)0 0 var(--_c),calc(-1 * var(--_s))0 0 0 var(--_c),var(--_s)0 0 0 var(--_c)}.muted{color:var(--lith-text-muted)}.display{font-family:var(--lith-font-display)}}@layer components{@scope([data-demo="guestbook"]){.gb {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-8);
	}

	.gb__form {
		display: grid;
		gap: var(--lith-space-4);
		max-inline-size: 34rem;
	}

	.gb__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-4);
	}

	.gb__entries {
		display: grid;
		gap: var(--lith-space-3);

		& h3 {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			font-weight: 600;
			letter-spacing: var(--lith-tracking-caps);
			text-transform: uppercase;
		}

		& ol {
			display: grid;
			gap: var(--lith-space-2);
			margin: 0;
		}
	}

	.gb__entry {
		view-transition-class: guestbook-entry;
		padding: var(--lith-space-3) var(--lith-space-4);
		border-inline-start: 3px solid var(--lith-border);
		background: var(--lith-surface-1);
		transition:
			opacity var(--lith-dur-5) var(--lith-ease-glide),
			translate var(--lith-dur-5) var(--lith-ease-glide),
			filter var(--lith-dur-5) var(--lith-ease-glide),
			border-color 2.4s var(--lith-ease-glide),
			box-shadow 2.4s var(--lith-ease-glide);
	}

	
	.gb__entry[data-fresh] {
		border-inline-start-color: var(--lith-accent);

		@starting-style {
			opacity: 0;
			translate: 0 -0.75rem;
			filter: blur(6px);
			border-inline-start-color: var(--lith-ember-1);
			box-shadow: 0 0 28px var(--lith-glow-color), inset 0 0 0 1px var(--lith-accent);
		}
	}

	.gb__message {
		color: var(--lith-text-1);
		overflow-wrap: anywhere;
		white-space: pre-line;
	}

	.gb__by {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);

		& span {
			color: var(--lith-text-2);
			font-weight: 600;
		}

		& time {
			margin-inline-start: var(--lith-space-2);
		}
	}

	
	.gb-embed {
		display: grid;
		gap: var(--lith-space-3);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-inset);

		& ol {
			display: grid;
			gap: var(--lith-space-2);
			margin: 0;
		}

		& .btn {
			justify-self: start;
		}
	}

	.gb-embed__head {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	.gb-embed__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
		}
	}

	.gb-embed__list {
		display: grid;
		gap: var(--lith-space-2);
	}

	.gb-embed__empty,
	.gb-embed__total {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}
}::view-transition-group(.guestbook-entry){animation-duration:var(--lith-dur-5);animation-timing-function:var(--lith-ease-glide)}::view-transition-new(.guestbook-entry):only-child{animation:none}}@layer components{@property --wr-heat{syntax: "<number>";
	inherits: true;
	initial-value: 0;
}@scope([data-demo="writer-race"]){.wr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-6);
	}

	
	.wr-choice legend,
	.wr-tile h4,
	.wr-line h3,
	.wr-results h3,
	.wr-result dt,
	.wr-track__empty h3 {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	
	.wr-controls {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		grid-template-areas:
			"producers sync go"
			"hint hint hint"
			"said said said";
		align-items: end;
		gap: var(--lith-space-4) var(--lith-space-6);

		@container stage (width < 30rem) {
			grid-template-columns: auto minmax(0, 1fr);
			grid-template-areas:
				"producers producers"
				"sync go"
				"hint hint"
				"said said";
		}
	}

	.wr-choice--producers {
		grid-area: producers;
	}

	.wr-choice--sync {
		grid-area: sync;
	}

	.wr-controls__go {
		grid-area: go;
		justify-self: start;
	}

	.wr-controls__hint {
		grid-area: hint;
		max-inline-size: 38rem;
		margin-block-start: calc(-1 * var(--lith-space-1));
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);
		line-height: 1.5;

		& b {
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-weight: 600;
		}
	}

	.wr-controls__said {
		grid-area: said;
		display: grid;
		gap: var(--lith-space-1);

		&:not(:has(.outcome:not(:empty))) {
			display: none;
		}
	}

	
	.wr-choice {
		display: grid;
		gap: var(--lith-space-2);
		margin: 0;
		padding: 0;
		border: 0;
		min-inline-size: 0;

		& legend {
			padding: 0;
			margin-block-end: var(--lith-space-2);
			float: inline-start;
		}
	}

	.wr-choice__options {
		--_n: calc(3px * var(--lith-notch));
		display: inline-flex;
		justify-self: start;
		gap: 3px;
		padding: 3px;
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-surface-inset);

		& label {
			position: relative;
			display: grid;
			cursor: pointer;
		}

		
		& input {
			position: absolute;
			inset: 0;
			margin: 0;
			opacity: 0;
			cursor: pointer;
		}

		& span {
			display: grid;
			place-items: center;
			min-inline-size: 3rem;
			min-block-size: 2rem;
			padding-inline: var(--lith-space-3);
			border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)) - 2px);
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-sm);
			font-weight: 600;
			font-variant-numeric: tabular-nums;
			transition:
				background-color var(--lith-dur-1) var(--lith-ease-snap),
				color var(--lith-dur-1) var(--lith-ease-snap),
				box-shadow var(--lith-dur-1) var(--lith-ease-snap);
		}

		& label:hover span {
			background: var(--lith-surface-hover);
			color: var(--lith-text-1);
		}

		& label:has(:checked) span {
			background: var(--lith-accent);
			color: var(--lith-on-accent);
			box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--lith-accent), black 22%);
		}

		& label:has(:focus-visible) span {
			outline: 2px solid var(--lith-focus);
			outline-offset: -2px;
		}

		& label:has(:checked):has(:focus-visible) span {
			outline-color: var(--lith-on-accent);
			outline-offset: -4px;
		}
	}

	.wr-controls__go[disabled] {
		cursor: not-allowed;
		opacity: 0.6;
		translate: none;
		animation: none;
	}

	
	
	.wr-track {
		--wr-heat: 0;
		container: track / inline-size;
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
		padding: var(--lith-space-5);
		border: 1px solid color-mix(in oklch, var(--lith-accent-edge) calc(var(--wr-heat) * 100%), var(--lith-border));
		border-radius: calc(var(--lith-radius-lg) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);
		box-shadow:
			0 0 0 1px color-mix(in oklch, var(--lith-accent-subtle) calc(var(--wr-heat) * 100%), transparent),
			0 18px 48px -20px color-mix(in oklch, var(--lith-glow-color) calc(var(--wr-heat) * 100%), transparent),
			var(--lith-shadow-2);
		
		transition: --wr-heat 2.4s var(--lith-ease-glide);

		@container stage (width < 34rem) {
			padding: var(--lith-space-4);
		}

		&[data-state="running"] {
			--wr-heat: 1;
			transition-duration: var(--lith-dur-4);
		}
	}

	.wr-track__empty {
		display: grid;
		gap: var(--lith-space-3);
		max-inline-size: 36rem;

		& p {
			color: var(--lith-text-2);
		}
	}

	.wr-track__ref {
		font-size: var(--lith-text-sm);

		& b {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-variant-numeric: tabular-nums;
		}
	}

	.wr-track__head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-2) var(--lith-space-4);

		& h3 {
			font-family: var(--lith-font-display);
			font-size: var(--lith-text-xl);
			font-weight: 600;
			line-height: 1.1;
		}
	}

	.wr-tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);

		& span {
			padding: 2px var(--lith-space-2);
			border: 1px solid var(--lith-border-subtle);
			background: var(--lith-surface-inset);
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}
	}

	.wr-track__status {
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		margin-inline-start: auto;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.02em;

		[data-state="running"] & {
			color: var(--lith-accent-text);
		}
	}

	.wr-track__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);

		[data-state="running"] & {
			background: var(--lith-accent);
			box-shadow: 0 0 8px var(--lith-glow-color);
			animation: wr-blink 0.8s steps(2, jump-none) infinite;
		}

		[data-state="done"] & {
			background: var(--lith-ok);
		}

		:is([data-state="failed"], [data-state="interrupted"]) & {
			background: var(--lith-danger);
		}
	}

	@keyframes wr-blink {
		50% {
			opacity: 0.25;
		}
	}

	
	.wr-progress {
		block-size: 8px;
		padding: 2px;
		background: var(--lith-surface-inset);
		box-shadow: inset 0 0 0 1px var(--lith-border-subtle);

		& i {
			display: block;
			block-size: 100%;
			background: repeating-linear-gradient(90deg, color-mix(in oklch, var(--lith-accent) calc(45% + var(--wr-heat) * 55%), var(--lith-border)) 0 6px, transparent 6px 8px);
			filter: drop-shadow(0 0 calc(var(--wr-heat) * 4px) var(--lith-glow-color));
			scale: var(--p) 1;
			transform-origin: left;
			transition: scale 120ms linear;

			&:dir(rtl) {
				transform-origin: right;
			}
		}

	}

	
	.wr-result {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--lith-space-3);
		margin: 0;

		@container track (width < 36rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		& > div {
			display: grid;
			gap: var(--lith-space-1);
			padding: var(--lith-space-3) var(--lith-space-4);
			border-inline-start: 3px solid var(--lith-accent);
			background: var(--lith-accent-subtle);
			transition:
				opacity var(--lith-dur-5) var(--lith-ease-glide),
				translate var(--lith-dur-5) var(--lith-ease-glide),
				filter var(--lith-dur-5) var(--lith-ease-glide);
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			letter-spacing: -0.02em;
		}
	}

	
	.wr-result[data-fresh] > div {
		@starting-style {
			opacity: 0;
			translate: 0 0.5rem;
			filter: blur(4px);
		}

		&:nth-child(2) {
			transition-delay: 60ms;
		}

		&:nth-child(3) {
			transition-delay: 120ms;
		}

		&:nth-child(4) {
			transition-delay: 180ms;
		}
	}

	
	.wr-rate {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--lith-space-1) var(--lith-space-3);
	}

	.wr-rate__now {
		color: var(--lith-text-2);

		& b {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-3xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			letter-spacing: -0.03em;
			line-height: 1;
		}
	}

	.wr-rate__note {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);
	}

	
	.wr-chart {
		display: grid;
		gap: var(--lith-space-1);
		margin: 0;
	}

	.wr-chart__box {
		position: relative;
		block-size: clamp(7rem, 26cqi, 11rem);
		border-block-end: 1px solid var(--lith-border);

		& svg {
			display: block;
			inline-size: 100%;
			block-size: 100%;
			overflow: visible;
		}

		& path {
			vector-effect: non-scaling-stroke;
		}
	}

	.wr-chart__grid {
		fill: none;
		stroke: var(--lith-border-subtle);
		stroke-width: 1px;
		stroke-dasharray: 1px 4px;
	}

	.wr-chart__bench {
		fill: none;
		stroke: var(--lith-text-muted);
		stroke-width: 1px;
		stroke-dasharray: 6px 4px;
	}

	.wr-chart__area {
		fill: var(--lith-accent);
		opacity: 0.14;
	}

	
	.wr-chart__line {
		fill: none;
		stroke: var(--lith-accent-edge);
		stroke-width: 2px;
		stroke-linejoin: miter;
	}

	
	.wr-chart__head {
		position: absolute;
		inline-size: 7px;
		block-size: 7px;
		translate: -50% -50%;
		background: var(--lith-accent-edge);
		box-shadow: 0 0 10px var(--lith-glow-color);

		[data-state="running"] & {
			background: var(--lith-ember-1);
			animation: wr-blink 0.8s steps(2, jump-none) infinite;
		}
	}

	.wr-chart__top,
	.wr-chart__ref,
	.wr-chart__axis {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.6875rem;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.wr-chart__ref {
		position: absolute;
		inset-inline-end: 0;
		padding-inline: var(--lith-space-1);
		background: var(--lith-surface-1);
		translate: 0 calc(-100% - 3px);
	}

	.wr-chart__axis {
		position: relative;
		block-size: 1.3em;

		& span {
			position: absolute;
			translate: -50% 0;

			&:first-child {
				translate: 0 0;
			}

			&:last-child {
				translate: -100% 0;
			}
		}
	}

	.wr-chart--mini .wr-chart__box {
		block-size: clamp(5rem, 18cqi, 7rem);
	}

	
	.wr-tiles {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--lith-space-3);

		@container track (width < 46rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		@container track (width < 22rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	
	.wr-tile {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: var(--lith-space-2);
		padding: var(--lith-space-3) var(--lith-space-4) var(--lith-space-4);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background: var(--lith-surface-inset);
	}

	.wr-tile__big {
		color: var(--lith-text-1);
		font-family: var(--lith-font-code);
		font-size: var(--lith-text-2xl);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.02em;
		line-height: 1.1;
	}

	.wr-tile__note {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);
		line-height: 1.4;
	}

	.wr-tile--gauge {
		justify-items: center;
		text-align: center;

		& sb-gauge {
			--sb-gauge-size: min(100%, 9.5rem);
			--sb-ok: var(--lith-accent);
		}
	}

	.wr-tile--p99 sb-sparkline {
		--sb-sparkline-width: 100%;
		--sb-sparkline-height: 2.25rem;
	}

	.wr-tile--queue sb-meter {
		--sb-meter-height: 18px;
		--sb-meter-width: 100%;
		--sb-ok: var(--lith-accent);

		&::part(label) {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			font-weight: 600;
			letter-spacing: var(--lith-tracking-caps);
			text-transform: uppercase;
		}

		&::part(value) {
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			line-height: 1;
		}
	}

	
	.wr-bars {
		display: grid;
		grid-template-columns: repeat(8, minmax(0, 1fr));
		align-items: end;
		gap: 3px;
		block-size: 5.5rem;
		margin: 0;
		padding: 0;

		& li {
			display: grid;
			grid-template-rows: minmax(0, 1fr) auto;
			gap: var(--lith-space-1);
			block-size: 100%;
		}
	}

	.wr-bars__bar {
		align-self: end;
		block-size: max(2px, calc(var(--h) * 100%));
		background: var(--lith-accent);
		box-shadow: inset 0 0 0 1px var(--lith-accent-edge);
		transition: block-size 160ms var(--lith-ease-glide);

		li[style*="--h: 0.000"] > & {
			background: var(--lith-border);
			box-shadow: none;
		}
	}

	.wr-bars__k {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.625rem;
		text-align: center;
	}

	
	.wr-below {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-6);
	}

	.wr-line,
	.wr-results {
		display: grid;
		gap: var(--lith-space-3);
	}

	.wr-line__empty,
	.wr-results__empty {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	.wr-line__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);
		margin: 0;
		padding: 0;

		&:empty {
			display: none;
		}
	}

	.wr-wait {
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		padding: var(--lith-space-1) var(--lith-space-3) var(--lith-space-1) var(--lith-space-1);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-1);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		transition:
			opacity var(--lith-dur-4) var(--lith-ease-glide),
			translate var(--lith-dur-4) var(--lith-ease-glide),
			background-color var(--lith-dur-4) var(--lith-ease-glide),
			border-color var(--lith-dur-4) var(--lith-ease-glide),
			box-shadow var(--lith-dur-4) var(--lith-ease-glide);

		
		@starting-style {
			opacity: 0;
			translate: 0.75rem 0;
		}

		&.is-mine {
			border-color: var(--lith-accent-edge);
		}

		
		&.is-on {
			border-color: var(--lith-accent-edge);
			background: var(--lith-accent-subtle);
			box-shadow: 0 6px 20px -10px var(--lith-glow-color);
		}
	}

	.wr-wait__place {
		display: grid;
		place-items: center;
		min-inline-size: 1.5rem;
		block-size: 1.5rem;
		background: var(--lith-surface-inset);
		color: var(--lith-text-muted);
		font-weight: 700;
		transition: background-color var(--lith-dur-4) var(--lith-ease-glide), color var(--lith-dur-4) var(--lith-ease-glide);

		
		.is-on > & {
			background: var(--lith-accent);
			color: var(--lith-on-accent);
		}

		& i {
			inline-size: 6px;
			block-size: 9px;
			background: currentColor;
			clip-path: polygon(0 0, 2px 0, 2px 1px, 4px 1px, 4px 3px, 6px 3px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 9px, 0 9px);
		}
	}

	.wr-wait__now {
		color: var(--lith-accent-text);
		font-weight: 700;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
		font-size: 0.625rem;
	}

	.wr-wait__race {
		color: var(--lith-text-1);
		font-weight: 600;
	}

	.wr-wait__set {
		color: var(--lith-text-2);
	}

	.wr-you {
		display: none;
		color: var(--lith-accent-text);
		font-family: var(--lith-font-ui);
		font-size: 0.625rem;
		font-weight: 700;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;

		.is-mine & {
			display: inline;
		}
	}

	.wr-results {
		container: results / inline-size;
	}

	
	.wr-table {
		inline-size: 100%;
		border-collapse: collapse;
		table-layout: fixed;
		font-size: var(--lith-text-sm);

		& th:first-child {
			inline-size: 3.5rem;
		}

		& th:nth-child(2) {
			inline-size: 8rem;
		}

		& th,
		& td {
			padding: var(--lith-space-2);
			border-block-end: 1px solid var(--lith-border-subtle);
			text-align: start;
			white-space: nowrap;
		}

		& thead th {
			padding-block-start: 0;
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: 0.6875rem;
			font-weight: 600;
			letter-spacing: 0.02em;
			white-space: normal;
			vertical-align: bottom;
		}

		& tbody th {
			color: var(--lith-text-1);
			font-family: var(--lith-font-ui);
		}

		
		& .wr-you {
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}

		& td {
			color: var(--lith-text-2);
		}

		& .num {
			font-family: var(--lith-font-code);
			font-variant-numeric: tabular-nums;
			text-align: end;
		}

		@container results (width < 40rem) {
			& .wr-table__more {
				display: none;
			}
		}

		@container results (width < 26rem) {
			& .wr-table__p99 {
				display: none;
			}
		}
	}

	.wr-row {
		view-transition-class: writer-race-result;
		transition:
			opacity var(--lith-dur-5) var(--lith-ease-glide),
			background-color 2.4s var(--lith-ease-glide);

		&.is-mine {
			background: var(--lith-accent-subtle);
			box-shadow: inset 3px 0 0 var(--lith-accent);
		}

		& .wr-table__rate {
			color: var(--lith-accent-text);
			font-weight: 700;
		}

		& .wr-table__stopped {
			color: var(--lith-danger);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}
	}

	
	.wr-row[data-fresh] {
		@starting-style {
			opacity: 0;
			background-color: var(--lith-glow-color);
		}
	}

	
	.wr-embed {
		display: grid;
		gap: var(--lith-space-3);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-inset);
		transition: border-color var(--lith-dur-4) var(--lith-ease-glide), box-shadow var(--lith-dur-4) var(--lith-ease-glide);

		&:has([data-state="running"]) {
			border-color: var(--lith-accent-edge);
			box-shadow: 0 12px 36px -18px var(--lith-glow-color);
		}
	}

	.wr-embed__go {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-2) var(--lith-space-3);

		& .btn[disabled] {
			cursor: not-allowed;
			opacity: 0.6;
			translate: none;
			animation: none;
		}
	}

	.wr-embed__head {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	.wr-embed__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
		}
	}

	.wr-embed__live {
		display: grid;
		gap: var(--lith-space-2);
	}

	.wr-embed__big {
		color: var(--lith-text-2);

		& b {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-2xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			letter-spacing: -0.02em;
		}
	}

	.wr-embed__meta {
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);
	}

	.wr-embed__running {
		color: var(--lith-accent-text);
		font-weight: 600;
	}

	.wr-chart--mini .wr-chart__ref {
		background: var(--lith-surface-inset);
	}

	
	@media (forced-colors: active) {
		.wr-chart__line,
		.wr-chart__bench {
			stroke: CanvasText;
		}

		.wr-chart__area {
			fill: CanvasText;
		}

		.wr-bars__bar,
		.wr-progress i {
			forced-color-adjust: none;
			background: CanvasText;
		}

		.wr-choice__options label:has(:checked) span {
			outline: 2px solid CanvasText;
		}
	}
}::view-transition-group(.writer-race-result){animation-duration:var(--lith-dur-5);animation-timing-function:var(--lith-ease-glide)}::view-transition-new(.writer-race-result):only-child{animation:none}}@layer components{@property --stream-count{syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}@property --stream-fill{syntax: "<number>";
	inherits: true;
	initial-value: 0;
}@scope([data-demo="stream"]){.sx {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-5);
		
		margin-block-start: var(--lith-space-5);
	}

	
	.sx-panel {
		--_n: calc(3px * var(--lith-notch));
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-surface-1);

		@container stage (width < 30rem) {
			padding: var(--lith-space-4);
		}
	}

	.sx-readout {
		background:
			radial-gradient(ellipse at 0% 0%, var(--lith-accent-subtle), transparent 60%),
			var(--lith-surface-1);
	}

	.sx-head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-3) var(--lith-space-5);
	}

	.sx-eyebrow {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	
	.sx-pace {
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& b {
			color: var(--lith-text-1);
			font-variant-numeric: tabular-nums;
		}
	}

	.sx-dot {
		inline-size: 6px;
		block-size: 6px;
		flex: none;
		background: var(--lith-text-muted);

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
			animation: stream-blink 2s steps(2, jump-none) infinite;
		}

		.is-live.is-quiet > & {
			background: var(--lith-accent);
			box-shadow: 0 0 8px var(--lith-glow-color);
			animation: none;
		}
	}

	@keyframes stream-blink {
		50% {
			opacity: 0.3;
		}
	}

	
	.sx-encoder {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--lith-space-5);

		@container stage (width < 26rem) {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--lith-space-3);
		}
	}

	.sx-coding {
		--_n: calc(4px * var(--lith-notch));
		display: grid;
		place-items: center;
		justify-self: start;
		min-inline-size: 6.5rem;
		padding: var(--lith-space-3) var(--lith-space-5);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-accent);
		color: var(--lith-on-accent);
		font-family: var(--lith-font-display);
		font-size: var(--lith-text-2xl);
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.02em;
		transition: background-color var(--lith-dur-3) var(--lith-ease-glide), color var(--lith-dur-3) var(--lith-ease-glide);

		&[data-coding="none"],
		&[data-coding=""] {
			background: var(--lith-surface-2);
			color: var(--lith-text-muted);
		}
	}

	.sx-pairs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
		gap: var(--lith-space-3) var(--lith-space-5);

		& dt {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-md);
			font-weight: 600;
			font-variant-numeric: tabular-nums;
		}

		& code {
			font: inherit;
			color: var(--lith-accent-text);
		}
	}

	
	.sx-heroes {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lith-space-3);

		@container stage (width < 34rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.sx-hero {
		container: hero / inline-size;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: var(--lith-space-2);
		padding: var(--lith-space-4);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		background: var(--lith-surface-inset);
	}

	.sx-big {
		display: flex;
		align-items: baseline;
		color: var(--lith-accent-text);
		font-family: var(--lith-font-code);
		font-size: clamp(2rem, 1.2rem + 8cqi, 3rem);
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.03em;
		font-variant-numeric: tabular-nums;
		transition: opacity var(--lith-dur-4) var(--lith-ease-glide);

		.sx-heroes:not(.is-ready) & {
			opacity: 0.35;
		}
	}

	
	.sx-count {
		counter-reset: stream-count var(--stream-count);
		
		transition: --stream-count var(--lith-dur-2) var(--lith-ease-glide);

		&::before {
			content: counter(stream-count);
		}
	}

	
	.sx-count--ratio {
		counter-reset:
			stream-count round(var(--stream-count) / 10, 1)
			stream-whole round(down, var(--stream-count) / 10, 1)
			stream-tenth mod(var(--stream-count), 10);

		.is-fine > &::before {
			content: counter(stream-whole) "." counter(stream-tenth);
		}
	}

	
	.sx-count--bytes {
		counter-reset:
			stream-count var(--stream-count)
			stream-whole round(down, var(--stream-count) / 1000, 1)
			stream-tenth round(down, mod(var(--stream-count), 1000) / 100, 1);

		.is-kb > &::before {
			content: counter(stream-whole) "." counter(stream-tenth);
		}
	}

	.sx-unit {
		margin-inline-start: 0.08em;
		color: var(--lith-text-muted);
		font-size: 0.5em;
		font-weight: 600;
		letter-spacing: 0;
	}

	.sx-unit--spaced {
		margin-inline-start: 0.3em;
	}

	.sx-caption {
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
	}

	
	.sx-bars {
		display: grid;
		gap: var(--lith-space-2);
		margin-block-start: var(--lith-space-2);
	}

	.sx-bar {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr) 4.75rem;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& i {
			position: relative;
			block-size: 10px;
			background: color-mix(in oklch, var(--lith-border) 35%, transparent);
			transition: --stream-fill var(--lith-dur-4) var(--lith-ease-glide);

			&::before {
				content: "";
				position: absolute;
				inset-block: 0;
				inset-inline-start: 0;
				inline-size: max(2px, calc(var(--stream-fill) * 1%));
				background: var(--lith-text-muted);
			}
		}

		&.is-wire i::before {
			background: var(--lith-accent);
			box-shadow: 0 0 10px var(--lith-glow-color);
		}

		& b {
			color: var(--lith-text-1);
			font-weight: 600;
			font-variant-numeric: tabular-nums;
			text-align: end;
		}
	}

	.sx-spark {
		--sb-sparkline-width: 100%;
		--sb-sparkline-height: 3.25rem;
		inline-size: 100%;
		margin-block-start: auto;
	}

	
	.sx-tiles {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--lith-space-3);

		@container stage (width < 34rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		& > div {
			display: grid;
			gap: var(--lith-space-1);
			padding-inline-start: var(--lith-space-3);
			border-inline-start: 2px solid var(--lith-border);
		}

		& dt {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-lg);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
		}
	}

	
	.sx-streams {
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& b {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-variant-numeric: tabular-nums;
		}
	}

	.sx-meter {
		--sb-meter-width: 100%;
	}

	.sx-budget {
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& b {
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-weight: 600;
		}
	}

	.sx-tiers {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& span {
			color: var(--lith-text-2);
		}
	}


	
	.sx-controls {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-3) var(--lith-space-5);

		@container stage (width < 30rem) {
			display: grid;
			flex: 1 1 100%;
		}
	}

	.sx-note {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
	}

	.sx-choice {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);

		& .choice button {
			min-inline-size: 4.25rem;
			padding-inline: var(--lith-space-3);
		}

		
		@container stage (width < 30rem) {
			display: grid;
			grid-template-columns: 3.25rem minmax(0, 1fr);

			& .choice button {
				min-inline-size: 0;
				padding-inline: var(--lith-space-1);
			}
		}

		
		& .choice button[aria-busy="true"] {
			color: var(--lith-text-1);
			cursor: progress;

			&::after {
				content: "";
				inline-size: 4px;
				block-size: 4px;
				background: var(--lith-accent);
				animation: stream-busy 0.8s steps(4, end) infinite;
			}
		}
	}

	@keyframes stream-busy {
		0% {
			translate: 0 -2px;
		}
		25% {
			translate: 2px 0;
		}
		50% {
			translate: 0 2px;
		}
		75% {
			translate: -2px 0;
		}
	}

	.sx-label {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
	}

	.sx-scroll {
		max-block-size: 21rem;
		overflow: auto;
		overscroll-behavior: contain;
		border: 1px solid var(--lith-border-subtle);
		background: var(--lith-surface-inset);
		scrollbar-color: var(--lith-border-strong) transparent;
		scrollbar-width: thin;

		&:focus-visible {
			outline: 2px solid var(--lith-focus);
			outline-offset: -2px;
		}
	}

	.sx-table {
		inline-size: 100%;
		border-collapse: collapse;
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-variant-numeric: tabular-nums;
		line-height: 1.5;
		white-space: nowrap;

		& th,
		& td {
			padding: 1px var(--lith-space-3);
			text-align: end;
		}

		& thead th {
			position: sticky;
			inset-block-start: 0;
			z-index: 1;
			padding-block: var(--lith-space-1);
			background: var(--lith-surface-2);
			color: var(--lith-text-2);
			font-weight: 600;
			box-shadow: inset 0 -1px 0 var(--lith-border);
		}

		& th:first-child {
			text-align: start;
		}

		& tbody th {
			color: var(--lith-text-muted);
			font-weight: 500;
		}

		& tbody tr:nth-child(even) {
			background: color-mix(in oklch, var(--lith-surface-2) 45%, transparent);
		}

		
		& td {
			color: var(--lith-text-1);
			transition: background-color 1.1s var(--lith-ease-glide), color 1.1s var(--lith-ease-glide);
		}

		& td[data-new] {
			background-color: var(--lith-accent-subtle);
			color: var(--lith-accent-text);
			transition: none;
		}
	}

	
	.sx-embed {
		display: grid;
		gap: var(--lith-space-3);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-inset);

		& .btn {
			justify-self: start;
		}
	}

	.sx-embed__head {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	.sx-embed__body {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-3) var(--lith-space-4);

		& .sx-coding {
			min-inline-size: 5rem;
			padding: var(--lith-space-2) var(--lith-space-4);
			font-size: var(--lith-text-xl);
		}
	}

	.sx-embed__note {
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	.sx-embed__tier {
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& code {
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-weight: 600;
		}
	}

	.sx-embed__nums {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lith-space-3);

		& dt {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-md);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			white-space: nowrap;
		}

		& code {
			font: inherit;
			color: var(--lith-accent-text);
		}
	}

	
	@media (forced-colors: active) {
		.sx-bar i::before {
			background: CanvasText;
		}

		.sx-table td[data-new] {
			outline: 1px solid Highlight;
		}
	}
}}@layer components{@scope([data-demo="canvas"]){:scope {
		--canvas-c0: var(--lith-surface-inset);
		--canvas-c1: light-dark(var(--lith-stone-12), var(--lith-stone-1));
		--canvas-c2: light-dark(var(--lith-stone-9), var(--lith-stone-3));
		--canvas-c3: light-dark(var(--lith-stone-7), var(--lith-stone-5));
		--canvas-c4: light-dark(var(--lith-stone-5), var(--lith-stone-7));
		--canvas-c5: light-dark(var(--lith-stone-3), var(--lith-stone-9));
		--canvas-c6: light-dark(var(--lith-ember-3), var(--lith-art-seam-core));
		--canvas-c7: var(--lith-art-seam);
		--canvas-c8: var(--lith-art-seam-edge);
		--canvas-c9: var(--lith-ember-9);
		--canvas-c10: light-dark(var(--lith-ember-6), var(--lith-ember-4));
		--canvas-c11: var(--lith-code-number);
		--canvas-c12: var(--lith-sage-light);
		--canvas-c13: var(--lith-green-dark);
		--canvas-c14: var(--lith-red-light);
		--canvas-c15: var(--lith-red-dark);
	}

	[data-c="0"] { --_c: var(--canvas-c0); }
	[data-c="1"] { --_c: var(--canvas-c1); }
	[data-c="2"] { --_c: var(--canvas-c2); }
	[data-c="3"] { --_c: var(--canvas-c3); }
	[data-c="4"] { --_c: var(--canvas-c4); }
	[data-c="5"] { --_c: var(--canvas-c5); }
	[data-c="6"] { --_c: var(--canvas-c6); }
	[data-c="7"] { --_c: var(--canvas-c7); }
	[data-c="8"] { --_c: var(--canvas-c8); }
	[data-c="9"] { --_c: var(--canvas-c9); }
	[data-c="10"] { --_c: var(--canvas-c10); }
	[data-c="11"] { --_c: var(--canvas-c11); }
	[data-c="12"] { --_c: var(--canvas-c12); }
	[data-c="13"] { --_c: var(--canvas-c13); }
	[data-c="14"] { --_c: var(--canvas-c14); }
	[data-c="15"] { --_c: var(--canvas-c15); }

	
	.cv:has([data-c="0"] > :checked) { --_brush: var(--canvas-c0); }
	.cv:has([data-c="1"] > :checked) { --_brush: var(--canvas-c1); }
	.cv:has([data-c="2"] > :checked) { --_brush: var(--canvas-c2); }
	.cv:has([data-c="3"] > :checked) { --_brush: var(--canvas-c3); }
	.cv:has([data-c="4"] > :checked) { --_brush: var(--canvas-c4); }
	.cv:has([data-c="5"] > :checked) { --_brush: var(--canvas-c5); }
	.cv:has([data-c="6"] > :checked) { --_brush: var(--canvas-c6); }
	.cv:has([data-c="7"] > :checked) { --_brush: var(--canvas-c7); }
	.cv:has([data-c="8"] > :checked) { --_brush: var(--canvas-c8); }
	.cv:has([data-c="9"] > :checked) { --_brush: var(--canvas-c9); }
	.cv:has([data-c="10"] > :checked) { --_brush: var(--canvas-c10); }
	.cv:has([data-c="11"] > :checked) { --_brush: var(--canvas-c11); }
	.cv:has([data-c="12"] > :checked) { --_brush: var(--canvas-c12); }
	.cv:has([data-c="13"] > :checked) { --_brush: var(--canvas-c13); }
	.cv:has([data-c="14"] > :checked) { --_brush: var(--canvas-c14); }
	.cv:has([data-c="15"] > :checked) { --_brush: var(--canvas-c15); }

	
	.cv {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "canvas" "side" "notes";
		gap: var(--lith-space-5) var(--lith-space-6);

		@container stage (width >= 42rem) {
			grid-template-columns: minmax(0, 1fr) 13rem;
			grid-template-areas: "canvas side" "notes side";
			align-items: start;
		}
	}

	
	.cv__probe {
		position: absolute;
		inline-size: 0;
		block-size: 0;
		overflow: hidden;
		transition-property: none;
	}

	.cv__canvas {
		grid-area: canvas;
		display: grid;
		gap: var(--lith-space-3);
	}

	
	.cv__caption {
		padding-inline-end: 5.5rem;
	}

	
	.cv__frame {
		--_n: calc(6px * var(--lith-notch));
		padding: var(--lith-space-2);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background-color: var(--lith-border-subtle);
		box-shadow: inset 0 0 0 1px var(--lith-border);
		transition: background-color var(--lith-dur-4) var(--lith-ease-glide);
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
	}

	
	.cv__frame:has(sb-pixel-board:active) {
		background-color: color-mix(in oklch, var(--_brush, var(--lith-accent)) 55%, var(--lith-border-subtle));
		transition-duration: var(--lith-dur-1);
	}

	
	sb-pixel-board {
		--sb-pixel-board-size: 100%;
		--sb-border: transparent;
		display: block;
		aspect-ratio: 1;
		transition:
			opacity var(--lith-dur-4) var(--lith-ease-glide),
			filter var(--lith-dur-5) var(--lith-ease-glide),
			scale var(--lith-dur-5) var(--lith-ease-glide);

		&:not([palette]) {
			opacity: 0;
			filter: blur(10px);
			scale: 0.97;
		}

		
		&::part(palette) {
			display: none;
		}

		&::part(canvas) {
			border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		}
	}

	.cv__problem {
		max-inline-size: 40rem;
	}

	.cv__side {
		grid-area: side;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-6);

		@container stage (30rem <= width < 42rem) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

			& .cv__palette {
				grid-column: 1 / -1;
			}
		}
	}

	
	.cv__caption,
	.cv__palette legend,
	.cv__here h3,
	.cv__pulse h3 {
		margin-block-end: var(--lith-space-3);
		padding: 0;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	
	.cv__palette {
		min-inline-size: 0;
		margin: 0;
		padding: 0;
		border: 0;

		
		& legend::after {
			content: "";
			display: inline-block;
			inline-size: 0.625rem;
			block-size: 0.625rem;
			margin-inline-start: var(--lith-space-2);
			vertical-align: -0.0625rem;
			background: var(--_brush, transparent);
			box-shadow: 0 0 0 1px color-mix(in oklch, var(--lith-text-1) 25%, transparent);
			transition: background-color var(--lith-dur-3) var(--lith-ease-glide);
		}
	}

	.cv__swatches {
		display: grid;
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: var(--lith-space-1);

		@container stage (width < 42rem) {
			gap: var(--lith-space-2);
		}
	}

	.cv__swatch {
		position: relative;
		display: grid;
		cursor: pointer;
		transition:
			translate var(--lith-dur-1) var(--lith-ease-snap),
			filter var(--lith-dur-2) var(--lith-ease-snap);

		& input {
			--_n: calc(2px * var(--lith-notch));
			appearance: none;
			display: block;
			inline-size: 100%;
			aspect-ratio: 1;
			margin: 0;
			border: 1px solid color-mix(in oklch, var(--lith-text-1) 18%, transparent);
			border-radius: calc(4px * (1 - var(--lith-notch)));
			background: var(--_c);
			clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
			cursor: inherit;
		}

		
		&[data-c="0"] input {
			background:
				linear-gradient(to top right, transparent calc(50% - 1px), var(--lith-text-muted) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
				var(--_c);
		}

		&:hover {
			translate: 0 -1px;
		}

		
		&:has(:checked) {
			translate: 0 -3px;
			filter: drop-shadow(0 3px 0 var(--lith-accent-text));
		}

		&:has(:focus-visible) {
			outline: 2px solid var(--lith-focus);
			outline-offset: 3px;
		}

		
		&.tip {
			text-decoration: none;
			cursor: pointer;
		}

		&:has(:focus-visible) .tip__bubble {
			opacity: 1;
			translate: 0 0;
		}
	}

	
	.cv__painters {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-3) var(--lith-space-2);
		margin: 0;
		padding-block-end: var(--lith-space-2);
	}

	
	.cv__painter {
		--_size: 2.25rem;
		position: relative;
		display: grid;
		place-items: center;
		inline-size: var(--_size);
		block-size: var(--_size);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);
		box-shadow: inset 0 0 0 1px var(--lith-border-subtle), inset 0 0 0 2px var(--_ring, transparent);
		color: var(--_c, var(--lith-text-muted));
		transition:
			opacity var(--lith-dur-3) var(--lith-ease-glide),
			scale var(--lith-dur-3) var(--lith-ease-steps),
			color var(--lith-dur-4) var(--lith-ease-glide);

		@starting-style {
			opacity: 0;
			scale: 0.2;
		}

		& svg {
			inline-size: 1.25rem;
			block-size: 1.25rem;
			shape-rendering: crispEdges;
		}

		& path {
			fill: currentColor;
		}

		
		&:is([data-c="-1"], [data-c="0"]) {
			color: var(--lith-text-muted);

			& path {
				fill: none;
				stroke: currentColor;
				stroke-width: 0.3;
			}
		}

		
		&[data-active] {
			outline: 2px solid currentColor;
			outline-offset: 2px;
			animation: canvas-painting 1.2s steps(2, jump-none) infinite;
		}
	}

	
	.cv__painted {
		position: absolute;
		inset-block-end: 1px;
		inset-inline-end: 2px;
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: 0.5625rem;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	
	.cv__painter::after {
		content: var(--_you, none);
		position: absolute;
		inset-block-end: -0.5rem;
		inset-inline: 0;
		inline-size: fit-content;
		margin-inline: auto;
		padding: 1px 3px;
		border-radius: calc(3px * (1 - var(--lith-notch)));
		background: var(--lith-accent);
		color: var(--lith-on-accent);
		font-family: var(--lith-font-ui);
		font-size: 0.5625rem;
		font-weight: 700;
		letter-spacing: var(--lith-tracking-caps);
		line-height: 1.2;
		text-transform: uppercase;
	}

	.cv__more {
		margin-block-start: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-size: var(--lith-text-xs);
	}

	
	.cv__minute {
		display: flex;
		align-items: baseline;
		gap: var(--lith-space-2);
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);
	}

	
	.cv__n {
		color: var(--lith-text-1);
		font-family: var(--lith-font-display);
		font-size: var(--lith-text-2xl);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		counter-reset: canvas-n var(--canvas-n);
		transition: --canvas-n var(--lith-dur-4) var(--lith-ease-glide);

		&::before {
			content: counter(canvas-n) / "";
		}
	}

	.cv__bars {
		display: flex;
		align-items: end;
		gap: 1px;
		block-size: 2.5rem;
		margin-block: var(--lith-space-3);
		border-block-end: 1px solid var(--lith-border);

		& i {
			flex: 1;
			block-size: round(up, calc(var(--h) * 100%), 2px);
			background: var(--lith-accent);
		}

		
		& i:last-child {
			background: var(--lith-accent-strong);
			box-shadow: 0 0 6px var(--lith-glow-color);
		}
	}

	.cv__facts {
		display: grid;
		gap: var(--lith-space-1);
		margin: 0;
		font-size: var(--lith-text-xs);

		& div {
			display: flex;
			justify-content: space-between;
			gap: var(--lith-space-3);
			padding-block: var(--lith-space-1);
			border-block-end: 1px dashed var(--lith-border-subtle);
		}

		& dt {
			color: var(--lith-text-muted);
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-ui);
			font-variant-numeric: tabular-nums;
		}
	}

	
	.cv__notes {
		grid-area: notes;
		display: grid;
		gap: var(--lith-space-2);
		max-inline-size: 40rem;
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& strong {
			color: var(--lith-text-1);
		}

		& p + p {
			color: var(--lith-text-muted);
		}
	}

	@media (forced-colors: active) {
		.cv__swatch input {
			forced-color-adjust: none;
		}

		.cv__swatch:has(:checked) {
			outline: 2px solid Highlight;
			outline-offset: 2px;
		}
	}
}@keyframes canvas-painting{50%{outline-color:transparent}}@property --canvas-n{syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}}@layer components{@property --bd-target{syntax: "<number>";
	inherits: true;
	initial-value: 0;
}@property --bd-glow{syntax: "<number>";
	inherits: true;
	initial-value: 0;
}@scope([data-demo="board"]){.bd {
		container: bd / inline-size;
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-5);
		-webkit-tap-highlight-color: transparent;
	}

	
	
	.bd__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		margin-block-start: var(--lith-space-4);
		border: 1px solid var(--lith-border-subtle);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);

		@container bd (width < 38rem) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

			& .bd-here {
				grid-column: 1 / -1;
				border-block-end: 1px solid var(--lith-border-subtle);
			}

			& .bd-tick {
				border-inline-start: 0;
			}
		}

		@container bd (width < 26rem) {
			grid-template-columns: minmax(0, 1fr);

			& .bd-rate {
				border-inline-start: 0;
				border-block-start: 1px solid var(--lith-border-subtle);
			}
		}
	}

	.bd-stats {
		display: contents;
	}

	.bd-cell {
		display: grid;
		align-content: start;
		gap: var(--lith-space-2);
		min-inline-size: 0;
		padding: var(--lith-space-3) var(--lith-space-4);
	}

	.bd-tick,
	.bd-rate {
		border-inline-start: 1px solid var(--lith-border-subtle);
	}

	.bd-cell__label {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
		white-space: nowrap;
	}

	.bd-here__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);
		min-block-size: 2rem;
		margin: 0;
	}

	.bd-here__more {
		display: grid;
		place-items: center;
		min-inline-size: 2rem;
		block-size: 2rem;
		padding-inline: var(--lith-space-2);
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		background: var(--lith-surface-2);
	}

	
	.bd-av {
		--_c: light-dark(oklch(52% 0.14 var(--h)), oklch(80% 0.12 var(--h)));
		--_n: calc(2px * var(--lith-notch));
		position: relative;
		outline: calc(2px * var(--bd-me, 0)) solid var(--lith-accent);
		outline-offset: 2px;
		transition: scale var(--lith-dur-3) var(--lith-ease-glide), opacity var(--lith-dur-3) var(--lith-ease-glide);

		@starting-style {
			scale: 0.4;
			opacity: 0;
		}

		& > .bd-face {
			inline-size: 2rem;
			block-size: 2rem;
			padding: 0.25rem;
			background: color-mix(in oklch, var(--_c) 16%, var(--lith-surface-inset));
			box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--_c) 45%, transparent);
			clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, 0 calc(100% - var(--_n)), 0 var(--_n));
			border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		}

		&:hover .bd-av__name {
			opacity: 1;
			translate: -50% 0;
		}
	}

	.bd-av__name {
		position: absolute;
		inset-block-end: calc(100% + 8px);
		inset-inline-start: 50%;
		z-index: var(--lith-z-tooltip);
		inline-size: max-content;
		padding: var(--lith-space-1) var(--lith-space-2);
		background: var(--lith-text-1);
		color: var(--lith-bg);
		font-size: var(--lith-text-xs);
		font-weight: 600;
		pointer-events: none;
		opacity: 0;
		translate: -50% 0.25rem;
		transition: opacity var(--lith-dur-2) var(--lith-ease-glide), translate var(--lith-dur-2) var(--lith-ease-glide);

		&::after {
			content: var(--bd-you, "");
		}
	}

	
	.bd-face {
		display: block;
		color: light-dark(oklch(52% 0.14 var(--h)), oklch(80% 0.12 var(--h)));
		fill: currentColor;
		shape-rendering: crispEdges;
	}

	
	.bd-tick__steps {
		display: flex;
		align-items: baseline;
		gap: var(--lith-space-2);
		min-block-size: 2rem;
		margin: 0;
	}

	.bd-tick__step {
		display: flex;
		align-items: baseline;
		gap: 0.3em;
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);

		& dd {
			order: -1;
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			line-height: 1;
		}

		& + &::before {
			content: "";
			order: -2;
			align-self: center;
			inline-size: 10px;
			block-size: 8px;
			margin-inline-end: var(--lith-space-1);
			background: var(--lith-text-muted);
			clip-path: polygon(0 3px, 6px 3px, 6px 0, 10px 4px, 6px 8px, 6px 5px, 0 5px);
		}
	}

	
	.bd-tick__step--render dd {
		color: var(--lith-accent-text);
		text-shadow: 0 0 0.6em var(--lith-glow-color);
	}

	.bd-tick__none {
		display: flex;
		align-items: center;
		min-block-size: 2rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	.bd-rate__row {
		display: flex;
		align-items: center;
		gap: var(--lith-space-3);
		min-block-size: 2rem;
	}

	.bd-rate__value {
		min-inline-size: 3ch;
		color: var(--lith-text-1);
		font-family: var(--lith-font-code);
		font-size: var(--lith-text-xl);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.bd-rate__line {
		--sb-sparkline-width: 7.5rem;
		--sb-sparkline-height: 1.75rem;
	}

	
	.bd__board {
		position: relative;
	}

	.bd.is-dragging,
	.bd.is-dragging * {
		cursor: grabbing;
	}

	.bd-lanes {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lith-space-3);
		user-select: none;
		-webkit-user-select: none;

		@container bd (width < 32rem) {
			gap: var(--lith-space-2);
		}
	}

	.bd-lane {
		--_edge: color-mix(in oklch, var(--lith-accent) calc(var(--bd-target) * 70%), var(--lith-border-subtle));
		display: grid;
		grid-template-rows: auto 1fr;
		align-content: start;
		gap: var(--lith-space-3);
		min-inline-size: 0;
		min-block-size: 15rem;
		padding: var(--lith-space-3);
		border: 1px solid var(--_edge);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background:
			linear-gradient(color-mix(in oklch, var(--lith-accent) calc(var(--bd-target) * 9%), transparent), transparent 70%),
			color-mix(in oklch, var(--lith-surface-inset) 80%, transparent);
		box-shadow: 0 0 calc(var(--bd-target) * 22px) calc(var(--bd-target) * -6px) var(--lith-glow-color);
		transition: --bd-target var(--lith-dur-2) var(--lith-ease-glide);

	}

	.bd-lane__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-2);
		font-family: var(--lith-font-display);
		font-size: var(--lith-text-lg);
		font-weight: 600;
		line-height: 1.2;

	}

	.bd-lane__count {
		min-inline-size: 1.6rem;
		padding: 0.1rem 0.4rem;
		background: var(--lith-surface-2);
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		text-align: center;
		font-variant-numeric: tabular-nums;
	}

	.bd-lane__cards {
		display: grid;
		align-content: start;
		gap: var(--lith-space-2);
		margin: 0;
	}

	
	@container bd (width < 32rem) {
		.bd-lanes {
			grid-template-columns: minmax(0, 1fr);
		}

		.bd-lane {
			--bd-flow: 1;
			min-block-size: 0;
		}

		.bd-lane__cards {
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
			min-block-size: 3rem;
		}
	}

	.bd-slot {
		view-transition-class: board-card;
	}

	
	.bd-card {
		--_t: light-dark(oklch(42% 0.12 var(--t, 60)), oklch(78% 0.11 var(--t, 60)));
		--_n: calc(3px * var(--lith-notch));
		--_lift: var(--bd-lift, 0);
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "grip title" "grip meta";
		align-items: start;
		gap: var(--lith-space-1) var(--lith-space-2);
		inline-size: 100%;
		padding: var(--lith-space-2) var(--lith-space-3) var(--lith-space-2) var(--lith-space-1);
		border: 1px solid color-mix(in oklch, var(--lith-accent-edge) calc(max(var(--bd-glow), var(--bd-pick, 0)) * 100%), var(--lith-border));
		border-inline-start: 3px solid var(--_t);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background:
			radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--lith-accent) calc(var(--bd-glow) * 30%), transparent), transparent 70%),
			var(--lith-surface-1);
		color: var(--lith-text-1);
		text-align: start;
		cursor: grab;
		touch-action: manipulation;
		-webkit-touch-callout: none;
		
		opacity: calc(1 - 0.62 * var(--_lift) - 0.38 * var(--bd-wait, 0));
		
		outline: calc(2px * max(var(--_lift), var(--bd-wait, 0))) dashed var(--lith-accent);
		outline-offset: -4px;
		translate: 0 calc(-3px * var(--bd-pick, 0));
		box-shadow: 0 calc(10px * var(--bd-pick, 0)) calc(24px * var(--bd-pick, 0)) calc(-10px * var(--bd-pick, 0)) var(--lith-glow-color);
		animation: var(--bd-nudge, none) 460ms var(--lith-ease-snap);
		transition:
			opacity var(--lith-dur-2) var(--lith-ease-glide),
			translate var(--lith-dur-1) var(--lith-ease-snap),
			border-color var(--lith-dur-1) var(--lith-ease-snap),
			background-color var(--lith-dur-1) var(--lith-ease-snap),
			box-shadow var(--lith-dur-2) var(--lith-ease-glide);

		&:hover {
			border-color: var(--lith-border-strong);
			border-inline-start-color: var(--_t);
			background-color: var(--lith-surface-hover);
		}

		&:focus-visible {
			outline: 2px solid var(--lith-focus);
			outline-offset: -5px;
		}

		
		&::after {
			content: "";
			position: absolute;
			inset-block-start: 7px;
			inset-inline-end: 9px;
			inline-size: 5px;
			block-size: 5px;
			background: var(--lith-accent);
			opacity: var(--bd-wait, 0);
			animation: var(--bd-busy, none) 0.8s steps(4, end) infinite;
		}
	}

	.bd-card[data-tag="design"] {
		--t: 320;
	}

	.bd-card[data-tag="server"] {
		--t: 220;
	}

	.bd-card[data-tag="docs"] {
		--t: 145;
	}

	.bd-card[data-tag="ops"] {
		--t: 85;
	}

	
	.bd-card__grip {
		grid-area: grip;
		align-self: stretch;
		inline-size: 10px;
		min-block-size: 1.25rem;
		background:
			radial-gradient(circle at 2px 2px, var(--lith-text-muted) 1.5px, transparent 1.6px) 1px 3px / 6px 6px;
		opacity: 0.35;
		transition: opacity var(--lith-dur-1) var(--lith-ease-snap);

		.bd-card:hover & {
			opacity: 0.9;
		}

		@media (pointer: coarse) {
			inline-size: 18px;
			margin-block: calc(-1 * var(--lith-space-2));
			margin-inline-start: calc(-1 * var(--lith-space-1));
			padding-block: var(--lith-space-2);
			background-position: 5px 9px;
			background-origin: content-box;
			opacity: 0.8;
			touch-action: none;
			cursor: grab;
		}
	}

	.bd-card__title {
		grid-area: title;
		font-size: var(--lith-text-sm);
		font-weight: 600;
		line-height: 1.35;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.bd-card__meta {
		grid-area: meta;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-2);
		min-block-size: 14px;
	}

	.bd-tag {
		padding: 0 0.35rem;
		background: color-mix(in oklch, var(--_t) 14%, transparent);
		color: var(--_t);
		font-family: var(--lith-font-ui);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.02em;

		@container bd (width < 20rem) {
			display: none;
		}
	}

	.bd-card__by {
		margin-inline-start: auto;

		& .bd-face {
			inline-size: 14px;
			block-size: 14px;
		}
	}

	
	.bd-slot[data-landed="0"] {
		animation: bd-landed-a 1.8s var(--lith-ease-glide);
	}

	.bd-slot[data-landed="1"] {
		animation: bd-landed-b 1.8s var(--lith-ease-glide);
	}

	
	.bd-last {
		grid-column: 1 / -1;
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		min-block-size: 1.5rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);

		& b {
			color: var(--lith-text-2);
			font-weight: 600;
		}
	}

	.bd-last__face {
		flex: none;

		& .bd-face {
			inline-size: 1.25rem;
			block-size: 1.25rem;
		}
	}

	
	.bd-marker {
		--_e: var(--bd-edge, 0);
		position: absolute;
		position-anchor: --bd-slot;
		inset-block-start: calc(anchor(top) * (1 - var(--_e)) + anchor(bottom) * var(--_e) + (var(--_e) * 2 - 1) * var(--lith-space-1));
		inset-inline: anchor(left) anchor(right);
		z-index: var(--lith-z-raised);
		block-size: 4px;
		translate: 0 -50%;
		background: var(--lith-accent);
		box-shadow: 0 0 12px var(--lith-glow-color);
		pointer-events: none;
		opacity: var(--bd-on, 0);
		transition:
			opacity var(--lith-dur-1) var(--lith-ease-snap),
			inset-block-start var(--lith-dur-1) var(--lith-ease-snap);

		
		&::before,
		&::after {
			content: "";
			position: absolute;
			inset-block-start: -3px;
			inline-size: 4px;
			block-size: 10px;
			background: inherit;
		}

		&::before {
			inset-inline-start: 0;
		}

		&::after {
			inset-inline-end: 0;
		}
	}

	
	@container bd (width < 32rem) {
		.bd-marker {
			inset-block: anchor(top) anchor(bottom);
			inset-inline: auto;
			inset-inline-start: calc(anchor(left) * (1 - var(--_e)) + anchor(right) * var(--_e) + (var(--_e) * 2 - 1) * var(--lith-space-1));
			inline-size: 4px;
			block-size: auto;
			translate: -50% 0;

			&::before,
			&::after {
				inset-inline-start: -3px;
				inline-size: 10px;
				block-size: 4px;
			}

			&::before {
				inset-block-start: 0;
			}

			&::after {
				inset-block: auto 0;
				inset-inline-end: auto;
			}
		}
	}

	@supports not (anchor-name: --bd-slot) {
		.bd-marker {
			display: none;
		}
	}

	
	.bd-ghost {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: var(--lith-z-overlay);
		pointer-events: none;
		rotate: -2deg;
		scale: 1.04;
		filter: drop-shadow(0 14px 18px light-dark(oklch(30% 0.01 60 / 0.28), oklch(0% 0 0 / 0.6)));
		transition: rotate var(--lith-dur-2) var(--lith-ease-snap), scale var(--lith-dur-2) var(--lith-ease-snap);

		@starting-style {
			rotate: 0deg;
			scale: 1;
		}

		& .bd-card {
			border-color: var(--lith-accent-edge);
			border-inline-start-color: var(--_t);
			background: var(--lith-surface-1);
			opacity: 1;
			outline: 0;
			animation: none;
			cursor: grabbing;
		}
	}

	
	.bd__foot {
		display: grid;
		gap: var(--lith-space-2);
	}

	.bd__help {
		max-inline-size: 46rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	
	.bd-embed {
		container: bd / inline-size;
		display: grid;
		gap: var(--lith-space-4);
		padding: var(--lith-space-5);
		border: 1px solid var(--lith-border);
		background: var(--lith-surface-inset);

		& > .btn {
			justify-self: start;
		}

		
		& .bd-cell {
			padding: 0;
			border: 0;
		}

		& .bd-tick__step dd,
		& .bd-rate__value {
			font-size: var(--lith-text-lg);
		}
	}

	.bd-embed__head {
		display: flex;
		align-items: center;
		gap: var(--lith-space-2);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	.bd-embed__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
		}
	}

	.bd-embed__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--lith-space-5);

		@container bd (width < 30rem) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.bd-embed__side {
		display: grid;
		align-content: start;
		gap: var(--lith-space-4);
	}

	
	.bd-mini {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lith-space-2);
	}

	.bd-mini__lane {
		display: grid;
		align-content: start;
		gap: var(--lith-space-2);
		min-block-size: 8.5rem;
		padding: var(--lith-space-2);
		border: 1px solid var(--lith-border-subtle);
		background: var(--lith-surface-1);
	}

	.bd-mini__name {
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.625rem;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bd-mini__cards {
		display: grid;
		gap: 4px;
		margin: 0;
	}

	.bd-mini__card {
		--_t: light-dark(oklch(48% 0.13 var(--t, 60)), oklch(78% 0.11 var(--t, 60)));
		block-size: 12px;
		border-inline-start: 3px solid var(--_t);
		background:
			linear-gradient(90deg, color-mix(in oklch, var(--lith-text-muted) 45%, transparent) 0 55%, transparent 55%) 4px 4px / calc(100% - 10px) 3px no-repeat,
			var(--lith-surface-2);
		transition:
			translate var(--lith-dur-5) var(--lith-ease-glide),
			opacity var(--lith-dur-5) var(--lith-ease-glide),
			box-shadow 2.4s var(--lith-ease-glide),
			background-color 2.4s var(--lith-ease-glide);

		&[data-tag="design"] {
			--t: 320;
		}

		&[data-tag="server"] {
			--t: 220;
		}

		&[data-tag="docs"] {
			--t: 145;
		}

		&[data-tag="ops"] {
			--t: 85;
		}

		&[data-fresh] {
			@starting-style {
				translate: 0 -0.5rem;
				opacity: 0;
				background-color: var(--lith-accent);
				box-shadow: 0 0 16px var(--lith-glow-color), inset 0 0 0 1px var(--lith-accent);
			}
		}
	}

	
	@media (forced-colors: active) {
		.bd-card {
			border-color: CanvasText;
		}

		.bd-lane {
			outline: calc(2px * var(--bd-target)) solid Highlight;
		}

		.bd-marker {
			background: Highlight;
		}
	}
}@keyframes bd-nudge{0%,100%{translate:0 0}20%,60%{translate:-4px 0}40%,80%{translate:4px 0}}@keyframes bd-busy{0%{translate:0 0}25%{translate:-5px 0}50%{translate:-5px 5px}75%{translate:0 5px}}@keyframes bd-landed-a{from{--bd-glow:1}}@keyframes bd-landed-b{from{--bd-glow:1}}::view-transition-group(.board-card){animation-duration:var(--lith-dur-5);animation-timing-function:var(--lith-ease-glide)}::view-transition-old(.board-card){animation:none;opacity:0}::view-transition-new(.board-card){animation:none}::view-transition-group(.board-moved){z-index:1}::view-transition-image-pair(.board-moved){animation:bd-carry var(--lith-dur-5)var(--lith-ease-glide)}@keyframes bd-carry{40%{scale:1.05;filter:drop-shadow(0 12px 14px oklch(0% 0 0/.35))}}[data-demo=board] .bd.is-dragging #board-lanes::view-transition-group(*),[data-demo=board] .bd.is-dragging #board-lanes::view-transition-image-pair(*),[data-demo=board] .bd.is-dragging #board-lanes::view-transition-old(*),[data-demo=board] .bd.is-dragging #board-lanes::view-transition-new(*){animation:none}}@layer components{@scope([data-demo="town"]){:scope {
		--town-grass: light-dark(oklch(80% 0.09 132), oklch(42% 0.06 140));
		--town-grass-line: light-dark(oklch(74% 0.09 132), oklch(38% 0.06 140));
		--town-water: light-dark(oklch(70% 0.09 228), oklch(40% 0.075 240));
		--town-wave: light-dark(oklch(86% 0.06 220), oklch(56% 0.08 235));
		--town-wall: light-dark(oklch(97% 0.01 80), oklch(90% 0.015 80));
		--town-wall-2: light-dark(oklch(84% 0.015 80), oklch(72% 0.015 80));
		--town-door: oklch(42% 0.06 50);
		--town-window: oklch(40% 0.03 240);
		--town-leaf: light-dark(oklch(50% 0.12 145), oklch(56% 0.11 145));
		--town-leaf-2: light-dark(oklch(63% 0.13 138), oklch(69% 0.12 138));
		--town-trunk: oklch(42% 0.06 55);
		--town-road: light-dark(oklch(54% 0.008 70), oklch(29% 0.008 70));
		--town-wood: oklch(58% 0.07 62);
	}

	.town {
		container: town / inline-size;
		margin-block-start: var(--lith-space-4);
	}

	.town__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-6);

		@container town (width >= 44rem) {
			grid-template-columns: minmax(0, 3fr) minmax(15rem, 2fr);
		}
	}

	.town__main {
		display: grid;
		align-content: start;
		gap: var(--lith-space-4);
	}

	.town-sheet {
		position: absolute;
		inline-size: 0;
		block-size: 0;
		overflow: hidden;
	}

	
	.town-tools {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);
		margin: 0;
		padding: 0;
		border: 0;
	}

	.town-tool {
		--_n: calc(3px * var(--lith-notch));
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		padding: var(--lith-space-1) var(--lith-space-3) var(--lith-space-1) var(--lith-space-1);
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-sm);
		background: var(--lith-surface-1);
		box-shadow: inset 0 0 0 1px var(--lith-border);
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, 0 calc(100% - var(--_n)), 0 var(--_n));
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		cursor: pointer;
		transition: background var(--lith-dur-2) var(--lith-ease-snap), box-shadow var(--lith-dur-2) var(--lith-ease-snap);

		& input {
			position: absolute;
			inset: 0;
			margin: 0;
			opacity: 0;
			cursor: inherit;
		}

		&:hover {
			background: var(--lith-surface-hover);
		}

		&:has(input:checked) {
			color: var(--lith-text-1);
			background: var(--lith-accent-subtle);
			box-shadow: inset 0 0 0 2px var(--lith-accent);
		}

		&:has(input:focus-visible) {
			box-shadow: inset 0 0 0 2px var(--lith-focus);
		}

		&:has(input:disabled) {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}

	.town-tool__icon {
		display: grid;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		background: var(--town-grass);

		.town-tool[data-k="water"] & {
			background: var(--town-water);
		}

		& svg {
			inline-size: 100%;
			block-size: 100%;
			shape-rendering: crispEdges;
		}
	}

	
	.town-board {
		position: relative;
		padding: var(--lith-frame-step, 4px);
		background: var(--lith-surface-inset);
		box-shadow: inset 0 0 0 1px var(--lith-border);
	}

	.town-map {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		background: var(--town-grass);
		transition: filter var(--lith-dur-4) var(--lith-ease-glide);

		
		.is-past > & {
			filter: sepia(0.4) saturate(0.75);
		}
	}

	.town-tile,
	.town-tool__icon {
		--_roof: light-dark(oklch(55% 0.15 var(--h, 30)), oklch(63% 0.14 var(--h, 30)));
		--_roof-2: light-dark(oklch(45% 0.13 var(--h, 30)), oklch(52% 0.13 var(--h, 30)));
		--_pave: var(--town-road);
	}

	.town-tile {
		display: grid;
		aspect-ratio: 1;
		min-inline-size: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: var(--town-grass);
		box-shadow: inset 0 0 0 0.5px var(--town-grass-line);
		outline: calc(3px * var(--town-wait, 0)) solid var(--lith-accent);
		outline-offset: -3px;
		cursor: pointer;

		&[data-k="water"],
		&[data-k="bridge"] {
			background: var(--town-water);
			box-shadow: none;
		}

		&[data-k="road"] {
			box-shadow: none;
		}

		&[data-k="bridge"] {
			--_pave: var(--town-wood);
		}

		
		& svg {
			inline-size: 100%;
			block-size: 100%;
			shape-rendering: crispEdges;
			pointer-events: none;
			transition: scale var(--lith-dur-2) var(--lith-ease-snap), opacity var(--lith-dur-2) var(--lith-ease-snap);

			@starting-style {
				scale: 0.6;
				opacity: 0;
			}
		}

		&:hover:not([aria-disabled]) {
			filter: brightness(1.12);
		}

		&:focus-visible {
			outline: 3px solid var(--lith-focus);
			outline-offset: -3px;
		}

		&[aria-disabled] {
			cursor: default;
		}
	}

	
	.town-board[aria-busy="true"]::after {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		inline-size: var(--lith-frame-step, 4px);
		block-size: var(--lith-frame-step, 4px);
		background: var(--lith-accent);
		animation: town-blink 0.4s var(--lith-ease-steps) infinite;
	}

	
	.town-time {
		display: grid;
		gap: var(--lith-space-2);
	}

	.town-slider {
		appearance: none;
		inline-size: 100%;
		block-size: 1.75rem;
		margin: 0;
		background: transparent;
		cursor: pointer;

		&::-webkit-slider-runnable-track {
			block-size: 0.5rem;
			background: var(--lith-surface-inset);
			box-shadow: inset 0 0 0 1px var(--lith-border-strong);
		}

		&::-moz-range-track {
			block-size: 0.5rem;
			background: var(--lith-surface-inset);
			box-shadow: inset 0 0 0 1px var(--lith-border-strong);
		}

		&::-webkit-slider-thumb {
			appearance: none;
			inline-size: 0.875rem;
			block-size: 1.5rem;
			margin-block-start: -0.5rem;
			border: 0;
			border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
			background: var(--lith-accent);
			box-shadow: 0 0 0 2px var(--lith-bg), 0 0 12px var(--lith-glow-color);
		}

		&::-moz-range-thumb {
			inline-size: 0.875rem;
			block-size: 1.5rem;
			border: 0;
			border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
			background: var(--lith-accent);
			box-shadow: 0 0 0 2px var(--lith-bg), 0 0 12px var(--lith-glow-color);
		}

		&:focus-visible {
			outline: 2px solid var(--lith-focus);
			outline-offset: 2px;
		}

		&:disabled {
			cursor: default;
			opacity: 0.5;
		}
	}

	.town-time__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-3);
	}

	.town-time__pos {
		color: var(--lith-text-2);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-sm);
		font-variant-numeric: tabular-nums;
	}

	.town-past {
		color: var(--lith-accent-text);
		font-size: var(--lith-text-sm);
	}

	
	.town-log {
		display: grid;
		align-content: start;
		gap: var(--lith-space-2);
	}

	.town-when {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--lith-space-1) var(--lith-space-3);
		min-block-size: 1.75rem;
		margin: 0;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		font-weight: 400;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;

		& b {
			color: var(--lith-text-1);
			font-size: var(--lith-text-sm);
			font-weight: 600;
			letter-spacing: normal;
			text-transform: none;
		}
	}

	.town-events {
		display: grid;
		gap: 2px;
		margin: 0;
		padding: 0;

		&:empty {
			display: none;
		}
	}

	.town-ev {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--lith-space-2);
		padding: var(--lith-space-1) var(--lith-space-2);
		border-inline-start: 3px solid transparent;
		background: var(--lith-surface-1);
		color: var(--lith-text-2);
		font-size: var(--lith-text-sm);
		line-height: var(--lith-leading-snug);

		& b {
			color: var(--lith-text-1);
			font-weight: 600;
		}

		& time {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			font-variant-numeric: tabular-nums;
		}

		&[data-here] {
			border-inline-start-color: var(--lith-accent);
			background: var(--lith-surface-2);
		}

		
		.town-events--later > & {
			opacity: 0.6;
		}
	}

	.town-ev__face {
		--_c: light-dark(oklch(52% 0.14 var(--h)), oklch(80% 0.12 var(--h)));
		display: grid;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		padding: 0.1875rem;
		background: color-mix(in oklch, var(--_c) 16%, var(--lith-surface-inset));

		& svg {
			inline-size: 100%;
			block-size: 100%;
			fill: var(--_c);
			shape-rendering: crispEdges;
		}
	}

	@media (forced-colors: active) {
		.town-tile:focus-visible,
		.town-tool:has(input:focus-visible) {
			outline: 3px solid CanvasText;
		}
	}
}@keyframes town-blink{50%{opacity:0}}}@layer components{@property --cursor-party-here{syntax: "<integer>";
	inherits: true;
	initial-value: 0;
}@property --cursor-party-rate{syntax: "<integer>";
	inherits: true;
	initial-value: 0;
}@scope([data-demo="cursor-party"]){:scope {
		
		--_h0: light-dark(var(--lith-ember-8), var(--lith-ember-4));
		--_h1: light-dark(var(--lith-gold-dark), var(--lith-gold-light));
		--_h2: light-dark(var(--lith-sage-dark), var(--lith-sage-light));
		--_h3: light-dark(var(--lith-green-dark), var(--lith-green-light));
		--_h4: light-dark(var(--lith-red-dark), var(--lith-red-light));
		--_h5: light-dark(var(--lith-stone-7), var(--lith-stone-3));
		--_on-hue: light-dark(var(--lith-paper-raised), var(--lith-stone-12));
		--_halo: light-dark(var(--lith-paper-raised), var(--lith-stone-13));

		
		--_arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26' shape-rendering='crispEdges'%3E%3Cpath d='M0 0H2V2H4V4H6V6H8V8H10V10H12V12H14V14H16V18H8V20H6V22H4V24H2V26H0Z'/%3E%3C/svg%3E");
		--_arrow-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26' shape-rendering='crispEdges'%3E%3Cpath d='M2 4H4V6H6V8H8V10H10V12H12V14H14V16H8V18H6V20H4V22H2Z'/%3E%3C/svg%3E");
	}

	
	:root[data-lith-style="smooth"] :scope {
		--_arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'%3E%3Cpath d='M0 0L16 15.5L7.3 16.5L0 24.5Z'/%3E%3C/svg%3E");
		--_arrow-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'%3E%3Cpath d='M2 4.7L11.6 14L6.3 14.6L2 19.3Z'/%3E%3C/svg%3E");
	}

	
	.cp {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
		padding-block-start: var(--lith-space-5);
	}

	
	.cp__floor {
		--_dot: color-mix(in oklch, var(--lith-border-strong) 60%, transparent);
		--_n: calc(4px * var(--lith-notch));
		container: party / size;
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: clip;
		touch-action: none;
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background:
			radial-gradient(ellipse 60% 70% at 50% 45%, var(--lith-accent-subtle), transparent 70%),
			radial-gradient(circle, var(--_dot) 1px, transparent 1.5px) 0 0 / 24px 24px,
			var(--lith-surface-inset);
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, 0 calc(100% - var(--_n)), 0 var(--_n));

		@container stage (width < 34rem) {
			aspect-ratio: 4 / 3;
		}
	}

	
	.cp__hint {
		position: absolute;
		inset: 0;
		display: grid;
		place-content: center;
		justify-items: center;
		gap: var(--lith-space-3);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-display);
		font-size: clamp(var(--lith-text-md), 4cqi, var(--lith-text-2xl));
		text-align: center;
		pointer-events: none;
		user-select: none;
	}

	
	.cp__arrow {
		inline-size: 16px;
		block-size: 26px;
		background: var(--lith-border-strong);
		mask: var(--_arrow) 0 0 / 100% 100% no-repeat;
		scale: 2;
		margin-block-end: 26px;
		transform-origin: 50% 0;
	}

	.cp__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--lith-space-2) var(--lith-space-6);
	}

	.cp__note {
		max-inline-size: 38rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	
	.cp--hero {
		position: absolute;
		inset: 0;
		display: block;
		padding: 0;

		
		& .cp-layer {
			opacity: 0.85;
		}

		
		& .cp__floor {
			position: absolute;
			inset: 0;
			aspect-ratio: auto;
			border: 0;
			border-radius: 0;
			background: none;
			clip-path: none;
			touch-action: pan-y pinch-zoom;
		}
	}

	
	.cp-badge {
		--_n: calc(3px * var(--lith-notch));
		position: absolute;
		inset-block-end: var(--lith-space-5);
		inset-inline-end: max(clamp(var(--lith-space-4), 4vw, var(--lith-space-8)), (100cqi - var(--lith-content-max)) / 2);
		display: inline-flex;
		align-items: center;
		gap: var(--lith-space-2);
		padding: var(--lith-space-1) var(--lith-space-3);
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-sm) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, calc(100% - var(--_n)) var(--_n), 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, var(--_n) calc(100% - var(--_n)), 0 calc(100% - var(--_n)), 0 var(--_n), var(--_n) var(--_n));
		background: var(--lith-surface-overlay);
		backdrop-filter: blur(8px);
		color: var(--lith-text-1);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		line-height: 1.6;
		text-decoration: none;
		white-space: nowrap;
		transition: border-color var(--lith-dur-1) var(--lith-ease-snap), translate var(--lith-dur-1) var(--lith-ease-snap);

		&:hover {
			border-color: var(--lith-text-muted);
			translate: 0 -1px;
		}

		&:focus-visible {
			outline-offset: -4px;
		}

		@container party (width < 30rem) {
			inset-block-end: var(--lith-space-3);
		}
	}

	.cp-badge__title {
		font-weight: 600;
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;
	}

	
	.cp-badge__dot {
		inline-size: 6px;
		block-size: 6px;
		background: var(--lith-text-muted);
		border-radius: calc(50% * (1 - var(--lith-notch)));

		.is-live > & {
			background: var(--lith-ok);
			box-shadow: 0 0 8px var(--lith-ok);
		}
	}

	
	.cp-count {
		display: inline-flex;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		white-space: nowrap;
		transition:
			--cursor-party-here var(--lith-dur-3) var(--lith-ease-glide),
			--cursor-party-rate var(--lith-dur-5) var(--lith-ease-glide);

		
		& b {
			color: var(--lith-text-1);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
		}

		& b[data-n="here"]::before {
			counter-reset: here var(--cursor-party-here);
			content: counter(here);
		}

		& b[data-n="rate"]::before {
			counter-reset: rate var(--cursor-party-rate);
			content: counter(rate);
		}

		& i::before {
			content: "·";
			padding-inline: 0.4em;
			font-style: normal;
		}

		
		& sb-sparkline {
			--sb-sparkline-width: 4.5rem;
			--sb-sparkline-height: 1rem;
			margin-inline-start: var(--lith-space-3);
		}

		& sb-sparkline:not(:defined) {
			display: inline-block;
			inline-size: var(--sb-sparkline-width);
			block-size: var(--sb-sparkline-height);
		}

		.cp-badge & {
			align-items: center;
			padding-inline-start: var(--lith-space-2);
			border-inline-start: 1px solid var(--lith-border);

			
			@container party (width < 34rem) {
				& sb-sparkline {
					display: none;
				}
			}
		}

		
		.cp__bar & {
			align-items: baseline;
			font-size: var(--lith-text-sm);

			& b {
				color: var(--lith-accent-text);
				font-size: var(--lith-text-xl);
				line-height: 1;
			}

			& sb-sparkline {
				--sb-sparkline-width: 9rem;
				--sb-sparkline-height: 1.75rem;
				align-self: center;
				margin-inline-start: var(--lith-space-4);
			}
		}
	}

	
	.cp-layer {
		position: absolute;
		inset: 0;
		isolation: isolate;
		pointer-events: none;
	}

	
	.cp-layer > i {
		--_c: var(--_h0);
		--_ax: 0px;
		--_ay: 0px;
		--_aw: 100cqi;
		--_ah: 100cqb;
		--_x: clamp(0px, calc(var(--_ax) + var(--x) * var(--_aw) / 100), 100cqi);
		--_y: clamp(0px, calc(var(--_ay) + var(--y) * var(--_ah) / 100), 100cqb);
		position: absolute;
		inset: 0 auto auto 0;
		font-style: normal;
		transition: opacity var(--lith-dur-2) var(--lith-ease-glide);

		
		@starting-style {
			opacity: 0;
		}

		&[data-a="L"] {
			--_ax: var(--cp-L-x, 0px);
			--_ay: var(--cp-L-y, 0px);
			--_aw: var(--cp-L-w, 0px);
			--_ah: var(--cp-L-h, 0px);
		}

		&[data-a="I"] {
			--_ax: var(--cp-I-x, 0px);
			--_ay: var(--cp-I-y, 0px);
			--_aw: var(--cp-I-w, 0px);
			--_ah: var(--cp-I-h, 0px);
		}

		&[data-a="T"] {
			--_ax: var(--cp-T-x, 0px);
			--_ay: var(--cp-T-y, 0px);
			--_aw: var(--cp-T-w, 0px);
			--_ah: var(--cp-T-h, 0px);
		}

		&[data-a="H"] {
			--_ax: var(--cp-H-x, 0px);
			--_ay: var(--cp-H-y, 0px);
			--_aw: var(--cp-H-w, 0px);
			--_ah: var(--cp-H-h, 0px);
		}

		&[data-a="art"] {
			--_ax: var(--cp-art-x, 0px);
			--_ay: var(--cp-art-y, 0px);
			--_aw: var(--cp-art-w, 0px);
			--_ah: var(--cp-art-h, 0px);
		}

		&[data-a="lede"] {
			--_ax: var(--cp-lede-x, 0px);
			--_ay: var(--cp-lede-y, 0px);
			--_aw: var(--cp-lede-w, 0px);
			--_ah: var(--cp-lede-h, 0px);
		}

		&[data-a="go"] {
			--_ax: var(--cp-go-x, 0px);
			--_ay: var(--cp-go-y, 0px);
			--_aw: var(--cp-go-w, 0px);
			--_ah: var(--cp-go-h, 0px);
		}

		&[data-h="1"] {
			--_c: var(--_h1);
		}

		&[data-h="2"] {
			--_c: var(--_h2);
		}

		&[data-h="3"] {
			--_c: var(--_h3);
		}

		&[data-h="4"] {
			--_c: var(--_h4);
		}

		&[data-h="5"] {
			--_c: var(--_h5);
		}

		
		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: 0 auto auto 0;
			z-index: 0;
			inline-size: 6px;
			block-size: 6px;
			border-radius: calc(50% * (1 - var(--lith-notch)));
			background: var(--_c);
			box-shadow: 0 0 10px 1px color-mix(in oklch, var(--_c) 60%, transparent);
			opacity: 0.6;
			translate: calc(var(--_x) + 3px) calc(var(--_y) + 9px);
			transition: translate 180ms linear;
		}

		&::after {
			inline-size: 4px;
			block-size: 4px;
			opacity: 0.35;
			translate: calc(var(--_x) + 4px) calc(var(--_y) + 10px);
			transition-duration: 260ms;
		}
	}

	
	.cp-layer:has(> i:nth-child(24)) > i::before,
	.cp-layer:has(> i:nth-child(24)) > i::after {
		display: none;
	}

	
	.cp-layer > i[data-idle] {
		opacity: 0;
		transition: opacity 1.6s var(--lith-ease-exit);
	}

	
	.cp-layer b {
		--_fx: 0;
		--_fy: 0;
		--_n: calc(2px * var(--lith-notch));
		--_tip-x: calc(-17px + var(--_fx) * (100% + 22px));
		--_tip-y: calc(-25px + var(--_fy) * (100% + 31px));
		position: absolute;
		inset: 0 auto auto 0;
		z-index: 1;
		padding: 0 4px;
		border-radius: calc(4px * (1 - var(--lith-notch)));
		background: var(--_c);
		box-shadow:
			var(--_n) 0 0 0 var(--_c),
			calc(-1 * var(--_n)) 0 0 0 var(--_c),
			0 var(--_n) 0 0 var(--_c),
			0 calc(-1 * var(--_n)) 0 0 var(--_c);
		color: var(--_on-hue);
		font-family: var(--lith-font-ui);
		font-size: 11px;
		font-weight: 600;
		line-height: 15px;
		white-space: nowrap;
		translate:
			calc(var(--_x) + 17px - var(--_fx) * (100% + 22px))
			calc(var(--_y) + 25px - var(--_fy) * (100% + 31px));
		transform-origin: var(--_tip-x) var(--_tip-y);
		transition:
			translate 120ms linear,
			scale var(--lith-dur-3) var(--lith-ease-snap),
			opacity var(--lith-dur-3) var(--lith-ease-glide);

		
		@starting-style {
			scale: 0.2;
			opacity: 0;
		}

		
		&::before,
		&::after {
			content: "";
			position: absolute;
			inset-inline-start: var(--_tip-x);
			inset-block-start: var(--_tip-y);
			inline-size: 16px;
			block-size: 26px;
			background: var(--_halo);
			mask: var(--_arrow) 0 0 / 100% 100% no-repeat;
		}

		&::after {
			background: var(--_c);
			mask-image: var(--_arrow-fill);
		}
	}

	
	@supports (inline-size: calc(sign(1px) * 1px)) {
		.cp-layer b {
			--_edge-x: 90;
			--_edge-y: 92;
			--_fx: max(0, sign(var(--_x) - var(--_edge-x) * 1cqi));
			--_fy: max(0, sign(var(--_y) - var(--_edge-y) * 1cqb));

			@container party (width < 60rem) {
				--_edge-x: 82;
			}

			@container party (width < 30rem) {
				--_edge-x: 66;
			}

			@container party (height < 22rem) {
				--_edge-y: 84;
			}
		}
	}

	
	@media (prefers-reduced-motion: reduce) {
		.cp-layer > i::before,
		.cp-layer > i::after {
			display: none;
		}

		.cp-layer > i,
		.cp-layer > i[data-idle],
		.cp-layer b,
		.cp-count {
			transition: none;
		}
	}

	
	@media (forced-colors: active) {
		.cp-layer b {
			border: 1px solid CanvasText;

			&::before {
				background: CanvasText;
				forced-color-adjust: none;
			}

			&::after {
				background: Canvas;
				forced-color-adjust: none;
			}
		}
	}
}}@layer components{@scope([data-demo="checkboxes"]){.cb {
		--cb-chrome: 34px;
		--_pitch: var(--cb-pitch, 20px);
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
	}

	
	.cb-jump {
		display: grid;
		gap: var(--lith-space-1);
		inline-size: min(100%, 19rem);

		& label {
			color: var(--lith-text-2);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			font-weight: 600;
			letter-spacing: 0.02em;
			transition: color var(--lith-dur-1) var(--lith-ease-snap);
		}

		&:has(:focus-visible) label {
			color: var(--lith-accent-text);
		}

		& .input {
			font-family: var(--lith-font-code);
			font-variant-numeric: tabular-nums;
		}
	}

	.cb-jump__row {
		display: flex;
		gap: var(--lith-space-2);

		& .btn {
			flex: none;
			min-block-size: auto;
		}
	}

	
	.cb-stats {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
		margin: 0;
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background: var(--lith-surface-1);

		@container stage (width < 32rem) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.cb-stat {
		display: grid;
		align-content: start;
		gap: var(--lith-space-1);
		padding: var(--lith-space-3) var(--lith-space-4);

		& + & {
			border-inline-start: 1px solid var(--lith-border-subtle);
		}

		& dt {
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			letter-spacing: var(--lith-tracking-caps);
			text-transform: uppercase;
		}

		
		& dd {
			order: -1;
			margin: 0;
			color: var(--lith-accent-text);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-weight: 700;
			font-variant-numeric: tabular-nums;
			line-height: 1.25;
		}
	}

	
	.cb-stat--rate {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--lith-space-3);

		& dt {
			grid-column: 1 / -1;
		}

		& dd {
			min-inline-size: 2ch;
		}

		@container stage (width < 32rem) {
			grid-column: 1 / -1;
			order: 1;
			border-block-start: 1px solid var(--lith-border-subtle);

			.cb-stat + & {
				border-inline-start: 0;
			}
		}
	}

	.cb-stat__trend {
		--sb-sparkline-width: 100%;
		--sb-sparkline-height: 1.5rem;
		order: -1;
		align-self: center;
		min-inline-size: 0;
	}

	.cb__problem {
		margin-block: calc(-1 * var(--lith-space-2));
	}

	
	.cb__frame {
		container: cb-frame / inline-size;
		
		timeline-scope: --cb-grid;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-2);
	}

	
	.cb-where {
		display: none;
		align-items: center;
		gap: var(--lith-space-3);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.6875rem;
		font-variant-numeric: tabular-nums;
	}

	.cb-where__rail {
		position: relative;
		flex: 1;
		block-size: 2px;
		background:
			linear-gradient(90deg, transparent calc(25% - 1px), var(--lith-border-strong) 0 calc(25% + 1px), transparent 0 calc(50% - 1px), var(--lith-border-strong) 0 calc(50% + 1px), transparent 0 calc(75% - 1px), var(--lith-border-strong) 0 calc(75% + 1px), transparent 0) 0 50% / 100% 6px no-repeat,
			linear-gradient(var(--lith-border), var(--lith-border));
	}

	.cb-where__mark {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0;
		inline-size: 10px;
		block-size: 6px;
		translate: -50% -50%;
		background: var(--lith-accent);
		box-shadow: 0 0 8px var(--lith-glow-color);
	}

	@supports (animation-timeline: scroll()) and (timeline-scope: --cb-grid) {
		.cb-where {
			display: flex;
		}

		.cb-grid::part(scroller) {
			scroll-timeline: --cb-grid block;
		}

		.cb-where__mark {
			animation: cb-where linear both;
			animation-timeline: --cb-grid;
		}
	}

	.cb-grid {
		
		--sb-surface-hover: color-mix(in oklch, var(--lith-border-subtle) 50%, transparent);
		block-size: min(38rem, 70dvh);
		border: 1px solid var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		background:
			radial-gradient(ellipse 80% 50% at 50% 0%, var(--lith-accent-subtle), transparent),
			var(--lith-surface-inset);
		box-shadow: inset 0 1px 0 var(--lith-border-subtle);

		
		&::part(scroller) {
			mask-image: linear-gradient(#000 calc(100% - 1.5rem), transparent);
		}
	}

	
	sb-virtual-scroll:not(:defined) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: calc(16 * var(--_pitch) + var(--cb-chrome));
		overflow: hidden;

		@container cb-frame (width >= 600px) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.cb-slot {
		display: grid;
		justify-items: center;
		align-content: start;
		padding-block-start: 0.75rem;
	}

	.cb-tile {
		display: grid;
		grid-template-rows: 1.25rem auto;
		inline-size: calc(16 * var(--_pitch) - 2px);

		
		transition:
			opacity var(--lith-dur-3) var(--lith-ease-glide),
			translate var(--lith-dur-3) var(--lith-ease-glide);

		@starting-style {
			opacity: 0;
			translate: 0 0.5rem;
		}
	}

	.cb-tile__head {
		display: flex;
		align-items: start;
		gap: var(--lith-space-3);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: 0.6875rem;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	
	.cb-tile__eyes {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		color: var(--lith-text-2);
		transition: opacity var(--lith-dur-3) var(--lith-ease-glide);

		@starting-style {
			opacity: 0;
		}

		&::before {
			content: "";
			inline-size: 5px;
			block-size: 5px;
			background: var(--lith-ok);
			box-shadow: 0 0 6px var(--lith-ok);
		}
	}

	.cb-tile__on {
		margin-inline-start: auto;
		color: var(--lith-accent-text);
	}

	.cb-boxes {
		display: grid;
		grid-template-columns: repeat(16, calc(var(--_pitch) - 2px));
		grid-auto-rows: calc(var(--_pitch) - 2px);
		gap: 2px;
	}

	
	.cb-boxes > input,
	.cb-key {
		--cb-lit: 0;
		--_on: calc(var(--cb-lit) * 100%);
		appearance: none;
		margin: 0;
		border: 1px solid color-mix(in oklch, var(--lith-accent-edge) var(--_on), var(--lith-border));
		border-radius: calc(var(--lith-radius-sm) * 0.5 * (1 - var(--lith-notch)));
		background: color-mix(in oklch, var(--lith-accent) var(--_on), var(--lith-surface-1));
		box-shadow:
			inset 2px 2px 0 -1px color-mix(in oklch, var(--lith-art-seam-core) var(--_on), transparent),
			0 0 calc(var(--cb-lit) * 6px) color-mix(in oklch, var(--lith-glow-color) var(--_on), transparent);
	}

	.cb-boxes > input[checked],
	.cb-key.is-on {
		--cb-lit: 1;
	}

	.cb-boxes > input {
		inline-size: 100%;
		block-size: 100%;
		cursor: pointer;
		
		transition: --cb-lit var(--lith-dur-4) cubic-bezier(0.2, 2.2, 0.4, 1);

		&:not([checked]):hover {
			border-color: var(--lith-text-muted);
			background: var(--lith-surface-hover);
		}

		&[checked]:hover {
			--cb-lit: 1.25;
		}

		&:focus-visible {
			position: relative;
			z-index: 1;
			outline: 2px solid var(--lith-focus);
			outline-offset: 2px;
		}
	}

	
	.cb-boxes > input:indeterminate,
	.cb-key.is-sent {
		border-style: dashed;
		border-color: var(--lith-accent-edge);
	}

	.cb-key.is-sent {
		--cb-lit: 0.35;
	}

	.cb-boxes > input:indeterminate {
		animation: cb-sent 0.6s steps(2, jump-none) infinite;
	}

	
	@media (prefers-reduced-motion: no-preference) {
		.cb-boxes > input:focus-visible {
			animation: cb-found var(--lith-dur-5) var(--lith-ease-glide);
		}

		.cb-boxes > input:focus-visible:indeterminate {
			animation:
				cb-found var(--lith-dur-5) var(--lith-ease-glide),
				cb-sent 0.6s steps(2, jump-none) infinite;
		}
	}

	
	.cb__foot {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: start;
		gap: var(--lith-space-3) var(--lith-space-6);
	}

	.cb__hint {
		flex: 1 1 18rem;
		max-inline-size: 38rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);
	}

	.cb-legend {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2) var(--lith-space-4);
		margin: 0;
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);

		& li {
			display: flex;
			align-items: center;
			gap: var(--lith-space-2);
		}
	}

	.cb-key {
		inline-size: 0.875rem;
		block-size: 0.875rem;
	}

	@media (forced-colors: active) {
		.cb-boxes > input,
		.cb-key {
			forced-color-adjust: none;
			border-color: CanvasText;
			background: Canvas;
		}

		.cb-boxes > input[checked],
		.cb-key.is-on {
			border-color: Highlight;
			background: Highlight;
			box-shadow: none;
		}

		.cb-boxes > input:focus-visible {
			outline-color: CanvasText;
		}
	}
}@property --cb-lit{syntax: "<number>";
	inherits: false;
	initial-value: 0;
}@keyframes cb-sent{50%{--cb-lit:0.45}}@keyframes cb-found{from{outline-offset:12px;outline-color:transparent}}@keyframes cb-where{to{inset-inline-start:100%}}}@layer components{@scope([data-demo="life"]){.life {
		
		--life-a: light-dark(oklch(55% 0.2 27), oklch(70% 0.19 27));
		--life-b: light-dark(oklch(62% 0.17 52), oklch(76% 0.165 60));
		--life-c: light-dark(oklch(66% 0.14 92), oklch(87% 0.15 98));
		--life-d: light-dark(oklch(57% 0.15 148), oklch(79% 0.18 148));
		--life-e: light-dark(oklch(58% 0.1 200), oklch(81% 0.12 196));
		--life-f: light-dark(oklch(53% 0.18 258), oklch(72% 0.15 252));
		--life-g: light-dark(oklch(52% 0.2 302), oklch(73% 0.17 302));
		--life-h: light-dark(oklch(58% 0.2 352), oklch(76% 0.16 352));
		--life-w: light-dark(var(--lith-stone-8), var(--lith-stone-3));
		
		--life-board: light-dark(var(--lith-paper-raised), var(--lith-stone-13));
		--life-dot: light-dark(var(--lith-stone-3), var(--lith-stone-8));
		--me: var(--life-b);

		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lith-space-4);
	}

	
	.life__stats {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: var(--lith-space-3) var(--lith-space-6);
		
		padding-block-start: var(--lith-space-3);

		& dl {
			display: grid;
			grid-template-columns: repeat(4, auto);
			justify-content: start;
			gap: var(--lith-space-2) var(--lith-space-8);
			margin: 0;
		}

		@container stage (width < 34rem) {
			grid-template-columns: minmax(0, 1fr);

			& dl {
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: var(--lith-space-2);
			}
		}
	}

	.life__stat {
		display: grid;
		gap: 2px;
		min-inline-size: 0;

		& dt {
			overflow: hidden;
			color: var(--lith-text-muted);
			font-family: var(--lith-font-ui);
			font-size: var(--lith-text-xs);
			letter-spacing: var(--lith-tracking-caps);
			text-overflow: ellipsis;
			text-transform: uppercase;
			white-space: nowrap;
		}

		& dd {
			margin: 0;
			color: var(--lith-text-1);
			font-family: var(--lith-font-code);
			font-size: var(--lith-text-xl);
			font-weight: 700;
			line-height: 1.1;
			font-variant-numeric: tabular-nums;
		}

		&:first-child dd {
			color: var(--lith-accent-text);
		}

		
		@container stage (width < 34rem) {
			& dt {
				font-size: 0.6875rem;
				letter-spacing: 0;
				text-transform: none;
			}

			& dd {
				font-size: var(--lith-text-lg);
			}
		}
	}

	.life__history {
		--sb-sparkline-width: 10rem;
		--sb-sparkline-height: 2.25rem;

		@container stage (width < 34rem) {
			display: none;
		}
	}

	
	
	.life__field {
		--_n: calc(4px * var(--lith-notch));
		position: relative;
		aspect-ratio: 80 / 50;
		background: var(--life-board);
		box-shadow: inset 0 0 0 1px var(--lith-border);
		border-radius: calc(var(--lith-radius-md) * (1 - var(--lith-notch)));
		clip-path: polygon(var(--_n) 0, calc(100% - var(--_n)) 0, 100% var(--_n), 100% calc(100% - var(--_n)), calc(100% - var(--_n)) 100%, var(--_n) 100%, 0 calc(100% - var(--_n)), 0 var(--_n));
		cursor: crosshair;
		touch-action: manipulation;
		
		content-visibility: auto;
		-webkit-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;

		
		&.is-drawing {
			touch-action: none;
		}

		
		&:focus-visible {
			outline: none;
			box-shadow: inset 0 0 0 2px var(--lith-focus);
		}
	}

	.life__board {
		position: absolute;
		inset: 1px;
		display: grid;
		grid-template-columns: repeat(80, minmax(0, 1fr));
		grid-template-rows: repeat(50, minmax(0, 1fr));

		
		& > div {
			display: contents;
		}

		& > div > p {
			color: var(--life-dot);
			background: radial-gradient(circle closest-side, currentColor calc(92% + 60% * var(--lith-notch)), transparent calc(100% + 60% * var(--lith-notch))) 50% 50% / 24% 24% no-repeat;
		}

		& > div > :is(.a, .b, .c, .d, .e, .f, .g, .h, .w) {
			color: var(--c);
			background-size: 86% 86%;
		}

		& > div > :is(.A, .B, .C, .D, .E, .F, .G, .H, .W) {
			color: color-mix(in oklab, var(--c) 67%, var(--life-dot));
			background-size: 65% 65%;
		}

		& > div > :is(.i, .j, .k, .l, .m, .n, .o, .p, .x) {
			color: color-mix(in oklab, var(--c) 33%, var(--life-dot));
			background-size: 45% 45%;
		}
	}

	.life__board > div > :is(.a, .A, .i),
	.life__share > .a,
	.life__swatch.a {
		--c: var(--life-a);
	}

	.life__board > div > :is(.b, .B, .j),
	.life__share > .b,
	.life__swatch.b {
		--c: var(--life-b);
	}

	.life__board > div > :is(.c, .C, .k),
	.life__share > .c,
	.life__swatch.c {
		--c: var(--life-c);
	}

	.life__board > div > :is(.d, .D, .l),
	.life__share > .d,
	.life__swatch.d {
		--c: var(--life-d);
	}

	.life__board > div > :is(.e, .E, .m),
	.life__share > .e,
	.life__swatch.e {
		--c: var(--life-e);
	}

	.life__board > div > :is(.f, .F, .n),
	.life__share > .f,
	.life__swatch.f {
		--c: var(--life-f);
	}

	.life__board > div > :is(.g, .G, .o),
	.life__share > .g,
	.life__swatch.g {
		--c: var(--life-g);
	}

	.life__board > div > :is(.h, .H, .p),
	.life__share > .h,
	.life__swatch.h {
		--c: var(--life-h);
	}

	.life__board > div > :is(.w, .W, .x),
	.life__share > .w {
		--c: var(--life-w);
	}

	
	.life__marks {
		position: absolute;
		inset: 1px;
		inline-size: calc(100% - 2px);
		block-size: calc(100% - 2px);
		pointer-events: none;

		& path {
			fill: var(--me);
			opacity: 0.6;
		}

		&.is-clearing path {
			fill: var(--lith-text-muted);
			opacity: 0.4;
		}
	}

	
	.life__cursor {
		position: absolute;
		inset: 1px;
		display: none;
		pointer-events: none;

		&.is-on {
			display: block;
		}
	}

	.life__shape {
		position: absolute;
		inset-inline-start: calc((var(--x) - var(--ax)) * 100% / 80);
		inset-block-start: calc((var(--y) - var(--ay)) * 100% / 50);
		inline-size: calc(var(--w) * 100% / 80);
		block-size: calc(var(--h) * 100% / 50);
		display: none;
		overflow: visible;
		rotate: calc(var(--turn) * 90deg);
		transform-origin: calc((var(--ax) + 0.5) / var(--w) * 100%) calc((var(--ay) + 0.5) / var(--h) * 100%);
		transition: rotate var(--lith-dur-2) var(--lith-ease-snap);

		& rect {
			fill: color-mix(in oklch, var(--me) 12%, transparent);
			stroke: color-mix(in oklch, var(--me) 75%, transparent);
			stroke-width: 1px;
			vector-effect: non-scaling-stroke;
		}

		& path {
			fill: var(--me);
			opacity: 0.65;
		}
	}

	
	.life__shape--side {
		visibility: hidden;
		inset-inline-start: calc((var(--y) - var(--ay)) * 100% / 50);
		inset-block-start: calc((var(--x) - var(--ax)) * 100% / 80);
		inline-size: calc(var(--h) * 100% / 50);
		block-size: calc(var(--w) * 100% / 80);
		rotate: calc(var(--turn) * -90deg);
		transform-origin: calc((var(--ay) + 0.5) / var(--h) * 100%) calc((var(--ax) + 0.5) / var(--w) * 100%);
	}

	.life__cursor[data-tool="draw"] > [data-shape="draw"],
	.life__cursor[data-tool="glider"] > [data-shape="glider"],
	.life__cursor[data-tool="spaceship"] > [data-shape="spaceship"],
	.life__cursor[data-tool="pulsar"] > [data-shape="pulsar"],
	.life__cursor[data-tool="gun"] > [data-shape="gun"] {
		display: block;
	}

	
	.life__cursor--stamp .life__shape {
		animation: life-pending 0.8s steps(2, jump-none) infinite;

		& path {
			opacity: 0.9;
		}
	}

	
	@container stage (width < 30rem) {
		.life__field {
			aspect-ratio: 50 / 80;
		}

		.life__board {
			grid-template-columns: repeat(50, minmax(0, 1fr));
			grid-template-rows: repeat(80, minmax(0, 1fr));
			grid-auto-flow: column;
		}

		.life__marks path {
			transform: matrix(0, 0.625, 1.6, 0, 0, 0);
		}

		.life__shape {
			visibility: hidden;
		}

		.life__shape--side {
			visibility: visible;
		}
	}

	
	.life__share {
		display: flex;
		block-size: 4px;
		gap: 1px;
		margin-block-start: calc(-1 * var(--lith-space-2));
		overflow: hidden;
		border-radius: calc(2px * (1 - var(--lith-notch)));

		& > i {
			flex: 0 1 0;
			min-inline-size: 0;
			background: var(--c);
			transition: flex-grow var(--lith-dur-3) var(--lith-ease-glide);
		}
	}

	
	.life__controls {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-3) var(--lith-space-6);
	}

	.life__tools {
		display: flex;
		flex-wrap: wrap;
		gap: var(--lith-space-2);
	}

	.life__tool[aria-pressed="true"] {
		--_bg: var(--lith-accent-subtle);
		--_edge: var(--lith-accent-edge);
		--_fg: var(--lith-accent-text);
	}

	.life__turn:disabled {
		cursor: default;
		opacity: 0.45;
		translate: none;
	}

	.life__icon {
		inline-size: auto;
		block-size: 0.875rem;
		aspect-ratio: var(--w) / var(--h);
	}

	
	.life__icon--turn {
		block-size: 18px;
	}

	.life__colours {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--lith-space-2);
	}

	.life__label {
		margin-inline-end: var(--lith-space-1);
		color: var(--lith-text-muted);
		font-family: var(--lith-font-ui);
		font-size: var(--lith-text-xs);
		letter-spacing: var(--lith-tracking-caps);
		text-transform: uppercase;

		@container stage (width < 30rem) {
			flex-basis: 100%;
		}
	}

	.life__swatch {
		inline-size: 1.5rem;
		block-size: 1.5rem;
		padding: 0;
		border: 0;
		border-radius: calc(50% * (1 - var(--lith-notch)));
		background: var(--c);
		cursor: pointer;
		transition:
			scale var(--lith-dur-1) var(--lith-ease-snap),
			outline-offset var(--lith-dur-1) var(--lith-ease-snap);

		&:hover {
			scale: 1.12;
		}

		
		&[aria-pressed="true"] {
			outline: 2px solid var(--c);
			outline-offset: 3px;
		}

		&[aria-busy="true"] {
			animation: life-pending 0.8s steps(2, jump-none) infinite;
		}

		&:focus-visible {
			outline: 2px solid var(--lith-focus);
			outline-offset: 3px;
		}
	}

	
	.life__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--lith-space-3) var(--lith-space-6);
		padding-block-start: var(--lith-space-3);
		border-block-start: 1px solid var(--lith-border-subtle);
	}

	.life__status {
		flex: 1 1 18rem;
		color: var(--lith-text-muted);
		font-size: var(--lith-text-sm);

		&.is-quiet {
			color: var(--lith-text-2);
		}
	}

	.life__reset {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: end;
		gap: var(--lith-space-3);
		margin-inline-start: auto;
	}

	
	.life__refusal,
	.life__problem {
		display: inline-block;
		transition:
			opacity var(--lith-dur-3) var(--lith-ease-glide),
			translate var(--lith-dur-3) var(--lith-ease-glide),
			display var(--lith-dur-3) allow-discrete;

		@starting-style {
			opacity: 0;
			translate: 0 0.375rem;
		}
	}

	.life__problem:empty {
		display: none;
	}
}@keyframes life-pending{50%{opacity:.35}}}