.vs-ff {
    --ff-ink: #17353b;
    --ff-deep: #043a47;
    --ff-green: #22684a;
    --ff-line: #d6e2df;
    --ff-muted: #496167;
    color: var(--ff-ink);
    font: inherit;
    line-height: 1.65;
    margin-bottom: 4rem;
    min-width: 0;
}
.vs-ff *, .vs-ff *::before, .vs-ff *::after { box-sizing: border-box; }
.vs-ff [hidden] { display: none !important; }
.vs-ff a { color: var(--ff-green); text-decoration: underline; text-underline-offset: .15em; }
.vs-ff a:hover { color: var(--ff-deep); }
.vs-ff :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid #00685d; outline-offset: 3px; }
.vs-ff h2 { color: var(--ff-deep); font-size: clamp(1.65rem, 3.6vw, 2.5rem); line-height: 1.15; margin: .5rem 0 1rem; letter-spacing: -.02em; }
.vs-ff h3 { color: var(--ff-deep); font-size: 1.4rem; line-height: 1.25; margin: 0; }
.vs-ff p { margin: 0 0 1rem; }
.vs-ff-intro { max-width: 850px; }
.vs-ff-kicker { color: var(--ff-green); font-size: .8rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.vs-ff-controls { align-items: end; background: #edf6f2; border: 1px solid #d3e5dc; border-radius: 14px; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr 1.2fr; padding: clamp(1rem, 2.5vw, 1.6rem); margin: 1.6rem 0 1rem; }
.vs-ff-field { min-width: 0; }
.vs-ff label { color: var(--ff-deep); display: block; font-size: .92rem; font-weight: 700; margin-bottom: .4rem; }
.vs-ff input, .vs-ff select { background: #fff; border: 1px solid #789a90; border-radius: 6px; color: var(--ff-ink); font: inherit; font-size: 1rem; line-height: 1.35; min-height: 46px; padding: .6rem .7rem; width: 100%; }
.vs-ff input::placeholder { color: #66797c; opacity: 1; }
.vs-ff button { background: var(--ff-green); border: 1px solid var(--ff-green); border-radius: 7px; box-shadow: none; color: #fff; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 650; line-height: 1.35; min-height: 44px; padding: .65rem .85rem; text-transform: none; }
.vs-ff button:hover { background: #185138; border-color: #185138; color: #fff; }
.vs-ff button:disabled { background: #e5ebe8; border-color: #b7c5bf; color: #51635b; cursor: default; }
.vs-ff button.vs-ff-reset, .vs-ff button.vs-ff-remove { background: transparent; color: var(--ff-green); border-color: transparent; text-decoration: underline; text-underline-offset: .15em; }
.vs-ff button.vs-ff-reset { grid-column: 1 / -1; justify-self: start; padding-left: 0; }
.vs-ff button.vs-ff-reset:hover, .vs-ff button.vs-ff-remove:hover { color: var(--ff-deep); }
.vs-ff button[aria-pressed="true"] { background: #e4f2eb; border-color: #7eab94; color: var(--ff-deep); }
.vs-ff-basis { font-size: .94rem; }
.vs-ff-status { color: var(--ff-muted); font-size: .93rem; margin-top: 1.4rem !important; }
.vs-ff-table-wrap { border: 1px solid var(--ff-line); border-radius: 10px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.vs-ff table { border: 0; border-collapse: collapse; color: var(--ff-ink); font: inherit; margin: 0; width: 100%; }
.vs-ff caption { background: #edf6f2; caption-side: top; color: var(--ff-deep); font-size: .94rem; font-weight: 650; padding: .9rem 1rem; text-align: left; }
.vs-ff th, .vs-ff td { background: #fff; border: 0; border-bottom: 1px solid var(--ff-line); font-size: .95rem; padding: .85rem 1rem; text-align: left; vertical-align: middle; }
.vs-ff thead th { background: #f6f9f7; color: var(--ff-deep); font-size: .85rem; font-weight: 750; }
.vs-ff tbody th { font-weight: 650; }
.vs-ff tbody tr:last-child > * { border-bottom: 0; }
.vs-ff tbody tr:hover > * { background: #fafcfb; }
.vs-ff-state, .vs-ff-group-name { display: block; font-weight: 400; line-height: 1.45; margin-top: .15rem; }
.vs-ff-state { color: var(--ff-ink); font-size: .85rem; }
.vs-ff-group-name { color: var(--ff-muted); font-size: .77rem; }
.vs-ff-results { min-width: 460px; }
.vs-ff-value { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; width: 25%; }
.vs-ff-action, .vs-ff-action-heading { width: 130px; }
.vs-ff-more { display: block; margin: 1rem auto 1.5rem; }
.vs-ff-missing, .vs-ff-help { border: 1px solid var(--ff-line); border-radius: 9px; margin: 1.25rem 0; padding: .85rem 1rem; }
.vs-ff summary { color: var(--ff-deep); cursor: pointer; font-weight: 700; min-height: 30px; }
.vs-ff details[open] summary { margin-bottom: 1rem; }
.vs-ff details p { font-size: .94rem; }
.vs-ff details p:last-child { margin-bottom: 0; }
.vs-ff-missing ul { list-style: none; margin: 0; padding: 0; }
.vs-ff-missing li { align-items: center; border-top: 1px solid var(--ff-line); display: flex; gap: 1rem; justify-content: space-between; padding: .8rem 0; }
.vs-ff-compare { background: #f7f3e8; border: 1px solid #e4dcc6; border-radius: 14px; margin: 2rem 0 1.4rem; padding: clamp(1rem, 2.5vw, 1.7rem); }
.vs-ff-compare-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; margin-bottom: .9rem; }
.vs-ff-text-link { font-size: .87rem; }
.vs-ff-selected { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1rem 0; }
.vs-ff-selected:empty { margin: 0; }
.vs-ff-selected-card { background: #fff; border: 1px solid #d9dfd3; border-radius: 9px; padding: 1rem; }
.vs-ff-selected-title { font-weight: 750; }
.vs-ff-selected-card input { max-width: 170px; }
.vs-ff-selected-card button { display: block; font-size: .84rem; margin-top: .3rem; padding-left: 0; text-align: left; }
.vs-ff-portion-note, .vs-ff-scroll-note { color: var(--ff-muted); font-size: .9rem; }
.vs-ff-input-error { color: #992b1f; font-size: .82rem; line-height: 1.4; margin-top: .5rem !important; }
.vs-ff input[aria-invalid="true"] { border: 2px solid #992b1f; }
.vs-ff-comparison-table { min-width: 550px; table-layout: fixed; }
.vs-ff-comparison-table th, .vs-ff-comparison-table td { border-right: 1px solid var(--ff-line); overflow-wrap: anywhere; vertical-align: top; }
.vs-ff-comparison-table tr > :last-child { border-right: 0; }
.vs-ff-comparison-table thead th { font-size: .9rem; }
.vs-ff-comparison-table tbody th { width: 23%; font-size: .87rem; }
.vs-ff-cell-label, .vs-ff-cell-value { display: block; }
.vs-ff-cell-label { color: var(--ff-muted); font-size: .73rem; }
.vs-ff-cell-value { font-size: .9rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.vs-ff-own-label { margin-top: .55rem; }
.vs-ff-active-nutrient > * { background: #edf6f2 !important; }
.vs-ff-source { color: var(--ff-muted); font-size: .82rem; }
.vs-ff-nojs { background: #f7f3e8; border-radius: 8px; font-size: .92rem; padding: 1rem; }
.vs-ff-announcement { border: 0; clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
@media (max-width: 740px) {
    .vs-ff-controls { grid-template-columns: 1fr 1fr; }
    .vs-ff-field:last-of-type { grid-column: 1 / -1; }
    .vs-ff-selected { grid-template-columns: 1fr; }
    .vs-ff-selected-card { display: grid; column-gap: 1rem; grid-template-columns: 1fr 1fr; }
    .vs-ff-selected-title { grid-row: 1 / 4; }
    .vs-ff-selected-card label, .vs-ff-selected-card input, .vs-ff-selected-card .vs-ff-input-error { grid-column: 2; }
    .vs-ff-selected-card button { grid-column: 1 / -1; }
    .vs-ff th, .vs-ff td { padding: .7rem .75rem; }
}
@media (max-width: 440px) {
    .vs-ff-controls { grid-template-columns: 1fr; }
    .vs-ff-selected-card { display: block; }
    .vs-ff-selected-card input { max-width: none; }
    .vs-ff-missing li { align-items: flex-start; flex-direction: column; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .vs-ff { scroll-behavior: auto; } }

.vs-ff-result-links { align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; font-size: .87rem; }
.vs-ff-result-links span { color: var(--ff-muted); font-size: .8rem; }