:root { --green:#0b5d4b; --ink:#333; --muted:#71827e; --line:#dce8e4; }
* { box-sizing:border-box; letter-spacing:0; }
[hidden] { display:none !important; }
html,body { touch-action:pan-y; }
body { margin:0; background:#fff; color:var(--ink); font:15px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
.hero,.wrap { width:min(920px,100%); margin:auto; }
.share-thumbnail { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); pointer-events:none; }
.hero-image { display:block; width:100%; height:auto; aspect-ratio:4197/2362; }
main.wrap { padding-inline:16px; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:14px 0; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); }
.live-meta { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.status { display:inline-flex; flex-shrink:0; align-items:center; gap:7px; padding:3px 9px; border:1px solid #c8dcd6; border-radius:99px; color:var(--green); line-height:1.75; }
.status i { width:6px; height:6px; border-radius:50%; background:#b7c9c4; }
.status.live i { background:#16834a; box-shadow:0 0 0 3px rgba(22,131,74,.18); }
.status.ended i { background:#78918a; }
.viewers { margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap; color:#637773; }
.viewers strong { color:var(--green); font-weight:600; }
.introduction { padding:20px 0; border-bottom:1px solid var(--line); }
.introduction h2 { margin:0 0 14px; font-size:17px; color:var(--green); }
.timeline { padding:8px 0 40px; }
.item { padding:16px 0 12px; }
.time { display:inline-block; margin:0 0 10px; padding:0 5px; background:#e11d24; color:#fff; font-size:13px; font-weight:700; line-height:1.35; white-space:nowrap; }
.entry-content { border-top:1px solid #ccc; padding-top:14px; }
.rich-content { min-width:0; }
.rich-content p { margin:0 0 16px; white-space:pre-wrap; overflow-wrap:anywhere; }
.rich-content img { display:block; width:100%; max-width:100%; height:auto; margin:0 0 16px; }
.rich-content > :last-child { margin-bottom:0; }
.empty { text-align:center; padding:65px 12px; color:var(--muted); }
.page-loading { display:flex; justify-content:center; align-items:center; gap:12px; min-height:180px; color:var(--muted); }
.loading-spinner { display:inline-block; flex:none; width:18px; height:18px; border:2px solid #cdded7; border-top-color:var(--green); border-radius:50%; animation:loading-spin 1s linear infinite; }
.connection { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; color:#a23e38; font-size:13px; padding:18px 0; }
.connection button,.image-loading button { font:inherit; border:1px solid #b9cdc4; border-radius:4px; padding:5px 12px; background:#fff; color:var(--green); cursor:pointer; }
.connection button:focus-visible,.image-loading button:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.rich-content .live-image { position:relative; width:100%; min-width:0; margin:0 0 16px; aspect-ratio:16/9; background:#f1f5f3; overflow:hidden; }
.image-loading { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; padding:16px; color:#61776c; font-size:13px; text-align:center; }
.rich-content .live-image img { width:100%; height:auto; margin:0; }
.live-image.is-loaded { background:transparent; }
.feed-navigation { position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:20; width:24px; height:48px; overflow:hidden; }
.feed-navigation.is-open { right:max(8px,env(safe-area-inset-right,0px)); width:48px; overflow:visible; }
.navigation-toggle { display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:1px solid #c8dcd6; border-radius:50%; background:#fff; color:var(--green); cursor:pointer; }
.navigation-toggle svg { width:22px; height:22px; pointer-events:none; }
.navigation-toggle[aria-expanded="false"] .navigation-close-icon,.navigation-toggle[aria-expanded="true"] .navigation-open-icon { display:none; }
.navigation-toggle:focus-visible { outline:2px solid var(--green); outline-offset:-3px; }
.feed-navigation-panel { position:absolute; right:0; bottom:calc(100% + 8px); width:136px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 3px 16px rgba(21,57,42,.16); }
.feed-order { display:flex; min-width:0; margin:0; padding:0; border:1px solid #b9cdc4; border-radius:6px; }
.feed-order label { position:relative; display:block; cursor:pointer; }
.feed-order input { position:absolute; width:1px; height:1px; opacity:0; }
.feed-order span { display:flex; align-items:center; justify-content:center; width:58px; min-height:40px; font-size:12px; color:#536b60; }
.feed-order label:first-of-type span { border-radius:5px 0 0 5px; }
.feed-order label:last-of-type span { border-radius:0 5px 5px 0; }
.feed-order input:checked + span { background:var(--green); color:#fff; font-weight:600; }
.feed-order input:focus-visible + span { outline:2px solid var(--green); outline-offset:3px; }
.feed-jumps { display:flex; gap:6px; margin-top:8px; }
.feed-jumps button { display:flex; align-items:center; justify-content:center; flex:1; width:0; min-width:0; height:40px; padding:0; border:1px solid #b9cdc4; border-radius:6px; background:#fff; color:var(--green); cursor:pointer; }
.feed-jumps svg { width:18px; height:18px; pointer-events:none; }
.feed-jumps button:disabled { color:#9caea5; border-color:var(--line); cursor:default; }
.feed-jumps button:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
@media(hover:hover) { .navigation-toggle:hover,.feed-jumps button:not(:disabled):hover { background:#edf5f1; } }
@keyframes loading-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .loading-spinner { animation:none; } }