.fh-app {
    --fh-ink: #0b1c39;
    --fh-muted: #59677e;
    --fh-line: #dfe5ed;
    --fh-panel: #fff;
    --fh-bg: #f3f5f8;
    --fh-tint: #e7eef8;
    --fh-heading: #17345a;
    --fh-accent: #8a570d;
    --fh-gold: #ffba45;
    --fh-selected: var(--fh-gold);
    --fh-selected-ink: #102340;
    --fh-error: #b4232d;
    min-width: 0;
    color: var(--fh-ink);
    background: var(--fh-bg);
}

.dark .fh-app {
    --fh-ink: #eef3ff;
    --fh-muted: #bdc7d9;
    --fh-line: #344158;
    --fh-panel: #172438;
    --fh-bg: #101a2b;
    --fh-tint: #213652;
    --fh-heading: #d4e4fb;
    --fh-accent: #f0bc64;
    --fh-error: #fca5a5;
    color-scheme: dark;
}

.fh-app[data-fh-palette="feminine"] {
    --fh-ink: #382935;
    --fh-muted: #675260;
    --fh-line: #e3d2d8;
    --fh-panel: #fffcf8;
    --fh-bg: #faf3eb;
    --fh-tint: #f6e6eb;
    --fh-heading: #683652;
    --fh-accent: #8d4a69;
    --fh-selected: #703954;
    --fh-selected-ink: #fff9fb;
}

.dark .fh-app[data-fh-palette="feminine"] {
    --fh-ink: #f7edf2;
    --fh-muted: #d4bdc9;
    --fh-line: #634955;
    --fh-panel: #2e222d;
    --fh-bg: #231a23;
    --fh-tint: #432d3d;
    --fh-heading: #f1c6da;
    --fh-accent: #d294ae;
    --fh-selected: #eab7ce;
    --fh-selected-ink: #382235;
}

.fh-app :where(h1, h2, h3, p, ul) { margin: 0; }
.fh-app :where(a, button, input, summary):focus-visible,
.fh-app .fh-birth input:focus-visible {
    outline: 2px solid var(--fh-accent);
    outline-offset: 2px;
}

.fh-field {
    --fh-field-surface: var(--fh-panel);
    position: relative;
    min-width: 0;
}

.fh-field > .fh-field-label {
    position: absolute;
    z-index: 1;
    inset-block-start: 0;
    inset-inline-start: .55rem;
    max-inline-size: calc(100% - 1.1rem);
    padding-inline: .25rem;
    overflow: hidden;
    background: var(--fh-field-surface);
    color: var(--fh-muted);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    transform: translateY(-50%);
    white-space: nowrap;
    pointer-events: none;
}

.fh-field > input:focus + .fh-field-label { color: var(--fh-accent); }

.fh-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
    width: min(100%, 74rem);
    margin-inline: auto;
    padding: .65rem clamp(.65rem, 2.4vw, 2rem) 2rem;
}

.fh-hero {
    display: grid;
    gap: .3rem;
    min-width: 0;
    padding: clamp(.9rem, 3vw, 1.85rem);
    border: 1px solid var(--fh-line);
    border-radius: 1rem;
    background: linear-gradient(115deg, var(--fh-panel), var(--fh-tint));
}

.fh-wordmark,
.fh-eyebrow {
    color: var(--fh-muted);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.fh-wordmark {
    width: fit-content;
    color: var(--fh-heading);
    text-decoration: none;
}

.fh-hero h1,
.fh-result h2 {
    color: var(--fh-heading);
    font-family: Georgia, Cambria, serif;
    font-weight: 700;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.fh-hero h1 {
    font-size: clamp(1.45rem, 4.5vw, 2.7rem);
    line-height: 1.1;
}

.fh-hero p {
    max-width: 65ch;
    color: var(--fh-muted);
    font-size: .875rem;
    line-height: 1.45;
}

.fh-modes,
.fh-periods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem;
    padding: .3rem;
    border: 1px solid var(--fh-line);
    border-radius: .85rem;
    background: var(--fh-panel);
}

.fh-modes button,
.fh-periods :is(a, button) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 0;
    min-height: 44px;
    padding: .2rem .25rem;
    border-radius: .6rem;
    color: var(--fh-muted);
    font-size: clamp(.72rem, 3.5vw, .875rem);
    font-weight: 700;
    line-height: 1.16;
    text-align: center;
    text-decoration: none;
}

