:root { font-family: Inter, system-ui, sans-serif; color: #f5f7ff; background: #080b16; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top, #1a2140, #080b16 60%); }
main { width: min(720px, calc(100vw - 32px)); padding: 40px; border: 1px solid #303959; border-radius: 24px; background: rgba(12, 16, 32, .92); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.eyebrow { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .18em; color: #9da9d7; font-size: .75rem; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 4rem); }
.status { display: flex; gap: 24px; flex-wrap: wrap; margin: 32px 0; color: #aeb8de; }
.status strong { color: #fff; }
.grid { display: grid; grid-template-columns: repeat(2, 112px); gap: 16px; justify-content: center; margin: 40px 0; transform: rotate(45deg); }
.grid button { aspect-ratio: 1; border: 1px solid #7180bb; border-radius: 18px; background: #171d36; color: white; font-size: 1.4rem; transform: rotate(-45deg); cursor: pointer; }
.grid button[aria-pressed="true"] { background: #e15f87; border-color: #ffb1c8; box-shadow: 0 0 32px rgba(225, 95, 135, .45); }
.message { min-height: 1.5em; text-align: center; color: #cbd2ee; }
.submit { width: 100%; padding: 14px 18px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; background: #eef1ff; color: #111528; }
.submit:disabled { opacity: .5; cursor: not-allowed; }
details { margin-top: 24px; color: #97a3cf; }
pre { overflow: auto; padding: 16px; border-radius: 12px; background: #050711; color: #dce2ff; }