:root{color-scheme:dark;--ink:#f5f5f5;--muted:#b9bfc1;--border:#444;--accent:#00e5ff;--pao-color:#00e5ff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#1a1a1a}
*{box-sizing:border-box;letter-spacing:0}
html{overflow-y:scroll}
body{margin:0;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;cursor:pointer}
button:disabled{cursor:wait;opacity:.6}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}
.skip-link{position:fixed;left:12px;top:-80px;z-index:20;background:#222;padding:12px}
.skip-link:focus{top:12px}
.feed-page{max-width:940px;margin:0 auto;padding:1px 20px 0;background:#202223;border-radius:12px}
/* Keep the homepage logo and utility geometry without importing calendar layout rules. */
.site-header{position:relative;text-align:center;padding-top:15px;margin-bottom:10px}
.logo-link{display:inline-block;color:inherit;text-decoration:none}
.logo{display:flex;justify-content:center;gap:10px;margin-bottom:10px}
.logo-char{display:inline-block;text-align:center}
.char-zh{display:block;font-size:2.8rem;font-weight:700;line-height:1.1;color:#fff}
.char-en{display:block;font-size:.8rem;font-weight:600;text-transform:uppercase;color:#ccc}
.accent-color{color:var(--pao-color)}
.header-actions{position:absolute;left:0;top:18px;display:flex;align-items:flex-start;gap:8px}
.header-actions-right{left:auto;right:0;justify-content:flex-end}
.utility-link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid #555;border-radius:50%;font-size:1rem;font-weight:600;text-decoration:none;color:#e6e6e6;background:#0005;line-height:1}
.utility-link:hover{background:#00e5ff24;border-color:#00a6bd;color:#d8fbff}
.utility-link.language-link{width:48px;min-width:48px;border-radius:999px;font-size:.85rem}
.account-header-link svg{display:block;width:20px;height:20px}
main{padding:14px 0 48px}
.feed-heading{text-align:center}
.feed-heading h1{font-size:28px;line-height:1.2;margin:0;font-weight:800}
.feed-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin:24px 0 16px;gap:12px}
.filters{display:inline-flex;justify-self:start;gap:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;max-width:100%}
.filters button{min-height:42px;padding:8px 14px;background:transparent;border:0;color:var(--muted);font-size:14px;font-weight:650}
.filters button+button{border-left:1px solid var(--border)}
.filters button[aria-pressed=true]{background:var(--accent);color:#102023}
.icon-button{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:6px;background:#242424}
.icon-button img{width:21px;height:21px}
.icon-button img,.feed-pagination img{filter:brightness(0) invert(1)}
.feed-update-count{position:absolute;right:1px;top:1px;min-width:17px;height:17px;padding:0 3px;display:grid;place-items:center;border-radius:9px;background:var(--accent);color:#102023;font-size:11px;font-weight:750;line-height:1;pointer-events:none}
.feed-list.is-suspended{visibility:hidden}
@media(max-width:600px){.feed-toolbar{grid-template-columns:minmax(0,1fr) auto}
}
.feed-status{color:var(--muted);font-size:14px;line-height:1.6}
.feed-status:empty{display:none}
.feed-status button,.feed-sign-in{margin:10px 0;padding:8px 16px;display:block;width:fit-content;min-height:44px;border:1px solid var(--accent);border-radius:6px;background:#242424;color:var(--accent);text-decoration:none}
.feed-list{display:grid;gap:0;border-top:1px solid var(--border)}
.finish-dialog a{color:#76e0ec}
.feed-pagination{display:flex;justify-content:center;padding:24px 0}
.feed-pagination button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 22px;background:#242424;border:1px solid var(--border);border-radius:6px;color:var(--accent);font-size:14px;font-weight:700}
.feed-pagination img{width:17px;height:17px}
@media(max-width:768px){body{padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))}
.feed-page{padding:1px 10px 0;background:transparent;border-radius:0}
.header-actions{top:14px}
.utility-link{width:26px;height:26px;font-size:.9rem}
}
@media(max-width:760px){main{padding:14px 0 32px}
.feed-heading h1{font-size:25px}
.feed-toolbar{margin:18px 0 12px}
}
@media(max-width:400px){.site-header>.logo-link{margin-top:40px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}
}
.feed-list{gap:14px;border:0}
.feed-invitation{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.feed-invitation a{color:var(--accent);font-weight:650;text-underline-offset:3px}
.feed-invitation[hidden]{display:block!important;visibility:hidden}
.feed-invitation.is-suspended{visibility:hidden}
.feed-complete{text-align:center;padding:0 12px 16px;color:var(--muted);font-size:14px}
.feed-complete::before{content:"";display:block;width:80px;height:10px;margin:0 auto 16px;background:conic-gradient(#b9bfc1 25%,transparent 0 50%,#b9bfc1 0 75%,transparent 0) 0 0/10px 10px;opacity:.6}
.feed-complete a{display:block;width:fit-content;margin:4px auto;min-height:44px;padding:12px 0;color:var(--accent);text-underline-offset:3px}
.kudos-spark{position:absolute;left:24px;top:12px;width:0;height:0;pointer-events:none;z-index:2}
.kudos-spark i{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--lane);--angle:calc(var(--i) * 45deg + 22deg);--reach:38px;animation:kudos-spark 650ms cubic-bezier(.2,.7,.3,1) both}
.kudos-spark i:nth-child(even){--reach:26px;width:5px;height:5px;left:-2.5px;top:-2.5px}
.kudos-spark i:nth-child(3n){background:#fff}
.kudos-spark b{position:absolute;left:-.6em;top:-.6em;width:1.2em;text-align:center;font-size:18px;line-height:1.2;font-weight:400;animation:kudos-rise 800ms ease-out both}
.kudos-press{animation:kudos-press 450ms cubic-bezier(.3,1.6,.5,1)}
.kudos-pop{animation:kudos-pop 450ms ease-out 100ms both}
@keyframes kudos-spark{0%{transform:rotate(var(--angle)) translateX(4px);opacity:0}15%{opacity:1}100%{transform:rotate(var(--angle)) translateX(var(--reach)) scale(.4);opacity:0}}
@keyframes kudos-rise{0%{transform:translateY(0) scale(.6);opacity:0}25%{transform:translateY(-20px) scale(1.15);opacity:1}100%{transform:translateY(-46px) scale(.9);opacity:0}}
@keyframes kudos-press{35%{transform:scale(1.3)}}
@keyframes kudos-pop{0%{transform:translateY(60%);opacity:0}60%{transform:translateY(-8%) scale(1.08);opacity:1}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.kudos-spark{display:none}
.kudos-pop,.kudos-press{animation:none}
}
