@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600&display=swap');

:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #11172c; color: #fbf5e8; font-family: Manrope, Arial, sans-serif; }

.site-shell {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(circle at 51% 41%, #283659 0%, #171f39 37%, #10152a 77%);
}
.grain { position: absolute; inset: 0; z-index: -1; opacity: .14; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.orb { position: absolute; width: 46vmax; aspect-ratio: 1; border-radius: 50%; filter: blur(1px); opacity: .57; z-index: -1; animation: drift 15s ease-in-out infinite alternate; }
.orb-one { background: radial-gradient(circle at 38% 36%, #ee9976 0 2%, #9b6fc2 28%, transparent 67%); top: -27vmax; left: -19vmax; }
.orb-two { background: radial-gradient(circle at 45% 45%, #7bc8cd 0, #5479c1 26%, transparent 66%); bottom: -34vmax; right: -23vmax; animation-delay: -7s; }

.arrival { width: min(100%, 44rem); text-align: center; transform: translateY(-1.1rem); }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: 0 0 2.5rem; color: #bdc6dd; font: 500 .72rem/1 'DM Mono', monospace; letter-spacing: .17em; }
.eyebrow span { width: .48rem; height: .48rem; border-radius: 50%; background: #f4b589; box-shadow: 0 0 0 .3rem rgb(244 181 137 / .12); }
.mark { position: relative; width: 7.5rem; height: 5.5rem; margin: 0 auto 2.5rem; transform: rotate(-10deg); }
.mark i { position: absolute; display: block; width: 4.9rem; height: 1.3rem; border: 1px solid rgb(255 244 221 / .88); border-radius: 100% 0 100% 0; transform-origin: right center; }
.mark i:nth-child(1) { top: .25rem; left: .3rem; transform: rotate(17deg); }
.mark i:nth-child(2) { top: 1.9rem; left: 1.2rem; transform: rotate(-10deg); opacity: .76; }
.mark i:nth-child(3) { top: 3.4rem; left: 2.5rem; transform: rotate(-35deg); opacity: .52; }
h1 { margin: 0; font: 400 clamp(3rem, 8.5vw, 6.7rem)/.92 'DM Serif Display', Georgia, serif; letter-spacing: -.055em; text-wrap: balance; }
h1 em { color: #f0ad8e; font-style: italic; }
.note { margin: 2rem auto 0; max-width: 22rem; color: #c4cce0; font-size: clamp(1rem, 1.8vw, 1.14rem); line-height: 1.65; }
.signal { position: absolute; bottom: 2rem; left: 2rem; display: inline-flex; align-items: center; gap: .65rem; border: 0; padding: .65rem .15rem; background: transparent; color: #c4cce0; font: 500 .69rem/1 'DM Mono', monospace; letter-spacing: .09em; cursor: pointer; transition: color .25s ease; }
.signal:hover, .signal:focus-visible { color: #fff6e6; outline: 0; }
.signal-dot { width: .5rem; height: .5rem; border: 1px solid currentColor; border-radius: 50%; transition: background .25s ease, transform .25s ease; }
.signal[aria-pressed='true'] .signal-dot { background: #f4b589; border-color: #f4b589; transform: scale(1.25); }
.footnote { position: absolute; right: 2rem; bottom: 2rem; margin: 0; color: #aeb9d3; font: .75rem/1 'DM Mono', monospace; letter-spacing: .16em; }
@keyframes drift { to { transform: translate3d(7vmax, 5vmax, 0) scale(1.12); } }
@media (max-width: 34rem) { .site-shell { padding: 1.5rem; } .signal { left: 1.5rem; bottom: 1.25rem; } .footnote { right: 1.5rem; bottom: 1.45rem; } .mark { transform: scale(.86) rotate(-10deg); margin-bottom: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }