:root {
  color-scheme: dark;
  --ink: #f0eadc;
  --muted: #b7b7a9;
  --gold: #c8a76a;
  --deep: #101716;
  --glass: rgba(13, 20, 19, 0.78);
  --line: rgba(226, 214, 184, 0.22);
  --font-reading: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --font-sutra: "FangSong SC", "STFangsong", "FangSong", "Songti SC", "STSong", serif;
  --font-brush: "Kaiti SC", "STKaiti", "KaiTi", "FangSong SC", "STFangsong", serif;
  --reader-font-scale: 1;
  --reader-line-scale: 1;
  --parallax-x: 0px;
  --parallax-y: 0px;
  font-family: var(--font-reading);
  background: var(--deep);
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--deep); color: var(--ink); }
body { overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #e8c884; outline-offset: 4px; }

.image-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #101716; }
.stage-image, .blur-stage { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); }
.stage-image { object-fit: cover; opacity: 0; transform: translate(var(--parallax-x), var(--parallax-y)) scale(1.025); transition: opacity .9s ease, transform 4s ease; }
.stage-image.is-visible { opacity: 1; }
.blur-stage { display: none; background: center / cover no-repeat; filter: blur(30px) brightness(.42); transform: scale(1.12); }
.stage-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,11,10,.72), rgba(6,11,10,.16) 48%, rgba(6,11,10,.3)), linear-gradient(0deg, rgba(6,10,9,.38), transparent 48%, rgba(6,10,9,.2)); }

