:root {
  color-scheme: dark;
  --base: #050911;
  --ink: #e8f0f7;
  --muted: #97a7b8;
  --accent: #a8d9ff;
  --glow: 80, 148, 209;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--base);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="market"] { --accent: #c4b8ff; --glow: 136, 104, 210; }
:root[data-theme="wallet"] { --accent: #9ee7d8; --glow: 49, 158, 147; }
* { box-sizing: border-box; }
html { min-width: 280px; overflow-x: clip; }
body { margin: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; overflow-x: hidden; }
.atmosphere, .grid { position: fixed; inset: 0; pointer-events: none; z-index: -2; }
.atmosphere {
  background: radial-gradient(ellipse at 50% 48%, rgba(var(--glow), .11), transparent 57%),
    radial-gradient(ellipse at 50% 110%, rgba(var(--glow), .10), transparent 48%);
}
.grid {
  background-image: linear-gradient(rgba(159, 188, 216, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 188, 216, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 73%);
}
.masthead { padding: clamp(25px, 4vw, 56px) clamp(24px, 5vw, 80px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.identity { display: flex; align-items: center; gap: 15px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.035em; }
.identity svg { width: 32px; height: 32px; color: var(--accent); flex-shrink: 0; }
.signature { display: flex; gap: 6px; }
.signature i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .8; }
.signature i:nth-child(2) { opacity: .45; }
.signature i:nth-child(3) { opacity: .2; }
main { position: relative; min-height: min(530px, calc(100svh - 190px)); display: grid; place-items: center; padding: 60px 24px 100px; overflow: hidden; }
.portal { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(750px, 85vw); aspect-ratio: 1; color: var(--accent); transform: translate(-50%, -53%) rotate(-23deg); opacity: .64; }
.portal svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(var(--glow), .18)); animation: turn 36s ease-in-out infinite alternate; }
h1 { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; font-size: clamp(82px, 12.6vw, 180px); line-height: .91; font-weight: 500; letter-spacing: -.085em; text-align: center; text-shadow: 0 4px 52px var(--base); }
h1 .soon { color: var(--accent); padding-right: .065em; }
footer { display: flex; justify-content: space-between; align-items: center; padding: 25px clamp(24px, 5vw, 80px) 33px; color: var(--muted); font-size: 13px; letter-spacing: .01em; }
.footer-mark svg { width: 20px; height: 20px; opacity: .36; }
@keyframes turn { from { transform: rotate(-4deg) scale(.98); } to { transform: rotate(7deg) scale(1.025); } }
@media (max-width: 600px) {
  .grid { background-size: 44px 44px; }
  main { min-height: 450px; padding: 60px 20px 86px; }
  .portal { width: 112vw; top: 49%; }
  h1 { font-size: clamp(78px, 21vw, 124px); }
  footer { padding-bottom: 24px; }
}
@media (max-height: 680px) and (min-width: 601px) {
  main { min-height: 360px; padding: 30px 24px 55px; }
  h1 { font-size: clamp(90px, 11vw, 142px); }
  .portal { width: min(510px, 72vw); }
}
@media (prefers-reduced-motion: reduce) { .portal svg { animation: none; } }