:root { color-scheme: dark; font-family: Manrope, system-ui, sans-serif; background: #07111f; color: #f6f8ff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; overflow: hidden; background: radial-gradient(circle at 15% 15%, #18365b 0, transparent 31rem), radial-gradient(circle at 88% 78%, #2d1545 0, transparent 29rem), #07111f; }
body::before { content: ""; position: fixed; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, black, transparent 72%); }
.shell { width: min(100% - 40px, 1080px); min-height: 100vh; margin: auto; padding: 36px 0 26px; display: flex; flex-direction: column; position: relative; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.brand-mark { display: grid; grid-template-columns: repeat(2, 7px); gap: 3px; transform: rotate(45deg); }.brand-mark i { width: 7px; height: 7px; display:block; background:#b8ff57; }.brand-mark i:nth-child(2),.brand-mark i:nth-child(3) { background:#82d5ff; }
.welcome-card { overflow: hidden; isolation: isolate; width: min(100%, 760px); margin: auto; text-align: center; padding: clamp(52px, 9vw, 94px) clamp(24px, 8vw, 80px); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: linear-gradient(125deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); box-shadow: 0 34px 80px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(16px); }
.welcome-card::before { content:""; position:absolute; z-index:-1; inset:0; background: radial-gradient(circle at 50% 0, rgba(184,255,87,.13), transparent 40%); }.spark { position:absolute; z-index:-1; border: 1px solid rgba(184,255,87,.5); border-radius: 50%; }.spark-one { width:260px;height:260px; left:-140px;bottom:-150px; }.spark-two { width:140px;height:140px; right:-75px;top:-70px; border-color:rgba(130,213,255,.55); }
.eyebrow, .footer { color:#b8ff57; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.18em; }.greeting { margin: 27px 0 2px; color:#c9d9ed; font-size:clamp(20px,3vw,28px); font-weight:500; } h1 { margin:0; font-size:clamp(42px,8vw,80px); line-height:1.12; letter-spacing:-.065em; overflow-wrap:anywhere; }.subtitle { max-width:480px; margin:25px auto 0; color:#b5c2d3; font-size:15px; line-height:1.75; }.uid-label { display:inline-block; margin-top:34px; padding:8px 11px; border-radius:7px; background:rgba(0,0,0,.24); color:#91a5bf; font:11px "DM Mono",monospace; }.uid-label code { color:#dce9f8; }.footer { margin:0; color:#7791af; text-align:center; }.footer span { display:inline-block; width:4px; height:4px; margin:0 8px 2px; background:#b8ff57; border-radius:50%; }.loader { width:35px;height:35px;margin:32px auto 17px;border:2px solid rgba(255,255,255,.2);border-top-color:#b8ff57;border-radius:50%;animation:spin .8s linear infinite; }.status { color:#b5c2d3; font-size:14px; } [hidden] { display:none!important; } @keyframes spin { to { transform:rotate(360deg); } } @media(max-width:520px) { .shell{width:min(100% - 28px,1080px);padding:25px 0 18px}.welcome-card{border-radius:22px}.brand{font-size:10px} }