:root{--paper:#f6f1e3ee;--ink:#3b3429;--accent:#5f8f8f}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#dfe7e0;font-family:'Noto Serif TC','PMingLiU','Songti TC',serif;color:var(--ink)}
#scene{display:block;width:100vw;height:100vh;height:100dvh;touch-action:none;outline:0;cursor:pointer}.free #scene{cursor:grab}.free #scene:active{cursor:grabbing}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.25;cursor:default}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:50%}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tools{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;gap:8px}
.tools button{width:40px;height:40px;border-radius:50%;background:var(--paper);box-shadow:0 2px 10px #0002}
.tools button[aria-pressed=false]{opacity:.45}
.reading{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));width:min(760px,calc(100% - 28px));background:var(--paper);border-radius:14px;padding:14px 22px 6px;box-shadow:0 6px 30px #1c2a2630;backdrop-filter:blur(6px)}
#passage{margin:0;font-size:clamp(17px,2vw,22px);line-height:1.8;letter-spacing:.03em;min-height:1.8em}
#passage span{color:#3b342966;transition:color .35s,background-color .35s;border-radius:4px}#passage span.read{color:#3b3429a0}#passage span.now{color:var(--ink);background:#e9d99a66;box-shadow:0 0 0 2px #e9d99a66}
.free .reading{display:none}
#freebar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));display:none;align-items:center;gap:14px;background:var(--paper);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:0 6px 30px #1c2a2630;font-size:15px;max-width:calc(100% - 28px)}
.free #freebar{display:flex}#freebar .touch{display:none}@media(pointer:coarse){#freebar .touch{display:inline}}
#back{background:var(--accent);color:#fff;border-radius:999px;padding:8px 16px;white-space:nowrap}
#stick{position:fixed;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:2px solid #fff9;background:#0002;pointer-events:none;display:none}#stick.on{display:block}
#stick i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:#fffc;transform:translate(var(--dx,0),var(--dy,0))}

.bar{display:flex;align-items:center;gap:10px;margin-top:4px}.bar button{width:36px;height:36px}
#progress{flex:1;display:flex;gap:5px}#progress span{flex:1;height:3px;border-radius:2px;background:#8b806a33}#progress .done{background:#8b9a86}#progress .active{background:var(--accent)}
#play .i-pause{display:none}#play[aria-pressed=true] .i-play{display:none}#play[aria-pressed=true] .i-pause{display:block}
#fade{position:fixed;inset:0;background:#f4efe2;opacity:0;pointer-events:none;transition:opacity .45s}#fade.on{opacity:1}
#loading{position:fixed;inset:0;background:#e9eee6;display:grid;place-items:center;transition:opacity .8s}#loading span{width:120px;height:2px;background:#5f8f8f55;overflow:hidden;position:relative}#loading span:after{content:'';position:absolute;inset:0;width:40%;background:var(--accent);animation:load 1.2s ease-in-out infinite}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
#loading.done{opacity:0;pointer-events:none}
@media(max-width:600px){.reading{padding:12px 16px 4px}#passage{font-size:17px;line-height:1.75}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}