/* Scoped choicebook reader; other reader families retain their own styles. */
.choicebook-detail { padding-block: 2rem 4rem; }
.choicebook-detail .choice-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; margin-block: 2rem; }
.choicebook-detail .choice-detail-hero > * { min-width: 0; }
.choicebook-detail .choice-illustration { margin: 0; }
.choicebook-detail .choice-illustration img { display: block; width: 100%; height: auto; border-radius: 1.4rem; box-shadow: 0 12px 32px #243b3424; }
.choicebook-detail h1 { font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.1; }
.choicebook-detail .button { margin: .5rem .6rem .5rem 0; }
.reader-shell.choicebook-shell { --choice-scale: 1; max-width: 48rem; }
.choicebook-shell .choice-scene { margin: 1.5rem 0; padding: clamp(1.1rem, 4vw, 3rem); border: 1px solid var(--line, #d8ddcf); border-radius: 1.5rem; background: var(--paper, #fffefa); }
.choicebook-shell .choice-scene:focus-visible { outline: 3px solid #8670b7; outline-offset: 4px; }
.choicebook-shell .choice-scene h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; }
.choicebook-shell [data-choice-paragraph] { font-size: calc(1.15rem * var(--choice-scale)); line-height: 1.9; margin: 0 0 1em; scroll-margin-top: var(--choice-scroll-top, var(--reading-offset, 24px)); }
.choicebook-shell [data-choice-paragraph]:focus { outline: none; }
.choicebook-shell .choice-illustration { margin: 2rem 0; }
.choicebook-shell .choice-illustration img { display: block; width: 100%; height: auto; border-radius: 1rem; }
.choicebook-shell .choice-links { display: grid; gap: .9rem; margin: 2rem 0 .5rem; }
.choicebook-shell .choice-links a { display: block; padding: 1rem 1.2rem; color: #193d35; border: 1px solid #bcb6a1; border-radius: 1rem; background: linear-gradient(160deg, #fffdf4, #f2ead7); box-shadow: 0 3px 0 #bcb093; font-weight: 700; text-decoration: none; }
.choicebook-shell .choice-links a:hover { background: #fff9e8; }
.choicebook-shell .choice-links a:focus-visible { outline: 3px solid #8670b7; outline-offset: 4px; }
.choicebook-shell .choice-route-panel { padding: 1rem; border-radius: 1rem; background: #f1eee6; }
.choicebook-shell .choice-route-panel ol { padding-left: 1.5rem; }
.choicebook-shell.choice-focus .choice-route-panel { display: none; }
.choicebook-shell [data-choice-notice] { padding: 1rem; border: 1px solid #c6bda8; border-radius: .8rem; }
.choicebook-shell [data-choice-tools] { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.choicebook-shell [data-choice-tools][hidden] { display: none; }
.choicebook-shell [data-choice-tools] button,
.choicebook-shell [data-choice-finish] { min-height: 44px; padding: .65rem .95rem; border: 1px solid #bcb6a1; border-radius: .8rem; color: #193d35; background: linear-gradient(160deg, #fffdf4, #f2ead7); box-shadow: 0 2px 0 #bcb093; font: inherit; font-weight: 600; cursor: pointer; }
.choicebook-shell [data-choice-tools] button:hover:not(:disabled),
.choicebook-shell [data-choice-finish]:hover { background: #fff9e8; }
.choicebook-shell [data-choice-tools] button:focus-visible,
.choicebook-shell [data-choice-finish]:focus-visible { outline: 3px solid #8670b7; outline-offset: 3px; }
.choicebook-shell [data-choice-tools] button:disabled { opacity: .55; box-shadow: none; cursor: default; }
@supports selector(:has(:target)) {
  .choicebook-shell:not(.choicebook-mounted) .choice-scene { display: none; }
  .choicebook-shell:not(.choicebook-mounted):not(:has(.choice-scene:target, .choice-scene :target)) .choice-scene[data-start],
  .choicebook-shell:not(.choicebook-mounted) .choice-scene:target,
  .choicebook-shell:not(.choicebook-mounted) .choice-scene:has(:target) { display: block; }
}
.choicebook-shell.choicebook-mounted .choice-scene:not([hidden]) { display: block; }
.choicebook-shell.choicebook-mounted .choice-scene[hidden] { display: none !important; }
@media (max-width: 520px) {
  .choicebook-shell .choice-scene { border-radius: 1rem; }
  .choicebook-shell [data-choice-tools] button { min-height: 44px; }
  .choicebook-shell .choice-links a { min-height: 48px; }
}
@media (max-width: 760px) {
  .choicebook-detail .choice-detail-hero { grid-template-columns: minmax(0, 1fr); }
  .choicebook-detail .choice-illustration { max-width: 34rem; }
}