@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";
*,:before,:after {
  box-sizing:border-box;
border:0 solid #e5e7eb}

:before,:after {
--tw-content:""}

html,:host {
  -webkit-text-size-adjust:100%;
  tab-size:4;
  font-feature-settings:normal;
  font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent;
  font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
line-height:1.5}

body {
  line-height:inherit;
margin:0}

hr {
  height:0;
  color:inherit;
border-top-width:1px}

abbr:where([title]) {
text-decoration:underline dotted}

h1,h2,h3,h4,h5,h6 {
  font-size:inherit;
font-weight:inherit}

b,strong {
font-weight:bolder}

code,kbd,samp,pre {
  font-feature-settings:normal;
  font-variation-settings:normal;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
font-size:1em}

small {
font-size:80%}

sub,sup {
  vertical-align:baseline;
  font-size:75%;
  line-height:0;
position:relative}

sub {
bottom:-.25em}

sup {
top:-.5em}

table {
  text-indent:0;
  border-color:inherit;
border-collapse:collapse}

button,input,optgroup,select,textarea {
  font-feature-settings:inherit;
  font-variation-settings:inherit;
  font-family:inherit;
  font-size:100%;
  font-weight:inherit;
  line-height:inherit;
  color:inherit;
  margin:0;
padding:0}

button,select {
text-transform:none}

button,[type=button],[type=reset],[type=submit] {
  -webkit-appearance:button;
  background-color:#0000;
background-image:none}

:-moz-focusring {
outline:auto}

:-moz-ui-invalid {
box-shadow:none}

progress {
vertical-align:baseline}

::-webkit-inner-spin-button {
height:auto}

::-webkit-outer-spin-button {
height:auto}

[type=search] {
  -webkit-appearance:textfield;
outline-offset:-2px}

::-webkit-search-decoration {
-webkit-appearance:none}

::-webkit-file-upload-button {
  -webkit-appearance:button;
font:inherit}

summary {
display:list-item}

blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
margin:0}

fieldset {
  margin:0;
padding:0}

legend {
padding:0}

ol,ul,menu {
  margin:0;
  padding:0;
list-style:none}

dialog {
padding:0}

textarea {
resize:vertical}

