.science-scene { width:100%; min-width:0; color:#365344; container-type:inline-size; container-name:science-book; }
.science-scene__heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 9px 12px; }
.science-scene__title { font-size:15px; letter-spacing:.035em; font-weight:600; }
.science-scene__badge { padding:3px 9px; border:1px solid #dae5d2; background:#f2f7ec; border-radius:20px; color:#7a8e70; font-size:10px; }
.science-scene__board { position:relative; width:100%; min-width:0; min-height:260px; isolation:isolate; background:radial-gradient(ellipse at 45% 35%,#e6eedb70,transparent 71%); border-radius:20px; outline-offset:0; touch-action:pan-y pinch-zoom; }
.science-scene__board:focus-visible { outline:2px solid #9cb78b; }
.science-book-binding { position:absolute; z-index:-1; left:2%; top:28px; width:45%; height:280px; border-radius:5px 12px 9px 5px; border:1px solid #d5e0c9; background:linear-gradient(90deg,#bfd0ad 0,#dce8cf 4%,#eaf1e1 8%,#f2f5e9 43%,#d7e2ca 49%,#f7f9ee 54%,#ebf1df 100%); transform:rotate(-4deg); box-shadow:0 13px 25px #354c3112; pointer-events:none; }
.science-book-binding::before, .science-book-binding::after { content:''; position:absolute; inset:4px -4px -4px 5px; border:1px solid #e1e5d7; border-radius:4px 9px 9px 4px; background:#fffef6; z-index:-1; }
.science-book-binding::after { inset:8px -7px -7px 9px; background:#f1f4e9; z-index:-2; }
.science-book-binding__spine { position:absolute; writing-mode:vertical-rl; left:9px; top:21px; color:#789367; font-size:9px; letter-spacing:.17em; }
.science-book-binding__edition { position:absolute; bottom:15px; left:32px; font-size:8px; letter-spacing:.12em; color:#92a27f; }
.science-scene--wide .science-book-binding { left:calc(50% - 350px); width:220px; height:250px; }
@container science-book (min-width:560px) and (max-width:732px) {
  .science-scene--wide .science-book-binding { left:12px; width:calc((100% - 72px)/3); height:220px; }
}
.science-book-page { position:absolute; left:0; top:0; width:240px; height:290px; pointer-events:none; }
.science-book-page[hidden] { display:none!important; }
.science-book-page.is-extracted { z-index:2; }
.science-book-page:hover, .science-book-page:focus-within { z-index:5; }
.science-book-paper { position:relative; display:flex; flex-direction:column; width:100%; height:100%; min-width:0; margin:0; padding:6px; border:1px solid #e0e5d7; border-radius:3px 3px 8px 3px; background:#fffef9; color:#47613f; box-shadow:0 7px 18px #34483214,0 2px 3px #34483206; font:inherit; text-align:left; cursor:pointer; pointer-events:auto; }
.science-book-page--0 .science-book-paper { border-left-color:#c5d5b4; box-shadow:-5px 0 6px #44603308,0 9px 22px #34483216; }
.science-book-paper::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(100deg,#d7dfcc19 0,transparent 7%,transparent 90%,#f1f1e820); }
.science-book-paper:hover, .science-book-paper:focus-visible { border-color:#abc095; box-shadow:0 12px 27px #34483220; }
.science-book-paper:focus-visible { outline:2px solid #87a675; outline-offset:4px; }
.science-book-paper .figure-image-viewport { display:block; flex:1 1 auto; width:100%; height:calc(100% - 47px); min-height:0; overflow:hidden; background:#fff; border-radius:1px; }
.science-book-paper .figure-image-viewport svg, .science-book-paper .figure-image-viewport img { display:block; width:100%; height:100%; object-fit:contain; }
.science-book-page__caption { display:flex; flex-direction:column; justify-content:center; flex:0 0 47px; gap:4px; min-width:0; padding:5px 4px 1px; }
.science-book-page__title { display:block; margin:0; color:#50694a; font-size:12px; font-weight:550; line-height:1.5; overflow-wrap:anywhere; }
.science-book-page--0 .science-book-page__title { font-size:12px; }
.science-book-page__number { display:block; color:#96a089; font-size:9px; letter-spacing:.08em; line-height:1.3; }
.science-scene__footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:10px 8px 0; }
.science-scene__note { margin:0; font-size:10px; color:#87917d; line-height:1.6; }
.science-scene__controls { display:flex; align-items:center; gap:6px; }
.science-scene__control { appearance:none; min-height:34px; min-width:34px; padding:5px 10px; border:1px solid #dbe4d2; border-radius:8px; background:#f8fbf1; color:#6c845f; font:inherit; font-size:11px; cursor:pointer; }
.science-scene__control:hover { background:#eaf3df; border-color:#b5c8a3; }
.science-scene__control:focus-visible { outline:2px solid #8da97a; outline-offset:3px; }
.science-scene__control:disabled { opacity:.45; cursor:default; }
.science-scene__position { min-width:43px; margin-left:3px; font-size:10px; font-variant-numeric:tabular-nums; color:#92a086; }
.science-scene__board--empty { display:grid; place-items:center; min-height:240px; }
.science-scene__empty { color:#8c9780; font-size:13px; }
.science-scene__board--tutorial { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(225px,auto)); gap:28px 24px; padding:12px; min-height:0; background:none; }
.science-scene__board--tutorial .science-book-page { position:relative; inset:auto; width:auto; height:auto; min-height:0; }
.science-scene__board--tutorial .science-book-page--0 { grid-column:1; grid-row:1; transform:rotate(-2deg); }
.science-scene__board--tutorial .science-book-page--1 { grid-column:2; grid-row:1; transform:rotate(2deg); }
.science-scene__board--tutorial .science-book-page--2 { grid-column:2; grid-row:2; transform:rotate(-1deg); }
.science-scene__board--tutorial .science-book-page--3 { grid-column:1; grid-row:2; transform:rotate(2deg); }
.science-scene__board--tutorial .science-book-paper { padding:15px 14px; background:#f7faee; cursor:default; }
.science-scene__board--tutorial .science-book-page.is-extracted .science-book-paper { background:#eef5e3; border-color:#b1c69e; }
.science-scene__board--tutorial .science-book-page__title { font-size:13px; margin-top:8px; }
.science-book-page__copy { margin:7px 0 0; color:#89967d; font-size:11px; line-height:1.75; }
.science-workflow-art { display:block; width:100%; height:86px; flex:0 0 86px; margin-top:8px; }
.science-scene__connections { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:-1; }
.science-scene--static .science-scene__board:not(.science-scene__board--tutorial) { display:flex; flex-wrap:wrap; gap:20px; padding:15px; }
.science-scene--static .science-book-page:not(.science-book-page--step) { position:relative; flex:1 1 160px; height:auto; }
.science-scene--static .science-book-paper .figure-image-viewport { height:auto; }
@container science-book (max-width:440px) {
  .science-scene__heading { padding-inline:4px; }
  .science-scene__title { font-size:14px; }
  .science-book-binding { left:2%; top:30px; width:45%; height:210px; transform:rotate(-4deg); }
  .science-book-paper { padding:6px; }
  .science-book-page__title { font-size:11px; }
  .science-book-page--0 .science-book-page__title { font-size:11px; }
  .science-book-page__number { font-size:8px; }
  .science-scene__control { min-height:40px; min-width:40px; }
  .science-scene__board--tutorial { gap:25px 20px; padding:10px; }
  .science-scene__board--tutorial { grid-template-rows:repeat(2,minmax(275px,auto)); }
  .science-scene__board--tutorial .science-book-paper { padding:12px 9px; }
  .science-scene__board--tutorial .science-book-page__title { font-size:12px; }
  .science-book-page__copy { font-size:11px; }
  .science-scene__footer { padding-inline:3px; }
}
.science-scene--single .science-book-binding { left:4%; top:22px; width:90%; height:250px; max-height:calc(100% - 38px); }
.science-scene--single .science-book-page__title { font-size:13px; }
.science-scene--single .science-scene__board--tutorial { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(250px,auto); padding:14px; gap:0; }
.science-scene--single .science-scene__board--tutorial .science-book-page { grid-column:1; grid-row:1; transform:none; }
.science-scene--single .science-scene__board--tutorial .science-book-page__title { font-size:14px; }
.science-scene--single .science-scene__connections { display:none; }
.science-scene--single .science-book-page__copy { font-size:12px; }
.science-scene--single .science-scene__position { color:#61794f; }
@media(prefers-reduced-motion:reduce) {
  .science-book-paper { scroll-behavior:auto; }
}