.fh-modes button:hover,
.fh-periods :is(a, button):hover { background: var(--fh-bg); color: var(--fh-ink); }
.fh-modes button[aria-pressed="true"] { font-weight: 800; }
.fh-periods :is([aria-current="page"], [aria-pressed="true"]) { background: var(--fh-tint); color: var(--fh-heading); font-weight: 800; }
.fh-periods svg { flex: none; width: 1.7rem; height: 1.5rem; padding: .15rem .24rem; }
.fh-periods :is([aria-current="page"], [aria-pressed="true"]) svg { border-radius: 999px; }

.fh-modes button[aria-pressed="true"],
.fh-periods :is([aria-current="page"], [aria-pressed="true"]) svg,
.fh-zodiac button[data-active-zodiac],
.fh-sex-options button[aria-pressed="true"],
.fh-numerology-number {
    background: var(--fh-selected);
    color: var(--fh-selected-ink);
}

.fh-zodiac {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px;
    min-width: 0;
    padding: 3px;
    border: 1px solid var(--fh-line);
    border-radius: .85rem;
    background: var(--fh-panel);
}

.fh-zodiac-options {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.fh-zodiac button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    padding: .2rem .4rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    color: var(--fh-muted);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.fh-zodiac-options button { flex: 1 0 3.9rem; scroll-snap-align: start; }
.fh-zodiac button:hover { background: var(--fh-bg); color: var(--fh-ink); }
.fh-zodiac button:focus-visible { outline-offset: -2px; }
.fh-zodiac button[data-active-zodiac]:focus-visible { outline-color: var(--fh-selected-ink); }
.fh-zodiac .fh-zodiac-auto { align-self: start; border-color: var(--fh-line); }
.fh-zodiac-auto small { font-size: .66rem; }
.fh-zodiac .fh-zodiac-auto[aria-pressed="true"] { border-color: var(--fh-accent); background: var(--fh-tint); color: var(--fh-heading); }
.fh-zodiac-symbol { font-family: system-ui, sans-serif; font-size: 1.15rem; line-height: 1; }

.fh-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: .7rem;
}

.fh-panel {
    min-width: 0;
    padding: clamp(.75rem, 2.5vw, 1.25rem);
    border: 1px solid var(--fh-line);
    border-radius: 1rem;
    background: var(--fh-panel);
}

.fh-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
}

.fh-person-form > summary {
    min-height: 44px;
    align-content: center;
    cursor: pointer;
    font-weight: 750;
}

.fh-panel.fh-person-form {
    padding: .25rem clamp(.65rem, 1.4vw, .9rem);
}

.fh-person-form[open] > .fh-person-fields {
    display: grid;
    gap: .55rem;
    padding-block-end: .5rem;
}

.fh-person-fields > .fh-birth {
    padding: 0;
    border: 0;
    background: transparent;
}

.fh-person-fields .fh-birth-heading {
    min-height: 0;
    margin-block: .1rem .6rem;
    font-size: .86rem;
}

.fh-person-fields .fh-birth-more {
    margin-block-start: .35rem;
    border: 0;
}

.fh-person-fields .fh-birth-more summary { padding-block: 0; align-content: center; }
.fh-person-fields .fh-sex { margin-top: 0; }

.fh-sex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem .75rem;
    margin-top: .7rem;
}

.fh-sex > span {
    color: var(--fh-muted);
    font-size: .82rem;
    font-weight: 700;
}

.fh-sex-options {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    padding: .2rem;
    border: 1px solid var(--fh-line);
    border-radius: .8rem;
    background: var(--fh-bg);
}

.fh-sex-options button {
    min-height: 44px;
    padding: .35rem .65rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    color: var(--fh-muted);
    font-size: .84rem;
    font-weight: 700;
}

