html[data-spw-opening] { overflow: hidden; }
spw-hello-intro { display: block; height: 0; --hello-bg: #080B12; --hello-fg: #f3e7cf; }
spw-hello-intro[hidden] { display: none; }
spw-hello-intro .spw-hi-screen { position: fixed; inset: 0 0 auto; z-index: 1000; height: 100svh; background: var(--hello-bg); color: var(--hello-fg); will-change: transform; }
spw-hello-intro .spw-hi-curve { position: absolute; bottom: 1px; left: 0; width: 100%; height: 10svh; transform: translateY(100%); overflow: hidden; pointer-events: none; }
spw-hello-intro .spw-hi-curve i { position: absolute; display: block; left: 50%; width: 150%; height: 745%; border-radius: 50%; background: var(--hello-bg); transform: translate(-50%, -86.58%); }
spw-hello-intro .spw-hi-label { position: absolute; top: calc(50% - 50px); left: 50%; z-index: 1; margin: 0; transform: translate(-50%, -50%); font: 400 clamp(36px, 5vw, 68px)/1.2 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.025em; white-space: nowrap; opacity: 0; }
spw-hello-intro .spw-hi-greeting { display: flex; align-items: center; gap: .5em; }
spw-hello-intro .spw-hi-dot { width: .16em; height: .16em; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
spw-hello-intro .spw-hi-skip { position: absolute; right: clamp(22px, 4vw, 64px); bottom: 25px; z-index: 1; padding: 10px; color: inherit; text-decoration: none; font: 11px/1.5 'Segoe UI', 'Microsoft YaHei', sans-serif; letter-spacing: .08em; opacity: .65; }
spw-hello-intro .spw-hi-skip:hover { opacity: 1; }
spw-hello-intro .spw-hi-skip:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 540px) { spw-hello-intro .spw-hi-curve { height: 5svh; } spw-hello-intro .spw-hi-label { top: calc(50% - 30px); } }
@media (prefers-reduced-motion: reduce) { spw-hello-intro { display: none; } }