/* Scene reader: layout, controls, audio dock and book surface. */

/* Scene reader: a single explicit grid overrides the alternating scroll layout. */
.scene-controls[hidden],.scene-live[hidden]{display:none!important}
.scene-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0;border-block:1px solid var(--line);margin-bottom:22px;scroll-margin-top:16px}

.scene-controls .scene-audio-slot>.btn,.scene-controls select{min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fffdf8;color:var(--deep);font:700 14px/1.4 Arial,sans-serif;cursor:pointer}


.scene-picker{display:flex;align-items:center;gap:10px;font:700 14px/1.4 Arial,sans-serif}
.scene-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.scene-stage{display:block;scroll-margin-top:16px}
.scene-rail,.scene-counter{display:none}


body.scene-reader-on header{position:relative!important;top:auto!important}
.scene-content{min-width:0;grid-column:2;grid-row:1}
.scene-rail:first-child{grid-column:1;grid-row:1}.scene-rail:last-child{grid-column:3;grid-row:1}.scene-counter{grid-column:2;grid-row:2}
body.scene-reader-on .scene-rail{display:block;padding-top:160px}
.scene-arrow{position:sticky;top:calc(50svh - 24px);display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #d2d9ca;border-radius:50%;background:#fffdf8;color:var(--deep);font:400 26px/1 Arial,sans-serif;box-shadow:0 4px 12px #173f3b0d;cursor:pointer;transition:background .18s,border-color .18s}
.scene-arrow:hover:not(:disabled){background:#f8d9c5;border-color:var(--orange)}
.scene-arrow:disabled{opacity:.3;cursor:default}
.scene-arrow:focus-visible,.scene-controls :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
body.scene-reader-on .scene-counter{display:block;text-align:center;font:700 13px/1.5 Arial,sans-serif;color:#53685e;padding-top:14px}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow{display:block!important;gap:0!important;min-width:0!important}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row,
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row.reverse{
 display:grid!important;grid-auto-columns:auto!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;transform:none!important;
}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row[hidden]{display:none!important}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-text{
 grid-area:copy!important;order:0!important;inset:auto!important;width:auto!important;min-width:0!important;max-width:none!important;min-height:0!important;margin:0!important;transform:none!important;columns:auto!important;overflow:visible!important;
}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-visual{
 grid-area:picture!important;order:0!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;padding:0!important;margin:0!important;background:transparent!important;transform:none!important;
}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-visual::before{display:none!important;content:none!important}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-visual img{
 position:static!important;inset:auto!important;display:block!important;min-height:0!important;transform:none!important;
}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-text p{width:auto!important;max-width:none!important;min-width:0!important;transform:none!important;word-break:normal!important;overflow-wrap:break-word!important;}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-text p:not([data-reader="child"]){font-size:19px!important;line-height:1.55!important}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-text p.story-lead{font-size:26px!important;line-height:1.25!important;font-weight:400!important}
body#story-two.story-second.scene-reader-on #reader #together .story-text p[data-reader="child"]{font-size:27px!important;line-height:1.35!important}
body.scene-reader-on .story-mode{touch-action:pan-y pinch-zoom}
body.scene-reader-on .story-flow:focus{outline:0}
body.scene-reader-on .story-flow:focus-visible{outline:3px solid var(--orange);outline-offset:6px}
@media(max-width:600px){
 .scene-controls{gap:12px}.scene-picker select{min-width:0;max-width:70%}
 body#story-two.story-second.scene-reader-on #reader .story-mode .story-text p.story-lead{font-size:24px!important}
}
@media(prefers-reduced-motion:reduce){.scene-stage *,.scene-controls *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.scene-controls,.scene-rail,.scene-counter{display:none!important}body.scene-reader-on .scene-stage{display:block!important}body#story-two.story-second.scene-reader-on #reader .story-mode.active .story-flow>.story-row[hidden]{display:grid!important}}
/* Fixed book frame; scene width is measured from its text at the existing type size. */
body.scene-reader-on .scene-controls{position:sticky;top:0;z-index:50;background:#edf2e7;margin-bottom:14px;padding:12px 8px;border-radius:12px;box-shadow:0 4px 12px #173f3b0a}
body.scene-reader-on .scene-stage{align-items:start}
body.scene-reader-on .scene-content{height:var(--book-height,600px)}
body.scene-reader-on .scene-rail{height:var(--book-height,600px);padding:0}
body.scene-reader-on .scene-arrow{position:relative;top:50%;transform:translateY(-50%)}
body#story-two.story-second.scene-reader-on #reader .story-mode{padding:0!important;margin:0!important}
body#story-two.story-second.scene-reader-on #reader .together-shell,
body#story-two.story-second.scene-reader-on #reader .together-story,
body#story-two.story-second.scene-reader-on #reader .syllable-view,
body#story-two.story-second.scene-reader-on #reader .syllable-view-shell,
body#story-two.story-second.scene-reader-on #reader .clear-view-shell{padding:0!important;margin:0!important}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row,
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row.reverse{height:var(--book-height,600px)!important;grid-template-columns:var(--scene-copy-width,44%) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;grid-template-areas:"copy picture"!important;align-items:stretch!important}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-text{display:block!important;overflow-anchor:none;height:100%!important;max-height:100%!important;box-sizing:border-box!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a8b7ab transparent;align-self:stretch!important}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-visual{height:100%!important;align-self:stretch!important;overflow:hidden!important}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-visual img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center!important}
@media print{body.scene-reader-on .scene-controls{position:static}body.scene-reader-on .scene-content{height:auto}body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row{height:auto!important}body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-text{overflow:visible!important;height:auto!important}}



.scene-arrow[hidden]{display:none!important}
body.scene-reader-on .scene-stage{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;grid-template-areas:none;gap:14px}
body.scene-reader-on .scene-content{grid-area:auto;grid-column:2;grid-row:1}
body.scene-reader-on .scene-rail:first-child{grid-area:auto;grid-column:1;grid-row:1}
body.scene-reader-on .scene-rail:last-child{grid-area:auto;grid-column:3;grid-row:1}
body.scene-reader-on .scene-counter{grid-area:auto;grid-column:2;grid-row:2}
body.scene-reader-on .scene-stage.scene-stacked{display:block}
body.scene-reader-on .scene-stacked .scene-content{height:auto;width:100%}
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row,
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row.reverse{height:auto!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;grid-template-areas:"picture" "copy"!important}
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row>.story-visual{position:relative!important;height:auto!important;aspect-ratio:4/3!important;align-self:start!important}
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row>.story-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row>.story-text{height:auto!important;min-height:360px!important;max-height:none!important;overflow:visible!important;overscroll-behavior:auto}
body.scene-reader-on .scene-stacked .scene-rail{position:absolute;top:var(--stack-arrow-y);width:36px;height:36px;padding:0;z-index:3;pointer-events:none}
body.scene-reader-on .scene-stacked .scene-rail:first-child{left:3px}
body.scene-reader-on .scene-stacked .scene-rail:last-child{right:3px}
body.scene-reader-on .scene-stacked .scene-arrow{top:0;transform:none;width:36px;height:36px;font-size:23px;opacity:.22;pointer-events:auto;transition:opacity .18s,background .18s,border-color .18s}
body.scene-reader-on .scene-stacked .scene-arrow:hover,body.scene-reader-on .scene-stacked .scene-arrow:focus-visible{opacity:1}
body.scene-reader-on .scene-stacked .story-step{margin-inline:18px!important}
@media(hover:none) and (pointer:coarse){body.scene-reader-on .scene-stacked .scene-arrow{opacity:.65}body.scene-reader-on .scene-stacked .scene-arrow:active{opacity:1}}

@media print{body.scene-reader-on .scene-stage{display:block}body.scene-reader-on .scene-content{height:auto}}


.scene-audio-slot{flex:1 1 340px;min-width:0;max-width:540px}
.scene-audio-slot>.btn[hidden]{display:none!important}
.scene-audio-slot .narration-player{position:static;transform:none;width:100%;padding:10px 14px;border-radius:16px;box-shadow:none}
.scene-audio-slot .narration-heading{margin-bottom:4px;font-size:12px}
.scene-audio-slot .narration-player audio{height:36px}
.narration-player.narration-floating{position:fixed;bottom:auto;transform:none;max-width:calc(100vw - 16px)}
@media(max-width:700px){
 .scene-controls{flex-direction:column;align-items:stretch}
 .scene-picker{order:0;width:100%;justify-content:space-between}
 .scene-audio-slot{order:1;flex:0 0 auto;max-width:none;width:100%}
}


.scene-reading-guide[hidden],.scene-reading-guide>[hidden]{display:none!important}
.team-guide{flex-wrap:wrap;font-family:Inter,Arial,sans-serif;font-weight:600;line-height:1.5}
.team-guide h3{margin:0;font:700 20px/1.4 Georgia,serif}
.team-guide h3 em{color:var(--orange);font-weight:400}
.team-guide p{margin:0;font:inherit;color:inherit}
@media(max-width:600px){.team-guide{gap:4px}.team-guide h3{flex-basis:100%;font-size:19px}}
@media print{.scene-reading-guide{display:none!important}}


.scene-audio-slot.audio-dock-empty{border-radius:16px;outline:1px dashed #9cab9f;outline-offset:-1px}
.scene-audio-slot.audio-dock-ready{background:#f8e6d5;outline:2px dashed var(--orange);outline-offset:-2px}


/* Continuous book surface with a quiet spine and soft shadow. */
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row,
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row.reverse{
 position:relative!important;gap:0!important;border-radius:8px!important;
 background:#fffcf5!important;isolation:isolate;
 box-shadow:0 10px 26px #173f3b12!important;
}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-text{
 position:relative!important;z-index:1;border:0!important;border-radius:8px 0 0 8px!important;
 background:linear-gradient(90deg,#fffcf5 0%,#fffcf5 92%,#eee8db 100%)!important;
 padding:30px!important;color:var(--deep);
}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-visual{
 position:relative!important;border:0!important;border-radius:0 8px 8px 0!important;
}
body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-visual::after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
 background:linear-gradient(90deg,#173f3b2b,transparent 22px);
 box-shadow:inset 0 0 0 1px #173f3b14;
}
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row,
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row.reverse{gap:0!important}
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row>.story-visual{border-radius:8px 8px 0 0!important}
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row>.story-visual::after{background:none}
body#story-two.story-second.scene-reader-on #reader .scene-stacked .story-mode .story-flow>.story-row>.story-text{
 border-radius:0 0 8px 8px!important;background:linear-gradient(#eee8db 0,#fffcf5 16px)!important;padding:24px 26px!important;
}
body#story-two.story-second.scene-reader-on #reader #clearview .story-flow>.story-row>.story-text{background:#fff!important;color:#111!important}
@media print{
 body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row{box-shadow:none!important}
 body#story-two.story-second.scene-reader-on #reader .story-mode .story-flow>.story-row>.story-text{background:#fff!important}
}