.input {
    background-color: var(--surface);
    color: var(--ink);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1;
    padding: 0.95em 1.25em;
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
        0 0 0 4px color-mix(in srgb, var(--purple) 18%, transparent);
}

.input::placeholder {
    color: var(--ink-muted);
    opacity: 1;
}