.library-home .reader-hero{--hero-ease: cubic-bezier(.22,.61,.36,1);--hero-paper: #f5ecd9;position:relative;isolation:isolate;height:440px;min-height:440px;display:block;padding:34px 48px 76px;overflow:hidden;border:0;border-radius:10px;box-shadow:none;background:var(--hero-paper);color:var(--text);touch-action:pan-y}.library-home .reader-hero:before,.library-home .reader-hero:after{content:none}.reader-hero .hero-scenery{position:absolute;z-index:-2;inset:0;background:url(/art/thu-vien-thuy-mac.webp) right center/cover no-repeat;transform-origin:70% 50%;animation:hero-ken-burns 12s linear alternate infinite}.reader-hero .hero-paper{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#f5ecd9 0%,#f5ecd9f5 35%,#f5ecd9d9 55%,#f5ecd93b 75%,transparent)}.reader-hero .hero-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;height:100%;align-items:center}.reader-hero .hero-copy{max-width:560px;animation:none}.reader-hero .hero-copy h1{font-size:clamp(28px,3.4vw,44px);line-height:1.2;margin:10px 0 16px;color:inherit}.reader-hero .eyebrow{font-size:14px;color:#8b4430}.reader-hero .hero-author{font-size:14px;color:#705d48}.reader-hero .hero-summary{font-size:15px;line-height:1.75;max-width:52ch}.reader-hero .hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:20px}.reader-hero .hero-visual{height:100%;display:grid;place-items:center}.reader-hero .hero-book{display:block;padding:0;width:220px;height:330px;aspect-ratio:2/3;transform:none;border-radius:var(--r-nho);box-shadow:0 8px 24px #3c28142e}.reader-hero .hero-book span{display:block;padding:0;margin:0;background:transparent;font:inherit}.reader-hero .hero-book img,.reader-hero .hero-cover-placeholder{display:block;width:100%;height:100%;border:0;border-radius:var(--r-nho);object-fit:contain;background:#f5ecd9;box-shadow:none;animation:none}.reader-hero .hero-cover-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;text-align:center;color:#f6ebd1;background:linear-gradient(140deg,#354d68,#182738);font:700 24px/1.4 var(--font-ui)}.reader-hero .hero-cover-placeholder small{font:italic 14px/1.5 var(--font-ui)}.reader-hero[data-phase=leaving] .hero-copy{animation:hero-copy-out .25s var(--hero-ease) both}.reader-hero[data-phase=leaving] .hero-book{animation:hero-book-out .35s var(--hero-ease) both}.reader-hero[data-phase=entering] .hero-book{animation:hero-book-in .6s var(--hero-ease) .15s both}.reader-hero[data-phase=entering] .hero-line{animation:hero-line-in .45s var(--hero-ease) calc(var(--line)*60ms) both}@keyframes hero-ken-burns{0%{transform:scale(1)}to{transform:scale(1.06)}}@keyframes hero-copy-out{to{opacity:0;transform:translateY(calc(-12px * var(--slide-dir)))}}@keyframes hero-book-out{to{opacity:0;transform:translate(calc(24px * var(--slide-dir))) rotate(-4deg) scale(.96)}}@keyframes hero-book-in{0%{opacity:0;transform:translate(calc(40px * var(--slide-dir))) rotate(2deg) scale(.96)}to{opacity:1;transform:rotate(-4deg) scale(1)}}@keyframes hero-line-in{0%{opacity:0;transform:translateY(calc(16px * var(--slide-dir)))}to{opacity:1;transform:none}}.library-home .reader-hero .hero-switcher{position:absolute;left:42px;bottom:18px;z-index:2;display:flex;align-items:center;gap:2px;margin:0}.reader-hero .hero-switcher button{display:grid;place-items:center;min-width:32px;min-height:40px;padding:0;border:0;border-radius:6px;background:transparent;color:#825e2c;box-shadow:none;cursor:pointer}.reader-hero .hero-switcher button:disabled{opacity:.7;cursor:default}.reader-hero .hero-dot-track{display:block;position:relative;width:8px;height:8px;overflow:hidden;border-radius:12px;background:#c6b99f}.reader-hero .hero-dot[aria-pressed=true]{width:44px;background:transparent}.reader-hero .hero-dot[aria-pressed=true] .hero-dot-track{width:32px}.reader-hero .hero-progress{display:block;position:absolute;inset:0;background:#9f6b15;transform:scaleX(0);transform-origin:left}.reader-hero .hero-dot[aria-pressed=true] .hero-progress{animation:hero-progress 6s linear both}.reader-hero[data-running=false] .hero-dot[aria-pressed=true] .hero-progress{animation-play-state:paused}.reader-hero .hero-arrow{font:26px/1 var(--font-ui)}@keyframes hero-progress{to{transform:scaleX(1)}}:root[data-theme=toi] .reader-hero{--hero-paper: #18221f;color:#f0e8d8}:root[data-theme=toi] .reader-hero .hero-paper{background:linear-gradient(90deg,#18221f,#18221ff5 35%,#18221fde 55%,#18221f88 85%,#18221f55)}:root[data-theme=toi] .reader-hero .eyebrow,:root[data-theme=toi] .reader-hero .hero-author{color:#dac5a1}:root[data-theme=toi] .reader-hero .hero-summary,:root[data-theme=toi] .reader-hero .hero-actions>a:not(.button){color:#e4d8c4}:root[data-theme=toi] .reader-hero .hero-switcher button{color:#e6c691}:root[data-theme=toi] .reader-hero .hero-dot-track{background:#75654c}:root[data-theme=toi] .reader-hero .hero-progress{background:#dfaf5c}@media(max-width:767px){.library-home .reader-hero{height:700px;min-height:700px;padding:26px 24px 70px}.reader-hero .hero-body{display:grid;grid-template-columns:1fr;grid-template-rows:auto 190px;align-content:center;gap:24px}.reader-hero .hero-copy{width:100%;max-width:none}.reader-hero .hero-copy h1{font-size:28px}.reader-hero .hero-summary{font-size:14px}.reader-hero .hero-book{width:126.6667px;height:190px}.reader-hero .hero-cover-placeholder{font-size:17px;padding:12px}.reader-hero .hero-cover-placeholder small{font-size:11px}.library-home .reader-hero .hero-switcher{left:50%;transform:translate(-50%);bottom:14px}.reader-hero .hero-paper{background:linear-gradient(180deg,#f5ecd9f5,#f5ecd9d9 60%,#f5ecd933)}:root[data-theme=toi] .reader-hero .hero-paper{background:linear-gradient(180deg,#18221ff5,#18221fde 60%,#18221f88)}}@media(prefers-reduced-motion:reduce){:root .reader-hero .hero-scenery{animation:none!important;transform:none}:root .reader-hero .hero-book{transform:none}:root .reader-hero[data-phase=leaving] :is(.hero-copy,.hero-book){animation:hero-reduced-out .1s linear both!important}:root .reader-hero[data-phase=entering] :is(.hero-line,.hero-book){animation:hero-reduced-in .1s linear both!important}:root .reader-hero .hero-progress{animation:none!important;transform:scaleX(1)}@keyframes hero-reduced-out{to{opacity:0}}@keyframes hero-reduced-in{0%{opacity:0}to{opacity:1}}}