:root{--parchment:#f5e6c8;--parchment-dark:#e8d5a3;--gold:#8b6914;--gold-light:#c4a555;--ink:#3d2b0f;--ink-light:#5c3d1a;--accent-red:#8b2500;--accent-blue:#1a3a5c}.manuscript{min-height:100vh;color:var(--ink);background-color:#2a2010;font-family:Georgia,Times New Roman,Times,serif}.manuscript-page{background-color:var(--parchment);border:3px double var(--gold);border-top:4px solid var(--gold);border-bottom:4px solid var(--gold);flex-direction:column;justify-content:center;max-width:100%;min-height:100vh;margin:0;padding:3.5rem 6vw;display:flex;position:relative}.manuscript-page:before{content:"";border:1px solid var(--gold-light);pointer-events:none;position:absolute;inset:8px}.manuscript-page:after{content:"";pointer-events:none;background:linear-gradient(#c4a5550f 0%,#0000 20% 80%,#c4a5550f 100%);position:absolute;inset:0}.manuscript-text{color:var(--ink);max-width:820px;margin:0 auto;padding:2rem 0;font-size:1.35rem;line-height:2.1}.manuscript-illustration{border:2px solid var(--gold);background-color:var(--parchment-dark);outline:1px solid var(--gold-light);outline-offset:3px;min-height:50vh;max-height:70vh;margin-bottom:2rem;position:relative;overflow:hidden}.manuscript-illustration img{object-fit:cover;width:100%;height:100%;display:block}.illustration-layer{position:absolute;inset:0}@keyframes fireFlicker{0%,to{opacity:1;transform:scaleY(1)translateY(0)}25%{opacity:.85;transform:scaleY(1.04)translateY(-2px)}50%{opacity:.95;transform:scaleY(.97)translateY(1px)}75%{opacity:.9;transform:scaleY(1.03)translateY(-1px)}}@keyframes smokeDrift{0%{opacity:.6;transform:translateY(0)translate(0)scaleX(1)}33%{opacity:.4;transform:translateY(-12px)translate(4px)scaleX(1.1)}66%{opacity:.25;transform:translateY(-24px)translate(-3px)scaleX(1.2)}to{opacity:0;transform:translateY(-40px)translate(6px)scaleX(1.3)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animation-fire-flicker{animation:1.8s ease-in-out infinite fireFlicker}.animation-smoke-drift{animation:3s ease-out infinite smokeDrift}.animation-shimmer{background:linear-gradient(90deg,#0000 0%,#c4a55566 50%,#0000 100%) 0 0/200%;animation:2.5s linear infinite shimmer}.manuscript-title{text-align:center;color:var(--ink);padding:0 1rem}.manuscript-title h1{font-variant:small-caps;letter-spacing:.15em;margin:0;font-size:3.5rem;line-height:1.2}.manuscript-title .source{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);margin-bottom:.5rem;font-size:.8rem}.manuscript-title .author{color:var(--ink-light);margin-top:.5rem;font-size:1rem;font-style:italic}.manuscript-title .divider{background:var(--gold);border:none;width:60px;height:2px;margin:1rem auto;display:block}.manuscript-title .scroll-hint{letter-spacing:.1em;text-transform:uppercase;color:var(--gold);opacity:.8;margin-top:1.5rem;font-size:.78rem}.marginalia-area{color:var(--gold);cursor:pointer;z-index:10;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:4px;transition:transform .2s;display:flex;position:absolute}.marginalia-area:hover{transform:scale(1.1)}.marginalia-area.bottom-right{bottom:1.5rem;right:2rem}.marginalia-area.bottom-left{bottom:1.5rem;left:2rem}.marginalia-area.top-right{top:auto;bottom:1.5rem;right:2rem}.marginalia-area.top-left{top:auto;bottom:1.5rem;left:2rem}.creature-walker{width:65px;height:80px;animation:16s ease-in-out infinite creatureWalk;overflow:hidden}.creature-sprite{background:url(/bookcels/king-alfred/illustrations/creature/creature-sprite.png) 0 0/390px 80px no-repeat;width:65px;height:80px;animation:2s steps(6,end) infinite creatureFrames}@keyframes creatureFrames{0%{background-position:0 0}to{background-position:-390px 0}}@keyframes creatureWalk{0%{transform:translate(0)scaleX(1)}5%{transform:translate(0)scaleX(1)}30%{transform:translate(40px)scaleX(1)}35%{transform:translate(40px)scaleX(1)}36%{transform:translate(40px)scaleX(-1)}65%{transform:translate(-30px)scaleX(-1)}70%{transform:translate(-30px)scaleX(-1)}71%{transform:translate(-30px)scaleX(1)}95%{transform:translate(0)scaleX(1)}to{transform:translate(0)scaleX(1)}}.marginalia-area:hover .creature-sprite{background-position:0 0;animation-play-state:paused}.marginalia-area:hover .creature-walker{animation-play-state:paused}.marginalia-comment{max-width:260px;color:var(--ink-light);text-align:center;font-family:Georgia,Times New Roman,serif;font-size:1.05rem;font-style:italic;line-height:1.5}@media (max-width:768px){.manuscript-page{min-height:auto;padding:1.5rem 1.25rem}.manuscript-title h1{font-size:2rem}.manuscript-page:before{inset:5px}.manuscript-text{font-size:1rem;line-height:1.75}.manuscript-title{padding:1.25rem .75rem}.marginalia-area.bottom-right,.marginalia-area.top-right{bottom:1rem;right:1rem}.marginalia-area.bottom-left,.marginalia-area.top-left{bottom:1rem;left:1rem}}