:root{color-scheme:light;--ink: #1d2328;--muted: #66717a;--line: #d9dee2;--wood: #8d5d3b;--accent: #276b5d;--danger: #963f3f;--dialog-gutter: 32px;--dialog-padding: 20px;--dialog-radius: 10px;--dialog-backdrop: rgb(29 35 40 / 55%);--dialog-shadow: 0 16px 48px rgb(0 0 0 / 25%);--shelf-height: 18px;--book-area-height: 242px;--book-top-clearance: 8px;--book-shelf-gap: 4px;--maximum-book-height: calc( var(--book-area-height) - var(--book-top-clearance) - var(--book-shelf-gap) );--shelf-row-height: calc(var(--book-area-height) + var(--shelf-height));--book-grid-column-width: .4rem;--book-gap: .25rem;--pages-per-column: 40;--minimum-book-columns: 6;--maximum-book-columns: 32}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:linear-gradient(#fffaf0,#efe4cf);background-attachment:fixed;color:var(--ink);font:16px/1.4 system-ui,sans-serif}#app{max-width:1040px;margin:0 auto;padding:32px 20px}.toolbar{margin-bottom:24px}h1,h2,p{margin:0}h1{display:flex;gap:8px;align-items:center}.flavor-badge,.dev-badge{padding:2px 6px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.2;text-transform:uppercase}.flavor-badge{border:1px solid #9fb6aa;background:#e5f0eb;color:#23463a}.dev-badge{border:1px solid #d2a437;background:#ffe6a3;color:#5c4210}.search-box{position:relative}input,button{border:1px solid var(--line);border-radius:6px;font:inherit}input{width:100%;min-width:0;padding:10px 40px 10px 12px;background:#fff}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}button{padding:10px 14px;background:var(--accent);color:#fff;cursor:pointer}button:disabled{background:#8c9690;cursor:default}.clear-search{position:absolute;top:50%;right:4px;width:40px;height:40px;display:grid;place-items:center;padding:0;transform:translateY(-50%);border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:22px;line-height:1}.clear-search:hover{background:#eef1ed;color:var(--ink)}.clear-search:disabled{background:transparent;color:var(--line);cursor:default}.search-status{color:var(--muted);font-size:14px}.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:28px}.result{--result-cover-width: 52px;--result-cover-height: 76px;display:grid;grid-template-columns:var(--result-cover-width) 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff}.result.is-added{opacity:.62}.book-cover{display:grid;place-items:center;overflow:hidden;border-radius:4px;background:linear-gradient(135deg,#8b6f5a,#59483b);color:#fff;font-size:24px;font-weight:700}.book-cover img{width:100%;height:100%;object-fit:cover}.result-cover{width:var(--result-cover-width);height:var(--result-cover-height)}.result h2{font-size:15px}.result p,.empty,.error{color:var(--muted);font-size:14px}.shelf{display:grid;grid-template-columns:repeat(auto-fill,var(--book-grid-column-width));grid-auto-rows:var(--shelf-row-height);min-height:var(--shelf-row-height);overflow:hidden;background:repeating-linear-gradient(to bottom,transparent 0 var(--book-area-height),var(--wood) var(--book-area-height) var(--shelf-row-height))}.shelf>.empty{grid-column:1 / -1;place-self:center}.spine{position:relative;grid-column:span clamp(var(--minimum-book-columns),round(down,calc(var(--book-page-count) / var(--pages-per-column)),1),var(--maximum-book-columns));align-self:end;height:calc(var(--maximum-book-height) * var(--book-height-factor));margin-right:var(--book-gap);margin-bottom:calc(var(--shelf-height) + var(--book-shelf-gap));padding:.75rem .4rem;overflow:hidden;border-radius:3px;background:var(--book-spine-color);color:#fff;font:600 .9rem system-ui;text-overflow:ellipsis;white-space:nowrap;writing-mode:vertical-rl}.spine-handle{position:absolute;top:0;right:0;bottom:0;left:0;padding:0;border:0;background:transparent;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}.spine-handle:focus-visible{outline:2px solid white;outline-offset:-4px}.spine-ghost{opacity:.35}.book-details,.add-book-dialog{padding:0;border:0;overflow:visible;background:transparent}.book-details{width:min(420px,calc(100% - var(--dialog-gutter)))}.add-book-dialog{width:min(720px,calc(100% - var(--dialog-gutter)));max-height:calc(100dvh - var(--dialog-gutter))}.book-details::backdrop,.add-book-dialog::backdrop{background:var(--dialog-backdrop)}.add-book-card,.book-details-card{padding:var(--dialog-padding);border-radius:var(--dialog-radius);background:#fff;box-shadow:var(--dialog-shadow)}.add-book-card{max-height:calc(100dvh - var(--dialog-gutter));overflow:auto}.add-book-header{display:flex;align-items:center;justify-content:space-between}.add-book-header .dialog-close{position:static;flex:0 0 32px}.add-book-search{margin:16px 0 18px}.add-book-search input{height:48px;padding:0 48px 0 18px;border-radius:24px;box-shadow:0 1px 5px #0000002e}.add-book-search input:focus{border-color:#b8bec3;outline:0;box-shadow:0 1px 7px #0000003d}.add-book-search .search-status{display:block;margin:8px 18px 0}.add-book-card .results{margin-bottom:0}.text-button{display:block;border:0;background:transparent;color:var(--accent)}.manual-add-prompt{margin:18px auto 0}.manual-add-form{display:grid;gap:14px;margin-top:16px}.manual-add-form label,.manual-add-form label span{display:block}.manual-add-form label span{margin-bottom:5px;color:var(--muted);font-size:14px}.manual-add-form input{padding:10px 12px}.manual-add-actions{display:flex;gap:8px;justify-content:end}.book-details-card{position:relative;display:grid;grid-template-columns:80px 1fr;gap:18px}.dialog-close{position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;outline:0;border-radius:0;background:transparent;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--ink);font-size:24px;line-height:1}.dialog-close:hover{color:var(--muted)}.book-details-cover{width:80px;height:120px}.book-details-actions{display:flex;grid-column:1 / -1;gap:8px;justify-content:end}.book-remove{background:var(--danger)}.add-book-button{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:3;display:flex;gap:8px;align-items:center;padding:12px 18px;border:0;border-radius:999px;box-shadow:0 5px 18px #00000038;font-weight:700}.add-book-button [aria-hidden]{font-size:24px;font-weight:400;line-height:16px}@media(max-width:680px){.add-book-dialog{top:0;right:0;bottom:0;left:0;width:100dvw;max-width:none;height:100dvh;max-height:none;margin:0;overflow-y:auto;background:#fff}.add-book-card{max-height:none;padding:calc(var(--dialog-padding) + env(safe-area-inset-top)) var(--dialog-padding) calc(var(--dialog-padding) + env(safe-area-inset-bottom));overflow:visible;border-radius:0;box-shadow:none}.add-book-header{position:sticky;top:0;z-index:1;margin:calc(-1 * var(--dialog-padding) - env(safe-area-inset-top)) calc(-1 * var(--dialog-padding)) 0;padding:calc(var(--dialog-padding) + env(safe-area-inset-top)) var(--dialog-padding) var(--dialog-padding);background:#fff}#app{padding:18px 12px}.toolbar{margin-bottom:16px}.results{grid-template-columns:1fr;gap:8px;margin-bottom:18px}.result{--result-cover-width: 44px;--result-cover-height: 64px;gap:10px;padding:10px}.result h2{font-size:14px}:root{--shelf-height: 14px;--book-area-height: 238px}.add-book-button{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:52px;height:52px;justify-content:center;padding:0}.add-book-label{display:none}}