:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; background: #f6f6f2; color: #161815; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 100% 0, #e8efe3 0, transparent 31rem), #f6f6f2; }
main { width: min(100%, 46rem); margin: 0 auto; padding: max(2.2rem, env(safe-area-inset-top)) 1.15rem max(2.5rem, env(safe-area-inset-bottom)); }
.hero { padding: .5rem .25rem 1.75rem; }
.brandline { display: flex; align-items: center; gap: .7rem; margin: 0; }
.brandline img { width: 2.45rem; height: 2.45rem; flex: 0 0 auto; border-radius: .7rem; box-shadow: 0 3px 9px rgba(19, 36, 25, .22); }
.brandline h1 { min-width: 0; }
.eyebrow { margin: 0 0 .5rem; color: #46613b; font-size: .74rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.brandline .eyebrow { margin: 0; }
.read-count { margin-left: auto; padding: .34rem .62rem; border: 1px solid #dfe5d9; border-radius: 999px; background: rgba(255,255,252,.72); color: #4e624b; font-size: .74rem; font-weight: 700; white-space: nowrap; }
h1 { margin: 0; font-size: clamp(2.35rem, 10vw, 4.1rem); letter-spacing: -.065em; line-height: .94; }
.subtitle { margin: 1.1rem 0 .8rem; max-width: 33rem; color: #5b5f57; font-size: 1.04rem; line-height: 1.45; }
.updated { margin: 0; color: #878a82; font-size: .83rem; }
.feed { display: grid; gap: .8rem; }
.card { padding: 1.15rem; border: 1px solid #e3e4dc; border-radius: 1.15rem; background: rgba(255,255,252,.92); box-shadow: 0 3px 16px rgba(35,42,31,.035); cursor: pointer; }.card:focus-visible { outline: 3px solid #9ab796; outline-offset: 2px; }.card:active { transform: scale(.993); }
.meta { display: flex; align-items: center; gap: .42rem; min-height: 1.25rem; color: #6b7067; font-size: .78rem; white-space: nowrap; overflow: hidden; }
.favicon { flex: 0 0 auto; border-radius: .26rem; }
.source { overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.dot { color: #afb2aa; }.importance { padding: .17rem .45rem; border-radius: 99px; background: #f8e8c5; color: #8a5d16; font-size: .68rem; font-weight: 800; }.category { margin-left: auto; padding: .17rem .45rem; border-radius: 99px; background: #eef2e9; color: #53604d; font-size: .68rem; overflow: hidden; text-overflow: ellipsis; }
h2 { margin: .75rem 0 .55rem; font-size: clamp(1.22rem, 4.8vw, 1.52rem); letter-spacing: -.025em; line-height: 1.14; }
.leader { display: -webkit-box; overflow: hidden; margin: 0 0 1rem; color: #50544d; font-size: .96rem; line-height: 1.43; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.more { display: block; width: 100%; margin: 1.15rem 0 .4rem; padding: 1rem; border: 0; border-radius: 1rem; background: #294e32; color: white; font: inherit; font-weight: 720; cursor: pointer; }.more:disabled { opacity: .55; }
.empty { padding: 1.8rem; border-radius: 1rem; background: #eceee8; color: #62675e; text-align: center; }
.article-page { background: #f7f7f3; }
.article-shell { width: min(100%, 46rem); margin: 0 auto; padding: max(1.4rem, env(safe-area-inset-top)) 1.15rem max(2.5rem, env(safe-area-inset-bottom)); }
.back { display: inline-block; margin: .25rem 0 1.5rem; color: #36563b; font-size: .92rem; font-weight: 750; text-decoration: none; }
.article-reader { padding: 1.35rem; border: 1px solid #e3e4dc; border-radius: 1.3rem; background: #fffffc; box-shadow: 0 8px 24px rgba(35,42,31,.05); }
.article-reader h1 { margin: .7rem 0 1.2rem; font-size: clamp(1.8rem, 7.6vw, 3.1rem); letter-spacing: -.045em; line-height: 1.02; }
.article-reader h2 { margin: 1.55rem 0 .6rem; font-size: 1.35rem; letter-spacing: -.02em; }
.article-image { width: 100%; max-height: 24rem; margin: .1rem 0 1rem; border-radius: .9rem; object-fit: cover; background: #e8ebe4; }
.reader-note { margin: .3rem 0 1.35rem; padding: .72rem .85rem; border-radius: .75rem; background: #f0f4ed; color: #60705c; font-size: .82rem; line-height: 1.35; }
.article-content { color: #30342f; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.63; }.article-content p { margin: 0 0 1rem; }.article-content blockquote { margin: 1.2rem 0; padding-left: 1rem; border-left: 3px solid #87a27d; color: #4b5549; }.article-content ul { padding-left: 1.25rem; }.article-content li { margin-bottom: .5rem; }
.source-link { display: inline-block; margin-top: .8rem; color: #2c5d39; font-size: .93rem; font-weight: 750; text-decoration: none; }
.loading { margin: 0; color: #6b7067; }
@media (min-width: 600px) { main { padding-top: 4.5rem; }.card { padding: 1.4rem 1.5rem; } }