.comic{padding:0;border:1px solid #b89b61;background:#141c16;color:#eee3c8;width:min(1120px,96vw);max-width:none;max-height:96dvh;overflow:auto;box-shadow:0 25px 100px #000;border-radius:5px}.comic::backdrop{background:rgba(2,8,5,.9);backdrop-filter:blur(6px)}.comic *{box-sizing:border-box}.comic-top{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-bottom:1px solid #776440;gap:12px}.comic-brand{font:italic bold 18px Georgia,serif;letter-spacing:.02em}.comic button{cursor:pointer;border:1px solid #8e7a51;background:#233329;color:#f4e9cd;padding:10px 17px;font:600 12px Arial,sans-serif;letter-spacing:.06em;border-radius:2px}.comic button:hover{background:#3a4a34}.comic button:focus-visible{outline:3px solid #f2ca7a;outline-offset:3px}.comic button:disabled{opacity:.3;cursor:default}.comic-stage{margin:0;background:#080e0a;position:relative;min-height:100px}.comic-stage img{display:block;width:100%;height:min(56dvh,620px);object-fit:contain}.comic-stage.turn{animation:comicReveal .65s ease both}.comic-caption{padding:16px 28px 18px;background:#e8ddbf;color:#202a20;position:relative;border-top:4px solid #101910}.comic-caption small{font:700 10px Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#73502f}.comic-caption h2{font:italic bold clamp(23px,3vw,32px)/1.1 Georgia,serif;margin:7px 0 9px}.comic-caption p{font:16px/1.55 Georgia,serif;margin:0;max-width:950px}.comic-controls{padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.comic-navigation{display:flex;align-items:center;gap:12px}.comic-count{font:12px Arial,sans-serif;white-space:nowrap;color:#cdbb8f}.comic .comic-next{background:#8e322a;border-color:#c77855}.comic .comic-skip{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:4px}.comic-progress{display:flex;gap:5px;padding:0 22px 13px}.comic-progress span{height:3px;background:#344236;flex:1}.comic-progress span.active{background:#d3ac67}.comic-sound{white-space:nowrap}@keyframes comicReveal{from{opacity:.3;transform:translateX(12px)}to{opacity:1;transform:none}}@media(max-width:600px){.comic{width:97vw;max-height:97dvh}.comic-top{padding:12px}.comic-brand{font-size:15px}.comic button{padding:10px 11px;font-size:11px}.comic-stage img{height:auto;aspect-ratio:3/2}.comic-caption{padding:16px}.comic-caption p{font-size:15px}.comic-controls{padding:12px}.comic-navigation{gap:7px}.comic-count{font-size:11px}}@media(prefers-reduced-motion:reduce){.comic-stage.turn{animation:none}}
.comic-caption h2{text-transform:none;letter-spacing:-.02em}.comic-caption p{text-transform:none}.comic-stage img{animation:comicInk 1.2s ease both}@keyframes comicInk{from{filter:brightness(.6)}to{filter:brightness(1)}}@media(prefers-reduced-motion:reduce){.comic-stage img{animation:none}}
.comic-stage.turn img{animation:comicPanels 3.2s ease-out both}@keyframes comicPanels{0%,20%{clip-path:inset(0 76% 0 0)}45%,55%{clip-path:inset(0 51% 0 0)}100%{clip-path:inset(0)}}@media(prefers-reduced-motion:reduce){.comic-stage.turn img{animation:none}}
.comic{overflow-x:hidden}.comic-stage.turn img{animation:comicInk 1.2s ease both}.comic-stage.turn[data-page="1"] img{animation:comicPanels 3.2s ease-out both}.comic-stage.turn[data-page="2"] img{animation:comicRows 3.2s ease-out both}@keyframes comicRows{0%,20%{clip-path:inset(0 0 68% 0)}45%,55%{clip-path:inset(0 0 33% 0)}100%{clip-path:inset(0)}}@media(prefers-reduced-motion:reduce){.comic-stage.turn[data-page] img{animation:none}}
.comic-stage.turn[data-page="5"] img{animation:comicRows 3.2s ease-out both}@media(prefers-reduced-motion:reduce){.comic-stage.turn[data-page="5"] img{animation:none}}
.comic-stage.turn[data-page="3"] img{animation:comicRows 3.2s ease-out both}@media(prefers-reduced-motion:reduce){.comic-stage.turn[data-page="3"] img{animation:none}}
.comic-stage.turn[data-page="4"] img{animation:comicRows 3.2s ease-out both}@media(prefers-reduced-motion:reduce){.comic-stage.turn[data-page="4"] img{animation:none}}

/* A complete frame emerges from darkness; never reveal it with a wipe. */
.comic-stage{overflow:hidden;background:#030604}
.comic-stage.turn,.comic-stage.turn[data-page]{animation:none}
.comic-stage.turn[data-page] img{clip-path:none;animation:comicFromDark 2.2s ease-out both}
@keyframes comicFromDark{from{opacity:0;filter:brightness(.15)}to{opacity:1;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.comic-stage.turn[data-page] img{animation:none;opacity:1;filter:none}}

.comic-face{display:none;position:absolute;inset:5% auto 5% 50%;height:90%;aspect-ratio:.56;transform:translateX(-50%);overflow:hidden;border:3px solid #c7a86b;box-shadow:0 0 0 100vmax #030604c9;z-index:2;background:#080e0a}
.comic-face.visible{display:block;animation:portraitApproach 2.6s ease both}
.comic-stage.turn[data-page] .comic-face img{position:absolute;bottom:0;left:calc(var(--face)*-100%);width:700%;height:auto;max-width:none;object-fit:fill;animation:none;clip-path:none;opacity:1;filter:none}
@keyframes portraitApproach{0%{opacity:0;transform:translateX(-50%) scale(.94)}18%,85%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.025)}}

/* End the cellar sequence on Fox's waking close-up in the upper-right panel. */
.comic-face.fox-final{aspect-ratio:1;animation:foxApproach 4s ease both}
.comic-stage.turn[data-page] .comic-face.fox-final img{width:500%;height:auto;left:-365%;top:0;bottom:auto}

@keyframes foxApproach{from{opacity:0;transform:translateX(-50%) scale(.94)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.comic-face{animation:none}}