figure[data-demo]>:first-child{padding:var(--space-3);background-color:var(--raised);border-radius:8px;display:block;container-type:inline-size}:where(figure[data-demo]){& [data-fallback]{font-family:var(--font-mono);font-size:var(--step--1);color:var(--faint);margin:0}& svg{block-size:auto;inline-size:100%;display:block;overflow:visible}& text{font-family:var(--font-mono);font-size-adjust:none;fill:var(--muted);text-anchor:middle}& [data-dim]{opacity:.16}& :is(rect,circle,path,g,text){transition:opacity var(--dur-2) var(--ease-out)}& [data-controls]{align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-block-end:var(--space-3);display:flex}& [data-segmented],& [data-stepper]{gap:var(--space-1);flex-wrap:wrap;display:flex}& [data-stepper]{font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);align-items:center;& output{color:var(--foreground)}}& [data-readout]{gap:var(--space-1) var(--space-3);margin-block:var(--space-3) 0;font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);flex-wrap:wrap;display:flex;& output{color:var(--foreground);font-variant-numeric:tabular-nums}}}figure[data-demo] button{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:var(--tracking-mono);color:var(--foreground);cursor:pointer;border:1px solid var(--rule-strong);transition:background-color var(--dur-1) linear, border-color var(--dur-1) linear;background:0 0;border-radius:999px;padding:.25em .85em;&:hover:not(:disabled){border-color:var(--signal)}&[aria-pressed=true]{color:var(--signal-ink);background-color:var(--signal);border-color:var(--signal)}&:disabled{cursor:default;opacity:.4}}:where(figure[data-demo]) [data-slider]{align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);flex:14rem;display:flex;& output{min-inline-size:3ch;color:var(--foreground)}& input{flex:1}}:where(figure[data-demo]) [data-field]{align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);display:flex;& input{inline-size:10ch;font:inherit;color:var(--foreground);background-color:var(--ink-1);border:1px solid var(--rule-strong);border-radius:6px;padding:.2em .5em}}play-card{aspect-ratio:5/7;color:var(--foreground);background-color:var(--ink-1);border:1px solid var(--rule-strong);border-radius:.3em;place-items:center;display:grid;position:relative;&[data-red]{color:var(--red)}& card-rank{font-family:var(--font-mono);font-weight:var(--weight-strong);letter-spacing:-.06em;line-height:1;position:absolute;inset-block-start:.2em;inset-inline-start:.3em}& [data-pip]{fill:currentColor;block-size:auto;inline-size:46%;margin-block-start:.5em}&[data-back]{background:repeating-linear-gradient(45deg, color-mix(in oklab, var(--signal) 45%, transparent) 0 1px, transparent 1px 5px), var(--ink-2);border-color:color-mix(in oklab, var(--signal) 50%, var(--rule-strong))}}deck-shuffle:not(:defined){aspect-ratio:13/7.5}card-table{grid-template-columns:repeat(13,minmax(0,1fr));gap:.35rem;font-size:clamp(.55rem,1.9cqi,.95rem);display:grid;@container (width<34rem){grid-template-columns:repeat(8,minmax(0,1fr));gap:.25rem;font-size:clamp(.6rem,3.3cqi,.9rem)}}deck-shuffle [data-controls]{margin-block:var(--space-3) 0}deck-shuffle [data-rank]{margin-block:var(--space-3) 0;font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);& output{margin-block:var(--space-1);overflow-wrap:anywhere;font-size:var(--step-0);color:var(--signal);display:block}}digit-bars{gap:var(--space-2);display:grid;&:not(:defined){min-block-size:30rem}}digit-row{gap:.15rem var(--space-2);font-size:var(--step--1);grid-template-columns:1fr auto;align-items:baseline;display:grid;& [data-label]{color:var(--body)}& [data-value]{font-family:var(--font-mono);color:var(--foreground);text-align:end}& [data-digits]{font-family:var(--font-mono);font-size:var(--step--2);color:var(--faint);order:3;grid-column:1/-1}& digit-bar{inline-size:calc(var(--share) * 100%);background:repeating-linear-gradient(90deg, var(--hue) 0 calc(100cqi / 68 - 2px), transparent 0 calc(100cqi / 68));transform-origin:0;block-size:.7rem;transition:transform 1.1s var(--ease-out) calc(var(--i) * .11s);order:2;grid-column:1/-1;display:block;transform:scaleX(0)}[data-grown] & digit-bar{transform:none}}naive-tree{&:not(:defined){min-block-size:32rem}& [data-edge]{fill:none;stroke:var(--rule-strong);stroke-width:1.5px}& [data-fork]{fill:var(--faint)}& [data-leaf]{fill:var(--hue)}& [data-leaf-label]{font-size:15px;@container (width<36rem){display:none}}}tree-bars{--area:7rem;--label:1.6rem;gap:var(--space-2);grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;margin-block-start:var(--space-3);padding-block-start:var(--space-3);display:grid;position:relative;&:before,&:after{pointer-events:none;position:absolute;inset-inline-start:0}&:before{content:"";border-block-start:1px dashed var(--muted);inset-block-end:calc(var(--label) + var(--fair) * var(--area));inset-inline-end:0}&:after{content:attr(data-fair-label);font-family:var(--font-mono);font-size:var(--step--2);color:var(--muted);inset-block-end:calc(var(--label) + var(--fair) * var(--area) + .15rem)}}tree-bar{cursor:pointer;transition:opacity var(--dur-2) var(--ease-out);border-radius:4px;justify-items:center;display:grid;&:focus-visible{outline-offset:4px}& [data-count]{inline-size:100%;block-size:calc(var(--share) * var(--area));font-family:var(--font-mono);font-size:var(--step--1);font-weight:var(--weight-strong);color:var(--background);text-align:center;background-color:var(--hue);border-radius:4px;padding-block-start:.3em;display:block}& [data-order]{block-size:var(--label);font-family:var(--font-mono);font-size:var(--step--1);line-height:var(--label);color:var(--muted)}}shuffle-bias:not(:defined){min-block-size:26rem}bias-grid{grid-template-columns:2.2rem repeat(var(--n), minmax(0, 1fr));max-inline-size:36rem;font-family:var(--font-mono);font-size:var(--step--1);font-variant-numeric:tabular-nums;gap:3px;margin-inline:auto;display:grid;@container (width<30rem){font-size:var(--step--2)}}bias-corner{color:var(--faint);text-align:center;place-items:center;font-size:.6rem;line-height:1.1;display:grid}bias-head{color:var(--muted);place-items:center;display:grid}bias-cell{min-block-size:2.6rem;color:var(--foreground);background-color:color-mix(in oklab, color-mix(in oklab, var(--orange) calc(var(--hot) * 100%), var(--blue)) calc(min(1, var(--hot) + var(--cold)) * 85%), var(--ink-1));border-radius:4px;place-items:center;display:grid;&[data-quiet]{color:var(--faint)}}fisher-yates:not(:defined){min-block-size:20rem}card-row{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:.5rem;max-inline-size:36rem;margin-inline:auto;padding-block:1.6rem;font-size:clamp(.65rem,2.6cqi,1rem);display:grid;& play-card{transition:border-color var(--dur-2) linear, box-shadow var(--dur-2) linear}& [data-done]{border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}& :not([data-done])+[data-done]:before{content:"";border-inline-start:2px dashed var(--signal);position:absolute;inset-block:-.6rem;inset-inline-start:calc(-.25rem - 1px)}& [data-target]{box-shadow:0 0 0 2px var(--blue)}& [data-picked]{box-shadow:0 0 0 2px var(--orange)}}fisher-yates pre[data-code]{margin-block:var(--space-2) 0;padding:var(--space-2) var(--space-3);font-size:var(--step--1);color:var(--muted);background-color:var(--ink-1);border-radius:6px;overflow-x:auto;& [data-active]{color:var(--foreground);background-color:color-mix(in oklab, var(--signal) 20%, transparent);border-radius:2px}}modulo-bias{&:not(:defined){min-block-size:24rem}& [data-byte]{fill:var(--ink-4);&[data-wrap="1"]{fill:var(--ink-5)}&[data-spill]{fill:var(--orange)}&[data-gone]{fill:none;stroke:var(--orange);stroke-dasharray:3 3}}& [data-bar]{fill:var(--blue);&[data-extra]{fill:var(--orange)}}}modulo-panels{gap:var(--space-3);grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);display:grid;@container (width<34rem){grid-template-columns:minmax(0,1fr);&>:first-child{inline-size:min(100%,16rem);margin-inline:auto}}& span{font-family:var(--font-mono);font-size:var(--step--2);color:var(--faint);text-align:center;margin-block-start:var(--space-1);display:block}}riffle-shuffle:not(:defined){min-block-size:26rem}riffle-deck{align-items:center;block-size:9rem;display:flex}riffle-card{background-color:oklch(var(--l) var(--c) var(--h));border-radius:2px;flex:1;block-size:50%;margin-inline:.5px}riffle-shuffle svg{margin-block-start:var(--space-3);& [data-axis]{stroke:var(--rule-strong)}& :is([data-half],[data-seven]){stroke:var(--rule-strong);stroke-dasharray:5 6}& [data-seven]{stroke:var(--muted)}& [data-curve]{fill:none;stroke:var(--signal);stroke-width:2.5px;stroke-linejoin:round}& circle{fill:var(--signal);&[data-now]{fill:var(--orange)}}& text{font-size:16px;&[data-now]{fill:var(--orange)}}& [data-label]{text-anchor:end}@container (width<36rem){& text{font-size:36px}}}poker-crack{&:not(:defined){min-block-size:30rem}& progress{block-size:3px;inline-size:100%;accent-color:var(--signal);appearance:none;background-color:var(--rule);border:0;margin-block-start:var(--space-3);display:block;&::-webkit-progress-bar{background-color:var(--rule)}&::-webkit-progress-value{background-color:var(--signal)}&::-moz-progress-bar{background-color:var(--signal)}}& [data-log]{margin-block:var(--space-2) 0;font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);padding-inline-start:1.6em;& li:last-child{color:var(--foreground)}}}poker-table{gap:var(--space-3) var(--space-2);padding:var(--space-3);background-color:color-mix(in oklab, var(--green) 12%, var(--ink-1));border-radius:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr));font-size:clamp(.62rem,2.2cqi,.95rem);display:grid;&>:nth-child(n+4){grid-column:1/-1}}poker-seat{justify-items:center;gap:.3rem;display:grid;&>span{font-family:var(--font-mono);font-size:var(--step--2);color:var(--muted)}&>div{gap:.3rem;display:flex}& play-card{inline-size:3.2em}&[data-you]>span{color:var(--signal)}& [data-revealed]{box-shadow:0 0 0 2px var(--orange)}}:is(lcs-table,edit-graph) [data-field] input{text-transform:uppercase}lcs-table:not(:defined){min-block-size:30rem}lcs-grid{grid-template-columns:repeat(calc(var(--cols) + 1), minmax(0, 2.6rem));font-family:var(--font-mono);font-size:var(--step--1);justify-content:center;gap:3px;display:grid}lcs-head{block-size:2.2rem;color:var(--muted);place-items:center;display:grid}lcs-cell{block-size:2.2rem;color:var(--body);background-color:var(--ink-1);border-radius:4px;place-items:center;display:grid;position:relative;&[data-match]{color:var(--foreground);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--signal) 45%, transparent)}&:before{content:"";background-color:color-mix(in oklab, var(--signal) 30%, transparent);border-radius:inherit;opacity:0;position:absolute;inset:0}&[data-path]:before{opacity:1}}lcs-grid[data-animate]{& lcs-cell{opacity:0;transform:scale(.7)}& lcs-cell[data-path]:before{opacity:0}&[data-shown] lcs-cell{opacity:1;transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring);transition-delay:calc(var(--fill) * 10ms);transform:none}&[data-shown] lcs-cell[data-path]:before{opacity:1;transition:opacity var(--dur-2) linear;transition-delay:calc(var(--cells) * 10ms + var(--trace) * .11s)}}lcs-alignment{font-family:var(--font-mono);flex-wrap:wrap;justify-content:center;gap:3px;margin-block-start:var(--space-3);display:flex}lcs-pair{gap:3px;display:grid;& span{block-size:2rem;inline-size:2rem;color:var(--foreground);border-radius:4px;place-items:center;display:grid}&[data-kind=keep] span{background-color:color-mix(in oklab, var(--signal) 26%, var(--ink-1))}&[data-kind=del] span:first-child{background-color:color-mix(in oklab, var(--red) 30%, var(--ink-1))}&[data-kind=ins] span:last-child{background-color:color-mix(in oklab, var(--blue) 30%, var(--ink-1))}&:not([data-kind=keep]) span:empty{border:1px dashed var(--rule-strong)}}edit-graph{&:not(:defined){min-block-size:32rem}& svg{max-inline-size:34rem;margin-inline:auto}& [data-grid]{stroke:var(--rule-strong)}& [data-diagonal]{stroke:var(--signal);stroke-width:2px;stroke-dasharray:4 5;opacity:.7}& [data-axis]{font-size:20px}& [data-wave]{animation:fade-in var(--dur-3) var(--ease-out);& path{fill:none;stroke:var(--hue);stroke-width:3px;stroke-linejoin:round}& circle{fill:var(--hue)}}& [data-final]{fill:none;stroke:var(--foreground);stroke-width:7px;stroke-linecap:round;stroke-linejoin:round;opacity:.55;animation:fade-in var(--dur-4) var(--ease-out)}}diff-playground:not(:defined){min-block-size:28rem}diff-inputs{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;@container (width<34rem){grid-template-columns:minmax(0,1fr)}& span{font-family:var(--font-mono);font-size:var(--step--2);color:var(--muted);display:block}& textarea{inline-size:100%;padding:var(--space-1) var(--space-2);font-family:var(--font-mono);font-size:var(--step--1);color:var(--foreground);resize:vertical;background-color:var(--ink-1);border:1px solid var(--rule-strong);border-radius:6px}}diff-playground pre[data-diff]{margin-block:var(--space-3) 0;padding-block:var(--space-2);font-size:var(--step--1);background-color:var(--ink-1);border-radius:6px;overflow-x:auto;& span{padding-inline:var(--space-3);color:var(--muted);white-space:pre;display:block}& [data-kind=del]{color:var(--foreground);background-color:color-mix(in oklab, var(--red) 18%, transparent)}& [data-kind=ins]{color:var(--foreground);background-color:color-mix(in oklab, var(--green) 18%, transparent)}}tty-journey:not(:defined){min-block-size:34rem}tty-keys{gap:var(--space-1);padding:var(--space-2);border:1px dashed var(--rule-strong);border-radius:8px;flex-wrap:wrap;display:flex;&:focus-visible{border-style:solid;border-color:var(--signal);outline:none}&:after{content:"focus here and type";font-family:var(--font-mono);font-size:var(--step--2);color:var(--faint);align-self:center;margin-inline-start:auto}& button{border-radius:6px;min-inline-size:2.6em}}tty-path{gap:var(--space-2) var(--space-3);margin-block:var(--space-3);grid-template-columns:1fr 1fr 1.6fr 1.3fr;grid-template-areas:"keyboard emulator discipline read""keyboard emulator discipline signal";display:grid;@container (width<40rem){gap:var(--space-2);grid-template-columns:minmax(0,1fr);grid-template-areas:"keyboard""emulator""discipline""read""signal"}}tty-stage{padding:var(--space-2);font-family:var(--font-mono);font-size:var(--step--2);color:var(--muted);background-color:var(--ink-1);border:1px solid var(--rule-strong);border-radius:8px;flex-direction:column;justify-content:center;gap:.2rem;display:flex;position:relative;overflow:hidden;&[data-stage=keyboard]{grid-area:keyboard}&[data-stage=emulator]{grid-area:emulator}&[data-stage=read]{grid-area:read}&[data-stage=signal]{--hue:var(--orange);grid-area:signal}&[data-stage=discipline]{border-color:color-mix(in oklab, var(--signal) 45%, var(--rule-strong));grid-area:discipline}& b{font-size:var(--step--1);font-weight:var(--weight-strong);color:var(--foreground)}&>i{pointer-events:none;background-color:color-mix(in oklab, var(--hue,var(--signal)) 28%, transparent);opacity:0;position:absolute;inset:0}& [data-buffer]{color:var(--foreground);white-space:pre;background-color:var(--ink-2);border-radius:4px;margin-block-start:var(--space-1);padding:.2em .4em}& [data-flags]{gap:.6em;display:flex;& span{color:var(--faint);text-decoration:line-through;&[data-on]{color:var(--signal);text-decoration:none}}}}tty-group{gap:var(--space-3);flex-wrap:wrap;display:flex;&>div{align-items:center;gap:var(--space-1);flex-wrap:wrap;display:flex;&>span{inline-size:100%;font-family:var(--font-mono);font-size:var(--step--2);color:var(--faint)}}& [data-foreground]>span{color:var(--signal)}}tty-proc{font-family:var(--font-mono);font-size:var(--step--1);color:var(--foreground);border:1px solid var(--rule-strong);transition:opacity var(--dur-3) var(--ease-out);border-radius:999px;padding:.2em .7em;&[data-state=running]:before{content:"● ";color:var(--signal)}&[data-state=stopped]{opacity:.6;&:before{content:"❚❚ ";color:var(--yellow)}}&[data-state=dead]{opacity:.45;text-decoration:line-through;&:before{content:"✕ ";color:var(--red)}}}tty-journey [data-log]{min-block-size:6.5rem;margin-block:var(--space-3) 0;font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);padding-inline-start:1.6em;& li:last-child{color:var(--foreground)}}icmp-packet{&:not(:defined){min-block-size:30rem}& pre[data-math]{margin-block:var(--space-2) 0;padding:var(--space-2) var(--space-3);font-size:var(--step--1);color:var(--muted);background-color:var(--ink-1);border-radius:6px;overflow-x:auto}}packet-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;max-inline-size:30rem;margin-inline:auto;display:grid}packet-byte{block-size:3rem;font-family:var(--font-mono);background-color:color-mix(in oklab, var(--hue) 22%, var(--ink-1));transition:opacity var(--dur-2) var(--ease-out);border-radius:4px;place-items:center;display:grid;position:relative;& b{font-weight:var(--weight-medium);color:var(--foreground)}& span{color:var(--hue);font-size:.65rem;position:absolute;inset-block-start:.15rem;inset-inline-start:.4rem}&[data-flipped]{box-shadow:0 0 0 2px var(--red)}}ping-sonar:not(:defined){min-block-size:26rem}ping-route{block-size:7.5rem;margin:var(--space-2) 1.5rem var(--space-3);display:block;position:relative;&:before{content:"";border-block-start:1px dashed var(--rule-strong);position:absolute;inset-block-start:3.75rem;inset-inline:0}}ping-node{font-family:var(--font-mono);font-size:var(--step--2);justify-items:center;display:grid;position:absolute;inset-block-start:3.75rem;inset-inline-start:calc(var(--at) * 100%);translate:-50% -50%;& i{background-color:var(--ink-1);border:2px solid var(--muted);border-radius:50%;block-size:.8rem;inline-size:.8rem}& b{font-weight:var(--weight-body);color:var(--muted);white-space:nowrap;position:absolute;inset-block-end:1.4rem}&:nth-child(2n) b{inset-block:1.4rem auto}&[data-end]{& i{border-color:var(--signal)}& b{color:var(--foreground)}}& [data-ttl]{color:var(--orange);white-space:nowrap;position:absolute;inset-block-start:2.6rem}&:nth-child(2n) [data-ttl]{inset-block:auto 2.6rem}@container (width<36rem){&:not([data-end]) b{display:none}& [data-ttl]{font-size:.6rem}}}ping-pulse{background-color:var(--signal);block-size:.7rem;inline-size:.7rem;box-shadow:0 0 0 4px color-mix(in oklab, var(--signal) 25%, transparent);border-radius:50%;position:absolute;inset-block-start:3.4rem;inset-inline-start:-.35rem;&[data-direction=back]{background-color:var(--blue);box-shadow:0 0 0 4px color-mix(in oklab, var(--blue) 25%, transparent)}}ping-sonar pre[data-terminal]{block-size:13rem;padding:var(--space-2) var(--space-3);font-size:var(--step--1);color:var(--foreground);background-color:var(--ink-1);border-radius:6px;margin:0;overflow:auto}memory-ladder:not(:defined){min-block-size:22rem}ladder-head,ladder-row{gap:var(--space-1) var(--space-3);font-family:var(--font-mono);font-size:var(--step--1);grid-template-columns:7rem minmax(0,1fr) 4.5rem 6.5rem;align-items:center;display:grid;@container (width<34rem){grid-template-columns:5.5rem minmax(0,1fr) 4.5rem;&>:last-child{display:none}}}ladder-head{font-size:var(--step--2);color:var(--faint);&>:first-child{grid-column:span 2}}ladder-row{padding-block:var(--space-1);& b{font-weight:var(--weight-medium);color:var(--foreground)}&>span{font-size:var(--step--2);color:var(--faint);grid-row:2}& output{color:var(--foreground);text-align:end;grid-row:span 2}& [data-human]{color:var(--hue)}}ladder-track{background-color:color-mix(in oklab, var(--hue) 12%, var(--ink-1));border-radius:999px;grid-row:span 2;block-size:.7rem;display:block;position:relative}ladder-dot{background-color:var(--hue);border-radius:50%;inline-size:.7rem;position:absolute;inset-block:0;inset-inline-start:0}cache-walk:not(:defined){min-block-size:30rem}walk-layout{gap:var(--space-3);grid-template-columns:minmax(0,2fr) minmax(0,1fr);display:grid;@container (width<36rem){grid-template-columns:minmax(0,1fr)}}cache-walk :is(walk-layout>div,div)>span{font-family:var(--font-mono);font-size:var(--step--2);color:var(--faint);margin-block-end:var(--space-1);display:block}walk-matrix{grid-template-columns:repeat(16,minmax(0,1fr));gap:2px;display:grid;position:relative}walk-cell,walk-byte{aspect-ratio:1;background-color:var(--ink-1);transition:opacity var(--dur-2) linear;border-radius:2px;display:block;&[data-state=hit]{background-color:color-mix(in oklab, var(--signal) 55%, var(--ink-1))}&[data-state=miss]{background-color:var(--orange)}&[data-now]{outline:2px solid var(--foreground);outline-offset:1px}}walk-matrix:after{content:"";border-inline-start:2px dashed var(--rule-strong);pointer-events:none;position:absolute;inset-block:-4px;inset-inline-start:calc(50% - 1px)}walk-cache{gap:3px;display:grid}walk-slot{font-family:var(--font-mono);font-size:var(--step--2);color:var(--foreground);background-color:var(--ink-1);border-radius:4px;padding:.25em .6em;&[data-empty]{color:var(--faint)}&[data-fresh]{box-shadow:inset 3px 0 0 var(--signal)}}walk-strip{grid-template-columns:repeat(64,minmax(0,1fr));gap:1px;margin-block-start:var(--space-3);display:grid;& walk-byte{aspect-ratio:auto;border-radius:1px;block-size:.9rem}}cache-walk [data-strip-label]{margin-block-start:var(--space-3)}pointer-chase:not(:defined){min-block-size:18rem}chase-memory{grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;display:grid;position:relative;& svg{pointer-events:none;block-size:100%;inline-size:100%;position:absolute;inset:0}& path{fill:none;stroke:var(--muted);stroke-width:1.5px;opacity:.45;&[data-walked]{stroke:var(--signal);opacity:1}}}chase-slot{aspect-ratio:1;font-family:var(--font-mono);font-size:var(--step--1);color:var(--foreground);background-color:var(--ink-1);border-radius:3px;place-items:center;display:grid;&:nth-child(8n+1):not(:nth-child(16n+1)){margin-inline-start:4px}&[data-item]{background-color:color-mix(in oklab, var(--blue) 30%, var(--ink-1))}&[data-state=cached]{box-shadow:inset 0 0 0 1px var(--signal)}&[data-state=miss]{background-color:var(--orange);color:var(--background)}&[data-state=hit]{background-color:color-mix(in oklab, var(--signal) 55%, var(--ink-1))}}false-sharing:not(:defined){min-block-size:16rem}core-pair{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}core-box{gap:var(--space-1);display:grid;&>span{font-family:var(--font-mono);font-size:var(--step--2);color:var(--muted)}}core-cache{gap:var(--space-1);min-block-size:4.5rem;padding:var(--space-2);background-color:var(--ink-1);border:1px dashed var(--rule-strong);border-radius:8px;flex-wrap:wrap;display:flex}line-chip{font-family:var(--font-mono);font-size:var(--step--1);color:var(--foreground);background-color:color-mix(in oklab, var(--purple) 28%, var(--ink-2));border-radius:6px;flex-wrap:wrap;align-items:center;gap:.2rem .8rem;padding:.4em .8em;display:flex;&>span:first-child{font-size:var(--step--2);color:var(--muted)}& b{font-weight:var(--weight-strong);display:inline-block}}huffman-tree{&:not(:defined){min-block-size:26rem}& [data-field] input{inline-size:min(24ch,60vw)}& svg{max-block-size:24rem}& [data-edge]{& path{stroke:var(--rule-strong);stroke-width:1.5px}& text{fill:var(--faint);font-size:10px}}& [data-node]{& circle{fill:var(--ink-1);stroke:var(--signal);stroke-width:1.5px}& text{fill:var(--foreground);font-size:11px}&[data-new]{animation:fade-in var(--dur-3) var(--ease-out)}}& [data-leaf]{& rect{fill:color-mix(in oklab, var(--blue) 26%, var(--ink-1))}& [data-symbol]{fill:var(--foreground);font-size:14px}& [data-weight]{fill:var(--muted);font-size:8px}& [data-code]{fill:var(--signal);writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-1px;font-size:9px}}}lz77-window{&:not(:defined){min-block-size:22rem}& textarea{inline-size:100%;padding:var(--space-1) var(--space-2);font-family:var(--font-mono);font-size:var(--step--1);color:var(--foreground);resize:vertical;background-color:var(--ink-1);border:1px solid var(--rule-strong);border-radius:6px;margin-block-end:var(--space-2)}}lz-text,lz-tokens{font-family:var(--font-mono);font-size:var(--step--1);flex-wrap:wrap;gap:2px;display:flex}lz-char{block-size:1.6rem;min-inline-size:1.25rem;color:var(--faint);background-color:var(--ink-1);border-radius:3px;place-items:center;display:grid;&[data-kind]{color:var(--foreground)}&[data-kind=match]{background-color:color-mix(in oklab, var(--signal) 22%, var(--ink-1))}&[data-now]{box-shadow:inset 0 -2px 0 var(--foreground)}&[data-now][data-kind=match]{background-color:color-mix(in oklab, var(--signal) 50%, var(--ink-1))}&[data-source]{background-color:color-mix(in oklab, var(--blue) 45%, var(--ink-1))}}lz-tokens{min-block-size:2rem;margin-block-start:var(--space-3)}lz-token{color:var(--foreground);background-color:var(--ink-1);animation:fade-in var(--dur-2) var(--ease-out);border-radius:3px;padding:.1em .4em;&[data-kind=match]{color:var(--background);background-color:var(--signal)}}deflate-meter:not(:defined){min-block-size:14rem}meter-rows{gap:var(--space-1);display:grid}meter-row{gap:var(--space-2);font-family:var(--font-mono);font-size:var(--step--1);color:var(--muted);animation:rise-in var(--dur-3) var(--ease-out);grid-template-columns:6.5rem minmax(0,1fr) 5.5rem;align-items:center;display:grid;& output{color:var(--foreground);text-align:end}&[data-grew] output{color:var(--orange)}}meter-bar{inline-size:calc(var(--share) * 100%);background-color:var(--signal);border-radius:3px;block-size:.8rem;display:block;[data-grew]>&{background-color:var(--orange)}}pigeon-holes{&:not(:defined){min-block-size:18rem}& [data-label]{margin-block:var(--space-2) var(--space-1);font-family:var(--font-mono);font-size:var(--step--2);color:var(--faint);display:block}}pigeon-files,pigeon-holes-row{gap:var(--space-1);flex-wrap:wrap;min-block-size:2.4rem;display:flex}pigeon-chip{block-size:2rem;min-inline-size:3.2rem;font-family:var(--font-mono);font-size:var(--step--1);color:var(--background);background-color:var(--blue);border-radius:5px;place-items:center;padding-inline:.4em;display:grid;&[data-stuck]{background-color:var(--red)}}pigeon-hole{border:1px dashed var(--rule-strong);border-radius:6px;place-items:center;block-size:2.4rem;min-inline-size:3.6rem;display:grid;position:relative;&:empty:after{content:attr(data-label);font-family:var(--font-mono);font-size:var(--step--2);color:var(--faint)}}firefly-field:not(:defined){aspect-ratio:2/1.12}firefly-field canvas{aspect-ratio:2;cursor:crosshair;touch-action:none;border-radius:4px;inline-size:100%;display:block}retry-storm:not(:defined){aspect-ratio:1/.47}retry-storm canvas{aspect-ratio:1/.36;inline-size:100%;display:block}:is(firefly-field,retry-storm) [data-slider]{margin-block-start:var(--space-3)}post-rail[data-astro-cid-6bkfcxmb]{z-index:20;column-gap:var(--space-3);inline-size:var(--rail);grid-template-columns:auto 1fr;display:grid;position:fixed;inset-block-start:28vh;inset-inline-start:max(var(--gutter), calc(50% - var(--measure) / 2 - var(--rail) - var(--space-6)));@media (width<72rem){display:none}}rail-track[data-astro-cid-6bkfcxmb]{background-color:var(--rule);grid-row:1/3;inline-size:1px;& i{background-color:var(--signal);transform-origin:top;block-size:100%;scale:1 var(--progress,0);display:block}}rail-label[data-astro-cid-6bkfcxmb]{gap:var(--space-1);flex-direction:column;display:flex;& rail-kicker{font-family:var(--font-mono);font-size:var(--step--1);color:var(--faint)}& rail-title{font-size:var(--step--1);font-weight:var(--weight-medium);color:var(--muted);line-height:1.35}}nav[data-astro-cid-6bkfcxmb]{transition:grid-template-rows var(--dur-4) var(--ease-out);grid-column:2;grid-template-rows:0fr;display:grid;& ol{min-block-size:0;padding-block-start:var(--space-3);overflow:hidden}& li{opacity:0;transition:opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out);transition-delay:calc(sibling-index() * 25ms);translate:-.5rem;&+li[data-astro-cid-6bkfcxmb]{margin-block-start:var(--space-1)}&[data-depth="1"] a[data-astro-cid-6bkfcxmb]{font-weight:var(--weight-strong)}&[data-depth="3"]{padding-inline-start:var(--space-2)}}& a{font-size:var(--step--1);color:var(--faint);line-height:1.35;text-decoration:none;display:block;&:hover{color:var(--foreground)}&[aria-current]{color:var(--signal)}}}post-rail[data-astro-cid-6bkfcxmb]:is(:hover,:focus-within) nav[data-astro-cid-6bkfcxmb]{grid-template-rows:1fr;& li{opacity:1;translate:0}}share-link[data-astro-cid-4lfmwkij]{inline-size:min(var(--measure), 100% - 2 * var(--gutter));margin:var(--space-6) auto 0;font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:var(--tracking-mono);color:var(--faint);border-block-start:1px solid var(--rule);padding-block-start:var(--space-3);display:block}p[data-astro-cid-4lfmwkij]{gap:var(--space-2);flex-wrap:wrap;align-items:baseline;display:flex}button[data-astro-cid-4lfmwkij]{font:inherit;color:var(--foreground);cursor:pointer;text-decoration:underline 1px color-mix(in oklab, var(--signal) 50%, transparent);text-underline-offset:.22em;transition:text-decoration-color var(--dur-1) linear;padding:0;&:hover{text-decoration-color:var(--signal)}}header[data-astro-cid-vvdrgdaw],article[data-astro-cid-vvdrgdaw]>img{inline-size:min(var(--measure), 100% - 2 * var(--gutter));margin-inline:auto}header[data-astro-cid-vvdrgdaw]{margin-block-end:var(--space-5);& h1{inline-size:fit-content;font-size:var(--step-5);font-weight:var(--weight-display);letter-spacing:var(--tracking-display)}& p{font-size:var(--step-1);color:var(--muted);margin-block-start:var(--space-2)}& meta-text{margin-block-start:var(--space-3);display:block}& [data-narrow]{@media (width>=72rem){display:none}}}article[data-astro-cid-vvdrgdaw]>img{block-size:auto;border-radius:6px;margin-block-end:var(--space-5);display:block}article[data-astro-cid-vvdrgdaw][data-embedded]{margin-block-start:var(--space-7);& meta-text{margin-block:0 var(--space-2);color:var(--signal)}& h1{font-size:var(--step-4)}}
