:root{--paper:#f4f1ea;--paper-raised:#fbf9f4;--ink:#2b2a28;--ink-soft:#8a8578;--rule:#2b2a281f;--serif:"Iowan Old Style", Georgia, "Times New Roman", serif;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--tap:44px}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button{font-family:var(--sans);min-width:var(--tap);min-height:var(--tap);color:inherit;cursor:pointer;background:0 0;border:0}.install-hint{background:var(--paper-raised);box-shadow:0 0 0 1px var(--rule);font:500 12.5px/1.45 var(--sans);color:var(--ink);border-radius:10px;align-items:center;gap:12px;margin:0 0 18px;padding:12px 14px;display:flex}.install-hint button{height:var(--tap);font:600 11px/1 var(--sans);color:var(--ink-soft);border-radius:999px;flex:none;padding:0 12px}.card{flex-direction:column;gap:8px;display:flex}.card-cover{aspect-ratio:3/4;background:var(--paper-raised);width:100%;box-shadow:0 1px 3px #0000001f, 0 0 0 1px var(--rule);border-radius:8px;padding:0;display:block;position:relative;overflow:hidden}.card-cover img{object-fit:cover;width:100%;height:100%;display:block}.card-badge{background:var(--ink);color:var(--paper);font:700 9px/1 var(--sans);letter-spacing:.12em;border-radius:999px;padding:4px 8px;position:absolute;top:8px;right:8px}.card-title{font-family:var(--serif);color:var(--ink);margin:0;font-size:15px;line-height:1.3}.card-meta{font:500 11px/1 var(--sans);color:var(--ink-soft);letter-spacing:.03em}.card-dl{height:var(--tap);font:600 11px/1 var(--sans);color:var(--ink-soft);letter-spacing:.03em;align-items:center;gap:6px;padding:0;display:inline-flex}.card-dl.done{color:#2e6f5e}.card-dl svg{width:13px;height:13px}.card-progress{background:var(--rule);border-radius:999px;flex:1;max-width:90px;height:3px;overflow:hidden}.card-progress>i{background:var(--ink);height:100%;display:block}.library{min-height:100%;padding:max(env(safe-area-inset-top), 16px) 16px max(env(safe-area-inset-bottom), 32px)}.library-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.library-brand{font-family:var(--serif);color:var(--ink);margin:0;font-size:20px;font-weight:400}.library-lang{height:var(--tap);background:var(--paper-raised);box-shadow:0 0 0 1px var(--rule);font:600 12px/1 var(--sans);letter-spacing:.08em;color:var(--ink);border-radius:999px;padding:0 14px}.library-search{width:100%;height:var(--tap);border:1px solid var(--rule);font:500 15px/1 var(--sans);color:var(--ink);background:#2b2a280a;border-radius:999px;margin-bottom:22px;padding:0 16px}.library-search::placeholder{color:var(--ink-soft)}.library-search:focus{outline:2px solid var(--ink);outline-offset:1px}.library-grid{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:26px 20px;display:grid}.library-empty{text-align:center;font-family:var(--serif);color:var(--ink-soft);margin-top:48px;font-size:16px}.curl-stage{perspective:3000px;perspective-origin:50%;position:absolute;inset:0}.curl-layer{transform-origin:0;transform-style:preserve-3d;position:absolute;inset:0}.curl-layer.sheet{z-index:1;will-change:transform}.curl-layer.sheet.forward{animation:curl-forward var(--curl-ms) var(--curl-ease) both}.curl-layer.sheet.back{animation:curl-back var(--curl-ms) var(--curl-ease) both}@keyframes curl-forward{0%{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes curl-back{0%{transform:rotateY(-180deg)}to{transform:rotateY(0)}}.curl-face{backface-visibility:hidden;position:absolute;inset:0;overflow:hidden;transform:translateZ(0)}.curl-face.reverse{background:repeating-linear-gradient(90deg, #00000005 0 2px, transparent 2px 5px), var(--paper-raised);transform:rotateY(180deg)translateZ(0)}.curl-shade{pointer-events:none;opacity:0;background:linear-gradient(90deg,#0000004d,#0000001f 38%,#0000 78%);position:absolute;inset:0}.curl-layer.sheet.forward .curl-shade{animation:curl-shade var(--curl-ms) var(--curl-ease) both}.curl-layer.sheet.back .curl-shade{animation:curl-shade var(--curl-ms) var(--curl-ease) reverse both}@keyframes curl-shade{0%{opacity:0}45%{opacity:1}70%{opacity:.55}to{opacity:0}}.curl-stage.reduced .curl-layer.sheet{animation:curl-dissolve var(--curl-ms) linear both}.curl-stage.reduced .curl-layer.sheet.back{animation-direction:reverse}.curl-stage.reduced .curl-shade{display:none}@keyframes curl-dissolve{0%{opacity:1}to{opacity:0}}.controls{pointer-events:none;opacity:0;z-index:3;transition:opacity .18s;position:absolute;inset:0}.controls.visible{opacity:1}.controls.visible .controls-row{pointer-events:auto}@media (prefers-reduced-motion:reduce){.controls{transition:none}}.controls-row{align-items:center;gap:8px;padding:0 12px;display:flex;position:absolute;left:0;right:0}.controls-row.top{top:max(env(safe-area-inset-top), 10px);justify-content:space-between}.controls-row.bottom{bottom:max(env(safe-area-inset-bottom), 10px);justify-content:center}.ctl{height:var(--tap);min-width:var(--tap);background:var(--paper-raised);box-shadow:0 1px 4px #0000001a, 0 0 0 1px var(--rule);color:var(--ink);font:600 12px/1 var(--sans);letter-spacing:.04em;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.ctl svg{width:20px;height:20px}.ctl.on{background:var(--ink);color:var(--paper);box-shadow:none}.controls-count{font:600 12px/1 var(--sans);color:var(--ink-soft);letter-spacing:.1em;margin-left:8px}.page{background:var(--paper);padding:max(env(safe-area-inset-top), 20px) 20px calc(max(env(safe-area-inset-bottom), 20px) + 64px);flex-direction:column;display:flex;position:absolute;inset:0}.page-art{border-radius:8px;flex:auto;min-height:0;overflow:hidden}.page-art>*{object-fit:contain;width:100%;height:100%;display:block}.page-text{max-width:34ch;font-family:var(--serif);color:var(--ink);text-align:center;text-wrap:balance;flex:none;margin:24px auto 0;font-size:clamp(18px,2.8vh,26px);line-height:1.6}.reader{background:var(--paper);touch-action:manipulation;position:fixed;inset:0;overflow:hidden}.zones{z-index:2;display:flex;position:absolute;inset:0}.zone{background:0 0;border:0;min-width:0;height:100%;padding:0}.zone.prev{flex:0 0 30%}.zone.mid{flex:0 0 40%}.zone.next{flex:0 0 30%}.end-card{z-index:4;background:var(--paper);flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:absolute;inset:0}.end-card h2{font-family:var(--serif);color:var(--ink);margin:0 0 6px;font-size:clamp(28px,6vh,44px);font-weight:400}.end-card button{height:var(--tap);background:var(--paper-raised);box-shadow:0 1px 4px #0000001a, 0 0 0 1px var(--rule);font:600 14px/1 var(--sans);color:var(--ink);border-radius:999px;padding:0 22px}.end-card button.primary{background:var(--ink);color:var(--paper);box-shadow:none}
