:root{color-scheme:dark;font-family:Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(circle at 50% 25%,#40372e 0,#1b1713 47%,#0e0c0a);color:#f6efe5}a{color:inherit;text-decoration:none}.library{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:64px clamp(24px,7vw,100px) 96px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 25%,#15110e),#0d0b09 65%)}.library header{max-width:1100px;margin:0 auto 48px}.library header p{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.2em}.library h1{margin:8px 0;font-family:Georgia,serif;font-size:clamp(42px,7vw,76px)}.library header span{color:#c8bfb3}.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,320px));gap:36px;max-width:1100px;margin:auto}.book-card{display:block}.cover{aspect-ratio:.7;overflow:hidden;border-radius:3px 12px 12px 3px;background:#eee;box-shadow:-7px 10px 30px #0009,inset 8px 0 #ffffff18;transition:transform .2s}.cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}.book-card:hover .cover{transform:translateY(-7px)}.book-card h2{margin:18px 0 6px;font-size:18px}.book-card>p{margin:0;color:#aa9f92;font-size:14px}button,input{font:inherit}button{border:0;color:inherit;background:transparent;cursor:pointer}.toolbar{height:62px;position:relative;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:0 18px;background:#0e0c0ae6;border-bottom:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.toolbar-start{display:flex;align-items:center;gap:6px}.toolbar-start button,.actions button,.page-control button{width:38px;height:38px;border-radius:10px;font-size:24px}.library-return{display:inline-flex;height:38px;align-items:center;gap:5px;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#ffffff0f;font-size:13px;font-weight:650;white-space:nowrap}.library-return:hover{border-color:color-mix(in srgb,var(--accent) 65%,white);background:#ffffff1f}.toolbar button:hover{background:#ffffff1a}.identity{display:flex;flex-direction:column;letter-spacing:.18em;line-height:1}.identity span{font-family:Georgia,serif;font-size:16px}.identity small{margin-top:5px;font-size:8px;opacity:.6}.page-control{justify-self:center;display:flex;align-items:center;gap:8px}.page-control label{display:flex;align-items:center;font-size:13px;color:#b9aea1}#page-input{width:42px;padding:6px 4px;border:1px solid rgba(255,255,255,.15);border-radius:7px;background:#ffffff12;color:#fff;text-align:center}.actions{display:flex;gap:2px}#stage{position:absolute;inset:62px 0 0;display:grid;place-items:center;overflow:hidden}#book{transform:scale(var(--book-scale, 1));transform-origin:center;transition:transform .2s ease;filter:drop-shadow(0 24px 30px rgba(0,0,0,.48))}.page{background:#fff;overflow:hidden}.page canvas{display:block;width:100%;height:100%;object-fit:contain;background:#fff}.page.hard{background:#e8e1d7}#thumbs{position:absolute;z-index:15;top:62px;bottom:0;left:0;width:184px;padding:14px;overflow-y:auto;background:#100e0cf5;border-right:1px solid rgba(255,255,255,.1);transform:translate(-100%);transition:transform .25s ease}#thumbs.open{transform:translate(0)}#thumb-list{display:grid;gap:14px}.thumb{position:relative;padding:6px;border:1px solid transparent;border-radius:8px;background:#ffffff0a}.thumb.active{border-color:var(--accent)}.thumb canvas{display:block;width:100%;aspect-ratio:496 / 709;object-fit:contain;background:#fff}.thumb span{display:block;padding-top:5px;color:#c7bbae;font-size:11px}#loading{position:fixed;z-index:50;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:#17130f;transition:opacity .35s}#loading.hidden{opacity:0;pointer-events:none}.spinner{width:34px;height:34px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}#loading p{color:#cdbfac;font-family:Georgia,serif}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.toolbar{grid-template-columns:auto 1fr auto;gap:5px;padding:0 8px}.identity{display:none}.toolbar-start{gap:2px}.library-return{padding:0 8px}.actions button:not(#fullscreen){display:none}.actions{justify-self:end}.page-control{grid-column:2}#stage{padding:8px}}