*{box-sizing:border-box}html{min-height:100%;background:#37221a}body{margin:0;color:#fff4d9;font-family:system-ui,Arial,sans-serif;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,section:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #ffe0a0;outline-offset:4px}.library{height:100dvh;min-height:570px;position:relative;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;justify-items:center;padding:10px 18px 12px;gap:4px;background:linear-gradient(#24130d10,#24130d14),url('../assets/fondo-biblioteca.png') center bottom/cover no-repeat}.vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 42%,#1b0b0b55)}.header{position:relative;z-index:3;flex-shrink:0;text-align:center;padding:8px 25px 7px;background:#301a10bb;border:1px solid #d8b26b30;border-radius:18px;box-shadow:0 5px 24px #160a0522}.eyebrow{letter-spacing:.16em;text-transform:uppercase;font-size:9px;color:#f9d990;font-weight:700}.header h1{font:700 clamp(28px,3vw,47px)/1.05 Georgia,serif;margin:3px 0 5px;text-shadow:0 3px 9px #190800}.header h1 em{color:#ffd58b}.header p{margin:0;font-size:clamp(11px,1vw,15px);color:#ffe9c4}.collection-count{display:block;font-size:11px;color:#ffe1a5;margin-top:7px}.carousel-stage{width:100%;height:100%;min-height:0;position:relative;display:grid;place-items:center;touch-action:pan-y;outline-offset:-4px}.bookcase{position:relative;aspect-ratio:16/9;container-type:inline-size;isolation:isolate;flex-shrink:0;transform:translateX(-2.5%)}.shelf-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.floor-shadow{position:absolute;z-index:-1;left:14%;right:9%;bottom:3.7%;height:3%;border-radius:50%;background:#1d0c08ad;filter:blur(9px);pointer-events:none}.books{position:absolute;left:19%;right:15%;bottom:26%;height:55%;perspective:1200px;z-index:1}.book{position:absolute;left:50%;bottom:0;width:22cqw;height:auto;aspect-ratio:4/5;background:none;border:0;padding:0;color:#ffedc5;display:flex;align-items:center;justify-content:center;transform:translateX(calc(-50% + var(--book-x,0cqw))) scale(var(--book-scale,1));transform-origin:bottom center;transition:transform .65s cubic-bezier(.22,.7,.22,1),opacity .4s,filter .3s;filter:drop-shadow(0 .45cqw .35cqw #1a0909aa)}.book img{display:block;width:100%;height:100%;object-fit:contain}.book:hover{filter:drop-shadow(0 .55cqw .45cqw #160808aa) brightness(1.08)}.book[data-visible='false']{opacity:0;visibility:hidden;pointer-events:none}.book[data-visible='true']{opacity:1;visibility:visible}.book-label{position:absolute;top:calc(100% + .55cqw);max-width:125%;padding:.4cqw .9cqw;border-radius:2cqw;background:#3b201cee;color:#ffeac6;font-size:clamp(8px,.9cqw,14px);white-space:nowrap;box-shadow:0 2px 4px #210e0840}.featured .book-label{background:#edc47e;color:#422716;font-weight:700}.featured-tag{position:absolute;bottom:calc(100% + .45cqw);white-space:nowrap;background:#684023e8;border:1px solid #e7b967;border-radius:3cqw;padding:.35cqw .8cqw;font-size:clamp(8px,.9cqw,14px);font-weight:600}.book:not(.featured) .featured-tag{display:none}.carousel-arrow{position:absolute;z-index:5;top:52%;transform:translateY(-50%);display:grid;place-items:center;width:3.2cqw;height:5cqw;min-width:27px;min-height:38px;border:1px solid #d9b16e;border-radius:10px;background:#442719eb;color:#ffe4a6;font:500 clamp(27px,3.2cqw,55px)/1 Georgia;box-shadow:0 4px 12px #180b0970}.carousel-arrow:hover{background:#734c2d}.previous{left:14%}.following{right:8.2%}.carousel-pagination{position:absolute;z-index:4;bottom:7.2%;left:20%;right:16%;display:flex;justify-content:center;gap:8px}.carousel-dot{position:relative;width:26px;height:26px;padding:0;border:0;background:transparent}.carousel-dot:before{content:'';position:absolute;inset:8px;border-radius:50%;border:1px solid #f5d59b;background:#583621}.carousel-dot[aria-current='true']:before{background:#ffe0a0;box-shadow:0 0 8px #e7ba7b}.collection-footer{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;padding-top:0}.hint{font-size:12px;line-height:1.3;text-shadow:0 2px 4px #1a0b07;background:#2d190eb8;border-radius:20px;padding:5px 15px;margin:0;max-width:95vw;text-align:center}.illustrated-cover{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%;padding:10% 8%;border:5px ridge #d0a65d;border-left:12px ridge #be914c;border-radius:4px 12px 12px 4px;background:radial-gradient(ellipse,#315363,#162f44);color:#ffdf9f;box-shadow:inset 0 0 0 4px #152638,inset 0 0 0 5px #d2ab62;font-family:Georgia,serif}.illustrated-cover strong{font-size:2.6cqw;font-weight:500;text-align:center;line-height:1.15}.cover-symbol{font-size:6cqw;line-height:1}.illustrated-cover small{font-size:1cqw;text-align:center}.cover-garnet{background:radial-gradient(ellipse,#8b4650,#4b2332)}.cover-forest{background:radial-gradient(ellipse,#4c7257,#233f35)}dialog{border:1px solid #d5a86c;border-radius:22px;background:#f9ecd4;color:#472e24;width:min(720px,calc(100% - 28px));max-height:90dvh;overflow:auto;padding:30px;box-shadow:0 25px 100px #000a}dialog::backdrop{background:#130b09c9;backdrop-filter:blur(5px)}.close{position:absolute;right:14px;top:8px;background:none;border:0;font-size:32px;color:#553522}.modal-inner{display:flex;align-items:center;gap:25px}#modal-cover-holder{width:35%;flex-shrink:0;container-type:inline-size}#modal-cover-holder img{display:block;width:100%;max-height:340px;object-fit:contain;filter:drop-shadow(0 8px 7px #37201955)}#modal-cover-holder .illustrated-cover{aspect-ratio:4/5}#modal-cover-holder .illustrated-cover strong{font-size:14cqw}#modal-cover-holder .cover-symbol{font-size:28cqw}#modal-cover-holder small{font-size:6cqw}.modal-text{flex:1;text-align:center}.modal-eyebrow{color:#986127;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.modal-text h2{font:700 clamp(24px,3vw,36px)/1.2 Georgia;margin:10px 0}.modal-text p{line-height:1.6;font-size:15px}.primary{background:#87542e;color:#fff2d5;border:0;border-radius:20px;padding:12px 22px;font-weight:700;margin-top:14px}.primary:hover{background:#633b23}#modal-status{color:#88582f;font-weight:700;font-size:13px}
@media(max-width:650px){.library{padding:10px 5px;min-height:610px}.header{padding:9px 14px;max-width:97%}.header h1{font-size:clamp(25px,6vw,38px)}.header p{font-size:11px}.eyebrow{font-size:8px}.collection-count{font-size:10px}.carousel-dot{width:22px;height:22px}.carousel-dot:before{inset:7px}.carousel-pagination{gap:3px}.hint{font-size:10px}.modal-inner{flex-direction:column;gap:12px}#modal-cover-holder{width:35%;max-width:140px}.modal-text p{font-size:14px}.bookcase{transform:translateX(-2.5%)}.book-label{font-size:7px}.featured-tag{font-size:7px}}
@media(max-height:650px) and (min-aspect-ratio:1/1){.library{min-height:490px;padding:6px 12px;gap:2px}.header{padding:5px 15px}.header h1{font-size:28px}.header p,.eyebrow{display:none}.collection-count{font-size:10px;margin-top:4px}.hint{font-size:10px;padding:3px 10px}.collection-footer{gap:4px}.library-controls{padding:5px 12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}