* { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { background: var(--navy); color: var(--white); font-family: var(--pixel-font); line-height: 1.65; } button, input { font: inherit; } button { min-height: 44px; border: 2px solid var(--cyan); padding: .8rem 1rem; color: var(--white); background: var(--navy-soft); cursor: pointer; transition: transform 140ms var(--ease-out), background-color 140ms ease, border-color 140ms ease; } button:hover { background: #182553; } button:active { transform: scale(.97); } button:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; } .button-primary { border-color: var(--yellow); color: var(--yellow); } .button-danger { border-color: var(--danger); color: var(--danger); } .eyebrow { color: var(--cyan); letter-spacing: .12em; font-size: .75rem; } .launcher { display: grid; place-items: center; padding: 2rem; min-height: 100vh; background: radial-gradient(circle at 50% 20%, #20265f 0, var(--navy) 55%); } .launcher-card { width: min(680px, 100%); padding: clamp(2rem, 6vw, 5rem); border: 4px solid var(--violet); background: rgba(17,24,58,.92); box-shadow: 10px 10px 0 rgba(84,230,255,.25); } h1 { color: var(--yellow); line-height: 1.3; } .launcher-actions { display: grid; gap: .9rem; margin-top: 2rem; } #launcher-message { color: var(--pink); min-height: 2em; } .error { color: var(--danger); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }