@font-face { font-family: 'Instrument Serif'; src: url('./assets/fonts/instrument-serif.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('./assets/fonts/instrument-serif-italic.ttf') format('truetype'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./assets/fonts/inter-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./assets/fonts/inter-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('./assets/fonts/dm-mono.ttf') format('truetype'); font-weight: 400; font-display: swap; }
:root { font-family: 'Inter', Arial, sans-serif; color: #e3ebe3; background: #080b0a; font-synthesis: none; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid #c7e6c9; outline-offset: 5px; }
button, a { transition: color .2s, background .2s, border-color .2s; }
::selection { background: #d1e5d6; color: #101810; }
.icon-library { width: 0; height: 0; position: absolute; overflow: hidden; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon.small { width: 13px; height: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.glass { border: 1px solid #e4f9ee30; background: linear-gradient(125deg, #e6fff00a, #e6fff002 50%, #e6fff006); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 #ffffff14, 0 10px 30px #00000015; }
.glass:hover { border-color: #e4f9ee66; background-color: #d3e8db08; }
.glass-text, .glass-word { color: transparent; -webkit-text-stroke: .7px #e0eee0a6; background: linear-gradient(155deg, #f5fffad9 0%, #dcf5e82b 15%, #d9efe40a 27%, #edfff191 28%, #cee5dc1f 31%, #f5fffa40 50%, #bcd7ca0d 62%, #e6fff7ad 78%, #ecfff112 85%, #effffb96 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 1px #00000099) drop-shadow(0 -1px 0 #e8fff533); }
.glass-word { -webkit-text-stroke: .45px #e9f6eead; background-image: linear-gradient(140deg, #f1fff6e6, #effff738 42%, #f1fff6b3 75%, #e0f3e855); }
.header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 110px; padding: 0 4.5%; gap: 20px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 23px; font-weight: 600; letter-spacing: -.8px; }
.brand-mark { width: 37px; height: 32px; border-radius: 50%; overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.4); }
.brand-star { color: #bfd9cc; align-self: flex-start; font-size: 17px; margin-left: -4px; }
.desktop-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; padding: 5px; border-radius: 40px; }
.desktop-nav a { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 17px; color: #b8c4bd; font-size: 11px; white-space: nowrap; border-radius: 30px; }
.desktop-nav a:hover, .desktop-nav a[aria-current] { color: #eef8ef; background: #e0f4e608; }
.nav-dot, .status-dot { display: inline-block; border-radius: 50%; background: #bddfc5; width: 5px; height: 5px; box-shadow: 0 0 10px #c8efd34d; }
.nav-dot { width: 3px; height: 3px; }
.header-buy { display: flex; align-items: center; gap: 11px; font-size: 11px; border-radius: 30px; padding: 14px 20px; }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.menu-toggle span { width: 18px; height: 1px; background: #d9e6dd; }
.menu-toggle span:last-child { width: 13px; margin-left: 5px; }
.habitat { position: relative; isolation: isolate; width: 100%; height: 100svh; min-height: 650px; overflow: hidden; --cursor-x: 50vw; --cursor-y: 50vh; --parallax-x: 0px; --parallax-y: 0px; }
.habitat::after { content: ''; position: absolute; z-index: 6; inset: 0; background: linear-gradient(180deg, transparent 76%, #050a07cc 100%); pointer-events: none; }
.hero-heading { position: absolute; z-index: 1; top: 13%; left: 5%; right: 5%; text-align: center; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: 'DM Mono', monospace; font-size: 8px; font-weight: 400; letter-spacing: 2.5px; color: #9eafa4; margin: 0 0 14px; }
.eyebrow > span { width: 25px; height: 1px; background: #a8c4b34d; }
.eyebrow.left { justify-content: flex-start; }
.hero-heading h1 { margin: 0; font: 400 clamp(100px, 28vw, 550px)/.85 'Instrument Serif', Georgia, serif; letter-spacing: -.05em; }
.title-asterisk { position: absolute; top: 40px; right: -.5%; font-size: 40px; font-weight: 300; color: #b2cebd88; }
.habitat-stage { position: absolute; z-index: auto; --stage-height: max(572px,88svh); height: var(--stage-height); width: calc(var(--stage-height) * 1.5); top: calc(12% + 65px); left: calc(50% - var(--stage-height) * .75); margin-left: var(--parallax-x); margin-top: var(--parallax-y); }
.habitat-photo, .habitat-front { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; position: absolute; inset: 0; }
.habitat-photo { z-index: 0; mask-image: linear-gradient(90deg, transparent, black 13%, black 87%, transparent), linear-gradient(180deg, black 80%, transparent 100%); mask-composite: intersect; }
.habitat-front { z-index: 2; clip-path: polygon(29% 15%,70% 15%,71% 21%,78% 32%,82% 42%,83% 55%,82% 72%,77% 85%,67% 93%,50% 95%,33% 93%,23% 85%,18% 72%,16% 55%,17% 42%,22% 32%,29% 21%); }
.creature { position: absolute; z-index: 5; left: 36%; top: 44.5%; width: 30%; height: 30%; padding: 0; background: transparent; border-radius: 45%; transform-origin: 50% 100%; cursor: pointer; -webkit-user-select: none; user-select: none; }
.creature img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 3px #06100855); }
.creature:hover img { filter: drop-shadow(0 0 12px #cceeff40); }
.creature:focus-visible { outline-offset: 7px; }
.creature-shadow { position: absolute; z-index: 4; left: 42%; top: 69.2%; width: 18%; height: 3.4%; border-radius: 50%; background: #0a1608ab; filter: blur(6px); transform-origin: center; }
.is-jumping .creature { animation: frongus-jump 980ms cubic-bezier(.25,.5,.35,1) both; }
.is-jumping .creature-shadow { animation: shadow-jump 980ms ease both; }
@keyframes frongus-jump { 0% { transform: translateY(0) scale(1,1); } 12% { transform: translateY(3%) scale(1.1,.85); } 37% { transform: translateY(-39%) rotate(-5deg) scale(.96,1.06); } 48% { transform: translateY(-42%) rotate(3deg); } 69% { transform: translateY(0) scale(1.12,.85); } 83% { transform: translateY(-5%) scale(.97,1.03); } 100% { transform: translateY(0) scale(1,1); } }
@keyframes shadow-jump { 0%,100% { transform: scale(1); opacity: .8; } 40% { transform: scale(.6); opacity: .3; } 70% { transform: scale(1.1); opacity: .85; } }
.magic-burst { position: absolute; z-index: 5; left: 38%; top: 47%; width: 28%; height: 27%; pointer-events: none; }
.magic-burst i { position: absolute; opacity: 0; font: 400 22px 'Instrument Serif', serif; color: #def2e0; text-shadow: 0 0 10px #d0ffdc; }
.magic-burst i:nth-child(1) { left: 0; top: 45%; --dx: -20px; --dy: -26px; }
.magic-burst i:nth-child(2) { left: 28%; top: 5%; --dx: -8px; --dy: -34px; }
.magic-burst i:nth-child(3) { left: 85%; top: 25%; --dx: 22px; --dy: -25px; }
.magic-burst i:nth-child(4) { left: 75%; top: 55%; --dx: 28px; --dy: -6px; }
.magic-burst i:nth-child(5) { left: 60%; top: 2%; --dx: 10px; --dy: -30px; }
.is-jumping .magic-burst i { animation: sparkle 900ms ease-out both; }
@keyframes sparkle { 0%,18% { opacity: 0; transform: translate(0,0) scale(.4); } 40% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.8); } }
.spotlight { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle 260px at var(--cursor-x) var(--cursor-y), #d7ffb90b, transparent); mix-blend-mode: screen; }
.fireflies { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.fireflies i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #daffdd; box-shadow: 0 0 6px #daffdd; animation: firefly 5s ease-in-out infinite; }
.fireflies i:nth-child(1) { left: 29%; top: 57%; animation-delay: -1s; }.fireflies i:nth-child(2) { left: 39%; top: 78%; animation-delay: -2s; }.fireflies i:nth-child(3) { left: 65%; top: 59%; animation-delay: -3s; }.fireflies i:nth-child(4) { left: 72%; top: 72%; animation-delay: -4s; }.fireflies i:nth-child(5) { left: 54%; top: 50%; animation-delay: -1.5s; }.fireflies i:nth-child(6) { left: 33%; top: 71%; animation-delay: -2.5s; }.fireflies i:nth-child(7) { left: 60%; top: 83%; animation-delay: -3.5s; }.fireflies i:nth-child(8) { left: 75%; top: 56%; animation-delay: -.5s; }
@keyframes firefly { 0%,100% { opacity: 0; transform: translateY(3px); } 45% { opacity: .65; } 75% { opacity: .25; transform: translateY(-7px); } }
.interaction-hint { display: flex; align-items: center; gap: 10px; position: absolute; z-index: 8; left: 65%; top: 69%; color: #b8cdc0; font: 8px 'DM Mono', monospace; letter-spacing: 1.2px; transition: opacity .6s; pointer-events: none; }
.interaction-hint.has-jumped { opacity: .35; }
.hint-ring { display: block; border: 1px solid #b3cec180; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 4px #cee4d510; }
.hint-arrow { font-size: 15px; }
.home-actions { position: absolute; z-index: 8; left: 4.5%; right: 4.5%; bottom: 124px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.specimen-index { font: 8px 'DM Mono', monospace; color: #879f8e; letter-spacing: 1px; }
.mobile-buy { display: none !important; }
.specimen-index span { margin: 0 7px; color: #c9ded0; }
.discover-link, .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 15px 19px; border-radius: 4px; font-size: 11px; color: #d6e5dc; }
.footer { z-index: 8; position: absolute; bottom: 0; left: 4.5%; right: 4.5%; height: 91px; border-top: 1px solid #c9e6d126; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.network, .footer-end { display: flex; align-items: center; gap: 11px; color: #93a398; font: 7px 'DM Mono', monospace; letter-spacing: .7px; }
.solana-icon { display: grid; gap: 2px; width: 14px; }.solana-icon i { display: block; height: 3px; background: #a8c3b2; transform: skewX(-27deg); }.solana-icon i:nth-child(2) { transform: skewX(27deg); }
.contract { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 4px; font: 9px 'DM Mono', monospace; }
.contract-prefix { color: #8a9c8e; font-size: 8px; padding-right: 12px; border-right: 1px solid #bfd3c133; }.contract-value { max-width: min(28vw,400px); overflow: hidden; text-overflow: ellipsis; color: #c6d8cc; }.copy-label { font-size: 7px; color: #a8c4b0; }.is-copied { border-color: #c7f0d2; }.footer-end > span { font-size: 27px; margin-left: 8px; color: #aac7b7; }
.toast { position: fixed; z-index: 60; bottom: 98px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #deefe1; background: #132319ed; border-radius: 4px; max-width: 90vw; text-align: center; }
.toast:not(:empty) { padding: 12px 20px; border: 1px solid #c6e2ce4a; }
.menu-open { overflow: hidden; }.mobile-menu { color: #dfede3; background: #101a15f5; border-radius: 12px; width: min(500px,calc(100vw - 36px)); max-height: calc(100svh - 36px); padding: 55px 32px 35px; }.mobile-menu::backdrop { background: #030705bd; backdrop-filter: blur(13px); }.mobile-menu .eyebrow { justify-content: flex-start; font-size: 7px; letter-spacing: 1.7px; }.mobile-menu h2 { font: 400 68px/.95 'Instrument Serif', serif; margin: 25px 0; }.mobile-menu h2 em { font-weight: 400; }.mobile-menu nav { display: flex; flex-direction: column; margin: 30px 0; }.mobile-menu nav a { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d8f3df20; padding: 16px 0; font-size: 18px; }.mobile-menu nav a span { font: 9px 'DM Mono',monospace; color: #8ba092; }.mobile-menu .button { display: flex; }.close-menu { position: absolute; top: 16px; right: 16px; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; }
.about-page { background: radial-gradient(ellipse at 75% 20%, #15201955, transparent 50%), #080b0a; }.about-main { max-width: 1440px; margin: 0 auto; padding: 30px 5% 0; }.back-link { font: 8px 'DM Mono',monospace; letter-spacing: 1.3px; color: #8fa598; display: inline-block; margin: 12px 0 35px; }.back-link:hover { color: #e4f4e7; }
.about-intro { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4%; align-items: center; padding: 20px 0 95px; }.about-copy { position: relative; z-index: 2; }.about-title { font: 400 clamp(70px,7.7vw,122px)/.95 'Instrument Serif',serif; letter-spacing: -.035em; margin: 25px 0 33px; }.about-title em { font-weight: 400; }.about-copy p:not(.eyebrow) { font-size: 12px; line-height: 1.9; color: #9fb0a4; margin: 18px 0; max-width: 380px; }.about-copy .lead { font-size: 14px !important; color: #c4d1c8 !important; }.about-copy strong { font-weight: 600; color: #d3e4d8; }.about-copy .button { margin-top: 15px; }.about-portrait { margin: 0 -15% 0 -14%; position: relative; }.about-portrait img { width: 100%; height: auto; display: block; mask-image: radial-gradient(ellipse at center,black 35%,transparent 73%); }.about-portrait figcaption { display: flex; align-items: center; gap: 8px; justify-content: center; font: 7px 'DM Mono',monospace; color: #829d8c; letter-spacing: .8px; position: relative; margin-top: -35px; }
.story-section { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; padding: 75px 0; border-top: 1px solid #c6e3d126; }.story-heading h2 { font: 400 clamp(46px,5vw,76px)/1 'Instrument Serif',serif; letter-spacing: -.025em; margin: 25px 0 0; }.story-heading h2 em { font-weight: 400; }.story-copy p { font-size: 13px; line-height: 1.9; color: #a6b7aa; margin: 0 0 22px; }.field-notes { margin: 35px 0 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-top: 20px; border-top: 1px solid #c6e3d126; }.field-notes dt { color: #81978a; font: 7px 'DM Mono',monospace; letter-spacing: 1px; margin-bottom: 12px; }.field-notes dd { font-size: 10px; margin: 0; color: #cadace; line-height: 1.7; }
.reference-section { margin: 25px 0 70px; border-top: 1px solid #c6e3d126; border-bottom: 1px solid #c6e3d126; padding: 38px 0 45px; }.reference-meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; }.reference-meta .eyebrow { margin: 0; }.reference-author { display: flex; gap: 12px; align-items: center; font-size: 12px; color: #bfd2c5; }.reference-section blockquote { margin: 35px 0 25px; max-width: 970px; font: 400 clamp(34px,4.6vw,65px)/1.15 'Instrument Serif',serif; color: #bccfc2; letter-spacing: -.015em; }.source-link { display: inline-flex; align-items: center; gap: 25px; font-size: 10px; color: #b6cebf; }.source-link:hover { color: #e7f7ec; }.about-ending { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 0 65px; }.about-ending > span { font: 8px 'DM Mono',monospace; letter-spacing: 1.5px; color: #8da295; }.about-footer { position: relative; left: auto; right: auto; bottom: auto; margin: 0 4.5%; }
@media (max-width:1100px) { .desktop-nav a { padding: 12px; font-size: 10px; }.header-buy { padding: 13px 15px; }.header { padding: 0 4%; }.brand { font-size: 21px; }.network,.footer-end { font-size: 6px; letter-spacing: .3px; }.about-title { font-size: 8.7vw; }.about-intro { gap: 0; }.about-copy p:not(.eyebrow) { max-width: 340px; } }
@media (max-width:760px) {
  .header { height: 87px; padding: 0 6%; }.brand { font-size: 23px; }.brand-mark { width: 35px; height: 30px; }.desktop-nav,.header-buy { display: none; }.menu-toggle { display: flex; }
  .habitat { min-height: 650px; max-height: 1100px; }.hero-heading { top: 16%; }.hero-heading .eyebrow { font-size: 6px; letter-spacing: 1.8px; margin-bottom: 15px; }.hero-heading h1 { font-size: 29vw; -webkit-text-stroke: .6px #e0eee0a6; }.title-asterisk { top: 24px; right: -1%; font-size: 17px; }
  .habitat-stage { --stage-height: 530px; top: 22%; }.habitat::after { background: linear-gradient(180deg,transparent 67%,#080c0973 80%,#080c09 94%); }.spotlight { display: none; }.interaction-hint { left: auto; right: 6%; top: 67%; font-size: 6px; letter-spacing: .5px; gap: 7px; }.hint-ring { width: 7px; height: 7px; }.hint-arrow { font-size: 12px; }.home-actions { bottom: 113px; left: 6%; right: 6%; justify-content: center; gap: 12px; }.specimen-index { display: none; }.discover-link,.mobile-buy { padding: 13px 15px; font-size: 10px; gap: 15px; }.mobile-buy { display: inline-flex !important; }
  .footer { left: 6%; right: 6%; height: 88px; flex-direction: column; justify-content: center; gap: 12px; }.contract { position: static; transform: none; order: -1; padding: 9px 12px; gap: 12px; }.contract-value { max-width: 54vw; }.network { font-size: 6px; letter-spacing: .3px; gap: 7px; }.solana-icon { width: 10px; gap: 1.5px; }.solana-icon i { height: 2px; }.footer-end { display: none; }.toast { bottom: 95px; font-size: 10px; width: max-content; }
  .about-main { padding: 10px 6% 0; overflow: hidden; }.back-link { margin-bottom: 30px; font-size: 7px; }.about-intro { display: flex; flex-direction: column; align-items: stretch; padding: 10px 0 45px; }.about-title { font-size: clamp(65px,16.5vw,110px); margin: 22px 0 27px; }.about-copy .eyebrow { font-size: 6px; letter-spacing: 1.4px; gap: 9px; }.about-copy p:not(.eyebrow) { max-width: 100%; font-size: 11px; }.about-copy .lead { font-size: 12px !important; }.about-portrait { margin: 5px -21% 0; }.about-portrait figcaption { font-size: 6px; margin-top: -25px; }.story-section { grid-template-columns: 1fr; gap: 30px; padding: 45px 0; }.story-heading h2 { font-size: 55px; margin-top: 18px; }.story-copy p { font-size: 12px; }.field-notes { gap: 15px; }.field-notes dd { font-size: 9px; }.field-notes dt { font-size: 6px; }.reference-section { margin: 0 0 40px; padding: 28px 0 35px; }.reference-meta .eyebrow { font-size: 6px; letter-spacing: .8px; gap: 8px; }.reference-meta .eyebrow > span { width: 12px; }.reference-author { font-size: 10px; gap: 8px; }.reference-section blockquote { font-size: 37px; margin: 28px 0 25px; }.about-ending { flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: 40px; }.about-footer { margin: 0 6%; left: auto; right: auto; }
}
@media (max-height:740px) and (max-width:760px) { .header { height: 74px; }.hero-heading { top: 15%; }.habitat-stage { --stage-height: 440px; top: 22%; }.interaction-hint { top: 65%; }.home-actions { bottom: 104px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; }.fireflies { display: none; }.is-jumping .creature { animation: gentle-hop 300ms ease both; }.is-jumping .creature-shadow { animation: none; }.is-jumping .magic-burst i { animation: none; }@keyframes gentle-hop { 50% { transform: translateY(-6px); } } }