input::-moz-placeholder {
  opacity:1;
color:#9ca3af}

textarea::-moz-placeholder {
  opacity:1;
color:#9ca3af}

input::placeholder,textarea::placeholder {
  opacity:1;
color:#9ca3af}

button,[role=button] {
cursor:pointer}

:disabled {
cursor:default}

img,svg,video,canvas,audio,iframe,embed,object {
  vertical-align:middle;
display:block}

img,video {
  max-width:100%;
height:auto}

[hidden] {
display:none}

*,:before,:after,::backdrop {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:#3b82f680;
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
--tw-backdrop-sepia: }

.sr-only {
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border-width:0;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  position:absolute;
overflow:hidden}

.pointer-events-none {
pointer-events:none}

.pointer-events-auto {
pointer-events:auto}

.visible {
visibility:visible}

.invisible {
visibility:hidden}

.fixed {
position:fixed}

.absolute {
position:absolute}

.relative {
position:relative}

.inset-0 {
inset:0}

.inset-x-0 {
  left:0;
right:0}

.inset-y-0 {
  top:0;
bottom:0}

.-bottom-12 {
bottom:-3rem}

.-left-12 {
left:-3rem}

.-right-12 {
right:-3rem}

.-top-12 {
top:-3rem}

.bottom-0 {
bottom:0}

.left-0 {
left:0}

.left-1\/2 {
left:50%}

.left-2 {
left:.5rem}

.left-\[50\%\] {
left:50%}

.right-0 {
right:0}

.right-1 {
right:.25rem}

.right-2 {
right:.5rem}

.right-4 {
right:1rem}

.top-0 {
top:0}

.top-1 {
top:.25rem}

.top-1\/2 {
top:50%}

.top-4 {
top:1rem}

.top-\[1px\] {
top:1px}

.top-\[50\%\] {
top:50%}

.top-\[60\%\] {
top:60%}

.top-full {
top:100%}

.z-10 {
z-index:10}

.z-50 {
z-index:50}

.z-\[100\] {
z-index:100}

.z-\[1\] {
z-index:1}

.-mx-1 {
  margin-left:-.25rem;
margin-right:-.25rem}

.mx-auto {
  margin-left:auto;
margin-right:auto}

.my-1 {
  margin-top:.25rem;
margin-bottom:.25rem}

.-ml-4 {
margin-left:-1rem}

.-mt-4 {
margin-top:-1rem}

.mb-1 {
margin-bottom:.25rem}

.ml-1 {
margin-left:.25rem}

.ml-auto {
margin-left:auto}

.mr-2 {
margin-right:.5rem}

.mt-1 {
margin-top:.25rem}

.mt-1\.5 {
margin-top:.375rem}

.mt-2 {
margin-top:.5rem}

.mt-24 {
margin-top:6rem}

.mt-4 {
margin-top:1rem}

.mt-auto {
margin-top:auto}

.block {
display:block}

.flex {
display:flex}

.inline-flex {
display:inline-flex}

.table {
display:table}

.grid {
display:grid}

.hidden {
display:none}

.aspect-square {
aspect-ratio:1}

.size-4 {
  width:1rem;
height:1rem}

.size-\[--cell-size\] {
  width:var(--cell-size);
height:var(--cell-size)}

.h-1 {
height:.25rem}

.h-1\.5 {
height:.375rem}

.h-10 {
height:2.5rem}

.h-2 {
height:.5rem}

.h-2\.5 {
height:.625rem}

.h-3 {
height:.75rem}

.h-3\.5 {
height:.875rem}

.h-4 {
height:1rem}

.h-5 {
height:1.25rem}

.h-8 {
height:2rem}

.h-9 {
height:2.25rem}

.h-\[--cell-size\] {
height:var(--cell-size)}

.h-\[1px\] {
height:1px}

.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
height:var(--radix-navigation-menu-viewport-height)}

.h-\[var\(--radix-select-trigger-height\)\] {
height:var(--radix-select-trigger-height)}

.h-auto {
height:auto}

.h-full {
height:100%}

.h-px {
height:1px}

.max-h-\[--radix-context-menu-content-available-height\] {
max-height:var(--radix-context-menu-content-available-height)}

.max-h-\[--radix-select-content-available-height\] {
max-height:var(--radix-select-content-available-height)}

.max-h-\[300px\] {
max-height:300px}

.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
max-height:var(--radix-dropdown-menu-content-available-height)}

.max-h-screen {
max-height:100vh}

.min-h-\[60px\] {
min-height:60px}

.w-10 {
width:2.5rem}

.w-2 {
width:.5rem}

.w-2\.5 {
width:.625rem}

.w-3 {
width:.75rem}

.w-3\.5 {
width:.875rem}

.w-3\/4 {
width:75%}

.w-4 {
width:1rem}

.w-64 {
width:16rem}

.w-72 {
width:18rem}

.w-8 {
width:2rem}

.w-9 {
width:2.25rem}

.w-\[--cell-size\] {
width:var(--cell-size)}

.w-\[100px\] {
width:100px}

.w-\[1px\] {
width:1px}

.w-fit {
width:fit-content}

.w-full {
width:100%}

.w-max {
width:max-content}

.w-px {
width:1px}

.min-w-0 {
min-width:0}

.min-w-10 {
min-width:2.5rem}

.min-w-8 {
min-width:2rem}

.min-w-9 {
min-width:2.25rem}

.min-w-\[--cell-size\] {
min-width:var(--cell-size)}

.min-w-\[12rem\] {
min-width:12rem}

.min-w-\[8rem\] {
min-width:8rem}

.min-w-\[var\(--radix-select-trigger-width\)\] {
min-width:var(--radix-select-trigger-width)}

.max-w-lg {
max-width:32rem}

.max-w-max {
max-width:max-content}

.flex-1 {
flex:1}

.shrink-0 {
flex-shrink:0}

.grow {
flex-grow:1}

.grow-0 {
flex-grow:0}

.basis-full {
flex-basis:100%}

.caption-bottom {
caption-side:bottom}

.border-collapse {
border-collapse:collapse}

.origin-\[--radix-context-menu-content-transform-origin\] {
transform-origin:var(--radix-context-menu-content-transform-origin)}

.origin-\[--radix-dropdown-menu-content-transform-origin\] {
transform-origin:var(--radix-dropdown-menu-content-transform-origin)}

.origin-\[--radix-hover-card-content-transform-origin\] {
transform-origin:var(--radix-hover-card-content-transform-origin)}

.origin-\[--radix-menubar-content-transform-origin\] {
transform-origin:var(--radix-menubar-content-transform-origin)}

.origin-\[--radix-popover-content-transform-origin\] {
transform-origin:var(--radix-popover-content-transform-origin)}

.origin-\[--radix-select-content-transform-origin\] {
transform-origin:var(--radix-select-content-transform-origin)}

.origin-\[--radix-tooltip-content-transform-origin\] {
transform-origin:var(--radix-tooltip-content-transform-origin)}

.-translate-x-1\/2 {
  --tw-translate-x:-50%;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.-translate-y-1\/2 {
  --tw-translate-y:-50%;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.translate-x-\[-50\%\] {
  --tw-translate-x:-50%;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.translate-y-\[-50\%\] {
  --tw-translate-y:-50%;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.rotate-45 {
  --tw-rotate:45deg;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.rotate-90 {
  --tw-rotate:90deg;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.transform {
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

@keyframes pulse {
  50% {
  opacity:.5}

}

.animate-pulse {
animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}

.cursor-default {
cursor:default}

.cursor-pointer {
cursor:pointer}

.touch-none {
touch-action:none}

.select-none {
  -webkit-user-select:none;
user-select:none}

.resize {
resize:both}

.list-none {
list-style-type:none}

.flex-col {
flex-direction:column}

.flex-col-reverse {
flex-direction:column-reverse}

.flex-wrap {
flex-wrap:wrap}

.items-end {
align-items:flex-end}

.items-center {
align-items:center}

.justify-center {
justify-content:center}

.justify-between {
justify-content:space-between}

.gap-1 {
gap:.25rem}

.gap-1\.5 {
gap:.375rem}

.gap-2 {
gap:.5rem}

.gap-4 {
gap:1rem}

.space-x-1>:not([hidden])~:not([hidden]) {
  --tw-space-x-reverse:0;
  margin-right:calc(.25rem * var(--tw-space-x-reverse));
margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}

.space-x-2>:not([hidden])~:not([hidden]) {
  --tw-space-x-reverse:0;
  margin-right:calc(.5rem * var(--tw-space-x-reverse));
margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}

.space-y-1>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}

.space-y-1\.5>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}

.space-y-2>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}

.overflow-auto {
overflow:auto}

.overflow-hidden {
overflow:hidden}

.overflow-y-auto {
overflow-y:auto}

.overflow-x-hidden {
overflow-x:hidden}

.whitespace-nowrap {
white-space:nowrap}

.break-words {
overflow-wrap:break-word}

.rounded-\[inherit\] {
border-radius:inherit}

.rounded-full {
border-radius:9999px}

.rounded-lg {
border-radius:var(--radius)}

.rounded-md {
border-radius:calc(var(--radius) - 2px)}

.rounded-none {
border-radius:0}

.rounded-sm {
border-radius:calc(var(--radius) - 4px)}

.rounded-xl {
border-radius:.75rem}

.rounded-l-md {
  border-top-left-radius:calc(var(--radius) - 2px);
border-bottom-left-radius:calc(var(--radius) - 2px)}

.rounded-r-md {
  border-top-right-radius:calc(var(--radius) - 2px);
border-bottom-right-radius:calc(var(--radius) - 2px)}

.rounded-t-\[10px\] {
  border-top-left-radius:10px;
border-top-right-radius:10px}

.rounded-tl-sm {
border-top-left-radius:calc(var(--radius) - 4px)}

.border {
border-width:1px}

.border-2 {
border-width:2px}

.border-b {
border-bottom-width:1px}

.border-l {
border-left-width:1px}

.border-r {
border-right-width:1px}

.border-t {
border-top-width:1px}

.border-destructive {
border-color:hsl(var(--destructive))}

.border-destructive\/50 {
border-color:hsl(var(--destructive) / .5)}

.border-input {
border-color:hsl(var(--input))}

.border-primary {
border-color:hsl(var(--primary))}

.border-primary\/50 {
border-color:hsl(var(--primary) / .5)}

.border-transparent {
border-color:#0000}

.border-l-transparent {
border-left-color:#0000}

.border-t-transparent {
border-top-color:#0000}

.bg-accent {
background-color:hsl(var(--accent))}

.bg-background {
background-color:hsl(var(--background))}

.bg-black\/80 {
background-color:#000c}

.bg-border {
background-color:hsl(var(--border))}

.bg-card {
background-color:hsl(var(--card))}

.bg-destructive {
background-color:hsl(var(--destructive))}

.bg-muted {
background-color:hsl(var(--muted))}

.bg-muted\/50 {
background-color:hsl(var(--muted) / .5)}

.bg-popover {
background-color:hsl(var(--popover))}

.bg-primary {
background-color:hsl(var(--primary))}

.bg-primary\/10 {
background-color:hsl(var(--primary) / .1)}

.bg-primary\/20 {
background-color:hsl(var(--primary) / .2)}

.bg-secondary {
background-color:hsl(var(--secondary))}

.bg-transparent {
background-color:#0000}

.fill-current {
fill:currentColor}

.fill-primary {
fill:hsl(var(--primary))}

.p-0 {
padding:0}

.p-1 {
padding:.25rem}

.p-2 {
padding:.5rem}

.p-3 {
padding:.75rem}

.p-4 {
padding:1rem}

.p-6 {
padding:1.5rem}

.p-\[1px\] {
padding:1px}

.px-1 {
  padding-left:.25rem;
padding-right:.25rem}

.px-1\.5 {
  padding-left:.375rem;
padding-right:.375rem}

.px-2 {
  padding-left:.5rem;
padding-right:.5rem}

.px-2\.5 {
  padding-left:.625rem;
padding-right:.625rem}

.px-3 {
  padding-left:.75rem;
padding-right:.75rem}

.px-4 {
  padding-left:1rem;
padding-right:1rem}

.px-8 {
  padding-left:2rem;
padding-right:2rem}

.px-\[--cell-size\] {
  padding-left:var(--cell-size);
padding-right:var(--cell-size)}

.py-0 {
  padding-top:0;
padding-bottom:0}

.py-0\.5 {
  padding-top:.125rem;
padding-bottom:.125rem}

.py-1 {
  padding-top:.25rem;
padding-bottom:.25rem}

.py-1\.5 {
  padding-top:.375rem;
padding-bottom:.375rem}

.py-2 {
  padding-top:.5rem;
padding-bottom:.5rem}

.py-3 {
  padding-top:.75rem;
padding-bottom:.75rem}

.py-4 {
  padding-top:1rem;
padding-bottom:1rem}

.py-6 {
  padding-top:1.5rem;
padding-bottom:1.5rem}

.pb-4 {
padding-bottom:1rem}

.pl-2 {
padding-left:.5rem}

.pl-4 {
padding-left:1rem}

.pl-8 {
padding-left:2rem}

.pr-1 {
padding-right:.25rem}

.pr-2 {
padding-right:.5rem}

.pr-6 {
padding-right:1.5rem}

.pr-8 {
padding-right:2rem}

.pt-0 {
padding-top:0}

.pt-4 {
padding-top:1rem}

.text-left {
text-align:left}

.text-center {
text-align:center}

.align-middle {
vertical-align:middle}

.text-\[0\.8rem\] {
font-size:.8rem}

.text-base {
  font-size:1rem;
line-height:1.5rem}

.text-lg {
  font-size:1.125rem;
line-height:1.75rem}

.text-sm {
  font-size:.875rem;
line-height:1.25rem}

.text-xs {
  font-size:.75rem;
line-height:1rem}

.font-medium {
font-weight:500}

.font-normal {
font-weight:400}

.font-semibold {
font-weight:600}

.leading-none {
line-height:1}

.tracking-tight {
letter-spacing:-.025em}

.tracking-widest {
letter-spacing:.1em}

.text-accent-foreground {
color:hsl(var(--accent-foreground))}

.text-card-foreground {
color:hsl(var(--card-foreground))}

.text-current {
color:currentColor}

.text-destructive {
color:hsl(var(--destructive))}

.text-destructive-foreground {
color:hsl(var(--destructive-foreground))}

.text-foreground {
color:hsl(var(--foreground))}

.text-foreground\/50 {
color:hsl(var(--foreground) / .5)}

.text-muted-foreground {
color:hsl(var(--muted-foreground))}

.text-popover-foreground {
color:hsl(var(--popover-foreground))}

.text-primary {
color:hsl(var(--primary))}

.text-primary-foreground {
color:hsl(var(--primary-foreground))}

.text-secondary-foreground {
color:hsl(var(--secondary-foreground))}

.underline-offset-4 {
text-underline-offset:4px}

.opacity-0 {
opacity:0}

.opacity-50 {
opacity:.5}

.opacity-60 {
opacity:.6}

.opacity-70 {
opacity:.7}

.opacity-90 {
opacity:.9}

.shadow {
  --tw-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}

.shadow-lg {
  --tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}

.shadow-md {
  --tw-shadow:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}

.shadow-sm {
  --tw-shadow:0 1px 2px 0 #0000000d;
  --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}

.outline-none {
  outline-offset:2px;
outline:2px solid #0000}

.outline {
outline-style:solid}

.ring-0 {
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}

.ring-offset-background {
--tw-ring-offset-color:hsl(var(--background))}

.filter {
filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

.transition {
  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-duration:.15s;
transition-timing-function:cubic-bezier(.4,0,.2,1)}

.transition-all {
  transition-property:all;
  transition-duration:.15s;
transition-timing-function:cubic-bezier(.4,0,.2,1)}

.transition-colors {
  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-duration:.15s;
transition-timing-function:cubic-bezier(.4,0,.2,1)}

.transition-opacity {
  transition-property:opacity;
  transition-duration:.15s;
transition-timing-function:cubic-bezier(.4,0,.2,1)}

.transition-transform {
  transition-property:transform;
  transition-duration:.15s;
transition-timing-function:cubic-bezier(.4,0,.2,1)}

.duration-200 {
transition-duration:.2s}

.duration-300 {
transition-duration:.3s}

.ease-in-out {
transition-timing-function:cubic-bezier(.4,0,.2,1)}

@keyframes enter {
  0% {
    opacity:var(--tw-enter-opacity,1);
  transform:translate3d(var(--tw-enter-translate-x,0), var(--tw-enter-translate-y,0), 0) scale3d(var(--tw-enter-scale,1), var(--tw-enter-scale,1), var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}

}

@keyframes exit {
  to {
    opacity:var(--tw-exit-opacity,1);
  transform:translate3d(var(--tw-exit-translate-x,0), var(--tw-exit-translate-y,0), 0) scale3d(var(--tw-exit-scale,1), var(--tw-exit-scale,1), var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}

}

.animate-in {
  --tw-enter-opacity:initial;
  --tw-enter-scale:initial;
  --tw-enter-rotate:initial;
  --tw-enter-translate-x:initial;
  --tw-enter-translate-y:initial;
  animation-name:enter;
animation-duration:.15s}

.fade-in-0 {
--tw-enter-opacity:0}

.zoom-in-95 {
--tw-enter-scale:.95}

.duration-200 {
animation-duration:.2s}

.duration-300 {
animation-duration:.3s}

.ease-in-out {
animation-timing-function:cubic-bezier(.4,0,.2,1)}

.running {
animation-play-state:running}

.\[--cell-size\:2rem\] {
--cell-size:2rem}

:root {
  --bg:#05070b;
  --bg-1:#090e16;
  --bg-2:#0c131f;
  --bg-3:#101a29;
  --surface:#d2e2f009;
  --surface-strong:#d2e2f00f;
  --line:#96acc424;
  --line-strong:#96acc44d;
  --ink:#ecf3fa;
  --ink-dim:#93a7bd;
  --ink-faint:#57677c;
  --blue:#3d7cf5;
  --blue-soft:#6f9cf7;
  --blue-deep:#0e1f45;
  --cyan:#6fe1ee;
  --pink:#ff5fa0;
  --pink-soft:#ff8cbd;
  --amber:#eab04c;
  --font-display:"Space Grotesk", "Manrope", sans-serif;
  --font-sans:"Manrope", -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", "SFMono-Regular", monospace;
  --container:1280px;
  --edge:clamp(20px, 5vw, 64px);
  --radius-s:3px;
  --radius-m:6px;
--ease:cubic-bezier(.16, 1, .3, 1)}

* {
box-sizing:border-box}

html {
scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}

  *,:before,:after {
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
  animation-iteration-count:1!important}

}

body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  margin:0;
  font-size:16px;
  line-height:1.5;
overflow-x:hidden}

#root {
position:relative}

h1,h2,h3,h4 {
  font-family:var(--font-display);
  letter-spacing:-.01em;
  margin:0;
  font-weight:600;
line-height:1.08}

p {
margin:0}

a {
  color:inherit;
text-decoration:none}

button {
  cursor:pointer;
font-family:inherit}

ul {
  margin:0;
  padding:0;
list-style:none}

img {
  max-width:100%;
display:block}

::selection {
  background:var(--pink);
color:#060708}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px;
border-radius:2px}

::-webkit-scrollbar {
width:10px}

::-webkit-scrollbar-track {
background:var(--bg)}

::-webkit-scrollbar-thumb {
  background:var(--line-strong);
border-radius:8px}

.grain {
  z-index:200;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position:fixed;
inset:0}

.bg-grid {
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  opacity:.35;
  background-size:88px 88px;
  position:fixed;
  inset:0;
mask-image:radial-gradient(80% 60% at 50% 0,#000 0%,#0000 75%)}

.wrap {
  max-width:var(--container);
  padding-left:var(--edge);
  padding-right:var(--edge);
  margin:0 auto;
position:relative}

.section {
  border-top:1px solid var(--line);
  padding:clamp(64px,11vw,148px) 0;
position:relative}

.eyebrow {
  font-family:var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  align-items:center;
  gap:8px;
  font-size:11.5px;
display:inline-flex}

.eyebrow:before {
  content:"";
  background:var(--cyan);
  width:14px;
  height:1px;
display:inline-block}

.section-head {
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:clamp(36px,6vw,64px);
display:flex}

.section-title {
  max-width:16ch;
  margin-top:14px;
font-size:clamp(30px,4.4vw,52px)}

.section-sub {
  max-width:40ch;
  color:var(--ink-dim);
  font-size:15.5px;
line-height:1.6}

.mono {
font-family:var(--font-mono)}

.tag {
  font-family:var(--font-mono);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line-strong);
  white-space:nowrap;
  border-radius:999px;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-size:10.5px;
display:inline-flex}

.btn {
  font-family:var(--font-sans);
  border:1px solid var(--line-strong);
  color:var(--ink);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
  background:0 0;
  border-radius:999px;
  align-items:center;
  gap:9px;
  padding:13px 22px;
  font-size:14.5px;
  font-weight:700;
display:inline-flex}

.btn:hover {
  border-color:var(--cyan);
  color:var(--cyan);
transform:translateY(-1px)}

.btn-primary {
  background:var(--ink);
  color:var(--bg);
border-color:var(--ink)}

.btn-primary:hover {
  background:var(--pink);
  border-color:var(--pink);
color:#100309}

.btn svg {
transition:transform .35s var(--ease)}

.btn:hover svg {
transform:translate(3px,-2px)}

.line-rule {
  background:var(--line);
  width:100%;
height:1px}

.reveal {
  opacity:0;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
transform:translateY(22px)}

.reveal.is-visible {
  opacity:1;
transform:translateY(0)}

.reveal-delay-1 {
transition-delay:80ms}

.reveal-delay-2 {
transition-delay:.16s}

.reveal-delay-3 {
transition-delay:.24s}

.reveal-delay-4 {
transition-delay:.32s}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity:1;
  transform:none}

}

.ripple-dot {
  border:1px solid var(--cyan);
  pointer-events:none;
  z-index:999;
  width:6px;
  height:6px;
  animation:rippleGrow 1.1s var(--ease) forwards;
  border-radius:50%;
  position:fixed;
transform:translate(-50%,-50%)}

@keyframes rippleGrow {
  0% {
    opacity:.8;
    width:6px;
  height:6px}

  to {
    opacity:0;
    width:70px;
  height:70px}

}

.container-note {
  font-family:var(--font-mono);
  color:var(--ink-faint);
  letter-spacing:.08em;
font-size:10.5px}

.site {
  min-height:100vh;
position:relative}

main {
  z-index:1;
position:relative}

.nav,.footer,.grain {
z-index:10}

.file\:border-0::file-selector-button {
border-width:0}

.file\:bg-transparent::file-selector-button {
background-color:#0000}

.file\:text-sm::file-selector-button {
  font-size:.875rem;
line-height:1.25rem}

.file\:font-medium::file-selector-button {
font-weight:500}

.file\:text-foreground::file-selector-button {
color:hsl(var(--foreground))}

.placeholder\:text-muted-foreground::placeholder {
color:hsl(var(--muted-foreground))}

.after\:absolute:after {
  content:var(--tw-content);
position:absolute}

.after\:inset-y-0:after {
  content:var(--tw-content);
  top:0;
bottom:0}

.after\:left-1\/2:after {
  content:var(--tw-content);
left:50%}

.after\:w-1:after {
  content:var(--tw-content);
width:.25rem}

.after\:-translate-x-1\/2:after {
  content:var(--tw-content);
  --tw-translate-x:-50%;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.hover\:bg-accent:hover {
background-color:hsl(var(--accent))}

.hover\:bg-destructive\/80:hover {
background-color:hsl(var(--destructive) / .8)}

.hover\:bg-destructive\/90:hover {
background-color:hsl(var(--destructive) / .9)}

.hover\:bg-muted:hover {
background-color:hsl(var(--muted))}

.hover\:bg-muted\/50:hover {
background-color:hsl(var(--muted) / .5)}

.hover\:bg-primary\/80:hover {
background-color:hsl(var(--primary) / .8)}

.hover\:bg-primary\/90:hover {
background-color:hsl(var(--primary) / .9)}

.hover\:bg-secondary:hover {
background-color:hsl(var(--secondary))}

.hover\:bg-secondary\/80:hover {
background-color:hsl(var(--secondary) / .8)}

.hover\:text-accent-foreground:hover {
color:hsl(var(--accent-foreground))}

.hover\:text-foreground:hover {
color:hsl(var(--foreground))}

.hover\:text-muted-foreground:hover {
color:hsl(var(--muted-foreground))}

.hover\:underline:hover {
text-decoration-line:underline}

.hover\:opacity-100:hover {
opacity:1}

.focus\:bg-accent:focus {
background-color:hsl(var(--accent))}

.focus\:text-accent-foreground:focus {
color:hsl(var(--accent-foreground))}

.focus\:opacity-100:focus {
opacity:1}

.focus\:outline-none:focus {
  outline-offset:2px;
outline:2px solid #0000}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}

.focus\:ring-ring:focus {
--tw-ring-color:hsl(var(--ring))}

.focus\:ring-offset-2:focus {
--tw-ring-offset-width:2px}

.focus-visible\:outline-none:focus-visible {
  outline-offset:2px;
outline:2px solid #0000}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}

.focus-visible\:ring-ring:focus-visible {
--tw-ring-color:hsl(var(--ring))}

.focus-visible\:ring-offset-1:focus-visible {
--tw-ring-offset-width:1px}

.focus-visible\:ring-offset-2:focus-visible {
--tw-ring-offset-width:2px}

.focus-visible\:ring-offset-background:focus-visible {
--tw-ring-offset-color:hsl(var(--background))}

.disabled\:pointer-events-none:disabled {
pointer-events:none}

.disabled\:cursor-not-allowed:disabled {
cursor:not-allowed}

.disabled\:opacity-50:disabled {
opacity:.5}

.group:hover .group-hover\:opacity-100 {
opacity:1}

.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
border-color:hsl(var(--muted) / .4)}

.group.toaster .group-\[\.toaster\]\:border-border {
border-color:hsl(var(--border))}

.group.toast .group-\[\.toast\]\:bg-muted {
background-color:hsl(var(--muted))}

.group.toast .group-\[\.toast\]\:bg-primary {
background-color:hsl(var(--primary))}

.group.toaster .group-\[\.toaster\]\:bg-background {
background-color:hsl(var(--background))}

.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity:1;
color:rgb(252 165 165/var(--tw-text-opacity))}

.group.toast .group-\[\.toast\]\:text-muted-foreground {
color:hsl(var(--muted-foreground))}

.group.toast .group-\[\.toast\]\:text-primary-foreground {
color:hsl(var(--primary-foreground))}

.group.toaster .group-\[\.toaster\]\:text-foreground {
color:hsl(var(--foreground))}

.group.toaster .group-\[\.toaster\]\:shadow-lg {
  --tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}

.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
border-color:hsl(var(--destructive) / .3)}

.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
background-color:hsl(var(--destructive))}

.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
color:hsl(var(--destructive-foreground))}

.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity:1;
color:rgb(254 242 242/var(--tw-text-opacity))}

.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
--tw-ring-color:hsl(var(--destructive))}

.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity:1;
--tw-ring-color:rgb(248 113 113/var(--tw-ring-opacity))}

.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
--tw-ring-offset-color:#dc2626}

.peer:disabled~.peer-disabled\:cursor-not-allowed {
cursor:not-allowed}

.peer:disabled~.peer-disabled\:opacity-70 {
opacity:.7}

.aria-disabled\:opacity-50[aria-disabled=true] {
opacity:.5}

.aria-selected\:text-muted-foreground[aria-selected=true] {
color:hsl(var(--muted-foreground))}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true],.data-\[disabled\]\:pointer-events-none[data-disabled] {
pointer-events:none}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction=vertical] {
height:1px}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction=vertical] {
width:100%}

.data-\[side\=bottom\]\:translate-y-1[data-side=bottom] {
  --tw-translate-y:.25rem;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.data-\[side\=left\]\:-translate-x-1[data-side=left] {
  --tw-translate-x:-.25rem;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.data-\[side\=right\]\:translate-x-1[data-side=right] {
  --tw-translate-x:.25rem;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.data-\[side\=top\]\:-translate-y-1[data-side=top] {
  --tw-translate-y:-.25rem;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.data-\[state\=checked\]\:translate-x-4[data-state=checked] {
  --tw-translate-x:1rem;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked],.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel] {
  --tw-translate-x:0px;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end] {
  --tw-translate-x:var(--radix-toast-swipe-end-x);
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move] {
  --tw-translate-x:var(--radix-toast-swipe-move-x);
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

@keyframes accordion-up {
  0% {
  height:var(--radix-accordion-content-height)}

  to {
  height:0}

}

.data-\[state\=closed\]\:animate-accordion-up[data-state=closed] {
animation:.2s ease-out accordion-up}

@keyframes accordion-down {
  0% {
  height:0}

  to {
  height:var(--radix-accordion-content-height)}

}

.data-\[state\=open\]\:animate-accordion-down[data-state=open] {
animation:.2s ease-out accordion-down}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction=vertical] {
flex-direction:column}

.data-\[range-end\=true\]\:rounded-md[data-range-end=true] {
border-radius:calc(var(--radius) - 2px)}

.data-\[range-middle\=true\]\:rounded-none[data-range-middle=true] {
border-radius:0}

.data-\[range-start\=true\]\:rounded-md[data-range-start=true] {
border-radius:calc(var(--radius) - 2px)}

.data-\[selected\=true\]\:rounded-none[data-selected=true] {
border-radius:0}

.data-\[range-end\=true\]\:bg-primary[data-range-end=true] {
background-color:hsl(var(--primary))}

.data-\[range-middle\=true\]\:bg-accent[data-range-middle=true] {
background-color:hsl(var(--accent))}

.data-\[range-start\=true\]\:bg-primary[data-range-start=true],.data-\[selected-single\=true\]\:bg-primary[data-selected-single=true] {
background-color:hsl(var(--primary))}

.data-\[selected\=true\]\:bg-accent[data-selected=true] {
background-color:hsl(var(--accent))}

.data-\[state\=active\]\:bg-background[data-state=active] {
background-color:hsl(var(--background))}

.data-\[state\=checked\]\:bg-primary[data-state=checked] {
background-color:hsl(var(--primary))}

.data-\[state\=on\]\:bg-accent[data-state=on],.data-\[state\=open\]\:bg-accent[data-state=open] {
background-color:hsl(var(--accent))}

.data-\[state\=open\]\:bg-accent\/50[data-state=open] {
background-color:hsl(var(--accent) / .5)}

.data-\[state\=open\]\:bg-secondary[data-state=open] {
background-color:hsl(var(--secondary))}

.data-\[state\=selected\]\:bg-muted[data-state=selected] {
background-color:hsl(var(--muted))}

.data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
background-color:hsl(var(--input))}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
color:hsl(var(--muted-foreground))}

.data-\[range-end\=true\]\:text-primary-foreground[data-range-end=true] {
color:hsl(var(--primary-foreground))}

.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle=true] {
color:hsl(var(--accent-foreground))}

.data-\[range-start\=true\]\:text-primary-foreground[data-range-start=true],.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single=true] {
color:hsl(var(--primary-foreground))}

.data-\[selected\=true\]\:text-accent-foreground[data-selected=true] {
color:hsl(var(--accent-foreground))}

.data-\[state\=active\]\:text-foreground[data-state=active] {
color:hsl(var(--foreground))}

.data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
color:hsl(var(--primary-foreground))}

.data-\[state\=on\]\:text-accent-foreground[data-state=on],.data-\[state\=open\]\:text-accent-foreground[data-state=open] {
color:hsl(var(--accent-foreground))}

.data-\[state\=open\]\:text-muted-foreground[data-state=open] {
color:hsl(var(--muted-foreground))}

.data-\[disabled\=true\]\:opacity-50[data-disabled=true],.data-\[disabled\]\:opacity-50[data-disabled] {
opacity:.5}

.data-\[state\=active\]\:shadow[data-state=active] {
  --tw-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}

.data-\[swipe\=move\]\:transition-none[data-swipe=move] {
transition-property:none}

.data-\[state\=closed\]\:duration-300[data-state=closed] {
transition-duration:.3s}

.data-\[state\=open\]\:duration-500[data-state=open] {
transition-duration:.5s}

.data-\[motion\^\=from-\]\:animate-in[data-motion^=from-],.data-\[state\=open\]\:animate-in[data-state=open],.data-\[state\=visible\]\:animate-in[data-state=visible] {
  --tw-enter-opacity:initial;
  --tw-enter-scale:initial;
  --tw-enter-rotate:initial;
  --tw-enter-translate-x:initial;
  --tw-enter-translate-y:initial;
  animation-name:enter;
animation-duration:.15s}

.data-\[motion\^\=to-\]\:animate-out[data-motion^=to-],.data-\[state\=closed\]\:animate-out[data-state=closed],.data-\[state\=hidden\]\:animate-out[data-state=hidden],.data-\[swipe\=end\]\:animate-out[data-swipe=end] {
  --tw-exit-opacity:initial;
  --tw-exit-scale:initial;
  --tw-exit-rotate:initial;
  --tw-exit-translate-x:initial;
  --tw-exit-translate-y:initial;
  animation-name:exit;
animation-duration:.15s}

.data-\[motion\^\=from-\]\:fade-in[data-motion^=from-] {
--tw-enter-opacity:0}

.data-\[motion\^\=to-\]\:fade-out[data-motion^=to-],.data-\[state\=closed\]\:fade-out-0[data-state=closed] {
--tw-exit-opacity:0}

.data-\[state\=closed\]\:fade-out-80[data-state=closed] {
--tw-exit-opacity:.8}

.data-\[state\=hidden\]\:fade-out[data-state=hidden] {
--tw-exit-opacity:0}

.data-\[state\=open\]\:fade-in-0[data-state=open],.data-\[state\=visible\]\:fade-in[data-state=visible] {
--tw-enter-opacity:0}

.data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
--tw-exit-scale:.95}

.data-\[state\=open\]\:zoom-in-90[data-state=open] {
--tw-enter-scale:.9}

.data-\[state\=open\]\:zoom-in-95[data-state=open] {
--tw-enter-scale:.95}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end] {
--tw-enter-translate-x:13rem}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start] {
--tw-enter-translate-x:-13rem}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end] {
--tw-exit-translate-x:13rem}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start] {
--tw-exit-translate-x:-13rem}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
--tw-enter-translate-y:-.5rem}

