@font-face{font-family:JetBrains Mono;font-weight:400;font-display:swap;src:url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2)format("woff2")}@font-face{font-family:JetBrains Mono;font-weight:700;font-display:swap;src:url(/assets/jetbrains-mono-latin-700-normal-BYuf6tUa.woff2)format("woff2")}@font-face{font-family:Space Grotesk;font-weight:400;font-display:swap;src:url(/assets/space-grotesk-latin-400-normal-CJ-V5oYT.woff2)format("woff2")}@font-face{font-family:Space Grotesk;font-weight:500;font-display:swap;src:url(/assets/space-grotesk-latin-500-normal-lFbtlQH6.woff2)format("woff2")}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0d0e10;--text:#eceae4;--muted:#9299a3;--line:#23262b;--line-strong:#2e3238;--raised:#1b1e22;--accent:#c8f560;--on-accent:#0d0e10;--error:#ff9b8f;--mono:"JetBrains Mono", ui-monospace, Consolas, monospace;--sans:"Space Grotesk", system-ui, sans-serif;--side:20rem;--below:15rem;font-family:var(--sans);background:var(--bg);color:var(--text)}body{background:var(--bg);margin:0;overflow:hidden}p{margin:0}.message{max-width:34rem;margin:20vh auto 0;padding:0 1.5rem;line-height:1.5}.label{font-family:var(--mono);letter-spacing:.12em;color:var(--muted);font-size:.7rem}.accent-label{font-family:var(--mono);letter-spacing:.12em;color:var(--accent);font-size:.7rem}.muted{color:var(--muted)}.shell{grid-template-rows:auto minmax(0,1fr) auto auto;height:100dvh;display:grid}.top{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:2rem;padding:1rem 1.5rem;display:flex}.brand{align-items:baseline;gap:1.25rem;min-width:0;display:flex}.wordmark{font-family:var(--mono);letter-spacing:.3em;white-space:nowrap;font-size:1rem;font-weight:700}.wordmark a{color:inherit;text-decoration:none}.wordmark a:hover{text-underline-offset:.25em;text-decoration:underline}.tagline{color:var(--muted);font-size:.9rem}.phases{font-family:var(--mono);letter-spacing:.1em;gap:.4rem;margin:0;padding:0;font-size:.7rem;list-style:none;display:flex}.phases li{border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap;border-radius:999px;padding:.35rem .65rem}.phases li.current{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.phase-number{font-weight:700}.phase-file{font-family:var(--mono);letter-spacing:.1em;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:.35rem .65rem;font-size:.7rem}.stage{gap:1.5rem;min-width:0;min-height:0;padding:1.5rem;display:grid}.stage.portrait{grid-template-columns:var(--side) minmax(0, 1fr) var(--side);grid-template-rows:minmax(0,1fr);grid-template-areas:"explain centre code"}.stage.landscape{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0, 1fr) minmax(0, var(--below));grid-template-areas:"centre centre""explain code"}@media (width<=80rem){.stage.portrait:not(.idle){grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0, 1fr) minmax(0, var(--below));grid-template-areas:"centre centre""explain code"}}.explain{flex-direction:column;grid-area:explain;gap:1rem;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.caption{flex-direction:column;gap:.6rem;display:flex}.headline{letter-spacing:-.01em;font-size:1.625rem;font-weight:500;line-height:1.2}.support{color:var(--muted);font-size:.95rem;line-height:1.5}.timeline{font-family:var(--mono);flex-direction:column;gap:.15rem;min-height:0;margin:.5rem 0 0;padding:0;font-size:.78rem;line-height:1.4;list-style:none;display:flex;overflow:hidden}.timeline li{color:var(--muted);border-radius:.3rem;grid-template-columns:6ch minmax(0,1fr);gap:.75rem;padding:.35rem .6rem;display:grid}.timeline .tag{text-align:right;font-variant-numeric:tabular-nums}.timeline li:first-child{background:var(--raised);color:var(--text)}.timeline li:first-child .tag{color:var(--accent)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.centre{flex-direction:column;grid-area:centre;gap:1rem;min-width:0;min-height:0;display:flex}.picture{flex:1;place-items:center;min-width:0;min-height:0;display:grid;position:relative;container-type:size}.frame{--ar:1;width:min(100cqw, calc(100cqh * var(--ar)));height:min(100cqh, calc(100cqw / var(--ar)));position:relative}.frame canvas{width:100%;height:100%;display:block}.frame canvas.hidden{display:none}.drop{box-sizing:border-box;border:1px dashed var(--line-strong);width:min(100%,30rem);height:min(100%,30rem);color:var(--muted);text-align:center;cursor:pointer;border-radius:.5rem;place-items:center;margin:auto;padding:2rem;line-height:1.5;display:grid;position:absolute;inset:0}.drop:hover,.drop:focus-within{border-color:var(--accent);color:var(--text)}.drop.loaded{border-color:var(--line-strong);width:min(100%,34rem);height:min(100%,38rem);color:var(--text);cursor:default;flex-direction:column;align-items:center;gap:1.25rem;padding:1.75rem;display:flex}.drop-text{flex-direction:column;gap:.3rem;display:flex}.drop-text .muted{font-family:var(--mono);overflow-wrap:anywhere;font-size:.8rem}.thumb{flex:1;width:100%;min-height:0;position:relative}.thumb img{border-radius:.25rem;max-width:100%;max-height:100%;margin:auto;position:absolute;inset:0}.drop-actions{gap:.6rem;display:flex}.drop input,.button-like input{opacity:0;width:1px;height:1px;position:absolute}.overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.overlay ellipse{fill:none;stroke-width:1.5px;vector-effect:non-scaling-stroke}.grow-outlines ellipse{stroke:var(--accent)}.grow-outlines{animation:1s ease-out forwards outline-fade}@keyframes outline-fade{0%{opacity:1}to{opacity:0}}.hovered-blob ellipse{stroke:#fff;stroke-width:2px}.hovered-blob text{fill:#fff;font-family:var(--mono);paint-order:stroke;stroke:var(--bg);stroke-width:3px;vector-effect:non-scaling-stroke}@media (prefers-reduced-motion:reduce){.grow-outlines{display:none}}.counters{grid-template-columns:repeat(3,auto);justify-content:center;gap:2.5rem;margin:0;display:grid}.counters div{flex-direction:column;gap:.2rem;display:flex}.counters dd{white-space:nowrap;margin:0}.big{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:2.5rem;line-height:1}.accent{color:var(--accent)}.of{font-family:var(--mono);letter-spacing:.1em;color:var(--muted);font-size:.75rem}.chart{flex-direction:column;gap:.35rem;margin:0;display:flex}.chart svg{width:100%;height:3.5rem;display:block}.chart-axis{stroke:var(--line-strong);stroke-width:1px;vector-effect:non-scaling-stroke}.chart-line{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-linejoin:round}.code-column{flex-direction:column;grid-area:code;gap:1rem;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.code-panel{min-width:0;min-height:0;color:var(--muted);font-family:var(--mono);white-space:pre;font-size:.72rem;line-height:1.4;overflow:hidden}.code-panel p{margin:0}.code-panel .accent-label{margin-bottom:.5rem}.code-intro{width:0;min-width:100%;font-family:var(--sans);white-space:normal;font-size:.85rem;line-height:1.45;margin-bottom:1rem!important}.flash{color:var(--accent)}@media (prefers-reduced-motion:reduce){.flash{color:inherit}}.primary-summary{background:var(--accent);color:var(--on-accent);border-radius:.35rem;justify-content:center;padding:.6rem 1rem;font-size:.9rem;font-weight:500;list-style:none;display:flex}.primary-summary::-webkit-details-marker{display:none}.poster[open] .primary-summary{margin-bottom:.4rem}.downloads button.secondary{width:100%}.code-legend{color:var(--text)}.code-key{white-space:normal;width:0;min-width:100%;margin-bottom:.5rem!important}.code-gutter{color:var(--muted)}.code-lines{margin:0;padding:0;list-style:none}.code-line{color:var(--text);cursor:default;border-radius:.2rem}.code-line.hovered,.code-line:focus-visible{background:var(--raised);outline:1px solid var(--line-strong)}.code-swatch{vertical-align:-.05em;border-radius:.15em;width:.8em;height:.8em;display:inline-block;box-shadow:inset 0 0 0 1px #ffffff1f}.code-line.new .code-gutter{color:var(--accent)}.stage.landscape .code-lines{columns:17rem;column-fill:auto;column-gap:2rem;height:16.8em}@media (width<=80rem){.stage.portrait:not(.idle) .code-lines{columns:17rem;column-fill:auto;column-gap:2rem;height:16.8em}}.downloads{flex-direction:column;gap:.6rem;font-size:.8rem;line-height:1.4;display:flex}button,.button-like{color:var(--text);border:1px solid var(--line-strong);font:inherit;font-family:var(--sans);cursor:pointer;white-space:nowrap;background:0 0;border-radius:.35rem;justify-content:center;align-items:center;padding:.55rem 1rem;font-size:.9rem;display:inline-flex;position:relative}button:hover:not(:disabled),.button-like:hover,.button-like:focus-within{border-color:var(--text)}button:focus-visible,.button-like:focus-within,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{color:var(--muted);border-color:var(--line);cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}button.primary:hover:not(:disabled){border-color:var(--text)}button.primary:disabled{background:var(--raised);border-color:var(--line);color:var(--muted)}.button-like.quiet{color:var(--muted);border-color:#0000}input[type=number],select{background:var(--bg);color:var(--text);border:1px solid var(--line-strong);font:inherit;font-family:var(--mono);border-radius:.3rem;padding:.4rem .55rem;font-size:.85rem}input[type=number]{width:6rem}.error{color:var(--error);padding:.6rem 1.5rem;font-size:.9rem}.error button{margin-left:.5rem}.message a{color:var(--accent)}.bar{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;padding:.9rem 1.5rem;display:grid}.bar-file{justify-self:start}.bar-settings{justify-self:end}.cap-note{max-width:16rem;color:var(--muted);font-size:.75rem;line-height:1.35}@media (width<=64rem){.bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"actions actions""file settings"}.bar-actions{grid-area:actions;justify-self:center}.bar-actions:empty{display:none}.bar-file{grid-area:file}.bar-settings{grid-area:settings}}.bar-actions,.bar-settings{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.bar-settings{gap:1.25rem}.bar-settings label,.growth-time{align-items:center;gap:.5rem;display:flex}.growth-time{font-family:var(--mono);font-variant-numeric:tabular-nums}.poster{flex-direction:column;gap:.6rem;display:flex}.poster summary{cursor:pointer}.poster label,.devtools label{color:var(--muted);justify-content:space-between;align-items:center;gap:.75rem;display:flex}.poster-intro,.poster-size,.poster-status{color:var(--muted)}.poster-size{font-family:var(--mono)}.poster-warning{color:var(--accent)}.poster-progress{align-items:center;gap:.5rem;display:flex}.poster-progress progress{accent-color:var(--accent);flex:1}.devtools{z-index:10;background:var(--raised);border:1px solid var(--line-strong);max-width:22rem;max-height:70vh;font-family:var(--mono);border-radius:.5rem;flex-direction:column;gap:.6rem;padding:.75rem 1rem;font-size:.72rem;line-height:1.5;display:flex;position:fixed;bottom:5rem;right:1rem;overflow:auto}.devtools summary{cursor:pointer;color:var(--accent)}.dev-readout{color:var(--muted)}.selftest p{color:var(--muted);margin-top:.6rem}.pass{color:var(--accent)!important}.fail{color:var(--error)!important}@media (width<=720px){.top{flex-direction:column;align-items:flex-start;gap:.6rem;padding:.75rem 1rem}.brand{flex-direction:column;gap:.25rem}.stage,.stage.portrait,.stage.landscape,.stage.portrait:not(.idle){grid-template:"centre"minmax(0,1fr)"explain"minmax(0,8.5rem)/minmax(0,1fr);gap:.75rem;padding:1rem}.headline{font-size:1.3rem}.big{font-size:1.6rem}.counters{gap:1.25rem}.code-column{display:none}.bar{padding:.75rem 1rem}}@media (height<=860px){:root{--below:12rem}.stage.landscape .chart,.stage.portrait:not(.idle) .chart{display:none}}@media (height<=860px) and (width>=80rem){.stage.portrait:not(.idle) .chart{display:flex}}@media (width<=720px){.chart{display:none!important}.tagline{font-size:.8rem}.phases{letter-spacing:.06em;flex-wrap:wrap;gap:.3rem;font-size:.6rem}.phases li{padding:.25rem .45rem}.bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"actions""settings""file";gap:.6rem}.bar-file,.bar-settings{justify-self:start}.bar-settings{gap:.4rem 1rem}.bar-settings input{width:4.5rem}.cap-note{flex-basis:100%;order:1;max-width:none}.stage:has(.downloads){grid-template-rows:minmax(0,1fr) auto minmax(0,6rem);grid-template-areas:"centre""code""explain"}.stage.portrait:not(.idle):has(.downloads){grid-template-rows:minmax(0,1fr) auto minmax(0,6rem);grid-template-areas:"centre""code""explain"}.stage.landscape:has(.downloads){grid-template-rows:minmax(0,1fr) auto minmax(0,6rem);grid-template-areas:"centre""code""explain"}.code-column:has(.downloads){max-height:34dvh;display:flex;overflow-y:auto}.stage:has(.poster[open]){grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"centre""code"}.stage.portrait:not(.idle):has(.poster[open]){grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"centre""code"}.stage.landscape:has(.poster[open]){grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"centre""code"}:is(.stage:has(.poster[open]) .explain,.stage:has(.poster[open]) .counters){display:none}.code-column:has(.poster[open]){max-height:42dvh}.stage:has(.downloads) .centre{overflow:hidden}:is(.code-column:has(.downloads) .code-panel,.downloads>.muted){display:none}.downloads{flex-flow:wrap;align-items:flex-start}.downloads .poster{flex:100%}}
