*, ::before, ::after{--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:rgb(59 130 246 / 0.5);--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::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:rgb(59 130 246 / 0.5);--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-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,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0px}.inset-x-0{left:0px;right:0px}.bottom-0{bottom:0px}.bottom-2{bottom:0.5rem}.bottom-\[24\%\]{bottom:24%}.left-1\/2{left:50%}.left-4{left:1rem}.right-2{right:0.5rem}.right-4{right:1rem}.top-0{top:0px}.top-1\/2{top:50%}.top-4{top:1rem}.z-10{z-index:10}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[130\]{z-index:130}.order-1{order:1}.order-2{order:2}.mx-auto{margin-left:auto;margin-right:auto}.mx-2{margin-left:0.5rem;margin-right:0.5rem}.mb-4{margin-bottom:1rem}.mt-1{margin-top:0.25rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:0.5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.ml-auto{margin-left:auto}.mt-1\.5{margin-top:0.375rem}.mt-16{margin-top:4rem}.mt-2\.5{margin-top:0.625rem}.mt-20{margin-top:5rem}.mt-10{margin-top:2.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-\[3\/2\]{aspect-ratio:3/2}.aspect-square{aspect-ratio:1 / 1}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-4{height:1rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[240px\]{height:240px}.h-full{height:100%}.h-2\.5{height:0.625rem}.max-h-64{max-height:16rem}.max-h-full{max-height:100%}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-14{width:3.5rem}.w-2\.5{width:0.625rem}.w-36{width:9rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[68\%\]{width:68%}.w-auto{width:auto}.w-full{width:100%}.w-\[300px\]{width:300px}.w-\[70\%\]{width:70%}.min-w-0{min-width:0px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\[1240px\]{max-width:1240px}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-3xl{max-width:48rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.animate-\[fadeSlideUp_0\.7s_ease_0\.15s_both\]{animation:fadeSlideUp 0.7s ease 0.15s both}.animate-\[fadeSlideUp_0\.8s_ease_0\.3s_both\]{animation:fadeSlideUp 0.8s ease 0.3s both}.animate-\[fadeSlideUp_0\.8s_ease_0\.45s_both\]{animation:fadeSlideUp 0.8s ease 0.45s both}.animate-\[fadeSlideUp_0\.8s_ease_0\.55s_both\]{animation:fadeSlideUp 0.8s ease 0.55s both}.animate-\[fadeSlideUp_0\.7s_ease_0\.05s_both\]{animation:fadeSlideUp 0.7s ease 0.05s both}.cursor-grab{cursor:grab}.cursor-zoom-in{cursor:zoom-in}.touch-none{touch-action:none}.touch-pan-y{--tw-pan-y:pan-y;touch-action:var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)}.select-none{-webkit-user-select:none;user-select:none}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-start{scroll-snap-align:start}.scroll-mt-20{scroll-margin-top:5rem}.scroll-mt-24{scroll-margin-top:6rem}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.gap-1\.5{gap:0.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.gap-2\.5{gap:0.625rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-8{gap:2rem}.gap-x-4{column-gap:1rem}.gap-x-6{column-gap:1.5rem}.gap-x-8{column-gap:2rem}.gap-y-1{row-gap:0.25rem}.gap-y-10{row-gap:2.5rem}.gap-y-14{row-gap:3.5rem}.gap-y-8{row-gap:2rem}.space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))}.space-y-20 > :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))}.divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-\[var\(--line\)\] > :not([hidden]) ~ :not([hidden]){border-color:var(--line)}.justify-self-center{justify-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-clip{overflow-x:clip}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:0.25rem}.rounded-2xl{border-radius:1rem}.rounded-\[2px\]{border-radius:2px}.rounded-\[3px\]{border-radius:3px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[var\(--line\)\]{border-color:var(--line)}.border-white\/15{border-color:rgb(255 255 255 / 0.15)}.border-white\/20{border-color:rgb(255 255 255 / 0.2)}.border-white\/25{border-color:rgb(255 255 255 / 0.25)}.border-\[var\(--aqua\)\]{border-color:var(--aqua)}.border-transparent{border-color:transparent}.bg-\[var\(--aqua\)\]{background-color:var(--aqua)}.bg-\[var\(--aqua-2\)\]{background-color:var(--aqua-2)}.bg-\[var\(--ink\)\]{background-color:var(--ink)}.bg-\[var\(--paper\)\]{background-color:var(--paper)}.bg-\[var\(--paper-2\)\]{background-color:var(--paper-2)}.bg-\[var\(--paper-3\)\]{background-color:var(--paper-3)}.bg-black\/65{background-color:rgb(0 0 0 / 0.65)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}.bg-white\/85{background-color:rgb(255 255 255 / 0.85)}.bg-white\/90{background-color:rgb(255 255 255 / 0.9)}.bg-white\/45{background-color:rgb(255 255 255 / 0.45)}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-1{padding:0.25rem}.p-1\.5{padding:0.375rem}.p-3{padding:0.75rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-4{padding:1rem}.px-2\.5{padding-left:0.625rem;padding-right:0.625rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-3\.5{padding-left:0.875rem;padding-right:0.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-9{padding-top:2.25rem;padding-bottom:2.25rem}.px-1{padding-left:0.25rem;padding-right:0.25rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pr-1{padding-right:0.25rem}.pt-10{padding-top:2.5rem}.pt-5{padding-top:1.25rem}.pb-3{padding-bottom:0.75rem}.text-left{text-align:left}.text-center{text-align:center}.font-geist{font-family:Geist, sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[9px\]{font-size:9px}.text-\[clamp\(24px\2c 3\.2vw\2c 38px\)\]{font-size:clamp(24px,3.2vw,38px)}.text-\[clamp\(24px\2c 3\.4vw\2c 36px\)\]{font-size:clamp(24px,3.4vw,36px)}.text-\[clamp\(28px\2c 4vw\2c 44px\)\]{font-size:clamp(28px,4vw,44px)}.text-\[clamp\(30px\2c 4\.6vw\2c 52px\)\]{font-size:clamp(30px,4.6vw,52px)}.text-\[clamp\(30px\2c 5vw\2c 54px\)\]{font-size:clamp(30px,5vw,54px)}.text-\[clamp\(40px\2c 8\.2vw\2c 88px\)\]{font-size:clamp(40px,8.2vw,88px)}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[0\.98\]{line-height:0.98}.leading-\[1\.02\]{line-height:1.02}.leading-\[1\.04\]{line-height:1.04}.leading-\[1\.06\]{line-height:1.06}.leading-\[1\.08\]{line-height:1.08}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[-0\.025em\]{letter-spacing:-0.025em}.tracking-\[0\.16em\]{letter-spacing:0.16em}.tracking-\[0\.18em\]{letter-spacing:0.18em}.tracking-\[0\.24em\]{letter-spacing:0.24em}.tracking-\[0\.2em\]{letter-spacing:0.2em}.tracking-\[-0\.02em\]{letter-spacing:-0.02em}.text-\[var\(--aqua\)\]{color:var(--aqua)}.text-\[var\(--ink\)\]{color:var(--ink)}.text-\[var\(--ink-2\)\]{color:var(--ink-2)}.text-\[var\(--ink-3\)\]{color:var(--ink-3)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/45{color:rgb(255 255 255 / 0.45)}.text-white\/70{color:rgb(255 255 255 / 0.7)}.text-white\/80{color:rgb(255 255 255 / 0.8)}.text-white\/40{color:rgb(255 255 255 / 0.4)}.text-white\/55{color:rgb(255 255 255 / 0.55)}.text-white\/65{color:rgb(255 255 255 / 0.65)}.text-\[var\(--coral\)\]{color:var(--coral)}.text-white\/85{color:rgb(255 255 255 / 0.85)}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.decoration-1{text-decoration-thickness:1px}.underline-offset-2{text-underline-offset:2px}.placeholder-white\/30::placeholder{color:rgb(255 255 255 / 0.3)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--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-\[0_20px_50px_-30px_rgba\(0\2c 0\2c 0\2c 0\.9\)\]{--tw-shadow:0 20px 50px -30px rgba(0,0,0,0.9);--tw-shadow-colored:0 20px 50px -30px 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 rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--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-\[0_10px_24px_-14px_rgba\(0\2c 0\2c 0\2c 0\.85\)\]{--tw-shadow:0 10px 24px -14px rgba(0,0,0,0.85);--tw-shadow-colored:0 10px 24px -14px 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-\[var\(--shadow-prod\)\]{--tw-shadow-color:var(--shadow-prod);--tw-shadow:var(--tw-shadow-colored)}.shadow-\[var\(--shadow-lift\)\]{--tw-shadow-color:var(--shadow-lift);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--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)}.ring-inset{--tw-ring-inset:inset}.ring-white\/10{--tw-ring-color:rgb(255 255 255 / 0.1)}.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-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\:z-10:hover{z-index:10}.hover\:-translate-y-1:hover{--tw-translate-y:-0.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))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;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\:scale-\[1\.03\]:hover{--tw-scale-x:1.03;--tw-scale-y:1.03;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\:scale-\[1\.04\]:hover{--tw-scale-x:1.04;--tw-scale-y:1.04;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\:scale-\[1\.7\]:hover{--tw-scale-x:1.7;--tw-scale-y:1.7;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\:border-\[var\(--ink\)\]:hover{border-color:var(--ink)}.hover\:border-\[var\(--ink-3\)\]:hover{border-color:var(--ink-3)}.hover\:border-white:hover{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.hover\:border-white\/50:hover{border-color:rgb(255 255 255 / 0.5)}.hover\:bg-\[var\(--ink\)\]:hover{background-color:var(--ink)}.hover\:text-\[var\(--ink\)\]:hover{color:var(--ink)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:text-white\/70:hover{color:rgb(255 255 255 / 0.7)}.hover\:shadow-\[var\(--shadow-lift\)\]:hover{--tw-shadow-color:var(--shadow-lift);--tw-shadow:var(--tw-shadow-colored)}.focus\:z-10:focus{z-index:10}.focus\:scale-\[1\.7\]:focus{--tw-scale-x:1.7;--tw-scale-y:1.7;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))}.focus\:border-\[var\(--aqua\)\]:focus{border-color:var(--aqua)}.focus\:opacity-100:focus{opacity:1}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\:translate-y-0:active{--tw-translate-y: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))}.active\:cursor-grabbing:active{cursor:grabbing}.disabled\:opacity-40:disabled{opacity:0.4}.disabled\:opacity-50:disabled{opacity:0.5}.group:hover .group-hover\:scale-\[1\.05\]{--tw-scale-x:1.05;--tw-scale-y:1.05;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:hover .group-hover\:scale-\[1\.03\]{--tw-scale-x:1.03;--tw-scale-y:1.03;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:hover .group-hover\:scale-\[1\.04\]{--tw-scale-x:1.04;--tw-scale-y:1.04;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:hover .group-hover\:text-\[var\(--aqua\)\]{color:var(--aqua)}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\:ring-white\/60{--tw-ring-color:rgb(255 255 255 / 0.6)}@media (min-width: 640px){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:h-\[52px\]{height:52px}.sm\:w-44{width:11rem}.sm\:w-\[360px\]{width:360px}.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.sm\:grid-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-end{align-items:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-1\.5{gap:0.375rem}.sm\:gap-6{gap:1.5rem}.sm\:p-10{padding:2.5rem}.sm\:p-8{padding:2rem}.sm\:p-7{padding:1.75rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}}@media (min-width: 768px){.md\:mt-10{margin-top:2.5rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-\[1fr_1fr\]{grid-template-columns:1fr 1fr}.md\:grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.md\:items-center{align-items:center}.md\:gap-12{gap:3rem}.md\:gap-16{gap:4rem}.md\:space-y-28 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(7rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(7rem * var(--tw-space-y-reverse))}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-28{padding-top:7rem;padding-bottom:7rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:pt-16{padding-top:4rem}}@media (min-width: 1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.lg\:grid-cols-\[1\.15fr_1fr\]{grid-template-columns:1.15fr 1fr}.lg\:grid-cols-\[15rem_1fr\]{grid-template-columns:15rem 1fr}.lg\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.lg\:grid-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.lg\:items-end{align-items:flex-end}.lg\:items-center{align-items:center}.lg\:gap-16{gap:4rem}.lg\:gap-14{gap:3.5rem}.lg\:gap-8{gap:2rem}}

/* src/index.css */




/* ---------------------------------------------------------------- tokens ---
   The site went LIGHT. The game is bright pastel water and the merch is a
   toy line; a near-black page fought both, and every product had to supply its
   own light. Paper ground, ink type, the game's own aqua as the single accent.
   Neutrals are warmed a touch toward the cardboard the boxes are printed on. */
:root {
  --paper: #f7f6f2;
  --paper-2: #ffffff;
  --paper-3: #eeece5;
  --ink: #14201f;
  --ink-2: #4d5f5e;
  --ink-3: #8a9a99;
  --line: #e0ddd3;
  --line-2: #ecead3;
  --aqua: #0e7f8c;
  --aqua-2: #d8f0f1;
  --coral: #d2622f;
  --shadow-lift: 0 18px 40px -22px rgba(20, 40, 45, 0.45);
  --shadow-prod: 0 30px 60px -28px rgba(20, 40, 45, 0.55);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--paper);
  color: var(--ink);
}

/* Fredoka is the face on the printed boxes, so it is the display face here
   too: the site and the carton are the same brand or neither is. Geist keeps
   the reading text neutral underneath it. */
.font-display {
  font-family: Fredoka, 'Geist', ui-rounded, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* The hero's staggered entrance. */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-reveal. An IntersectionObserver in App.jsx adds .is-in once; sections
   never animate back out, so scrolling up again is not a light show. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ hero ---
   The video is a PANEL, not a background: rounded, inset, sitting on the paper
   with a shadow, so it reads as the product still it is. The old full-bleed
   treatment needed a scrim over the tank, which meant veiling the one thing
   the fold exists to show. */
.hero-panel {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-prod);
  background: #cfe9f3;
}

/* ----------------------------------------------------------------- boxes ---
   Two printed faces plus perspective is a real carton on the page. The side
   panel is hinged at the shared edge and swung back; --depth is its width as a
   fraction of the front, so it matches what build_boxes.py rendered. */
.carton {
  perspective: 1500px;
  perspective-origin: 50% 42%;
}
.carton-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* Enough tilt to show the lid. At 9deg the top was a hairline and the
     0.86-deep side then read as a second panel hinged to the front, which is
     a folded card, not a carton. */
  transform: rotateX(14deg) rotateY(-27deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.carton:hover .carton-body,
.carton:focus-within .carton-body {
  transform: rotateX(10deg) rotateY(-15deg) translateY(-8px);
}
.carton img {
  box-shadow: 0 0 0 1px rgba(20, 40, 45, 0.06);
}
.carton-shadow {
  margin-top: 6px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(20, 40, 45, 0.3),
    rgba(20, 40, 45, 0)
  );
  filter: blur(6px);
}

.plush {
  filter: drop-shadow(0 14px 14px rgba(20, 45, 50, 0.22));
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.plush-card:hover .plush {
  transform: translateY(-8px) rotate(-2deg);
}

/* --------------------------------------------------------------- the tank ---
   An acrylic display: bright edges where the panels catch light, a light bar
   above, and the water graded from the surface down. */
.lightbox {
  background: rgba(14, 22, 24, 0.9);
  backdrop-filter: blur(8px);
  animation: lightboxIn 0.22s ease both;
}
@keyframes lightboxIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------- library ---
   One atlas, 505 fish. Every cell is the same image at the same size and only
   background-position differs, so the whole library is a single decode. */
.dex-cell {
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------- marquee ---
   The track holds its row TWICE, so translating exactly -50% lands on a
   pixel-identical copy and the loop has no seam. --dur is set per row: a longer
   row has further to travel to read as the same speed. */
@keyframes marqueeLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeLeft var(--dur, 70s) linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  /* Everything decorative snaps to its end state, EXCEPT the marquees, which
     are infinite: a 0.001ms duration there spins them into a blur, the exact
     opposite of what was asked for. Those get paused instead. */
  *:not(.marquee-track),
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .marquee-track {
    animation-play-state: paused !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* A printed card, turned over. Two faces on a preserve-3d plane rather than a
   crossfade: the back of a card is a different SIDE of one object, and a fade
   makes it read as two pictures swapping. */
.card-flip {
  perspective: 1400px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.card-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-body.is-back {
  transform: rotateY(180deg);
}
.card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  backface-visibility: hidden;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.75);
}
.card-face-back {
  transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .card-body { transition: none; }
}