.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
--tw-enter-translate-x:.5rem}

.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
--tw-enter-translate-x:-.5rem}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
--tw-enter-translate-y:.5rem}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed] {
--tw-exit-translate-y:100%}

.data-\[state\=closed\]\:slide-out-to-left[data-state=closed] {
--tw-exit-translate-x:-100%}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
--tw-exit-translate-x:-50%}

.data-\[state\=closed\]\:slide-out-to-right[data-state=closed],.data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed] {
--tw-exit-translate-x:100%}

.data-\[state\=closed\]\:slide-out-to-top[data-state=closed] {
--tw-exit-translate-y:-100%}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
--tw-exit-translate-y:-48%}

.data-\[state\=open\]\:slide-in-from-bottom[data-state=open] {
--tw-enter-translate-y:100%}

.data-\[state\=open\]\:slide-in-from-left[data-state=open] {
--tw-enter-translate-x:-100%}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
--tw-enter-translate-x:-50%}

.data-\[state\=open\]\:slide-in-from-right[data-state=open] {
--tw-enter-translate-x:100%}

.data-\[state\=open\]\:slide-in-from-top[data-state=open] {
--tw-enter-translate-y:-100%}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
--tw-enter-translate-y:-48%}

.data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
--tw-enter-translate-y:-100%}

