:root { color-scheme: light dark; --pine:#2b7356; --surface:#fff; --back:#f2f2f7; --card:#fff; --pill:#eeeef0; --material:rgba(255,255,255,.86); --material-opaque:#fafafa; --selection:rgba(118,118,128,.15); --ink:#000; --secondary:#636366; --line:#d1d1d6; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@media(prefers-color-scheme:dark) { :root { --pine:#62c99a; --surface:#000; --back:#1c1c1e; --card:#2c2c2e; --pill:#242426; --material:rgba(30,30,30,.86); --material-opaque:#242426; --selection:rgba(255,255,255,.14); --ink:#f2f2f7; --secondary:#aeaeb2; --line:#38383a; } }
* { box-sizing:border-box; }
body { margin:0; height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); display:flex; flex-direction:column; background:var(--back); color:var(--ink); font-size:17px; }
[hidden] { display:none !important; }
.demo-notice { flex:none; padding:6px 16px calc(6px + env(safe-area-inset-bottom)); text-align:center; font-size:12px; line-height:16px; color:var(--secondary); border-top:1px solid var(--line); }
#app { flex:1; min-height:0; width:min(100%,760px); margin:0 auto; --ab-tint:var(--pine); background:var(--surface); }


.subtitle { color:var(--secondary); font-size:15px; line-height:18px; margin:0; }
.month { color:var(--ink); background:var(--back); font-size:20px; line-height:24px; font-weight:600; margin:28px -16px 0; padding:4px 16px; }
.month-year {font-weight:400;color:var(--secondary);}
.month-literal {white-space:pre;word-spacing:1px;}
#app .ab-nav-bar .ab-button, #app .timeline-row, #app .reading-body, #app .discard-dialog .ab-button { min-height:44px; min-width:44px; font:inherit; color:var(--pine); cursor:pointer; border:0; background:transparent; border-radius:6px; }
#app .timeline-row { display:flex; align-items:flex-start; gap:8px; width:100%; padding:16px 0; text-align:left; border-radius:0; border-bottom:1px solid var(--line); color:var(--ink); white-space:normal; }
.timeline-row>.ab-button-label:empty { display:none; }
.thumbnail { width:76px; height:76px; flex:0 0 76px; object-fit:cover; border-radius:6px; border:.5px solid var(--line); }
.row-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.row-title { font-size:17px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row-preview { color:var(--secondary); font-size:15px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.day-column { display:flex; flex-direction:column; align-items:flex-end; min-width:61px; color:var(--secondary); font-size:11px; gap:2px; }
.day { color:var(--ink); font-size:34px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
.starred .day { color:#c59200; }
.weekday { text-transform:uppercase; font-weight:600; letter-spacing:.6px; }
.tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
#app .ab-tagpill { font-size:12px; padding:3px 7px; min-height:0; border-radius:12px; }
:focus-visible { outline:3px solid var(--pine); outline-offset:3px; }
#error { margin:16px; padding:16px; border:1px solid #d33030; }
@media(min-width:800px) { #app { border-inline:1px solid var(--line); } }
@media(max-width:360px) {  .thumbnail { width:64px; height:64px; flex-basis:64px; } }