.ds-nashi-finder {
    --ds-nashi-bg: #f7f0e3;
    --ds-nashi-card: #fffdf8;
    --ds-nashi-text: #342d24;
    --ds-nashi-muted: #6d6255;
    --ds-nashi-accent: #b97a24;
    --ds-nashi-accent-dark: #8f5d19;
    --ds-nashi-border: #ddc9a8;
    --ds-nashi-warn: #7a3f1e;
    max-width: 820px;
    margin: 2rem auto;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--ds-nashi-border);
    border-radius: 20px;
    background: var(--ds-nashi-bg);
    color: var(--ds-nashi-text);
    box-shadow: 0 12px 30px rgba(70, 48, 22, 0.08);
}

.ds-nashi-finder *,
.ds-nashi-finder *::before,
.ds-nashi-finder *::after { box-sizing: border-box; }

.ds-nashi-finder h2,
.ds-nashi-finder h3,
.ds-nashi-finder h4,
.ds-nashi-finder p { margin-top: 0; }

.ds-nashi-finder__eyebrow {
    margin-bottom: .35rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ds-nashi-accent-dark);
    font-size: .85rem;
}

.ds-nashi-finder__note,
.ds-nashi-finder__help,
.ds-nashi-finder__disclaimer {
    color: var(--ds-nashi-muted);
    font-size: .95rem;
}

.ds-nashi-finder__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .75rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--ds-nashi-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ds-nashi-finder__button:hover,
.ds-nashi-finder__button:focus-visible { background: var(--ds-nashi-accent-dark); }
.ds-nashi-finder__button:disabled { opacity: .45; cursor: not-allowed; }

.ds-nashi-finder__button--secondary {
    background: transparent;
    color: var(--ds-nashi-accent-dark);
    border: 1px solid var(--ds-nashi-accent);
}

