.hero{--hero-tilt-x:64deg;--hero-tilt-z:12deg;--hero-depth:24;--hero-gap-closed:6px;--hero-gap-open:12vh;--hero-perspective:calc(var(--hero-gap-open) * var(--hero-depth));--hero-sheet-alpha:90%;--hero-sheet-thick:2px;--hero-top:7rem;margin-block-end:6rem}.dark .hero{--hero-sheet-alpha:94%;--hero-night-ink:#15171b}.hero .hero-role{color:var(--color-foreground-subtle);font-weight:500}.hero .hero-headline{letter-spacing:-.01em;text-wrap:balance;margin-block:.75rem 1.25rem;line-height:1.02}.hero .hero-summary{max-width:34rem}.hero .hero-actions{flex-wrap:wrap;gap:.75rem;margin-block-start:2rem;display:flex}.hero .hero-action a{border:1px solid var(--color-foreground);color:var(--color-foreground);border-radius:9999px;padding:.625rem 1.5rem;font-size:.875rem;font-weight:600;line-height:1.5;display:inline-block}.hero .hero-action:first-child a{background-color:var(--color-foreground);color:var(--color-surface)}.hero .hero-action a:hover{text-underline-offset:3px;text-decoration:underline}.hero .hero-label{border-radius:4px;grid-template-columns:1.75rem minmax(0,1fr);grid-template-areas:"mark text"".detail";align-items:center;column-gap:.75rem;width:fit-content;max-width:100%;display:grid}.hero .hero-label-text{color:var(--color-foreground);grid-area:text;font-weight:600;line-height:1.4}.hero .hero-label:hover .hero-label-text{text-underline-offset:3px;text-decoration:underline}.hero .hero-detail{color:var(--color-foreground-subtle);grid-area:detail;font-size:.875rem;line-height:1.4}.hero .hero-mark{--hero-mark-edge:color-mix(in oklab, var(--layer-color) 70%, var(--color-foreground));background-color:color-mix(in oklab, var(--layer-color) 25%, transparent);height:4px;box-shadow:inset 0 0 0 1px var(--hero-mark-edge);border-radius:2px;grid-area:mark;display:block;position:relative;overflow:hidden}.hero .hero-mark:after{content:"";background-color:var(--layer-color);transform-origin:0;position:absolute;inset:0}.hero .hero-item[data-layer=see] .hero-mark{--hero-mark-edge:color-mix(in oklab, var(--color-foreground-subtle) 55%, var(--layer-color))}.hero .hero-item[data-layer=see] .hero-mark:after{box-shadow:inset 0 0 0 1px var(--hero-mark-edge)}.dark .hero .hero-item[data-layer=see] .hero-mark{--hero-mark-edge:color-mix(in oklab, var(--layer-color) 70%, var(--color-foreground))}.dark .hero .hero-item[data-layer=see] .hero-mark:after{box-shadow:none}.hero .hero-action a:focus-visible,.hero .hero-label:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}.hero .hero-sheet{--hero-sheet-face:color-mix(in oklab, var(--layer-color), white 50%);--hero-sheet-edge:color-mix(in oklab, var(--layer-color), white 75%);--hero-sheet-side:color-mix(in oklab, var(--hero-sheet-face), black 14%);border:1px solid var(--hero-sheet-edge);background-color:color-mix(in oklab, var(--hero-sheet-face) var(--hero-sheet-alpha), transparent);box-shadow:0 var(--hero-sheet-thick) 0 0 var(--hero-sheet-side), 0 calc(var(--hero-sheet-thick) + 16px) 30px -14px #28201852;color:var(--color-foreground);pointer-events:none;background-image:linear-gradient(150deg,#ffffff3d,#fff0 55%);border-radius:10px;overflow:hidden}.hero .hero-sheet-body{--hero-sheet-lh:1.45;--hero-sheet-fs:.6875rem;max-height:calc(6 * var(--hero-sheet-lh) * var(--hero-sheet-fs));--hero-sheet-ink:color-mix(in oklab, var(--layer-color) 22%, var(--color-foreground));color:var(--hero-sheet-ink);font-size:var(--hero-sheet-fs);line-height:var(--hero-sheet-lh);overflow:hidden}.dark .hero .hero-sheet-body{--hero-sheet-ink:color-mix(in oklab, var(--layer-color) 35%, white)}.hero .hero-item[data-layer=runtime] .hero-sheet-body{--hero-sheet-ink:color-mix(in oklab, var(--layer-color) 8%, white)}.dark .hero .hero-item[data-layer=runtime] .hero-sheet-body{--hero-sheet-ink:color-mix(in oklab, var(--layer-color) 25%, white)}.dark .hero .hero-item[data-layer=see] .hero-sheet-body{--hero-sheet-ink:color-mix(in oklab, var(--hero-night-ink) 88%, var(--layer-color))}.hero .hero-sheet-body pre{font-family:var(--font-mono,ui-monospace, monospace);font-size:inherit;line-height:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;overflow:hidden}.hero .hero-sheet-body ul{margin:0;padding:0;list-style:none}.hero .hero-sheet-body .hero-mini,.hero .hero-sheet-body .hero-boxes{block-size:calc(6 * var(--hero-sheet-lh) * 1em);grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:1.5em;display:grid}.hero .hero-sheet-body .hero-mini-copy,.hero .hero-sheet-body .hero-boxes-copy{flex-direction:column;justify-content:space-between;min-inline-size:0;display:flex}.hero .hero-sheet-body .hero-mini-copy>:where(span){display:block;overflow:hidden}.hero .hero-sheet-body .hero-mini-role{white-space:nowrap;text-overflow:ellipsis;color:color-mix(in oklab, var(--hero-sheet-ink) 72%, transparent);font-size:.62em;font-weight:500;line-height:1.25}.hero .hero-sheet-body .hero-mini-headline{-webkit-line-clamp:2;font-family:var(--font-display);letter-spacing:-.01em;-webkit-box-orient:vertical;font-size:1.55em;font-weight:600;line-height:1.02;display:-webkit-box}.hero .hero-sheet-body .hero-mini-summary{-webkit-line-clamp:2;color:color-mix(in oklab, var(--hero-sheet-ink) 85%, transparent);-webkit-box-orient:vertical;font-size:.58em;line-height:1.3;display:-webkit-box}.hero .hero-sheet-body .hero-mini-actions{gap:.4em;display:flex}.hero .hero-sheet-body .hero-mini-action{border:1px solid var(--hero-sheet-ink);border-block-width:var(--hero-sheet-hair,1px);white-space:nowrap;border-radius:9999px;padding:.3em 1.1em;font-size:.5em;font-weight:600;line-height:1.3}.hero .hero-sheet-body .hero-mini-action:first-child{background-color:var(--hero-sheet-ink);color:var(--hero-sheet-face)}.hero .hero-sheet-body .hero-mini-stack{background-color:color-mix(in oklab, var(--hero-sheet-ink) 20%, transparent);border-radius:.4em}.hero .hero-sheet-body .hero-box{--hero-box-line:color-mix(in oklab, var(--hero-sheet-ink) 62%, transparent);border:1px solid var(--hero-box-line);border-block-width:var(--hero-sheet-hair,1px);border-radius:.2em;flex-direction:column;gap:.24em;padding:.26em .32em;display:flex}.hero .hero-sheet-body .hero-box-actions{flex-direction:row;align-self:flex-start;gap:.4em}.hero .hero-sheet-body .hero-box-action{border-radius:9999px;padding-inline:.7em}.hero .hero-sheet-body .hero-box-bar{block-size:.28em;inline-size:calc(var(--chars) / 40 * 100%);background-color:color-mix(in oklab, var(--hero-sheet-ink) 48%, transparent);border-radius:.14em;min-inline-size:1.2em;display:block}.hero .hero-sheet-body .hero-box-headline .hero-box-bar{block-size:.62em}.hero .hero-sheet-body .hero-box-action .hero-box-bar{inline-size:calc(var(--chars) * .26em)}.hero .hero-sheet-body .hero-boxes-stack{--hero-box-line:color-mix(in oklab, var(--hero-sheet-ink) 62%, transparent);border:1px solid var(--hero-box-line);border-block-width:var(--hero-sheet-hair,1px);background-image:linear-gradient(to top right, transparent calc(50% - var(--hero-sheet-hair,1px) / 2), var(--hero-box-line) 50%, transparent calc(50% + var(--hero-sheet-hair,1px) / 2)), linear-gradient(to bottom right, transparent calc(50% - var(--hero-sheet-hair,1px) / 2), var(--hero-box-line) 50%, transparent calc(50% + var(--hero-sheet-hair,1px) / 2));border-radius:.4em}.hero .hero-sheet-body .hero-outline{--hero-outline-mid:calc(var(--hero-sheet-lh) * .5em);--hero-outline-rail:color-mix(in oklab, var(--hero-sheet-ink) 55%, transparent);font-family:var(--font-mono,ui-monospace, monospace)}.hero .hero-sheet-body .hero-outline-node{padding-inline-start:1.6em;position:relative}.hero .hero-sheet-body .hero-outline-node:before,.hero .hero-sheet-body .hero-outline-node:after{content:"";position:absolute;inset-inline-start:.45em}.hero .hero-sheet-body .hero-outline-node:before{border-inline-start:1px solid var(--hero-outline-rail);inset-block:0}.hero .hero-sheet-body .hero-outline>.hero-outline-node:first-child:before{inset-block-start:var(--hero-outline-mid)}.hero .hero-sheet-body .hero-outline-node:last-child:before{block-size:var(--hero-outline-mid);inset-block-end:auto}.hero .hero-sheet-body .hero-outline>.hero-outline-node:only-child:before{display:none}.hero .hero-sheet-body .hero-outline-node:after{border-block-start:var(--hero-sheet-hair,1px) solid var(--hero-outline-rail);inline-size:.85em;inset-block-start:var(--hero-outline-mid)}.dark .hero .hero-sheet{--hero-sheet-face:color-mix(in oklab, var(--layer-color) 42%, var(--hero-night-ink));--hero-sheet-edge:color-mix(in oklab, var(--layer-color), white 15%);--hero-sheet-side:color-mix(in oklab, var(--layer-color) 58%, var(--hero-night-ink));box-shadow:0 var(--hero-sheet-thick) 0 0 var(--hero-sheet-side), 0 0 26px -4px color-mix(in oklab, var(--layer-color) 40%, transparent);background-image:linear-gradient(150deg,#ffffff1a,#fff0 55%)}.dark .hero .hero-item[data-layer=see] .hero-sheet{--hero-sheet-face:color-mix(in oklab, var(--layer-color) 80%, var(--hero-night-ink));--hero-sheet-edge:color-mix(in oklab, var(--layer-color), white 50%);--hero-sheet-side:color-mix(in oklab, var(--layer-color) 50%, var(--hero-night-ink))}.hero .hero-item[data-layer=runtime] .hero-sheet{--hero-sheet-face:color-mix(in oklab, var(--layer-color), white 12%);--hero-sheet-edge:color-mix(in oklab, var(--layer-color), white 28%);--hero-sheet-side:color-mix(in oklab, var(--layer-color), black 8%);background-color:var(--hero-sheet-face);box-shadow:0 calc(var(--hero-sheet-thick) * 4) 0 0 var(--hero-sheet-side), 0 calc(var(--hero-sheet-thick) * 4 + 16px) 30px -14px #28201866;background-image:none}.dark .hero .hero-item[data-layer=runtime] .hero-sheet{--hero-sheet-face:color-mix(in oklab, var(--layer-color) 44%, black);--hero-sheet-edge:color-mix(in oklab, var(--layer-color) 60%, black);--hero-sheet-side:color-mix(in oklab, var(--layer-color) 32%, black);box-shadow:0 calc(var(--hero-sheet-thick) * 4) 0 0 var(--hero-sheet-side), 0 0 26px -4px color-mix(in oklab, var(--layer-color) 18%, transparent)}@media (min-width:1024px) and (min-height:700px) and (hover:hover) and (pointer:fine){.hero{--hero-labels-w:13rem;--hero-stack-gap:2rem;--hero-column-gap:2rem;--hero-stack-k:1.18;--hero-stack-lead-k:.61;--hero-sheet-w:min(60vh, 640px, calc((min(100vw - 1rem, 1480px) - 4rem - var(--hero-column-gap) - var(--hero-labels-w) - var(--hero-stack-gap) - 21rem) / var(--hero-stack-k)));--hero-sheet-h:calc(var(--hero-sheet-w) * 10 / 16);--hero-stack-w:calc(var(--hero-sheet-w) * var(--hero-stack-k));--hero-stack-x:calc(var(--hero-labels-w) + var(--hero-stack-gap) + var(--hero-sheet-w) * var(--hero-stack-lead-k));--hero-row:calc(var(--hero-gap-open) * sin(var(--hero-tilt-x)));--hero-sheet-thick:9px;min-height:100vh}.hero .hero-stage{column-gap:var(--hero-column-gap);height:100vh;padding-block:var(--hero-top) 1.5rem;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) auto;align-items:safe center;display:grid}.hero .hero-copy{max-width:36rem}.hero .hero-layers{width:calc(var(--hero-labels-w) + var(--hero-stack-gap) + var(--hero-stack-w));perspective:var(--hero-perspective);perspective-origin:var(--hero-stack-x) 50%;transform-style:preserve-3d;align-self:stretch;position:relative}.hero .hero-item{transform-style:preserve-3d;pointer-events:none;position:absolute;inset:0}.hero .hero-label{top:calc(50% + (var(--i) - 2.5) * var(--hero-row) * var(--hero-depth) / (var(--hero-depth) + (var(--i) - 2.5) * cos(var(--hero-tilt-x))));width:var(--hero-labels-w);pointer-events:auto;padding-inline-end:1rem;position:absolute;left:0;transform:translateY(-50%)}.hero .hero-sheet{top:calc(50% - var(--hero-sheet-h) / 2);left:calc(var(--hero-stack-x) - var(--hero-sheet-w) / 2);width:var(--hero-sheet-w);height:var(--hero-sheet-h);transform:rotateX(var(--hero-tilt-x)) rotateZ(var(--hero-tilt-z)) translateZ(calc((var(--i) - 2.5) * var(--hero-gap-open) * -1));border-block-width:3px;position:absolute}.hero .hero-sheet-body{--hero-sheet-hair:2px;position:absolute;inset-block-end:8%;inset-inline:5%}.hero .hero-item[data-layer=see] .hero-sheet-body{--hero-sheet-fs:calc(var(--hero-sheet-w) * .036)}.hero .hero-item:is([data-layer=layout],[data-layer=structure]) .hero-sheet-body{--hero-sheet-fs:calc(var(--hero-sheet-w) * .03)}}@media not all and (min-width:1024px) and (min-height:700px) and (hover:hover) and (pointer:fine){.hero .hero-stage{flex-direction:column;gap:3rem;padding-block-start:var(--hero-top);display:flex}.hero .hero-copy{max-width:720px}.hero .hero-layers{--hero-flat-gap:1.5rem;gap:var(--hero-flat-gap);flex-direction:column;max-width:720px;display:flex}.hero .hero-item{flex-direction:column;gap:.625rem;display:flex}.hero .hero-sheet{min-height:4rem;padding:.875rem 1rem}}@media screen{@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){@media (min-width:1024px) and (min-height:700px) and (hover:hover) and (pointer:fine){.hero{view-timeline-name:--hero-open;view-timeline-axis:block;height:250vh}.hero .hero-stage{position:sticky;top:0}.hero .hero-sheet{animation-name:hero-sheet-open;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hero-open;animation-range:contain}.hero .hero-mark:after{animation-name:hero-mark-fill;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hero-open;animation-range:contain}}@media not all and (min-width:1024px) and (min-height:700px) and (hover:hover) and (pointer:fine){.hero .hero-layers{view-timeline-name:--hero-list;view-timeline-axis:block}.hero .hero-item{animation-name:hero-item-settle;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--hero-list;animation-range:entry cover 50%}}}}}@keyframes hero-item-settle{0%{transform:translateY(calc(var(--i) * -1 * (40px + var(--hero-flat-gap))))}to{transform:translateY(0)}}@keyframes hero-sheet-open{0%{transform:rotateX(var(--hero-tilt-x)) rotateZ(var(--hero-tilt-z)) translateZ(calc((var(--i) - 2.5) * var(--hero-gap-closed) * -1))}to{transform:rotateX(var(--hero-tilt-x)) rotateZ(var(--hero-tilt-z)) translateZ(calc((var(--i) - 2.5) * var(--hero-gap-open) * -1))}}@keyframes hero-mark-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
