:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; background: #101111; color: #f8f9f8; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); }
main { width: min(100%, 340px); }
[hidden] { display: none !important; }
section { text-align: center; }
h1 { font-size: 30px; font-weight: 400; margin: 0 0 24px; letter-spacing: -.7px; }
#digits { height: 56px; font-size: 32px; letter-spacing: 7px; margin: 0 0 28px; font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; touch-action: manipulation; user-select: none; }
button:focus-visible { outline: 2px solid #a2efb9; outline-offset: 5px; }
button:active { filter: brightness(1.5); transform: scale(.95); }
#keypad { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 16px 20px; }
#keypad button { background: #292b2b; width: min(82px, 22vw); height: min(82px, 22vw); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#keypad span { font-size: 36px; font-weight: 300; line-height: 39px; }
#keypad small { font-size: 10px; font-weight: 600; letter-spacing: 2px; line-height: 15px; padding-left: 2px; }
.dial-actions { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; align-items: center; margin-top: 24px; }
.round { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; }
.green { background: #2cc45d; }.red { background: #eb4747; }.gray { background: #292b2b; }
button:disabled { opacity: .4; cursor: default; transform: none; filter: none; }
svg { width: 30px; height: 30px; fill: currentColor; }
#backspace { background: none; font-size: 28px; width: 68px; height: 68px; color: #9b9f9e; }
#in-call { min-height: 500px; display: flex; flex-direction: column; align-items: center; }
#in-call h1 { margin: 20px 0 12px; }
#call-detail { font-size: 20px; color: #939b97; margin: 0; font-variant-numeric: tabular-nums; min-height: 26px; }
.orb { height: 112px; width: 112px; border-radius: 50%; margin: 64px auto; background: radial-gradient(circle at 35% 30%, #b3e9ca, #50b77b 40%, #24593c 78%); box-shadow: 0 0 60px #2b9d5120; }
body[data-state="failed"] .orb, body[data-state="ended"] .orb { filter: grayscale(1); opacity: .35; }
#call-title:focus { outline: none; }
.controls { display: flex; gap: 52px; margin-top: auto; }
.control { background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; }
.control[aria-pressed="true"] .round { background: #f0f1f0; color: #151818; }
#again { margin-top: auto; padding: 20px; background: none; color: #bdc6c0; }
@media (max-height: 650px) { #keypad button { width: min(68px, 22vw); height: min(68px, 22vw); } #keypad { gap: 12px; } #digits { margin-bottom: 12px; } h1 { margin-bottom: 12px; } #in-call { min-height: 420px; } .orb { margin: 45px auto; } }
@media (prefers-reduced-motion: no-preference) { body[data-state="connected"] .orb { animation: breathe 4s ease-in-out infinite; } body[data-state="calling"] .orb { animation: breathe 1.5s ease-in-out infinite; } @keyframes breathe { 50% { transform: scale(1.04); box-shadow: 0 0 65px #2b9d5130; } } }