*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,Helvetica Neue,Arial,sans-serif;background:#f5f2eb;color:#1f1f1f}button{font-family:inherit;cursor:pointer}#root{min-height:100vh}.library{min-height:100vh;padding:48px 56px;background:#f5f2eb;color:#1f1f1f}.library-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}.library-header h1{margin:0 0 6px;font-size:2.4rem}.library-header p{margin:0;color:#555}.library-actions{display:flex;gap:12px;flex-wrap:wrap}.file-input{display:none}.library-actions button{background:#111;color:#fff;border:none;padding:10px 16px;border-radius:999px;font-weight:600}.library-actions button:disabled{opacity:.6;cursor:not-allowed}.library-grid{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}.book-card{position:relative;display:flex}.book-open{background:#fff;border:1px solid #e6e0d5;border-radius:16px;padding:0;text-align:left;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;width:100%}.book-open:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001f}.book-open img{width:100%;height:240px;object-fit:cover;display:block}.book-placeholder{height:240px;background:linear-gradient(145deg,#1c1c1c,#424242);color:#fff;display:flex;align-items:center;justify-content:center;padding:20px;font-size:1rem}.book-meta{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}.book-meta h3{margin:0;font-size:1.05rem}.book-meta span{color:#666;font-size:.9rem}.book-progress{font-size:.8rem;color:#111;font-weight:600}.book-delete{position:absolute;top:12px;right:12px;background:#0f0f0fd9;color:#fff;border:none;border-radius:999px;padding:6px 12px;font-size:.75rem;font-weight:600}.book-delete:hover{background:#ff4c4c}.empty-state{margin-top:48px;display:flex;justify-content:center}.empty-card{background:#fff;border-radius:16px;padding:32px 40px;border:1px solid #e6e0d5;text-align:center}.notice{margin-top:16px;padding:12px 16px;border-radius:10px;background:#fff7d6;color:#4b3d00;border:1px solid #f4dea1}.notice.error{background:#ffe5e5;color:#6a1c1c;border-color:#f0b5b5}.reader{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:#000;color:#fff}.reader-header{padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.15)}.reader-title h2{margin:0;font-size:1.2rem}.reader-title span{font-size:.85rem;color:#ffffffb3}.reader-progress{display:flex;align-items:center;gap:12px;font-size:.9rem}.reader-progress .ghost{border-color:#ffffff73}.progress-bar{width:140px;height:6px;background:#fff3;border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:#ff4c4c}.reader-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;font-size:4rem;font-weight:600;letter-spacing:.5px;font-family:Inter,Helvetica Neue,Arial,sans-serif;overflow:hidden}.toc-panel,.preview-panel{position:absolute;top:24px;right:24px;bottom:24px;width:min(360px,70vw);background:#141414f2;border:1px solid rgba(255,255,255,.15);border-radius:16px;display:flex;flex-direction:column;padding:16px;gap:12px;box-shadow:0 20px 40px #00000080}.preview-panel{width:min(520px,80vw);right:40px}.toc-header,.preview-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.toc-header h3,.preview-header h3{margin:0;font-size:1.1rem}.toc-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;padding-right:6px}.toc-item{background:transparent;border:none;color:#fff;text-align:left;padding:6px 12px;border-radius:10px;font-size:.95rem}.toc-item:hover{background:#ffffff14}.toc-item:disabled{opacity:.4;cursor:not-allowed}.toc-empty{font-size:.9rem;color:#ffffffb3}.preview-body{background:#f8f6f0;color:#111;padding:20px;border-radius:12px;overflow-y:auto;line-height:1.8;font-size:1rem;box-shadow:inset 0 0 0 1px #0000001a}.preview-word{display:inline;background:transparent;border:none;color:inherit;font-size:1rem;padding:0}.preview-word:hover{background:#00000014}.preview-word.active{background:#ffe08a}.preview-space{white-space:pre}.word-display{padding:0 40px;text-align:center}.word-focus{color:#ff3b3b}.menu-panel{position:absolute;top:24px;left:24px;width:min(320px,70vw);background:#141414f2;border:1px solid rgba(255,255,255,.15);border-radius:16px;display:flex;flex-direction:column;padding:16px;gap:16px;box-shadow:0 20px 40px #00000080}.menu-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.menu-header h3{margin:0;font-size:1.1rem}.menu-actions{display:flex;flex-wrap:wrap;gap:10px}.menu-actions button{background:#fff;color:#000;border:none;padding:8px 14px;border-radius:999px;font-weight:600}.menu-actions .ghost{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}.ghost{background:transparent;border:1px solid rgba(0,0,0,.2);color:inherit;border-radius:999px;padding:8px 14px}.wpm-control{display:flex;flex-direction:column;gap:6px;min-width:220px}.wpm-control input[type=range]{width:220px}@media(max-width:720px){.library{padding:32px 20px}.reader-header{padding:12px 16px;flex-wrap:wrap;align-items:flex-start;gap:12px}.reader-progress{width:100%;justify-content:space-between;flex-wrap:wrap}.progress-bar{flex:1;min-width:120px}.reader-stage{font-size:2.4rem}.word-display{padding:0 16px}.menu-panel,.toc-panel,.preview-panel{inset:16px;width:auto}.preview-panel{right:16px}.wpm-control{min-width:0}.wpm-control input[type=range]{width:100%}}@media(max-width:420px){.reader-stage{font-size:2rem}}