:root{--red:#D64545;--jade:#3BA676;--cream:#FBF6EC;--ink:#2B2B2B;--gold:#E8B04B;--coral:#FFD3C7}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Fraunces','Noto Serif SC',serif;
background-image:radial-gradient(circle at 15% 10%,rgba(214,69,69,.07) 0 120px,transparent 121px),radial-gradient(circle at 90% 70%,rgba(59,166,118,.07) 0 160px,transparent 161px),repeating-linear-gradient(45deg,rgba(43,43,43,.015) 0 2px,transparent 2px 8px);background-attachment:fixed}
.brush{font-family:'Ma Shan Zheng',cursive}
.zh{font-family:'Noto Serif SC',serif}
.card{background:#fffdf8;border:1.5px solid #2b2b2b14;border-radius:18px;box-shadow:0 3px 0 #2b2b2b10,0 8px 24px -12px #2b2b2b30;transition:transform .2s}
.card:hover{transform:translateY(-3px) rotate(-.3deg)}
.chip{border:1.5px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:14px;cursor:pointer;transition:all .15s}
.chip.on{background:var(--ink);color:var(--cream)}
.btn{background:var(--red);color:#fff;border-radius:14px;padding:10px 18px;font-weight:700;box-shadow:0 4px 0 #9b2d2d;transition:all .1s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #9b2d2d}
.btn.jade{background:var(--jade);box-shadow:0 4px 0 #22704d}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
.newc{background:var(--coral);border-radius:4px;cursor:pointer}
.knownc{cursor:pointer}
.knownc.ul{text-decoration:underline;text-decoration-color:#3BA67655;text-underline-offset:6px}
.reader{background:#FBF6EC;line-height:2.3;letter-spacing:.04em}
.rise{animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1}}
.sniff{animation:sniff .6s infinite alternate}
@keyframes sniff{from{transform:translateX(-8px) rotate(-6deg)}to{transform:translateX(8px) rotate(6deg)}}
.fu{position:fixed;top:-40px;color:var(--red);font-family:'Ma Shan Zheng';pointer-events:none;animation:fall 2.4s linear forwards;z-index:99}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.spine{writing-mode:vertical-rl;border-radius:4px 4px 2px 2px;cursor:pointer;transition:transform .2s}
.spine:hover{transform:translateY(-10px)}
.shelf{background:linear-gradient(#8a5a35,#6b4226);height:14px;border-radius:3px;box-shadow:0 6px 10px -4px #0005}
input[type=range]{accent-color:var(--red)}