@property --tint-h{syntax:"<number>";inherits:true;initial-value:30}@property --tint-s{syntax:"<number>";inherits:true;initial-value:.3}.bookshelf,.shelf-reader{--ink:var(--text);--muted:var(--text-2);--soft:var(--text-3);--line:var(--hair);--card:var(--popover-bg);--chip:var(--hover);--page:var(--bg);--font-mono:ui-monospace, "SF Mono", Menlo, monospace;--color-accent:#c0613b;--color-accent-text:#9c4526;--s:1;--wall-a:#f8f3e4;--wall-b:#ece4cd;--recess:#34261226;--recess-deep:#24180a47;--oak-hi:#dfbc88;--oak:#c69760;--oak-mid:#b88750;--oak-edge:#ad7c45;--oak-deep:#7d5326;--coral:#e5694e;--focus:var(--color-accent);--font-display:ui-serif, "New York", "Iowan Old Style", Georgia, serif;--font-ui:var(--font-sans);--font-condensed:"Avenir Next Condensed", "Arial Narrow", var(--font-sans);--ease-out:cubic-bezier(.2, .75, .2, 1)}:root[data-theme=dark] .bookshelf{--wall-a:#151834;--wall-b:#0b0d22;--recess:#00000057;--recess-deep:#0000008f;--oak-hi:#cfa670;--oak:#b58650;--oak-mid:#a37540;--oak-edge:#966836;--oak-deep:#5e3d19}:root[data-theme=dark] :is(.bookshelf,.shelf-reader){--color-accent:#e08a66;--color-accent-text:#eba184}html.is-reading{overflow:hidden}.bookshelf{isolation:isolate;background:radial-gradient(ellipse 60% 70% at 88% -12%, #fffbeed9, transparent 70%), linear-gradient(180deg, var(--wall-a) 0%, var(--wall-b) 82%, #e5dcc2 100%);min-height:25rem;box-shadow:0 0 0 1px var(--hair), inset 0 1px 0 #ffffffa6;border-radius:16px;position:relative;overflow:hidden}:root[data-theme=dark] .bookshelf{--wall-a:#151834;--wall-b:#0b0d22;background:radial-gradient(ellipse 60% 70% at 88% -12%, rgb(var(--rim-rgb) / .12), transparent 70%), radial-gradient(ellipse 85% 50% at 50% 100%, #00000073, transparent 70%), linear-gradient(180deg, var(--wall-a) 0%, var(--wall-b) 82%, #070818 100%);box-shadow:0 0 0 1px var(--hair), inset 0 1px 0 #ffffff0d}.bookshelf .stage{--plank-t:calc(26px * var(--s));--plank-d:calc(180px * var(--s));--lip:calc(16px * var(--s));--floor:calc(var(--plank-t) + 28px);height:21rem;position:relative}@media (width<=640px){.bookshelf .stage{height:18.5rem}}.bookshelf .stage:before{content:"";height:calc(295px * var(--s) + var(--floor));background:linear-gradient(0deg, transparent 0, var(--recess-deep) var(--floor), var(--recess) calc(var(--floor) + 65px * var(--s)), color-mix(in srgb, var(--recess) 42%, transparent) calc(var(--floor) + 171px * var(--s)), transparent 100%);pointer-events:none;position:absolute;bottom:0;left:0;right:0}.bookshelf .viewport{perspective:calc(960px * var(--s));perspective-origin:50% calc(100% - var(--floor) - 480px * var(--s));touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;position:absolute;inset:0;overflow:hidden;mask-image:linear-gradient(90deg,#0000 0,#000 32px calc(100% - 32px),#0000 100%)}.bookshelf .viewport.is-dragging{cursor:grabbing}.bookshelf .viewport.is-dragging .book{pointer-events:none}.bookshelf .camera{left:0;right:0;bottom:var(--floor);height:0;transform-style:preserve-3d;transform-origin:50% 0;pointer-events:none;position:absolute}.bookshelf .track{padding:0 calc(52px * var(--s));transform-style:preserve-3d;will-change:transform;pointer-events:none;align-items:flex-end;display:flex;position:absolute;bottom:0;left:0}.bookshelf .shelf-section{align-items:flex-end;gap:calc(2.2px * var(--s));padding:0 calc(24px * var(--s));transform-style:preserve-3d;pointer-events:none;display:flex;position:relative}:is(.bookshelf,.shelf-reader) .book{--wpx:calc(var(--w) * var(--s) * 1px);--hpx:calc(var(--h) * var(--s) * 1px);--dpx:calc(var(--d) * var(--s) * 1px);--head-over:calc(2.4px * var(--s));--fore-over:calc(2.8px * var(--s));--board-t:calc(2.4px * var(--s));appearance:none;width:var(--wpx);height:var(--hpx);font:inherit;color:var(--book-ink);text-align:left;transform-style:preserve-3d;transform-origin:50% 50% calc(var(--dpx) * -.5);transform:translateZ(calc(var(--sink) * var(--s) * -1px)) rotateY(var(--ty)) rotateZ(var(--tz));transition:transform .5s var(--ease-out);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:0 0;border:0;outline:none;flex:none;margin:0;padding:0;display:block;position:relative}:is(.bookshelf,.shelf-reader) .book[data-format=paperback]{--head-over:calc(.4px * var(--s));--fore-over:calc(.6px * var(--s));--board-t:calc(1.1px * var(--s))}.bookshelf .book.is-pulled{transform:none}.bookshelf .book.is-away{visibility:hidden}.bookshelf .book.no-anim,.bookshelf .book.no-anim .book__body{transition:none!important}:is(.bookshelf,.shelf-reader) .book__body{transform-style:preserve-3d;transform-origin:50% 100%;transition:transform .44s var(--ease-out);display:block;position:absolute;inset:0}@media (hover:hover) and (pointer:fine){.bookshelf .book:hover .book__body{transform:translateZ(calc(8px * var(--s))) rotateX(-8.5deg)}.bookshelf .book:hover .face--spine{box-shadow:inset 0 calc(1.5px * var(--s)) calc(1px * var(--s)) #ffffff57, inset 0 calc(-2px * var(--s)) calc(3px * var(--s)) #00000080, inset 0 0 0 999px #ffffff0b, 0 calc(10px * var(--s)) calc(18px * var(--s)) #00000061}}.bookshelf .book:focus-visible .book__body{transform:translateZ(calc(8px * var(--s))) rotateX(-8.5deg)}.bookshelf .book:focus-visible .face--spine{box-shadow:0 0 0 2px var(--focus), 0 0 22px color-mix(in oklab, var(--focus) 50%, transparent)}.bookshelf .book.is-pulled .book__body{transform:translate3d(0, calc(var(--lift,12) * var(--s) * -1px), calc(var(--pull,104) * var(--s) * 1px)) rotateX(-2.5deg);transition-duration:.36s}:is(.bookshelf,.shelf-reader) .face{backface-visibility:visible;display:block;position:absolute}:is(.bookshelf,.shelf-reader) .face--spine{color:var(--book-ink);background: linear-gradient(180deg, #00000057 0%, #fffdf547 1.5%, #fffdf50f 8%, transparent 35%, #0000001a 84%, #00000057 97.5%, #00000094 100%),  linear-gradient(90deg, #0000008f 0%, #ffffff1f 2.5%, #00000057 6.5%, #fffdf824 13%, #fffdf84d 25%, #fffdf81f 40%, transparent 56%, #0000002e 76%, #00000061 91%, #ffffff17 95.5%, #0000008f 100%),  linear-gradient(172deg, var(--book-hi,var(--book-bg2)) 0%, var(--book-bg2) 26%, var(--book-bg) 72%, var(--book-deep,var(--book-bg)) 100%);box-shadow:inset 0 calc(1.5px * var(--s)) calc(1px * var(--s)) #ffffff52, inset 0 calc(-2.2px * var(--s)) calc(3px * var(--s)) #0000008f, inset calc(1.2px * var(--s)) 0 calc(1px * var(--s)) #ffffff1f, inset calc(-1.2px * var(--s)) 0 calc(1.5px * var(--s)) #00000057, 0 calc(3.5px * var(--s)) calc(7px * var(--s)) #120a0266;transition:box-shadow .28s;inset:0;overflow:hidden}:is(.bookshelf,.shelf-reader) .face--spine:before{content:"";opacity:.32;pointer-events:none;background-image:repeating-linear-gradient(0deg,#ffffff14 0 1px,#0000 1px 2px),repeating-linear-gradient(90deg,#0000001a 0 1px,#0000 1px 2px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}:is(.bookshelf,.shelf-reader) .book[data-material=linen] .face--spine:before{opacity:.36;background-image:repeating-linear-gradient(0deg,#fffaf01f 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#0000001c 0 1px,#0000 1px 2.5px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}:is(.bookshelf,.shelf-reader) .book[data-material=leather] .face--spine:before{opacity:.32;background-image:linear-gradient(90deg,#0000 10%,#fffaee47 24%,#0000 44%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}:is(.bookshelf,.shelf-reader) .book[data-material=paper] .face--spine:before{opacity:.2}:is(.bookshelf,.shelf-reader) .book[data-format=hardcover] .face--spine{border-radius:calc(4.2px * var(--s)) / calc(12px * var(--s))}:is(.bookshelf,.shelf-reader) .book[data-format=paperback] .face--spine{border-radius:calc(1.8px * var(--s)) / calc(3.5px * var(--s))}:is(.bookshelf,.shelf-reader) .book[data-format=hardcover] .face--spine:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000 4.5%,#0000007a 7.2%,#ffffff3d 9.4%,#0000 11.8%),linear-gradient(90deg,#0000 88.2%,#ffffff29 90.2%,#00000080 92.6%,#0000 95.5%);position:absolute;inset:0}:is(.bookshelf,.shelf-reader) .book[data-format=paperback] .face--spine:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000 3.2%,#00000042 4.6%,#ffffff24 5.8%,#0000 7.2%),linear-gradient(90deg,#0000 92.8%,#ffffff1f 94%,#00000042 95.4%,#0000 96.8%);position:absolute;inset:0}:is(.bookshelf,.shelf-reader) .spine__deco{pointer-events:none;position:absolute;inset:0}:is(.bookshelf,.shelf-reader) .book[data-deco=bands] .spine__deco:before,:is(.bookshelf,.shelf-reader) .book[data-deco=bands] .spine__deco:after{content:"";height:calc(var(--hpx) * .052);background: linear-gradient(90deg, #0000006b 0%, transparent 16%, #ffffff38 26%, transparent 56%, #00000070 100%),  linear-gradient(180deg, var(--book-accent) 0 8%, #ffffff57 8% 18%, var(--book-bg2) 18% 30%, #0000009e 30% 40%, transparent 40% 60%, var(--book-accent) 60% 68%, #ffffff57 68% 78%, var(--book-bg2) 78% 90%, #0000009e 90% 100%);border-radius:1px;position:absolute;left:4%;right:4%}:is(.bookshelf,.shelf-reader) .book[data-deco=bands] .spine__deco:before{top:calc(var(--hpx) * .032)}:is(.bookshelf,.shelf-reader) .book[data-deco=bands] .spine__deco:after{bottom:calc(var(--hpx) * .072)}:is(.bookshelf,.shelf-reader) .book[data-deco=cap] .spine__deco:before{content:"";background:linear-gradient(90deg, #0000006b 0%, #00000024 8%, #fff3 26%, transparent 56%, #00000070 100%), var(--book-accent);height:11.5%;position:absolute;top:0;left:0;right:0;box-shadow:inset 0 -1px #ffffff47,0 1px #00000080,0 2px 3px #00000047}:is(.bookshelf,.shelf-reader) .book[data-deco=label] .spine__deco:before{content:"";border-radius:calc(1.5px * var(--s));background:linear-gradient(90deg,#00000029,#ffffff24 28%,#0000 65%,#0003),linear-gradient(#0000 28%,#5a371e6b 28% 33%,#0000 33% 66%,#5a371e6b 66% 71%,#0000 71%),linear-gradient(#faf2e1,#e7d9bc);height:11.5%;position:absolute;top:5.5%;left:13%;right:13%;box-shadow:inset 0 0 0 1px #6e4b236b,0 0 0 1px #00000059,0 1.5px 2.5px #00000059}:is(.bookshelf,.shelf-reader) .book[data-deco=rule] .spine__deco:before,:is(.bookshelf,.shelf-reader) .book[data-deco=rule] .spine__deco:after{content:"";height:calc(1.5px * var(--s));background:linear-gradient(90deg, transparent, var(--book-accent) 12%, var(--book-accent) 88%, transparent);box-shadow:0 calc(3px * var(--s)) 0 color-mix(in srgb, var(--book-accent) 70%, transparent), 0 1px 1px #00000073;opacity:.92;position:absolute;left:16%;right:16%}:is(.bookshelf,.shelf-reader) .book[data-deco=rule] .spine__deco:before{top:5.2%}:is(.bookshelf,.shelf-reader) .book[data-deco=rule] .spine__deco:after{bottom:13.5%}:is(.bookshelf,.shelf-reader) .book[data-deco=split] .spine__deco:before{content:"";background:linear-gradient(90deg, #0000006b 0%, #00000024 8%, #ffffff2e 26%, transparent 56%, #00000070 100%), var(--book-accent);height:21%;position:absolute;bottom:0;left:0;right:0;box-shadow:inset 0 1px #ffffff42,0 -1px #0000007a,0 -2px 3px #0000003d}:is(.bookshelf,.shelf-reader) .spine__text{z-index:1;justify-content:space-between;align-items:center;gap:calc(var(--fs,16) * .9px);padding-top:calc(var(--hpx) * .07);padding-bottom:calc(var(--hpx) * .15);writing-mode:vertical-rl;text-orientation:mixed;text-shadow:0 .5px .5px #00000047;flex-direction:row;display:flex;position:absolute;inset:0}:is(.bookshelf,.shelf-reader) .book[data-foil=gold] .spine__text{text-shadow:0 1px 1px #0000009e,0 -.5px #fff5d240}:is(.bookshelf,.shelf-reader) .book[data-deco=bands] .spine__text{padding-top:calc(var(--hpx) * .1);padding-bottom:calc(var(--hpx) * .17)}:is(.bookshelf,.shelf-reader) .book[data-deco=cap] .spine__text{padding-top:calc(var(--hpx) * .15)}:is(.bookshelf,.shelf-reader) .book[data-deco=label] .spine__text{padding-top:calc(var(--hpx) * .21)}:is(.bookshelf,.shelf-reader) .book[data-deco=split] .spine__text{padding-bottom:calc(var(--hpx) * .25)}:is(.bookshelf,.shelf-reader) .book[data-author=hidden] .spine__text{justify-content:center}:is(.bookshelf,.shelf-reader) .book[data-author=hidden] .spine__author{display:none}:is(.bookshelf,.shelf-reader) .spine__title{font-size:calc(var(--fs,16) * 1px);white-space:nowrap;text-align:center;text-overflow:ellipsis;flex:none;max-block-size:100%;line-height:1.04;display:block;overflow:hidden}:is(.bookshelf,.shelf-reader) .book[data-lines="2"] .spine__title{white-space:normal;text-wrap:balance;line-height:1.02}:is(.bookshelf,.shelf-reader) .spine__author{font-size:max(5.5px, calc(var(--fs,16) * .58px));letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:.88;flex:none;font-weight:500;line-height:1;display:block}:is(.bookshelf,.shelf-reader) .book[data-font=serif] :is(.spine__title,.spine__author){font-family:var(--font-display)}:is(.bookshelf,.shelf-reader) .book[data-font=serif] .spine__title{letter-spacing:.01em;font-weight:600}:is(.bookshelf,.shelf-reader) .book[data-font=sans] .spine__title{font-family:var(--font-ui);letter-spacing:-.005em;font-weight:700}:is(.bookshelf,.shelf-reader) .book:is([data-font=sans],[data-font=condensed]) .spine__author{font-family:var(--font-ui)}:is(.bookshelf,.shelf-reader) .book[data-font=condensed] .spine__title{font-family:var(--font-condensed);font-weight:700;font-stretch:75%}:is(.bookshelf,.shelf-reader) .book[data-font=mono] .spine__title{font-family:var(--font-mono);letter-spacing:-.02em;font-weight:500}:is(.bookshelf,.shelf-reader) .book[data-font=mono] .spine__author{font-family:var(--font-mono);letter-spacing:.04em}:is(.bookshelf,.shelf-reader) .book[data-caps=true] .spine__title{text-transform:uppercase;letter-spacing:.05em}:is(.bookshelf,.shelf-reader) .spine__mark{z-index:1;left:50%;bottom:calc(var(--hpx) * .045);width:calc(7px * var(--s));height:calc(7px * var(--s));opacity:.85;background:currentColor;position:absolute;translate:-50%;box-shadow:0 1px 1px #00000047}:is(.bookshelf,.shelf-reader) .book[data-mark=circle] .spine__mark{border-radius:50%}:is(.bookshelf,.shelf-reader) .book[data-mark=diamond] .spine__mark{width:calc(6px * var(--s));height:calc(6px * var(--s));rotate:45deg}:is(.bookshelf,.shelf-reader) .book[data-mark=bar] .spine__mark{width:min(56%, calc(18px * var(--s)));height:calc(2px * var(--s))}:is(.bookshelf,.shelf-reader) .book[data-mark=ring] .spine__mark{border:calc(1.5px * var(--s)) solid currentColor;background:0 0;border-radius:50%}:is(.bookshelf,.shelf-reader) .book[data-mark=square] .spine__mark{width:calc(9px * var(--s));height:calc(9px * var(--s));background:0 0;border:1px solid}:is(.bookshelf,.shelf-reader) .book[data-deco=split] .spine__mark{color:var(--book-bg)}:is(.bookshelf,.shelf-reader) .face--cover{top:calc(var(--head-over) * -1);width:calc(var(--dpx) + var(--fore-over));height:calc(100% + var(--head-over) * 2);transform-origin:0;background: linear-gradient(90deg, #0000008a 0%, #0003 1.8%, #0000008f 3.8%, #fffdf547 5.2%, #0000001a 6.6%, transparent 10.5%, transparent 94%, #ffffff1a 98.4%, #00000057 100%), linear-gradient(165deg, var(--book-hi,var(--book-bg2)) 0%, var(--book-bg2) 32%, var(--book-bg) 78%, var(--book-deep,var(--book-bg)) 100%);box-shadow:inset 0 calc(1.5px * var(--s)) 0 #ffffff47, inset calc(-1.5px * var(--s)) 0 0 #ffffff29, inset 0 calc(-1.8px * var(--s)) 0 #00000075, inset 0 0 0 1px #0000004d;left:100%;overflow:hidden;transform:rotateY(90deg)}:is(.bookshelf,.shelf-reader) .face--cover:before{content:"";opacity:.28;pointer-events:none;background-image:repeating-linear-gradient(0deg,#ffffff12 0 1px,#0000 1px 2px),repeating-linear-gradient(90deg,#00000014 0 1px,#0000 1px 2px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}:is(.bookshelf,.shelf-reader) .face--cover:after{content:"";pointer-events:none;background:radial-gradient(circle at var(--glare-x,38%) var(--glare-y,28%), #fffcf233 0%, transparent 60%), linear-gradient(90deg, #0000007a 0%, #0000001f 3.6%, #ffffff29 5.2%, transparent 12%);position:absolute;inset:0}:is(.bookshelf,.shelf-reader) .book[data-format=hardcover] .face--cover{border-radius:0 calc(4px * var(--s)) calc(4px * var(--s)) 0}:is(.bookshelf,.shelf-reader) .book[data-format=paperback] .face--cover{border-radius:0 calc(1.5px * var(--s)) calc(1.5px * var(--s)) 0}:is(.bookshelf,.shelf-reader) .gen-cover{color:var(--book-ink);text-align:left;padding:9% 9% 9% 13%;display:flex;position:absolute;inset:0}:is(.bookshelf,.shelf-reader) .gen-cover__frame{border:1.5px solid color-mix(in srgb, var(--book-accent) 58%, transparent);outline:1px solid color-mix(in srgb, var(--book-accent) 28%, transparent);outline-offset:calc(-4px * var(--s));border-radius:calc(2.5px * var(--s));flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:11% 10% 9%;display:flex;position:relative;box-shadow:inset 0 1.5px 2px #00000059,0 1px #ffffff24}:is(.bookshelf,.shelf-reader) .gen-cover__author{font-family:var(--font-ui);font-size:calc(var(--dpx) * .048);letter-spacing:.15em;text-transform:uppercase;opacity:.88;font-weight:600}:is(.bookshelf,.shelf-reader) .gen-cover__title{font-family:var(--font-display);font-size:calc(var(--dpx) * .122);letter-spacing:-.015em;text-wrap:balance;text-shadow:0 1px 1.5px #0000006b,0 -.5px #fffae133;margin-top:auto;font-weight:600;line-height:1.03}:is(.bookshelf,.shelf-reader) .gen-cover__subtitle{margin-top:calc(var(--dpx) * .03);font-family:var(--font-display);font-size:calc(var(--dpx) * .056);opacity:.82;text-wrap:balance;font-style:italic;line-height:1.2}:is(.bookshelf,.shelf-reader) .gen-cover__rule{margin-top:calc(var(--dpx) * .06);width:38%;height:calc(var(--dpx) * .013);background:var(--book-accent);margin-bottom:auto;box-shadow:0 1px 1px #00000061}:is(.bookshelf,.shelf-reader) .gen-cover__mark{width:calc(var(--dpx) * .05);height:calc(var(--dpx) * .05);border:1px solid var(--book-accent);opacity:.85;border-radius:50%;position:relative}:is(.bookshelf,.shelf-reader) .gen-cover__mark:before{content:"";border:1px solid var(--book-accent);position:absolute;inset:22%;transform:rotate(45deg)}:is(.bookshelf,.shelf-reader) .face--back{top:calc(var(--head-over) * -1);width:calc(var(--dpx) + var(--fore-over));height:calc(100% + var(--head-over) * 2);transform-origin:0;border-radius:0 calc(3.5px * var(--s)) calc(3.5px * var(--s)) 0;background:linear-gradient(90deg, #00000080 0%, #00000038 12%, #0000002e 65%, #00000061 100%), linear-gradient(180deg, var(--book-bg2), var(--book-deep,var(--book-bg)));left:0;transform:rotateY(90deg);box-shadow:inset 0 1px #ffffff29,inset 0 -1px #00000073}:is(.bookshelf,.shelf-reader) .face--top{width:100%;height:var(--dpx);transform-origin:50% 100%;background: linear-gradient(90deg, #160c027a 0%, transparent 16%, transparent 84%, #160c027a 100%), linear-gradient(0deg, #160c025c 0%, transparent 18%, transparent 78%, #160c0247 100%),  repeating-linear-gradient(90deg, #4c361c6b 0 1px, transparent 1px 2.6px, #4c361c3d 2.6px 3.6px, transparent 3.6px 5.4px), repeating-linear-gradient(0deg, #553e2214 0 2px, transparent 2px 5px), linear-gradient(0deg, var(--book-paper,#f2ead8), var(--book-paper-edge,#dfd2b8));bottom:100%;left:0;transform:rotateX(90deg);box-shadow:inset 0 2px 4px #160c0247,inset 0 -2px 3px #160c0252}:is(.bookshelf,.shelf-reader) .book[data-format=hardcover] .face--top:after{content:"";height:calc(3.8px * var(--s));background:linear-gradient(90deg, #00000057, transparent 18%, transparent 82%, #00000057), repeating-linear-gradient(90deg, var(--book-accent) 0 calc(2.2px * var(--s)), #f8f0dc calc(2.2px * var(--s)) calc(4.4px * var(--s)));position:absolute;bottom:0;left:0;right:0;box-shadow:0 -1.5px 2.5px #00000061}:is(.bookshelf,.shelf-reader) .book[data-format=hardcover] .face--top{border-left:var(--board-t) solid var(--book-bg2);border-right:var(--board-t) solid var(--book-bg);border-bottom:calc(var(--board-t) * 1.1) solid var(--book-bg);border-top:1px solid #69523473}:is(.bookshelf,.shelf-reader) .book[data-format=paperback] .face--top{border-left:var(--board-t) solid var(--book-bg2);border-right:var(--board-t) solid var(--book-bg);border-bottom:var(--board-t) solid var(--book-bg)}:is(.bookshelf,.shelf-reader) .face--bottom{left:var(--board-t);right:var(--board-t);height:var(--dpx);transform-origin:50% 0;background:linear-gradient(90deg, #160c026b, transparent 18%, transparent 82%, #160c026b), repeating-linear-gradient(90deg, #4c361c5c 0 1px, transparent 1px 2.6px), linear-gradient(180deg, var(--book-paper-edge,#dfd2b8), #cbbba0);top:100%;transform:rotateX(-90deg)}:is(.bookshelf,.shelf-reader) .face--fore{top:0;bottom:0;left:var(--board-t);right:var(--board-t);transform:translateZ(calc(var(--dpx) * -1)) rotateY(180deg);background:linear-gradient(90deg, #160c0261, transparent 18%, transparent 82%, #160c0261), repeating-linear-gradient(90deg, #4c361c61 0 1px, transparent 1px 2.6px, #4c361c33 2.6px 3.6px, transparent 3.6px 5.4px), linear-gradient(180deg, var(--book-paper,#f2ead8), var(--book-paper-edge,#dfd2b8))}:is(.bookshelf,.shelf-reader) .book__marker{left:calc((1 - var(--progress)) * 100%);width:0;height:0;transform-style:preserve-3d;pointer-events:none;position:absolute;bottom:100%}:is(.bookshelf,.shelf-reader) .book__marker-face{width:calc(var(--dpx) * .34);height:calc(20px * var(--s));transform-origin:0 100%;transform:translateZ(calc(var(--dpx) * -.14)) rotateY(64deg) rotateZ(-2deg);border-radius:calc(2.5px * var(--s)) calc(2.5px * var(--s)) 0 0;background:linear-gradient(180deg, #ffffff5c 0%, transparent 38%, #00000038 100%), repeating-linear-gradient(0deg, #ffffff0f 0 1px, transparent 1px 2px), linear-gradient(90deg, var(--coral), #bf4932);position:absolute;bottom:0;left:0;box-shadow:inset 0 1px #ffffff59,inset 0 0 0 1px #0000002e,0 2px 4px #00000047}.bookshelf .bookend{--bw:calc(28px * var(--s));--bh:calc(154px * var(--s));--bd:calc(122px * var(--s));width:var(--bw);height:var(--bh);margin:0 calc(6px * var(--s));transform-style:preserve-3d;pointer-events:none;flex:none;position:relative}.bookshelf .bookend__face{backface-visibility:visible;background-color:#362b21;background-image:linear-gradient(#e5c481 0% 2.6%,#8c6728 2.6% 3.6%,#0000 3.6% 78%,#0f0904bf 78% 79.2%,#ebd092 79.2% 82.5%,#c69c52 82.5% 90%,#946e2d 90% 96%,#18120c 96% 100%),linear-gradient(90deg,#0000007a 0%,#fff4da38 12%,#fff4da14 28%,#0000003d 48%,#fff4da24 56%,#00000047 78%,#0000008a 100%),repeating-linear-gradient(90deg,#0000 0 2px,#ffebc30a 2px 3px,#00000014 3px 4.5px),linear-gradient(#47382b 0%,#35291f 58%,#261d15 100%);display:block;position:absolute}.bookshelf .bookend__face--front{border-radius:calc(3px * var(--s)) calc(3px * var(--s)) 0 0;box-shadow:inset 0 calc(1.5px * var(--s)) 0 #fff5d78c, inset calc(2px * var(--s)) 0 calc(3px * var(--s)) #fff2d238, inset calc(-2.5px * var(--s)) 0 calc(5px * var(--s)) #0000007a, inset 0 calc(-2px * var(--s)) calc(4px * var(--s)) #0000008c, 0 calc(4px * var(--s)) calc(9px * var(--s)) #0e07007a;inset:0}.bookshelf .bookend__face--top{width:100%;height:var(--bd);transform-origin:50% 100%;background-color:#d8b572;background-image:linear-gradient(#26190a57 0%,#0000 62%,#fffcf073 100%),repeating-linear-gradient(0deg,#0000 0 2px,#fffaeb24 2px 3px,#5038141f 3px 4px),linear-gradient(#b68c44,#e8c987);bottom:100%;left:0;transform:rotateX(90deg);box-shadow:inset 0 0 0 1px #fffaeb80,inset 0 3px 6px #281c0c3d}.bookshelf .bookend__face--left,.bookshelf .bookend__face--right{width:var(--bd);transform-origin:0;background-color:#2a2018;background-image:linear-gradient(#c6a360 0% 2.6%,#6e501f 2.6% 3.6%,#0000 3.6% 78%,#0c0702c7 78% 79.2%,#c8a662 79.2% 82.5%,#9e7a3c 82.5% 90%,#785924 90% 96%,#140f0a 96% 100%),linear-gradient(90deg,#0000002e 0%,#00000061 55%,#0000008c 100%),linear-gradient(#3b2e23 0%,#241b14 100%);height:100%;top:0;transform:rotateY(90deg)}.bookshelf .bookend__face--left{left:0}.bookshelf .bookend__face--right{left:100%}.bookshelf .plank{height:var(--plank-t);transform-style:preserve-3d;pointer-events:none;position:absolute;top:100%;left:0}.bookshelf .plank__seg{height:100%;transform-style:preserve-3d;position:absolute;top:0}.bookshelf .plank__front,.bookshelf .plank__top{background-position:0 0, 0 0, var(--seg-x) 0, var(--seg-x) 0;width:100%;display:block;position:absolute;left:0}.bookshelf .plank__top{height:calc(var(--plank-d) + var(--lip));transform-origin:50% 100%;transform:translateZ(var(--lip)) rotateX(90deg);background-image: linear-gradient(0deg, #fff8e861 0, #fff2d724 calc(var(--lip) - 2px), #140a02ad calc(var(--lip) + 2px), #160b026b calc(var(--lip) + 20px * var(--s)), #1c0e0326 calc(var(--lip) + 86px * var(--s)), #140a0261 100%),  repeating-linear-gradient(0deg, transparent 0 2px, #48280a26 2px 3px, #fff4dc17 3px 5px, transparent 5px 8.5px, #3e22081f 8.5px 10px),  repeating-linear-gradient(0deg, transparent 0 14px, #58321014 14px 22px, #fff4da0f 22px 31px),  linear-gradient(90deg, var(--oak) 0%, var(--oak-hi) 16%, var(--oak) 36%, var(--oak-mid) 58%, var(--oak-hi) 81%, var(--oak) 100%);background-repeat:no-repeat,repeat,repeat,repeat-x;background-size:100% 100%,100% 20px,100% 62px,1300px 100%;bottom:100%;box-shadow:inset 0 -1px #fffaee6b}.bookshelf .plank__front{height:100%;transform:translateZ(var(--lip));background-image: linear-gradient(180deg, #fffbeebd 0, #fff5de4d 2px, #3a1e0629 3px, transparent 24%, #3018043d 76%, #180b0294 100%),  repeating-linear-gradient(180deg, transparent 0 1.6px, #42230738 1.6px 2.6px, #fff4dc1f 2.6px 4px, transparent 4px 6.2px, #381c0529 6.2px 7.4px),  radial-gradient(ellipse 220px 6px at 26% 54%, #48260829 0%, transparent 75%),  linear-gradient(90deg, var(--oak-edge) 0%, #c7955c 24%, var(--oak-edge) 49%, #cf9e65 76%, var(--oak-edge) 100%);background-repeat:no-repeat,repeat,repeat-x,repeat-x;background-size:100% 100%,100% 11px,520px 100%,1100px 100%;top:0;box-shadow:inset 0 1px #fffcf094,inset 0 -1.5px 1px #1c0c0280}.bookshelf .plank__front:after{content:"";height:calc(var(--floor) - var(--plank-t));background:linear-gradient(180deg, var(--recess-deep) 0%, var(--recess) 24%, color-mix(in srgb, var(--recess) 35%, transparent) 62%, transparent 100%);transform:translateZ(calc(var(--lip) * -1));position:absolute;top:100%;left:0;right:0}.bookshelf .plank__seg.is-first .plank__front{border-radius:calc(3px * var(--s)) 0 0 calc(3px * var(--s));box-shadow:inset calc(2px * var(--s)) 0 calc(3px * var(--s)) #28140447, inset 0 1px 0 #fffaee73, inset 0 -1.5px 1px #200f026b}.bookshelf .plank__seg.is-last .plank__front{border-radius:0 calc(3px * var(--s)) calc(3px * var(--s)) 0;box-shadow:inset calc(-2px * var(--s)) 0 calc(3px * var(--s)) #28140447, inset 0 1px 0 #fffaee73, inset 0 -1.5px 1px #200f026b}.bookshelf .plank__label{padding:calc(2.5px * var(--s)) calc(13px * var(--s)) calc(2px * var(--s));border-top:calc(2px * var(--s)) solid #d4af69;border-bottom:calc(2px * var(--s)) solid #7a5821;border-left:calc(2px * var(--s)) solid #b58d46;border-right:calc(2px * var(--s)) solid #8c6628;border-radius:calc(2.5px * var(--s));background: radial-gradient(circle at calc(4px * var(--s)) 50%, #f3d999 0 calc(1px * var(--s)), #3a2912 calc(1.3px * var(--s)) calc(2px * var(--s)), transparent calc(2.2px * var(--s))), radial-gradient(circle at calc(100% - 4px * var(--s)) 50%, #f3d999 0 calc(1px * var(--s)), #3a2912 calc(1.3px * var(--s)) calc(2px * var(--s)), transparent calc(2.2px * var(--s))),  linear-gradient(90deg, #c59d55 0 calc(8px * var(--s)), #4a3416 calc(8px * var(--s)) calc(9px * var(--s)), transparent calc(9px * var(--s)) calc(100% - 9px * var(--s)), #4a3416 calc(100% - 9px * var(--s)) calc(100% - 8px * var(--s)), #b89049 calc(100% - 8px * var(--s)) 100%),  linear-gradient(180deg, #d8cab0 0%, #faf3e3 18%, #e8dac0 100%);color:#2c2013;font-family:var(--font-ui);font-size:calc(8.5px * var(--s));letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transform:translate(-50%, -50%) translateZ(calc(var(--lip) + 1px));cursor:pointer;pointer-events:auto;outline:1px solid #1c0f03a6;font-weight:500;line-height:1.35;transition:filter .2s,box-shadow .2s;position:absolute;top:50%;box-shadow:inset 0 1px 1.5px #23160659,0 1px #fff5dc52,0 3px 6px #0f080080}.bookshelf .plank__label:hover{filter:brightness(1.06);box-shadow:inset 0 1px 1.5px #2316064d,0 1px #fff8e46b,0 4px 8px #0f080094}.bookshelf .spine-tip{z-index:6;border:1px solid var(--line);background:var(--card);max-width:min(320px,80%);color:var(--ink);text-align:center;opacity:0;pointer-events:none;border-radius:10px;padding:.45rem .85rem .5rem;transition:opacity .16s;position:absolute;top:0;left:0;translate:-50% -100%;box-shadow:0 12px 30px -12px #00000059}.bookshelf .spine-tip.is-visible{opacity:1}.bookshelf .spine-tip__title{letter-spacing:-.02em;text-wrap:balance;font-size:.95rem;font-weight:600;line-height:1.2;display:block}.bookshelf .spine-tip__meta{color:var(--muted);margin-top:.15rem;font-size:.76rem;display:block}.bookshelf .stage__hint{z-index:4;color:var(--soft);font-family:var(--font-ui);letter-spacing:.01em;white-space:nowrap;pointer-events:none;align-items:center;gap:.35rem;font-size:.75rem;transition:opacity .6s;display:flex;position:absolute;top:14px;left:50%;translate:-50%}.bookshelf .stage__hint-key{border:1px solid var(--line);border-radius:4px;place-items:center;width:1.3rem;height:1.3rem;font-size:.7rem;display:inline-grid}.bookshelf .stage__hint-text{margin-left:.35rem}.bookshelf .stage__hint-text--touch{display:none}.bookshelf .stage__hint.is-gone{opacity:0}@media (hover:none){.bookshelf .stage__hint-key,.bookshelf .stage__hint-text--fine{display:none}.bookshelf .stage__hint-text--touch{margin-left:0;display:inline}}.bookshelf .shelf-nav{z-index:5;gap:.75rem;padding:.25rem 1.25rem 1.25rem;display:grid;position:relative}.bookshelf .shelf-nav__rail{cursor:pointer;touch-action:none;height:18px;position:relative}.bookshelf .shelf-nav__rail:before{content:"";background:var(--line);height:1px;position:absolute;top:50%;left:0;right:0}.bookshelf .shelf-nav__tick{background:color-mix(in oklab, var(--ink) 18%, transparent);border-radius:2px;height:3px;position:absolute;top:calc(50% - 1.5px)}.bookshelf .shelf-nav__window{background:color-mix(in oklab, var(--ink) 38%, transparent);will-change:transform;border-radius:999px;min-width:18px;height:4px;transition:background-color .2s;position:absolute;top:calc(50% - 2px);left:0}.bookshelf .shelf-nav__rail:hover .shelf-nav__window{background:color-mix(in oklab, var(--ink) 62%, transparent)}.bookshelf .shelf-nav__list{flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.bookshelf .section-chip{border:1px solid var(--line);color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;align-items:center;gap:.45rem;padding:.3rem .4rem .3rem .8rem;font-size:.82rem;transition:background .2s,border-color .2s,color .2s;display:inline-flex}.bookshelf .section-chip:hover{border-color:var(--soft);color:var(--ink)}.bookshelf .section-chip__count{background:var(--chip);min-width:1.4rem;font-family:var(--font-ui);font-variant-numeric:tabular-nums;text-align:center;border-radius:999px;padding:.05rem .3rem;font-size:.68rem}.bookshelf .section-chip[aria-current=true]{border-color:var(--hair-strong);background:var(--hover);color:var(--ink)}.bookshelf .section-chip[aria-current=true] .section-chip__count{background:color-mix(in oklab, var(--ink) 14%, transparent);color:var(--ink)}@media (width<=640px){.bookshelf .shelf-nav__list{scrollbar-width:none;flex-wrap:nowrap;margin:0 -1.25rem;padding:0 1.25rem .2rem;overflow-x:auto;mask-image:linear-gradient(90deg,#0000,#000 1.25rem calc(100% - 1.25rem),#0000)}.bookshelf .shelf-nav__list::-webkit-scrollbar{display:none}}.shelf-reader{--tint-bg:hsl(var(--tint-h) calc(var(--tint-s) * 40%) 96%);--tint-glow:hsl(var(--tint-h) calc(var(--tint-s) * 75%) 85%);--tint-accent:hsl(var(--tint-h) calc(var(--tint-s) * 70% + 25%) 34%);z-index:70;color:var(--ink);transition:--tint-h .9s,--tint-s .9s;position:fixed;inset:0}:root[data-theme=dark] .shelf-reader{--tint-bg:hsl(var(--tint-h) calc(var(--tint-s) * 55%) 10%);--tint-glow:hsl(var(--tint-h) calc(var(--tint-s) * 105%) 28%);--tint-accent:hsl(var(--tint-h) calc(var(--tint-s) * 80% + 20%) 74%)}.shelf-reader .reader__backdrop{background:radial-gradient(ellipse 55% 65% at var(--glow-x,30%) var(--glow-y,52%), var(--tint-glow), transparent 70%), color-mix(in srgb, var(--tint-bg) 96%, transparent);opacity:0;transition:opacity .75s;position:absolute;inset:0}.shelf-reader.is-open .reader__backdrop{opacity:1;backdrop-filter:blur(16px)}.shelf-reader .reader__stage,.shelf-reader .reader__hand{position:absolute;inset:0}.shelf-reader .reader__stage{pointer-events:none;touch-action:pan-y}.shelf-reader.is-settled .reader__stage{pointer-events:auto}.shelf-reader .book--held{cursor:default;margin:0;transition:none;position:absolute}.shelf-reader.is-settled .book--held{transition:transform .7s cubic-bezier(.2,.7,.2,1)}.shelf-reader .book--held .book__body{transition:none;transform:none!important}.shelf-reader .book--held .face--cover{box-shadow:inset 0 calc(1.5px * var(--s)) 0 #ffffff42, inset calc(-1.5px * var(--s)) 0 0 #ffffff24, inset 0 calc(-1.8px * var(--s)) 0 #00000073, inset 0 0 0 1px #00000047,  calc(18px * var(--zoom,1)) calc(28px * var(--zoom,1)) calc(46px * var(--zoom,1)) calc(-10px * var(--zoom,1)) #0000006b, calc(4px * var(--zoom,1)) calc(10px * var(--zoom,1)) calc(18px * var(--zoom,1)) calc(-4px * var(--zoom,1)) #00000047}.shelf-reader .book--held .face--cover:after{background:radial-gradient(circle at var(--glare-x,42%) var(--glare-y,32%), #fffdf538 0%, transparent 58%), linear-gradient(90deg, #0000007a 0%, #00000024 2.2%, #00000070 4%, #ffffff38 5.2%, transparent 11%), linear-gradient(125deg, #ffffff24 0%, transparent 44%)}.shelf-reader .reader__panel{opacity:0;pointer-events:none;max-height:min(78vh,760px);transition:opacity .45s ease, transform .6s var(--ease-out);scrollbar-width:thin;outline:none;padding:.5rem .75rem 2rem 0;position:absolute;top:50%;left:53%;right:clamp(4.5rem,9vw,9rem);overflow-y:auto;transform:translate(28px,-50%)}.shelf-reader.is-settled .reader__panel{opacity:1;pointer-events:auto;transform:translateY(-50%)}.shelf-reader .reader__panel.is-swapping{transition-duration:.2s;opacity:0!important}.shelf-reader .reader__title{letter-spacing:-.03em;text-wrap:balance;margin:0;font-size:clamp(2rem,3.6vw,3.1rem);font-weight:600;line-height:1.04}.shelf-reader .reader__subtitle{color:var(--muted);text-wrap:balance;margin:.45rem 0 0;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.35}.shelf-reader .reader__author{margin:.9rem 0 0;font-size:1.05rem;font-weight:500}.shelf-reader .reader__status{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.75rem 1.4rem;margin:1.3rem 0 0;padding:1rem 0 0;display:flex}.shelf-reader .reader__status:empty{display:none}.shelf-reader .reader__facts{font-family:var(--font-ui);letter-spacing:.06em;color:var(--muted);font-size:.74rem}.shelf-reader .stars{align-items:center;gap:.18rem;display:inline-flex}.shelf-reader .star{background:linear-gradient(90deg, var(--tint-accent) calc(var(--fill) * 100%), color-mix(in oklab, var(--ink) 16%, transparent) 0);width:18px;height:18px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.8-4.9 4.5 1.3 6.5L12 17.2l-5.9 3.2 1.3-6.5L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") 50%/contain no-repeat}.shelf-reader .stars__value{font-family:var(--font-ui);color:var(--muted);margin-left:.45rem;font-size:.8rem}.shelf-reader .progress{grid-template-columns:auto minmax(90px,160px) auto;align-items:center;gap:.7rem;display:grid}.shelf-reader .progress__label{color:var(--tint-accent);font-size:.86rem;font-weight:600}.shelf-reader .progress__bar{background:color-mix(in oklab, var(--ink) 14%, transparent);border-radius:99px;height:6px;position:relative;overflow:hidden}.shelf-reader .progress__fill{border-radius:inherit;background:var(--tint-accent);transform-origin:0;transform:scaleX(var(--p));transition:transform .9s var(--ease-out) .3s;position:absolute;inset:0}.shelf-reader .progress__value{font-family:var(--font-ui);color:var(--muted);font-size:.8rem}.shelf-reader .note{color:#26303a;max-width:34rem;transform:rotate(var(--note-tilt,-.8deg));background:linear-gradient(90deg,#0000 1.45rem,#dc5a468c 1.45rem calc(1.45rem + 1px),#0000 calc(1.45rem + 1px)),repeating-linear-gradient(#0000 0 1.72rem,#466e9638 1.72rem calc(1.72rem + 1px)) 0 1.15rem,linear-gradient(#fbf6ea,#f1e9d6);border-radius:3px;margin:1.6rem 0 0;padding:1.35rem 1.4rem 1.15rem 2.1rem;position:relative;box-shadow:0 18px 34px -18px #0000008c,0 2px 6px #0000002e}.shelf-reader .note:before{content:"";background:color-mix(in srgb, var(--tint-accent) 45%, #ffffff8c);opacity:.75;width:5.5rem;height:1.3rem;position:absolute;top:-.65rem;left:50%;translate:-50%;rotate:-3deg;box-shadow:0 1px 2px #00000026}.shelf-reader .note__label{font-family:var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:#9a4a3b;align-items:center;gap:.55rem;margin:0 0 .25rem;font-size:.64rem;font-weight:500;display:flex}.shelf-reader .note__text{font-family:var(--font-hand);text-wrap:pretty;margin:0;font-size:1.32rem;line-height:1.72rem}.shelf-reader .reader__tags{flex-wrap:wrap;gap:.4rem;margin:1.4rem 0 0;padding:0;list-style:none;display:flex}.shelf-reader .reader-chip{border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);font-family:var(--font-ui);color:var(--muted);border-radius:6px;align-items:center;padding:.18rem .55rem;font-size:.72rem;display:inline-flex}.shelf-reader .reader-chip--sample{color:#9a4a3b;letter-spacing:.1em;border-style:dashed;border-color:#9a4a3b99;border-radius:4px;padding:.05rem .4rem;font-size:.6rem}.shelf-reader .reader__links{flex-wrap:wrap;gap:.6rem 1.4rem;margin:1.3rem 0 0;display:flex}.shelf-reader .reader-link{color:var(--tint-accent);text-decoration:underline;text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);text-underline-offset:4px;font-size:.9rem;font-weight:600}.shelf-reader .reader-link:hover{text-decoration-color:currentColor}.shelf-reader .reader__close{z-index:3;border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);background:color-mix(in oklab, var(--page) 60%, transparent);color:var(--ink);font:inherit;cursor:pointer;opacity:0;transition:opacity .35s ease, transform .45s var(--ease-out), background .2s, border-color .2s;border-radius:999px;align-items:center;gap:.6rem;padding:.35rem .4rem .35rem 1rem;display:inline-flex;position:absolute;top:clamp(1rem,3vh,2rem);right:clamp(1rem,3vw,2.5rem);transform:translateY(-8px)}.shelf-reader.is-settled .reader__close{opacity:1;transform:none}.shelf-reader .reader__close:hover{border-color:color-mix(in oklab, var(--ink) 40%, transparent)}.shelf-reader .reader__close-label{font-size:.9rem;font-weight:600}.shelf-reader .reader__close-icon{background:color-mix(in oklab, var(--ink) 8%, transparent);border-radius:50%;place-items:center;width:32px;height:32px;display:grid}.shelf-reader .reader__kbd{border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);font-family:var(--font-ui);color:var(--muted);border-radius:5px;padding:.1rem .4rem;font-size:.64rem}.shelf-reader .reader__controls{z-index:3;opacity:0;align-items:center;gap:.9rem;transition:opacity .4s;display:flex;position:absolute;bottom:clamp(1rem,4vh,2.6rem);left:30%;translate:-50%}.shelf-reader.is-settled .reader__controls{opacity:1}.shelf-reader .reader-icon{border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);background:color-mix(in oklab, var(--page) 50%, transparent);width:44px;height:44px;color:var(--ink);cursor:pointer;transition:border-color .2s, transform .2s var(--ease-out);border-radius:50%;place-items:center;padding:0;display:grid}.shelf-reader .reader-icon:hover{border-color:color-mix(in oklab, var(--ink) 40%, transparent)}.shelf-reader .reader-icon:active{transform:scale(.94)}.shelf-reader .reader__position{min-width:4.5rem;font-family:var(--font-ui);letter-spacing:.08em;text-align:center;color:var(--muted);font-size:.76rem}@media (width<=899px){.shelf-reader .reader__panel{height:54%;max-height:none;padding:2.6rem clamp(1.25rem,5vw,2.5rem) 8.5rem;inset:auto 0 0;transform:translateY(24px);mask-image:linear-gradient(#0000 0,#000 1rem calc(100% - 8rem),#0000 calc(100% - 4.75rem))}.shelf-reader.is-settled .reader__panel{transform:none}.shelf-reader .reader__title{font-size:clamp(1.7rem,7vw,2.3rem)}.shelf-reader .reader__controls{left:50%;bottom:max(1rem, env(safe-area-inset-bottom));border:1px solid color-mix(in oklab, var(--ink) 16%, transparent);background:color-mix(in srgb, var(--tint-bg) 80%, transparent);backdrop-filter:blur(10px);border-radius:999px;padding:.35rem}.shelf-reader .reader__close{padding:.3rem}.shelf-reader .reader__close-label,.shelf-reader .reader__kbd{display:none}.shelf-reader .reader__backdrop{--glow-x:50%;--glow-y:24%}.shelf-reader .note{margin-right:.3rem}}
