:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; background: #f7f4ed; color: #20242b; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 760px; min-height: 100vh; background: #fffdf8; }
header { display: flex; align-items: end; justify-content: space-between; padding: max(22px, env(safe-area-inset-top)) 20px 14px; background: linear-gradient(135deg, #ffd36a, #f6a623); border-bottom: 1px solid #e59a16; }
.eyebrow { font: 700 11px/1.2 ui-rounded, sans-serif; letter-spacing: .16em; color: #714500; }
h1 { margin: 3px 0 0; font-size: 29px; letter-spacing: .02em; }
.streak { margin-bottom: 4px; padding: 6px 9px; border: 1px solid rgba(72,42,0,.2); border-radius: 999px; background: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; white-space: nowrap; }
main { padding: 14px 14px 28px; }
.weather { margin-bottom: 20px; padding: 12px 14px; border-radius: 13px; background: #eaf5ff; color: #174a73; font-size: 14px; font-weight: 700; line-height: 1.5; }
section { margin: 0 0 28px; }
h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 10px; font-size: 20px; }
h2 span { color: #777; font-size: 12px; font-weight: 500; }
.card { padding: 14px 4px 13px; border-top: 1px solid #e7e1d7; }
.card:last-child { border-bottom: 1px solid #e7e1d7; }
.headline { color: #172d45; font-size: 17px; font-weight: 750; line-height: 1.48; text-decoration-color: #efb64a; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.card p { display: -webkit-box; overflow: hidden; margin: 7px 0; color: #454b53; font-size: 14px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.meta { color: #7a7f85; font-size: 11px; }
footer { padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); background: #f0ece4; color: #777; font-size: 11px; line-height: 1.6; text-align: center; }
@media (min-width: 600px) { main { padding-inline: 24px; } header { padding-inline: 28px; } }