.fh-sex-options button:hover { color: var(--fh-ink); }
.fh-error { margin-top: .3rem; color: var(--fh-error); font-size: .8rem; }
.fh-reading { min-width: 0; }
.fh-result { display: grid; gap: .8rem; }
.fh-share {
    display: grid;
    gap: .55rem;
    min-width: 0;
    padding-top: .7rem;
    border-top: 1px solid var(--fh-line);
    color: var(--fh-muted);
    font-size: .875rem;
}
.fh-share-heading { color: var(--fh-heading); font-weight: 750; text-align: center; }
.fh-share-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
    width: min(100%, 24rem);
    justify-self: center;
}
.fh-share-actions :is(a, button),
.fh-share-copy-link,
.fh-share-astrology,
.fh-share-messenger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .35rem .45rem;
    border: 1px solid var(--fh-share-brand, var(--fh-line));
    border-radius: .6rem;
    background: var(--fh-share-brand, var(--fh-panel));
    color: var(--fh-share-label, var(--fh-heading));
    font-weight: 700;
    text-decoration: none;
}
.fh-share-actions :is(a, button) {
    flex-direction: column;
    gap: .25rem;
    min-height: 3.25rem;
    font-size: .78rem;
    line-height: 1.2;
}
.fh-share-actions svg { width: 1.15rem; height: 1.15rem; }
.fh-share-whatsapp {
    --fh-share-brand: #25d366;
    --fh-share-hover: #1fbb5a;
    --fh-share-label: #102c1d;
}
.fh-share-sms {
    --fh-share-brand: var(--fh-gold);
    --fh-share-hover: #f0a934;
    --fh-share-label: #102340;
}
.fh-share-messenger-action {
    --fh-share-brand: #0866ff;
    --fh-share-hover: #0054d9;
    --fh-share-label: #fff;
}
.fh-share :is(a, button):hover { background: var(--fh-share-hover, var(--fh-tint)); }
.fh-share-copy-control { display: grid; justify-items: center; }
.fh-share-copy-link {
    --fh-share-hover: var(--fh-gold);
    gap: .4rem;
    padding-inline: .8rem;
    border-color: var(--fh-gold);
}
.fh-share-copy-link:hover { color: #102340; }
.fh-share-copy-link svg { width: 1rem; height: 1rem; }
.fh-share-copy-status { text-align: center; }
.fh-share-copy-status:not(:empty) { margin-top: .3rem; }
.fh-share-copy { display: grid; gap: .4rem; width: min(100%, 24rem); justify-self: center; }
.fh-share-copy > .fh-field { --fh-field-surface: var(--fh-bg); }
.fh-share-copy input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: .45rem .55rem;
    border: 1px solid var(--fh-line);
    border-radius: .6rem;
    background: var(--fh-field-surface);
    color: var(--fh-ink);
}
.fh-share-astrology, .fh-share-messenger { justify-self: start; }
.fh-result-head { display: grid; gap: .25rem; }
.fh-result h2 {
    font-size: clamp(1.3rem, 4.5vw, 2rem);
    line-height: 1.12;
}

