html{color-scheme:light;height:100%}body{box-sizing:border-box;margin:0;height:100vh;height:100dvh;padding:clamp(10px,1.8vw,28px);padding-bottom:max(10px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));background:#eef3f0}@media(max-height:500px){body{padding:8px;}}

#snoopy-story-reader{--paper:#fff9ec;--ink:#293c48;--blue:#315e78;--gold:#c98b31;--story-size:20px;font-family:Georgia,'Times New Roman',serif;color:var(--ink);width:100%;margin:auto;container:storybook / inline-size;display:flex;flex-direction:column;gap:14px}
#snoopy-story-reader *{box-sizing:border-box}
#snoopy-story-reader .book-stage{position:relative;height:560px;min-height:0;perspective:1600px;background:var(--paper);border-radius:4px 15px 15px 4px;box-shadow:0 12px 30px #263c4426,0 2px 4px #263c441a;isolation:isolate;touch-action:pan-y;overflow:hidden}
#snoopy-story-reader .leaf{position:absolute;inset:0;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;background:var(--paper);backface-visibility:hidden;transform-origin:left center;border-radius:inherit;overflow:hidden}
#snoopy-story-reader .leaf:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 9px 0 12px -10px #4b352a60}
#snoopy-story-reader .art{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;background:#fcf4dd}
#snoopy-story-reader .art img{width:100%;height:100%;object-fit:contain;display:block}
#snoopy-story-reader .copy{padding:22px 26px 32px;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
#snoopy-story-reader .story-lines{width:100%;max-width:38ch;margin:auto;display:flex;flex-direction:column;gap:12px}
#snoopy-story-reader .copy p{margin:0;font-family:'Trebuchet MS',Arial,sans-serif;font-size:var(--fit-size,var(--story-size));line-height:1.45;font-weight:400;text-align:left;overflow-wrap:break-word}
#snoopy-story-reader .copy strong{color:var(--blue);font-weight:700}
#snoopy-story-reader .page-number{position:absolute;right:15px;bottom:8px;font:12px Arial,sans-serif;color:#6b706c}
#snoopy-story-reader .cover .copy{display:flex;text-align:center;padding:22px 26px 28px;background:#e0eff0}
#snoopy-story-reader .cover h1{margin:0;color:var(--blue);font-size:clamp(27px,4cqw,48px);line-height:1.14;font-weight:500;text-wrap:balance}
#snoopy-story-reader .cover .subtitle{font:15px Arial,sans-serif;letter-spacing:.02em;margin:12px auto 0;text-align:center;color:#426574}
#snoopy-story-reader .turning{position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:18px 0 28px #293c4825}
#snoopy-story-reader .reader-controls{flex:none;display:flex;align-items:center;justify-content:center;gap:14px;height:50px;margin:0;font-family:Arial,sans-serif}
#snoopy-story-reader .reader-controls button{font:16px Arial,sans-serif;border:1px solid #315e7830;border-radius:24px;padding:12px 20px;min-height:46px;background:#e2eef1;color:#244b62}
#snoopy-story-reader .reader-controls button:last-child{background:#315e78;color:#fff;border-color:#315e78}
#snoopy-story-reader .reader-controls button:disabled{opacity:.45}
#snoopy-story-reader .reader-controls button:focus-visible{outline:3px solid #c98b31;outline-offset:3px}
#snoopy-story-reader .position{font-size:14px;min-width:58px;text-align:center;color:light-dark(#4a606c,#c4d6df)}
@container storybook (min-width:740px){
 #snoopy-story-reader .book-stage{height:clamp(400px,50cqw,620px)}
 #snoopy-story-reader .leaf{grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);grid-template-rows:minmax(0,1fr)}
 #snoopy-story-reader .copy{--story-size:clamp(21px,2.45cqw,34px);padding:clamp(24px,3cqw,54px);border-left:1px solid #315e781a}
 #snoopy-story-reader .story-lines{gap:clamp(12px,1.6cqw,28px)}
 #snoopy-story-reader .cover .copy{padding:clamp(24px,3cqw,54px)}
 #snoopy-story-reader .cover h1{font-size:clamp(32px,3.4cqw,62px)}
}
@container storybook (max-width:739px){#snoopy-story-reader .book-stage{height:clamp(430px,140cqw,660px)}#snoopy-story-reader .copy{--story-size:clamp(22px,7.6cqw,29px)}}
@container storybook (max-width:500px){#snoopy-story-reader .copy{padding:18px 22px 28px}#snoopy-story-reader .reader-controls{gap:9px}#snoopy-story-reader .reader-controls button{padding:12px 15px}}
@media(max-height:500px){
 @container storybook (min-width:500px){#snoopy-story-reader .leaf{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);grid-template-rows:minmax(0,1fr)}#snoopy-story-reader .copy{--story-size:20px;padding:14px 20px 24px}#snoopy-story-reader .story-lines{gap:8px}#snoopy-story-reader .cover h1{font-size:30px}}
}
#snoopy-story-reader.viewport-reader{height:100%;min-height:0;gap:12px}
#snoopy-story-reader.viewport-reader .book-stage{flex:1;height:auto;min-height:0}
@media(prefers-reduced-motion:reduce){#snoopy-story-reader .turning{display:none}}