:root{color-scheme:dark;font-family:Inter,Segoe UI,Arial,sans-serif;background:#080e1b;color:#edf2ff;--blue:#4a8eff;--muted:#94a3ba}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 25%,#14274677,transparent 52%),#080e1b;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #9ac4ff;outline-offset:4px}.brand{max-width:1080px;margin:auto;padding:36px 24px;display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:2px}.brand b{font-size:12px;letter-spacing:2px;color:#84b6ff}.brand small{display:block;font-size:11px;font-weight:400;letter-spacing:1px;color:var(--muted);margin-top:6px}.brand-icon{background:#367bf0;border-radius:13px;width:42px;height:42px;display:grid;place-items:center;font-size:25px}main{max-width:1080px;margin:24px auto 64px;padding:0 24px;display:grid;grid-template-columns:1fr 390px;gap:80px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2.4px;color:#86b5ff}h1{font-size:clamp(38px,4.5vw,58px);line-height:1.1;letter-spacing:-2px;margin:22px 0}h1 em{font-style:normal;color:#6fa8ff}.intro>p{color:var(--muted);line-height:1.8;max-width:410px;font-size:15px}.steps{list-style:none;padding:0;margin:36px 0;display:grid;gap:23px}.steps li{display:flex;gap:15px;align-items:center}.steps b{border:1px solid #273449;color:#7eacfa;font-size:11px;border-radius:12px;padding:12px}.steps span{font-size:14px}.steps small{display:block;color:var(--muted);font-size:12px;margin-top:6px}.intro .note{font-size:12px}.dialer{padding:25px;border-radius:26px;border:1px solid #29364b;background:linear-gradient(150deg,#182235,#101827);box-shadow:0 24px 80px #0004}.panel-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.2px;color:#afbed3}.status{letter-spacing:0;color:#afbed3;display:flex;align-items:center;gap:6px}.status:before{content:'';width:6px;height:6px;background:#77869d;border-radius:50%}.status.connected:before{background:#66dfa9}.call-display{text-align:center;min-height:193px;padding-top:28px}.voice-mark{display:flex;align-items:center;justify-content:center;gap:4px;height:32px;margin-bottom:17px}.voice-mark i{display:block;width:4px;height:14px;border-radius:5px;background:#639efe}.voice-mark i:nth-child(2),.voice-mark i:nth-child(4){height:23px}.voice-mark i:nth-child(3){height:32px}h2{font-size:20px;margin:0 0 9px}#message{color:var(--muted);font-size:12px;line-height:1.5;min-height:36px;margin:0 0 9px}#timer{font:16px Consolas,monospace;color:#afc1dc}.start,.hangup,.resume{width:100%;min-height:46px;border-radius:12px;border:0;font-weight:600;font-size:13px}.start{background:#4687f5;color:white;display:flex;align-items:center;justify-content:center;gap:28px}.start:disabled{opacity:.45}.hangup{background:#a83244;color:white;margin-top:9px}.hangup:disabled{background:#253045;color:#a4afc0}.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}fieldset{border:0;padding:0;margin:22px 0}.keys button{height:53px;background:#1d2b41;border:1px solid #30415c;border-radius:12px;color:#ecf3ff;font-size:22px}.keys small{display:block;color:#a5b5ce;font-size:8px;letter-spacing:1.7px;margin-top:2px}.keys button:disabled{opacity:.5}.keys button:not(:disabled):hover{background:#2b456a}.volume{display:flex;align-items:center;gap:18px;color:#a9b7cd;font-size:12px}.volume input{width:100%;accent-color:#6aa4ff}.keyboard{font-size:10px;color:#8a9bb5;text-align:center;line-height:1.5;margin:18px 0 0}.resume{background:#2a4969;color:white;margin-top:12px}.resume[hidden]{display:none}footer{max-width:1080px;padding:24px;margin:auto;border-top:1px solid #1c293b;color:#71819a;font-size:10px;letter-spacing:1.4px;display:flex;justify-content:space-between}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){.brand{padding:24px}main{grid-template-columns:1fr;gap:28px;margin-top:12px;max-width:480px}.intro h1{font-size:38px}.steps{display:none}.intro .note{margin-bottom:0}.dialer{padding:22px}.intro>p{font-size:14px}footer{margin:0 24px;padding:20px 0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}