:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--padding-btns: .5rem 1rem;--padding-block: .5rem .75rem;--padding-btn-phonepad: .5rem 1rem;--bg-opacity: 1;--text-opacity: 1;--radius-btn-round: 9999px;--radius-btn-squared: .375rem;--radius-block: .5rem}.app{display:flex;flex-direction:column;gap:1rem;max-width:28rem;margin-left:auto;margin-right:auto}h1{text-align:center}.status-block{display:flex;justify-content:space-between;align-items:center}.status-block .status-block__call-status{border-radius:9999px;padding:var(--padding-btns)}.status-block .status-block__call-status.default{color:rgba(37,47,63,var(--bg-opacity));background-color:rgba(244,245,247,var(--bg-opacity))}.status-block .status-block__call-status.active{color:#03543f;background-color:rgba(222,247,236,var(--bg-opacity))}.status-block .status-block__call-status.ended{color:rgba(155,28,28,var(--text-opacity));background-color:rgba(253,232,232,var(--bg-opacity))}.status-block .status-block__call-control button{padding:var(--padding-btns);border-radius:var(--radius-btn-squared);background-color:#161e2e;color:#f9fafb}.status-block .status-block__call-control button.--active{background-color:#f05252;border-color:#f05252;color:#f9fafb}.step-block{display:flex;flex-direction:column;gap:.7rem}.step-block .step-block__info{padding:var(--padding-block);background-color:#ebf5ff;border-radius:var(--radius-block);color:#1e429f}.step-block .step-block__message{border-radius:var(--radius-block);padding:var(--padding-block);text-align:center;background-color:#f4f5f7}.input-block{display:flex;justify-content:space-between;padding:var(--padding-block);border-radius:var(--radius-block);background-color:#f4f5f7}.input-block .input-block__digit{font-size:2rem;font-weight:700}.phonepad-block{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.phonepad-block button{padding:var(--padding-btn-phonepad);font-size:1.25rem;height:3.5rem;font-weight:700;color:#161e2e;background-color:#fff;border-width:1px;border-radius:var(--radius-btn-squared)}.phonepad-block button:hover{background-color:#f4f5f7}.visualization-block .visualization-block__steps{display:flex;flex-direction:column;gap:1rem}.visualization-block .visualization-block__steps>div{padding:var(--padding-block);border-width:1px;border-style:solid;border-color:#e5e7eb;border-radius:var(--radius-block)}.visualization-block .visualization-block__steps>div.--active{border-color:#3f83f8;background-color:#ebf5ff}