body[data-room=library]{background:radial-gradient(60rem 34rem at 50% -6rem, var(--lamp), transparent 70%), var(--grain), var(--paper)}:root[data-scheme=dark] body[data-room=library]{--paper:color-mix(in srgb, var(--wood-dark) 18%, #141210);--paper-2:color-mix(in srgb, var(--wood-dark) 22%, #1c1915)}.library{margin-top:1rem}.motes{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.motes i{background:#ffdca0b3;border-radius:50%;width:3px;height:3px;animation:18s linear infinite mote;position:absolute;top:110%}.motes i:first-child{animation-delay:0s;left:12%}.motes i:nth-child(2){animation-duration:22s;animation-delay:-4s;left:34%}.motes i:nth-child(3){animation-delay:-9s;left:51%}.motes i:nth-child(4){animation-duration:26s;animation-delay:-2s;left:68%}.motes i:nth-child(5){animation-delay:-13s;left:81%}.motes i:nth-child(6){animation-duration:20s;animation-delay:-7s;left:92%}@keyframes mote{0%{opacity:0;transform:translate(0)}15%{opacity:1}to{opacity:0;transform:translate(40px,-120vh)}}.shelf-wrap{z-index:1;margin:0 0 3.5rem;position:relative}.shelf-head{flex-wrap:wrap;align-items:baseline;gap:.75rem;margin-bottom:.75rem;display:flex}.shelf-head h2{margin:0;font-size:1.5rem}.shelf-head .hand{color:var(--accent);font-size:1.3rem}.shelf{scrollbar-width:thin;background:linear-gradient(transparent calc(100% - 14px), var(--wood) 0) bottom / 100% 100%;border-bottom:6px solid var(--wood-dark);border-radius:2px;align-items:flex-end;gap:4px;min-height:280px;padding:1.75rem 1rem 0;display:flex;position:relative;overflow:auto hidden}.book{--tilt:0deg;width:var(--w);height:var(--h);background:linear-gradient(90deg, #00000038, transparent 18%, transparent 80%, #00000047), var(--cloth);color:var(--cloth-ink);border:1.5px solid var(--pencil);transform:rotate(var(--tilt));transform-origin:bottom;border-bottom:0;border-radius:3px 3px 0 0;flex-direction:column;flex:none;justify-content:space-between;align-items:center;padding:.8rem 0 .6rem;text-decoration:none;transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s;display:flex;position:relative;box-shadow:2px 0 #00000026}.book:nth-child(5n+3){--tilt:-2.5deg;margin:0 6px 0 4px}.book:nth-child(7n+6){--tilt:1.5deg}a.book:hover,a.book:focus-visible{transform:translateY(-18px) rotate(var(--tilt));box-shadow:0 12px 18px #0000002e}a.book:active{transform:translateY(-26px) rotate(var(--tilt)) scale(1.02)}.spine-title{writing-mode:vertical-rl;font:600 .98rem/1.15 var(--font-display);letter-spacing:.01em;max-height:calc(var(--h) - 4.5rem);text-overflow:ellipsis;overflow:hidden;transform:rotate(180deg)}.spine-foot{font:600 .62rem var(--font-ui);text-transform:uppercase;letter-spacing:.08em;opacity:.85;text-align:center}.band{background:var(--cloth-ink);opacity:.55;height:3px;position:absolute;top:.45rem;left:0;right:0}.band.low{top:auto;bottom:2.1rem}.band+.spine-title{margin-top:.4rem}.book.sketch{color:var(--ink-2);border:1.5px dashed var(--pencil);box-shadow:none;cursor:default;background:0 0}.book.sketch .spine-title{font-family:var(--font-hand);font-size:1.15rem;font-weight:700}.book.sketch .spine-foot{font:700 1rem var(--font-hand);text-transform:none;letter-spacing:0;color:var(--accent)}.bookend{background:var(--wood-dark);border:1.5px solid var(--pencil);border-bottom:0;border-radius:8px 8px 0 0;flex:none;width:18px;height:120px;margin-left:6px}.reading-table{z-index:1;border:1.5px solid var(--pencil);background:var(--paper);box-shadow:4px 4px 0 var(--wood);border-radius:4px 14px;padding:1.25rem 1.5rem;position:relative}.reading-table ul{margin:0;padding-left:1.2rem}@media (prefers-reduced-motion:reduce){.motes{display:none}.book{transition:none}}.prop{flex:none;margin-left:1.25rem;display:block}.prop svg{display:block;overflow:visible}.prop .p-ink{stroke:var(--pencil);stroke-width:1.5px;stroke-linejoin:round}.lib-lamp{z-index:0;pointer-events:none;transform-origin:50% 0;animation:7s ease-in-out infinite lamp-sway;position:absolute;top:0;left:50%;translate:-50%}.lib-lamp .cord{stroke:var(--pencil);stroke-width:1.5px;fill:none}.lib-lamp .shade{fill:var(--wood-dark);stroke:var(--pencil);stroke-width:1.5px}.lib-lamp .bulb{fill:#ffe2a6;filter:drop-shadow(0 0 10px #ffd27a);animation:1.2s step-end both lamp-on}.lib-lamp .cone{clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:radial-gradient(50% 70% at 50% 0,#ffd68c47,#0000 70%);width:520px;height:460px;animation:1.2s step-end both lamp-on;position:absolute;top:128px;left:50%;translate:-50%}@keyframes lamp-sway{50%{rotate:1.6deg}}@keyframes lamp-on{0%{opacity:0}30%{opacity:1}38%{opacity:.2}46%{opacity:1}to{opacity:1}}html[data-arrive=lamp] .lib-lamp .bulb,html[data-arrive=lamp] .lib-lamp .cone{animation-delay:.1s}.shelf .book,.shelf .bookend,.shelf .prop{animation:book-drop .55s cubic-bezier(.3, 1.45, .5, 1) calc(var(--n,0) * 70ms + .4s) both}.shelf .bookend{--n:6}.shelf .prop{--n:7}.shelf .prop+.prop{--n:8}@keyframes book-drop{0%{opacity:0;translate:0 -46px}60%{opacity:1}to{opacity:1;translate:0}}html[data-arrive=lamp] .shelf .book,html[data-arrive=lamp] .shelf .bookend,html[data-arrive=lamp] .shelf .prop{animation-delay:calc(var(--n,0) * 70ms + .7s)}@media (prefers-reduced-motion:reduce){.lib-lamp,.lib-lamp .bulb,.lib-lamp .cone,.shelf .book,.shelf .bookend,.shelf .prop{animation:none}}
