/* Reader-specific canonical interaction/layout rules. Split from app.css in v0.6.32; behavior unchanged. */

/* ===== v0.6.26 stable mobile pinch canvas + flash-free turn commit ===== */
@media(max-width:900px){
  /* One immutable fitted page box. Pinch zoom never changes width/height; only
     transform scale/translation changes, preventing layout feedback/shaking. */
  body.reader-page .reader-shell>.stage,
  body.reader-page.reader-scene-desk-light .stage,
  body.reader-page.reader-scene-minimal-light .stage{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    touch-action:pan-y!important;
  }
  body.reader-page .reader-shell>.stage>.book-frame,
  body.reader-page.reader-scene-desk-light .book-frame,
  body.reader-page.reader-scene-minimal-light .book-frame{
    --mobile-reader-fit-w:min(
      calc(100vw - 64px),
      calc((100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .72)
    );
    position:relative!important;
    flex:0 0 auto!important;
    width:var(--mobile-reader-fit-w)!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:.72!important;
    margin:auto!important;
    left:auto!important;
    right:auto!important;
    transform:translate3d(var(--mobile-pan-x,0px),var(--mobile-pan-y,0px),0) scale(var(--mobile-zoom,1))!important;
    transform-origin:center center!important;
    will-change:transform!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    touch-action:pan-y!important;
  }
  body.reader-page .reader-shell.mobile-reader-zoomed>.stage{
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    touch-action:none!important;
    overscroll-behavior:none!important;
  }
  body.reader-page .reader-shell.mobile-reader-zoomed>.stage>.book-frame,
  body.reader-page.reader-scene-desk-light .reader-shell.mobile-reader-zoomed>.stage>.book-frame,
  body.reader-page.reader-scene-minimal-light .reader-shell.mobile-reader-zoomed>.stage>.book-frame{
    width:var(--mobile-reader-fit-w)!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    margin:auto!important;
    transform:translate3d(var(--mobile-pan-x,0px),var(--mobile-pan-y,0px),0) scale(var(--mobile-zoom,1))!important;
    transform-origin:center center!important;
    touch-action:none!important;
  }
}

/* ===== v0.6.26 unified reader zoom/pan engine =====
   One fixed page/spread layout box + one compositor transform for every device.
   Pointer Events own the reader gesture surface; browser native pinch/pan is not
   allowed to compete with the app gesture recognizer. */
body.reader-page .reader-shell>.stage,
body.reader-page.reader-scene-desk-light .stage,
body.reader-page.reader-scene-minimal-light .stage{
  touch-action:none!important;
  overscroll-behavior:none!important;
}
body.reader-page .reader-shell>.stage>.book-frame,
body.reader-page.reader-scene-desk-light .book-frame,
body.reader-page.reader-scene-minimal-light .book-frame{
  --reader-zoom:1;
  --reader-pan-x:0px;
  --reader-pan-y:0px;
  transform:translate3d(var(--reader-pan-x),var(--reader-pan-y),0) scale(var(--reader-zoom))!important;
  transform-origin:center center!important;
  will-change:transform!important;
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
body.reader-page .book-frame.panning{cursor:grabbing!important}
body.reader-page .reader-shell.reader-zoomed>.stage{overflow:hidden!important}

@media(max-width:900px){
  body.reader-page .reader-shell>.stage,
  body.reader-page.reader-scene-desk-light .stage,
  body.reader-page.reader-scene-minimal-light .stage{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    touch-action:none!important;
    -webkit-overflow-scrolling:auto!important;
  }
  body.reader-page .reader-shell>.stage>.book-frame,
  body.reader-page.reader-scene-desk-light .book-frame,
  body.reader-page.reader-scene-minimal-light .book-frame{
    --mobile-reader-fit-w:min(
      calc(100vw - 64px),
      calc((100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .72)
    );
    width:var(--mobile-reader-fit-w)!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    margin:auto!important;
    transform:translate3d(var(--reader-pan-x),var(--reader-pan-y),0) scale(var(--reader-zoom))!important;
    transform-origin:center center!important;
    touch-action:none!important;
  }
}

/* ===== v0.6.29 reader reliability + sharp zoom ===== */
body.reader-page .base-sheet{isolation:isolate}
body.reader-page .reader-hires-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  z-index:3!important;
  opacity:0;
  pointer-events:none!important;
  background:#fff;
  transition:opacity .08s linear;
  image-rendering:auto;
}
body.reader-page .base-sheet.hires-ready>.reader-hires-layer{opacity:1}
body.reader-page .base-sheet>.page-watermark{z-index:6!important}
body.reader-page .nav-arrow{
  pointer-events:auto!important;
  z-index:160!important;
}
body.reader-page .nav-arrow:not(:disabled){cursor:pointer!important}

@media(max-width:900px){
  /* Keep the app—not the browser viewport—in control of PDF gestures. */
  body.reader-page .reader-shell>.stage,
  body.reader-page .reader-shell>.stage>.book-frame{
    touch-action:none!important;
    overscroll-behavior:none!important;
  }
  /* Expose +/- on phones without crowding the reader title bar. */
  body.reader-page .reader-tools [data-zoom-in],
  body.reader-page .reader-tools [data-zoom-out]{
    display:grid!important;
    place-items:center!important;
    position:fixed!important;
    z-index:165!important;
    bottom:max(64px,calc(52px + env(safe-area-inset-bottom)))!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    padding:0!important;
    border-radius:50%!important;
  }
  body.reader-page .reader-tools [data-zoom-in]{right:max(10px,env(safe-area-inset-right))!important}
  body.reader-page .reader-tools [data-zoom-out]{right:max(58px,calc(48px + env(safe-area-inset-right)))!important}
}

/* ===== v0.6.29 canonical reader interaction surface =====
   Final overrides intentionally collapse historical reader experiments into one
   compositor model: fixed fitted book + translate/scale, clipped by stage. */
body.reader-page .reader-shell>.stage{
  position:relative!important;
  overflow:hidden!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
body.reader-page .reader-shell>.stage>.book-frame{
  transform:translate3d(var(--reader-pan-x,0px),var(--reader-pan-y,0px),0) scale(var(--reader-zoom,1))!important;
  transform-origin:50% 50%!important;
  transition:none!important;
  will-change:transform!important;
  touch-action:none!important;
}
body.reader-page .reader-commit-shield{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  background:#fff!important;
  border-radius:inherit!important;
  z-index:8!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
body.reader-page .turning-sheet{z-index:9!important}
body.reader-page .nav-arrow{
  z-index:190!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
body.reader-page .nav-arrow:not(:disabled){opacity:1!important}
body.reader-page .nav-arrow:disabled{pointer-events:none!important}
@media(max-width:900px){
  body.reader-page .reader-shell>.stage{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.reader-page .reader-shell>.stage>.book-frame{
    position:relative!important;
    flex:0 0 auto!important;
    width:var(--mobile-reader-fit-w)!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:.72!important;
    margin:auto!important;
  }
  body.reader-page .nav-arrow{width:40px!important;height:50px!important}
}

/* ===== v0.6.29 canonical reader compositor =====
   Zoom/pan lives on its own surface. The book keeps a fixed layout box so the
   curl engine never fights viewport transforms. */
body.reader-page .reader-shell>.stage{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
body.reader-page .reader-pan-surface{
  --reader-zoom:1;
  --reader-pan-x:0px;
  --reader-pan-y:0px;
  position:relative!important;
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
  transform:translate3d(var(--reader-pan-x),var(--reader-pan-y),0) scale(var(--reader-zoom))!important;
  transform-origin:50% 50%!important;
  transition:none!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  contain:layout style!important;
  touch-action:none!important;
}
body.reader-page .reader-pan-surface>.book-frame,
body.reader-page.reader-scene-desk-light .reader-pan-surface>.book-frame,
body.reader-page.reader-scene-minimal-light .reader-pan-surface>.book-frame{
  transform:none!important;
  transform-origin:50% 50%!important;
  transition:none!important;
  margin:0!important;
  touch-action:none!important;
  will-change:auto!important;
}
body.reader-page .reader-commit-buffer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  background:#fff!important;
  border-radius:inherit!important;
  z-index:8!important;
  pointer-events:none!important;
}
body.reader-page .turning-sheet{z-index:9!important}
body.reader-page .book-frame.is-turning .base-sheet.loading:after{display:none!important}
body.reader-page .nav-arrow{
  z-index:300!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
body.reader-page .nav-arrow:not(:disabled){opacity:1!important}
body.reader-page .nav-arrow:disabled{pointer-events:none!important}
@media(max-width:900px){
  body.reader-page .reader-pan-surface>.book-frame,
  body.reader-page.reader-scene-desk-light .reader-pan-surface>.book-frame,
  body.reader-page.reader-scene-minimal-light .reader-pan-surface>.book-frame{
    --mobile-reader-fit-w:min(
      calc(100vw - 64px),
      calc((100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .72)
    );
    position:relative!important;
    width:var(--mobile-reader-fit-w)!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:.72!important;
    left:auto!important;
    right:auto!important;
    border-radius:3px!important;
  }
  body.reader-page .reader-pan-surface{
    max-width:none!important;
    max-height:none!important;
  }
  body.reader-page .nav-arrow{width:42px!important;height:52px!important}
}


/* v0.6.32 — non-destructive copyright notice for published editions */
body.reader-page .reader-copyright{
  position:absolute;left:50%;bottom:50px;z-index:280;max-width:min(62vw,680px);
  transform:translateX(-50%);padding:4px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--reader-bg,#f4eee6) 76%,transparent);
  box-shadow:0 1px 8px rgba(35,27,21,.08);color:rgba(51,41,33,.66);
  font-size:9px;font-weight:650;line-height:1.25;letter-spacing:.01em;text-align:center;
  pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
@media(max-width:900px){
  body.reader-page .reader-copyright{bottom:calc(46px + env(safe-area-inset-bottom));max-width:68vw;font-size:8px;padding:3px 7px}
}


/* ===== v0.6.69 reader animation control ===== */
body.reader-page .reader-animation-control{
  display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 10px;
  border:1px solid rgba(127,118,108,.28);border-radius:9px;background:rgba(255,255,255,.08);
  color:inherit;font:700 11px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer;user-select:none;
}
body.reader-page .reader-animation-control input{width:15px;height:15px;margin:0;accent-color:var(--reader-accent,#9d6b4a)}
body.reader-page .reader-animation-control span{white-space:nowrap}
.reader-scene-desk-light .reader-animation-control,.reader-scene-minimal-light .reader-animation-control{background:#fff;border-color:rgba(91,76,63,.20);color:#4f463e}
@media(max-width:900px){
  body.reader-page .reader-animation-control{
    position:fixed;left:max(10px,env(safe-area-inset-left));bottom:max(64px,calc(52px + env(safe-area-inset-bottom)));
    z-index:165;min-height:42px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.94)!important;
    color:#4f463e!important;box-shadow:0 6px 20px rgba(30,25,20,.16);backdrop-filter:blur(8px);
  }
  body.reader-page .reader-animation-control input{width:16px;height:16px}
  body.reader-page .reader-animation-control span{font-size:11px}
}
@media(max-width:380px){
  body.reader-page .reader-animation-control{padding:8px 9px;gap:5px}
  body.reader-page .reader-animation-control span{font-size:10px}
}

/* Syllabuild Science interactive layer — reader behavior above is intentionally unchanged. */
.science-reader-interactive{font-size:17px;text-decoration:none}.science-activity-top .science-mode-label{font-size:12px;opacity:.72}.science-activity-shell{min-height:calc(100vh - 58px);background:linear-gradient(135deg,#f5f1eb,#edf3ef);padding:22px;overflow:auto}.science-activity-main{max-width:1180px;margin:0 auto;background:#fff;border:1px solid #ded8cf;border-radius:20px;min-height:640px;box-shadow:0 20px 60px rgba(61,52,45,.09);padding:22px}.science-activity-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #ebe5dc;padding-bottom:15px;margin-bottom:22px}.science-activity-tabs button{border:1px solid #ded8cf;background:#fff;border-radius:999px;padding:10px 16px;font-weight:800;color:#4a4038}.science-activity-tabs button.active{background:#b96e74;color:white;border-color:#b96e74}.science-kicker{font-size:11px;letter-spacing:.16em;font-weight:900;color:#9d6a6e}.science-learn-grid,.science-explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.science-learn-grid h1{font-family:Georgia,serif;font-size:clamp(38px,5vw,68px);line-height:1;margin:.2em 0;color:#423631}.science-learn-grid p,.science-info-card p{font-size:17px;line-height:1.7;color:#71645c}.science-organ-hero,.science-organ-stage{min-height:480px;border-radius:18px;background:#fbf8f4;display:grid;place-items:center;padding:24px}.science-organ-hero img,.science-organ-stage img{max-height:450px;max-width:100%;object-fit:contain}.science-return-reader{display:inline-flex;margin-top:12px;border:1px solid #cbbfb5;border-radius:999px;padding:11px 16px;font-weight:800;color:#54483f}.science-info-card h2,.science-build-head h2,.science-quiz-card h2{font-family:Georgia,serif;font-size:36px;margin:8px 0 10px}.science-organ-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.science-organ-list button{border:1px solid #ddd5cb;background:white;border-radius:12px;padding:12px;text-align:left;font-weight:800}.science-organ-list button.active{background:#f5e8e7;border-color:#c98085}.science-build-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.science-build-head>strong{background:#f3e6e4;border-radius:999px;padding:9px 14px;color:#8b5559}.science-build-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.science-build-board{position:relative;min-height:570px;border-radius:18px;background:#fbf8f4;display:grid;place-items:center;overflow:hidden}.science-build-board>img{max-height:535px;opacity:.18}.science-build-board [data-drop-target]{position:absolute;transform:translate(-50%,-50%);border:2px dashed #b96e74;background:rgba(255,255,255,.9);border-radius:12px;padding:8px 10px;font-size:11px;font-weight:800;color:#7c4e52}.science-build-board [data-drop-target].correct{border-style:solid;background:#eaf5ec;color:#316446}.science-piece-tray{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}.science-piece-tray [data-piece]{min-height:135px;border:1px solid #ddd5cb;background:white;border-radius:15px;padding:10px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.science-piece-tray [data-piece] img{height:84px;max-width:120px;object-fit:contain}.science-piece-tray [data-piece].selected{outline:3px solid #dca0a4;background:#fff8f7}.science-piece-tray [data-piece].done{opacity:.45}.science-build-feedback,.science-preview-lock{grid-column:1/-1;border-radius:12px;padding:12px 14px;background:#f4eee7;color:#62564e}.science-preview-lock{background:#fff7e7;border:1px solid #ead7ad}.science-preview-lock a{font-weight:900;text-decoration:underline}.science-quiz-card{max-width:720px;margin:40px auto}.science-quiz-card>button{display:block;width:100%;margin:9px 0;border:1px solid #ddd5cb;background:#fff;border-radius:13px;padding:14px;text-align:left;font-weight:800}.science-quiz-card>button.correct{background:#eaf5ec;border-color:#79aa86}.science-quiz-card>button.wrong{background:#fff0ef;border-color:#d58b86}.science-quiz-card [data-quiz-feedback]{font-weight:800}.science-product-badges{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}.science-pdf-info{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.science-pdf-info>div{border:1px solid #eadfd6;border-radius:12px;padding:11px;background:#fffdfa}.science-pdf-info small{display:block;color:#89776c;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.science-pdf-info strong{display:block;margin-top:3px;font-size:13px}.science-product-settings{border-left:4px solid var(--bo-accent,#b96e74)}
@media(max-width:800px){.science-activity-shell{padding:8px}.science-activity-main{border-radius:14px;padding:14px}.science-learn-grid,.science-explore-grid,.science-build-grid{grid-template-columns:1fr}.science-organ-hero,.science-organ-stage{min-height:360px}.science-organ-hero img,.science-organ-stage img{max-height:330px}.science-build-board{min-height:430px}.science-build-board>img{max-height:405px}.science-piece-tray{grid-template-columns:1fr 1fr}.science-product-badges{gap:5px}.science-pdf-info{grid-template-columns:1fr 1fr}.science-mode-label{display:none}}


/* ===== Syllabuild Science reader palette v0.2.1 ===== */
body.reader-page .reader-top,
body.reader-page .reader-toolbar{border-color:color-mix(in srgb,var(--reader-accent,var(--accent)) 16%,var(--line))!important}
body.reader-page .reader-action:hover,
body.reader-page .reader-button:hover{border-color:color-mix(in srgb,var(--reader-accent,var(--accent)) 44%,var(--line))!important}


/* ===== Syllabuild Science cohesive reader chrome v0.2.2 ===== */
body.reader-page{
  --science-navy:#183b52;--science-blue:#2f9fb4;--science-aqua:#76cfca;--science-gold:#c8a45e;
}
body.reader-page .reader-top{
  background:rgba(251,254,255,.96)!important;color:var(--science-navy)!important;
  border-bottom:1px solid rgba(47,159,180,.16)!important;box-shadow:0 5px 20px rgba(24,59,82,.06)!important;
  backdrop-filter:blur(12px)!important;
}
body.reader-page .stage{
  background:
    radial-gradient(circle at 50% 38%,#ffffff 0%,#edf8f9 54%,#dceff2 100%)!important;
}
body.reader-page .reader-bottom{
  background:rgba(251,254,255,.94)!important;color:var(--science-navy)!important;border-top-color:rgba(47,159,180,.14)!important;
  backdrop-filter:blur(12px)!important;
}
body.reader-page .reader-action,body.reader-page .reader-button,body.reader-page .nav-arrow{
  border-color:rgba(47,159,180,.18)!important;color:var(--science-navy)!important;
}
body.reader-page .reader-action:hover,body.reader-page .reader-button:hover,body.reader-page .nav-arrow:hover{
  background:#e6f7f5!important;border-color:rgba(47,159,180,.34)!important;
}
body.reader-page .thumb.active{outline-color:var(--science-blue)!important}
body.reader-page .science-reader-interactive{
  background:linear-gradient(135deg,var(--science-blue),#3caabd)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 5px 16px rgba(47,159,180,.20)!important;
}
body.reader-page .reader-copyright{background:rgba(242,250,251,.82)!important;color:#617e8a!important}

/* Interactive activity layer mirrors storefront/back office. */
.science-activity-shell{background:linear-gradient(135deg,#f7fcfc,#e8f6f6)!important}
.science-activity-main{border-color:rgba(47,159,180,.16)!important;box-shadow:0 20px 60px rgba(24,59,82,.09)!important}
.science-activity-tabs{border-bottom-color:rgba(47,159,180,.12)!important}
.science-activity-tabs button{border-color:rgba(47,159,180,.18)!important;color:var(--science-navy)!important}
.science-activity-tabs button.active{background:var(--science-blue)!important;border-color:var(--science-blue)!important;color:#fff!important}
.science-kicker{color:var(--science-blue-deep,#21778f)!important}
.science-learn-grid h1,.science-info-card h2,.science-build-head h2,.science-quiz-card h2{color:var(--science-navy)!important}
.science-learn-grid p,.science-info-card p{color:#607e8b!important}
.science-organ-hero,.science-organ-stage,.science-build-board{background:#f2fafb!important}
.science-organ-list button,.science-piece-tray [data-piece],.science-quiz-card>button{border-color:rgba(47,159,180,.16)!important}
.science-organ-list button.active,.science-piece-tray [data-piece].selected{background:#e6f7f5!important;border-color:var(--science-blue)!important}
.science-build-board [data-drop-target]{border-color:var(--science-blue)!important;color:#277487!important}
.science-build-head>strong{background:#e6f7f5!important;color:#277487!important}
.science-build-feedback{background:#eef8f8!important;color:#526f7b!important}

/* ===== Reader identity aligned with Syllabuild Science v0.2.3 ===== */
body.reader-page{--science-navy:#143e66;--science-blue:#0b93b6;--science-teal:#16afc2}
.reader-toolbar{background:rgba(255,255,255,.96)!important;border-color:#d1e8ee!important;box-shadow:0 8px 28px rgba(20,62,102,.09)!important}
.reader-toolbar button,.reader-toolbar a{color:#214f6e!important}
.reader-toolbar button:hover,.reader-toolbar a:hover{background:#e9f8fa!important;color:#0a4c83!important}
.reader-stage{background:radial-gradient(circle at center,#ffffff 0%,#eef8fa 64%,#dceef2 100%)!important}
.reader-interactive-button,.science-interactive-trigger{background:linear-gradient(135deg,#0b93b6,#16afc2)!important;color:#fff!important;border:0!important;box-shadow:0 8px 22px rgba(11,147,182,.22)!important}

/* v0.2.6 — Science reader first-spread parity
   Page 1 is the left page of the first desktop spread; do not reserve a blank
   book-cover leaf before it. This rule also protects against older theme CSS. */
@media (min-width:901px){
  body.reader-page .book-frame.first-spread .base-sheet.left{
    display:block!important;
    left:0!important;
    right:auto!important;
  }
  body.reader-page .book-frame.first-spread .base-sheet.right{
    display:block!important;
    right:0!important;
    left:auto!important;
  }
}

/* Syllabuild Science v0.2.7 — universal page activity engine */
.science-reader-interactive[hidden]{display:none!important}
.science-universal-main{max-width:1240px}
.science-activity-nav{display:flex;gap:10px;overflow:auto;padding:2px 2px 16px;margin-bottom:18px;border-bottom:1px solid rgba(47,159,180,.13);scrollbar-width:thin}
.science-activity-nav a{flex:0 0 auto;display:grid;gap:2px;min-width:150px;padding:10px 13px;border:1px solid rgba(47,159,180,.18);border-radius:13px;background:#fff;color:var(--science-navy,#183b52);text-decoration:none}
.science-activity-nav a small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6a8995;font-weight:800}
.science-activity-nav a b{font-size:13px}
.science-activity-nav a.active{background:#e6f7f5;border-color:var(--science-blue,#2f9fb4);box-shadow:0 8px 22px rgba(47,159,180,.12)}
.science-universal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
.science-universal-head h1{font-family:Georgia,serif;color:var(--science-navy,#183b52);font-size:clamp(32px,4vw,54px);line-height:1.05;margin:7px 0 8px}
.science-universal-head p{max-width:760px;margin:0;color:#607e8b;font-size:16px;line-height:1.6}
.universal-build-grid{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr)}
.universal-build-board{aspect-ratio:8.5/11;min-height:0!important;background:#eef8f9!important;border:1px solid rgba(47,159,180,.16)}
.universal-build-board>img{width:100%;height:100%;max-height:none!important;object-fit:contain;opacity:.72!important;filter:saturate(.92)}
.universal-build-board [data-drop-target]{width:44px;height:44px;padding:0!important;display:grid;place-items:center;border-radius:50%!important;background:rgba(255,255,255,.96)!important;box-shadow:0 6px 18px rgba(24,59,82,.13);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.universal-build-board [data-drop-target] span{font-size:17px;font-weight:900}
.universal-build-board [data-drop-target] b{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);white-space:nowrap;padding:3px 6px;border-radius:6px;background:#fff;color:#316446;font-size:10px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.universal-build-board [data-drop-target].drag-over{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 5px rgba(47,159,180,.18)}
.universal-build-board [data-drop-target].wrong{background:#fff0ef!important;border-color:#d66f69!important;animation:scienceTargetShake .28s linear}
@keyframes scienceTargetShake{25%{margin-left:-5px}75%{margin-left:5px}}
.universal-piece-tray{grid-template-columns:1fr!important}
.universal-piece-tray [data-piece]{min-height:58px!important;display:flex!important;flex-direction:row!important;justify-content:flex-start!important;gap:10px!important;padding:10px 13px!important;cursor:grab;touch-action:manipulation}
.universal-piece-tray [data-piece]:active{cursor:grabbing}
.universal-piece-tray [data-piece] .science-drag-handle{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#edf8f9;color:#277487;font-weight:900}
.science-build-background-lock{display:grid;place-items:center;gap:8px;min-height:420px;color:#607e8b;text-align:center;padding:20px}
.science-build-background-lock b{font-size:22px;color:var(--science-navy,#183b52)}
.science-sequence-card{max-width:900px;margin:0 auto;border:1px solid rgba(47,159,180,.16);border-radius:18px;background:#fbfeff;padding:22px}
.science-sequence-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}
.science-sequence-head h2{font-family:Georgia,serif;color:var(--science-navy,#183b52);font-size:34px;margin:6px 0 8px}
.science-sequence-head p{margin:0;color:#607e8b;line-height:1.55}
.science-sequence-head>strong{flex:0 0 auto;background:#e6f7f5;border-radius:999px;padding:9px 14px;color:#277487}
.science-sequence-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.science-sequence-list li{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;min-height:58px;border:1px solid rgba(47,159,180,.18);border-radius:12px;background:#fff;padding:8px 10px;cursor:grab;box-shadow:0 2px 8px rgba(24,59,82,.04);transition:border-color .15s ease,background .15s ease,transform .15s ease}
.science-sequence-list li.dragging{opacity:.55;transform:scale(.99)}
.science-sequence-list li.drag-over{border-color:var(--science-blue,#2f9fb4);box-shadow:0 0 0 3px rgba(47,159,180,.12)}
.science-sequence-list li.correct{background:#edf8ef;border-color:#76b184}
.science-sequence-list li.wrong{background:#fff6f5;border-color:#dfa09c}
.science-sequence-number{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#edf8f9;color:#277487;font-weight:900}
.science-sequence-label{font-weight:800;color:var(--science-navy,#183b52)}
.science-sequence-controls{display:flex;gap:5px}
.science-sequence-controls button,.science-sequence-actions button{border:1px solid rgba(47,159,180,.2);background:#fff;color:#277487;border-radius:9px;min-width:36px;min-height:34px;font-weight:900;cursor:pointer}
.science-sequence-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.science-sequence-actions .science-action-primary{padding:9px 16px;background:linear-gradient(135deg,var(--science-blue,#2f9fb4),#3caabd);color:#fff;border-color:transparent}
.science-sequence-actions [data-sequence-feedback]{font-weight:800;color:#526f7b}
@media(max-width:800px){
  .science-universal-head,.science-sequence-head{display:block}
  .science-universal-head .science-return-reader{margin-top:13px}
  .universal-build-grid{grid-template-columns:1fr}
  .universal-build-board [data-drop-target]{width:38px;height:38px}
  .science-sequence-card{padding:14px;border-radius:14px}
  .science-sequence-head>strong{display:inline-flex;margin-top:8px}
  .science-sequence-list li{grid-template-columns:34px 1fr auto;padding:7px;min-height:54px}
  .science-sequence-controls button{min-width:32px;padding:0}
}

/* ===== Syllabuild Science v0.3.0 — system-generated page chrome =====
   Branding, publication title, footer credit and page number are rendered by
   the reader so source PDFs remain content-only and can be reordered safely. */
/* Keep the original absolute positioning from app.css; changing it to relative
   stacks the right sheet below the left sheet on desktop. */
body.reader-page .base-sheet{isolation:isolate;}
body.reader-page .science-page-chrome{
  position:absolute!important;
  inset:0!important;
  z-index:24!important;
  pointer-events:none!important;
  color:#19375f;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.reader-page .science-page-header,
body.reader-page .science-page-footer{
  position:absolute!important;
  left:0!important;
  right:0!important;
  min-height:24px!important;
  padding:5px 15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  background:rgba(255,255,255,.93)!important;
  box-sizing:border-box!important;
  font-size:8px!important;
  line-height:1.15!important;
  letter-spacing:.035em!important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
body.reader-page .science-page-header{
  top:0!important;
  border-bottom:1px solid rgba(20,71,109,.18)!important;
}
body.reader-page .science-page-footer{
  bottom:0!important;
  border-top:1px solid rgba(20,71,109,.18)!important;
}
body.reader-page .science-page-brand{
  font-weight:800!important;
  color:#164d74!important;
  white-space:nowrap!important;
}
body.reader-page .science-page-title{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-align:right!important;
  font-weight:650!important;
  color:rgba(29,49,74,.72)!important;
  letter-spacing:.005em!important;
}
body.reader-page .science-page-credit{
  font-weight:650!important;
  color:rgba(29,49,74,.68)!important;
  letter-spacing:.01em!important;
}
body.reader-page .science-page-number{
  display:grid!important;
  place-items:center!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:#164d74!important;
  color:#fff!important;
  font-size:9px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:0!important;
}
body.reader-page .base-sheet>.science-page-chrome{z-index:24!important;}
@media(max-width:900px){
  body.reader-page .science-page-header,
  body.reader-page .science-page-footer{
    min-height:20px!important;
    padding:4px 10px!important;
    font-size:7px!important;
  }
  body.reader-page .science-page-number{
    min-width:18px!important;
    height:18px!important;
    font-size:8px!important;
  }
}


/* ===== Syllabuild Science v0.3.2 — NON-CROP PDF SAFE AREA =====
   Never crop uploaded PDF artwork. Page rasters and high-res PDF canvases are
   always contained at their native aspect ratio. When system header/footer is
   enabled, the page is scaled down into the space between them rather than
   hidden underneath them. */
body.reader-page .base-sheet,
body.reader-page .turn-face{
  overflow:hidden!important;
  background:#fff!important;
}
body.reader-page .base-sheet>img,
body.reader-page .turn-face>img,
body.reader-page .base-sheet>canvas.reader-hires-layer,
body.reader-page .turn-face>canvas.reader-hires-layer{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  box-sizing:border-box!important;
  background:#fff!important;
}
body.reader-page .science-has-page-chrome>img,
body.reader-page .science-has-page-chrome>canvas.reader-hires-layer{
  top:24px!important;
  bottom:24px!important;
  height:calc(100% - 48px)!important;
}
@media(max-width:900px){
  body.reader-page .science-has-page-chrome>img,
  body.reader-page .science-has-page-chrome>canvas.reader-hires-layer{
    top:20px!important;
    bottom:20px!important;
    height:calc(100% - 40px)!important;
  }
}


/* ===== Syllabuild Science v0.3.3 — PAGE-ROLE TEMPLATES =====
   FRONT COVER and INTERIOR CONTENT intentionally use different templates.
   The source PDF is always contained in a reserved safe area; never crop it. */
body.reader-page .science-cover-chrome{
  position:absolute!important;
  inset:0!important;
  z-index:24!important;
  pointer-events:none!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body.reader-page .science-cover-header,
body.reader-page .science-cover-footer{
  position:absolute!important;
  left:0!important;
  right:0!important;
  height:38px!important;
  padding:0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  box-sizing:border-box!important;
  background:#0b355f!important;
  color:#fff!important;
}
body.reader-page .science-cover-header{top:0!important;border-bottom:4px solid #1aa6b8!important;}
body.reader-page .science-cover-footer{bottom:0!important;border-top:4px solid #1aa6b8!important;}
body.reader-page .science-cover-brand{font-size:10px!important;font-weight:850!important;letter-spacing:.08em!important;}
body.reader-page .science-cover-credit{font-size:7px!important;font-weight:650!important;opacity:.82!important;}
body.reader-page .science-cover-tagline{font-size:8px!important;font-weight:800!important;letter-spacing:.035em!important;}
body.reader-page .science-cover-badge{
  padding:4px 9px!important;border-radius:999px!important;background:#fff!important;color:#0b355f!important;
  font-size:7px!important;font-weight:850!important;letter-spacing:.04em!important;
}
/* Cover artwork sits BETWEEN the two cover bars. Full PDF remains visible. */
body.reader-page .science-cover-page>img,
body.reader-page .science-cover-page>canvas.reader-hires-layer{
  top:38px!important;
  bottom:38px!important;
  height:calc(100% - 76px)!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#fff!important;
}
/* Interior pages keep the compact v0.3.2 content template. */
body.reader-page .science-has-page-chrome>img,
body.reader-page .science-has-page-chrome>canvas.reader-hires-layer{
  object-fit:contain!important;
  object-position:center center!important;
}
@media(max-width:900px){
  body.reader-page .science-cover-header,
  body.reader-page .science-cover-footer{height:30px!important;padding:0 10px!important;border-width:3px!important;}
  body.reader-page .science-cover-brand{font-size:8px!important;}
  body.reader-page .science-cover-credit,body.reader-page .science-cover-badge{font-size:6px!important;}
  body.reader-page .science-cover-tagline{font-size:6.5px!important;}
  body.reader-page .science-cover-page>img,
  body.reader-page .science-cover-page>canvas.reader-hires-layer{
    top:30px!important;bottom:30px!important;height:calc(100% - 60px)!important;
  }
}