.data-\[state\=closed\]\:duration-300[data-state=closed] {
animation-duration:.3s}

.data-\[state\=open\]\:duration-500[data-state=open] {
animation-duration:.5s}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction=vertical]:after {
  content:var(--tw-content);
left:0}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction=vertical]:after {
  content:var(--tw-content);
height:.25rem}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction=vertical]:after {
  content:var(--tw-content);
width:100%}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction=vertical]:after {
  content:var(--tw-content);
  --tw-translate-y:-50%;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction=vertical]:after {
  content:var(--tw-content);
  --tw-translate-x:0px;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.data-\[state\=open\]\:hover\:bg-accent:hover[data-state=open],.data-\[state\=open\]\:focus\:bg-accent:focus[data-state=open] {
background-color:hsl(var(--accent))}

.group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:relative {
position:relative}

.group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:z-10 {
z-index:10}

.group[data-state=open] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate:180deg;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:border-ring {
border-color:hsl(var(--ring))}

.group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}

.group\/day[data-focused=true] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
--tw-ring-color:hsl(var(--ring) / .5)}

:is(.dark .dark\:border-destructive) {
border-color:hsl(var(--destructive))}

@media (width>=640px) {
  .sm\:bottom-0 {
  bottom:0}

  .sm\:right-0 {
  right:0}

  .sm\:top-auto {
  top:auto}

  .sm\:max-w-sm {
  max-width:24rem}

  .sm\:flex-row {
  flex-direction:row}

  .sm\:flex-col {
  flex-direction:column}

  .sm\:justify-end {
  justify-content:flex-end}

  .sm\:gap-2 {
  gap:.5rem}

  .sm\:gap-2\.5 {
  gap:.625rem}

  .sm\:space-x-2>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse:0;
    margin-right:calc(.5rem * var(--tw-space-x-reverse));
  margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}

  .sm\:rounded-lg {
  border-radius:var(--radius)}

  .sm\:text-left {
  text-align:left}

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
  --tw-enter-translate-y:100%}

}

