@import"https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@400;500&display=swap";@layer normalize,base,demo;@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}@layer base{:root{--font-size-min: 16;--font-size-max: 20;--font-ratio-min: 1.2;--font-ratio-max: 1.33;--font-width-min: 375;--font-width-max: 1500}html{color-scheme:light dark}[data-theme=light]{color-scheme:light only}[data-theme=dark]{color-scheme:dark only}:where(.fluid){--fluid-min: calc( var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0)) );--fluid-max: calc( var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0)) );--fluid-preferred: calc( (var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)) );--fluid-type: clamp( (var(--fluid-min) / 16) * 1rem, ((var(--fluid-min) / 16) * 1rem) - (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) + (var(--fluid-preferred) * var(--variable-unit, 100vi)), (var(--fluid-max) / 16) * 1rem );font-size:var(--fluid-type)}*,*:after,*:before{box-sizing:border-box}body{background:light-dark(#fff,#000);display:grid;place-items:center;min-height:100vh;font-family:SF Pro Text,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}body:before{--size: 45px;--line: color-mix(in hsl, canvasText, transparent 80%);content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) calc(var(--size) * .36) 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 0% calc(var(--size) * .32) / var(--size) var(--size);-webkit-mask:linear-gradient(-20deg,transparent 50%,white);mask:linear-gradient(-20deg,transparent 50%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}.brand-link{color:canvasText;position:fixed;top:1rem;left:1rem;width:48px;aspect-ratio:1;display:grid;place-items:center;opacity:.8}:where(.brand-link):is(:hover,:focus-visible){opacity:1}.bear-link svg{width:75%}.craft-link .spinner{width:24px}.gem__facet{transform-box:fill-box;transform-origin:center}.gem__facet--top{--spin-to: 360deg;transform:scaleY(-1)}@media(prefers-reduced-motion:no-preference){.gem__facet{animation:gem-spin 30s infinite linear;animation-composition:add}.brand-link:is(:hover,:focus-visible) .gem__facet{animation:gem-spin 30s infinite linear,gem-hover .65s cubic-bezier(.215,.61,.355,1);animation-composition:add,add}}@keyframes gem-spin{to{rotate:var(--spin-to, -360deg)}}@keyframes gem-hover{to{rotate:calc(var(--spin-to, -360deg) / 4)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}}div.tp-dfwv{width:256px;position:fixed;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv{max-height:calc(100vh - 16px);overflow:auto;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv>.tp-rotv_b{position:sticky;top:0;z-index:2;background:#45474c}@layer demo{:root{--speed: .32s;--fade: .2s;--ease: cubic-bezier(.22, 1, .36, 1);--chroma: 1;--gap: .75rem;--radius: 1.25rem;--ink: light-dark(hsl(0 0% 8%), hsl(0 0% 92%));--muted: light-dark(hsl(0 0% 40%), hsl(0 0% 58%));--line: light-dark(hsl(0 0% 0% / .08), hsl(0 0% 100% / .08));--surface: light-dark(hsl(0 0% 100% / .72), hsl(0 0% 5% / .72));--plate: light-dark(hsl(0 0% 95%), hsl(0 0% 10%));--page: light-dark(hsl(0 0% 98%), hsl(0 0% 2%));--develop: 30;--preview: 280;--ship: 210;--observe: 340;--scale: 170;--profit: 120}body{font-family:Geist,SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}.bento{width:min(58rem,100% - 3rem);padding-block:3rem;position:relative;isolation:isolate}.tiles{list-style:none;margin:0 calc(var(--gap) * -.5);padding:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(13.5rem,auto));grid-template-areas:"develop develop preview ship" "develop develop observe ship" "scale   scale   scale   profit"}.tile{--hue: var(--develop);padding:calc(var(--gap) * .5);display:grid}.tile--develop{grid-area:develop}.tile--preview{grid-area:preview;--hue: var(--preview)}.tile--ship{grid-area:ship;--hue: var(--ship)}.tile--observe{grid-area:observe;--hue: var(--observe)}.tile--scale{grid-area:scale;--hue: var(--scale)}.tile--profit{grid-area:profit;--hue: var(--profit)}@media not (min-width:50rem){.tiles{grid-template-columns:repeat(2,1fr);grid-template-rows:minmax(15rem,auto) repeat(3,minmax(12.5rem,auto));grid-template-areas:"develop develop" "preview ship" "observe ship" "scale   profit"}}@media not (min-width:30rem){.tiles{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(11rem,auto);grid-template-areas:none}.tile{grid-area:auto}}article{--tint: light-dark( hsl(var(--hue) calc(var(--chroma) * 70%) 42%), hsl(var(--hue) calc(var(--chroma) * 70%) 62%) );position:relative;display:grid;grid-template-rows:auto 1fr auto;padding:1.25rem;border-radius:var(--radius)}article:before{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:var(--surface);border:1px solid var(--line)}:root{--hairline: light-dark(hsl(0 0% 0% / .08), hsl(0 0% 100% / .08));--lift: 0 1px 2px light-dark(hsl(0 0% 0% / .12), hsl(0 0% 0% / .5)), 0 4px 8px -3px light-dark(hsl(0 0% 0% / .16), hsl(0 0% 0% / .6)), 0 12px 24px -12px light-dark(hsl(0 0% 0% / .24), hsl(0 0% 0% / .7))}:root[data-surface=raised] article:before{inset:1px;border:0;border-radius:calc(var(--radius) - 1px);outline:1px solid var(--hairline);box-shadow:var(--lift)}:root[data-surface=slot] article:before{background:var(--page)}:root[data-surface=none] article:before{display:none}.tile__meta{grid-row:1;display:flex;justify-content:space-between;align-items:start}.tile__meta span{font-family:Geist Mono,ui-monospace,monospace;font-size:.75rem;color:var(--muted)}.tile__art{grid-row:2;align-self:start;margin:2rem 0 1.5rem;font-family:Geist Mono,ui-monospace,monospace;font-size:.8125rem;line-height:1.8;color:var(--muted);white-space:pre;overflow:hidden}.tile__art b{font-weight:500;color:var(--ink)}.tile__art i{font-style:normal;transition:color var(--speed) var(--ease)}.tile__art u{text-decoration-color:var(--line);text-underline-offset:.2em}.tile__body{--reveal: 2.25rem;grid-row:3;translate:0 var(--reveal);transition:translate var(--speed) var(--ease)}.tile__body h2{margin:0 0 .25rem;font-size:1.25rem;font-weight:450;letter-spacing:-.02em}.tile__body p{margin:0;max-width:34ch;font-size:.9375rem;line-height:1.45;color:var(--muted);text-wrap:pretty}.tile__body a{display:inline-flex;align-items:center;gap:.375em;height:1.5rem;margin-top:.75rem;font-size:.9375rem;font-weight:500;white-space:nowrap;color:var(--tint);text-decoration:none;text-underline-offset:.25em;outline:none;opacity:0;transition:opacity var(--speed) var(--ease)}.tile__body a:after{content:"";position:absolute;inset:0;border-radius:var(--radius)}.tile__body a:focus-visible{text-decoration:underline}.tile__body a svg{width:1em;stroke-width:1.75;transition:translate var(--speed) var(--ease)}.tile--develop .tile__body h2{font-size:2rem;letter-spacing:-.03em}.icon{width:2rem;overflow:visible;color:var(--muted);transition:color var(--speed) var(--ease)}.icon *{vector-effect:non-scaling-stroke;stroke-width:1.25;transform-box:fill-box;transform-origin:center}.tile--develop .icon{width:2.75rem}.tile--develop .icon *{stroke-width:1.5}@media(min-width:50rem){:is(.tile--ship,.tile--scale) .icon{width:2.25rem}:is(.tile--ship,.tile--scale) .tile__body h2{font-size:1.5rem;letter-spacing:-.025em}}.icon__cursor{transform-origin:left center}.icon__bar{transform-origin:bottom center}.icon__meridian--a,.icon__meridian--c{scale:.5 1}.icon__arrow--nw{--dx: -1;--dy: -1}.icon__arrow--ne{--dx: 1;--dy: -1}.icon__arrow--sw{--dx: -1;--dy: 1}.icon__arrow--se{--dx: 1;--dy: 1}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible))>article{anchor-name:--a}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) :is(.icon,.tile__art i){color:var(--tint)}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .tile__body{translate:0 0}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .tile__body a{opacity:1}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .tile__body a svg{translate:.25em 0}@media(prefers-reduced-motion:no-preference){:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__prompt{animation:prompt-nudge .6s var(--ease)}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__cursor{animation:cursor-type .35s var(--ease),cursor-blink .9s steps(1) .35s 2}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__strip{animation:advance .75s cubic-bezier(.65,0,.35,1)}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__meridian--a{animation:globe-a 1.2s linear}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__meridian--b{animation:globe-b 1.2s linear}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__meridian--c{animation:globe-c 1.2s linear}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__bar{animation:bar-refresh .7s cubic-bezier(.3,0,.2,1)}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__bar:nth-of-type(2){animation-delay:.06s}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__bar:nth-of-type(3){animation-delay:.12s}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__coin{animation:coin-flip .8s ease-in-out}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__arrow{animation:breathe 1.1s cubic-bezier(.3,0,.3,1)}:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible)) .icon__core{animation:breathe-core 1.1s cubic-bezier(.3,0,.3,1)}}@keyframes prompt-nudge{40%{translate:1.25px 0}}@keyframes cursor-type{0%{scale:0 1}}@keyframes cursor-blink{0%{opacity:0}50%{opacity:1}}@keyframes advance{75%{translate:0 -17.75px}to{translate:0 -17px}}@keyframes breathe{22%{translate:calc(var(--dx) * 2.5px) calc(var(--dy) * 2.5px)}45%{translate:calc(var(--dx) * -.6px) calc(var(--dy) * -.6px)}68%{translate:calc(var(--dx) * 1.4px) calc(var(--dy) * 1.4px)}88%{translate:calc(var(--dx) * -.2px) calc(var(--dy) * -.2px)}}@keyframes breathe-core{22%{scale:1.9}45%{scale:.85}68%{scale:1.45}88%{scale:.95}}@keyframes bar-refresh{35%{scale:1 .3}}@keyframes coin-flip{25%{scale:0 1}50%{scale:1 1}75%{scale:0 1}}@keyframes globe-a{0%{scale:.5 1}26.7%{scale:.707 1}34.7%{scale:.866 1}39.9%{scale:.966 1}43.8%{scale:1 1}47%{scale:.966 1}50%{scale:.866 1}53%{scale:.707 1}56.2%{scale:.5 1}60.1%{scale:.259 1}65.3%{scale:0 1}73.3%{scale:.259 1}to{scale:.5 1}}@keyframes globe-b{0%{scale:1 1}26.7%{scale:.966 1}34.7%{scale:.866 1}39.9%{scale:.707 1}43.8%{scale:.5 1}47%{scale:.259 1}50%{scale:0 1}53%{scale:.259 1}56.2%{scale:.5 1}60.1%{scale:.707 1}65.3%{scale:.866 1}73.3%{scale:.966 1}to{scale:1 1}}@keyframes globe-c{0%{scale:.5 1}26.7%{scale:.259 1}34.7%{scale:0 1}39.9%{scale:.259 1}43.8%{scale:.5 1}47%{scale:.707 1}50%{scale:.866 1}53%{scale:.966 1}56.2%{scale:1 1}60.1%{scale:.966 1}65.3%{scale:.866 1}73.3%{scale:.707 1}to{scale:.5 1}}.indicator{position:absolute;position-anchor:--a;inset:anchor(inside);z-index:-1;pointer-events:none;opacity:0;transition:opacity var(--fade) ease-out,inset 0s var(--fade) allow-discrete}.tiles:has(>.tile:hover,:focus-visible)+.indicator{opacity:1;transition:opacity var(--fade) ease-out,inset var(--speed) var(--ease)}:is(.indicator__base,.indicator__tints,.indicator__tint){position:absolute;inset:0;border-radius:var(--radius)}.indicator__tints{isolation:isolate}.indicator__tint{--c: light-dark( hsl(var(--hue) calc(var(--chroma) * 70%) 45%), hsl(var(--hue) calc(var(--chroma) * 70%) 60%) );mix-blend-mode:plus-lighter;opacity:0;transition:opacity var(--speed) var(--ease)}.indicator__tint--develop{--hue: var(--develop)}.indicator__tint--preview{--hue: var(--preview)}.indicator__tint--ship{--hue: var(--ship)}.indicator__tint--observe{--hue: var(--observe)}.indicator__tint--scale{--hue: var(--scale)}.indicator__tint--profit{--hue: var(--profit)}.tiles:is(:not(:has(:focus-visible)):has(>.tile--develop:hover),:has(>.tile--develop :focus-visible))+.indicator .indicator__tint--develop,.tiles:is(:not(:has(:focus-visible)):has(>.tile--preview:hover),:has(>.tile--preview :focus-visible))+.indicator .indicator__tint--preview,.tiles:is(:not(:has(:focus-visible)):has(>.tile--ship:hover),:has(>.tile--ship :focus-visible))+.indicator .indicator__tint--ship,.tiles:is(:not(:has(:focus-visible)):has(>.tile--observe:hover),:has(>.tile--observe :focus-visible))+.indicator .indicator__tint--observe,.tiles:is(:not(:has(:focus-visible)):has(>.tile--scale:hover),:has(>.tile--scale :focus-visible))+.indicator .indicator__tint--scale,.tiles:is(:not(:has(:focus-visible)):has(>.tile--profit:hover),:has(>.tile--profit :focus-visible))+.indicator .indicator__tint--profit{opacity:1}.tiles:not(:has(>.tile:hover,:focus-visible))+.indicator .indicator__tint{transition:opacity 0s var(--fade)}:root:not([data-highlight=brackets],[data-highlight=ring]) .indicator__base{--grid: color-mix(in oklch, var(--ink) 9%, transparent);background:linear-gradient(-35deg,var(--plate) 40%,transparent 85%),linear-gradient(90deg,var(--grid) 1px,transparent 1px) -1px -1px / 24px 24px,linear-gradient(var(--grid) 1px,transparent 1px) -1px -1px / 24px 24px,var(--plate);box-shadow:inset 0 0 0 1px var(--line)}:root:not([data-highlight=brackets],[data-highlight=ring]) .indicator__tint{background:color-mix(in oklch,var(--c) 7%,transparent)}:root[data-grid=off] .indicator__base{background:var(--plate)}:root[data-surface=slot]:not([data-highlight=brackets],[data-highlight=ring]) .indicator__base{--plate: light-dark(hsl(0 0% 100%), hsl(0 0% 9%));inset:1px;border-radius:calc(var(--radius) - 1px);outline:1px solid var(--hairline);box-shadow:var(--lift)}:root[data-highlight=brackets] .indicator__tint{--offset: .375rem;--arm: 2.75rem;inset:calc(var(--offset) * -1);border:1.5px solid var(--c);border-radius:calc(var(--radius) + var(--offset));-webkit-mask:conic-gradient(at var(--arm) var(--arm),#0000 75%,#000 0) 0 0 / calc(100% - var(--arm)) calc(100% - var(--arm));mask:conic-gradient(at var(--arm) var(--arm),#0000 75%,#000 0) 0 0 / calc(100% - var(--arm)) calc(100% - var(--arm))}:root[data-highlight=ring] .indicator__tint{background:color-mix(in oklch,var(--c) 5%,transparent);border:1px solid color-mix(in oklch,var(--c) 75%,transparent);box-shadow:0 0 0 4px color-mix(in oklch,var(--c) 12%,transparent),0 0 2rem -.25rem color-mix(in oklch,var(--c) 45%,transparent),inset 0 0 1.5rem -.5rem color-mix(in oklch,var(--c) 35%,transparent)}@media(prefers-reduced-motion:reduce){.tiles:has(>.tile:hover,:focus-visible)+.indicator{transition:opacity var(--fade) ease-out}.tile__body{transition:none}}@supports not (anchor-name: --a){:is(.tiles:not(:has(:focus-visible))>.tile:hover,.tiles>.tile:has(:focus-visible))>article:before{background:var(--plate)}}}
