:root { --bg: #0e0f13; --fg: #f2f2f4; --mut: #a9abb5; --acc: #ff8fb1; --card: #181a21; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; z-index: 9; background: #fff; color: #000; padding: 8px; }
.top { position: sticky; top: 0; z-index: 5; background: rgba(14,15,19,.95); padding: 8px 12px 0; padding-top: calc(8px + env(safe-area-inset-top)); }
.tabs { display: flex; gap: 6px; max-width: 720px; margin: 0 auto; }
[role=tab] { flex: 1; min-height: 44px; border: 1px solid #333; border-radius: 22px; background: transparent; color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
[role=tab][aria-selected=true] { background: var(--fg); color: var(--bg); }
.soon { font-size: .75em; font-weight: 400; opacity: .8; }
.rail { height: 3px; margin-top: 8px; background: #222; } #railFill { display: block; height: 100%; width: 0; background: var(--acc); }
main { max-width: 720px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 8px 0; } .sub, .small, figcaption, .when, .tags { color: var(--mut); }
.badge { display: inline-block; padding: 4px 10px; border-radius: 12px; background: #262935; font-size: .85rem; }
.intro-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
img { width: 100%; height: auto; border-radius: 12px; display: block; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid #444; background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.chip[aria-pressed=true] { background: var(--acc); color: #111; border-color: var(--acc); }
.day-h { font-size: 1.1rem; margin: 24px 0 8px; }
.entry { background: var(--card); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.entry h3 { margin: 6px 0 10px; } .pain { font-size: .9rem; color: var(--acc); margin: 0; }
figure { margin: 0; } figcaption { font-size: .85rem; margin-top: 6px; }
.thread { background: var(--card); border-radius: 16px; padding: 14px; margin: 16px 0; }
.thread h2 { font-size: 1rem; margin: 0 0 8px; } .thread ul { margin: 0; padding-left: 18px; }
.when, .back { font-size: .8rem; margin-left: 6px; } .back { color: var(--acc); }
.empty { padding: 24px; text-align: center; background: var(--card); border-radius: 16px; }
.older { min-height: 44px; width: 100%; border-radius: 22px; border: 1px solid #444; background: transparent; color: var(--fg); font: inherit; }
.cta { text-align: center; padding: 32px 0 16px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border-radius: 24px; background: var(--acc); color: #111; font-weight: 700; text-decoration: none; }
:focus-visible { outline: 3px solid #7aa7ff; outline-offset: 2px; }
.small { max-width: 720px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); font-size: .8rem; }
@media (min-width: 900px) { main { max-width: 1040px; } .layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; } .thread { position: sticky; top: 72px; } }
@media (prefers-reduced-motion: no-preference) { .entry { animation: in .4s ease both; } @keyframes in { from { opacity: 0; transform: translateY(8px); } } html { scroll-behavior: smooth; } }