:root {
            --blue: #1e90ff;
            --ink: #0b3550
        }

        body {
            background: #fff
        }

        .seg {
            display: flex;
            border: 1px solid #d9e5f5;
            border-radius: 14px;
            overflow: hidden;
            background: #f7fbff
        }

        .seg button {
            flex: 1;
            padding: .9rem 1rem;
            font-weight: 600;
            border-inline-start: 1px solid #d9e5f5;
            transition: .2s
        }

        .seg button:first-child {
            border-inline-start: 0
        }

        .seg button:not(.active):hover {
            background: #eef6ff
        }

        .seg .active {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue)
        }

        .seg .disabled {
            opacity: .5;
            pointer-events: none;
        }

        .info {
            color: var(--blue);
            border: 1px solid #cfe7ff;
            border-radius: 999px;
            width: 22px;
            height: 22px;
            display: inline-grid;
            place-items: center;
            font-size: 12px
        }

        .field {
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 1rem
        }

        .hint {
            font-size: .78rem;
            color: #6b7280
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0)
            }

            20% {
                transform: translateX(-6px)
            }

            40% {
                transform: translateX(6px)
            }

            60% {
                transform: translateX(-4px)
            }

            80% {
                transform: translateX(4px)
            }
        }

        .shake {
            animation: shake .35s ease;
        }