@media (width>=768px) {
  .md\:absolute {
  position:absolute}

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
  width:var(--radix-navigation-menu-viewport-width)}

  .md\:w-auto {
  width:auto}

  .md\:max-w-\[420px\] {
  max-width:420px}

  .md\:flex-row {
  flex-direction:row}

  .md\:text-sm {
    font-size:.875rem;
  line-height:1.25rem}

}

.\[\&\+div\]\:text-xs+div {
  font-size:.75rem;
line-height:1rem}

.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius:calc(var(--radius) - 2px);
border-bottom-left-radius:calc(var(--radius) - 2px)}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
padding-right:0}

.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius:calc(var(--radius) - 2px);
border-bottom-right-radius:calc(var(--radius) - 2px)}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y:2px;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.\[\&\>span\]\:line-clamp-1>span {
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  display:-webkit-box;
overflow:hidden}

.\[\&\>span\]\:text-xs>span {
  font-size:.75rem;
line-height:1rem}

.\[\&\>span\]\:opacity-70>span {
opacity:.7}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y:-3px;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.\[\&\>svg\]\:absolute>svg {
position:absolute}

.\[\&\>svg\]\:left-4>svg {
left:1rem}

.\[\&\>svg\]\:top-4>svg {
top:1rem}

.\[\&\>svg\]\:size-3\.5>svg {
  width:.875rem;
height:.875rem}

.\[\&\>svg\]\:size-4>svg {
  width:1rem;
height:1rem}

.\[\&\>svg\]\:h-3\.5>svg {
height:.875rem}

.\[\&\>svg\]\:w-3\.5>svg {
width:.875rem}

.\[\&\>svg\]\:shrink-0>svg {
flex-shrink:0}

.\[\&\>svg\]\:text-destructive>svg {
color:hsl(var(--destructive))}

.\[\&\>svg\]\:text-foreground>svg {
color:hsl(var(--foreground))}

.\[\&\>svg\]\:text-muted-foreground>svg {
color:hsl(var(--muted-foreground))}

.\[\&\>svg\~\*\]\:pl-7>svg~* {
padding-left:1.75rem}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
border-bottom-width:0}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate:90deg;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate:180deg;
transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left:.5rem;
padding-right:.5rem}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top:.375rem;
padding-bottom:.375rem}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size:.75rem;
line-height:1rem}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
font-weight:500}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
color:hsl(var(--muted-foreground))}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group] {
padding-top:0}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left:.5rem;
padding-right:.5rem}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
height:1.25rem}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
width:1.25rem}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
height:3rem}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left:.5rem;
padding-right:.5rem}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top:.75rem;
padding-bottom:.75rem}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
height:1.25rem}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
width:1.25rem}

.\[\&_p\]\:leading-relaxed p {
line-height:1.625}

.\[\&_svg\]\:pointer-events-none svg {
pointer-events:none}

.\[\&_svg\]\:size-4 svg {
  width:1rem;
height:1rem}

.\[\&_svg\]\:shrink-0 svg {
flex-shrink:0}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
border-width:0}

.\[\&_tr\]\:border-b tr {
border-bottom-width:1px}

