@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-var.woff2)format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:optional}@font-face{font-family:Archivo fallback;src:local(Arial),local(Helvetica),local(Liberation Sans);size-adjust:98.17%;ascent-override:89.44%;descent-override:21.39%;line-gap-override:0%}:root{--canvas:oklch(10.8% .005 71.346);--raise:oklch(16.5% .009 258);--text:oklch(93.5% .006 258);--text-2:oklch(73.5% .011 258);--text-3:oklch(61.5% .014 258);--paper:oklch(96.8% .003 258);--paper-2:oklch(93.8% .005 258);--line:oklch(87.8% .007 258);--ink:oklch(20.5% .012 258);--ink-2:oklch(45.5% .014 258);--ink-3:oklch(54.5% .013 258);--rule:oklch(93.5% .006 258/.13);--rule-strong:oklch(93.5% .006 258/.3);--display:"Archivo", "Archivo fallback", ui-sans-serif, system-ui, sans-serif;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--fs-display:clamp(40px, 6.4vw, 78px);--fs-title:clamp(28px, 3.6vw, 40px);--fs-sig:clamp(17px, 2.1vw, 25px);--fs-lede:16px;--fs-body:15px;--fs-ui:13px;--fs-fine:12px;--fs-micro:11px;--fs-code:var(--fs-fine);--cell:13px;--cell-w:calc(var(--cell) * .6);--s1:calc(var(--cell) * .5);--s2:var(--cell);--s3:calc(var(--cell) * 2);--s4:calc(var(--cell) * 3);--s5:calc(var(--cell) * 5);--s6:calc(var(--cell) * 8);--tap:44px;--ease:cubic-bezier(.2, 0, 0, 1);--btn-h:48px;--t-hover:.14s;--t-press:.12s;--page:1240px;--rail:var(--s3);--tile-art:180px;--hero-out:var(--s6)}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--canvas)}body,#root{min-height:100%}body{background:var(--canvas);color:var(--text);font-family:var(--display);font-size:var(--fs-body);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-weight:400;line-height:1.6}::selection{background:var(--text);color:var(--canvas)}.panel ::selection{background:var(--ink);color:var(--paper)}a{color:inherit;text-decoration:none}button,select,input{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--text);outline-offset:3px}.panel :focus-visible{outline-color:var(--ink)}.swap{justify-items:start;display:inline-grid}.swap>span{transition:opacity .18s var(--ease), scale .18s var(--ease), filter .18s var(--ease);grid-area:1/1}.swap .is-in{opacity:1;filter:blur();scale:1}.swap .is-out{opacity:0;filter:blur(2px);scale:.96}.u-display{font-family:var(--display);letter-spacing:-.035em;text-wrap:balance;font-weight:600;font-stretch:118%;line-height:1.04}.u-mono{font-family:var(--mono);font-synthesis:none}.eyebrow{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);display:block}.rule{border:0;border-top:1px solid var(--line);margin:var(--s3) 0}.site-head{inset-inline:0;z-index:10;pointer-events:none;position:fixed;top:0}.site-head:before{content:"";inset:0 0 calc(var(--s5) * -1) 0;background:linear-gradient(oklch(10.8% .005 71.346/.85) 0%,oklch(10.8% .005 71.346/.5) 45%,oklch(10.8% .005 71.346/0) 100%);position:absolute}.site-head-row{justify-content:space-between;align-items:center;gap:var(--s3);padding-block:var(--s2);display:flex;position:relative}.site-mark{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.34em;color:var(--text)}.out-links{--out-pad:19px;margin-inline:calc(var(--out-pad) * -1);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;align-items:center;gap:0;display:flex}.out-links a{padding-inline:var(--out-pad)}.site-mark,.out-links a{pointer-events:auto;min-height:var(--tap);color:var(--text);opacity:.55;transition:opacity var(--t-hover) var(--ease);align-items:center;display:inline-flex}.site-mark{opacity:.8}.site-mark:hover,.out-links a:hover{opacity:1}.rail{width:100%;max-width:var(--page);padding-inline:var(--rail);margin-inline:auto}.hero{min-height:calc(100svh - var(--tile-art) - var(--hero-out));margin-bottom:var(--hero-out);padding-block:clamp(var(--s4), 11svh, var(--s6)) clamp(var(--s3), 7svh, var(--s5));align-items:center;display:flex;position:relative;overflow:hidden}.hero>.rail{position:relative}.hero-field{width:100%;height:100%;-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--hero-out)), transparent 100%);mask-image:linear-gradient(to bottom, #000 calc(100% - var(--hero-out)), transparent 100%);position:absolute;inset:0}.hero-scrim{pointer-events:none;background:radial-gradient(78% 78% at 50% 52%,oklch(10.8% .005 71.346/.92) 0%,oklch(10.8% .005 71.346/.72) 42%,oklch(10.8% .005 71.346/0) 100%);position:absolute;inset:0}.hero-copy{text-align:center;align-items:center;gap:var(--s3);pointer-events:none;flex-direction:column;max-width:62ch;margin-inline:auto;display:flex;position:relative}.hero-copy>*{pointer-events:auto;max-width:100%}.hero-copy>.signature,.hero-copy>.hero-action{margin-top:var(--s2)}.hero-action{align-items:center;gap:var(--s1);flex-direction:column;display:flex}@supports (text-box:trim-both cap alphabetic){.hero h1,.signature,.lede,.hero-meta,.hero-hint{text-box:trim-both cap alphabetic}}.hero h1{font-family:var(--display);font-weight:600;font-stretch:118%;font-size:var(--fs-display);letter-spacing:-.04em;text-wrap:balance;max-width:14ch;line-height:1.02}.signature{font-family:var(--mono);font-size:var(--fs-sig);letter-spacing:-.01em;color:var(--text-2);font-weight:500}.sig-dim{color:var(--text-3)}.sig-hot{color:var(--text);text-shadow:0 0 20px oklch(93.5% .006 258/.55);background:oklch(93.5% .006 258/.1);margin:0 .02em;padding:.08em .3em;position:relative}.lede{color:var(--text-2);max-width:54ch;font-size:var(--fs-lede);text-wrap:pretty;line-height:1.62}.install-row{justify-content:center;align-items:center;gap:var(--s2);flex-wrap:wrap;display:flex}.install,.gh-btn{justify-content:center;align-items:center;gap:var(--s2);height:var(--btn-h);padding-inline:var(--s3);white-space:nowrap;font-family:var(--mono);font-size:var(--fs-ui);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border:1px solid var(--rule-strong);cursor:pointer;transition:border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease), scale var(--t-press) var(--ease);background:linear-gradient(oklch(93.5% .006 258/.07),oklch(93.5% .006 258/.07)),oklch(10.8% .005 71.346/.88);flex:none;display:inline-flex}@supports (text-box:trim-both cap alphabetic){.install code,.gh-btn span{text-box:trim-both cap alphabetic}}.install:hover,.gh-btn:hover{background:linear-gradient(oklch(93.5% .006 258/.13),oklch(93.5% .006 258/.13)),oklch(10.8% .005 71.346/.88);border-color:oklch(93.5% .006 258/.5)}.install:active,.gh-btn:active{scale:.96}.install code{letter-spacing:.01em;font-family:inherit}.gh-btn svg{width:12px;height:12px}.install-icon{width:15px;height:15px;color:var(--text-3);transition:color var(--t-hover) var(--ease);place-items:center;display:grid}.install:hover .install-icon{color:var(--text)}.install-icon svg{width:15px;height:15px;transition:opacity .18s var(--ease), scale .18s var(--ease), filter .18s var(--ease);grid-area:1/1}.install-icon .is-in{opacity:1;filter:blur();scale:1}.install-icon .is-out{opacity:0;filter:blur(4px);scale:.25}.gh-count{color:var(--text-3);font-variant-numeric:tabular-nums}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hero-meta{font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-2)}.hero-hint{font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-2);pointer-events:none;transition:opacity .45s var(--ease)}.hero-hint.is-out{opacity:0;animation:none}.grid{max-width:var(--page);background:var(--rule);border-block:1px solid var(--rule);grid-template-columns:1fr;gap:1px;margin-inline:auto;display:grid}@media (width>=601px) and (width<=900px){.grid{grid-template-columns:1fr 1fr}}@media (width>=901px){.grid{grid-template-columns:repeat(12,1fr)}.tile:nth-child(4n+1),.tile:nth-child(4n){grid-column:span 7}.tile:nth-child(4n+2),.tile:nth-child(4n+3){grid-column:span 5}}.tile{background:var(--canvas);transition:background var(--t-hover) var(--ease);flex-direction:column;display:flex}.tile-field,.tile-body{transition:opacity .34s var(--ease) var(--reveal-delay,0s), translate .34s var(--ease) var(--reveal-delay,0s)}.tile.is-held .tile-field,.tile.is-held .tile-body{opacity:0;translate:0 10px}@media (width>=601px){.tile:nth-child(2n){--reveal-delay:70ms}}.tile:hover,.tile:focus-visible{background:var(--raise)}@media (hover:hover) and (pointer:fine){.tile-field canvas{opacity:.8;transition:opacity var(--t-hover) var(--ease)}.tile:hover .tile-field canvas,.tile:focus-visible .tile-field canvas{opacity:1}}.tile-field{height:var(--tile-art);border-bottom:1px solid var(--rule);display:block;position:relative;overflow:hidden}.tile-field canvas{width:100%;height:100%}.tile-body{padding:var(--s3) var(--rail) var(--s4);display:block}.tile-head{align-items:baseline;gap:var(--s2);margin-bottom:var(--s1);display:flex}.tile-name{font-family:var(--display);font-weight:600;font-stretch:112%;font-size:var(--fs-lede);letter-spacing:-.02em;color:var(--text)}.tile-go{color:var(--text-3);transition:translate var(--t-hover) var(--ease), color var(--t-hover) var(--ease)}.tile:hover .tile-go{color:var(--text);translate:3px}.tile-tag{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.01em;color:var(--text-3);margin-bottom:var(--s2);display:block}.tile-tag.is-yours,.stage-tag.is-yours{color:var(--text)}.tile-blurb{max-width:50ch;font-size:var(--fs-ui);color:var(--text-2);text-wrap:pretty;line-height:1.55;display:block}.foot{padding-block:var(--s5)}.foot-credit{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--text-3)}.foot-credit a{color:var(--text);opacity:.55;transition:opacity var(--t-hover) var(--ease);position:relative}.foot-credit a:after{content:"";position:absolute;inset:-15px -6px}.foot-credit a:hover{opacity:1}.stage-shell{position:fixed;inset:0;overflow:hidden}.stage{cursor:crosshair;touch-action:none;view-transition-name:motes-field;width:100%;height:100%;position:absolute;inset:0}::view-transition-group(motes-field){animation-duration:.26s;animation-timing-function:var(--ease)}::view-transition-group(root){animation-duration:.26s;animation-timing-function:var(--ease)}::view-transition-old(root){animation-duration:.26s;animation-timing-function:var(--ease)}::view-transition-new(root){animation-duration:.26s;animation-timing-function:var(--ease)}::view-transition-old(motes-field){animation-duration:.12s;animation-timing-function:var(--ease)}::view-transition-new(motes-field){animation-duration:.2s;animation-timing-function:var(--ease)}.stage-shell:before{content:"";z-index:4;pointer-events:none;background:linear-gradient(148deg,oklch(10.8% .005 71.346/.96) 0%,oklch(10.8% .005 71.346/.87) 36%,oklch(10.8% .005 71.346/.42) 72%,oklch(10.8% .005 71.346/0) 100%);width:min(680px,64%);height:380px;position:absolute;top:0;left:0}.stage-head{top:var(--s3);left:var(--s3);z-index:5;pointer-events:none;max-width:38ch;position:absolute}.stage-head>*{pointer-events:auto}.back{align-items:center;gap:var(--s1);min-height:40px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);transition:color var(--t-hover) var(--ease);padding-inline-end:var(--s2);display:inline-flex}.back:hover{color:var(--text)}.stage-head h1{font-family:var(--display);font-weight:600;font-stretch:118%;font-size:var(--fs-title);letter-spacing:-.035em;margin:var(--s1) 0 var(--s1);line-height:1.04}.stage-tag{font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-3);margin-bottom:var(--s2);display:block}.stage-head p{font-size:var(--fs-ui);color:var(--text-2);text-wrap:pretty;line-height:1.6}.hint{left:50%;bottom:var(--s3);z-index:5;font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-2);text-shadow:0 0 3px var(--canvas), 0 0 9px var(--canvas);white-space:nowrap;pointer-events:none;animation:rise .5s var(--ease) backwards;transition:opacity .3s var(--ease), bottom .3s var(--ease);position:absolute;translate:-50%}.hint.is-out{opacity:0;bottom:calc(var(--s3) - 6px)}.hint-off{color:var(--text)}@keyframes rise{0%{opacity:0;bottom:calc(var(--s3) - 6px)}to{opacity:1;bottom:var(--s3)}}.panel{top:var(--s2);right:var(--s2);bottom:var(--s2);z-index:6;background:var(--paper);width:322px;color:var(--ink);view-transition-name:panel;flex-direction:column;padding:18px;display:flex;position:absolute;overflow:hidden;box-shadow:0 1px 1px oklch(0% 0 0/.13),0 8px 16px oklch(0% 0 0/.16),0 24px 56px oklch(0% 0 0/.34)}.panel-scroll{overscroll-behavior:contain;flex:1;min-height:0;padding-bottom:20px;overflow-y:auto;-webkit-mask-image:linear-gradient(#000 calc(100% - 20px),#0000 100%);mask-image:linear-gradient(#000 calc(100% - 20px),#0000 100%)}.panel-scroll::-webkit-scrollbar{width:6px}.panel-scroll::-webkit-scrollbar-thumb{background:var(--line)}.code{padding-top:var(--s2);border-top:1px solid var(--line);flex:none}.panel .eyebrow{color:var(--ink-2)}.group{gap:var(--s1);padding-block:var(--s1);flex-direction:column;display:flex}.group+.group{border-top:1px solid var(--line)}.group:first-child{padding-top:0}.panel .rule{margin:var(--s2) 0}.seg{border:1px solid var(--line);display:flex}.seg button{min-height:40px;font-family:var(--mono);font-size:var(--fs-fine);background:var(--paper-2);color:var(--ink-2);border:0;border-inline-end:1px solid var(--line);cursor:pointer;transition:background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), scale var(--t-press) var(--ease);flex:1;padding:0}.seg button:last-child{border-inline-end:0}.seg button:hover{color:var(--ink);background:var(--paper)}.seg button:active{scale:.96}.seg button.on{background:var(--ink);color:var(--paper)}.toggle{justify-content:space-between;align-items:center;gap:var(--s2);width:100%;min-height:var(--tap);padding:var(--s1) var(--s2);background:var(--paper-2);border:1px solid var(--line);cursor:pointer;text-align:start;transition:border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease), scale var(--t-press) var(--ease);display:flex}.toggle:active{scale:.96}.toggle.on{border-color:var(--ink);background:var(--paper)}.toggle-text{display:block}.toggle-label{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:block}.toggle-state{font-family:var(--mono);font-size:var(--fs-fine);letter-spacing:.01em;color:var(--ink-3);margin-top:2px;display:block}.toggle.on .toggle-state{color:var(--ink)}.track{width:calc(var(--cell) * 2);height:var(--cell);background:var(--line);transition:background var(--t-hover) var(--ease);flex:none;position:relative}.toggle.on .track{background:var(--ink)}.track i{width:calc(var(--cell) - 4px);background:var(--paper);transition:translate var(--t-hover) var(--ease);position:absolute;inset-block:2px;inset-inline-start:2px}.toggle.on .track i{translate:var(--cell) 0}.lab{font-family:var(--mono);font-size:var(--fs-fine);letter-spacing:.01em;color:var(--ink-2);cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:none;transition:color var(--t-hover) var(--ease);justify-content:space-between;align-items:baseline;display:flex}.lab:hover{color:var(--ink)}.lab b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}.lab b em{color:var(--ink-3);margin-inline-start:2px;font-style:normal}.slider{transition:opacity var(--t-hover) var(--ease)}.slider.is-disabled{opacity:.4}.slider.is-disabled .lab{cursor:not-allowed}.track-hit{cursor:pointer;touch-action:none;align-items:center;height:40px;display:flex;position:relative}.slider.is-disabled .track-hit{cursor:not-allowed}.track-line{background:var(--line);width:100%;height:1px;display:block;position:relative}.track-fill{background:var(--ink-3);display:block;position:absolute;inset:0 auto 0 0}.thumb{background:var(--ink);width:2px;height:12px;transition:scale var(--t-hover) var(--ease);display:block;position:absolute;top:50%;translate:-50% -50%}.track-hit:hover .thumb{scale:1 1.35}.track-hit[data-drag] .thumb{scale:1 1.6}.track-hit:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.pick{position:relative}.pick-trigger,.pick-opt{align-items:center;gap:var(--s1);width:100%;min-height:40px;padding:0 var(--s1);font-family:var(--mono);font-size:var(--fs-fine);text-align:start;background:var(--paper-2);border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);display:flex}.pick-trigger:hover,.pick-opt:hover{background:var(--paper);border-color:var(--ink-3)}.pick-trigger:active{scale:.99}.pick-name{color:var(--ink-2);min-width:7ch}.ramp{color:var(--ink);letter-spacing:.12em;white-space:nowrap;flex:1;overflow:hidden}.pick-chev{border-right:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);width:6px;height:6px;transition:translate var(--t-hover) var(--ease);translate:0 -2px;rotate:45deg}.pick-trigger[aria-expanded=true] .pick-chev{translate:0 1px}.pick-list{z-index:3;inset-inline:0;background:var(--paper);border:1px solid var(--ink-3);transform-origin:top;animation:pick-in .15s var(--ease) both;list-style:none;position:absolute;top:calc(100% + 2px);box-shadow:0 1px 1px oklch(0% 0 0/.08),0 8px 20px oklch(0% 0 0/.14)}@keyframes pick-in{0%{opacity:0;scale:1 .97}to{opacity:1;scale:1}}.pick-opt{background:0 0;border:0}.pick-opt.is-active{background:var(--paper-2)}.pick-opt.is-on .pick-name{color:var(--ink)}.accent{flex-direction:column;align-items:flex-end;gap:2px;display:flex}.swatches{border:1px solid var(--line);width:100%;display:flex}.swatch{min-height:var(--tap);cursor:pointer;background:0 0;border:0;flex:1;place-items:center;padding:0;display:grid;position:relative}.chip{width:18px;height:18px;transition:scale var(--t-hover) var(--ease)}.swatch:hover .chip{scale:1.15}.swatch:active .chip{scale:.96}.swatch[aria-checked=true]:after,.swatch-custom.is-on:after{content:"";outline:1px solid var(--ink);outline-offset:1px;position:absolute;inset:3px}.swatch-custom .chip-custom{border:1px dashed var(--ink-3)}.swatch-custom input[type=color]{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.hex{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ink-2);font-variant-numeric:tabular-nums}.code .tabs{align-items:center;gap:var(--s2);margin-bottom:var(--s1);display:flex}.code .tabs button{min-width:40px;min-height:40px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;transition:color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), scale var(--t-press) var(--ease);background:0 0;border:0;padding:0;box-shadow:inset 0 -2px #0000}.code .tabs button:hover{color:var(--ink)}.code .tabs button:active{scale:.96}.code .tabs button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}.code .tabs button.copy{padding-inline:var(--s2);color:var(--ink-2);margin-inline-start:auto}.code .tabs button.copy .swap{justify-items:end}.code pre{background:var(--ink);padding:var(--s2);font-size:var(--fs-code);line-height:1.7;overflow-x:auto}.code code{font-family:var(--mono);color:oklch(74% .008 258);white-space:pre}.t-string,.t-number{color:oklch(97% .004 258)}.t-keyword{color:oklch(86% .007 258)}.t-comment{color:oklch(62% .01 258)}.site-head-row,.hero-copy>*{animation:enter .34s var(--ease) both}.hero-copy>:first-child{animation-delay:60ms}.hero-copy>:nth-child(2){animation-delay:.12s}.hero-copy>:nth-child(3){animation-delay:.18s}.hero-copy>:nth-child(4){animation-delay:.24s}.hero-copy>:nth-child(5){animation-delay:.3s}@keyframes enter{0%{opacity:0;translate:0 10px}to{opacity:1;translate:0}}@media (width<=900px){.stage-shell{flex-direction:column;min-height:100vh;display:flex;position:static}.stage{height:62vh;position:relative;inset:auto}.stage-shell:before{display:none}.stage-head{padding:var(--s3) var(--s2) 0;order:-1;max-width:none;position:static}.panel{width:auto;margin:var(--s2);position:static;bottom:auto;overflow:visible}.panel-scroll{min-height:auto;overflow:visible}.track-hit{height:var(--tap)}.lab{min-height:var(--tap);align-items:center}.hint{top:58vh;bottom:auto}:root{--rail:var(--s2)}.hero{flex-direction:column;justify-content:center;align-items:stretch}.hero h1{max-width:18ch}.hero-scrim{background:linear-gradient(oklch(10.8% .005 71.346/.9) 0%,oklch(10.8% .005 71.346/.82) 60%,oklch(10.8% .005 71.346/.62) 100%)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scale:none!important}.site-head-row,.hero-copy>*,.hint{animation:none}.tile.is-held .tile-field,.tile.is-held .tile-body{opacity:1;translate:none}.pick-list{animation-name:fade-in}.tile:hover .tile-go,.tile:focus-visible .tile-go,.toggle.on .track i,.pick-trigger[aria-expanded=true] .pick-chev{translate:none}::view-transition-group(motes-field){animation-duration:.01ms!important}::view-transition-old(motes-field){animation-duration:.01ms!important}::view-transition-new(motes-field){animation-duration:.01ms!important}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}