.fh-prose {
    --fh-prose-icon-size: 2rem;
    --fh-prose-column-gap: .75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
    max-width: calc(65ch + var(--fh-prose-icon-size) + var(--fh-prose-column-gap));
    font-size: clamp(1rem, 2.8vw, 1.05rem);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.fh-prose-opening {
    padding: .75rem 1rem;
    border-radius: .7rem;
    background: var(--fh-tint);
}

.fh-prose-opening p { max-width: 65ch; }
.fh-prose-opening p:first-child { font-weight: 650; }
.fh-prose p + p { margin-top: .65rem; }

.fh-prose-section {
    display: grid;
    grid-template-columns: var(--fh-prose-icon-size) minmax(0, 1fr);
    align-items: start;
    gap: var(--fh-prose-column-gap);
    padding-block-start: .9rem;
    border-block-start: 1px solid var(--fh-line);
}

.fh-prose-icon {
    display: grid;
    place-items: center;
    width: var(--fh-prose-icon-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--fh-tint);
    color: var(--fh-heading);
}

.fh-prose-icon svg { width: 1.1rem; height: 1.1rem; }

.fh-prose-copy h3 {
    margin-block-end: .35rem;
    padding-block-start: .18rem;
    color: var(--fh-heading);
    font-size: 1.05em;
    font-weight: 750;
    line-height: 1.3;
}

.fh-prose-highlight {
    padding: .45rem .65rem;
    border-inline-start: 2px solid var(--fh-accent);
    border-radius: 0 .45rem .45rem 0;
    background: var(--fh-tint);
}

.fh-prose-measurement { color: var(--fh-heading); font-weight: 650; font-variant-numeric: tabular-nums; }
.fh-context { padding: .55rem .25rem 0; color: var(--fh-muted); font-size: .84rem; line-height: 1.45; }

.fh-visual {
    display: grid;
    gap: .55rem;
    min-width: 0;
    margin: 0;
    padding: .65rem;
    border: 1px solid var(--fh-line);
    border-radius: .75rem;
    background: var(--fh-bg);
    color: var(--fh-ink);
    font-size: .84rem;
    line-height: 1.4;
}

.fh-visual figcaption { font-size: 1rem; font-weight: 750; }
.fh-visual-note { color: var(--fh-muted); }

.fh-natal-wheel {
    display: block;
    width: 100%;
    max-width: 29rem;
    height: auto;
    margin-inline: auto;
    border-radius: .65rem;
    background: radial-gradient(circle, #1e385d, #0c1e39);
    font-family: system-ui, sans-serif;
}

.fh-natal-rim, .fh-natal-band, .fh-natal-center { stroke: #577195; stroke-width: 1; }
.fh-natal-rim { fill: #213b61; }
.fh-natal-band { fill: #142b4d; }
.fh-natal-center { fill: #10213a; }
.fh-natal-sector, .fh-natal-house-line { stroke: #7693ba; stroke-width: 1; }
.fh-natal-house-line { stroke-opacity: .6; }
.fh-natal-zodiac { fill: #e5edfb; font-size: 23px; }
.fh-natal-sun-sign { fill: #ffce76; }
.fh-natal-house { fill: #b3c9e7; font-size: 14px; font-weight: 700; }
.fh-natal-aspect { stroke: #ffcf76; stroke-width: 1.15; stroke-opacity: .6; }
.fh-natal-aspect:is([data-aspect="trine"], [data-aspect="sextile"]) { stroke: #80dcdf; }
.fh-natal-aspect:is([data-aspect="square"], [data-aspect="opposition"]) { stroke: #efa7c2; }
.fh-natal-asc-line { stroke: #ffce76; stroke-width: 1.65; }
.fh-natal-asc-label { fill: #ffce76; font-size: 12px; font-weight: 800; }
.fh-natal-planet-tick, .fh-natal-planet-guide { stroke: #ffce76; stroke-width: 1; }
.fh-natal-planet-guide { stroke-opacity: .55; }
.fh-natal-planet-badge { fill: #ffce76; }
.fh-natal-planet-symbol { fill: #132541; font-size: 14px; font-weight: 700; }
.fh-natal-group-count { font-size: 12px; }

.fh-natal-asc { color: var(--fh-muted); }
.fh-natal-asc strong { margin-inline-end: .3rem; color: var(--fh-ink); }
.fh-natal-positions { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fh-natal-positions :is(th, td) { padding: .3rem .25rem; border-bottom: 1px solid var(--fh-line); text-align: start; }
.fh-natal-positions thead th { color: var(--fh-muted); font-size: .76rem; }
.fh-natal-positions tbody th { font-weight: 650; }
.fh-natal-positions tbody th span { display: inline-block; min-width: 1.25rem; color: var(--fh-muted); }
.fh-natal-details summary { display: flex; align-items: center; min-height: 44px; font-weight: 750; cursor: pointer; }
.fh-natal-details summary::before { content: '+'; width: 1.25rem; flex: none; color: var(--fh-muted); }
.fh-natal-details[open] summary::before { content: '−'; }
.fh-natal-houses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
    gap: .3rem .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fh-natal-houses strong { display: inline-block; min-width: 1rem; color: var(--fh-muted); font-variant-numeric: tabular-nums; }
.fh-natal-aspects { display: grid; gap: .25rem; padding: 0; list-style: none; }
.fh-natal-aspects li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem .4rem; }
.fh-natal-aspects small { color: var(--fh-muted); }

.fh-biorhythm {
    --fh-physical: #1963a6;
    --fh-emotional: #a23a74;
    --fh-intellectual: #896118;
}

.dark .fh-biorhythm { --fh-physical: #7ac5fc; --fh-emotional: #f49bc9; --fh-intellectual: #ffd074; }
.fh-cycle-physical { color: var(--fh-physical); }
.fh-cycle-emotional { color: var(--fh-emotional); }
.fh-cycle-intellectual { color: var(--fh-intellectual); }
.fh-biorhythm-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem; }
.fh-biorhythm-today-label { display: flex; align-items: center; gap: .3rem; color: var(--fh-muted); font-size: .75rem; }
.fh-biorhythm-today-label i { width: .85rem; border-top: 1px dashed currentColor; }
.fh-biorhythm-plot { display: block; width: 100%; height: auto; cursor: crosshair; }
.fh-chart-grid { stroke: var(--fh-line); vector-effect: non-scaling-stroke; }
.fh-chart-zero { stroke: var(--fh-muted); stroke-opacity: .65; }
.fh-chart-axis { fill: var(--fh-muted); font-size: 24px; font-variant-numeric: tabular-nums; }
.fh-biorhythm-curve { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.fh-biorhythm-curve.fh-cycle-emotional { stroke-dasharray: 5 3; }
.fh-biorhythm-curve.fh-cycle-intellectual { stroke-dasharray: 1 3; stroke-linecap: round; }
.fh-biorhythm-today, .fh-biorhythm-marker { stroke: var(--fh-muted); vector-effect: non-scaling-stroke; }
.fh-biorhythm-today { stroke-dasharray: 3 3; }
.fh-biorhythm-marker { stroke-opacity: .6; }
.fh-biorhythm-point { fill: currentColor; stroke: var(--fh-panel); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.fh-biorhythm-range input { width: 100%; min-height: 44px; margin: 0; accent-color: var(--fh-accent); }
.fh-biorhythm-dates { display: flex; justify-content: space-between; gap: .25rem; color: var(--fh-muted); font-size: .73rem; }
.fh-biorhythm-inspection { display: grid; gap: .35rem; }
.fh-biorhythm-inspection p { color: var(--fh-muted); font-size: .8rem; }
.fh-biorhythm-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0; }
.fh-biorhythm-legend > div { min-width: 0; padding: .35rem; border-radius: .45rem; background: var(--fh-panel); }
.fh-biorhythm-legend dt { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: .72rem; }
.fh-biorhythm-legend dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.fh-biorhythm-swatch { width: .8rem; border-top: 2px solid currentColor; }
.fh-biorhythm-swatch.fh-cycle-emotional { border-top-style: dashed; }
.fh-biorhythm-swatch.fh-cycle-intellectual { border-top-style: dotted; }
.fh-biorhythm-cycle-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; }
.fh-biorhythm-cycle-buttons button {
    min-height: 44px;
    padding: .25rem .125rem;
    border: 1px solid var(--fh-line);
    border-radius: .5rem;
    color: var(--fh-heading);
    background: var(--fh-panel);
    font-size: clamp(.7rem, 3vw, .8rem);
    font-weight: 650;
    overflow-wrap: anywhere;
}
.fh-biorhythm-cycle-buttons button[aria-pressed="true"] { background: var(--fh-selected); color: var(--fh-selected-ink); }
.fh-biorhythm-legend-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fh-biorhythm-own { color: var(--fh-physical); }
.fh-biorhythm-other { color: var(--fh-emotional); }
.fh-biorhythm-curve.fh-biorhythm-other { stroke-dasharray: 6 3; }
.fh-biorhythm-swatch.fh-biorhythm-other { border-top-style: dashed; }

.fh-numerology-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
.fh-numerology-parts > div { padding: .3rem; border: 1px solid var(--fh-line); border-radius: .5rem; text-align: center; }
.fh-numerology-parts dt, .fh-numerology-sum { color: var(--fh-muted); }
.fh-numerology-parts dd { margin: 0; font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.fh-numerology-result { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.fh-numerology-result svg { flex: none; color: var(--fh-muted); }
.fh-numerology-number {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .2rem .6rem;
    border-radius: .55rem;
    font-weight: 750;
}
.fh-numerology-number strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
    .fh-frame, .fh-content, .fh-controls { gap: 5px; }
    .fh-frame { padding: 5px 6px 1rem; }
    .fh-hero { padding: .6rem .75rem; }
    .fh-panel { padding: .55rem .625rem; }

    .fh-modes, .fh-periods {
        gap: 2px;
        padding: 2px;
    }

    .fh-birth .fh-birth-heading { min-height: 0; }
    .fh-birth .fh-birth-date { gap: 5px; }
    .fh-birth .fh-birth-more { margin-top: 5px; }
    .fh-birth .fh-birth-extra { gap: .5rem; }

    .fh-sex { margin-top: 5px; }

    .fh-visual { gap: 5px; padding: .45rem; }

    .fh-prose {
        --fh-prose-icon-size: 1.625rem;
        --fh-prose-column-gap: .5rem;
        gap: .5rem;
    }

    .fh-prose-opening { padding: .5rem .625rem; }
    .fh-prose-section { padding-block-start: .5rem; }
    .fh-prose-copy h3 { padding-block-start: .1rem; }
    .fh-prose-icon svg { width: 1rem; height: 1rem; }
    .fh-prose-highlight { padding: .35rem .5rem; }
}

@media (min-width: 36rem) {
    .fh-periods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .fh-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fh-frame, .fh-content, .fh-controls { gap: 1rem; }
    .fh-content { grid-template-columns: minmax(21rem, .95fr) minmax(0, 1.2fr); }
}

:is(.fh-shared-compatibility, .fh-compatibility-active) {
    --fh-pair-ink: #452c28;
    --fh-pair-muted: #74544c;
    --fh-pair-heading: #642c24;
    --fh-pair-accent: #974932;
    --fh-pair-paper: #fffaf1;
    --fh-pair-card: #fffdfa;
    --fh-pair-blush: #f6e1d4;
    --fh-pair-line: #e7cdb8;
    --fh-pair-gold: #ffba45;
    --fh-pair-shadow: 0 .5rem 1.5rem #642c240a;
}

.dark :is(.fh-shared-compatibility, .fh-compatibility-active) {
    --fh-pair-ink: #f8ede7;
    --fh-pair-muted: #dcc1b4;
    --fh-pair-heading: #ffe0cd;
    --fh-pair-accent: #ffa987;
    --fh-pair-paper: #281d1b;
    --fh-pair-card: #332321;
    --fh-pair-blush: #492c25;
    --fh-pair-line: #6d4a3d;
    --fh-pair-shadow: 0 .5rem 1.5rem #11090545;
}

.fh-app.fh-shared-compatibility,
.fh-compatibility-result {
    --fh-ink: var(--fh-pair-ink);
    --fh-muted: var(--fh-pair-muted);
    --fh-heading: var(--fh-pair-heading);
    --fh-accent: var(--fh-pair-accent);
    --fh-panel: var(--fh-pair-card);
    --fh-bg: var(--fh-pair-paper);
    --fh-tint: var(--fh-pair-blush);
    --fh-line: var(--fh-pair-line);
    --fh-selected: var(--fh-pair-gold);
    --fh-selected-ink: #40271d;
    color: var(--fh-ink);
}

.fh-shared-compatibility > .fh-frame { width: min(100%, 82rem); }

.fh-compatibility-cover,
.fh-compatibility-result-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    padding: clamp(.9rem, 3.4vw, 3.25rem);
    border: 1px solid var(--fh-pair-line);
    border-block-start: 3px solid var(--fh-pair-gold);
    border-radius: clamp(.85rem, 2vw, 1.6rem);
    background: linear-gradient(110deg, var(--fh-pair-card) 10%, var(--fh-pair-blush) 100%);
    box-shadow: var(--fh-pair-shadow);
}

.fh-compatibility-heart {
    position: absolute;
    z-index: -1;
    inset-block-start: 50%;
    inset-inline-end: clamp(.2rem, 3vw, 2.5rem);
    width: clamp(8rem, 34%, 25rem);
    height: auto;
    color: var(--fh-pair-accent);
    opacity: .16;
    transform: translateY(-50%) rotate(-8deg);
    pointer-events: none;
}

.fh-compatibility-heart path + path { fill: var(--fh-pair-gold); }

.fh-compatibility-cover-copy {
    display: grid;
    justify-items: start;
    gap: clamp(.6rem, 1.7vw, 1.15rem);
}

.fh-compatibility-cover-copy > p:not(.fh-compatibility-meta) { max-width: 58ch; line-height: 1.55; }

.fh-compatibility-navigation {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .45rem;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    padding: .4rem .75rem;
    border: 1px solid var(--fh-accent);
    border-radius: .6rem;
    background: var(--fh-panel);
    color: var(--fh-heading);
    font-size: .85rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: start;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.fh-compatibility-navigation:hover { background: var(--fh-tint); }
.fh-compatibility-navigation svg { flex: none; width: 1rem; height: 1rem; }

.fh-compatibility-eyebrow {
    color: var(--fh-pair-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.3;
    text-transform: uppercase;
}

.fh-compatibility-cover h1 {
    color: var(--fh-pair-heading);
    font-family: Georgia, Cambria, serif;
    font-size: clamp(2rem, 5.2vw, 4.15rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.fh-compatibility-signs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem clamp(.25rem, 1.4vw, .85rem);
    padding: 0;
    color: var(--fh-pair-heading);
    list-style: none;
}

.fh-compatibility-sign {
    display: flex;
    align-items: center;
    gap: clamp(.25rem, 1vw, .55rem);
    min-width: 0;
    padding: .25rem clamp(.4rem, 1.5vw, .9rem) .25rem .25rem;
    border: 1px solid var(--fh-pair-line);
    border-radius: 999px;
    background: var(--fh-pair-card);
    font-size: clamp(.8rem, 1.8vw, 1.07rem);
    font-weight: 750;
    overflow-wrap: anywhere;
}

.fh-compatibility-sign-glyph {
    display: grid;
    flex: none;
    place-items: center;
    width: clamp(1.35rem, 4vw, 2.15rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--fh-pair-blush);
    color: var(--fh-pair-accent);
    font-size: clamp(.85rem, 2vw, 1.25rem);
    line-height: 1;
}

.fh-compatibility-sign-join { color: var(--fh-pair-accent); font-family: Georgia, Cambria, serif; }
.fh-compatibility-meta { color: var(--fh-pair-muted); font-size: .83rem; line-height: 1.5; }

.fh-modes.fh-compatibility-modes {
    border-color: var(--fh-pair-line);
    background: var(--fh-pair-card);
    box-shadow: var(--fh-pair-shadow);
}

.fh-compatibility-modes button {
    gap: clamp(.3rem, 1vw, .6rem);
    color: var(--fh-pair-heading);
}

.fh-compatibility-modes button svg { flex: none; width: 1.15rem; height: 1.15rem; }
.fh-compatibility-modes button:hover { background: var(--fh-pair-blush); color: var(--fh-pair-heading); }
.fh-compatibility-modes button[aria-pressed="true"] { background: var(--fh-pair-gold); color: #40271d; }
.fh-compatibility-modes button:focus-visible { outline-color: var(--fh-pair-accent); }

.fh-compatibility-result {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(.55rem, 1.5vw, 1.25rem);
}

.fh-compatibility-result-head { display: grid; gap: .4rem; }
.fh-compatibility-result-head h2 { color: var(--fh-pair-heading); font-size: clamp(1.55rem, 3.6vw, 2.7rem); }

.fh-shared-compatibility .fh-compatibility-result-head {
    padding: .4rem 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.fh-compatibility-result > .fh-visual,
.fh-compatibility-result > .fh-share {
    min-width: 0;
    padding: clamp(.65rem, 1.8vw, 1.35rem);
    border: 1px solid var(--fh-pair-line);
    border-radius: .9rem;
    background: var(--fh-pair-card);
    box-shadow: var(--fh-pair-shadow);
}

.fh-compatibility-result > .fh-share { background: var(--fh-pair-paper); }

.fh-prose.fh-compatibility-sections {
    max-width: none;
    gap: clamp(.5rem, 1.3vw, 1rem);
}

.fh-compatibility-sections .fh-prose-section {
    padding: clamp(.65rem, 1.8vw, 1.35rem);
    border: 1px solid var(--fh-pair-line);
    border-radius: .9rem;
    background: var(--fh-pair-card);
    box-shadow: var(--fh-pair-shadow);
}

.fh-compatibility-sections .fh-prose-icon { background: var(--fh-pair-blush); color: var(--fh-pair-accent); }

.fh-compatibility-sections h3 {
    color: var(--fh-pair-heading);
    font-family: Georgia, Cambria, serif;
    font-size: clamp(1.06rem, 2vw, 1.3rem);
}

@media (min-width: 64rem) {
    .fh-shared-compatibility .fh-prose.fh-compatibility-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fh-shared-compatibility .fh-compatibility-sections .fh-prose-section:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        padding-inline: max(1.35rem, (100% - 78ch) / 2);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .fh-field-label { transition: color .15s ease; }
    .fh-result { animation: fh-reading-reveal .2s ease-out; }
}

@keyframes fh-reading-reveal {
    from { opacity: .85; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}