/* Visual-first feed layer. The underlying story, practice, and settings styles stay intentionally quieter. */
body{background:#f7f7f3}
.header{background:rgba(255,255,252,.94);border-bottom:1px solid #deded8}
.social-intro{max-width:680px;padding:34px 18px 18px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.social-intro h1{font-family:var(--serif);font-size:clamp(2rem,7vw,3.5rem);letter-spacing:-.045em;line-height:1;margin:0}
.social-intro p{margin:8px 0 0;color:var(--muted);font-size:.9rem}
.social-intro>a{white-space:nowrap;font-size:.75rem;font-weight:800;color:var(--muted);text-underline-offset:4px}
.topic-stories{max-width:680px;margin:0 auto;padding:10px 18px 20px;display:flex;justify-content:space-between;gap:12px;overflow-x:auto;border-bottom:1px solid #deded8}
.topic-stories button{flex:0 0 104px;border:0;background:transparent;display:grid;justify-items:center;gap:8px;cursor:pointer;color:var(--ink);font-size:.7rem;font-weight:800}
.story-ring{width:72px;height:72px;padding:3px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 30deg,var(--clay),var(--gold),var(--moss),var(--clay))}
.topic-stories button[aria-pressed=true] .story-ring{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.story-ring img,.story-ring b{width:100%;height:100%;border:3px solid #fff;border-radius:50%;object-fit:cover;background:var(--forest);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.35rem}
.social-intro+.topic-stories+.filter-row{position:static;max-width:680px;margin:0 auto 10px;padding:14px 18px;background:transparent;scrollbar-width:none}
.social-intro+.topic-stories+.filter-row::-webkit-scrollbar{display:none}
.social-intro+.topic-stories+.filter-row button{background:transparent;border:0;padding:7px 12px;color:var(--muted)}
.social-intro+.topic-stories+.filter-row button[aria-pressed=true]{background:var(--ink);color:#fff}
.social-feed{max-width:640px;display:block;padding:0 0 100px}
.social-post{margin:0 0 22px;border:1px solid #d7d7d1;border-radius:14px;background:#fff;overflow:hidden;box-shadow:none;transform:none!important}
.social-post:hover{box-shadow:none}
.post-meta{height:64px;padding:9px 13px;display:flex;align-items:center;gap:10px}
.topic-avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:.95rem;background:#3b6756;border:2px solid #fff;box-shadow:0 0 0 2px var(--fern)}
.avatar-science{background:#416e83;box-shadow:0 0 0 2px #9ab9c7}.avatar-language{background:#76576e;box-shadow:0 0 0 2px #c9a9be}.avatar-math{background:#315d61;box-shadow:0 0 0 2px #98b9b6}
.post-meta>div{display:grid;line-height:1.25}.post-meta strong{font-size:.8rem}.post-meta>div span{color:var(--muted);font-size:.68rem}.seen-dot{margin-left:auto;color:var(--muted);font-size:.65rem}.more-button{margin-left:4px;border:0;background:transparent;letter-spacing:2px;font-weight:bold;opacity:.7}.post-media-link{position:relative;display:block;background:#e8e8e2;text-decoration:none}
.social-post .post-art{width:100%;min-height:0;aspect-ratio:1/1;border-radius:0}
.post-cover{position:relative;margin:0;background:#e8e8e2;overflow:hidden}
.post-cover img{width:100%;height:100%;display:block;object-fit:cover}
.post-cover figcaption{position:absolute;left:10px;bottom:10px;padding:5px 8px;border-radius:999px;background:rgba(16,31,27,.72);color:#fff;font-size:.6rem;backdrop-filter:blur(8px)}
.panel-count{position:absolute;right:11px;top:11px;padding:5px 9px;border-radius:999px;background:rgba(16,31,27,.72);color:#fff;font-size:.68rem;font-weight:800;backdrop-filter:blur(8px)}
.social-post .post-art:not(.post-cover){background:linear-gradient(145deg,#315d4d,#a8bd78)}
.social-post .post-art:not(.post-cover)::before{width:72%;height:72%;left:-18%;bottom:-26%;border-width:5px}
.social-post .post-art:not(.post-cover)::after{width:58%;height:58%;right:-15%;top:-18%;border-width:4px}
.social-post .art-orbit{width:58%;height:58%;border-width:3px}.social-post .art-seed{width:28%;height:40%}.social-post .art-glyph{font-size:clamp(4rem,15vw,7rem)}
.post-actions{height:52px;padding:6px 11px;display:flex;align-items:center;gap:5px}
.post-actions button{width:42px;height:42px;border:0;background:transparent;border-radius:50%;font-family:Arial,sans-serif;font-size:1.75rem;line-height:1;cursor:pointer}
.post-actions button:hover{background:#f2f2ed}.post-actions button[aria-pressed=true]{color:#ba3e4c}.post-actions .post-save{margin-left:auto;color:var(--ink)}
.social-caption{padding:0 15px 18px}.social-caption p{margin:0 0 6px;font-size:.84rem;line-height:1.45}.social-caption p strong{margin-right:5px}.reaction-note{font-weight:800!important}.social-caption h2{margin:5px 0 3px;font-family:var(--serif);font-size:1.45rem;line-height:1.12;letter-spacing:-.025em}.social-caption h2 a{text-decoration:none}.open-story{color:var(--muted);font-size:.76rem;text-decoration:none}.open-story:hover{text-decoration:underline}
.visual-fact-media{isolation:isolate}.visual-fact-media::after{content:'';position:absolute;z-index:1;inset:35% 0 0;background:linear-gradient(transparent,rgba(9,18,15,.88))}.format-badge{position:absolute;z-index:2;left:14px;top:14px;padding:6px 9px;border-radius:999px;background:rgba(255,253,246,.9);color:#17362d;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.visual-fact-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:24px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35)}.visual-fact-copy span{display:block;margin-bottom:7px;font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.visual-fact-copy strong{display:block;max-width:18ch;font-family:var(--serif);font-size:clamp(1.75rem,6vw,2.8rem);font-weight:500;line-height:1.02;letter-spacing:-.035em}.visual-fact-post .social-caption h2{font-size:1.2rem}
.quiz-post-visual{position:relative;height:150px;overflow:hidden}.quiz-post-visual .post-art{min-height:0;aspect-ratio:auto;height:100%}.feed-quiz-shell{padding:24px;background:#f0f3ec;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.feed-quiz-shell fieldset{min-width:0;margin:0;padding:0;border:0}.feed-quiz-shell legend{width:100%;margin:0 0 18px;font-family:var(--serif);font-size:clamp(1.45rem,4vw,1.9rem);font-weight:500;line-height:1.12;letter-spacing:-.025em}.feed-quiz-options{display:grid;gap:9px}.feed-quiz-option{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:48px;padding:9px 12px;border:1px solid var(--line);border-radius:13px;background:#fff;cursor:pointer;font-size:.84rem}.feed-quiz-option:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}.feed-quiz-option input{position:absolute;width:1px;height:1px;opacity:0}.quiz-choice-letter{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cream);font-size:.7rem;font-weight:900}.feed-quiz-option.correct{border-color:#4c805d;background:#eaf4e3}.feed-quiz-option.selected-wrong{border-color:#b96b52;background:#fff0ec}.quiz-result-label{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase}.feed-quiz-submit{margin-top:18px}.feed-quiz-feedback{margin-top:18px;padding:16px;border-radius:14px;background:#fff0ec}.feed-quiz-feedback.correct{background:#eaf4e3}.feed-quiz-feedback>strong{font-family:var(--serif);font-size:1.2rem}.feed-quiz-feedback p{margin:5px 0 0;font-size:.82rem;line-height:1.5}.quiz-post .social-caption{padding-top:15px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.carousel-stage{display:grid;grid-template-rows:230px 210px;background:var(--paper)}.carousel-slide-media{position:relative;overflow:hidden;background:#e8e8e2}.carousel-slide-media .post-art{min-height:0;aspect-ratio:auto;height:100%}.carousel-slide-copy{min-width:0;height:210px;padding:24px 26px;overflow-y:auto;overscroll-behavior:contain}.carousel-eyebrow{display:block;margin-bottom:6px;color:var(--clay);font-size:.66rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.carousel-slide-copy h2{margin:0 0 10px;font-family:var(--serif);font-size:clamp(1.55rem,4vw,2rem);font-weight:500;line-height:1.08;letter-spacing:-.03em}.carousel-slide-copy p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}.carousel-takeaway{display:grid;gap:2px;margin-top:14px;padding:11px 13px;border-left:3px solid var(--gold);background:var(--cream);font-size:.78rem}.carousel-takeaway strong{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase}.carousel-controls{height:56px;padding:8px 14px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.carousel-controls button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--paper);cursor:pointer;font-size:1.1rem}.carousel-controls button:last-child{justify-self:end}.carousel-controls button:disabled{cursor:not-allowed;opacity:.35}.carousel-counter{justify-self:center;color:var(--muted);font-size:.72rem;font-weight:900;font-variant-numeric:tabular-nums}.carousel-post .social-caption{padding-top:15px}
.saved-feed{max-width:980px;grid-template-columns:repeat(2,minmax(0,1fr))}.saved-feed .social-post{margin:0}.saved-feed .social-caption h2{font-size:1.2rem}
.story-header .post-cover{min-height:530px;aspect-ratio:auto}.story-header .post-cover img{min-height:530px}
.visual-note{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}.visual-note summary{cursor:pointer;font-weight:800;color:var(--ink)}.visual-note p{margin-top:8px!important;font-family:var(--sans)!important;font-size:.78rem!important;line-height:1.55!important}
.related-grid .social-post{border-radius:14px}.related-grid .post-meta,.related-grid .post-actions{display:none}.related-grid .post-media-link .post-art{aspect-ratio:1/1;min-height:0}.related-grid .social-caption{padding:18px;min-height:180px}.related-grid .social-caption p{display:none}
@media(max-width:700px){.social-intro{padding-top:26px}.social-intro>a{display:none}.topic-stories{justify-content:flex-start}.social-intro+.topic-stories+.filter-row{overflow-x:auto}.social-feed{padding-left:0;padding-right:0}.social-post{border-left:0;border-right:0;border-radius:0;margin-bottom:12px}.saved-feed{grid-template-columns:1fr;padding-left:0;padding-right:0}.saved-feed .social-post{border-left:0;border-right:0}.story-header .post-cover,.story-header .post-cover img{min-height:0;aspect-ratio:1/1}.post-cover figcaption{bottom:8px}.carousel-stage{grid-template-rows:210px 200px}.carousel-slide-copy{height:200px;padding:21px 20px}}
@media(prefers-reduced-motion:reduce){.social-post{transition:none}.topic-stories button{transition:none}}
[data-theme=dark]{--cream:#101a17;--paper:#182521;--ink:#edf4ed;--muted:#a7b7b0;--forest:#6fa68d;--moss:#8fa77c;--fern:#486c5a;--gold:#e6bd70;--clay:#dc8a70;--blue:#86aebb;--line:#35463f;--shadow:0 18px 50px rgba(0,0,0,.32);color-scheme:dark}[data-theme=dark] body{background:#101a17}[data-theme=dark] .header{background:rgba(16,26,23,.94);border-bottom-color:var(--line)}[data-theme=dark] .mobile-nav{background:rgba(24,37,33,.96)}[data-theme=dark] .topic-stories{border-bottom-color:var(--line)}[data-theme=dark] .topic-stories button[aria-pressed=true] .story-ring{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}[data-theme=dark] .story-ring img,[data-theme=dark] .story-ring b,[data-theme=dark] .topic-avatar{border-color:var(--paper)}[data-theme=dark] .social-post{background:var(--paper);border-color:var(--line)}[data-theme=dark] .post-media-link,[data-theme=dark] .post-cover{background:#26332f}[data-theme=dark] .post-actions button:hover{background:#24332e}[data-theme=dark] .listen-button,[data-theme=dark] .question-card{background:#21352d}[data-theme=dark] .spell-feedback{background:#3d2925}[data-theme=dark] .spell-feedback.good,[data-theme=dark] .answer-list button.correct{background:#203829}[data-theme=dark] .answer-list button.chosen-wrong{background:#3d2925}[data-theme=dark] #storage-warning{background:#493817;color:#f5d792}[data-theme=dark] .theme-toggle{background:var(--paper);color:var(--gold)}[data-theme=dark] .preference-card{background:rgba(24,37,33,.85)}[data-theme=dark] .spell-entry input{background:#101a17}[data-theme=dark] .empty-state>span{background:#24332e}

/* Neutral dark theme: charcoal UI surfaces with explicit inverse control colors. */
[data-theme=dark]{--cream:#111214;--paper:#1b1c1f;--ink:#f1f1ef;--muted:#a9aaae;--forest:#c9c9c5;--moss:#a7a7a3;--fern:#56575b;--gold:#c7b58f;--clay:#c39785;--blue:#a1a7ad;--line:#36383d;--shadow:0 18px 50px rgba(0,0,0,.38)}
[data-theme=dark] body{background:#111214}
[data-theme=dark] .header{background:rgba(17,18,20,.94)}
[data-theme=dark] .mobile-nav{background:rgba(27,28,31,.97)}
[data-theme=dark] .social-post,[data-theme=dark] .story-header,[data-theme=dark] .practice-card,[data-theme=dark] .settings-card{background:#1b1c1f}
[data-theme=dark] .preference-card{background:rgba(27,28,31,.9)}
[data-theme=dark] .post-media-link,[data-theme=dark] .post-cover{background:#242529}
[data-theme=dark] .post-actions button:hover,[data-theme=dark] .empty-state>span{background:#292a2e}
[data-theme=dark] .listen-button,[data-theme=dark] .question-card{background:#26272b}
[data-theme=dark] .spell-entry input{background:#151619;color:var(--ink)}
[data-theme=dark] .spell-feedback,[data-theme=dark] .answer-list button.chosen-wrong{background:#332725}
[data-theme=dark] .spell-feedback.good,[data-theme=dark] .answer-list button.correct{background:#263029}
[data-theme=dark] .button.primary,[data-theme=dark] .filter-row button[aria-pressed=true],[data-theme=dark] .difficulty-row button[aria-pressed=true],[data-theme=dark] .mobile-nav a[aria-current],[data-theme=dark] .social-intro+.topic-stories+.filter-row button[aria-pressed=true]{background:#f1f1ef;border-color:#f1f1ef;color:#151619}
[data-theme=dark] .brand-mark,[data-theme=dark] .practice-stat{background:#d1d1cd;color:#151619}
[data-theme=dark] #toast,[data-theme=dark] .skip{background:#f1f1ef;color:#151619}
[data-theme=dark] .topic{background:#2d2e32;color:#dededb}
[data-theme=dark] .topic-science,[data-theme=dark] .topic-language,[data-theme=dark] .topic-math{background:#303136;color:#dededb}
[data-theme=dark] .theme-toggle{background:#242529;color:#e5e5e2}
[data-theme=dark] .danger{color:#ee9b91}
[data-theme=dark] .feed-quiz-shell{background:#26272b}[data-theme=dark] .feed-quiz-option{background:#1b1c1f}[data-theme=dark] .feed-quiz-option.correct,[data-theme=dark] .feed-quiz-feedback.correct{background:#263029}[data-theme=dark] .feed-quiz-option.selected-wrong,[data-theme=dark] .feed-quiz-feedback{background:#332725}
[data-theme=dark] .carousel-stage,[data-theme=dark] .carousel-controls,[data-theme=dark] .carousel-slide-media{background:#1b1c1f}[data-theme=dark] .carousel-takeaway{background:#242529}
