.dw-tool,
.dw-tool *,
.dw-tool *::before,
.dw-tool *::after {
    box-sizing: border-box;
}

.dw-tool {
    --dw-ink: #17352f;
    --dw-muted: #52675f;
    --dw-line: #ccd9d3;
    --dw-surface: #f4f8f5;
    --dw-accent: #0b7562;
    --dw-accent-dark: #075849;
    border: 1px solid var(--dw-line);
    border-radius: 1.25rem;
    color: var(--dw-ink);
    margin-block: 2rem;
    overflow: hidden;
}

.dw-tool__header,
.dw-tool__form,
.dw-result,
.dw-method,
.dw-tool__privacy {
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.dw-tool__header {
    background: var(--dw-surface);
    padding-block: clamp(1.25rem, 4vw, 2rem);
}

.dw-tool__header h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0.25rem 0 0.75rem;
}

.dw-tool__header p:last-child,
.dw-result__note,
.dw-tool__hint,
.dw-method__sources {
    color: var(--dw-muted);
}

.dw-tool__eyebrow,
.dw-result__label {
    color: var(--dw-accent-dark);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.dw-tool__form {
    padding-block: 1.5rem;
}

.dw-tool__form[hidden] {
    display: none;
}

.dw-tool__fields {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(9rem, 0.65fr);
}

.dw-field {
    display: grid;
    gap: 0.4rem;
}

.dw-field label {
    font-size: 0.92rem;
    font-weight: 700;
}

.dw-field input,
.dw-field select {
    appearance: none;
    background: #fff;
    border: 1px solid #879b93;
    border-radius: 0.65rem;
    color: var(--dw-ink);
    font: inherit;
    min-height: 3rem;
    padding: 0.65rem 0.8rem;
    width: 100%;
}

.dw-field select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--dw-ink) 50%),
        linear-gradient(135deg, var(--dw-ink) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 50%,
        calc(100% - 11px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    padding-right: 44px;
}

.dw-field input:focus-visible,
.dw-field select:focus-visible,
.dw-button:focus-visible,
.dw-method summary:focus-visible {
    outline: 3px solid #f2b950;
    outline-offset: 3px;
}

.dw-tool__hint {
    font-size: 0.86rem;
    margin: 0.65rem 0 1rem;
}

.dw-tool__error {
    background: #fff1ef;
    border-left: 4px solid #a73527;
    color: #742218;
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
}

.dw-tool__fallback {
    background: var(--dw-surface);
    border-block: 1px solid var(--dw-line);
    margin: 0;
    padding: 1rem clamp(1rem, 4vw, 2rem);
}

.dw-button {
    background: var(--dw-accent);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
    min-height: 2.8rem;
    padding: 0.7rem 1.2rem;
}

.dw-button:hover {
    background: var(--dw-accent-dark);
}

.dw-result {
    background: #eaf5ef;
    border-block: 1px solid var(--dw-line);
    padding-block: 1.25rem;
}

.dw-result__value {
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-variant-numeric: tabular-nums;
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0.45rem 0 0.7rem;
}

.dw-result__note {
    font-size: 0.9rem;
    margin: 0;
}

.dw-method {
    padding-block: 1.2rem;
}

.dw-method summary {
    color: var(--dw-accent-dark);
    cursor: pointer;
    font-weight: 750;
}

.dw-method__sources {
    font-size: 0.88rem;
}

.dw-tool__privacy {
    border-top: 1px solid var(--dw-line);
    font-size: 0.88rem;
    margin: 0;
    padding-block: 1rem;
}

@media (max-width: 38rem) {
    .dw-tool__fields {
        grid-template-columns: 1fr;
    }

    .dw-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dw-tool *,
    .dw-tool *::before,
    .dw-tool *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    .dw-tool,
    .dw-result,
    .dw-tool__error {
        border: 1px solid CanvasText;
    }

    .dw-field select {
        appearance: auto;
        background-image: none;
    }

    .dw-button {
        border: 1px solid ButtonText;
    }
}