.playground-dialog.dynamics-dialog{width:1080px}.dynamics-dialog .playground-layout{grid-template-columns:minmax(0,1fr) 240px}.dynamics-dialog .playground-main{align-self:start;position:sticky;top:20px}.dynamics-dialog .dynamics-stage{height:330px}.dynamics-playback,.dynamics-playback>div{align-items:center;gap:9px;display:flex}.dynamics-playback{justify-content:space-between;margin:12px 0 20px}.dynamics-playback .button{gap:6px;padding:9px 12px;font-size:10px}.dynamics-playback .text-button{color:#a4bb91;gap:5px;margin-left:4px;font-size:10px}.dynamics-iteration{font:10px var(--mono);color:#91a57e;font-variant-numeric:tabular-nums;white-space:nowrap}.dynamics-marker-toggle{color:#a4bb91;white-space:nowrap;cursor:pointer;align-items:center;gap:6px;min-height:32px;font-size:10px;display:flex}.dynamics-marker-toggle input{width:13px;height:13px;accent-color:var(--lime);margin:0}.dynamics-equations,.dynamics-values{border-top:1px solid #303d26;padding-top:15px}.dynamics-math{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;display:grid}.dynamics-values{min-width:0}.dynamics-section-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.dynamics-section-heading h3,.dynamics-coefficients legend{color:#c6d5b9;font-size:11px;font-weight:500}.dynamics-section-heading a,.dynamics-section-heading>span{font:9px var(--mono);color:#91a57e}.dynamics-section-heading a{align-items:center;gap:5px;display:inline-flex}.dynamics-section-heading a:hover{color:var(--lime)}.dynamics-formulas{gap:6px;display:grid}.dynamics-formulas code{font:12px/1.6 var(--mono);color:#c4ddb0;overflow-wrap:anywhere}.dynamics-coefficient-values{font:9px/1.8 var(--mono);color:#8fa77b;overflow-wrap:anywhere;margin-top:10px}.dynamics-values table{border-collapse:collapse;width:100%;font:11px/1.7 var(--mono);font-variant-numeric:tabular-nums;text-align:right}.dynamics-values th{font-weight:400}.dynamics-values thead th{color:#849a72;padding-bottom:6px;font-size:9px}.dynamics-values tbody th,.dynamics-values tbody td{border-top:1px solid #283222;padding:5px 0}.dynamics-values th:first-child{text-align:left}.dynamics-values td{color:#c3d9b1}.dynamics-calculation-note,.dynamics-motion-note,.dynamics-control-note{color:#8a9f78;font-size:10px;line-height:1.65}.dynamics-calculation-note{margin-top:10px}.dynamics-motion-note,.dynamics-escaped{margin:-5px 0 18px}.dynamics-escaped{color:#ffbf9d;font-size:11px;line-height:1.65}.dynamics-system-description{color:#8fa47d;margin-top:10px;font-size:10px;line-height:1.7}.dynamics-coefficients{border:0;min-width:0;margin:25px 0 22px;padding:0}.dynamics-coefficients legend{padding:0}.dynamics-coefficients .control-section{margin-top:20px}.dynamics-coefficients .range-label{margin-bottom:8px}.dynamics-dialog input[type=range]{background:0 0;height:32px;margin:0}.dynamics-dialog input[type=range]::-webkit-slider-runnable-track{background:#3b4c2f;border-radius:3px;height:3px}.dynamics-dialog input[type=range]::-webkit-slider-thumb{margin-top:-4px}.dynamics-dialog input[type=range]::-moz-range-track{background:#3b4c2f;border-radius:3px;height:3px}.dynamics-coefficients .reset-button{margin-top:13px}.dynamics-parameter-note{margin-top:14px}.dynamics-motion-controls{margin-bottom:22px}.dynamics-dialog .dynamics-motion-controls .control-section{display:block}.dynamics-dialog .dynamics-motion-controls .control-section:first-child{margin-top:0}.dynamics-noise-options{margin-top:16px}.dynamics-noise-options .reset-button{margin-top:13px}.dynamics-appearance{border-top:1px solid #35432b;padding-top:16px}.dynamics-appearance summary{cursor:pointer;color:#c6d5b9;justify-content:space-between;font-size:11px;list-style:none;display:flex}.dynamics-appearance summary::-webkit-details-marker{display:none}.dynamics-appearance summary:focus-visible{outline:2px solid var(--lime);outline-offset:5px}.dynamics-appearance summary>span{color:#91b474}.dynamics-appearance[open] summary>span{transform:rotate(45deg)}.dynamics-dialog .dynamics-usage{height:auto;min-height:420px}.dynamics-usage p+p{margin-top:12px}@media (width<=900px){.dynamics-dialog .playground-layout{grid-template-columns:minmax(0,1fr) 210px}.dynamics-dialog .dynamics-stage{height:300px}.dynamics-playback{flex-wrap:wrap}}@media (width<=650px){.dynamics-dialog .playground-main{position:static}.dynamics-math{grid-template-columns:minmax(0,1fr);gap:16px}.dynamics-dialog .playground-layout{grid-template-columns:minmax(0,1fr);display:grid}.dynamics-dialog .dynamics-settings{border-top:1px solid #35432b;padding-top:22px;display:block}.dynamics-dialog .dynamics-stage{height:300px}.dynamics-dialog .control-section{margin-top:20px}.dynamics-dialog .dynamics-coefficients .control-section:first-of-type,.dynamics-dialog .dynamics-appearance .control-section:first-of-type{display:block}.dynamics-dialog .dynamics-settings>.control-label{margin-bottom:11px}.dynamics-dialog .export-actions{margin-top:24px}.dynamics-playback{gap:12px}.dynamics-formulas code{font-size:11px}.dynamics-appearance .color-swatches{gap:12px;margin-bottom:13px}.dynamics-dialog .dynamics-appearance .control-section>.control-label{margin-bottom:11px}.dynamics-dialog .dynamics-usage{min-height:370px}}.loaders-page .hero-copy>p{max-width:390px}.loaders-hero-art .hero-field{inset:30px 0 64px}.loader-card-stage{border-bottom:1px solid var(--line);background:#131710;flex-direction:column;justify-content:center;align-items:center;gap:10px;height:220px;display:flex}.loader-main-preview{place-items:center;height:130px;display:grid}.loader-inline-preview{color:#b8c6aa;align-items:center;gap:8px;min-height:30px;font-size:11px;display:inline-flex}.loader-card .card-info{min-height:112px;padding:20px}.loader-card .card-info p{color:#a8b499;font-size:12px;line-height:1.55}.loader-card .card-info>svg{color:#92a67e;flex-shrink:0}.loader-library-note{color:#a8b499;max-width:660px;margin:28px 0 0;font-size:12px;line-height:1.8}@media (width<=650px){.loaders-page .collection-intro{align-items:flex-start;gap:10px}.loaders-page .collection-intro p{max-width:150px;font-size:12px;line-height:1.5}.loader-card-stage{height:230px}}.playground-dialog.loader-dialog{width:1020px}.loader-dialog .playground-layout{grid-template-columns:minmax(0,1fr) 240px}.loader-dialog .playground-main{align-self:start;position:sticky;top:20px}.loader-preview-surface{color:#d7e3cb;background:#111310;border:1px solid #303d26;border-radius:6px;overflow:hidden}.loader-preview-surface.light{color:#304528;background:#f0f1eb}.loader-stage{place-items:center;height:300px;display:grid;position:relative}.loader-magnified{justify-content:center;align-items:center;display:flex;transform:scale(2)}.loader-preview-caption{font:9px var(--mono);color:#91a67e;position:absolute;bottom:16px}.light .loader-preview-caption{color:#596e4b}.loader-contexts{border-top:1px solid #303d26;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.loader-context{flex-direction:column;justify-content:flex-start;align-items:center;gap:16px;min-width:0;padding:18px 10px;display:flex}.loader-context+.loader-context{border-left:1px solid #303d26}.loader-context-label{font:8px var(--mono);color:#91a67e;white-space:nowrap}.light .loader-context-label{color:#596e4b}.light .loader-contexts,.light .loader-context+.loader-context{border-color:#d1d8cb}.loader-context-inline,.loader-context-button{justify-content:center;align-items:center;gap:6px;min-height:38px;font-size:10px;display:flex}.loader-context-button{border:1px solid #3f4d34;border-radius:5px;padding:5px 9px}.light .loader-context-button{border-color:#bdcbb1}.loader-context-avatar{margin-top:-4px}.loader-playback{flex-wrap:wrap;align-items:center;gap:15px;margin:16px 0 12px;display:flex}.loader-playback .button{gap:6px;padding:9px 12px;font-size:10px}.loader-playback .text-button{color:#a4bb91;gap:6px;font-size:10px}.loader-note,.loader-state-description{color:#91a67e;font-size:10px;line-height:1.7}.loader-state-description{margin-top:10px}.loader-dialog .control-section{margin-top:20px;display:block}.loader-dialog .control-section .range-label{margin-bottom:4px}.loader-dialog .loader-settings input[type=range]{background:0 0;height:30px;margin:0}.loader-dialog input[type=range]::-webkit-slider-runnable-track{background:#3b4c2f;border-radius:3px;height:3px}.loader-dialog input[type=range]::-webkit-slider-thumb{margin-top:-4px}.loader-dialog input[type=range]::-moz-range-track{background:#3b4c2f;border-radius:3px;height:3px}.loader-size-presets{gap:6px;margin-top:4px;display:flex}.loader-size-presets button{font:9px var(--mono);color:#a9bd97;border:1px solid #3b4c2e;border-radius:4px;flex:1;padding:6px 8px}.loader-size-presets button[aria-pressed=true]{color:#e1ecd8;background:#34432a;border-color:#6c8855}.loader-appearance{border-top:1px solid #35432b;margin-top:22px;padding-top:16px}.loader-appearance summary{cursor:pointer;color:#c6d5b9;justify-content:space-between;font-size:11px;list-style:none;display:flex}.loader-appearance summary::-webkit-details-marker{display:none}.loader-appearance summary:focus-visible{outline:2px solid var(--lime);outline-offset:5px}.loader-appearance summary>span{color:#91b474}.loader-appearance[open] summary>span{transform:rotate(45deg)}.loader-dialog .loader-usage{height:auto;min-height:430px}.loader-usage p+p{margin-top:12px}@media (width<=900px){.loader-dialog .playground-layout{grid-template-columns:minmax(0,1fr) 210px}.loader-contexts{grid-template-columns:minmax(0,1fr)}.loader-context{flex-direction:row;justify-content:space-between;padding:10px 16px}.loader-context+.loader-context{border-top:1px solid #303d26;border-left:0}.loader-context-avatar{margin-top:0}}@media (width<=650px){.loader-dialog .playground-layout{grid-template-columns:minmax(0,1fr);display:grid}.loader-dialog .playground-main{position:static}.loader-dialog .loader-settings{border-top:1px solid #35432b;padding-top:22px;display:block}.loader-dialog .loader-settings .control-section{display:block}.loader-dialog .loader-settings>.control-label,.loader-dialog .loader-appearance .control-label{margin-bottom:11px}.loader-stage{height:285px}.loader-dialog .export-actions{margin-top:24px}.loader-dialog .loader-usage{min-height:330px}}:root{color:#edf0e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--lime:#baff66;--muted:#93988d;--line:#2a2e26;--mono:"DM Mono", monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#111310;font-family:Instrument Sans,sans-serif;font-weight:400}*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-gutter:stable;scroll-padding-top:105px}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;background:0 0;border:0}a{color:inherit;text-decoration:none}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:5px}:is(h1,h2)[tabindex="-1"]:focus{outline:none}::selection{background:var(--lime);color:#111310}h1,h2,h3,p{margin:0}svg{flex-shrink:0}button{padding:0}main,.site-header,.site-footer{max-width:1440px;margin:auto;padding-left:64px;padding-right:64px}.skip-link{background:var(--lime);color:#111;z-index:100;padding:12px 18px;position:fixed;top:-60px;left:20px}.skip-link:focus{top:10px}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:100px;display:flex}.brand{letter-spacing:-1.4px;align-items:center;gap:12px;font-size:28px;font-weight:600;display:inline-flex}.brand-mark{grid-template-columns:repeat(3,4px);gap:3px;margin-right:2px;display:grid;transform:rotate(-9deg)}.brand-mark i{background:var(--lime);border-radius:50%;width:4px;height:4px}.brand-mark i:nth-child(3n){opacity:.5}.brand-slash{color:#71786b;padding:0 3px;font-weight:400}.brand-period{color:var(--lime)}.not-found{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:calc(100svh - 100px);padding-top:64px;padding-bottom:96px;display:flex}.not-found-code{color:var(--lime);font:clamp(96px, 18vw, 180px) / 1 var(--mono);letter-spacing:-.08em}.not-found h1{letter-spacing:-.03em;font-size:clamp(24px,4vw,32px);font-weight:500}.not-found .button{margin-top:12px}.site-header>nav{color:#a5aa9f;align-items:center;gap:24px;margin-left:20px;font-size:13px;display:flex}.site-header>nav a,.site-header>nav button{transition:color .2s}.site-header>nav a:hover,.site-header>nav button:hover{color:var(--lime)}.site-header>nav .nav-active{color:#eff3e9}.nav-count{font-family:var(--mono);color:#b6bcae;vertical-align:1px;border:1px solid #414638;border-radius:4px;margin-left:5px;padding:2px 4px;font-size:9px}.header-source{border:1px solid #3b4035;border-radius:5px;align-items:center;gap:10px;padding:11px 13px;font-size:12px;transition:background .2s;display:flex}.header-source:hover{background:#22271c}.header-source svg:last-child{color:#9ba38f;margin-left:6px}.mobile-nav{display:none}.dynamics-page .hero-copy>p{max-width:390px}.systems-hero-art .hero-field{inset:30px -12px 64px}.systems-grid .card-info{min-height:98px}.card-equation{border-top:1px solid var(--line);color:#a8b79b;font:11px/1.6 var(--mono);overflow-wrap:anywhere;padding:13px 18px}.systems-explainer{border-top:1px solid var(--line);color:var(--muted);grid-template-columns:1fr 1fr;gap:48px;margin-top:40px;padding-top:25px;font-size:12px;line-height:1.8;display:grid}.systems-explainer strong{color:#c3cdb8;font-weight:500}.hero{border-bottom:1px solid var(--line);grid-template-columns:1.06fr 1fr;align-items:center;gap:0;min-height:620px;display:grid;position:relative}.hero-copy{z-index:1;pointer-events:none;padding:54px 0 61px;position:relative}.hero-copy a,.hero-copy button{pointer-events:auto}.hero h1{letter-spacing:-.04em;font-size:clamp(36px,4.8vw,68px);font-weight:500;line-height:1.08}.hero-copy>p{color:#a3a99b;letter-spacing:.04px;margin-top:25px;font-size:15px;line-height:1.8}.hero-actions{align-items:center;gap:27px;margin-top:29px;display:flex}.button{border-radius:5px;justify-content:center;align-items:center;gap:16px;padding:15px 18px;font-size:12px;font-weight:550;line-height:1.2;transition:background .2s,transform .2s;display:inline-flex}.button:active{transform:translateY(1px)}.button-primary{background:var(--lime);color:#17230d;border:1px solid var(--lime)}.button-primary:hover{background:#cdff90;border-color:#cdff90}.button-secondary{color:#d7ddce;background:#1a1e16;border:1px solid #39412f}.button-secondary:hover{background:#252c1e}.text-button{align-items:center;gap:9px;font-size:12px;font-weight:500;line-height:1.6;display:inline-flex}.text-button:hover{color:var(--lime)}.hero-facts{color:#848c7b;align-items:center;gap:17px;margin-top:31px;font-size:10px;display:flex}.hero-facts span{align-items:center;gap:5px;display:flex}.hero-facts svg{color:#a3ad93}.hero-art{background-image:radial-gradient(#baff6605 0,#0000 70%);align-self:center;height:515px;margin-left:6px;position:relative}.hero-field{position:absolute;inset:2px -32px 8px -35px}.hero-field canvas{width:100%;height:100%}.hero-art-footer{color:#bec7b1;justify-content:space-between;align-items:center;font-size:11px;display:flex;position:absolute;bottom:33px;left:24px;right:0}.hero-art-footer>span{align-items:center;gap:8px;display:flex}.hero-art-actions{gap:8px;display:flex}.hero-art-footer i{background:var(--lime);border-radius:50%;width:4px;height:4px}.hero-art-footer .icon-button{color:#a4bc8c;border-color:#303b25;width:29px;height:29px}.icon-button{border:1px solid #343a2e;border-radius:5px;justify-content:center;align-items:center;width:34px;height:34px;transition:background .2s,color .2s;display:inline-flex}.icon-button:hover{color:var(--lime);background:#2d3525}.hero-selector{gap:6px;display:flex;position:absolute;bottom:7px;left:50%;transform:translate(-50%)}.hero-selector button{width:18px;height:18px;position:relative}.hero-selector button:after{content:"";background:#59634d;border-radius:50%;width:4px;height:4px;transition:background .2s;position:absolute;top:7px;left:5px}.hero-selector button.selected:after{background:var(--lime);border-radius:2px;width:16px;left:-1px}.collection-intro{justify-content:space-between;align-items:end;padding:57px 0 32px;display:flex}.section-kicker{font-family:var(--mono);letter-spacing:1.5px;color:#8d9782;margin-bottom:14px;font-size:9px;display:block}.collection-intro h2{letter-spacing:-1.35px;font-size:37px;font-weight:500;line-height:1.1}.collection{padding-bottom:48px}.collection-toolbar{justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;display:flex}.filters{align-items:center;gap:7px;display:flex}.filter{color:#9aa38f;white-space:nowrap;border:1px solid #0000;border-radius:5px;padding:9px 12px;font-size:11px;transition:color .2s,background .2s}.filter:hover{color:#e5eddc;background:#20251b}.filter.active{color:#d4e7bf;background:#252e1d;border:1px solid #3b4a2f}.filter>span{font-family:var(--mono);color:#9db582;margin-left:8px;font-size:9px}.collection-tools{align-items:center;gap:10px;display:flex}.search-field{color:#758268;border:1px solid #303829;border-radius:5px;align-items:center;gap:8px;max-width:206px;height:33px;padding:8px 10px;display:flex}.search-field input{color:#d6decd;background:0 0;border:none;outline:none;width:146px;min-width:0;font-size:10px}.search-field:focus-within{border-color:#869977}.search-field input::placeholder{color:#89947c}.search-field kbd{font:9px var(--mono);border:1px solid #3b4233;border-radius:3px;padding:0 4px;line-height:14px}.pause-all{color:#9ba98d;width:33px;height:33px}.pause-all.is-paused{color:var(--lime);background:#25301a}.animation-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:23px 21px;display:grid}.animation-card{text-align:left;isolation:isolate;background:#171b14;border:1px solid #2b3225;border-radius:7px;width:100%;min-width:0;transition:border-color .25s,transform .25s;display:block;position:relative;overflow:hidden}.animation-card:hover{border-color:#637c49;transform:translateY(-3px)}.card-stage{background:radial-gradient(at 50% 58%,#22291a70 0,#0000 70%),#131710;border-bottom:1px solid #2b3225;height:255px;position:relative;overflow:hidden}.card-stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.card-number{z-index:1;font:10px var(--mono);color:#758066;position:absolute;top:17px;left:18px}.card-preview-label{z-index:1;font:7px var(--mono);letter-spacing:.8px;color:#5b6950;align-items:center;gap:5px;display:flex;position:absolute;top:18px;right:17px}.card-preview-label>span{background:#7b965f;border-radius:50%;width:3px;height:3px;display:block}.card-use{color:var(--lime);opacity:0;white-space:nowrap;background:#222e1bea;border:1px solid #5f7848;border-radius:4px;align-items:center;gap:12px;padding:7px 10px;font-size:10px;transition:opacity .2s,transform .2s;display:inline-flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%,8px)}.animation-card:hover .card-use,.animation-card:focus-visible .card-use{opacity:1;transform:translate(-50%)}.card-info{justify-content:space-between;align-items:center;gap:9px;min-height:79px;padding:19px 18px;display:flex}.card-info h3{letter-spacing:-.12px;color:#e0e7d8;margin-bottom:6px;font-size:14px;font-weight:500}.card-info p{color:#88957a;font-size:10px;line-height:1.4}.category-label{color:#a1b18f;border:1px solid #384330;border-radius:3px;flex-shrink:0;padding:4px 6px;font-size:8px;font-weight:400}.tiny-dot{background:#8aab67;border-radius:50%;flex-shrink:0;width:4px;height:4px;display:inline-block}.empty-state{text-align:center;border:1px solid var(--line);background:#151a11;border-radius:7px;padding:85px 0}.empty-state h3{font-size:24px;font-weight:500}.empty-state p{color:var(--muted);margin:12px 0 22px;font-size:13px}.site-footer{border-top:1px solid var(--line);align-items:center;gap:26px;min-height:112px;display:flex}.site-footer .brand{font-size:24px}.site-footer .brand-mark{grid-template-columns:repeat(3,3px);gap:2.5px}.site-footer .brand-mark i{width:3px;height:3px}.site-footer>div{flex-direction:column;align-items:flex-end;gap:8px;margin-left:auto;display:flex}.site-footer>div>a{color:#a0af91;align-items:center;gap:7px;font-size:9px;display:flex}.site-footer>div>a:hover{color:var(--lime)}.site-footer>div>span{color:#59694c;font:7px var(--mono);letter-spacing:.8px}.toast{color:#e4f3d7;z-index:100;pointer-events:none;opacity:0;background:#27301ff5;border:1px solid #63744f;border-radius:7px;align-items:center;gap:10px;max-width:calc(100vw - 30px);padding:14px 20px;font-size:12px;transition:opacity .2s,transform .2s;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);box-shadow:0 10px 40px #0005}.toast.visible{opacity:1;transform:translate(-50%)}dialog{color:#e7edde;background:#171c13;border:1px solid #3c4930;border-radius:12px;max-height:calc(100dvh - 60px);padding:0;box-shadow:0 30px 120px #0008}dialog::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#070a05cc}.playground-dialog{width:1000px;max-width:calc(100vw - 60px)}.playground-dialog[open]{animation:.28s cubic-bezier(.16,1,.3,1) playground-enter}.playground-dialog[open]::backdrop{animation:.24s ease-out playground-backdrop-enter}.playground-dialog[data-closing=true]::backdrop{animation:.18s ease-in forwards playground-backdrop-exit}@keyframes playground-enter{0%{opacity:0;transform:translateY(14px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes playground-backdrop-enter{0%{opacity:0}to{opacity:1}}@keyframes playground-backdrop-exit{0%{opacity:1}to{opacity:0}}.dialog-inner{padding:27px}.dialog-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px;display:flex}.dialog-header .section-kicker{margin-bottom:8px;font-size:8px}.dialog-header h2{letter-spacing:-.9px;font-size:28px;font-weight:500}.dialog-header>.icon-button{color:#b9c5ae;border:0;align-self:flex-start}.playground-layout{grid-template-columns:minmax(0,1fr) 235px;gap:25px;display:grid}.playground-main{min-width:0}.preview-toolbar{justify-content:space-between;align-items:center;gap:15px;margin-bottom:12px;display:flex}.segmented{border:1px solid #35432b;border-radius:5px;gap:3px;padding:3px;display:flex}.segmented button{color:#99a88a;border-radius:3px;padding:6px 12px;font-size:10px}.segmented .active{color:#dbeacd;background:#34432a}.preview-tag{font:8px var(--mono);letter-spacing:.7px;color:#697d5a}.playground-stage{isolation:isolate;background:#111310;border:1px solid #303d26;border-radius:6px;height:390px;transition:background .3s;position:relative;overflow:hidden}.playground-stage.light{background:#f0f1eb}.playground-stage canvas{width:100%;height:100%;position:absolute;inset:0}.preview-pattern{font:10px var(--mono);color:#859673;position:absolute;bottom:18px;left:18px}.stage-buttons{gap:6px;display:flex;position:absolute;bottom:12px;right:12px}.stage-buttons .icon-button{color:#c4d8b3;background:#1f271bd9}.light .preview-pattern{color:#536847}.preview-note{color:#879b75;align-items:center;gap:6px;margin-top:12px;font-size:10px;line-height:1.6;display:flex}.preview-note>span:last-child{font:7px var(--mono);white-space:nowrap;color:#5e7550;margin-left:auto}.control-label,.range-label{color:#c6d5b9;margin-bottom:11px;font-size:11px;font-weight:500;display:block}.playground-settings select{color:#e1ecd8;outline-offset:3px;background:#20291a;border:1px solid #3b4c2e;border-radius:4px;width:100%;padding:10px;font-size:11px}.playground-settings{padding-top:2px}.control-section{margin-top:24px}.color-swatches{gap:11px;margin-bottom:13px;display:flex}.color-swatches button{border:3px solid #171c13;border-radius:50%;outline:1px solid #0000;width:24px;height:24px}.color-swatches button.chosen{outline-color:#90a879}.color-swatches button:hover{transform:scale(1.12)}.custom-color{font:10px var(--mono);color:#b6c8a4;border:1px solid #3b4930;border-radius:4px;align-items:center;gap:8px;padding:7px;display:flex}.custom-color input{cursor:pointer;background:0 0;border:0;width:19px;height:19px;padding:0}.custom-color input::-webkit-color-swatch-wrapper{padding:0}.custom-color input::-webkit-color-swatch{border:0;border-radius:2px}.custom-color>span:last-child{color:#60794e;font:7px var(--mono);margin-left:auto}.range-label{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.range-label output{font:10px var(--mono);color:#91b474}.playground-settings input[type=range]{appearance:none;width:100%;height:3px;accent-color:var(--lime);cursor:pointer;background:#3b4c2f;border-radius:3px;margin:15px 0;display:block}.playground-settings input[type=range]::-webkit-slider-thumb{appearance:none;background:#bcdf9d;border:0;border-radius:50%;width:11px;height:11px}.playground-settings input[type=range]::-moz-range-thumb{background:#bcdf9d;border:0;border-radius:50%;width:11px;height:11px}.range-captions{color:#718961;justify-content:space-between;font-size:8px;display:flex}.reset-button{color:#7f9970;margin-top:20px;font-size:10px}.export-actions{border-top:1px solid #35432b;flex-direction:column;gap:9px;margin-top:24px;padding-top:18px;display:flex}.export-actions>.button{gap:8px;padding:12px 14px;font-size:11px}.usage-code{background:#12170f;border:1px solid #34432a;border-radius:6px;height:390px;padding:18px;overflow:auto}.usage-code>div{font:10px var(--mono);color:#7c946a;justify-content:space-between;align-items:center;display:flex}.usage-code .text-button{font-size:9px}.usage-code pre{font:11px/1.75 var(--mono);color:#b8d49f;white-space:pre-wrap;overflow-wrap:anywhere;margin:22px 0}.usage-code p{color:#819a6e;font-size:9px;line-height:1.6}.usage-code strong{color:#bbd6a1;font-weight:500}@media (width>=1500px){main,.site-header,.site-footer{max-width:1480px;padding-left:76px;padding-right:76px}.hero{min-height:660px}.hero-art{height:555px}.card-stage{height:280px}}@media (width<=1150px){main,.site-header,.site-footer{padding-left:40px;padding-right:40px}.hero{grid-template-columns:1.12fr 1fr;min-height:560px}.hero-art{height:460px;margin-left:0}.hero-actions{gap:19px}.hero-facts{gap:13px}.card-stage{height:226px}.card-info{padding:16px 13px}.card-info p{font-size:9px}.category-label{font-size:7px}.animation-grid{gap:18px 16px}.filter{padding:8px 9px;font-size:10px}.filters{gap:2px}.search-field{max-width:180px}.search-field input{width:125px}.hero-copy>p{font-size:13px}.hero-art-footer{left:16px}.playground-dialog{max-width:calc(100vw - 40px)}.playground-layout{grid-template-columns:minmax(0,1fr) 210px;gap:20px}}@media (width<=900px){main,.site-header,.site-footer{padding-left:28px;padding-right:28px}.site-header{height:83px}.site-header>nav{gap:20px;margin-left:0}.header-source{padding:9px;font-size:10px}.header-source>span,.header-source>svg:last-child{display:none}.hero{grid-template-columns:1.12fr 1fr;min-height:510px}.hero-art{height:405px}.hero-field{inset:0 -24px 0 -20px}.hero-copy>p{font-size:12px}.hero-actions{flex-wrap:wrap;gap:15px}.hero-actions .button{gap:12px;padding:13px 12px;font-size:10px}.hero-facts{gap:9px;font-size:8px}.collection-toolbar{flex-wrap:wrap;gap:17px}.collection-tools{margin-left:auto}.search-field{max-width:180px}.filter{padding:9px 10px}.animation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card-stage{height:256px}.card-info{padding:18px 16px}.card-info p{font-size:10px}.category-label{font-size:8px}.collection-intro{padding-top:45px}.site-footer{gap:17px}.preview-tag{font-size:6px}.playground-stage,.usage-code{height:370px}.playground-dialog .dialog-inner{padding:22px}.preview-note>span:last-child{display:none}}@media (width<=1000px){.site-header{z-index:20;position:relative}.site-header>nav,.site-header>.header-source{display:none}.mobile-nav{display:block}.mobile-menu-toggle{border:1px solid var(--line);background:#191c16;border-radius:6px;justify-content:center;align-items:center;gap:14px;min-height:44px;padding:0 13px;font-size:13px;display:flex}.mobile-menu-toggle[aria-expanded=true]{color:var(--lime);border-color:#465737}.mobile-menu-icon{width:18px;height:18px;display:block;position:relative}.mobile-menu-icon span{background:currentColor;border-radius:1px;height:1.5px;position:absolute;top:50%;left:0;right:0}.mobile-menu-panel{transform-origin:100% 0;background:#1a1e16;border:1px solid #343c2d;border-radius:12px;flex-direction:column;padding:10px;display:flex;position:absolute;top:calc(100% - 2px);left:21px;right:21px;box-shadow:0 18px 44px #0005}.mobile-menu-link{letter-spacing:-.02em;text-align:left;border-radius:6px;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:60px;padding:12px 16px;font-size:20px;display:flex}.mobile-menu-link:hover,.mobile-menu-link:focus-visible{color:var(--lime);background:#252e1e}.mobile-menu-arrow{color:#9caf87;font-size:20px}}@media (width<=650px){html{scroll-padding-top:100px}main,.site-header,.site-footer{padding-left:21px;padding-right:21px}.site-header{z-index:20;background:#111310;height:76px;position:sticky;top:0}.brand{gap:9px;font-size:26px}.hero{flex-direction:column;align-items:stretch;min-height:auto;display:flex}.hero-copy{padding:51px 0 0}.hero h1{font-size:clamp(38px,8.7vw,56px)}.hero-copy>p{margin-top:20px;font-size:12px;line-height:1.8}.hero-actions{gap:26px;margin-top:25px}.hero-actions .button{padding:13px 14px;font-size:11px}.hero-facts{gap:16px;margin-top:25px;font-size:9px}.hero-art{align-self:center;width:100%;height:380px;margin-top:16px;margin-bottom:9px}.hero-field{inset:-8px -12px 5px}.hero-art-footer{font-size:10px;bottom:28px;left:4px}.hero-selector{bottom:9px}.collection-intro{align-items:center;padding:39px 0 24px}.section-kicker{letter-spacing:1px;margin-bottom:12px;font-size:8px}.collection-intro h2{letter-spacing:-1px;font-size:30px}.collection{padding-bottom:32px}.collection-toolbar{margin-bottom:19px;display:block}.filters{justify-content:space-between;gap:3px;width:100%;padding:2px 1px 8px;display:flex;overflow-x:auto}.filter{padding:8px;font-size:9px}.filter>span{margin-left:5px;font-size:8px}.collection-tools{justify-content:space-between;gap:10px;margin-top:10px}.search-field{flex:1;max-width:none;height:35px}.search-field input{width:100%;font-size:10px}.pause-all{width:35px;height:35px}.animation-grid{grid-template-columns:minmax(0,1fr);gap:18px}.systems-explainer{grid-template-columns:1fr;gap:12px;margin-top:28px}.card-stage{height:clamp(260px,70vw,300px)}.card-info{align-items:flex-start;min-height:88px;padding:18px}.card-info h3{margin-bottom:6px;font-size:16px}.card-info p{font-size:12px;line-height:1.5}.category-label{display:none}.site-footer{flex-wrap:wrap;gap:15px;min-height:130px;padding-top:25px;padding-bottom:25px}.site-footer .brand{font-size:23px}.site-footer>div{flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-left:0}.site-footer>div>a{gap:4px;font-size:8px}.site-footer>div>span{font-size:6px}.playground-dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.playground-dialog .dialog-inner{padding:19px}.dialog-header{margin-bottom:20px}.dialog-header h2{font-size:25px}.playground-layout{flex-direction:column;gap:25px;display:flex}.playground-stage,.usage-code{height:310px}.preview-tag{font-size:7px}.preview-note{font-size:9px}.playground-settings{grid-template-columns:1fr 1fr;gap:15px 19px;display:grid}.playground-settings>.control-label{grid-column:1;align-self:center;margin:0}.playground-settings>select{grid-area:1/2}.control-section{min-width:0;margin-top:8px}.control-section:first-of-type{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:10px 19px;display:grid}.control-section:first-of-type>.control-label{grid-column:1/-1;margin-bottom:0}.color-swatches{align-items:center;gap:9px;margin-bottom:0}.color-swatches button{width:23px;height:23px}.custom-color{font-size:9px}.custom-color>span:last-child{display:none}.range-captions{font-size:7px}.range-label{font-size:10px}.reset-button{grid-column:1/-1;justify-self:start;margin-top:0}.export-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:10px;margin-top:0;display:grid}.export-actions .button{padding:12px 8px;font-size:10px}.toast{width:max-content;padding:12px 15px;font-size:11px;bottom:15px}.usage-code pre{font-size:9px}}@media (width<=370px){main,.site-header,.site-footer{padding-left:16px;padding-right:16px}.filter{padding:8px 6px;font-size:8px}.hero-facts{gap:10px}.hero-art{height:340px}.color-swatches{gap:5px}.custom-color{font-size:8px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}.animation-card:hover{transform:none}}