:root {
  --yellow: #d6fd52;
  --yellow-hot: #ecff3f;
  --black: #090a08;
  --ink: #10110e;
  --orange: #ff6a21;
  --cream: #fff8dc;
  --white: #f7f7ed;
  --line: rgba(214, 253, 82, .22);
  --shell: min(1180px, calc(100% - 42px));
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--white); background: var(--black); font-family: var(--sans); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 14px; color: var(--black); background: var(--yellow); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.page-top { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; pointer-events: none; }

.noise { position: fixed; inset: 0; z-index: 80; opacity: .08; pointer-events: none; background-image: radial-gradient(circle at 13% 27%, #fff 0 .45px, transparent .7px), radial-gradient(circle at 77% 63%, #fff 0 .5px, transparent .8px), radial-gradient(circle at 42% 84%, #fff 0 .35px, transparent .65px); background-size: 13px 17px, 19px 23px, 11px 29px; }

.boot { position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; gap: 22px; text-align: center; color: var(--black); background: var(--yellow); animation: boot-failsafe .45s 1.6s forwards; }
.boot__mark { width: 108px; height: 108px; margin: auto; display: grid; place-items: center; border: 8px solid var(--black); border-radius: 50%; font: 88px/.8 var(--display); transform: rotate(-8deg); box-shadow: 10px 10px 0 var(--orange); }
.boot__copy { display: grid; gap: 9px; width: 270px; letter-spacing: .13em; font-size: 11px; }
.boot__copy span { display: block; height: 8px; border: 2px solid var(--black); overflow: hidden; }
.boot__copy span::after { content: ""; display: block; width: 100%; height: 100%; background: var(--black); transform-origin: left; animation: charge 1s ease-out both; }
.booted .boot { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
@keyframes charge { from { transform: scaleX(.08); } to { transform: scaleX(1); } }
@keyframes boot-failsafe { to { opacity: 0; visibility: hidden; } }

.ticker { position: relative; z-index: 51; height: 30px; overflow: hidden; color: var(--black); background: var(--yellow); border-bottom: 2px solid var(--black); font: 700 11px/30px var(--sans); letter-spacing: .13em; white-space: nowrap; }
.ticker__track { display: flex; width: max-content; gap: 26px; animation: ticker 24s linear infinite; }
.ticker i { font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.site-header { position: sticky; top: 0; z-index: 50; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; border-bottom: 1px solid rgba(214,253,82,.25); background: rgba(9,10,8,.82); backdrop-filter: blur(16px); }
.brand { display: inline-flex; width: fit-content; align-items: center; gap: 10px; text-decoration: none; }
.brand__compass { display: grid; width: 35px; height: 35px; place-items: center; color: var(--black); background: var(--yellow); border-radius: 50%; font-size: 22px; transform: rotate(13deg); }
.brand__name { color: var(--yellow); font: italic 42px/.8 var(--display); letter-spacing: -.035em; text-shadow: 4px 4px 0 rgba(255,106,33,.45); }
.site-nav { display: flex; align-items: center; gap: 29px; }
.site-nav a { position: relative; text-decoration: none; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.site-nav a:not(.nav-launch)::after { content: ""; position: absolute; height: 2px; inset: auto 100% -6px 0; background: var(--yellow); transition: inset .2s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { inset-right: 0; }
.site-nav .nav-launch { padding: 10px 14px; color: var(--black); background: var(--yellow); transform: rotate(-1deg); }
.wallet-pill { justify-self: end; display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; cursor: pointer; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.wallet-pill:hover { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.wallet-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.wallet-pill.is-connected .wallet-pill__dot { background: var(--yellow); box-shadow: 0 0 12px var(--yellow); }
.nav-toggle { display: none; }

.hero { position: relative; min-height: calc(100svh - 106px); isolation: isolate; display: flex; overflow: hidden; border-bottom: 2px solid var(--yellow); background: #080908; }
.hero__art { position: absolute; inset: 0; z-index: -3; background-image: url("assets/nami-hero.webp"); background-position: 50% center; background-size: cover; animation: hero-enter 1.2s cubic-bezier(.16,1,.3,1) both; }
.hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4,5,4,.99) 0%, rgba(4,5,4,.93) 30%, rgba(4,5,4,.4) 54%, rgba(4,5,4,.05) 100%), linear-gradient(0deg, rgba(4,5,4,.7), transparent 34%); }
.hero__speed { position: absolute; inset: 0; z-index: -1; opacity: .19; background: repeating-conic-gradient(from 275deg at 78% 46%, transparent 0deg 1.4deg, rgba(214,253,82,.6) 1.5deg 1.62deg, transparent 1.7deg 3.8deg); mix-blend-mode: screen; }
@keyframes hero-enter { from { opacity: .2; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }
.hero__content { align-self: center; padding: 70px 0 105px; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 8px; color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.eyebrow span { display: grid; width: 27px; height: 27px; place-items: center; color: var(--black); background: var(--yellow); border-radius: 50%; }
.hero h1 { max-width: 650px; margin: 19px 0 16px; font-family: var(--display); font-style: italic; letter-spacing: -.06em; line-height: .72; text-transform: uppercase; }
.hero h1 span { display: block; }
.hero__tiny { margin: 0 0 7px 8px; color: var(--white); font: 800 17px/1 var(--sans); letter-spacing: .38em; }
.hero__nami { position: relative; width: max-content; color: var(--yellow); font-size: clamp(112px, 15vw, 220px); text-shadow: 7px 7px 0 var(--orange), 13px 13px 0 #000; }
.hero__nami::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 2px #080908; transform: translate(-3px,-3px); }
.hero__storm { margin-left: 7px; color: var(--white); font-size: clamp(62px, 7.4vw, 108px); -webkit-text-stroke: 2px var(--black); text-shadow: 5px 5px 0 var(--black); }
.hero__lede { max-width: 590px; margin: 27px 0 28px; color: rgba(255,255,255,.75); font-size: clamp(15px, 1.4vw, 19px); line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { position: relative; display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 22px; padding: 13px 20px; border: 2px solid var(--yellow); text-decoration: none; text-transform: uppercase; font: 900 12px/1 var(--sans); letter-spacing: .08em; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover, .btn:focus-visible { transform: translate(-3px,-3px); box-shadow: 5px 5px 0 var(--orange); }
.btn--large { min-height: 58px; min-width: 204px; }
.btn--yellow { color: var(--black); background: var(--yellow); }
.btn--glass { color: var(--white); background: rgba(8,9,8,.5); backdrop-filter: blur(8px); }
.btn--white { color: var(--black); background: var(--white); border-color: var(--white); }
.btn--dark { color: var(--yellow); background: var(--black); border-color: var(--black); }
.launch-chip { display: flex; max-width: 590px; align-items: center; gap: 12px; margin-top: 23px; padding: 9px 11px; border: 1px solid rgba(214,253,82,.3); background: rgba(0,0,0,.53); font-size: 9px; letter-spacing: .09em; }
.launch-chip__live { padding: 5px 7px; color: var(--black); background: var(--orange); font-weight: 900; }
.launch-chip strong { color: var(--yellow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launch-chip button { margin-left: auto; padding: 6px 8px; color: var(--yellow); background: transparent; border: 1px solid var(--yellow); cursor: pointer; font-size: 8px; font-weight: 900; }
.hero__stamp { position: absolute; right: 25px; top: 31px; width: 147px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; color: var(--black); background: var(--yellow); border: 3px solid var(--black); border-radius: 50%; outline: 2px solid var(--yellow); outline-offset: 5px; transform: rotate(9deg); box-shadow: 8px 8px 0 var(--orange); }
.hero__stamp span { font: 800 13px/1 var(--sans); }
.hero__stamp b { margin: 4px 0; font: 50px/.8 var(--display); }
.hero__stamp small { width: 110px; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.scroll-cue { position: absolute; right: 32px; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.scroll-cue span { writing-mode: vertical-rl; color: rgba(255,255,255,.6); font-size: 8px; letter-spacing: .22em; }
.scroll-cue b { color: var(--yellow); font-size: 22px; animation: bounce 1.5s infinite; }
@keyframes bounce { 50% { transform: translateY(6px); } }

.signal { display: grid; grid-template-columns: repeat(4, 1fr); color: var(--black); background: var(--yellow); border-bottom: 3px solid var(--black); }
.signal div { display: grid; gap: 3px; padding: 18px 25px; border-right: 2px solid var(--black); }
.signal div:last-child { border: 0; }
.signal small { font-size: 8px; font-weight: 900; letter-spacing: .17em; opacity: .65; }
.signal strong { font: 25px/.9 var(--display); letter-spacing: .02em; }
.blink::after { content: " ●"; color: var(--orange); animation: blink 1s steps(2,end) infinite; }
@keyframes blink { 50% { opacity: .25; } }

.section { padding-top: clamp(80px, 10vw, 145px); padding-bottom: clamp(80px, 10vw, 145px); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin: 23px 0 47px; }
.section h2 { margin: 0; color: var(--white); font: italic clamp(66px, 8.5vw, 124px)/.78 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.section h2 em { color: var(--yellow); font-style: inherit; text-shadow: 6px 6px 0 rgba(255,106,33,.45); }
.section-head p { max-width: 380px; margin: 0 0 8px; color: rgba(255,255,255,.58); font-size: 15px; line-height: 1.65; }

.forecast { position: relative; }
.forecast::before { content: "WEATHER"; position: absolute; right: -45px; top: 25%; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(214,253,82,.07); font: italic 190px/1 var(--display); transform: rotate(90deg); }
.mode-deck { border: 2px solid var(--yellow); box-shadow: 12px 12px 0 rgba(255,106,33,.82); }
.mode-deck__visual { position: relative; aspect-ratio: 3/1; overflow: hidden; background: #111; }
.mode-deck__visual img { width: 100%; height: 100%; object-fit: cover; transition: filter .4s ease, transform .4s ease; }
.mode-deck[data-mode="mirage"] img { filter: saturate(.45) hue-rotate(25deg) contrast(1.1); transform: scale(1.02); }
.mode-deck[data-mode="tangerine"] img { filter: saturate(1.5) sepia(.12); transform: scale(1.01); }
.mode-deck__scan { position: absolute; inset: -20% 0; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 5px, #fff 6px 7px); animation: scan 8s linear infinite; pointer-events: none; }
@keyframes scan { to { transform: translateY(10%); } }
.mode-deck__readout { position: absolute; left: 18px; bottom: 18px; display: grid; min-width: 250px; gap: 2px; padding: 12px 15px; color: var(--black); background: var(--yellow); border-left: 7px solid var(--orange); box-shadow: 5px 5px 0 var(--black); }
.mode-deck__readout small { font-size: 7px; font-weight: 900; letter-spacing: .18em; }
.mode-deck__readout strong { font: 25px/.95 var(--display); }
.mode-deck__readout span { font-size: 9px; font-weight: 800; }
.mode-controls { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--black); }
.mode-btn { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 20px; color: rgba(255,255,255,.6); background: transparent; border: 0; border-top: 2px solid var(--yellow); border-right: 1px solid rgba(214,253,82,.2); text-align: left; cursor: pointer; }
.mode-btn:last-child { border-right: 0; }
.mode-btn span { grid-row: 1 / span 2; color: var(--orange); font: 31px/.9 var(--display); }
.mode-btn b { color: var(--white); font: 19px/1 var(--display); }
.mode-btn small { font-size: 9px; }
.mode-btn:hover, .mode-btn.is-active { color: var(--black); background: var(--yellow); }
.mode-btn.is-active b { color: var(--black); }
.forecast-generator { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 28px; padding: 22px 24px; color: var(--black); background: var(--orange); border: 2px solid var(--black); transform: rotate(-.35deg); box-shadow: 7px 7px 0 var(--yellow); }
.forecast-generator small { font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.forecast-generator p { margin: 5px 0 0; font: 24px/1.1 var(--display); }
.forecast-generator__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.mini-btn { padding: 11px 13px; color: var(--black); background: var(--yellow); border: 2px solid var(--black); cursor: pointer; font-size: 9px; font-weight: 900; }
.mini-btn--dark { color: var(--yellow); background: var(--black); }

.lore { position: relative; overflow: hidden; background: var(--cream); color: var(--black); }
.lore::before { content: ""; position: absolute; inset: 0; opacity: .09; background: radial-gradient(circle at 15% 25%, var(--orange) 0 2px, transparent 3px), radial-gradient(circle at 70% 45%, #000 0 1px, transparent 2px); background-size: 18px 18px, 13px 13px; }
.lore__grid { position: relative; display: grid; grid-template-columns: minmax(340px, .82fr) 1.18fr; align-items: center; gap: clamp(55px, 8vw, 120px); }
.wanted-card { position: relative; max-width: 475px; padding: 12px; background: var(--black); border: 3px solid var(--black); box-shadow: 16px 16px 0 var(--orange); transform: rotate(-2deg); transform-style: preserve-3d; transition: transform .15s ease; }
.wanted-card img { width: 100%; aspect-ratio: .6; object-fit: cover; object-position: top; }
.wanted-card__copy { display: grid; padding: 18px 15px 14px; color: var(--yellow); text-align: center; }
.wanted-card__copy small { font-size: 9px; font-weight: 900; letter-spacing: .19em; }
.wanted-card__copy strong { margin: 5px 0; font: italic 66px/.85 var(--display); letter-spacing: -.03em; }
.wanted-card__copy span { color: var(--white); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.wanted-card__pin { position: absolute; right: -22px; top: 30px; width: 80px; height: 80px; display: grid; place-items: center; color: var(--black); background: var(--yellow); border: 2px solid var(--black); border-radius: 50%; font: 24px/1 var(--display); transform: rotate(12deg); }
.lore .section-kicker { color: #4b4c42; }
.lore h2 { color: var(--black); }
.lore h2 em { color: var(--orange); text-shadow: 6px 6px 0 var(--yellow); }
.lore__intro { margin: 26px 0 6px; font: italic 31px/1 var(--display); text-transform: uppercase; }
.lore__copy > p:not(.lore__intro) { max-width: 600px; color: #42433c; font-size: 16px; line-height: 1.7; }
.skill-list { margin: 31px 0; border-top: 3px solid var(--black); }
.skill-list > div { display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 15px; padding: 15px 3px; border-bottom: 1px solid rgba(0,0,0,.25); }
.skill-list > div > span { font: 27px/1 var(--display); color: var(--orange); }
.skill-list p { display: grid; gap: 3px; margin: 0; }
.skill-list b { font: 19px/1 var(--display); letter-spacing: .02em; }
.skill-list small { color: #68695f; font-size: 10px; }
.skill-list i { color: var(--black); font: 38px/1 var(--display); font-style: normal; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--black); text-decoration: none; font-size: 11px; font-weight: 900; letter-spacing: .1em; border-bottom: 3px solid var(--orange); }
.text-link span { font-size: 22px; }

.section-head--route { margin-bottom: 55px; }
.route-map { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.route-map::before { content: ""; position: absolute; left: 6%; right: 6%; top: 40px; border-top: 2px dashed var(--yellow); }
.route-map article { position: relative; min-height: 330px; padding: 86px 25px 25px; background: #10110f; border: 1px solid rgba(214,253,82,.28); }
.route-map article:nth-child(even) { margin-top: 28px; background: #151612; }
.route-map__num { position: absolute; left: 22px; top: 20px; z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; color: var(--black); background: var(--yellow); border-radius: 50%; font: 23px/1 var(--display); box-shadow: 4px 4px 0 var(--orange); }
.route-map article > i { color: var(--orange); font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .18em; }
.route-map h3 { margin: 10px 0 15px; color: var(--white); font: 31px/.95 var(--display); }
.route-map p { min-height: 88px; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.6; }
.route-map a, .route-map button { display: inline-block; padding: 0 0 4px; color: var(--yellow); background: transparent; border: 0; border-bottom: 2px solid var(--yellow); text-decoration: none; cursor: pointer; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.route-note { margin: 35px auto 0; color: rgba(255,255,255,.45); text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .08em; }

.meme-lab { position: relative; overflow: hidden; color: var(--black); background: var(--yellow); }
.meme-lab::before { content: "MEME"; position: absolute; right: -40px; top: -45px; color: rgba(0,0,0,.06); font: italic 280px/1 var(--display); }
.meme-lab__grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(45px, 8vw, 110px); }
.meme-lab .section-kicker { color: rgba(0,0,0,.6); }
.meme-lab h2 { margin: 20px 0 24px; color: var(--black); }
.meme-lab h2 em { color: var(--orange); text-shadow: 5px 5px 0 var(--black); }
.meme-lab__copy > p { max-width: 520px; line-height: 1.6; }
.meme-lab label { display: block; margin: 18px 0 7px; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.meme-lab input { width: 100%; padding: 14px 15px; color: var(--white); background: var(--black); border: 2px solid var(--black); outline: none; font-weight: 800; }
.meme-lab input:focus { box-shadow: 5px 5px 0 var(--orange); }
.meme-lab__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.meme-lab .btn--yellow { color: var(--yellow); background: var(--black); border-color: var(--black); }
.meme-canvas-wrap { transform: rotate(1.5deg); }
.meme-canvas-wrap canvas { width: 100%; max-width: 600px; aspect-ratio: 1; background: var(--black); border: 9px solid var(--black); box-shadow: 14px 14px 0 var(--orange); }
.meme-canvas-wrap > span { display: block; margin: 20px 0 0 10px; font-size: 8px; font-weight: 900; letter-spacing: .16em; }

.faq__grid { display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: 75px; margin-top: 26px; }
.accordion { border-top: 2px solid var(--yellow); }
.accordion details { border-bottom: 1px solid rgba(214,253,82,.25); }
.accordion summary { display: flex; justify-content: space-between; gap: 20px; padding: 25px 3px; cursor: pointer; list-style: none; font: 25px/1 var(--display); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span { color: var(--yellow); transition: transform .2s ease; }
.accordion details[open] summary span { transform: rotate(45deg); }
.accordion p { max-width: 650px; margin: -3px 0 25px; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.7; }

.final-cta { position: relative; isolation: isolate; overflow: hidden; padding: 105px 0; color: var(--black); background: var(--yellow); text-align: center; }
.final-cta::before, .final-cta::after { content: ""; position: absolute; inset: -50%; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 8deg, rgba(0,0,0,.07) 8.3deg 9deg); animation: spin 45s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.final-cta__bolt { position: absolute; left: 8%; top: -20%; color: var(--orange); font: 620px/1 var(--display); transform: rotate(-14deg); opacity: .85; }
.final-cta small { position: relative; font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.final-cta h2 { position: relative; margin: 13px 0 37px; color: var(--black); font: italic clamp(92px, 15vw, 210px)/.7 var(--display); letter-spacing: -.06em; }
.final-cta h2 span { color: var(--orange); -webkit-text-stroke: 4px var(--black); text-shadow: 9px 9px 0 var(--black); }

footer { padding: 60px 0 34px; background: #050604; }
.footer__top { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.15); }
.brand--footer .brand__name { font-size: 64px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 25px; }
.footer__links a { text-decoration: none; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.footer__links a:hover { color: var(--yellow); }
.footer__fine { display: flex; justify-content: space-between; gap: 50px; padding-top: 28px; color: rgba(255,255,255,.36); font-size: 8px; line-height: 1.6; letter-spacing: .06em; }
.footer__fine p { max-width: 750px; margin: 0; }

.mobile-dock { display: none; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: min(360px, calc(100% - 44px)); padding: 13px 17px; color: var(--black); background: var(--yellow); border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; transform: translateY(130px); transition: transform .25s ease; }
.toast.is-visible { transform: translateY(0); }
.wallet-help { max-width: 430px; padding: 42px; color: var(--white); background: var(--black); border: 3px solid var(--yellow); box-shadow: 12px 12px 0 var(--orange); text-align: center; }
.wallet-help::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.wallet-help__close { position: absolute; right: 11px; top: 8px; color: var(--yellow); background: transparent; border: 0; cursor: pointer; font-size: 29px; }
.wallet-help__icon { display: block; font-size: 50px; }
.wallet-help h2 { margin: 10px 0; color: var(--yellow); font: 40px/.9 var(--display); }
.wallet-help p { color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.65; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .site-nav { position: fixed; inset: 76px 0 auto; display: grid; gap: 0; padding: 12px 20px 20px; background: rgba(9,10,8,.98); border-bottom: 2px solid var(--yellow); transform: translateY(-130%); transition: transform .25s ease; }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav a { padding: 15px; border-bottom: 1px solid rgba(214,253,82,.16); }
  .site-nav .nav-launch { margin-top: 10px; text-align: center; }
  .nav-toggle { justify-self: end; display: grid; gap: 5px; width: 42px; height: 38px; align-content: center; padding: 8px; color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }
  .nav-toggle span:not(.sr-only) { display: block; height: 2px; background: var(--yellow); }
  .wallet-pill { display: none; }
  .hero__art { background-position: 61% center; }
  .hero__shade { background: linear-gradient(90deg, rgba(4,5,4,.96) 0%, rgba(4,5,4,.88) 38%, rgba(4,5,4,.24) 72%), linear-gradient(0deg, rgba(4,5,4,.75), transparent); }
  .hero__stamp { width: 120px; right: 18px; top: 25px; }
  .hero__stamp b { font-size: 40px; }
  .lore__grid { grid-template-columns: .9fr 1.1fr; gap: 55px; }
  .route-map { grid-template-columns: repeat(2, 1fr); }
  .route-map::before { display: none; }
  .route-map article:nth-child(even) { margin-top: 0; }
  .meme-lab__grid { gap: 50px; }
}

@media (max-width: 720px) {
  :root { --shell: min(100% - 28px, 620px); }
  body { padding-bottom: 56px; }
  .ticker { height: 26px; line-height: 26px; }
  .site-header { top: 0; height: 64px; padding: 0 14px; }
  .site-nav { inset: 64px 0 auto; }
  .brand__name { font-size: 35px; }
  .brand__compass { width: 30px; height: 30px; }
  .hero { min-height: 800px; align-items: end; }
  .hero__art { background-position: 69% top; background-size: auto 69%; background-repeat: no-repeat; }
  .hero__shade { background: linear-gradient(0deg, #060706 0%, #060706 40%, rgba(6,7,6,.3) 70%, rgba(6,7,6,.04) 100%); }
  .hero__content { align-self: end; padding: 390px 0 70px; }
  .eyebrow { font-size: 8px; }
  .hero h1 { margin-top: 15px; }
  .hero__tiny { font-size: 11px; letter-spacing: .25em; }
  .hero__nami { font-size: clamp(95px, 31vw, 150px); }
  .hero__storm { font-size: clamp(54px, 17vw, 82px); }
  .hero__lede { margin: 22px 0; font-size: 14px; }
  .hero__actions { display: grid; grid-template-columns: 1fr; }
  .btn--large { width: 100%; }
  .launch-chip { gap: 7px; }
  .launch-chip span:nth-child(2) { display: none; }
  .launch-chip button { font-size: 7px; }
  .hero__stamp { width: 92px; right: 15px; top: 17px; box-shadow: 4px 4px 0 var(--orange); }
  .hero__stamp b { font-size: 31px; }
  .hero__stamp span { font-size: 9px; }
  .hero__stamp small { width: 70px; font-size: 5px; }
  .scroll-cue { display: none; }
  .signal { grid-template-columns: repeat(2, 1fr); }
  .signal div { padding: 14px; border-bottom: 2px solid var(--black); }
  .signal strong { font-size: 20px; }
  .section { padding-top: 75px; padding-bottom: 75px; }
  .section-head { display: grid; margin-bottom: 30px; }
  .section h2 { font-size: clamp(62px, 22vw, 98px); }
  .section-head p { font-size: 13px; }
  .mode-deck { box-shadow: 7px 7px 0 rgba(255,106,33,.82); }
  .mode-deck__visual { aspect-ratio: .92; }
  .mode-deck__visual img { width: 300%; max-width: none; object-fit: cover; object-position: left; }
  .mode-deck[data-mode="mirage"] img { transform: translateX(-33.333%); }
  .mode-deck[data-mode="tangerine"] img { transform: translateX(-66.666%); }
  .mode-deck__readout { left: 10px; right: 10px; bottom: 10px; min-width: 0; }
  .mode-controls { grid-template-columns: 1fr; }
  .mode-btn { border-right: 0; }
  .forecast-generator { display: grid; padding: 17px; }
  .forecast-generator p { font-size: 20px; }
  .forecast-generator__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .lore__grid, .meme-lab__grid, .faq__grid { grid-template-columns: 1fr; }
  .wanted-card { max-width: 420px; margin: 0 auto; }
  .wanted-card__pin { right: -7px; }
  .lore__copy { padding-top: 25px; }
  .route-map { grid-template-columns: 1fr; }
  .route-map article { min-height: 265px; padding-top: 82px; }
  .route-map p { min-height: auto; }
  .meme-lab__copy { order: 1; }
  .meme-canvas-wrap { order: 0; }
  .faq__grid { gap: 35px; }
  .accordion summary { font-size: 20px; }
  .final-cta { padding: 85px 0; }
  .final-cta h2 { font-size: clamp(80px, 28vw, 130px); }
  .final-cta h2 span { -webkit-text-stroke-width: 2px; text-shadow: 5px 5px 0 var(--black); }
  .final-cta__bolt { font-size: 420px; left: -20%; }
  .footer__top, .footer__fine { display: grid; }
  .footer__links { gap: 16px; }
  .mobile-dock { position: fixed; inset: auto 0 0; z-index: 90; display: grid; grid-template-columns: 1fr 1.2fr; height: 56px; border-top: 2px solid var(--black); }
  .mobile-dock button, .mobile-dock a { display: grid; place-items: center; border: 0; text-decoration: none; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
  .mobile-dock button { color: var(--yellow); background: var(--black); }
  .mobile-dock a { color: var(--black); background: var(--yellow); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .hero__nami, .section h2 em { -webkit-text-stroke: 0; text-shadow: none; }
}