@import "https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500&display=swap";:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Helvetica Neue,sans-serif}html{touch-action:manipulation;background:#000}body{overscroll-behavior:none;-webkit-overflow-scrolling:touch;background:#121212;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex}.ios-phone{color:#fff;background-color:#000;border:12px solid #222;border-radius:50px;width:375px;height:812px;position:relative;overflow:hidden;box-shadow:0 20px 50px #00000080}.dial-screen,.call-screen{box-sizing:border-box;flex-direction:column;height:100%;padding:40px 20px;display:flex}.number-display{flex-grow:1;justify-content:center;align-items:center;min-height:100px;display:flex;position:relative}.number{letter-spacing:2px;word-break:break-all;text-align:center;font-size:42px;font-weight:300}.number.placeholder{color:#555;font-size:28px}.backspace-btn{color:#ccc;cursor:pointer;background:0 0;border:none;padding:10px;transition:opacity .2s;position:absolute;right:10px}.backspace-btn:active{opacity:.5}.keypad{flex-direction:column;gap:15px;margin-bottom:30px;display:flex}.key-row{justify-content:space-evenly;display:flex}.key-btn{color:#fff;cursor:pointer;background-color:#333;border:none;border-radius:50%;justify-content:center;align-items:center;width:75px;height:75px;transition:background-color .1s;display:flex}.key-btn:active{background-color:#555}.key-number{font-size:32px;font-weight:400}.dial-actions{justify-content:center;margin-bottom:20px;display:flex}.call-btn{color:#fff;cursor:pointer;background-color:#34c759;border:none;border-radius:50%;justify-content:center;align-items:center;width:75px;height:75px;transition:background-color .2s;display:flex}.call-btn:disabled{opacity:.5;cursor:not-allowed;background-color:#1b5e20}.call-btn:active:not(:disabled){background-color:#2ea64b}.call-header{flex-direction:column;flex-grow:1;align-items:center;margin-top:40px;display:flex}.call-avatar{color:#888;margin-bottom:20px}.call-target{margin-bottom:10px;font-size:32px;font-weight:300}.call-status-text{color:#ccc;font-size:18px}.call-controls-grid{justify-content:space-evenly;margin-bottom:40px;display:flex}.control-item{color:#fff;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:8px;display:flex}.control-icon{background-color:#ffffff26;border-radius:50%;justify-content:center;align-items:center;width:65px;height:65px;transition:all .2s;display:flex}.control-item span{font-size:14px}.control-item.active .control-icon{background-color:#fff}.control-item.active .control-icon svg{fill:#000;color:#000!important}.control-item.active span{color:#fff}.in-call-keypad{box-sizing:border-box;background:#000000e6;width:100%;padding:20px;position:absolute;bottom:120px;left:0}.end-call-wrapper{justify-content:center;margin-bottom:40px;display:flex}.end-call-btn{color:#fff;cursor:pointer;background-color:#ff3b30;border:none;border-radius:50%;justify-content:center;align-items:center;width:75px;height:75px;transition:background-color .2s;display:flex}.end-call-btn:active{background-color:#d32f2f}