@font-face { font-family: "DM Sans"; src: url("assets/fonts/dm-sans-variable.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Lilita One"; src: url("assets/fonts/lilita-one.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("assets/fonts/permanent-marker.ttf") format("truetype"); font-weight: 400; font-display: swap; }
:root { color-scheme: light; --paper: #fffdf4; --ink: #11100e; --orange: #ff6b26; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; width: 100%; height: auto; }
.canvas { position: relative; width: 100%; overflow: hidden; background-repeat: repeat; }
.hero { aspect-ratio: 1672 / 941; background: var(--paper) url("assets/paper-light.webp") repeat; }
.about { aspect-ratio: 1672 / 941; background: var(--ink) url("assets/paper-dark.webp") repeat; color: var(--paper); }
.roadmap { aspect-ratio: 1942 / 809; background: #fffffa url("assets/paper-roadmap.webp") repeat; }
.footer { aspect-ratio: 1672 / 217; background: var(--ink) url("assets/paper-dark.webp") repeat; color: var(--paper); }
.piece { position: absolute; left: var(--left); top: var(--top); width: var(--width); margin: 0; padding: 0; border: 0; background: transparent; display: block; text-decoration: none; }
.graphic { aspect-ratio: var(--ratio); line-height: 0; }
.graphic > img { width: 100%; height: 100%; }
.site-header, .navigation, .header-socials, .hero-content, .hero-contract-row, .about-content, .roadmap-cards, .phase, .footer-contract-row, .footer-socials { display: contents; }
.nav-link { line-height: 2.5; padding-left: .4vw; font-size: 1.43vw; font-weight: 700; letter-spacing: -.025em; }
.hero-tagline { font-size: 3.12vw; font-weight: 850; letter-spacing: -.015em; line-height: 1.27; padding-left: .3vw; white-space: nowrap; }
.hero-soon { left: 4.3%; top: 64%; width: 18.85%; height: 9.35%; display: flex; align-items: center; justify-content: center; gap: 2.4vw; border: .18vw solid #685043; border-radius: 999px; background: #f5a16f; font-size: 1.94vw; font-weight: 750; opacity: 1; color: #594235; cursor: not-allowed; transition: background-color .18s, border-color .18s, box-shadow .18s; }
.hero-soon:hover { background: #ff985a; border-color: #49352a; box-shadow: 0 .2vw .65vw rgb(17 16 14 / 14%); }
.soon-label { display: inline-flex; align-items: center; gap: .45em; }
.hero-soon .soon-lock { width: 1.15vw; height: 1.35vw; stroke-width: 2.2; }
.hero-soon svg { width: 1.8vw; height: 1.8vw; fill: none; stroke: currentColor; stroke-width: 3; }
.contract-display { display: flex; align-items: center; gap: .65em; white-space: nowrap; line-height: 1.65; }
.hero-contract { padding-left: .3vw; font-family: "Courier New", monospace; font-size: 1.56vw; }
.footer-contract { padding-left: .3vw; font-size: 1.98vw; font-weight: 850; letter-spacing: -.015em; line-height: 1.4; gap: .4em; }
.contract-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.about-copy { padding-left: .4vw; font-size: 3vw; line-height: 1.39; font-weight: 900; letter-spacing: -.008em; white-space: nowrap; }
.about-note { padding-left: .45vw; font-size: 2.04vw; line-height: 1.3; font-weight: 850; color: #7b7a76; white-space: nowrap; }
.speech-figure figcaption { position: absolute; font-family: "Permanent Marker", "Lilita One", sans-serif; font-weight: 400; line-height: 1.22; white-space: nowrap; }
.speech-figure figcaption span { display: block; }
.hero-speech { left: 51.5%; top: 29%; font-size: 3.4vw; transform: rotate(-12deg) scaleX(.88); transform-origin: left center; }
.about-speech { left: 66.5%; top: 15%; font-size: 2.95vw; transform: rotate(-13deg) scaleX(.72); transform-origin: left center; }
.phase-number { aspect-ratio: var(--ratio); font: 400 7.4vw/.87 "Lilita One", sans-serif; padding-left: 2.2vw; padding-top: .7vw; }
.number-sparks { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; }
.phase-title { padding-left: .4vw; font: 400 2.66vw/1.07 "Lilita One", sans-serif; letter-spacing: -.015em; white-space: nowrap; }
.phase-three-title { font-size: 2.36vw; }
.stamp { aspect-ratio: var(--ratio); font: 400 3.2vw/1 "Lilita One", sans-serif; color: var(--orange); }
.stamp-done { color: #269443; font-size: 2vw; }
.stamp > span { position: absolute; left: 7%; top: 17%; display: block; padding: .04em .3em 0; line-height: .85; border: .2vw solid currentColor; outline: .06vw solid currentColor; outline-offset: .15vw; transform: rotate(-8deg); }
.stamp-done > span { top: 11%; white-space: nowrap; }
.stamp > span::after { content: ""; position: absolute; inset: -.13vw -.21vw; border: .06vw solid currentColor; transform: rotate(1.5deg); pointer-events: none; }
.phase-copy { padding-left: .35vw; font-size: 1.4vw; font-weight: 750; line-height: 1.12; letter-spacing: -.025em; white-space: nowrap; }
.phase-note { padding-left: .35vw; font-size: 1.08vw; line-height: 1.45; letter-spacing: -.025em; }
.everyone-text { font: 400 5.55vw/1 "Lilita One", sans-serif; letter-spacing: -.018em; }
.everyone-text > span { display: block; width: 142%; transform: rotate(-4deg) scaleX(.7); transform-origin: left center; }
.everyone-text::after { content: ""; display: block; width: 64%; height: .45vw; margin: .1vw 0 0 18%; border-radius: 80% 30% 80% 30%; background: var(--orange); transform: rotate(-5deg); }
.roadmap::before, .roadmap::after { content: ""; position: absolute; top: 42.7%; bottom: 9.4%; width: 1px; background: rgb(0 0 0 / 13%); }
.roadmap::before { left: 32%; } .roadmap::after { left: 61.2%; }
.footer-line { height: 2px; top: 20%; background: #fffdf4; border-radius: 50%; }
a.piece, button.piece { border-radius: 8px; }
button.hero-soon { border-radius: 999px; }
a.piece:focus-visible, button.piece:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 12px 18px; border-radius: 8px; background: var(--orange); color: var(--ink); transform: translateY(-160%); font-size: 16px; font-weight: 700; }
.skip-link:focus { transform: none; }
.copy-feedback { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 16px); padding: 12px 20px; z-index: 30; border: 2px solid var(--ink); border-radius: 12px; background: var(--orange); color: var(--ink); font-size: 16px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.copy-feedback.visible { opacity: 1; transform: translate(-50%, 0); }
.manual-copy { max-width: min(400px, calc(100vw - 32px)); padding: 28px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); }
.manual-copy::backdrop { background: rgb(0 0 0 / 55%); }
.manual-copy p { font-size: 20px; font-weight: 700; }
.manual-copy input { width: 100%; min-width: 220px; padding: 12px; border: 2px solid var(--ink); border-radius: 8px; font-size: 16px; }
.dialog-close { position: absolute; top: 6px; right: 10px; border: 0; background: transparent; font-size: 28px; }

@media (max-width: 900px) {
  .canvas { aspect-ratio: auto; }
  .piece { position: relative; top: auto; left: auto; width: 100%; flex-shrink: 0; }
  .hero { padding: 16px 24px 0; }
  .site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 640px; margin: 0 auto; }
  .logo { width: 112px; }
  .header-socials { display: flex; align-items: center; gap: 12px; }
  .social-x { width: 42px; } .social-telegram { width: 46px; }
  .navigation { display: flex; order: 3; align-items: center; justify-content: space-between; width: 100%; gap: 14px; }
  .nav-link { width: auto; font-size: 18px; line-height: 2.2; padding: 0; }
  .hero-content { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 640px; margin: 42px auto 0; }
  .hero-title { width: calc(100% + 8px); margin-left: -4px; }
  .hero-tagline { font-size: clamp(20px, 4.7vw, 34px); line-height: 1.2; padding: 0; white-space: normal; }
  .hero-soon { width: 216px; height: 62px; margin: 8px 0 2px; border-width: 2px; font-size: 23px; gap: 32px; }
  .hero-soon svg { width: 24px; height: 24px; }
  .hero-soon .soon-lock { width: 16px; height: 19px; }
  .hero-contract-row { display: flex; align-items: center; gap: 8px; width: 100%; }
  .hero-contract { width: min(250px, calc(100% - 46px)); font-size: 19px; padding: 0; }
  .hero-copy { width: 38px; }
  .hero-goose { width: calc(100% + 48px); max-width: 688px; margin: 24px auto 0; margin-left: max(-24px, calc((100% - 688px) / 2)); }
  .hero-speech { font-size: clamp(29px, 7.5vw, 53px); }
  .about { padding: 48px 24px 24px; display: flex; flex-direction: column; align-items: center; }
  .about-content { order: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 600px; }
  .about-title { width: 100%; }
  .about-copy { font-size: clamp(22px, 4.55vw, 34px); line-height: 1.4; padding: 0; white-space: normal; }
  .about-note { font-size: 23px; padding: 0; margin: 4px 0 0; }
  .about-goose { order: 1; width: 100%; max-width: 480px; margin: 32px auto 0; }
  .about-speech { font-size: clamp(22px, 5.7vw, 31px); }
  .roadmap { padding: 40px 24px; }
  .roadmap::before, .roadmap::after { display: none; }
  .roadmap-heading { width: 100%; max-width: 740px; margin: 0 auto 32px; }
  .roadmap-cards { display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; }
  .phase { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 0; gap: 12px; }
  .phase + .phase { border-top: 1px solid rgb(0 0 0 / 12%); }
  .phase-number { width: 186px; font-size: 116px; padding: 8px 0 0 30px; }
  .phase-title { width: 100%; font-size: 34px; padding: 0; line-height: 1.1; white-space: normal; }
  .phase-three-title { font-size: 32px; }
  .stamp { width: 200px; font-size: 55px; margin: 0 0 6px; }
  .stamp-done { font-size: 34px; }
  .stamp > span { border-width: 3px; outline-width: 1px; outline-offset: 2px; }
  .stamp > span::after { inset: -2px -4px; border-width: 1px; }
  .phase-copy { font-size: 24px; padding: 0; line-height: 1.16; white-space: normal; }
  .phase-note { font-size: 20px; padding: 0; line-height: 1.4; }
  .roadmap-goose { width: 200px; align-self: center; margin: 12px 0 0; }
  .nft-silhouettes { width: 264px; align-self: center; margin-top: 8px; }
  .everyone-text { width: 100%; font-size: 80px; }
  .everyone-text::after { height: 6px; margin-top: 3px; }
  .miniapp-phone { width: 254px; align-self: center; margin: 12px 0 0; }
  .footer { padding: 28px 24px 36px; }
  .footer-rule { width: 100%; margin-bottom: 30px; }
  .footer-contract-row { display: flex; justify-content: center; align-items: center; gap: 4px; }
  .footer-contract { width: min(300px, calc(100% - 66px)); padding: 0; font-size: 24px; gap: .4em; }
  .footer-copy { width: 62px; }
  .footer-socials { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 24px auto 0; }
  .footer-x, .footer-telegram { width: 108px; }
}
@media (max-width: 370px) {
  .hero, .roadmap, .about, .footer { padding-left: 18px; padding-right: 18px; }
  .hero-goose { width: calc(100% + 36px); margin-left: -18px; }
  .nav-link { font-size: 17px; }
  .phase-three-title { font-size: 30px; }
  .footer-contract { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .copy-feedback, .hero-soon { transition: none; } }