.ds-nashi-finder__progress-label,
.ds-nashi-finder__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ds-nashi-finder__progress-label { margin-bottom: .5rem; font-weight: 700; }
.ds-nashi-finder__progress { height: 10px; overflow: hidden; border-radius: 999px; background: #eadcc4; margin-bottom: 1.5rem; }
.ds-nashi-finder__progress span { display: block; height: 100%; width: 0; background: var(--ds-nashi-accent); transition: width .2s ease; }

.ds-nashi-finder__fieldset { border: 0; padding: 0; margin: 0; }
.ds-nashi-finder__question { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; margin-bottom: .5rem; }
.ds-nashi-finder__options { display: grid; gap: .75rem; margin: 1.25rem 0; }

.ds-nashi-finder__option {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: .75rem;
    align-items: center;
    padding: .9rem 1rem;
    border: 1px solid var(--ds-nashi-border);
    border-radius: 14px;
    background: var(--ds-nashi-card);
    cursor: pointer;
}

.ds-nashi-finder__option:hover { border-color: var(--ds-nashi-accent); }
.ds-nashi-finder__option input { position: absolute; opacity: 0; pointer-events: none; }
.ds-nashi-finder__option-marker { width: 20px; height: 20px; border: 2px solid var(--ds-nashi-accent); border-radius: 50%; }
.ds-nashi-finder__option input:checked + .ds-nashi-finder__option-marker { box-shadow: inset 0 0 0 4px var(--ds-nashi-card); background: var(--ds-nashi-accent); }
.ds-nashi-finder__option:has(input:checked) { border-color: var(--ds-nashi-accent); box-shadow: 0 0 0 2px rgba(185, 122, 36, .14); }
.ds-nashi-finder__error { color: var(--ds-nashi-warn); font-weight: 700; }

.ds-nashi-finder__winner,
.ds-nashi-finder__site,
.ds-nashi-finder__alternatives,
.ds-nashi-finder__extra,
.ds-nashi-finder__winner-group,
.ds-nashi-finder__tie-card {
    padding: 1.25rem;
    border-radius: 16px;
    background: var(--ds-nashi-card) !important;
    border: 1px solid var(--ds-nashi-border);
    margin-bottom: 1rem;
    color: var(--ds-nashi-text);
}

.ds-nashi-finder__score,
.ds-nashi-finder__site-score { font-weight: 800; color: var(--ds-nashi-accent-dark); }
.ds-nashi-finder__alternatives { display: grid; gap: 1rem; }
.ds-nashi-finder__alternative {
    padding: 1rem;
    border: 1px solid var(--ds-nashi-border);
    border-radius: 14px;
    background: var(--ds-nashi-card) !important;
    color: var(--ds-nashi-text);
    margin: 0;
}
.ds-nashi-finder__alternative:first-of-type { padding: 1rem; }
.ds-nashi-finder__winner-group-intro { margin-bottom: 1rem; }
.ds-nashi-finder__tie-card { margin-bottom: 1rem; }
.ds-nashi-finder__tie-card:last-child { margin-bottom: 0; }
.ds-nashi-finder__variety-note,
.ds-nashi-finder__warnings {
    padding: .9rem 1rem;
    background: #f3e5cc;
    border-radius: 12px;
    color: var(--ds-nashi-text);
}
.ds-nashi-finder__warnings ul { margin-bottom: 0; }

body.ds-darkmode .ds-nashi-finder {
    --ds-nashi-bg: #2a261f;
    --ds-nashi-card: #332e26;
    --ds-nashi-text: #f4ead9;
    --ds-nashi-muted: #c9bba7;
    --ds-nashi-border: #62533f;
}

body.ds-darkmode .ds-nashi-finder__winner,
body.ds-darkmode .ds-nashi-finder__site,
body.ds-darkmode .ds-nashi-finder__alternatives,
body.ds-darkmode .ds-nashi-finder__extra,
body.ds-darkmode .ds-nashi-finder__winner-group,
body.ds-darkmode .ds-nashi-finder__tie-card,
body.ds-darkmode .ds-nashi-finder__alternative {
    background: #332e26 !important;
    color: #f4ead9 !important;
}

body.ds-darkmode .ds-nashi-finder__winner p,
body.ds-darkmode .ds-nashi-finder__site p,
body.ds-darkmode .ds-nashi-finder__alternatives p,
body.ds-darkmode .ds-nashi-finder__extra p,
body.ds-darkmode .ds-nashi-finder__winner-group p,
body.ds-darkmode .ds-nashi-finder__tie-card p,
body.ds-darkmode .ds-nashi-finder__alternative p,
body.ds-darkmode .ds-nashi-finder__winner li,
body.ds-darkmode .ds-nashi-finder__site li,
body.ds-darkmode .ds-nashi-finder__alternatives li,
body.ds-darkmode .ds-nashi-finder__extra li,
body.ds-darkmode .ds-nashi-finder__winner-group li,
body.ds-darkmode .ds-nashi-finder__tie-card li,
body.ds-darkmode .ds-nashi-finder__alternative li,
body.ds-darkmode .ds-nashi-finder__winner h2,
body.ds-darkmode .ds-nashi-finder__winner h3,
body.ds-darkmode .ds-nashi-finder__site h3,
body.ds-darkmode .ds-nashi-finder__site h4,
body.ds-darkmode .ds-nashi-finder__alternatives h3,
body.ds-darkmode .ds-nashi-finder__extra h3,
body.ds-darkmode .ds-nashi-finder__winner-group h2,
body.ds-darkmode .ds-nashi-finder__tie-card h3,
body.ds-darkmode .ds-nashi-finder__alternative h3 {
    color: #f4ead9 !important;
}

body.ds-darkmode .ds-nashi-finder__variety-note,
body.ds-darkmode .ds-nashi-finder__warnings {
    background: #40372d;
    color: #f4ead9 !important;
}

@media (max-width: 600px) {
    .ds-nashi-finder { margin: 1rem 0; border-radius: 14px; }
    .ds-nashi-finder__nav { align-items: stretch; }
    .ds-nashi-finder__nav .ds-nashi-finder__button { flex: 1; }
}