@font-face {
  font-family: Inter;
  src: url('./InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root { color-scheme: dark; --navy: #0b1428; --cream: #f2eee5; --cyan: #68efff; --cobalt: #3455ee; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: var(--cream); color: var(--navy); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
a { color: inherit; }
.svg-definitions { width: 0; height: 0; position: absolute; overflow: hidden; }
.topbar { padding: 21px 4.7%; background: var(--cream); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #0b14282b; gap: 15px; }
.mini-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.mini-brand svg { width: 26px; height: 29px; fill: currentColor; }
.mini-brand span { font-size: 24px; font-weight: 900; letter-spacing: -.085em; transform: skew(-7deg); }
.header-note, .edition { font-size: 9px; font-weight: 750; letter-spacing: .07em; }
.edition b { border: 1px solid; border-radius: 50%; padding: 6px; margin-left: 7px; }
.hero { --hero-bg: var(--navy); --hero-ink: var(--cream); --hero-accent: var(--cyan); background: var(--hero-bg); color: var(--hero-ink); padding: 26px 4.7% 22px; overflow: hidden; transition: color .2s, background .2s; }
body[data-palette="paper"] .hero { --hero-bg: var(--cream); --hero-ink: var(--navy); --hero-accent: var(--cobalt); }
body[data-palette="electric"] .hero { --hero-bg: var(--cobalt); --hero-ink: var(--cream); --hero-accent: var(--cyan); }
.hero-meta { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 9px; letter-spacing: .1em; font-weight: 600; }
.palette { display: flex; gap: 6px; }
.palette button { border: 1px solid currentColor; color: inherit; background: transparent; border-radius: 0; font-size: 9px; font-weight: 650; letter-spacing: .07em; padding: 9px 12px; }
.palette button[aria-pressed="true"] { background: var(--hero-ink); color: var(--hero-bg); border-color: var(--hero-ink); }
.hero-logo { display: flex; align-items: center; justify-content: space-between; gap: 3%; margin: 24px 0 38px; }
.wordmark { font-size: clamp(100px, 20.1vw, 330px); font-weight: 900; line-height: 1; letter-spacing: -.091em; margin: 0 0 0 -.022em; transform: skew(-7deg); white-space: nowrap; }
.word-dot { color: var(--hero-accent); }
.seal-wrap { width: 20%; max-width: 282px; padding-top: 19px; position: relative; flex-shrink: 0; }
.seal { display: block; width: 100%; aspect-ratio: 1; --seal-paper: var(--cream); color: var(--navy); }
.hero-seal { --seal-paper: var(--hero-accent); transform: rotate(14deg); filter: drop-shadow(7px 9px 0 #0003); }
.seal-caption { display: block; font-size: 8px; font-weight: 650; line-height: 1.4; margin: 14px 0 0 24px; letter-spacing: .08em; }
.hero-bottom { display: flex; align-items: end; justify-content: space-between; padding: 0 2px 34px; }
.hero-bottom > p { margin: 0; font-size: clamp(38px, 6.2vw, 98px); line-height: .94; letter-spacing: -.065em; font-weight: 850; }
.hero-bottom > p span { color: var(--hero-accent); }
.hero-aside { width: 31%; display: grid; grid-template-columns: 47px 1fr; gap: 15px 20px; align-items: center; padding-bottom: 3px; }
.spark { width: 100%; aspect-ratio: 1; fill: currentColor; }
.hero-aside .spark { color: var(--hero-accent); }
.hero-aside p { font-size: 14px; line-height: 1.45; margin: 0; font-weight: 500; letter-spacing: -.03em; }
.jump { grid-column: 2; display: inline-flex; align-items: center; justify-content: space-between; text-decoration: none; padding: 10px 0; border-bottom: 1px solid currentColor; font-size: 9px; letter-spacing: .05em; max-width: 205px; }
.jump span { font-size: 20px; }
.hero-coordinate { display: block; font-size: 8px; font-weight: 500; letter-spacing: .11em; opacity: .62; }
.ticker { overflow: hidden; background: var(--cyan); border-bottom: 2px solid var(--navy); padding: 14px 0; }
.ticker div { width: max-content; font-weight: 850; font-size: 16px; letter-spacing: -.04em; word-spacing: 3px; transform: translateX(-35px); }
.ticker span { display: inline-block; padding: 0 31px; font-size: 21px; vertical-align: -1px; }
.merch { display: grid; grid-template-columns: 1fr 1fr; }
.cup-scene, .sticker-scene { position: relative; min-height: 630px; overflow: hidden; padding: 27px 6.6%; }
.cup-scene { background: var(--cobalt); color: var(--cream); }
.sticker-scene { background: #dfdcd4; color: var(--navy); }
.panel-label { display: flex; justify-content: space-between; align-items: center; gap: 15px; position: relative; z-index: 2; font-size: 8px; letter-spacing: .08em; font-weight: 650; }
.cup-bg { position: absolute; top: 20%; left: 5%; font-size: clamp(66px, 8vw, 140px); font-weight: 900; line-height: .83; letter-spacing: -.075em; color: #f2eee51f; transform: rotate(-5deg); }
.cup { position: absolute; height: 88%; width: 89%; left: 4%; top: 9%; overflow: visible; }
.cup-seal { color: var(--cream); --seal-paper: var(--navy); }
.cup-note { position: absolute; right: 7%; bottom: 18%; background: var(--cyan); color: var(--navy); font-size: clamp(17px,2vw,27px); padding: 20px; line-height: .98; font-weight: 900; letter-spacing: -.05em; transform: rotate(9deg); box-shadow: 4px 5px 0 #0b14284d; }
.scene-footer { position: absolute; bottom: 26px; left: 6.6%; font-size: 8px; font-weight: 650; letter-spacing: .06em; }
.sticker-board { position: absolute; inset: 70px 22px 65px; }
.round-sticker { position: absolute; left: 5%; top: 2%; width: 46%; max-width: 280px; transform: rotate(-15deg); border-radius: 50%; box-shadow: 3px 9px 14px #0b142824; background: var(--cream); padding: 5px; }
.round-sticker .seal { --seal-paper: var(--cream); }
.type-sticker { position: absolute; right: 2%; top: 14%; background: var(--navy); color: var(--cream); font-size: clamp(30px,4.4vw,71px); line-height: 1.1; font-weight: 900; letter-spacing: -.09em; transform: rotate(10deg) skew(-7deg); padding: 13px 26px 17px 17px; border: 5px solid var(--cream); box-shadow: 3px 7px 12px #0b142822; }
.wild-sticker { position: absolute; right: 10%; bottom: 6%; width: 47%; aspect-ratio: 1; background: var(--cyan); border: 6px solid var(--cream); padding: 23px; transform: rotate(-8deg); box-shadow: 3px 7px 12px #0b142822; display: flex; flex-direction: column; justify-content: space-between; }
.wild-sticker svg { width: 29px; }
.wild-sticker p { margin: 10px 0 0; font-size: clamp(21px,2.6vw,42px); font-weight: 900; letter-spacing: -.06em; line-height: .92; }
.wild-sticker em { font-style: normal; color: var(--cobalt); }
.url-sticker { position: absolute; bottom: 11%; left: 1%; padding: 12px 20px; background: var(--cream); border: 2px solid var(--navy); font-size: 23px; font-weight: 750; letter-spacing: -.065em; transform: rotate(5deg); box-shadow: 3px 5px 0 #0b142820; }
.identity { padding: 55px 4.7%; background: var(--cream); }
.identity-title { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 28px; }
.identity-title h2 { margin: 0; font-size: clamp(25px,3.3vw,49px); font-weight: 900; line-height: .96; letter-spacing: -.065em; }
.identity-title p { font-size: 11px; line-height: 1.7; margin: 0; }
.identity-grid { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 12px; }
.identity-card { min-height: 270px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.identity-card > span { position: absolute; left: 19px; top: 18px; font-size: 8px; font-weight: 650; letter-spacing: .08em; }
.ink { background: var(--navy); color: var(--cream); }
.ink .seal { width: 165px; margin-top: 20px; color: var(--cream); --seal-paper: var(--navy); }
.cream { background: #e4e0d7; }
.small-wordmark { font-size: clamp(40px,5.6vw,95px); font-weight: 900; line-height: 1; letter-spacing: -.09em; transform: skew(-7deg); padding: 15px 10px 0 0; }
.blue { background: var(--cyan); color: var(--navy); }
.solo-palm { width: 110px; height: 125px; fill: currentColor; margin-top: 13px; }
.app-strip { margin: 0 4.7% 55px; display: flex; align-items: center; gap: 30px; background: var(--navy); color: var(--cream); padding: 26px 28px; position: relative; }
.app-brand { display: flex; align-items: center; gap: 8px; }
.app-brand svg { width: 24px; height: 29px; fill: var(--cyan); }
.app-brand b { font-size: 25px; font-weight: 900; letter-spacing: -.085em; transform: skew(-7deg); }
.app-prompt { margin-left: auto; font-size: 12px; color: #c2c7d2; }
.app-balance { font-size: 11px; margin-left: auto; }
.app-balance b { color: var(--cyan); padding-left: 9px; }
.app-caption { position: absolute; bottom: -18px; left: 0; font-size: 7px; letter-spacing: .09em; color: var(--navy); }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 27px 4.7%; border-top: 1px solid #0b142833; }
footer b { font-size: 28px; letter-spacing: -.08em; font-weight: 900; transform: skew(-7deg); }
footer p, footer > span { font-size: 8px; font-weight: 650; letter-spacing: .09em; }
@media (min-width: 1650px) { .hero { padding-left: max(4.7%, calc((100% - 1550px)/2)); padding-right: max(4.7%, calc((100% - 1550px)/2)); } }
@media (max-width: 800px) {
  .header-note { display: none; }
  .topbar { padding: 18px 5%; }
  .hero { padding: 23px 5% 21px; }
  .hero-meta { font-size: 7px; gap: 7px; }
  .palette { gap: 4px; }
  .palette button { padding: 8px; font-size: 7px; }
  .hero-logo { margin: 42px 0 45px; gap: 2%; }
  .wordmark { font-size: 20vw; }
  .seal-wrap { width: 22%; padding-top: 0; }
  .seal-caption { font-size: 6px; margin: 11px 0 0 8px; }
  .hero-bottom { padding-bottom: 35px; }
  .hero-bottom > p { font-size: 8.2vw; }
  .hero-aside { grid-template-columns: 1fr; width: 37%; gap: 10px; }
  .hero-aside .spark { display: none; }
  .hero-aside p { font-size: 11px; }
  .jump { grid-column: 1; font-size: 7px; padding: 4px 0; }
  .ticker { padding: 10px 0; }
  .ticker div { font-size: 13px; }
  .ticker span { padding: 0 20px; }
  .merch { grid-template-columns: 1fr; }
  .cup-scene, .sticker-scene { min-height: 590px; }
  .cup-bg { font-size: 16vw; }
  .cup-note { font-size: 26px; }
  .sticker-board { max-width: 580px; width: calc(100% - 44px); margin: auto; }
  .type-sticker { font-size: 60px; }
  .wild-sticker p { font-size: 40px; }
  .identity { padding: 39px 5%; }
  .identity-title { display: block; }
  .identity-title h2 { font-size: 37px; }
  .identity-title p { margin-top: 19px; font-size: 10px; }
  .identity-grid { grid-template-columns: 1fr 1fr; }
  .identity-card { min-height: 210px; }
  .identity-card.cream { grid-column: 1 / -1; grid-row: 2; min-height: 170px; }
  .ink .seal { width: 135px; }
  .small-wordmark { font-size: 76px; }
  .solo-palm { width: 80px; height: 100px; }
  .app-strip { margin: 0 5% 47px; padding: 21px 18px; gap: 10px; }
  .app-prompt { display: none; }
  footer { flex-wrap: wrap; }
  footer p { display: none; }
}
@media (max-width: 430px) {
  .hero-meta > span { max-width: 65px; line-height: 1.5; font-size: 6px; }
  .hero-logo { margin: 40px 0; }
  .wordmark { font-size: 19.5vw; }
  .seal-wrap { width: 24%; }
  .seal-caption { font-size: 5px; }
  .hero-aside p { font-size: 9px; }
  .hero-coordinate { font-size: 6px; }
  .cup-scene, .sticker-scene { min-height: 480px; }
  .panel-label { font-size: 6px; }
  .cup-bg { font-size: 18vw; top: 23%; }
  .cup { width: 106%; left: -5%; top: 8%; }
  .cup-note { font-size: 20px; padding: 16px; right: 6%; bottom: 17%; }
  .scene-footer { font-size: 6px; }
  .sticker-board { inset: 72px 17px 57px; width: calc(100% - 34px); }
  .round-sticker { width: 57%; left: 0; }
  .type-sticker { font-size: 39px; top: 24%; right: 0; padding: 8px 18px 12px 10px; border-width: 4px; }
  .wild-sticker { width: 53%; right: 4%; bottom: 3%; padding: 15px; border-width: 4px; }
  .wild-sticker p { font-size: 28px; }
  .wild-sticker svg { width: 20px; }
  .url-sticker { left: 1%; bottom: 6%; font-size: 18px; padding: 10px 15px; }
  .identity-title h2 { font-size: 31px; }
  .identity-card { min-height: 183px; }
  .identity-card > span { font-size: 6px; left: 12px; }
  .ink .seal { width: 117px; }
  .app-brand b { font-size: 23px; }
  .app-balance { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero { transition: none; } }