.site-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 24px clamp(22px,4vw,64px); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; letter-spacing: .16em; background: linear-gradient(rgba(6,10,9,.62), transparent); }
.brand { text-decoration: none; font-weight: 700; }
.site-header nav { display: flex; align-items: center; gap: 22px; }
.site-header nav a, .text-button { color: var(--ink); text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer; }
.reward-nav-button { color: #e2c47f; }
.narration-button { display: flex; align-items: center; gap: 9px; color: var(--ink); background: rgba(10,16,15,.58); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.sound-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.narration-button.is-playing .sound-dot { animation: pulse 1.8s infinite; }
@keyframes pulse { 60% { box-shadow: 0 0 0 8px rgba(200,167,106,0); } }

.chapter-progress { position: fixed; z-index: 18; right: clamp(22px,4vw,64px); top: 50%; display: grid; justify-items: center; gap: 8px; transform: translateY(-50%); font-family: ui-monospace, monospace; color: var(--gold); }
.chapter-progress span { font-size: 13px; }
.chapter-progress i { display: block; width: 1px; height: 64px; background: linear-gradient(var(--gold), rgba(200,167,106,.16)); }
.chapter-progress strong { color: rgba(240,234,220,.62); font-size: 10px; font-weight: 400; }

.chapter-drawer { position: fixed; z-index: 30; inset: 0 0 0 auto; width: min(430px,92vw); padding: 28px; background: rgba(11,18,17,.97); border-left: 1px solid var(--line); backdrop-filter: blur(24px); transform: translateX(105%); transition: transform .4s cubic-bezier(.22,.8,.2,1); overflow-y: auto; }
.chapter-drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.drawer-head div { display: grid; gap: 5px; }
.drawer-head span { font: 10px/1.2 ui-sans-serif,system-ui; letter-spacing: .2em; color: var(--gold); }
.drawer-head strong { font-size: 26px; letter-spacing: .12em; }
.drawer-head button { color: var(--ink); background: none; border: 0; font-size: 32px; line-height: 1; cursor: pointer; }
.chapter-links { display: grid; grid-template-columns: 1fr; gap: 1px; margin: 22px 0; background: var(--line); }
.chapter-links a { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: start; gap: 10px; min-height: 70px; padding: 14px 12px; background: #111a18; text-decoration: none; }
.chapter-links a:hover { background: #1b2723; }
.chapter-links span { padding-top: 3px; font: 10px/1 ui-monospace,monospace; color: var(--gold); }
.chapter-links div { display: grid; gap: 5px; min-width: 0; }
.chapter-links strong { font-family: var(--font-brush); font-size: 15px; font-weight: 400; letter-spacing: .06em; }
.chapter-links small { display: -webkit-box; overflow: hidden; color: #979b92; font: 11px/1.55 ui-sans-serif,system-ui; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.chapter-drawer > p { color: var(--muted); font-size: 13px; line-height: 1.8; }

.reading-tools { position: fixed; z-index: 26; left: clamp(18px,3vw,42px); bottom: 28px; font-family: ui-sans-serif,system-ui; }
.reading-toggle { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 9px 14px 9px 10px; color: var(--ink); border: 1px solid rgba(226,214,184,.3); border-radius: 999px; background: rgba(11,18,17,.88); backdrop-filter: blur(18px); box-shadow: 0 12px 36px rgba(0,0,0,.3); cursor: pointer; }
.reading-toggle span { display: grid; place-items: center; width: 27px; height: 27px; color: #171c1a; border-radius: 50%; background: #d9bb79; font-family: var(--font-brush); font-size: 17px; }
.reading-toggle strong { font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.reading-panel { position: absolute; left: 0; bottom: 56px; width: min(300px,calc(100vw - 28px)); padding: 20px; border: 1px solid rgba(226,214,184,.28); background: rgba(10,17,15,.96); box-shadow: 0 22px 70px rgba(0,0,0,.48); backdrop-filter: blur(22px); opacity: 0; visibility: hidden; transform: translateY(9px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.reading-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.reading-panel-head { display: grid; gap: 5px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.reading-panel-head strong { font-family: var(--font-brush); font-size: 21px; font-weight: 400; letter-spacing: .08em; }
.reading-panel-head small { color: #8f948c; font-size: 10px; }
.reading-panel fieldset { margin: 17px 0 0; padding: 0; border: 0; }
.reading-panel legend { margin-bottom: 9px; color: #b9b7ae; font-size: 11px; letter-spacing: .1em; }
.setting-options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.setting-options button { min-height: 38px; padding: 7px 8px; color: #c8c7bd; border: 1px solid rgba(226,214,184,.18); background: rgba(255,255,255,.025); cursor: pointer; }
.setting-options button[aria-pressed="true"] { color: #171c1a; border-color: #d7b973; background: #d7b973; }

main { position: relative; z-index: 2; }
.scene-section { position: relative; min-height: 108vh; display: flex; align-items: center; padding: 120px clamp(38px,7vw,110px); }
.hero { min-height: 100svh; align-items: flex-end; }
.hero-copy { width: min(710px,72vw); padding-bottom: 6vh; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.eyebrow { margin: 0 0 22px; font: 11px/1.4 ui-sans-serif,system-ui; letter-spacing: .24em; color: #d5be8d; }
.hero h1 { margin: 0; display: grid; font-family: var(--font-brush); font-weight: 400; font-size: clamp(56px,8vw,122px); line-height: 1; letter-spacing: .12em; }
.hero h1 span:last-child { margin-left: .7em; }
.hero blockquote { margin: 34px 0 14px; padding-left: 18px; border-left: 1px solid var(--gold); font-family: var(--font-brush); font-size: clamp(22px,2.4vw,38px); letter-spacing: .15em; }
.invitation { max-width: 540px; color: #e2dfd4; font-size: 15px; line-height: 2; letter-spacing: .05em; }
.reward-hero-button { display: grid; gap: 6px; margin-top: 22px; padding: 12px 16px; color: var(--ink); text-align: left; border: 1px solid rgba(226,200,140,.44); background: rgba(10,16,15,.48); backdrop-filter: blur(12px); cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.reward-hero-button:hover { transform: translateY(-2px); border-color: rgba(226,200,140,.78); background: rgba(18,27,24,.72); }
.reward-hero-button span { color: #e1c27d; font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .17em; }
.reward-hero-button strong { font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.scroll-cue { position: absolute; right: clamp(24px,6vw,88px); bottom: 38px; display: grid; justify-items: center; gap: 10px; text-decoration: none; font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .2em; }
.scroll-cue i { display: block; width: 1px; height: 46px; background: linear-gradient(var(--gold),transparent); }

.chapter-section.copy-right { justify-content: flex-end; }
.chapter-card { width: min(690px,47vw); margin: 7vh 0; padding: clamp(30px,3.6vw,56px); background: var(--glass); border: 1px solid var(--line); box-shadow: 0 28px 100px rgba(0,0,0,.3); backdrop-filter: blur(20px) saturate(.82); }
.chapter-heading { display: flex; align-items: flex-start; gap: 20px; }
.chapter-heading > span { color: var(--gold); font: 56px/.85 Georgia,serif; opacity: .72; }
.chapter-heading p { margin: 0 0 8px; color: var(--gold); font: 9px/1 ui-sans-serif,system-ui; letter-spacing: .2em; }
.chapter-heading h2 { margin: 0; font-family: var(--font-brush); font-weight: 400; font-size: clamp(31px,3vw,50px); line-height: 1.28; letter-spacing: .12em; }
.chapter-focus { margin: 30px 0 26px; padding: 17px 0 17px 20px; border-left: 1px solid var(--gold); color: #f3ead8; font-size: clamp(18px,1.5vw,24px); line-height: 1.65; letter-spacing: .06em; }
.sutra-original { padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sutra-original > span, .plain-reading > span, .keyword-line > span { display: block; margin-bottom: 14px; color: var(--gold); font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .2em; }
.sutra-original p { margin: 0 0 17px; color: #e8e1d2; font-family: var(--font-sutra); font-size: calc(16px * var(--reader-font-scale)); line-height: calc(2.18 * var(--reader-line-scale)); letter-spacing: .055em; white-space: pre-wrap; }
.sutra-original p:last-child { margin-bottom: 0; }
.plain-reading { padding: 26px 0 6px; }
.plain-reading p { margin: 0; color: #e9e2d3; font-size: calc(15px * var(--reader-font-scale)); line-height: calc(1.95 * var(--reader-line-scale)); }
.plain-reading .deeper-reading { margin-top: 12px; color: #bfc1b6; font-size: calc(13px * var(--reader-font-scale)); }
.keyword-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(226,214,184,.13); }
.keyword-line > span { width: 100%; margin-bottom: 3px; }
.keyword-line i { padding: 7px 10px; border: 1px solid rgba(200,167,106,.24); color: #d9d3c5; font: normal 11px/1 ui-sans-serif,system-ui; letter-spacing: .08em; }
.next-chapter { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); text-decoration: none; font: 11px/1 ui-sans-serif,system-ui; letter-spacing: .14em; }
.next-chapter b { color: var(--gold); font-size: 18px; font-weight: 400; }
.chapter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 28px; }
.chapter-action { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 12px; color: #c9c8bf; border: 1px solid rgba(226,214,184,.19); background: rgba(255,255,255,.025); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.chapter-action:hover { color: #ead7a5; border-color: rgba(226,200,140,.5); }
.chapter-action[aria-pressed="true"] { color: #171c1a; border-color: #d7b973; background: #d7b973; }
.chapter-action span { font-size: 15px; }
.chapter-action b { font: 500 11px/1 ui-sans-serif,system-ui; letter-spacing: .08em; }

.closing { min-height: 150vh; align-items: flex-end; padding-bottom: 8vh; }
.closing-panel { width: min(1060px,88vw); margin: 0 auto; padding: clamp(30px,5vw,74px); background: rgba(10,16,15,.84); border: 1px solid var(--line); backdrop-filter: blur(20px); }
.closing h2 { margin: 0 0 48px; font-family: var(--font-brush); font-weight: 400; font-size: clamp(38px,5.6vw,78px); line-height: 1.35; letter-spacing: .06em; }
.analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.analysis-grid article { padding: 24px; background: rgba(15,23,21,.96); }
.analysis-grid span { color: var(--gold); font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .16em; }
.analysis-grid p { margin: 12px 0 0; color: #cbc9bf; font-size: 14px; line-height: 1.9; }
.final-gatha { margin: 56px 0; text-align: center; font-family: var(--font-brush); font-size: clamp(24px,3vw,44px); line-height: 1.9; letter-spacing: .16em; }
.page-links { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.page-links a { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); text-decoration: none; }
.page-links span { color: var(--gold); font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .18em; }
.page-links strong { font-size: 15px; font-weight: 500; }
.source-note { margin: 34px 0 0; color: #96988f; font-size: 11px; line-height: 1.8; }
.reward-invitation { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 42px; margin: 0 0 40px; padding: 32px; border: 1px solid rgba(200,167,106,.3); background: radial-gradient(circle at 10% 20%,rgba(200,167,106,.13),transparent 46%),rgba(15,23,21,.88); }
.reward-invitation .eyebrow { margin-bottom: 10px; }
.reward-invitation h3 { margin: 0 0 12px; font-size: clamp(22px,2.3vw,34px); font-weight: 500; line-height: 1.45; letter-spacing: .05em; }
.reward-invitation > div > p:last-child { max-width: 650px; margin: 0; color: #c8c7bd; font-size: 13px; line-height: 1.9; }
.reward-open-button { min-width: 190px; display: grid; gap: 8px; padding: 18px 22px; color: #161b19; text-align: left; border: 0; background: linear-gradient(135deg,#e6cf9c,#b89150); cursor: pointer; box-shadow: 0 14px 42px rgba(0,0,0,.24); transition: transform .25s ease, box-shadow .25s ease; }
.reward-open-button:hover { transform: translateY(-2px); box-shadow: 0 18px 52px rgba(0,0,0,.34); }
.reward-open-button span { font: 10px/1 ui-sans-serif,system-ui; letter-spacing: .13em; opacity: .72; }
.reward-open-button strong { font-size: 16px; font-weight: 650; letter-spacing: .08em; }
.reward-fab { position: fixed; z-index: 24; right: clamp(20px,3vw,42px); bottom: 28px; display: grid; gap: 3px; min-width: 178px; padding: 12px 16px; color: var(--ink); text-align: left; border: 1px solid rgba(226,214,184,.3); border-radius: 999px; background: rgba(11,18,17,.88); backdrop-filter: blur(18px); box-shadow: 0 12px 36px rgba(0,0,0,.32); opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease, border-color .25s ease; cursor: pointer; }
.reward-fab.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.reward-fab:hover { border-color: rgba(226,200,140,.7); }
.reward-fab span { color: #bcbdb4; font: 9px/1.2 ui-sans-serif,system-ui; letter-spacing: .12em; }
.reward-fab strong { color: #e3c988; font: 600 13px/1.3 ui-sans-serif,system-ui; letter-spacing: .08em; }
.reward-dialog { position: fixed; inset: 0; z-index: 60; width: min(760px,calc(100vw - 36px)); max-height: min(680px,calc(100vh - 36px)); grid-template-columns: minmax(0,1fr) minmax(250px,310px); align-items: center; gap: 38px; margin: auto; padding: clamp(28px,4vw,52px); color: var(--ink); border: 1px solid rgba(226,214,184,.34); background: linear-gradient(135deg,rgba(16,24,22,.99),rgba(9,15,14,.99)); box-shadow: 0 34px 120px rgba(0,0,0,.66); overflow: auto; }
.reward-dialog[open] { display: grid; animation: reward-in .3s ease both; }
.reward-dialog::backdrop { background: rgba(3,7,6,.78); backdrop-filter: blur(9px); }
.reward-close { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; color: #d7d3c8; border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; }
.reward-dialog h2 { margin: 0 0 22px; font-family: var(--font-brush); font-size: clamp(34px,4.2vw,54px); font-weight: 400; line-height: 1.32; letter-spacing: .08em; }
.reward-dialog-copy > p:not(.eyebrow) { margin: 0 0 14px; color: #ceccc2; font-size: 14px; line-height: 1.9; }
.reward-dialog small { color: #969a91; font: 11px/1.7 ui-sans-serif,system-ui; }
.reward-dialog figure { margin: 0; padding: 12px; background: #fff; box-shadow: 0 16px 52px rgba(0,0,0,.38); }
.reward-dialog img { display: block; width: 100%; height: auto; }
.reward-dialog figcaption { padding: 9px 4px 1px; color: #5b554b; text-align: center; font: 11px/1.4 ui-sans-serif,system-ui; letter-spacing: .12em; }
.share-dialog { position: fixed; inset: 0; z-index: 62; width: min(940px,calc(100vw - 36px)); max-height: min(820px,calc(100vh - 36px)); grid-template-columns: minmax(270px,.8fr) minmax(300px,1fr); align-items: center; gap: 34px; margin: auto; padding: clamp(28px,4vw,52px); color: var(--ink); border: 1px solid rgba(226,214,184,.34); background: linear-gradient(135deg,rgba(16,24,22,.99),rgba(9,15,14,.99)); box-shadow: 0 34px 120px rgba(0,0,0,.66); overflow: auto; }
.share-dialog[open] { display: grid; animation: reward-in .3s ease both; }
.share-dialog::backdrop { background: rgba(3,7,6,.82); backdrop-filter: blur(9px); }
.share-close { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; color: #d7d3c8; border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; }
.share-dialog h2 { margin: 0 0 16px; font-family: var(--font-brush); font-size: clamp(34px,4vw,52px); font-weight: 400; line-height: 1.3; letter-spacing: .08em; }
.share-dialog-copy > p:not(.eyebrow) { margin: 0; color: #bfc1b8; font-size: 13px; line-height: 1.8; }
.share-dialog-actions { display: grid; gap: 8px; margin-top: 26px; }
.share-dialog-actions button, .share-dialog-actions a { display: grid; place-items: center; min-height: 44px; padding: 10px 14px; color: #ded9cc; border: 1px solid rgba(226,214,184,.24); background: rgba(255,255,255,.025); text-decoration: none; font: 12px/1 ui-sans-serif,system-ui; letter-spacing: .08em; cursor: pointer; }
.share-dialog-actions button:first-child { color: #171c1a; border-color: #d7b973; background: #d7b973; }
.share-preview-wrap { margin: 0; min-width: 0; }
.share-preview-wrap img { display: block; width: min(100%,390px); max-height: calc(100vh - 100px); margin: auto; object-fit: contain; box-shadow: 0 20px 70px rgba(0,0,0,.5); background: #15201d; }
.page-toast { position: fixed; z-index: 80; top: 84px; left: 50%; max-width: calc(100vw - 32px); padding: 10px 16px; color: #171c1a; border-radius: 999px; background: #ddc383; box-shadow: 0 12px 34px rgba(0,0,0,.3); font: 12px/1.4 ui-sans-serif,system-ui; opacity: 0; pointer-events: none; transform: translate(-50%,-8px); transition: opacity .25s ease, transform .25s ease; }
.page-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
@keyframes reward-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.narration-status { position: fixed; z-index: 25; left: 50%; bottom: 18px; transform: translateX(-50%); min-height: 18px; padding: 7px 12px; border-radius: 999px; color: #d8d4c9; background: rgba(8,13,12,.76); font: 11px/1.4 ui-sans-serif,system-ui; pointer-events: none; }
.narration-status:empty { display: none; }

@media (max-width: 800px) {
  .site-header { padding: 16px 18px; }
  .site-header nav { gap: 12px; }
  .site-header nav > a { display: none; }
  .chapter-progress { display: none; }
  .image-stage .blur-stage { display: block; }
  .stage-image { inset: 0; width: 100%; height: 100%; object-fit: contain; transform: none; }
  .stage-wash { background: linear-gradient(0deg,rgba(6,10,9,.72),rgba(6,10,9,.05) 68%,rgba(6,10,9,.26)); }
  .scene-section { min-height: 100svh; padding: 72svh 16px 50px; align-items: flex-start; }
  .hero { min-height: 100svh; padding: 100px 16px 52px; align-items: flex-end; }
  .hero-copy { width: 100%; padding-bottom: 9vh; }
  .hero h1 { font-size: clamp(48px,16vw,76px); }
  .hero h1 span:last-child { margin-left: 0; }
  .hero blockquote { font-size: 19px; }
  .invitation { font-size: 13px; max-width: 90%; }
  .scroll-cue { right: 18px; bottom: 20px; }
  .chapter-card { width: 100%; margin: 0; padding: 26px 20px; background: rgba(10,16,15,.88); }
  .chapter-heading > span { font-size: 45px; }
  .chapter-heading h2 { font-size: 30px; }
  .chapter-focus { font-size: 19px; }
  .sutra-original p { font-size: calc(15px * var(--reader-font-scale)); line-height: calc(2.15 * var(--reader-line-scale)); letter-spacing: .045em; }
  .plain-reading p { font-size: calc(14px * var(--reader-font-scale)); }
  .closing { min-height: 130svh; padding: 72svh 16px 50px; }
  .closing-panel { width: 100%; padding: 28px 18px; }
  .analysis-grid, .page-links { grid-template-columns: 1fr; }
  .final-gatha { font-size: 23px; text-align: left; }
  .reward-invitation { grid-template-columns: 1fr; gap: 22px; padding: 24px 20px; }
  .reward-open-button { width: 100%; min-width: 0; }
  .reward-hero-button { max-width: 90%; }
  .reward-fab { right: 14px; bottom: 64px; min-width: 168px; padding: 10px 14px; }
  .reading-tools { left: 14px; bottom: 64px; }
  .reading-toggle { min-height: 42px; padding: 7px 12px 7px 8px; }
  .reading-panel { bottom: 52px; }
  .reward-dialog { grid-template-columns: 1fr; gap: 24px; width: calc(100vw - 24px); max-height: calc(100svh - 24px); padding: 36px 20px 22px; }
  .reward-dialog h2 { font-size: 33px; }
  .reward-dialog figure { width: min(280px,100%); margin: 0 auto; }
  .share-dialog { grid-template-columns: 1fr; gap: 24px; width: calc(100vw - 24px); max-height: calc(100svh - 24px); padding: 38px 18px 22px; }
  .share-dialog-copy { order: 2; }
  .share-preview-wrap { order: 1; }
  .share-preview-wrap img { width: min(100%,260px); max-height: 48svh; }
  .chapter-actions { grid-template-columns: 1fr; }
  .narration-status { bottom: 10px; max-width: 88vw; width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .stage-image { transform: none; }
}