:root{--bg:#f4f1ea;--ink:#22201c;--muted:#7a7468;--line:#d6d0c2;--card:#fffdf7;
 --doze:#3b5b92;--calm:#8fc496;--busy:#e8913a;--fever:#d64541;--hurt:#8e44ad;--just_woke:#f2c94c;--gap:#d9d4c7}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"PingFang SC","Noto Sans CJK SC",sans-serif;background:var(--bg);color:var(--ink)}
main{max-width:416px;margin:0 auto;padding:28px 16px 40px;text-align:center}
header{margin-bottom:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.heart{display:inline-block;width:18px;height:16px;margin-right:8px;vertical-align:-2px;fill:#d64541;animation:beat var(--beat,1.2s) ease-in-out infinite}
.heart svg{width:100%;height:100%;display:block}
.heart.off{fill:#aaa49a;animation:none}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.intro{margin:0;font-size:14px;color:var(--muted)}
.stale{margin:0 0 12px;padding:8px 12px;border-radius:6px;background:#ece7db;color:var(--muted);font-size:14px}
#card{display:block;width:100%;max-width:384px;height:auto;margin:0 auto;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08)}
.tl{max-width:384px;margin:14px auto 0;text-align:left;font-size:14px}
.tl summary{cursor:pointer;color:var(--muted);padding:6px 2px}
.tl ol{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--line)}
.tl li{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line)}
.tl .dot{width:10px;height:10px;border-radius:3px;flex:none}
.tl .when{color:var(--muted);font-variant-numeric:tabular-nums;min-width:96px}
.tl .len{margin-left:auto;color:var(--muted)}
.gloss{max-width:384px;margin:14px auto 0;font-size:12px;color:var(--muted);line-height:1.9}
.gloss span{display:inline-block;margin:0 6px}
.gloss b{color:var(--ink);font-weight:600}
.actions{margin:18px 0 8px}
.actions button{font:inherit;font-size:15px;padding:9px 28px;border:1px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;cursor:pointer}
.actions button:active{transform:translateY(1px)}
.foot{font-size:12px;color:var(--muted)}
@media (prefers-color-scheme:dark){
 :root{--bg:#1b1a18;--ink:#e6e1d6;--muted:#9b9488;--line:#3a3833;--card:#26241f;--gap:#3a3833}
 #card{filter:brightness(.86);box-shadow:none}
 .stale{background:#2a2824}
}
@media (prefers-reduced-motion:reduce){.heart{animation:none}}