:root { --cyan: #00e5ff; --blue: #0091ea; --highlight: #4dd0e1; --pale: #b2ebf2; --bg: #03080d; --edge: rgba(0, 229, 255, 0.28); --danger: #ff5252; --mono: "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--pale); font-family: var(--mono); } body { display: grid; place-items: center; padding: 24px; overflow-x: hidden; } /* ── Ambient background ─────────────────────────────────────── */ .grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(0,229,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 45%, #000 18%, transparent 76%); } .scanline { position: fixed; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; height: 170px; background: linear-gradient(rgba(0,229,255,0), rgba(0,229,255,.05), rgba(0,229,255,0)); animation: sweep 7s linear infinite; } @keyframes sweep { from { transform: translateY(-170px); } to { transform: translateY(100vh); } } /* The renderer canvas is appended to ; during a session it owns the view. */ canvas { position: fixed; inset: 0; z-index: 5; } /* ── Card ───────────────────────────────────────────────────── */ .panel { position: relative; z-index: 2; width: min(560px, 100%); padding: clamp(24px, 5vw, 40px); border: 1px solid var(--edge); border-radius: 4px; background: linear-gradient(160deg, rgba(0,229,255,.06), rgba(0,145,234,.03)); box-shadow: 0 0 60px rgba(0,229,255,.09), inset 0 0 60px rgba(0,229,255,.03); text-align: center; } .panel[hidden] { display: none; } .brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; } .wordmark { margin: 0; font-size: clamp(19px, 4.4vw, 27px); font-weight: 500; letter-spacing: .3em; color: var(--cyan); text-shadow: 0 0 22px rgba(0,229,255,.5); } .reactor { width: 26px; height: 26px; border-radius: 50%; flex: none; border: 2px solid var(--cyan); box-shadow: 0 0 14px var(--cyan), inset 0 0 10px rgba(0,229,255,.7); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } } .tagline { margin: 14px 0 26px; font-size: 10.5px; letter-spacing: .18em; color: rgba(178,235,242,.5); } .status { margin: 0 0 22px; min-height: 2.6em; font-size: 12.5px; line-height: 1.75; color: var(--highlight); } .status.error { color: var(--danger); } /* ── Controls ───────────────────────────────────────────────── */ .token-row { display: flex; gap: 8px; margin-bottom: 18px; } .token-row[hidden] { display: none; } input[type="password"] { flex: 1; min-width: 0; padding: 13px 14px; background: rgba(0,229,255,.04); border: 1px solid var(--edge); border-radius: 2px; color: var(--pale); font-family: var(--mono); font-size: 13px; outline: none; } input::placeholder { color: rgba(178,235,242,.3); } input:focus { border-color: var(--cyan); box-shadow: 0 0 14px rgba(0,229,255,.22); } button { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; cursor: pointer; border-radius: 2px; padding: 13px 20px; background: rgba(0,229,255,.08); color: var(--cyan); border: 1px solid var(--edge); transition: background .18s, box-shadow .18s; } button:hover { background: rgba(0,229,255,.18); box-shadow: 0 0 16px rgba(0,229,255,.25); } .enter { display: block; width: 100%; padding: 17px; border: none; font-weight: 600; font-size: 12px; letter-spacing: .24em; color: var(--bg); background: linear-gradient(135deg, var(--cyan), var(--blue)); } .enter[hidden] { display: none; } .enter:hover { box-shadow: 0 0 30px rgba(0,229,255,.55); } .hint { margin: 18px 0 0; font-size: 11px; line-height: 1.8; color: rgba(178,235,242,.55); } .hint[hidden] { display: none; } .hint strong { color: var(--cyan); font-weight: 500; } /* ── Legend ─────────────────────────────────────────────────── */ .legend { display: flex; flex-direction: column; gap: 7px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(0,229,255,.14); font-size: 10px; letter-spacing: .07em; color: rgba(178,235,242,.38); } .legend b { color: rgba(0,229,255,.7); font-weight: 500; } @media (prefers-reduced-motion: reduce) { .scanline, .reactor { animation: none; } }