:root {
    color-scheme: light dark;
    --bg: #f7f5ff;
    --surface: rgba(255, 255, 255, 0.82);
    --text: #191728;
    --muted: #68657a;
    --line: rgba(54, 43, 91, 0.14);
    --accent: #6d46e8;
    --accent-2: #d94b9b;
    --good: #19794b;
    --warn: #9b5d00;
    --danger: #a5263d;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 10% -10%, rgba(109, 70, 232, 0.2), transparent 34rem),
        radial-gradient(circle at 90% 10%, rgba(217, 75, 155, 0.14), transparent 30rem),
        var(--bg);
}

.site-header,
main,
footer {
    width: min(70rem, calc(100% - 2rem));
    margin-inline: auto;
}

.site-header {
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    color: var(--text);
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.version,
.eyebrow {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

main { padding: clamp(3rem, 8vw, 7rem) 0 4rem; }

.hero { max-width: 52rem; }
.hero--compact { max-width: 44rem; }

h1 {
    max-width: 13ch;
    margin: 0.35rem 0 1rem;
    font-size: clamp(3rem, 9vw, 6.4rem);
    line-height: 0.94;
    letter-spacing: -0.065em;
}

.hero--compact h1 { font-size: clamp(2.8rem, 7vw, 5rem); }

.lede {
    max-width: 42rem;
    color: var(--muted);
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    line-height: 1.55;
}

.status-card {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 4rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: 1.75rem;
    background: var(--surface);
    box-shadow: 0 1.5rem 4rem rgba(37, 26, 72, 0.08);
    backdrop-filter: blur(18px);
}

.status-card h2,
.principles h2 { margin: 0.3rem 0 0.5rem; }
.status-card p { max-width: 42rem; color: var(--muted); }
.status-card--stacked { align-items: flex-start; }

.status {
    flex: none;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.status--ok { color: var(--good); background: rgba(25, 121, 75, 0.12); }
.status--degraded { color: var(--warn); background: rgba(155, 93, 0, 0.12); }

.principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.principles article {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    background: var(--surface);
}

.principles p { color: var(--muted); line-height: 1.55; }

.action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.action-row--end { justify-content: flex-end; }

.button,
button.button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    padding: 0.75rem 1.05rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: white;
    background: var(--accent);
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.button--secondary {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

.button--danger { background: var(--danger); }

.text-button {
    padding: 0;
    border: 0;
    color: var(--muted);
    background: transparent;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.helper-text {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.notice {
    margin-bottom: 2rem;
    padding: 0.9rem 1.1rem;
    border-radius: 1rem;
    font-weight: 650;
}

.notice--good {
    color: var(--good);
    border: 1px solid rgba(25, 121, 75, 0.24);
    background: rgba(25, 121, 75, 0.1);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 3rem;
}

.metric-grid article {
    min-width: 0;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--surface);
}

.metric-grid h2 {
    margin: 0.35rem 0 0;
    overflow-wrap: anywhere;
}

.metric-small { font-size: 1rem; }

footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
}

@media (max-width: 44rem) {
    .status-card { align-items: flex-start; flex-direction: column; }
    .principles { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    footer { flex-direction: column; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #100e19;
        --surface: rgba(29, 25, 43, 0.84);
        --text: #f5f1ff;
        --muted: #aaa4bb;
        --line: rgba(220, 210, 255, 0.14);
        --good: #74dda8;
        --warn: #f0b768;
        --danger: #ed7187;
    }
}

@media (max-width: 30rem) {
    .metric-grid { grid-template-columns: 1fr; }
}

/* v0.3.0 interests and onboarding */
.notice--error {
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.interests-hero { margin-bottom: 2rem; }

.interest-form { margin-top: 1.5rem; }

.interest-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.interest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.interest-card {
    position: relative;
    display: grid;
    gap: 0.45rem;
    min-height: 10rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    background: var(--surface);
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.interest-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}

.interest-card input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.interest-card.is-selected,
.interest-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

.interest-check {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: transparent;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 900;
}

.interest-card.is-selected .interest-check,
.interest-card:has(input:checked) .interest-check {
    color: white;
    border-color: var(--accent);
    background: var(--accent);
}

.interest-name {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.interest-description {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.sticky-actions {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    max-width: 100%;
    margin: 1.25rem auto 0;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 1rem 3rem rgba(37, 26, 72, 0.12);
    backdrop-filter: blur(18px);
}

.mix-card {
    margin-top: 3rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: 1.75rem;
    background: var(--surface);
}

.mix-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mix-card h2 { margin: 0.3rem 0 0; }

.topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.topic-chip {
    display: inline-flex;
    padding: 0.55rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    font-size: 0.9rem;
    font-weight: 700;
}

@media (max-width: 52rem) {
    .interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
    .interest-grid { grid-template-columns: 1fr; }
    .interest-toolbar { align-items: flex-start; flex-direction: column; }
    .sticky-actions {
        width: 100%;
        border-radius: 1.2rem;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .mix-card__heading { flex-direction: column; }
}

/* v0.3.1 source catalog */
.status--neutral {
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 10%, transparent);
}

.metric-grid--four { grid-template-columns: repeat(4, 1fr); }

.admin-hero { margin-bottom: 2rem; }

.admin-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    background: var(--surface);
}

.admin-panel h2 { margin: 0.35rem 0 1rem; }
.admin-panel--dashboard { margin-top: 1rem; }

.admin-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

.admin-form { display: grid; gap: 1rem; }

.field { display: grid; gap: 0.4rem; }
.field > span,
.topic-fieldset legend {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.field input,
.field select {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    font: inherit;
}

.field--short { max-width: 15rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.topic-fieldset {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.topic-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.8rem;
    margin-top: 0.9rem;
}

.topic-check-grid label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.source-list { display: grid; gap: 0.85rem; }

.source-row {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.source-row__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.source-row h3 { margin: 0 0 0.2rem; }
.source-row p { margin: 0; }

.source-url {
    display: block;
    margin-top: 0.8rem;
    color: var(--muted);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.topic-chips--small { margin-top: 0.8rem; }
.topic-chips--small .topic-chip { padding: 0.35rem 0.55rem; font-size: 0.78rem; }

.button--small,
button.button--small {
    min-height: 2.35rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.88rem;
}

@media (max-width: 58rem) {
    .admin-split { grid-template-columns: 1fr; }
    .metric-grid--four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 34rem) {
    .form-grid,
    .topic-check-grid,
    .metric-grid--four { grid-template-columns: 1fr; }
    .source-row__top { flex-direction: column; }
}

/* v0.4.0 feed ingestion */
.notice--neutral {
    border-color: var(--line);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--muted);
}

.metric-grid--source {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.source-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    margin-top: 0.75rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.source-error { color: var(--danger); }
.source-error-message {
    margin: 0.6rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
    font-size: 0.82rem;
    line-height: 1.45;
}

button.button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.article-admin-list { display: grid; gap: 0; }
.article-admin-row { padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.article-admin-row:first-child { padding-top: 0; }
.article-admin-row:last-child { border-bottom: 0; padding-bottom: 0; }
.article-admin-row h2 { margin: 0.25rem 0 0.4rem; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.article-admin-row h2 a { color: inherit; text-decoration: none; }
.article-admin-row h2 a:hover { text-decoration: underline; }
.article-meta { margin: 0; color: var(--muted); font-size: 0.82rem; }
.article-summary { margin: 0.65rem 0 0; color: var(--muted); line-height: 1.55; }

@media (max-width: 70rem) {
    .metric-grid--source { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 42rem) {
    .metric-grid--source { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 30rem) {
    .metric-grid--source { grid-template-columns: 1fr; }
}

/* v0.5.0 personalized feed */
.feed-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 1.2rem;
}

.feed-hero h1 {
    margin: 0.25rem 0 0.6rem;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.feed-hero .lede {
    max-width: 48rem;
    margin-bottom: 0;
}

.feed-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.feed-filter {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.35rem 0 1rem;
    margin-bottom: 0.6rem;
    scrollbar-width: thin;
}

.feed-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    min-height: 2.35rem;
    padding: 0.48rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 650;
}

.feed-filter__chip span {
    opacity: 0.65;
    font-size: 0.75rem;
}

.feed-filter__chip:hover,
.feed-filter__chip.is-active {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 11%, var(--surface));
}

.feed-list {
    display: grid;
    gap: 0;
    max-width: 58rem;
}

.feed-story {
    padding: 1.45rem 0;
    border-bottom: 1px solid var(--line);
}

.feed-story:first-child { padding-top: 0.7rem; }
.feed-story:last-child { border-bottom: 0; }

.feed-story__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
    margin-bottom: 0.42rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.feed-story__meta strong {
    color: var(--text);
    font-weight: 700;
}

.feed-story h2 {
    max-width: 50rem;
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.feed-story h2 a {
    color: inherit;
    text-decoration: none;
}

.feed-story h2 a:hover { text-decoration: underline; }

.feed-story__summary {
    max-width: 49rem;
    margin: 0.72rem 0 0;
    color: var(--muted);
    line-height: 1.58;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-story__footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    margin-top: 0.8rem;
}

.feed-story__footer .topic-chips { margin-top: 0; }

.feed-story__open {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.feed-story__open:hover { color: var(--text); }

.feed-empty {
    max-width: 44rem;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.feed-empty h2 { margin: 0.25rem 0 0.5rem; }
.feed-empty p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }

@media (max-width: 48rem) {
    .feed-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .feed-hero__actions { justify-content: flex-start; }
    .feed-story__footer { align-items: flex-start; flex-direction: column; }
}

/* v0.5.1 explicit priorities and Following */
.feed-mode-tabs {
    display: inline-flex;
    gap: 0.35rem;
    margin: 0.35rem 0 1rem;
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.feed-mode-tab {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.48rem 0.9rem;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 750;
}

.feed-mode-tab:hover,
.feed-mode-tab.is-active {
    color: white;
    background: var(--accent);
}

.feed-story__reason {
    margin: 0 0 0.45rem;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
}

.preference-key {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.preference-key__item {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.preference-key__item strong { font-size: 0.88rem; }
.preference-key__item span { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.preference-key__item--follow { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); }
.preference-key__item--blocked { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

.preference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.preference-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.45fr);
    gap: 1rem;
    align-items: center;
    min-height: 9rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    background: var(--surface);
}

.preference-card--follow {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.preference-card--blocked {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
    background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.preference-card__copy h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
}

.preference-card__copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.87rem;
    line-height: 1.45;
}

.preference-card__control { min-width: 0; }

@media (max-width: 58rem) {
    .preference-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .preference-grid { grid-template-columns: 1fr; }
}

@media (max-width: 36rem) {
    .feed-mode-tabs { width: 100%; }
    .feed-mode-tab { flex: 1; justify-content: center; }
    .preference-key { grid-template-columns: 1fr; }
    .preference-card { grid-template-columns: 1fr; }
}

/* v0.6.0 automatic source discovery */
.discovery-split { margin-top: 1rem; }

.discovery-topic-list,
.discovery-run-list {
    display: grid;
    gap: 0;
}

.discovery-topic-row,
.discovery-run-row {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--line);
}

.discovery-topic-row:first-child,
.discovery-run-row:first-child { padding-top: 0; }

.discovery-topic-row:last-child,
.discovery-run-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.discovery-topic-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.discovery-topic-row strong {
    display: block;
    margin-bottom: 0.25rem;
}

.discovery-topic-row p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.discovery-topic-row__meta {
    flex: 0 0 auto;
    display: grid;
    gap: 0.2rem;
    text-align: right;
    color: var(--muted);
    font-size: 0.78rem;
}

.discovery-run-stats {
    margin: 0.65rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.discovery-candidates { margin-top: 1rem; }
.discovery-feed-url { margin-top: 0.55rem !important; overflow-wrap: anywhere; }
.discovery-reason { margin-top: 0.5rem !important; }

@media (max-width: 42rem) {
    .discovery-topic-row {
        flex-direction: column;
    }

    .discovery-topic-row__meta {
        text-align: left;
    }
}

/* v0.6.1 discovery scaling and diagnostics */
.discovery-run-detail { margin-top: 1rem; }
.discovery-detail-metrics {
    margin-top: 1.25rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.discovery-detail-metrics article { padding: 1rem; }
.discovery-detail-metrics h3 {
    margin: 0.3rem 0 0;
    font-size: 1.35rem;
}
.discovery-detail-list { margin-top: 0.8rem; }
.discovery-run-row .text-button { display: inline-block; margin-top: 0.5rem; }

@media (max-width: 62rem) {
    .discovery-detail-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 42rem) {
    .discovery-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v0.8.0 focused personalization, source controls, and PWA */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.brand img {
    display: block;
    width: 2.1rem;
    height: 2.1rem;
    object-fit: contain;
}
.site-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.header-install {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
}

.interest-section {
    margin-top: 2.5rem;
}
.interest-section--focus {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    border-radius: 1.6rem;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.interest-section__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}
.interest-section__heading h2 {
    margin: 0.25rem 0 0;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    letter-spacing: -0.04em;
}
.interest-section__heading > p {
    max-width: 32rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}
.focus-group + .focus-group {
    margin-top: 1.6rem;
}
.focus-group > h3 {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.preference-grid--focused {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.preference-card--focused {
    border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}
.focus-badge {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feed-story--focused {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent);
}
.story-source-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
}
.story-source-control select {
    min-height: 2rem;
    max-width: 10rem;
    padding: 0.3rem 1.75rem 0.3rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    color: var(--text);
    background: var(--surface);
    font: inherit;
}

.source-preference-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 2.5rem;
}
.source-preference-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
    gap: 1.25rem;
    align-items: center;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--surface);
}
.source-preference-card--follow,
.source-preference-card--prefer {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.source-preference-card--suppress {
    opacity: 0.78;
}
.source-preference-card--mute {
    opacity: 0.55;
}
.source-preference-card__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.source-preference-card h2 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}
.source-preference-card h2 a {
    color: inherit;
    text-decoration: none;
}
.source-preference-card h2 a:hover {
    text-decoration: underline;
}
.source-preference-card__control .field {
    margin: 0;
}
.source-preference-card__control select {
    width: 100%;
}

@media (max-width: 48rem) {
    .interest-section__heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .preference-grid--focused {
        grid-template-columns: 1fr;
    }
    .source-preference-card {
        grid-template-columns: 1fr;
    }
}

/* v0.8.1 custom interest builder */
.custom-interest-builder {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 1.6rem;
    background: color-mix(in srgb, var(--accent) 3%, var(--surface));
}
.custom-interest-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: end;
}
.custom-interest-form__wide {
    grid-column: 1 / -1;
}
.custom-interest-form__action {
    display: flex;
    align-items: end;
}
.custom-interest-form__action .button {
    width: 100%;
}
@media (max-width: 48rem) {
    .custom-interest-form {
        grid-template-columns: 1fr;
    }
    .custom-interest-form__wide {
        grid-column: auto;
    }
}

/* v0.9.0 article feedback, saved/read state, and adaptive ranking */
.story-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}
.story-action {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.42rem 0.7rem;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
}
.story-action:hover,
.story-action.is-active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.story-action--quiet { color: var(--muted); }
.feed-story--read { opacity: 0.9; }
.story-state {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.16rem 0.42rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
@media (max-width: 36rem) {
    .story-action { flex: 1 1 auto; text-align: center; }
}


/* v0.9.1 inline feedback and organic feed mixing */
.story-actions.is-saving,
.story-source-control:has(select:disabled) {
    opacity: 0.72;
}
.story-action-status,
.story-source-status {
    align-self: center;
    min-height: 1em;
    color: var(--good);
    font-size: 0.75rem;
    font-weight: 700;
}
.story-action-status.is-error,
.story-source-status.is-error { color: var(--danger); }
.feed-story--hiding {
    opacity: 0;
    transform: translateY(-0.35rem);
    transition: opacity 180ms ease, transform 180ms ease;
}
.story-state--detour {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* v0.10.0 visual newspaper */
:root {
    --editorial-serif: Georgia, "Times New Roman", Times, serif;
}

.newspaper-masthead {
    margin-bottom: 1rem;
    border-top: 4px solid var(--text);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 38%, var(--line));
    padding: 0.75rem 0 1.25rem;
}

.newspaper-masthead__edition {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.newspaper-masthead__title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 25rem);
    gap: 2rem;
    align-items: end;
    padding-top: 1rem;
}

.newspaper-masthead h1 {
    max-width: none;
    margin: 0.1rem 0 0.4rem;
    font-family: var(--editorial-serif);
    font-size: clamp(3.1rem, 8vw, 6.5rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.055em;
}

.newspaper-masthead__dek {
    max-width: 48rem;
    margin: 0;
    color: var(--muted);
    font-family: var(--editorial-serif);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    line-height: 1.42;
}

.newspaper-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.newspaper-nav-row__note {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.newspaper-front {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(18rem, 1fr);
    gap: 1.35rem;
    padding: 0.5rem 0 1.6rem;
    border-bottom: 2px solid color-mix(in srgb, var(--text) 55%, var(--line));
}

.newspaper-front__lead {
    padding-right: 1.35rem;
    border-right: 1px solid var(--line);
}

.newspaper-front__rail {
    display: grid;
    align-content: start;
}

.newspaper-front__rail .feed-story + .feed-story {
    border-top: 1px solid var(--line);
    margin-top: 1.1rem;
    padding-top: 1.1rem;
}

.newspaper-section-rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.4rem 0 1rem;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.newspaper-section-rule::before,
.newspaper-section-rule::after {
    content: "";
    height: 1px;
    background: color-mix(in srgb, var(--text) 40%, var(--line));
}
.newspaper-section-rule::before { width: 2.5rem; }
.newspaper-section-rule::after { flex: 1; }

.newspaper-story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.newspaper-story-grid > .feed-story {
    min-width: 0;
    padding: 1rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.newspaper-story-grid > .feed-story--wide {
    grid-column: span 2;
}

.feed-story {
    min-width: 0;
}

.feed-story__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 0.8rem;
    overflow: hidden;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.feed-story__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 220ms ease;
}

.feed-story__image:hover img { transform: scale(1.015); }
.feed-story__image.is-broken { display: none; }

.feed-story__body { min-width: 0; }

.feed-story__kicker {
    margin: 0 0 0.35rem;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feed-story h2 {
    max-width: none;
    font-family: var(--editorial-serif);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.feed-story--lead {
    padding: 0;
    border: 0;
    box-shadow: none;
}
.feed-story--lead .feed-story__image { aspect-ratio: 16 / 8.5; }
.feed-story--lead h2 {
    font-size: clamp(2rem, 4.4vw, 3.35rem);
    line-height: 1.01;
}
.feed-story--lead .feed-story__summary {
    max-width: 56rem;
    font-family: var(--editorial-serif);
    font-size: 1.05rem;
    -webkit-line-clamp: 4;
}

.feed-story--side {
    padding: 0;
    border: 0;
    box-shadow: none;
}
.feed-story--side .feed-story__image { aspect-ratio: 16 / 9.3; }
.feed-story--side h2 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); }
.feed-story--side .feed-story__summary { -webkit-line-clamp: 2; }

.feed-story--standard,
.feed-story--wide {
    border-color: var(--line);
    box-shadow: none;
}
.feed-story--standard h2 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.feed-story--standard .feed-story__summary { -webkit-line-clamp: 3; }
.feed-story--wide {
    display: grid;
    grid-template-columns: minmax(13rem, 0.9fr) minmax(0, 1.2fr);
    gap: 1rem;
    align-items: start;
}
.feed-story--wide .feed-story__image { margin: 0; aspect-ratio: 4 / 3; }
.feed-story--wide h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); }

.feed-story__meta {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}
.feed-story__meta strong { font-weight: 800; }

.feed-story__summary {
    font-size: 0.94rem;
    line-height: 1.5;
}

.feed-story__footer {
    padding-top: 0.15rem;
}

.topic-chip--coverage {
    border-style: dashed;
    color: var(--muted);
}

.newspaper-story-grid .story-actions,
.newspaper-front__rail .story-actions {
    gap: 0.35rem;
}
.newspaper-story-grid .story-action,
.newspaper-front__rail .story-action {
    padding: 0.34rem 0.52rem;
    font-size: 0.7rem;
}

.newspaper-story-grid .story-source-control,
.newspaper-front__rail .story-source-control {
    gap: 0.42rem;
    font-size: 0.72rem;
}
.newspaper-story-grid .story-source-control select,
.newspaper-front__rail .story-source-control select {
    max-width: 8rem;
    font-size: 0.72rem;
}

/* Saved/history remain readable lists while gaining imagery. */
.feed-list .feed-story {
    max-width: 58rem;
}
.feed-list .feed-story:has(.feed-story__image) {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    gap: 1rem;
}
.feed-list .feed-story:has(.feed-story__image) .feed-story__image {
    margin: 0;
    aspect-ratio: 4 / 3;
}

@media (max-width: 62rem) {
    .newspaper-masthead__title-row { grid-template-columns: 1fr; gap: 1rem; }
    .newspaper-masthead__title-row .feed-hero__actions { justify-content: flex-start; }
    .newspaper-front { grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.9fr); }
    .newspaper-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 46rem) {
    main { padding-top: 1.5rem; }
    .newspaper-masthead__edition { font-size: 0.66rem; }
    .newspaper-masthead h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
    .newspaper-nav-row { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
    .newspaper-nav-row__note { margin-bottom: 0.55rem; }
    .newspaper-front { grid-template-columns: 1fr; gap: 0; }
    .newspaper-front__lead { padding: 0 0 1.25rem; border-right: 0; border-bottom: 2px solid color-mix(in srgb, var(--text) 45%, var(--line)); }
    .newspaper-front__rail { grid-template-columns: 1fr 1fr; gap: 0.8rem; padding-top: 1rem; }
    .newspaper-front__rail .feed-story + .feed-story { margin: 0; padding: 0 0 0 0.8rem; border-top: 0; border-left: 1px solid var(--line); }
    .newspaper-story-grid { grid-template-columns: 1fr; }
    .newspaper-story-grid > .feed-story--wide { grid-column: auto; }
    .feed-story--wide { display: block; }
    .feed-story--wide .feed-story__image { margin-bottom: 0.8rem; aspect-ratio: 16 / 9; }
    .feed-story--lead h2 { font-size: clamp(2rem, 9vw, 2.7rem); }
}

@media (max-width: 34rem) {
    .newspaper-front__rail { grid-template-columns: 1fr; }
    .newspaper-front__rail .feed-story + .feed-story { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .feed-story__footer { gap: 0.55rem; }
    .feed-list .feed-story:has(.feed-story__image) { display: block; }
    .feed-list .feed-story:has(.feed-story__image) .feed-story__image { margin-bottom: 0.8rem; aspect-ratio: 16 / 9; }
}

/* v0.10.2 modern social discovery */
:root {
    --bg: #f3f8f7;
    --surface: rgba(255, 255, 255, 0.94);
    --text: #14221f;
    --muted: #64736f;
    --line: rgba(27, 73, 66, 0.12);
    --accent: #0f8f82;
    --accent-2: #42c8b6;
}

body {
    background:
        radial-gradient(circle at 8% -12%, rgba(15, 143, 130, 0.13), transparent 34rem),
        radial-gradient(circle at 95% 4%, rgba(66, 200, 182, 0.08), transparent 30rem),
        var(--bg);
}

.button,
button.button {
    box-shadow: 0 0.35rem 1rem rgba(15, 143, 130, 0.12);
}

.button--secondary {
    box-shadow: none;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.feed-hero--social {
    align-items: center;
    margin-bottom: 1rem;
    padding: clamp(1.1rem, 2.8vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: 1.6rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--surface) 96%, transparent),
        color-mix(in srgb, var(--accent) 5%, var(--surface)));
    box-shadow: 0 1.1rem 3rem rgba(18, 56, 50, 0.07);
}

.feed-hero--social h1 {
    max-width: 15ch;
    margin: 0.2rem 0 0.45rem;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.feed-hero--social .lede {
    max-width: 46rem;
    font-family: inherit;
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.5;
}

.feed-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.feed-control-row__note {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.feed-mode-tabs {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 0.35rem 1rem rgba(18, 56, 50, 0.04);
}

.feed-filter {
    padding-top: 0.2rem;
    margin-bottom: 0.9rem;
}

.feed-filter__chip {
    min-height: 2.45rem;
    border-color: var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 0.2rem 0.7rem rgba(18, 56, 50, 0.035);
}

.social-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.9fr);
    gap: 1rem;
    margin-top: 0.15rem;
}

.social-feature-grid__lead,
.social-feature-grid__rail {
    min-width: 0;
}

.social-feature-grid__rail {
    display: grid;
    gap: 1rem;
}

.feed-section-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.45rem 0 0.85rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.feed-section-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.social-story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.social-story-grid > .feed-story--wide {
    grid-column: span 2;
}

.feed-story,
.feed-story--lead,
.feed-story--side,
.feed-story--standard,
.feed-story--wide {
    min-width: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    background: var(--surface);
    box-shadow: 0 0.65rem 1.8rem rgba(18, 56, 50, 0.07);
    overflow: hidden;
}

.feed-story--focused {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.feed-story__image,
.feed-story--lead .feed-story__image,
.feed-story--side .feed-story__image,
.feed-story--wide .feed-story__image {
    width: 100%;
    margin: 0;
    border-radius: 0;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), color-mix(in srgb, var(--accent-2) 8%, var(--surface)));
}

.feed-story__image { aspect-ratio: 16 / 9; }
.feed-story--lead .feed-story__image { aspect-ratio: 16 / 9; }
.feed-story--side .feed-story__image { aspect-ratio: 16 / 9; }
.feed-story--wide .feed-story__image { aspect-ratio: 16 / 8.5; }

.feed-story__image img {
    transition: transform 240ms ease, filter 240ms ease;
}

.feed-story__image:hover img {
    transform: scale(1.025);
    filter: saturate(1.03);
}

.feed-story__body {
    padding: 1rem 1.05rem 1.05rem;
}

.feed-story--lead .feed-story__body {
    padding: clamp(1rem, 2.5vw, 1.35rem);
}

.feed-story__meta {
    margin-bottom: 0.45rem;
    color: var(--muted);
    font-size: 0.76rem;
}

.feed-story__meta strong {
    color: var(--text);
    font-weight: 800;
}

.feed-story__kicker,
.feed-story__reason {
    margin: 0 0 0.38rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.03em;
    text-transform: none;
}

.feed-story h2,
.feed-story--lead h2,
.feed-story--side h2,
.feed-story--standard h2,
.feed-story--wide h2 {
    max-width: none;
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: -0.032em;
}

.feed-story--lead h2 { font-size: clamp(1.8rem, 3.8vw, 3rem); }
.feed-story--side h2 { font-size: clamp(1.18rem, 2vw, 1.55rem); }
.feed-story--standard h2 { font-size: clamp(1.22rem, 2vw, 1.6rem); }
.feed-story--wide h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); }

.feed-story h2 a:hover {
    color: color-mix(in srgb, var(--accent) 82%, var(--text));
    text-decoration: none;
}

.feed-story__summary,
.feed-story--lead .feed-story__summary {
    max-width: none;
    margin-top: 0.62rem;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.52;
    -webkit-line-clamp: 3;
}

.feed-story--lead .feed-story__summary {
    font-size: 1rem;
    -webkit-line-clamp: 3;
}

.feed-story__footer {
    margin-top: 0.8rem;
    padding-top: 0;
}

.feed-story__open {
    color: var(--accent);
    font-weight: 800;
}

.topic-chip {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

.story-state--detour {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.story-actions {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.story-action {
    border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.story-action:hover,
.story-action.is-active {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.story-source-control {
    margin-top: 0.65rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
}

.story-source-control select {
    border-color: var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
}

/* Saved/history use the same contemporary card language. */
.feed-list {
    max-width: 62rem;
    gap: 0.9rem;
}

.feed-list .feed-story {
    max-width: none;
}

.feed-list .feed-story:has(.feed-story__image) {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: 0;
}

.feed-list .feed-story:has(.feed-story__image) .feed-story__image {
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1513;
        --surface: rgba(20, 32, 29, 0.96);
        --text: #edf8f5;
        --muted: #9db0ab;
        --line: rgba(205, 240, 231, 0.11);
        --accent: #55d2c0;
        --accent-2: #8ae3d7;
    }

    body {
        background:
            radial-gradient(circle at 8% -12%, rgba(85, 210, 192, 0.11), transparent 34rem),
            radial-gradient(circle at 95% 4%, rgba(138, 227, 215, 0.06), transparent 30rem),
            var(--bg);
    }

    .feed-story,
    .feed-hero--social {
        box-shadow: 0 0.85rem 2.2rem rgba(0, 0, 0, 0.18);
    }
}

@media (max-width: 62rem) {
    .social-feature-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.85fr);
    }
}

@media (max-width: 48rem) {
    main { padding-top: 1.4rem; }

    .feed-hero--social {
        align-items: flex-start;
        padding: 1rem;
    }

    .feed-control-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.1rem;
    }

    .feed-control-row__note {
        margin: -0.35rem 0 0.6rem;
    }

    .social-feature-grid {
        grid-template-columns: 1fr;
    }

    .social-feature-grid__rail {
        grid-template-columns: 1fr 1fr;
    }

    .social-story-grid {
        grid-template-columns: 1fr;
    }

    .social-story-grid > .feed-story--wide {
        grid-column: auto;
    }

    .feed-story--wide {
        display: block;
    }

    .feed-story--wide .feed-story__image {
        aspect-ratio: 16 / 9;
    }

    .feed-list .feed-story:has(.feed-story__image) {
        display: block;
    }

    .feed-list .feed-story:has(.feed-story__image) .feed-story__image {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 34rem) {
    .site-header,
    main,
    footer {
        width: min(100% - 1rem, 70rem);
    }

    .social-feature-grid__rail {
        grid-template-columns: 1fr;
    }

    .feed-story,
    .feed-story--lead,
    .feed-story--side,
    .feed-story--standard,
    .feed-story--wide {
        border-radius: 1.15rem;
    }
}

/* v0.10.3 discovery expansion + Stumble */
.preference-card__sources {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.preference-card__discover {
    align-self: flex-start;
    margin-top: 0.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.stumble-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
}

.stumble-hero h1 {
    margin: 0.08rem 0 0.35rem;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1.65rem, 4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.stumble-hero__actions,
.stumble-next {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.stumble-stage {
    max-width: 58rem;
    margin: 0 auto;
}

.stumble-stage__why {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: 0 0 0.65rem;
    color: var(--muted);
    font-size: 0.84rem;
}

.feed-story--stumble {
    overflow: hidden;
    border-radius: 1.4rem;
}

.feed-story--stumble .feed-story__image {
    aspect-ratio: 16 / 9;
    max-height: 34rem;
}

.feed-story--stumble h2 {
    font-size: clamp(1.6rem, 4vw, 2.7rem);
}

.feed-story--stumble .feed-story__summary {
    font-size: 1rem;
    -webkit-line-clamp: 5;
}

.stumble-next {
    justify-content: space-between;
    margin-top: 0.85rem;
    padding: 0.8rem 0.2rem;
    color: var(--muted);
}

.stumble-empty {
    max-width: 46rem;
    margin: 2rem auto;
}

@media (max-width: 48rem) {
    .stumble-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .stumble-hero__actions {
        width: 100%;
    }
    .stumble-hero__actions .button {
        flex: 1 1 auto;
        text-align: center;
    }
    .stumble-next {
        align-items: stretch;
        flex-direction: column;
    }
    .stumble-next .button {
        text-align: center;
    }
}

/* v0.10.4 fresh feed controls */
.feed-control-row__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}
.button--compact {
    min-height: 36px;
    padding: .45rem .8rem;
    font-size: .86rem;
}
.feed-new-stories {
    position: sticky;
    top: 74px;
    z-index: 14;
    width: min(720px, calc(100% - 2rem));
    margin: .75rem auto 1rem;
    text-align: center;
}
.feed-new-stories[hidden] { display: none; }
.feed-new-stories a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, var(--accent));
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
}
.feed-new-stories a:hover { border-color: var(--accent); }
.feed-new-stories span { color: var(--accent); font-weight: 700; }
@media (max-width: 720px) {
    .feed-control-row__right { width: 100%; justify-content: space-between; }
    .feed-new-stories { top: 66px; width: calc(100% - 1rem); }
}

/* v0.11.0 Swirl Reader */
.reader-shell {
    width: min(100% - 1.25rem, 58rem);
    margin: 1rem auto 3rem;
}
.reader-toolbar {
    position: sticky;
    top: .65rem;
    z-index: 15;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    backdrop-filter: blur(14px);
}
.reader-article {
    padding: clamp(1.1rem, 4vw, 3.5rem);
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(18, 46, 42, .08);
}
.reader-article__header {
    max-width: 46rem;
    margin: 0 auto 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.reader-article__header h1 {
    margin: .3rem 0 .75rem;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(2rem, 6vw, 3.8rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}
.reader-byline { color: var(--muted); }
.reader-content {
    max-width: 46rem;
    margin: 0 auto;
    font-size: clamp(1.05rem, 2vw, 1.18rem);
    line-height: 1.78;
}
.reader-content p,
.reader-content ul,
.reader-content ol,
.reader-content blockquote,
.reader-content pre { margin: 0 0 1.35em; }
.reader-content h2,
.reader-content h3,
.reader-content h4 {
    margin: 1.8em 0 .65em;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    line-height: 1.18;
}
.reader-content img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    border-radius: 1rem;
}
.reader-content blockquote {
    padding-left: 1.1rem;
    border-left: 4px solid var(--accent);
    color: var(--muted);
}
.reader-content pre {
    overflow-x: auto;
    padding: 1rem;
    border-radius: .8rem;
    background: color-mix(in srgb, var(--surface) 80%, var(--text) 8%);
}
.reader-content a { color: var(--accent); }
.reader-end,
.reader-fallback {
    max-width: 46rem;
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
@media (max-width: 40rem) {
    .reader-toolbar { top: .35rem; }
    .reader-toolbar .button { flex: 1 1 0; padding-inline: .65rem; text-align: center; }
    .reader-article { border-radius: 1.15rem; }
}