:root {color-scheme:light;--paper:#fff;--ui:#20201e;--rule:#dadad4;--accent:#356c5d;font-family:system-ui,sans-serif}
:root[data-night] {color-scheme:dark;--paper:#000;--ui:#acaca6;--rule:#343434;--accent:#8cbba9}
* {box-sizing:border-box}
body {margin:0;color:var(--ui);background:var(--paper)}
header {position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-bottom:1px solid var(--rule);padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
header b {color:var(--accent);white-space:nowrap}
nav {display:flex;gap:6px}
main {max-width:760px;margin:auto;padding:24px 20px 60px}
h1 {font:600 27px/1.4 'Noto Serif TC','Songti TC',serif;margin:0 0 16px}
label {display:block;margin:12px 0}
input,select,button {font:inherit;color:inherit}
input:not([type=range]),select,button {min-height:44px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);padding:8px}
input:not([type=range]),select {display:block;width:100%;margin-top:5px}
button {cursor:pointer}
button:disabled {opacity:.5}
#login {max-width:390px}
ul {list-style:none;padding:0}
li {border-top:1px solid var(--rule);padding:10px 0}
li button {width:100%;text-align:left}
details {border-block:1px solid var(--rule);padding:12px 0}
summary {cursor:pointer}
article {color:var(--ink,var(--ui));font:var(--size,20px)/1.9 'Noto Serif TC','Songti TC','PMingLiU',serif;overflow-wrap:anywhere}
article p {scroll-margin-top:76px;margin:1em 0}
.pages {justify-content:space-between}
#status:not(:empty) {position:fixed;bottom:0;left:0;right:0;margin:0;background:var(--paper);border-top:1px solid var(--rule);padding:10px 20px calc(10px + env(safe-area-inset-bottom));z-index:2}
#shade {pointer-events:none;position:fixed;inset:0;background:black;opacity:var(--dim,0);z-index:5}