.demo[data-astro-cid-vldvcjgk]{--picked-accent:#1f9fb0;max-width:760px;margin-inline:auto}.controls[data-astro-cid-vldvcjgk]{align-items:center;gap:12px 20px}.picker[data-astro-cid-vldvcjgk]{cursor:pointer;align-items:center;gap:10px;display:inline-flex}.picker[data-astro-cid-vldvcjgk] input[data-astro-cid-vldvcjgk]{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:50%;width:34px;height:34px;padding:0;overflow:hidden}.picker[data-astro-cid-vldvcjgk] input[data-astro-cid-vldvcjgk]::-webkit-color-swatch-wrapper{padding:0}.picker[data-astro-cid-vldvcjgk] input[data-astro-cid-vldvcjgk]::-webkit-color-swatch,.picker[data-astro-cid-vldvcjgk] input[data-astro-cid-vldvcjgk]::-moz-color-swatch{border:0;border-radius:50%}.presets[data-astro-cid-vldvcjgk]{align-items:center;gap:8px;display:flex}.preset[data-astro-cid-vldvcjgk]{background:var(--swatch);width:22px;height:22px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent);cursor:pointer;border:0;border-radius:50%;padding:0}.preset[data-astro-cid-vldvcjgk][aria-pressed=true]{outline:2px solid var(--fg);outline-offset:3px}.cycle-label[data-astro-cid-vldvcjgk]{font:500 11.5px/1.4 var(--font-mono);margin-left:auto}.matrix[data-astro-cid-vldvcjgk]{grid-template-columns:72px minmax(0,1fr) minmax(0,1fr);gap:10px;display:grid}.colhead[data-astro-cid-vldvcjgk],.rowhead[data-astro-cid-vldvcjgk]{align-content:end;gap:2px;display:grid}.colhead[data-astro-cid-vldvcjgk] code[data-astro-cid-vldvcjgk]{color:var(--fg);font-size:11px}.rowhead[data-astro-cid-vldvcjgk]{align-content:center}.cell[data-astro-cid-vldvcjgk]{border:1px solid var(--line);border-radius:12px;gap:16px;min-width:0;padding:18px;display:grid}.cell[data-astro-cid-vldvcjgk].light{color:#13222b;color-scheme:light;background:#eef3f4}.cell[data-astro-cid-vldvcjgk].dark{color:#e4eef0;color-scheme:dark;background:#0f1a1f;border-color:#0000}.cell[data-astro-cid-vldvcjgk].custom input[data-astro-cid-vldvcjgk],.cell[data-astro-cid-vldvcjgk].custom progress[data-astro-cid-vldvcjgk]{accent-color:var(--picked-accent)}.row[data-astro-cid-vldvcjgk]{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.row[data-astro-cid-vldvcjgk] label[data-astro-cid-vldvcjgk]{font:400 11px/1.4 var(--font-mono);opacity:.85;cursor:pointer;align-items:center;gap:6px;display:inline-flex}.row[data-astro-cid-vldvcjgk] label[data-astro-cid-vldvcjgk]:has(input:disabled){opacity:.45;cursor:not-allowed}.row[data-astro-cid-vldvcjgk] input[data-astro-cid-vldvcjgk][type=checkbox],.row[data-astro-cid-vldvcjgk] input[data-astro-cid-vldvcjgk][type=radio]{cursor:pointer;width:18px;height:18px;margin:0}.row[data-astro-cid-vldvcjgk] input[data-astro-cid-vldvcjgk]:disabled{cursor:not-allowed}.stack[data-astro-cid-vldvcjgk]{gap:10px;display:grid}.stack[data-astro-cid-vldvcjgk] input[data-astro-cid-vldvcjgk][type=range],.stack[data-astro-cid-vldvcjgk] progress[data-astro-cid-vldvcjgk]{width:100%;margin:0}.snippet[data-astro-cid-vldvcjgk]{white-space:pre;display:block}.swatch[data-astro-cid-vldvcjgk]{background:var(--picked-accent);vertical-align:-2px;border-radius:4px;width:14px;height:14px;margin-right:5px;display:inline-block}.snippet-value[data-astro-cid-vldvcjgk]{color:var(--accent)}.note[data-astro-cid-vldvcjgk]{max-width:62ch;color:var(--muted);margin:-8px 0 0;font-size:12.5px}@media (width<=600px){.matrix[data-astro-cid-vldvcjgk]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.corner[data-astro-cid-vldvcjgk],.rowhead[data-astro-cid-vldvcjgk]{display:none}.cell[data-astro-cid-vldvcjgk]:before{content:attr(data-label);color:var(--muted);font:500 9.5px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.cell[data-astro-cid-vldvcjgk]{padding:14px}.cycle-label[data-astro-cid-vldvcjgk]{margin-left:0}}.demo[data-astro-cid-54jgkz45]{--s1:#1e3a8a;--s2:#e0f2fe;--s3:#0b1f4d;--s4:#38bdf8;--s5:#93c5fd;--s6:#3b82f6;--s7:#60a5fa;--s8:#2563eb;--s9:#172554;--sky:#1d4ed8}.demo[data-astro-cid-54jgkz45][data-palette=sunset]{--s1:#b22222;--s2:#ffe4e1;--s3:#8b0000;--s4:coral;--s5:#ffa07a;--s6:#cd5c5c;--s7:#f08080;--s8:#c0392b;--s9:maroon;--sky:#add8e6}.demo[data-astro-cid-54jgkz45][data-palette=mint]{--s1:#0f766e;--s2:#e6fffb;--s3:#134e4a;--s4:#5eead4;--s5:#99f6e4;--s6:#14b8a6;--s7:#67e8f9;--s8:#0891b2;--s9:#164e63;--sky:#a5f3fc}.demo[data-astro-cid-54jgkz45][data-palette=orchid]{--s1:#6b21a8;--s2:#f3e8ff;--s3:#3b0764;--s4:#c084fc;--s5:#d8b4fe;--s6:#a855f7;--s7:#e879f9;--s8:#9333ea;--s9:#581c87;--sky:#c4b5fd}.controls[data-astro-cid-54jgkz45]{align-items:center;gap:8px 24px}.swatches[data-astro-cid-54jgkz45]{flex-wrap:wrap;gap:4px;margin-left:auto;display:flex}.swatches[data-astro-cid-54jgkz45] span[data-astro-cid-54jgkz45]{background:var(--swatch);width:18px;height:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent);border-radius:5px;transition:background-color .35s}.detail[data-astro-cid-54jgkz45]{border:1px solid var(--line);background:var(--surface);border-radius:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:14px;display:grid}.big[data-astro-cid-54jgkz45]{aspect-ratio:4/3;width:100%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent);border-radius:8px;transition:background .35s}.info[data-astro-cid-54jgkz45]{align-content:start;gap:9px;min-width:0;display:grid}.info[data-astro-cid-54jgkz45] h2[data-astro-cid-54jgkz45]{font:700 20px/1.15 var(--font-display);letter-spacing:-.01em;margin:0}.info[data-astro-cid-54jgkz45] p[data-astro-cid-54jgkz45]{color:var(--muted);margin:0}.code[data-astro-cid-54jgkz45]{border:1px solid var(--line);background:var(--bg);border-radius:8px;position:relative;overflow-x:auto}.code[data-astro-cid-54jgkz45] .k[data-astro-cid-54jgkz45]{color:var(--muted)}.code[data-astro-cid-54jgkz45] .v[data-astro-cid-54jgkz45]{color:var(--accent)}.copy-row[data-astro-cid-54jgkz45]{align-items:center;min-height:32px;display:flex}.copy-row[data-astro-cid-54jgkz45] button[data-astro-cid-54jgkz45]{border:1px solid var(--line);border-radius:999px;min-height:30px;padding-inline:11px}.copy-row[data-astro-cid-54jgkz45] button[data-astro-cid-54jgkz45]:hover{border-color:var(--accent)}.families[data-astro-cid-54jgkz45]{gap:18px;display:grid}.family[data-astro-cid-54jgkz45]{grid-template-columns:96px minmax(0,1fr);align-items:start;gap:16px;display:grid}.family[data-astro-cid-54jgkz45]+.family[data-astro-cid-54jgkz45]{border-top:1px dashed var(--line);padding-top:18px}.fhead[data-astro-cid-54jgkz45]{gap:4px;padding-top:4px;display:grid}.fhead[data-astro-cid-54jgkz45] b[data-astro-cid-54jgkz45]{font:700 15px/1.2 var(--font-display)}.tiles[data-astro-cid-54jgkz45]{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.tile[data-astro-cid-54jgkz45]{min-width:0;color:var(--fg);text-align:left;font:inherit;cursor:pointer;background:0 0;border:0;gap:6px;padding:0;display:grid}.swatch[data-astro-cid-54jgkz45]{aspect-ratio:1;border-radius:18px;width:100%;transition:transform .5s cubic-bezier(.3,.7,.2,1),border-radius .5s;box-shadow:0 1px 2px #00000014,0 8px 18px -10px #00000059}.nm[data-astro-cid-54jgkz45]{font:500 12px/1.35 var(--font-body)}.nm[data-astro-cid-54jgkz45] small[data-astro-cid-54jgkz45]{color:var(--muted);font:400 10px/1.4 var(--font-mono);margin-top:2px;display:block}.tile[data-astro-cid-54jgkz45][aria-pressed=true] .nm[data-astro-cid-54jgkz45]{color:var(--accent)}.tile[data-astro-cid-54jgkz45][aria-pressed=true] .swatch[data-astro-cid-54jgkz45]{outline:2px solid var(--accent);outline-offset:3px}.tile[data-astro-cid-54jgkz45]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}@media (hover:hover){.tile[data-astro-cid-54jgkz45]:hover .swatch[data-astro-cid-54jgkz45]{border-radius:4px;transform:rotate(180deg)scale(1.04)}}@media (width<=600px){.detail[data-astro-cid-54jgkz45]{grid-template-columns:1fr;gap:12px}.big[data-astro-cid-54jgkz45]{max-height:260px}.family[data-astro-cid-54jgkz45]{grid-template-columns:1fr;gap:10px}.fhead[data-astro-cid-54jgkz45]{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:10px}.tiles[data-astro-cid-54jgkz45]{grid-template-columns:repeat(2,minmax(0,1fr))}.swatches[data-astro-cid-54jgkz45]{margin-left:0}}@media (prefers-reduced-motion:reduce){.big[data-astro-cid-54jgkz45],.swatches[data-astro-cid-54jgkz45] span[data-astro-cid-54jgkz45],.swatch[data-astro-cid-54jgkz45]{transition:none}}.demo[data-astro-cid-csb6tgmu][data-study=index-tiles]{--hue:300;--hstep:9;--astep:45;--rstep:3;--dstep:300;--play:running;gap:18px}.knobs[data-astro-cid-csb6tgmu]{border-block:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:12px 22px;padding-block:14px;display:grid}.knob[data-astro-cid-csb6tgmu]{grid-template-columns:62px minmax(0,1fr) 44px;align-items:center;gap:10px;min-width:0;display:grid}.knob[data-astro-cid-csb6tgmu] code[data-astro-cid-csb6tgmu]{color:var(--muted);font:400 11px/1.4 var(--font-mono)}.knob[data-astro-cid-csb6tgmu] input[data-astro-cid-csb6tgmu]{width:100%;min-width:0;accent-color:var(--accent);margin:0}.knob[data-astro-cid-csb6tgmu] output[data-astro-cid-csb6tgmu]{color:var(--fg);font:500 11px/1.4 var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}.actions[data-astro-cid-csb6tgmu]{align-items:center;gap:12px;display:flex}.actions[data-astro-cid-csb6tgmu] .label[data-astro-cid-csb6tgmu]{margin-right:auto}.main[data-astro-cid-csb6tgmu]{grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:start;gap:28px;display:grid}.grid[data-astro-cid-csb6tgmu]{border:1px solid var(--line);background:var(--surface);border-radius:16px;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;max-width:360px;padding:10px;display:grid}.cell[data-astro-cid-csb6tgmu]{aspect-ratio:1;cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;min-width:0;padding:0;display:grid}.cell[data-astro-cid-csb6tgmu][aria-pressed=true]{outline:2px solid var(--fg);outline-offset:2px}.tile[data-astro-cid-csb6tgmu]{--h1:calc(var(--hue) + var(--i) * var(--hstep));--h2:calc(var(--h1) - 50);aspect-ratio:1;border-radius:clamp(2px, calc(var(--i) * var(--rstep) * 1px), 50%);background:linear-gradient(calc(45deg + var(--i) * var(--astep) * 1deg), hsl(var(--h1) 75% 62%), hsl(var(--h2) 80% 42%));width:100%;animation:spin calc(var(--i) * var(--dstep) * 1ms) linear calc(var(--i) * .1s) infinite;animation-play-state:var(--play);color:#fff;font:500 10px/1 var(--font-mono);text-shadow:0 1px 2px #0000004d;place-items:center;display:grid}@keyframes spin{to{transform:rotate(360deg)}}.sheet[data-astro-cid-csb6tgmu]{gap:14px;min-width:0;display:grid}.demo[data-study=index-tiles] .demo-code .v{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);border-radius:3px;padding-inline:2px;font-weight:700}.picked[data-astro-cid-csb6tgmu]{gap:8px;display:grid}.picked[data-astro-cid-csb6tgmu] h2[data-astro-cid-csb6tgmu]{font:700 18px/1.2 var(--font-display);letter-spacing:-.01em;align-items:center;gap:10px;margin:0;display:flex}.chip[data-astro-cid-csb6tgmu]{width:22px;animation:none;border-radius:6px!important}.picked[data-astro-cid-csb6tgmu] dl[data-astro-cid-csb6tgmu]{font:400 11px/1.55 var(--font-mono);grid-template-columns:auto minmax(0,1fr);column-gap:14px;margin:0;display:grid}.demo[data-study=index-tiles] .picked dt{color:var(--muted);border-bottom:1px solid var(--line);letter-spacing:.08em;text-transform:uppercase;padding-block:7px;font-size:9px}.demo[data-study=index-tiles] .picked dd{border-bottom:1px solid var(--line);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;min-width:0;margin:0;padding-block:7px;display:grid}.demo[data-study=index-tiles] .picked .actual{color:var(--fg);font-size:12px;font-weight:500}.demo[data-study=index-tiles] .picked .calc{color:var(--muted);font-size:10px}@media (width<=640px){.main[data-astro-cid-csb6tgmu]{grid-template-columns:minmax(0,1fr)}.grid[data-astro-cid-csb6tgmu]{margin-inline:auto}}@media (prefers-reduced-motion:reduce){.tile[data-astro-cid-csb6tgmu]{animation-play-state:paused}}@property --countdown{syntax:"<integer>";inherits:false;initial-value:8}.demo-bar[data-astro-cid-lbrucsa2] .label[data-astro-cid-lbrucsa2]{color:var(--muted)}.specimen-grid[data-astro-cid-lbrucsa2]{--card:color-mix(in oklab, var(--surface) 45%, var(--bg));--accent-soft:color-mix(in oklab, var(--accent) 20%, var(--bg));grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.specimen[data-astro-cid-lbrucsa2]{background:var(--card);border:1px solid var(--line);isolation:isolate;border-radius:12px;grid-template-rows:auto 1fr auto;min-width:0;min-height:150px;padding:10px 12px 12px;transition:background .5s,border-color .5s;display:grid}.specimen-number[data-astro-cid-lbrucsa2]{font:500 10.5px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted)}.specimen-stage[data-astro-cid-lbrucsa2]{place-items:center;padding-block:14px;display:grid}.specimen-meta[data-astro-cid-lbrucsa2]{gap:1px;display:grid}.specimen-meta[data-astro-cid-lbrucsa2] b[data-astro-cid-lbrucsa2]{font:500 12.5px var(--font-body)}.specimen-meta[data-astro-cid-lbrucsa2] code[data-astro-cid-lbrucsa2]{font:400 10.5px var(--font-mono);color:var(--muted);overflow-wrap:anywhere}.specimen-link[data-astro-cid-lbrucsa2]{isolation:isolate;color:var(--fg);font:500 15px/1.3 var(--font-body);border-radius:4px;padding:4px 6px;text-decoration:none;transition:color .35s,background-size .35s,transform .35s,text-shadow .35s;display:inline-block;position:relative}.specimen-link[data-astro-cid-lbrucsa2]:before,.specimen-link[data-astro-cid-lbrucsa2]:after{content:"";pointer-events:none;position:absolute}.specimen-link[data-astro-cid-lbrucsa2]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.hover-sweep[data-astro-cid-lbrucsa2]{background:linear-gradient(var(--accent), var(--accent)) no-repeat left / 0% 100%}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-sweep[data-astro-cid-lbrucsa2]{color:var(--bg);background-size:100% 100%}.hover-rise[data-astro-cid-lbrucsa2]{background:linear-gradient(var(--fg), var(--fg)) no-repeat bottom / 100% 1.5px}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-rise[data-astro-cid-lbrucsa2]{color:var(--bg);background-size:100% 100%}.hover-slide-through[data-astro-cid-lbrucsa2]{background:linear-gradient(var(--accent), var(--accent)) no-repeat right bottom / 0% 2px}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-slide-through[data-astro-cid-lbrucsa2]{background-position:0 100%;background-size:100% 2px}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-wiggle[data-astro-cid-lbrucsa2]{color:var(--accent);animation:.55s ease-in-out link-wiggle}@keyframes link-wiggle{20%{transform:rotate(-5deg)}45%{transform:rotate(4deg)}70%{transform:rotate(-2deg)}to{transform:none}}.hover-scale-swap[data-astro-cid-lbrucsa2]:after{transform-origin:100%;background:currentColor;height:1.5px;transition:transform .35s;bottom:1px;left:6px;right:6px;transform:scaleX(0)}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-scale-swap[data-astro-cid-lbrucsa2]:after{transform-origin:0;transform:scaleX(1)}.hover-shimmer[data-astro-cid-lbrucsa2]{color:#0000;background-image:linear-gradient(100deg, var(--fg) 0 40%, var(--accent) 50%, var(--fg) 60% 100%);background-position:100% 0;background-size:300% 100%;-webkit-background-clip:text;background-clip:text}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-shimmer[data-astro-cid-lbrucsa2]{animation:1.4s linear infinite link-shimmer}@keyframes link-shimmer{0%{background-position:100% 0}to{background-position:0 0}}.hover-highlighter[data-astro-cid-lbrucsa2]{background:linear-gradient(var(--accent-soft), var(--accent-soft)) no-repeat 0 100% / 100% 3px}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-highlighter[data-astro-cid-lbrucsa2]{background-size:100% 62%}.hover-countdown[data-astro-cid-lbrucsa2] .countdown-number{text-align:left;font-variant-numeric:tabular-nums;counter-reset:countdown var(--countdown);min-width:1.3ch;display:inline-block}.hover-countdown[data-astro-cid-lbrucsa2] .countdown-number:after{content:counter(countdown)}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-countdown[data-astro-cid-lbrucsa2]{color:var(--accent)}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-countdown[data-astro-cid-lbrucsa2] .countdown-number{animation:2.4s linear forwards link-countdown}@keyframes link-countdown{to{--countdown:0}}.hover-opposing-bars[data-astro-cid-lbrucsa2]:before,.hover-opposing-bars[data-astro-cid-lbrucsa2]:after{background:var(--accent);height:1.5px;transition:transform .35s;left:0;right:0;transform:scaleX(0)}.hover-opposing-bars[data-astro-cid-lbrucsa2]:before{transform-origin:0;top:0}.hover-opposing-bars[data-astro-cid-lbrucsa2]:after{transform-origin:100%;bottom:0}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-opposing-bars[data-astro-cid-lbrucsa2]:before,[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-opposing-bars[data-astro-cid-lbrucsa2]:after{transform:scaleX(1)}.hover-box-slide[data-astro-cid-lbrucsa2]{overflow:hidden}.hover-box-slide[data-astro-cid-lbrucsa2]:before{z-index:-1;background:var(--accent-soft);border:1px solid var(--accent);border-radius:4px;transition:transform .4s cubic-bezier(.2,.8,.2,1);inset:0;transform:translate(-101%)}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-box-slide[data-astro-cid-lbrucsa2]:before{transform:none}.hover-frame-out[data-astro-cid-lbrucsa2]:before{border:1.5px solid var(--accent);opacity:0;border-radius:6px;transition:inset .35s,opacity .35s;inset:6px}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-frame-out[data-astro-cid-lbrucsa2]{font-weight:600}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-frame-out[data-astro-cid-lbrucsa2]:before{opacity:1;inset:-3px}.hover-difference[data-astro-cid-lbrucsa2]{isolation:auto}.hover-difference[data-astro-cid-lbrucsa2]:before{mix-blend-mode:difference;background:#fff;border-radius:50%;width:10px;height:10px;transition:left .4s,width .4s,height .4s,border-radius .4s;top:50%;left:-14px;translate:0 -50%}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-difference[data-astro-cid-lbrucsa2]:before{border-radius:6px;width:100%;height:100%;left:0}.hover-double[data-astro-cid-lbrucsa2]:after{border-bottom:1.5px solid var(--accent);width:0;transition:width .3s,border-bottom-width .25s .3s;bottom:-2px;left:50%;translate:-50%}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-double[data-astro-cid-lbrucsa2]:after{border-bottom:5px double var(--accent);width:100%}.hover-dot-to-line[data-astro-cid-lbrucsa2]:after{background:var(--accent);border-radius:3px;width:6px;height:6px;transition:all .4s cubic-bezier(.5,0,.2,1);top:calc(50% - 3px);left:-12px}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-dot-to-line[data-astro-cid-lbrucsa2]:after{width:calc(100% - 12px);height:2px;top:calc(100% - 2px);left:6px}.hover-pill[data-astro-cid-lbrucsa2]:before,.hover-pill[data-astro-cid-lbrucsa2]:after{z-index:-1;background:var(--fg);border-radius:999px;width:8px;height:8px;transition:all .4s cubic-bezier(.5,0,.2,1);top:calc(50% - 4px)}.hover-pill[data-astro-cid-lbrucsa2]:before{left:-14px}.hover-pill[data-astro-cid-lbrucsa2]:after{right:-14px}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-pill[data-astro-cid-lbrucsa2]{color:var(--bg)}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-pill[data-astro-cid-lbrucsa2]:before{border-radius:999px 0 0 999px;width:55%;height:100%;top:0;left:-4px}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-pill[data-astro-cid-lbrucsa2]:after{border-radius:0 999px 999px 0;width:55%;height:100%;top:0;right:-4px}.hover-roll[data-astro-cid-lbrucsa2]{padding:0;overflow:hidden}.hover-roll[data-astro-cid-lbrucsa2] .roll-text{padding:4px 6px;transition:transform .4s cubic-bezier(.6,0,.2,1);display:block;position:relative}.hover-roll[data-astro-cid-lbrucsa2] .roll-text:after{content:attr(data-text);color:var(--accent);padding:4px 6px;position:absolute;top:100%;left:0}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-roll[data-astro-cid-lbrucsa2] .roll-text{transform:translateY(-100%)}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-glow[data-astro-cid-lbrucsa2]{color:var(--accent);text-shadow:0 0 14px color-mix(in oklab, var(--accent) 70%, transparent);transform:scale(1.04)}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-stack[data-astro-cid-lbrucsa2]{text-shadow:1px 1px 0 var(--accent), 2px 2px 0 var(--accent), 3px 3px 0 var(--accent);transform:translate(-3px,-3px)}.hover-strike-drop[data-astro-cid-lbrucsa2]:after{background:var(--accent);transform-origin:0;height:1.5px;top:50%;left:6px;right:6px;transform:scaleX(0)}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-strike-drop[data-astro-cid-lbrucsa2]:after{animation:.7s forwards link-strike-drop}@keyframes link-strike-drop{0%{top:50%;transform:scaleX(0)}50%{top:50%;transform:scaleX(1)}to{top:calc(100% - 1px);transform:scaleX(1)}}.hover-refocus[data-astro-cid-lbrucsa2]:before{border:1px dashed var(--muted);opacity:0;border-radius:6px;transition:inset .45s,opacity .3s;inset:50%}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-refocus[data-astro-cid-lbrucsa2]{animation:.6s link-refocus}[data-astro-cid-lbrucsa2]:is(.specimen:hover,.specimen.is-tapped,.show-all .specimen,.specimen:has(:focus-visible)) .hover-refocus[data-astro-cid-lbrucsa2]:before{opacity:1;inset:-4px}@keyframes link-refocus{0%{filter:blur();letter-spacing:0}40%{filter:blur(2.5px);letter-spacing:.06em}to{filter:blur();letter-spacing:0}}@media (width<=640px){.specimen-grid[data-astro-cid-lbrucsa2]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.specimen-link[data-astro-cid-lbrucsa2],.specimen-link[data-astro-cid-lbrucsa2]:before,.specimen-link[data-astro-cid-lbrucsa2]:after,.specimen-link[data-astro-cid-lbrucsa2] span{transition-duration:10ms!important;animation:none!important}}.demo[data-study=transform-tiles]{gap:18px}.demo[data-study=transform-tiles] .demo-bar{gap:8px 24px}.demo[data-study=transform-tiles] .control{flex:1;align-items:center;gap:10px;min-width:min(100%,190px);display:flex}.demo[data-study=transform-tiles] .control input{min-width:48px;accent-color:var(--accent);flex:1}.demo[data-study=transform-tiles] .control output{min-width:52px;color:var(--muted);font:500 11px/1.4 var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}.demo[data-study=transform-tiles] .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.demo[data-study=transform-tiles] .tile{border:1px solid var(--line);background:var(--bg);cursor:default;border-radius:12px;gap:8px;min-width:0;padding:10px 10px 12px;display:grid}.demo[data-study=transform-tiles] .tile.paused{border-color:var(--accent)}.demo[data-study=transform-tiles] .tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.demo[data-study=transform-tiles] .specimen{aspect-ratio:1;background:linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 20% 20%, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 20% 20%;border-radius:8px;place-items:center;display:grid;position:relative;overflow:hidden}.demo[data-study=transform-tiles] .ghost,.demo[data-study=transform-tiles] .sq{aspect-ratio:1;border-radius:4px;grid-area:1/1;width:40%}.demo[data-study=transform-tiles] .ghost{border:1.5px dashed var(--muted);opacity:.55}.demo[data-study=transform-tiles] .sq{background:var(--tile);box-shadow:0 6px 14px -8px var(--tile);will-change:transform;position:relative}.demo[data-study=transform-tiles] .sq:before{aspect-ratio:1;background:var(--bg);content:"";border-radius:50%;width:18%;position:absolute;top:14%;left:14%}.demo[data-study=transform-tiles] .origin{z-index:1;pointer-events:none;opacity:.7;background:linear-gradient(var(--fg), var(--fg)) center / 100% 1.5px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 1.5px 100% no-repeat;grid-area:1/1;width:9px;height:9px}.demo[data-study=transform-tiles] .meta{gap:2px;min-width:0;display:grid}.demo[data-study=transform-tiles] .row{justify-content:space-between;align-items:baseline;gap:6px;display:flex}.demo[data-study=transform-tiles] .name{font-size:12px}.demo[data-study=transform-tiles] .family{color:var(--muted);font:500 9px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.demo[data-study=transform-tiles] .meta code{overflow-wrap:anywhere;min-height:2.8em;color:var(--muted);font:400 10px/1.4 var(--font-mono);font-variant-numeric:tabular-nums}.demo[data-study=transform-tiles] .key{color:var(--muted);font:400 10px/1.5 var(--font-mono);flex-wrap:wrap;gap:6px 18px;display:flex}.demo[data-study=transform-tiles] .key span{align-items:center;gap:6px;display:inline-flex}.demo[data-study=transform-tiles] .key i{border-radius:3px;width:10px;height:10px;display:inline-block}.demo[data-study=transform-tiles] .ghost-key{border:1.5px dashed var(--muted)}.demo[data-study=transform-tiles] .origin-key{background:var(--fg);border-radius:0!important;width:2px!important}@media (width<=900px){.demo[data-study=transform-tiles] .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=640px){.demo[data-study=transform-tiles] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}.scene[data-astro-cid-snk53x7l]{--split:50%;isolation:isolate;aspect-ratio:16/8;background:linear-gradient(#fff 0 var(--split), #000 var(--split) 100%);border-radius:10px;place-items:center;max-width:100%;display:grid;position:relative;overflow:hidden;container-type:inline-size}.edge[data-astro-cid-snk53x7l]{left:0;right:0;top:var(--split);pointer-events:none;position:absolute}.edge[data-astro-cid-snk53x7l] span[data-astro-cid-snk53x7l]{font:500 9.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#888;mix-blend-mode:difference;position:absolute;top:-9px;right:10px}@container (width<=480px){.edge[data-astro-cid-snk53x7l] span[data-astro-cid-snk53x7l]{display:none}}.headline[data-astro-cid-snk53x7l]{color:#fff;mix-blend-mode:var(--blend,exclusion);font:800 9.4cqi/1 var(--font-display);letter-spacing:-.03em;text-transform:uppercase;text-align:center;margin:0;padding-inline:4cqi}.lead[data-astro-cid-snk53x7l]{display:block}.word-a[data-astro-cid-snk53x7l]:after{content:"Eclectic";animation:8s infinite alternate word-cycle;animation-play-state:var(--play,running)}@keyframes word-cycle{0%{content:"Eclectic";color:oklch(72% .19 350)}12.5%{content:"Vibrant";color:oklch(72% .19 20)}25%{content:"Evolving";color:oklch(72% .19 60)}37.5%{content:"Colorful";color:oklch(72% .19 120)}50%{content:"Diverse";color:oklch(72% .19 170)}62.5%{content:"Busy";color:oklch(72% .19 210)}75%{content:"Lively";color:oklch(72% .19 250)}87.5%{content:"Inspiring";color:oklch(72% .19 285)}to{content:"Exciting";color:oklch(72% .19 315)}}.word-b[data-astro-cid-snk53x7l]{vertical-align:bottom;height:1em;display:inline-block;overflow:hidden}.roll[data-astro-cid-snk53x7l]{transition:transform .6s cubic-bezier(.65,0,.25,1);display:block}.roll[data-astro-cid-snk53x7l]>span[data-astro-cid-snk53x7l]{height:1em;line-height:1;display:block}.scene[data-astro-cid-snk53x7l][data-mode=roll] .word-a[data-astro-cid-snk53x7l],.scene[data-astro-cid-snk53x7l][data-mode=swap] .word-b[data-astro-cid-snk53x7l]{display:none}@media (width<=640px){.scene[data-astro-cid-snk53x7l]{aspect-ratio:4/3}}@media (prefers-reduced-motion:reduce){.roll[data-astro-cid-snk53x7l]{transition:none}}.like{z-index:1;color:var(--muted);cursor:pointer;font:500 10.5px/1 var(--font-mono);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;background:0 0;border:0;justify-self:end;align-items:center;gap:5px;padding:6px 2px;display:inline-flex;position:relative}.like svg{width:16px;height:16px;overflow:visible}.like .h-o{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linejoin:round;transition:stroke .2s}.like .h-f{fill:var(--heart)}.like .lv{transition:y .5s cubic-bezier(.3,1.4,.5,1)}.like .face{opacity:0;transform-origin:12px 12px;transition:opacity .3s,transform .45s cubic-bezier(.3,1.8,.5,1);transform:scale(.4)}.like .face circle{fill:#fff}.like .face path{fill:none;stroke:#fff;stroke-width:1.1px;stroke-linecap:round}.like .lc{text-align:left;min-width:3ch}.like-lg .lc{min-width:1ch}.like:hover,.like.full{color:var(--heart)}.like.full .h-o{stroke:var(--heart)}.like.full .face{opacity:1;transform:none}.like.pop svg{animation:.5s cubic-bezier(.3,1.6,.5,1) like-pop}.like.nope svg{animation:.4s like-nope}.like-lg{border:1px solid color-mix(in srgb, var(--heart) 45%, var(--line));color:var(--fg);border-radius:999px;gap:7px;padding:6px 12px 6px 10px;font-size:10.5px;transition:border-color .2s,background-color .2s}.like-lg .h-o{stroke:var(--heart)}.like-lg .like-word{letter-spacing:.14em;text-transform:uppercase;font-size:10px}.like-lg .lc{border-left:1px solid var(--line);color:var(--muted);padding-left:8px}.like-lg:hover,.like-lg.full{border-color:var(--heart);background:color-mix(in srgb, var(--heart) 8%, transparent)}.like-lg:hover .lc,.like-lg.full .lc{color:var(--heart)}.like-lg svg{width:17px;height:17px}.like-burst{z-index:60;pointer-events:none;width:0;height:0;position:fixed;top:0;left:0}.like-burst i{font-style:normal;line-height:1;animation:.75s cubic-bezier(.15,.7,.3,1) forwards like-fly;position:absolute;top:0;left:0}.like-plus{z-index:61;pointer-events:none;font:500 11px/1 var(--font-mono);color:var(--heart);white-space:nowrap;animation:.9s ease-out forwards like-rise;position:fixed}@keyframes like-pop{0%{transform:scale(1)}30%{transform:scale(.72)}65%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes like-nope{20%,60%{transform:translate(-3px)rotate(-10deg)}40%,80%{transform:translate(3px)rotate(10deg)}}@keyframes like-fly{0%{opacity:1;transform:translate(-50%,-50%)scale(.3)}to{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1);opacity:0}}@keyframes like-rise{0%{opacity:0;transform:translate(-50%,-50%)}15%{opacity:1}to{opacity:0;transform:translate(-50%,-220%)}}.demo{font:400 14px/1.55 var(--font-body);color:var(--fg);flex-direction:column;gap:22px;display:flex}.demo code{font:400 12px/1.5 var(--font-mono)}.demo-bar{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px 24px;padding-bottom:14px;transition:border-color .5s;display:flex}.demo-btn{font:500 10.5px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer;background:0 0;border:0;min-height:32px;padding:0}.demo-btn:hover{color:var(--accent)}.demo-btn[aria-pressed=true]{color:var(--fg);text-decoration:underline 1.5px var(--accent);text-underline-offset:5px}.demo-act{border:1px solid var(--line);min-height:30px;color:var(--fg);border-radius:999px;align-items:center;gap:8px;padding:0 13px 0 11px;transition:border-color .2s,color .2s;display:inline-flex}.demo-act:hover{border-color:var(--accent)}.demo-act[aria-pressed]{color:var(--fg);text-decoration:none}.demo-act:before{content:"";background:var(--accent);clip-path:polygon(0 0,100% 50%,0 100%);width:7px;height:8px}.demo-act[data-playing]:before{background:linear-gradient(90deg, var(--accent) 0 35%, transparent 35% 65%, var(--accent) 65%);clip-path:none}.demo-bar>.demo-act{order:1;margin-left:auto}@media (width<=640px){.demo-bar>.demo-opts~.demo-opts{order:2}}.demo-act:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.demo-opts{flex-wrap:wrap;align-items:center;gap:0 18px;display:flex}.demo-opts>.label{opacity:.7;flex-basis:100%;margin-bottom:2px;font-size:9.5px}.demo-bar:has(.demo-opts>.label){align-items:flex-end}.demo-check{cursor:pointer;align-items:center;gap:8px;min-height:32px;display:inline-flex}.demo-check input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;margin:0}.demo-range{flex:1;align-items:center;gap:12px;min-width:200px;display:flex}.demo-range input{min-width:0;accent-color:var(--accent);flex:1;margin:0}.demo-out{font:500 12px/1.5 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg);overflow-wrap:anywhere}.demo-code{background:var(--surface);font:400 11.5px/1.75 var(--font-mono);color:var(--fg);white-space:pre;tab-size:2;border-radius:8px;margin:0;padding:12px 14px;transition:background-color .5s;overflow-x:auto}.demo-code .k{color:var(--muted)}.demo-code .v{color:var(--accent)}.demo-code .on{border-left:2px solid var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);min-width:100%;margin-inline:-14px;padding-inline:12px 14px;display:inline-block}.demo-grid{background:var(--line);gap:1px;transition:background-color .5s;display:grid}.demo-grid>*{background:var(--bg);min-width:0;transition:background-color .5s}.demo input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}