[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent,[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
background-color:#0000}

.nav {
  z-index:100;
  transition:padding .35s var(--ease);
  padding-top:22px;
  position:fixed;
  top:0;
  left:0;
right:0}

.nav__row {
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
  transition:background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
  background:#070b128c;
  border-radius:999px;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:12px 20px;
display:flex}

.nav--compact {
padding-top:12px}

.nav--compact .nav__row {
  border-color:var(--line-strong);
  background:#070b12d1;
padding:8px 18px}

.nav__brand {
  font-family:var(--font-display);
  letter-spacing:-.01em;
  flex-shrink:0;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:600;
display:inline-flex}

.nav__links {
  align-items:center;
  gap:30px;
  margin:0 auto;
display:flex}

.nav__links a {
  color:var(--ink-dim);
  transition:color .25s var(--ease);
  padding:4px 0;
  font-size:13.5px;
position:relative}

.nav__links a:hover {
color:var(--ink)}

.nav__links a:after {
  content:"";
  background:var(--cyan);
  height:1px;
  transition:right .3s var(--ease);
  position:absolute;
  bottom:0;
  left:0;
right:100%}

.nav__links a:hover:after {
right:0}

.nav__cta {
  border:1px solid var(--line-strong);
  color:var(--ink);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
  border-radius:999px;
  flex-shrink:0;
  align-items:center;
  gap:7px;
  padding:9px 16px;
  font-size:13px;
  font-weight:700;
display:inline-flex}

.nav__cta:hover {
  border-color:var(--pink);
  color:var(--pink-soft);
background:#ff5fa014}

.nav__burger {
  border:1px solid var(--line-strong);
  background:0 0;
  border-radius:50%;
  flex-shrink:0;
  width:34px;
  height:34px;
  display:none;
position:relative}

.nav__burger span,.nav__burger span:before,.nav__burger span:after {
  content:"";
  background:var(--ink);
  height:1.4px;
  transition:transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease);
  position:absolute;
  left:9px;
right:9px}

.nav__burger span {
top:16px}

.nav__burger span:before {
top:-6px}

.nav__burger span:after {
top:6px}

.nav__burger span.is-open {
background:0 0}

.nav__burger span.is-open:before {
  top:0;
transform:rotate(45deg)}

.nav__burger span.is-open:after {
  top:0;
transform:rotate(-45deg)}

.nav__mobile {
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
  z-index:90;
  background:#05070bfa;
  justify-content:center;
  align-items:center;
  display:flex;
  position:fixed;
inset:0}

.nav__mobile.is-open {
  opacity:1;
visibility:visible}

.nav__mobile nav {
  flex-direction:column;
  align-items:center;
  gap:28px;
display:flex}

.nav__mobile a {
  font-family:var(--font-display);
  color:var(--ink-dim);
  opacity:0;
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .25s var(--ease);
  font-size:28px;
transform:translateY(10px)}

.nav__mobile.is-open a {
  opacity:1;
transform:translateY(0)}

.nav__mobile a:hover {
color:var(--pink-soft)}

.nav__mobile-cta {
  border:1px solid var(--line-strong);
  border-radius:999px;
  margin-top:10px;
  padding:10px 20px;
  font-family:var(--font-mono)!important;
  color:var(--cyan)!important;
font-size:13px!important}

@media (width<=860px) {
  .nav__links,.nav__cta {
  display:none}

  .nav__burger {
  display:block}

}

.fishbowl {
  aspect-ratio:420/460;
  --tiltX:0;
  --tiltY:0;
  --hShift:0;
  width:100%;
  max-width:420px;
  margin:0 auto;
position:relative}

.fishbowl__glow {
  filter:blur(30px);
  z-index:-1;
  background:radial-gradient(circle at 50% 55%,#3f82dc59,#0000 65%);
  position:absolute;
inset:-10%}

.fishbowl__svg {
  width:100%;
  height:100%;
  transition:transform .3s var(--ease);
filter:drop-shadow(0 30px 60px #0614328c)}

.fishbowl__wave {
transform-origin:50%}

.fishbowl__wave--back {
animation:9s ease-in-out infinite waveDrift}

.fishbowl__wave--front {
animation:6.5s ease-in-out infinite reverse waveDrift}

@keyframes waveDrift {
  0%,to {
  transform:translate(-14px)translateY(0)}

  50% {
  transform:translate(14px)translateY(4px)}

}

.fishbowl__h {
  transition:transform .4s var(--ease);
  transform-origin:210px 250px;
animation:5.5s ease-in-out infinite hBob}

@keyframes hBob {
  0%,to {
  translate:0}

  50% {
  translate:0 -6px}

}

.fishbowl__bubble {
animation:linear infinite bubbleUp}

.b1 {
animation-duration:6s}

.b2 {
  animation-duration:8s;
animation-delay:1.5s}

.b3 {
  animation-duration:7s;
animation-delay:3s}

@keyframes bubbleUp {
  0% {
    opacity:0;
  transform:translateY(0)}

  10% {
  opacity:.6}

  90% {
  opacity:.3}

  to {
    opacity:0;
  transform:translateY(-220px)}

}

.fishbowl__particles {
  pointer-events:none;
  position:absolute;
inset:0}

.fishbowl__particle {
  animation-name:floatUp;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  display:block;
  position:absolute;
bottom:-10%}

.fishbowl__particle--dot {
  background:var(--cyan);
  opacity:.4;
border-radius:50%}

.fishbowl__particle--symbol {
  color:var(--ink-dim);
  opacity:.28;
font-family:var(--font-mono)}

@keyframes floatUp {
  0% {
    opacity:0;
  transform:translateY(0)translate(0)}

  15% {
  opacity:.5}

  50% {
  transform:translateY(-140px)translate(10px)}

  85% {
  opacity:.35}

  to {
    opacity:0;
  transform:translateY(-280px)translate(-6px)}

}

.fishbowl__ripple {
  pointer-events:none;
  width:8px;
  height:8px;
  animation:fishRipple 1.1s var(--ease) forwards;
  border:1px solid #6fe1ee99;
  border-radius:50%;
  margin-top:-4px;
  margin-left:-4px;
position:absolute}

@keyframes fishRipple {
  0% {
    opacity:.7;
    width:8px;
    height:8px;
    margin-top:-4px;
  margin-left:-4px}

  to {
    opacity:0;
    width:90px;
    height:90px;
    margin-top:-45px;
  margin-left:-45px}

}

.fishbowl--simple .fishbowl__wave,.fishbowl--simple .fishbowl__h {
animation-duration:8s}

@media (prefers-reduced-motion:reduce) {
  .fishbowl__wave,.fishbowl__h,.fishbowl__bubble,.fishbowl__particle {
  animation:none!important}

}

.hero {
  padding:clamp(140px,20vw,190px) 0 90px;
  position:relative;
overflow:hidden}

.hero__grid {
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  align-items:center;
  gap:clamp(30px,5vw,60px);
display:grid}

.hero__label {
  letter-spacing:.14em;
  color:var(--ink-faint);
  margin-bottom:22px;
font-size:12px}

.hero__title {
  color:var(--ink);
  font-size:clamp(38px,6vw,68px);
line-height:1.05}

.hero__title-sub {
  color:var(--ink-dim);
  max-width:15ch;
  margin-top:14px;
  font-size:.52em;
  font-weight:500;
display:block}

.hero__body {
  max-width:46ch;
  color:var(--ink-dim);
  margin-top:26px;
  font-size:16px;
line-height:1.65}

.hero__ctas {
  flex-wrap:wrap;
  gap:14px;
  margin-top:36px;
display:flex}

.hero__status {
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:52px;
display:flex}

.hero__dot {
  background:var(--cyan);
  border-radius:50%;
  width:7px;
  height:7px;
  animation:2.2s ease-in-out infinite pulseDot;
box-shadow:0 0 0 3px #6fe1ee26}

@keyframes pulseDot {
  0%,to {
  opacity:1}

  50% {
  opacity:.35}

}

.hero__status-label {
  letter-spacing:.1em;
  color:var(--ink-faint);
font-size:11px}

.hero__status-value {
  font-family:var(--font-mono);
  color:var(--pink-soft);
  animation:fadeSwap .5s var(--ease);
font-size:13px}

@keyframes fadeSwap {
  0% {
    opacity:0;
  transform:translateY(3px)}

  to {
    opacity:1;
  transform:translateY(0)}

}

.hero__meta {
  color:var(--ink-faint);
  letter-spacing:.08em;
  margin-top:16px;
font-size:10.5px}

.hero__visual {
position:relative}

.hero__caption {
  text-align:center;
  letter-spacing:.1em;
  color:var(--ink-faint);
  margin-top:18px;
font-size:10px}

.hero__scroll {
  left:var(--edge);
  letter-spacing:.14em;
  color:var(--ink-faint);
  align-items:center;
  gap:10px;
  font-size:10px;
  display:flex;
  position:absolute;
bottom:28px}

.hero__scroll-line {
  background:linear-gradient(var(--ink-faint), transparent);
  width:1px;
height:34px}

@media (width<=980px) {
  .hero__grid {
    text-align:left;
  grid-template-columns:1fr}

  .hero__visual {
    order:-1;
    max-width:300px;
  margin:0 auto 8px}

  .hero__scroll {
  display:none}

}

@media (width<=520px) {
  .hero {
  padding-top:120px}

  .hero__ctas {
    flex-direction:column;
  align-items:stretch}

  .hero__ctas .btn {
  justify-content:center}

}

.process__flow {
  align-items:stretch;
  gap:0;
  margin-top:56px;
  padding-bottom:6px;
  display:flex;
overflow-x:auto}

.process__item {
  flex-shrink:0;
  align-items:center;
display:flex}

.process__step {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  text-align:left;
  width:210px;
  min-height:118px;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  flex-direction:column;
  gap:10px;
  padding:22px;
  display:flex;
position:relative}

.process__step:hover,.process__step.is-active {
  border-color:var(--cyan);
  background:var(--surface-strong);
transform:translateY(-3px)}

.process__num {
  color:var(--ink-faint);
  letter-spacing:.08em;
font-size:11px}

.process__step.is-active .process__num {
color:var(--cyan)}

.process__label {
  font-family:var(--font-display);
  color:var(--ink);
font-size:19px}

.process__detail {
  color:var(--ink-dim);
  opacity:0;
  max-height:0;
  transition:max-height .35s var(--ease), opacity .3s var(--ease);
  font-size:12.5px;
  line-height:1.5;
overflow:hidden}

.process__detail.is-shown {
  opacity:1;
max-height:80px}

.process__arrow {
  background:var(--line-strong);
  flex-shrink:0;
  width:34px;
  height:1px;
  margin:0 -1px;
position:relative}

.process__arrow:after {
  content:"";
  border-top:1px solid var(--line-strong);
  border-right:1px solid var(--line-strong);
  width:6px;
  height:6px;
  position:absolute;
  top:50%;
  right:0;
transform:translateY(-50%)rotate(45deg)}

@media (width<=900px) {
  .process__flow {
    flex-direction:column;
  overflow-x:visible}

  .process__item {
    flex-direction:column;
  align-items:stretch}

  .process__step {
  width:100%}

  .process__arrow {
    width:1px;
    height:26px;
  margin:4px 0 4px 26px}

  .process__arrow:after {
    inset:auto auto 0 50%;
  transform:translate(-50%)rotate(135deg)}

}

.work__list {
  flex-direction:column;
  gap:clamp(56px,8vw,96px);
display:flex}

.work__item {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(28px,5vw,64px);
display:grid}

.work__item.is-reverse {
direction:rtl}

.work__item.is-reverse>* {
direction:ltr}

.work__visual-col {
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:var(--surface);
  aspect-ratio:400/260;
  position:relative;
overflow:hidden}

.work__meta-row {
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
display:flex}

.work__index {
  color:var(--ink-faint);
  letter-spacing:.1em;
font-size:11px}

.work__status--archived {
  border-color:var(--ink-faint);
color:var(--ink-faint)}

.work__status--offline {
  border-color:var(--amber);
color:var(--amber)}

.work__status--active {
  border-color:var(--cyan);
color:var(--cyan)}

.work__title {
  margin-bottom:16px;
font-size:clamp(28px,3.6vw,42px)}

.work__desc {
  color:var(--ink-dim);
  max-width:46ch;
  font-size:15.5px;
line-height:1.65}

.work__detail {
  color:var(--ink-faint);
  max-width:46ch;
  margin-top:10px;
  font-size:14px;
line-height:1.6}

.work__submeta {
  color:var(--ink-faint);
  letter-spacing:.06em;
  margin-top:14px;
font-size:11px}

.work__achievement {
  color:var(--pink-soft);
  align-items:flex-start;
  gap:9px;
  max-width:40ch;
  margin-top:22px;
  font-size:13.5px;
  line-height:1.5;
display:flex}

.work__achievement-icon {
  margin-top:4px;
font-size:9px}

.work__tags {
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
display:flex}

.work__tags li {
  letter-spacing:.08em;
  color:var(--ink-faint);
  border:1px solid var(--line);
  border-radius:4px;
  padding:5px 9px;
font-size:10px}

.work__cta {
  color:var(--ink);
  border-bottom:1px solid var(--line-strong);
  transition:color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
  align-items:center;
  gap:8px;
  margin-top:30px;
  padding-bottom:4px;
  font-size:14px;
  font-weight:700;
display:inline-flex}

.work__cta:hover {
  color:var(--cyan);
  border-color:var(--cyan);
gap:12px}

@media (width<=860px) {
  .work__item,.work__item.is-reverse {
    direction:ltr;
  grid-template-columns:1fr}

}

.pv {
  position:absolute;
inset:0}

.pv__svg {
  width:100%;
  height:100%;
display:block}

.pv--skyora {
background:radial-gradient(at 70% 40%,#0f1f42,#04070f)}

.pv__orbit {
  transform-origin:270px 110px;
animation:26s linear infinite orbitSpin}

@keyframes orbitSpin {
  to {
  transform:rotate(360deg)}

}

.pv__satellite {
  transform-origin:270px 110px;
animation:7s linear infinite satelliteOrbit}

@keyframes satelliteOrbit {
  to {
  transform:rotate(360deg)}

}

.work__item--skyora .work__visual-col:hover .pv__svg {
transform:scale(1.04)}

.work__item--skyora .pv__svg {
transition:transform .5s var(--ease)}

.pv--clay {
background:linear-gradient(#6fb8e0 0%,#3f7fb0 55%,#2a5a86 100%)}

.pv__clay-hill {
  transition:transform .3s var(--ease);
transform-origin:bottom}

.work__item--clayway .work__visual-col:hover .pv__clay-hill {
transform:scaleY(.94)scaleX(1.03)}

.work__item--clayway .work__visual-col:hover .pv__clay-hill--2 {
transform:scaleY(.9)scaleX(1.05)}

.work__item--clayway .work__visual-col:hover .pv__clay-hill--3 {
transform:scaleY(.92)scaleX(1.04)}

.pv__clay-player {
  transform-origin:50%;
animation:1.6s ease-in-out infinite clayBounce}

@keyframes clayBounce {
  0%,to {
  transform:translateY(0)scaleY(1)}

  50% {
  transform:translateY(-9px)scaleY(1.08)}

}

.pv--bridge {
background:linear-gradient(#0b1420,#08101c)}

.pv__ripple-line {
animation:6s ease-in-out infinite rippleShift}

.pv__ripple-line--2 {
  animation-duration:8s;
animation-direction:reverse}

@keyframes rippleShift {
  0%,to {
  transform:translate(0)}

  50% {
  transform:translate(18px)}

}

.pv__boat {
  animation:9s linear infinite boatDrift;
transform:translate(40px,150px)}

.pv__boat--2 {
  animation:12s linear infinite boatDrift2;
transform:translateY(175px)}

@keyframes boatDrift {
  0% {
  transform:translate(-20px,150px)rotate(-2deg)}

  50% {
  transform:translate(200px,145px)rotate(2deg)}

  to {
  transform:translate(420px,150px)rotate(-2deg)}

}

@keyframes boatDrift2 {
  0% {
  transform:translate(-20px,178px)rotate(2deg)}

  50% {
  transform:translate(220px,182px)rotate(-2deg)}

  to {
  transform:translate(420px,178px)rotate(2deg)}

}

.pv--studysync {
  background:linear-gradient(160deg,#0d1522,#0a0f18);
  justify-content:center;
  align-items:center;
display:flex}

.pv__ui-frame {
  border:1px solid var(--line-strong);
  background:#ffffff05;
  border-radius:8px;
  flex-direction:column;
  width:84%;
  height:78%;
  display:flex;
overflow:hidden}

.pv__ui-top {
  border-bottom:1px solid var(--line);
  gap:5px;
  padding:9px 12px;
display:flex}

.pv__ui-top span {
  background:var(--line-strong);
  border-radius:50%;
  width:7px;
height:7px}

.pv__ui-body {
  flex:1;
  grid-template-columns:1fr 1.2fr;
  gap:10px;
  padding:14px;
display:grid}

.pv__ui-col {
  flex-direction:column;
  gap:9px;
display:flex}

.pv__ui-row {
  background:var(--line-strong);
  height:9px;
  transition:width .4s var(--ease);
border-radius:3px}

.w-70 {
width:70%}

.w-40 {
width:40%}

.w-55 {
width:55%}

.pv__ui-col--chat {
gap:10px}

.pv__ui-bubble {
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:8px;
  max-width:90%;
  padding:8px 10px;
font-size:10px}

.pv__ui-bubble--reply {
  border-color:var(--cyan);
  color:var(--cyan);
align-self:flex-end}

.work__item--studysync .work__visual-col:hover .w-70 {
width:55%}

.work__item--studysync .work__visual-col:hover .w-40 {
width:65%}

.work__item--studysync .work__visual-col:hover .w-55 {
width:35%}

.pv--sjml {
  background:repeating-linear-gradient(135deg,#0d1420,#0d1420 12px,#0a1119 12px 24px);
  justify-content:center;
  align-items:center;
display:flex}

.pv__code-block {
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:0 20px;
  font-size:12px;
display:flex}

.pv__code-tag {
color:var(--ink-faint)}

.pv__code-attr {
color:var(--cyan)}

.pv__code-str {
color:var(--pink-soft)}

.pv__code-line--out {
  color:var(--ink-faint);
  opacity:.6;
transition:opacity .3s var(--ease), color .3s var(--ease)}

.pv__code-arrow {
color:var(--ink-faint)}

.work__item--sjml .work__visual-col:hover .pv__code-line--out {
  opacity:1;
color:var(--cyan)}

.work__item--sjml .work__visual-col:hover .pv__code-attr,.work__item--sjml .work__visual-col:hover .pv__code-str {
filter:brightness(1.3)}

.pv--chess {
  background:#0a0f18;
  justify-content:center;
  align-items:center;
display:flex}

.pv__board {
  aspect-ratio:1;
  border:1px solid var(--line-strong);
  grid-template-columns:repeat(8,1fr);
  width:68%;
display:grid}

.pv__sq {
  transition:background .5s var(--ease);
background:#ffffff05}

.pv__sq--dark {
background:#6fe1ee0f}

.work__item--sjtrainer .work__visual-col:hover .pv__sq--dark {
background:#ff5fa01f}

.pv--sneak {
  background:#060a10;
  align-items:center;
  padding:0 24px;
display:flex}

.pv__terminal {
  color:var(--cyan);
  opacity:.85;
  font-size:12px;
line-height:2}

.pv__terminal p {
margin:0}

.pv__terminal-cursor:after {
content:""}

.work__item--sneak .work__visual-col:hover .pv__terminal {
opacity:1}

@media (prefers-reduced-motion:reduce) {
  .pv__orbit,.pv__satellite,.pv__clay-player,.pv__boat,.pv__boat--2,.pv__ripple-line {
  animation:none!important}

}

.archive-teaser {
  border-top:1px solid var(--line);
  padding:clamp(50px,8vw,84px) 0;
position:relative}

.archive-teaser:before {
  content:"";
  background:repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line) 39px, var(--line) 40px);
  opacity:.4;
  pointer-events:none;
  position:absolute;
  inset:0;
mask-image:linear-gradient(#0000,#000 40% 60%,#0000)}

.archive-teaser__inner {
  text-align:center;
  flex-direction:column;
  align-items:center;
  gap:16px;
  max-width:620px;
  margin:0 auto;
display:flex}

.archive-teaser__eyebrow {
  color:var(--ink-faint);
  letter-spacing:.12em;
font-size:11px}

.archive-teaser__title {
  font-family:var(--font-display);
  color:var(--ink);
font-size:clamp(24px,3.4vw,36px)}

.archive-teaser__body {
  color:var(--ink-dim);
  max-width:48ch;
  font-size:15px;
line-height:1.65}

.archive-teaser .btn {
margin-top:10px}

.lab__wall {
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:150px;
  gap:14px;
display:grid}

.lab__card {
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:var(--surface);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  flex-direction:column;
  justify-content:space-between;
  padding:18px;
  display:flex;
  position:relative;
overflow:hidden}

.lab__card:hover,.lab__card:focus-visible {
  border-color:var(--cyan);
  background:var(--surface-strong);
transform:translateY(-3px)}

.lab__card:before {
  content:"";
  opacity:0;
  transition:opacity .3s var(--ease);
  background:radial-gradient(circle at 85% 15%,#ff5fa014,#0000 60%);
  position:absolute;
inset:0}

.lab__card:hover:before {
opacity:1}

.lab__card--sm {
grid-area:span 1/span 2}

.lab__card--md {
grid-area:span 1/span 3}

.lab__card--lg {
grid-area:span 2/span 3}

.lab__card-top {
  justify-content:space-between;
  align-items:center;
display:flex}

.lab__num {
  color:var(--ink-faint);
  letter-spacing:.08em;
font-size:10.5px}

.lab__status {
  letter-spacing:.08em;
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:3px 7px;
font-size:9px}

.lab__status.is-active {
  color:var(--cyan);
border-color:var(--cyan)}

.lab__status.is-archived {
color:var(--ink-faint)}

.lab__status.is-prototype {
  color:var(--pink-soft);
border-color:var(--pink-soft)}

.lab__status.is-paused {
  color:var(--amber);
border-color:var(--amber)}

.lab__title {
  font-size:17px;
  font-family:var(--font-display);
  color:var(--ink);
margin-top:10px}

.lab__card--lg .lab__title {
font-size:22px}

.lab__meta {
  color:var(--ink-faint);
  letter-spacing:.04em;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-top:10px;
  font-size:10px;
display:flex}

.lab__hint {
  color:var(--ink-faint);
  opacity:0;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  font-size:10px;
transform:translateY(4px)}

.lab__card:hover .lab__hint,.lab__card:focus-visible .lab__hint {
  opacity:.7;
transform:translateY(0)}

@media (width<=900px) {
  .lab__wall {
    grid-template-columns:repeat(2,1fr);
  grid-auto-rows:140px}

  .lab__card--sm,.lab__card--md,.lab__card--lg {
  grid-area:span 1/span 2}

  .lab__card--lg {
  grid-row:span 1}

}

@media (width<=520px) {
  .lab__wall {
  grid-template-columns:1fr}

  .lab__card--sm,.lab__card--md,.lab__card--lg {
  grid-column:span 1}

}

.about__intro {
  max-width:62ch;
  color:var(--ink-dim);
  flex-direction:column;
  gap:16px;
  margin-bottom:clamp(50px,8vw,84px);
  font-size:17px;
  line-height:1.65;
display:flex}

.about__intro p:first-child {
  color:var(--ink);
  font-size:20px;
  font-family:var(--font-display);
font-weight:500}

.about__timeline-track {
  border-top:1px solid var(--line);
  justify-content:space-between;
  padding-top:24px;
  display:flex;
position:relative}

.about__timeline-fill {
  background:var(--cyan);
  height:1px;
  transition:width .4s var(--ease);
  position:absolute;
  top:-1px;
left:0}

.about__year {
  color:var(--ink-faint);
  background:0 0;
  border:none;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:0;
  font-size:12.5px;
display:flex}

.about__year-dot {
  border:1px solid var(--line-strong);
  background:var(--bg);
  width:9px;
  height:9px;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
border-radius:50%}

.about__year:hover .about__year-dot {
border-color:var(--cyan)}

.about__year.is-active .about__year-dot {
  background:var(--pink);
  border-color:var(--pink);
transform:scale(1.3)}

.about__year.is-active {
color:var(--ink)}

.about__year-detail {
  min-height:110px;
margin-top:40px}

.about__year-detail h3 {
  color:var(--ink);
  margin-bottom:12px;
font-size:clamp(24px,3vw,32px)}

.about__year-detail p {
  color:var(--ink-dim);
  max-width:50ch;
font-size:15.5px}

@media (width<=700px) {
  .about__timeline-track {
    gap:26px;
  overflow-x:auto}

  .about__year {
  flex-shrink:0}

}

.solo {
background:var(--bg-1)}

.solo__inner {
  flex-direction:column;
  gap:48px;
display:flex}

.solo__statement {
  font-family:var(--font-display);
  color:var(--ink);
  max-width:18ch;
  font-size:clamp(28px,5vw,50px);
line-height:1.28}

.solo__statement em {
  color:var(--pink-soft);
font-style:normal}

.solo__roles {
  flex-wrap:wrap;
  gap:12px 10px;
display:flex}

.solo__roles li {
  color:var(--ink-dim);
  border:1px solid var(--line);
  transition:border-color .3s var(--ease), color .3s var(--ease);
  border-radius:999px;
  align-items:center;
  gap:8px;
  padding:8px 16px 8px 10px;
  font-size:13.5px;
display:inline-flex}

.solo__roles li:hover {
  border-color:var(--cyan);
color:var(--ink)}

.solo__roles .mono {
  color:var(--ink-faint);
font-size:10px}

.principles__grid {
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  grid-template-columns:repeat(4,1fr);
  margin-top:40px;
display:grid}

.principles__item {
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
  padding:32px 26px;
position:relative}

.principles__item:hover {
background:var(--surface)}

.principles__num {
  color:var(--ink-faint);
font-size:11px}

.principles__title {
  color:var(--ink);
  margin:16px 0 10px;
font-size:20px}

.principles__body {
  color:var(--ink-dim);
  font-size:13.5px;
line-height:1.55}

.principles__line {
  color:var(--line-strong);
  width:60px;
  height:14px;
  transition:color .3s var(--ease);
margin-top:20px}

.principles__item:hover .principles__line {
color:var(--pink)}

@media (width<=860px) {
  .principles__grid {
  grid-template-columns:repeat(2,1fr)}

}

@media (width<=520px) {
  .principles__grid {
  grid-template-columns:1fr}

}

.achievements__list {
  border-top:1px solid var(--line);
margin-top:44px}

.achievements__row {
  border-bottom:1px solid var(--line);
  grid-template-columns:90px 1fr;
  align-items:baseline;
  gap:24px;
  padding:26px 0;
display:grid}

.achievements__year {
  color:var(--ink-faint);
font-size:13px}

.achievements__org {
  color:var(--ink-dim);
  margin-bottom:6px;
font-size:13.5px}

.achievements__result {
  font-family:var(--font-display);
  color:var(--ink);
font-size:19px}

.achievements__badge {
color:var(--pink-soft)}

@media (width<=560px) {
  .achievements__row {
    grid-template-columns:1fr;
  gap:6px}

}

.journal__list {
  border-top:1px solid var(--line);
  flex-direction:column;
display:flex}

.journal__item {
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), padding-left .3s var(--ease);
  grid-template-columns:80px 1fr 24px;
  align-items:center;
  gap:20px;
  padding:28px 4px;
display:grid}

.journal__item:hover {
  background:var(--surface);
padding-left:14px}

.journal__date {
  color:var(--ink-faint);
font-size:12px}

.journal__tag {
margin-bottom:8px}

.journal__title {
  font-family:var(--font-display);
  color:var(--ink);
  margin-bottom:6px;
font-size:19px}

.journal__excerpt {
  color:var(--ink-dim);
  max-width:62ch;
  font-size:13.5px;
line-height:1.55}

.journal__arrow {
  color:var(--ink-faint);
  transition:transform .3s var(--ease), color .3s var(--ease);
justify-self:end}

.journal__item:hover .journal__arrow {
  color:var(--cyan);
transform:translate(4px)}

@media (width<=620px) {
  .journal__item {
    grid-template-columns:1fr;
  gap:8px}

  .journal__arrow {
  display:none}

}

.contact {
background:var(--bg-1)}

.contact__inner {
  grid-template-columns:220px 1fr;
  gap:40px;
display:grid}

.contact__aside {
  flex-direction:column;
  gap:14px;
display:flex}

.contact__coords {
  color:var(--ink-faint);
  letter-spacing:.06em;
font-size:10.5px}

.contact__title {
  color:var(--ink);
  max-width:14ch;
font-size:clamp(34px,5.5vw,62px)}

.contact__body {
  max-width:52ch;
  color:var(--ink-dim);
  margin-top:22px;
  font-size:17px;
line-height:1.65}

.contact__ctas {
  flex-wrap:wrap;
  gap:14px;
  margin-top:40px;
display:flex}

@media (width<=700px) {
  .contact__inner {
    grid-template-columns:1fr;
  gap:24px}

  .contact__ctas {
    flex-direction:column;
  align-items:stretch}

  .contact__ctas .btn {
  justify-content:center}

}

.footer {
  border-top:1px solid var(--line);
padding:64px 0 32px}

.footer__top {
  flex-wrap:wrap;
  justify-content:space-between;
  gap:40px;
  margin-bottom:36px;
display:flex}

.footer__logo {
  font-family:var(--font-display);
  color:var(--ink);
font-size:22px}

.footer__statement {
  color:var(--ink-dim);
  max-width:30ch;
  margin-top:12px;
font-size:14px}

.footer__hashtag {
  color:var(--pink-soft);
  letter-spacing:.06em;
  margin-top:10px;
font-size:11px}

.footer__links {
  flex-wrap:wrap;
  align-content:flex-start;
  gap:22px;
display:flex}

.footer__links a {
  color:var(--ink-dim);
  transition:color .25s var(--ease);
font-size:13.5px}

.footer__links a:hover {
color:var(--cyan)}

.footer__bottom {
  color:var(--ink-faint);
  letter-spacing:.04em;
  flex-wrap:wrap;
  gap:6px 22px;
  margin-top:24px;
  font-size:10.5px;
display:flex}

.footer__built {
  color:var(--ink-faint);
  margin-top:30px;
font-size:10.5px}