:root { --bg: #0b1220; --bg-soft: #131c2e; --fg: #eaf0fb; --muted: #8b97ad; --accent: #3b82f6; --accent-press: #2563eb; --success: #22c55e; --error: #ef4444; --ring: rgba(59, 130, 246, 0.35); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: radial-gradient(120% 80% at 50% 0%, var(--bg-soft), var(--bg)); color: var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } .app { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px); text-align: center; } .app__header { margin-top: -8px; } .app__title { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: 0.5px; } .app__subtitle { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; } /* Big circular action button */ .dial { position: relative; width: min(72vw, 260px); aspect-ratio: 1; border: none; border-radius: 50%; background: linear-gradient(160deg, #1b2842, #0e1830); color: var(--fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 0.12s ease, box-shadow 0.2s ease; -webkit-tap-highlight-color: transparent; user-select: none; } .dial__ring { position: absolute; inset: 10px; border-radius: 50%; border: 2px solid var(--ring); transition: border-color 0.25s ease; } .dial__icon { color: var(--accent); transition: color 0.25s ease; } .dial__label { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.3px; } .dial:active { transform: scale(0.97); } .dial:disabled { cursor: default; } /* State styling driven by [data-state] on */ body[data-state="connecting"] .dial__ring { border-color: var(--accent); border-top-color: transparent; animation: spin 0.9s linear infinite; } body[data-state="connecting"] .dial__icon { color: var(--accent); } body[data-state="success"] .dial { box-shadow: 0 0 0 4px rgba(34,197,94,0.25), 0 18px 50px rgba(0,0,0,0.45); } body[data-state="success"] .dial__ring { border-color: var(--success); animation: pop 0.4s ease; } body[data-state="success"] .dial__icon { color: var(--success); } body[data-state="error"] .dial__ring { border-color: var(--error); } body[data-state="error"] .dial__icon { color: var(--error); } .status { min-height: 1.4em; margin: 0; font-size: 1rem; color: var(--muted); max-width: 320px; transition: color 0.2s ease; } body[data-state="success"] .status { color: var(--success); } body[data-state="error"] .status { color: var(--error); } body[data-state="connecting"] .status { color: var(--accent); } .app__footer { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 16px); left: 0; right: 0; color: var(--muted); font-size: 0.8rem; opacity: 0.7; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } @media (prefers-color-scheme: light) { :root { --bg: #eef2f9; --bg-soft: #ffffff; --fg: #0b1220; --muted: #5a677c; } .dial { background: linear-gradient(160deg, #ffffff, #eef2f9); } }