.book-reader { --br-ink:var(--kt-294f42); --br-muted:var(--kt-657469); --br-line:var(--ks-dbe4d6); --br-mint:var(--ks-edf4e6); --br-paper:var(--ks-fffef9); max-width:1240px; margin:0 auto; padding-bottom:28px; color:var(--br-ink); }
.book-reader * { box-sizing:border-box; }
.book-reader [hidden] { display:none!important; }
.book-reader a { color:inherit; }
.book-reader :is(a,button,input,textarea,summary):focus-visible { outline:3px solid var(--ks-ac6d45); outline-offset:4px; }
.book-reader h1,.book-reader h2,.book-reader h3 { font-family:KahierNunito,Roboto,sans-serif; color:var(--br-ink); }
.br-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.br-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; margin-bottom:22px; font-size:12px; line-height:1.7; color:var(--br-muted); }
.br-breadcrumb a:hover { text-decoration:underline; text-underline-offset:3px; }
.br-hero { display:grid; grid-template-columns:minmax(0,1fr) 275px; align-items:center; gap:30px; padding:35px 38px; background:var(--br-mint); border:1px solid var(--ks-d8e4cf); border-radius:26px; }
.br-eyebrow { font-size:10px; font-weight:700; line-height:1.65; letter-spacing:.8px; color:var(--kt-617654); margin:0 0 10px; text-transform:uppercase; }
.book-reader .br-hero h1 { margin:0 0 8px; font-size:clamp(32px,3.1vw,45px); font-weight:900; line-height:1.14; letter-spacing:-.8px; max-width:620px; }
.br-hero>div>p:not(.br-eyebrow) { color:var(--kt-607362); margin:0 0 16px; font-size:13px; line-height:1.8; }
.br-hero>div>.br-hero-intro { max-width:560px; margin-bottom:21px; font-size:15px; }
.br-hero-art { width:100%; max-width:280px; height:auto; }
.br-button,.br-secondary { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; max-width:100%; padding:11px 16px 9px; font-family:inherit; font-size:13px; font-weight:600; line-height:1.5; border:1px solid var(--ks-416b4f); border-bottom:4px solid var(--ks-2d5138); border-radius:12px; background:var(--ks-416b4f); color:var(--kt-fff)!important; text-align:center; text-decoration:none; cursor:pointer; }
.br-button:hover { background:var(--ks-345c41); }
.br-button:disabled { background:var(--ks-e3e9dc); color:var(--kt-687260)!important; border-color:var(--ks-d0dac7); cursor:default; }
.br-secondary { background:var(--ks-fffef9); color:var(--kt-4e694c)!important; border-color:var(--ks-d0dcc5); border-bottom-width:3px; }
.br-secondary:hover { background:var(--ks-eff4e7); }
.br-button svg,.br-secondary svg,.br-return svg { width:18px; height:18px; flex-shrink:0; }
.br-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.br-tags span { border:1px solid var(--ks-d7e3ce); background:var(--ks-fbfdf6); color:var(--kt-627556); font-size:11px; line-height:1.5; padding:5px 8px; border-radius:7px; }
.br-about { padding:15px 19px; background:var(--ks-fffdf6); border:1px solid var(--ks-e3e6d7); border-radius:14px; margin:15px 0 26px; color:var(--br-muted); font-size:13px; line-height:1.8; }
.br-about summary { cursor:pointer; color:var(--kt-53704c); font-weight:600; }
.br-about p { margin:12px 0; }
.br-about a { text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.br-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:23px; align-items:start; scroll-margin-top:25px; }
.br-rail { position:sticky; top:22px; min-width:0; }
.br-route { padding:19px 15px; background:var(--ks-f4f7ee); border:1px solid var(--br-line); border-radius:20px; }
.br-route>.br-eyebrow { font-size:9px; }
.br-progress-count { font-family:KahierNunito,Roboto,sans-serif; font-size:15px; font-weight:800; line-height:1.5; margin:0 0 10px; }
.br-route progress { display:block; width:100%; height:8px; margin:0 0 22px; background:var(--ks-dfe7d6); border:0; border-radius:8px; overflow:hidden; accent-color:var(--ks-7b9864); }
.br-route progress::-webkit-progress-bar { background:var(--ks-dfe7d6); }
.br-route progress::-webkit-progress-value { background:var(--ks-7b9864); border-radius:8px; }
.br-route progress::-moz-progress-bar { background:var(--ks-7b9864); border-radius:8px; }
.br-route ol { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.br-route li { position:relative; }
.br-route li:not(:last-child):after { content:''; position:absolute; top:100%; height:9px; left:29px; border-left:2px dashed var(--ks-cbd8bf); }
.br-route button { display:flex; gap:10px; align-items:center; width:100%; min-height:66px; border:1px solid var(--ks-e0e7d9); border-bottom:3px solid var(--ks-dbe3d0); border-radius:13px; padding:10px; font-family:inherit; color:var(--kt-5f7255); background:var(--ks-fffef9); text-align:left; cursor:pointer; }
.br-route button:hover { background:var(--ks-eef4e6); }
.br-route button[aria-current=step] { border-color:var(--ks-8eaa78); background:var(--ks-e5efd9); color:var(--kt-395d38); }
.br-step-number { display:grid; place-items:center; width:33px; min-width:33px; height:34px; border-radius:10px; background:var(--ks-edf2e6); color:var(--kt-7b906b); font-family:KahierNunito,Roboto,sans-serif; font-size:16px; font-weight:900; }
.br-route button[aria-current=step] .br-step-number { color:var(--kt-fff); background:var(--ks-678554); }
.br-route button strong { display:block; font-size:12px; line-height:1.5; font-weight:600; }
.br-route button small { display:block; font-size:10px; line-height:1.55; margin-top:3px; color:var(--kt-6f7c61); }
.br-route-note { margin:16px 0 0; font-size:11px; line-height:1.8; color:var(--kt-74806a); }
.br-bookmark { display:flex; align-items:flex-start; gap:12px; margin-top:15px; padding:16px; background:var(--ks-fbefdf); border:1px solid var(--ks-ecd9bf); border-radius:16px; color:var(--kt-846445); }
.br-bookmark-icon { font-size:35px; line-height:1; color:var(--kt-ad8058); }
.br-bookmark strong { font-size:12px; line-height:1.6; }
.br-bookmark p { font-size:11px; line-height:1.75; margin:4px 0 0; color:var(--kt-8c795f); }
.br-challenge { margin-top:16px; padding:18px; border:1px solid var(--ks-ebd1bc); border-radius:16px; background:var(--ks-fcf0e4); }
.br-challenge>strong { display:block; font-family:KahierNunito,Roboto,sans-serif; font-size:17px; line-height:1.4; color:var(--kt-825c43); }
.br-challenge>p:not(.br-eyebrow) { margin:9px 0 16px; color:var(--kt-806e5e); font-size:12px; line-height:1.8; }
.br-challenge>.br-secondary { width:100%; font-size:12px; }
.br-challenge-final { margin-top:23px; }
.br-challenge-final .br-eyebrow { color:var(--kt-8b6648); }
.book-reader .br-challenge-final h3 { color:var(--kt-805c40); font-size:22px; }
.book-reader [data-br-course-return]:not(:empty) { position:sticky; top:12px; z-index:3; margin-bottom:20px; }
.book-reader [data-br-course-return] .course-return { margin:0; padding:12px; gap:10px; box-shadow:0 3px 10px var(--ks-294f4214); }
.book-reader [data-br-course-return] .course-return p { font-size:12px; }
.book-reader [data-br-course-return]:not(:empty)~[data-br-part-content] .br-prose :is(p,.br-replica) { scroll-margin-top:140px; }
.br-workspace { min-width:0; }
.br-paper { padding:32px 37px; background:var(--br-paper); border:1px solid var(--ks-e1dfce); border-radius:23px; box-shadow:0 5px 0 var(--ks-efecdf); }
.br-part-heading { padding-bottom:22px; margin-bottom:28px; border-bottom:1px solid var(--ks-e4e2d5); }
.br-part-heading .br-eyebrow { color:var(--kt-927754); }
.book-reader .br-part-heading h2 { margin:0 0 13px; font-size:31px; font-weight:800; line-height:1.2; scroll-margin-top:27px; }
.br-part-intro { margin:0; color:var(--kt-756e57); font-size:14px; line-height:1.8; }
.br-chapter-nav { margin:0 0 31px; padding:17px 19px; background:var(--ks-f4f7ee); border:1px solid var(--ks-dce5d1); border-radius:13px; }
.br-chapter-nav>p { margin:0 0 10px; color:var(--kt-667950); font-size:11px; font-weight:600; }
.br-chapter-nav ol { display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; padding:0; margin:0; }
.br-chapter-nav li { min-width:0; max-width:100%; }
.br-chapter-nav a { display:inline-block; padding:6px 0; color:var(--kt-526d4a); font-size:12px; line-height:1.7; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.br-chapter-heading { margin:40px 0 28px; padding:19px 0 18px; border-top:1px dashed var(--ks-d8ddc8); border-bottom:1px dashed var(--ks-d8ddc8); text-align:center; }
.br-chapter-heading:first-child { margin-top:0; }
.book-reader .br-chapter-heading h3 { margin:0; font-size:23px; font-weight:800; line-height:1.45; color:var(--kt-64784f); }
.br-prose { max-width:68ch; margin:0 auto; font-family:Georgia,'Times New Roman',serif; font-size:18px; line-height:1.95; color:var(--kt-484c40); overflow-wrap:break-word; hyphens:auto; }
.br-prose p { display:grid; grid-template-columns:18px minmax(0,1fr); gap:13px; align-items:baseline; margin:0 0 27px; scroll-margin-top:28px; }
.br-prose p:target { outline:7px solid var(--ks-f1ebd4); background:var(--ks-f1ebd4); border-radius:4px; }
.br-paragraph-number { font-family:Roboto,sans-serif; font-size:10px; line-height:1.6; color:var(--kt-a18b6a); }
.br-poetry { max-width:52ch; hyphens:none; }
.br-poetry .br-stanza { margin:0 0 32px; line-height:1.85; }
.br-poetry .br-author-note { font-size:16px; line-height:1.9; }
.br-verse-lines { white-space:pre-wrap; overflow-wrap:break-word; }
.br-poetry .br-chapter-heading { margin-top:44px; text-align:left; padding-left:31px; }
.br-poetry .br-chapter-heading:first-child { margin-top:0; }
.br-source-caption { margin:0 0 27px; padding:19px 20px; border:1px dashed var(--ks-d4d9c8); border-radius:12px; background:var(--ks-f7f7ef); font-size:15px; line-height:1.9; }
.br-source-caption p { margin:0 0 13px; }
.br-source-caption .br-caption-label { display:block; color:var(--kt-7b785e); font-family:Roboto,sans-serif; font-size:11px; line-height:1.7; }
.br-source-caption>a { font-family:Roboto,sans-serif; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.br-cast { margin:-9px 0 26px; padding:17px 20px; background:var(--ks-edf4e6); border:1px solid var(--ks-d8e4cf); border-radius:14px; color:var(--kt-536a4d); }
.br-cast summary { cursor:pointer; font-size:13px; line-height:1.8; font-weight:600; }
.br-cast dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; margin:18px 0 0; }
.br-cast dt { font-size:12px; font-weight:700; line-height:1.7; }
.br-cast dd { margin:2px 0 0; font-size:12px; line-height:1.8; color:var(--kt-708066); }
.br-theatre .br-scene-heading { margin:31px 0 27px; padding-bottom:15px; text-align:center; border-bottom:1px dashed var(--ks-d8ddc8); }
.br-theatre .br-scene-heading:first-child { margin-top:0; }
.book-reader .br-theatre h3 { margin:0 0 6px; font-size:22px; font-weight:800; color:var(--kt-64784f); }
.br-theatre p { display:block; margin:0; }
.br-theatre .br-scene-heading p { color:var(--kt-8a7d65); font-size:14px; font-style:italic; }
.br-replica { position:relative; padding-left:28px; margin:0 0 24px; scroll-margin-top:28px; border-radius:4px; }
.br-replica-number { position:absolute; left:0; top:4px; color:var(--kt-a18b6a); font-family:Roboto,sans-serif; font-size:10px; line-height:1.6; }
.br-replica:target { outline:7px solid var(--ks-f1ebd4); background:var(--ks-f1ebd4); }
.br-theatre .br-speaker { margin:0 0 5px; font-size:13px; line-height:1.7; font-family:Roboto,sans-serif; color:var(--kt-6e775b); }
.br-speaker strong { text-transform:uppercase; font-size:12px; letter-spacing:.5px; }
.br-speaker em { font-size:13px; color:var(--kt-8b7a62); }
.br-stage-direction,.br-replica-text em { color:var(--kt-81765f); }
.br-stage-direction { padding-left:28px; border-left:2px solid var(--ks-e0ddce); }
.br-glossary { background:var(--ks-f3f6e9); border:1px solid var(--ks-dce5d1); border-radius:14px; padding:16px 19px; margin:28px 0; color:var(--kt-586c4f); }
.br-glossary summary { font-size:13px; font-weight:600; cursor:pointer; }
.br-glossary dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 20px; margin:17px 0 3px; }
.br-glossary dt { font-size:12px; line-height:1.6; font-weight:600; }
.br-glossary dd { font-size:12px; line-height:1.8; color:var(--kt-708066); margin:4px 0 0; }
.br-notes,.br-review { padding:23px; margin-top:30px; background:var(--ks-fbf4e8); border:1px solid var(--ks-e9d9c0); border-radius:18px; }
.br-sticker { display:inline-block; padding:5px 8px; border-radius:5px; background:var(--ks-f2e5c9); color:var(--kt-977549); font-size:9px; font-weight:700; line-height:1.6; letter-spacing:.6px; }
.book-reader .br-notes h3,.book-reader .br-review h3 { margin:11px 0 14px; color:var(--kt-795f41); font-size:24px; font-weight:800; line-height:1.25; }
.br-prompts,.br-review>ul { padding-left:20px; margin:0 0 21px; color:var(--kt-7d6e53); font-size:13px; line-height:1.9; }
.br-prompts li,.br-review li { margin-bottom:8px; padding-left:3px; }
.br-editable { min-width:0; border:0; padding:0; margin:0; }
.br-editable:disabled { opacity:.65; }
.br-editable:disabled textarea,.br-editable:disabled input { cursor:wait; }
.br-editable>label:not(.br-declaration) { display:block; margin-bottom:10px; font-size:13px; font-weight:600; line-height:1.6; color:var(--kt-806743); }
.br-editable textarea { display:block; width:100%; max-width:100%; min-height:160px; resize:vertical; border:1px solid var(--ks-d8c7ad); border-radius:12px; padding:15px; background:var(--ks-fffef9); color:var(--kt-56614c); font-family:inherit; font-size:14px; line-height:1.9; }
.br-editable textarea::placeholder { color:var(--kt-8e8979); }
.br-input-meta { display:flex; justify-content:space-between; gap:13px; margin-top:9px; font-size:11px; line-height:1.75; color:var(--kt-847c68); }
.br-input-meta p { margin:0; }
.br-input-meta>span { flex-shrink:0; }
.br-declaration { display:flex; align-items:flex-start; gap:12px; padding:15px 0 0; margin-top:16px; border-top:1px dashed var(--ks-dfcfb5); cursor:pointer; }
.br-declaration input { width:18px; height:18px; min-width:18px; margin:2px 0 0; accent-color:var(--ks-718753); }
.br-declaration strong { display:block; color:var(--kt-806342); font-size:13px; font-weight:600; line-height:1.6; }
.br-declaration small { display:block; font-size:11px; line-height:1.8; color:var(--kt-8b7a60); margin-top:4px; }
.br-review { background:var(--ks-f0f5e9); border-color:var(--ks-d8e3cb); }
.br-review>.br-sticker { background:var(--ks-dfeacf); color:var(--kt-657d4f); }
.book-reader .br-review h3 { color:var(--kt-587346); }
.br-review>p { color:var(--kt-67765b); font-size:14px; line-height:1.9; }
.br-review>ul { color:var(--kt-718365); }
.br-review .br-editable>label { color:var(--kt-5f774f); }
.br-review textarea { border-color:var(--ks-c9d8b9); }
.br-return { display:inline-flex; align-items:center; gap:9px; margin-top:21px; font-size:12px; font-weight:600; line-height:1.7; text-decoration:underline; text-underline-offset:3px; }
.br-review>.br-return { display:flex; width:fit-content; }
.br-turn-pages { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:27px; margin-top:26px; border-top:1px solid var(--ks-e5e4d7); }
.br-previous svg { transform:rotate(180deg); }
.br-save-panel { margin-top:25px; padding:25px 28px; background:var(--ks-eef3e5); border:1px solid var(--ks-d5e1c9); border-radius:20px; scroll-margin-top:25px; }
.book-reader .br-save-panel h2 { margin:0 0 10px; font-size:25px; line-height:1.25; font-weight:800; }
.br-save-panel>div>p:not(.br-eyebrow) { font-size:13px; line-height:1.85; color:var(--kt-6b7a5e); margin:0; }
.br-save-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 14px; }
.br-save-status { color:var(--kt-60754f); font-size:12px; line-height:1.8; margin:0; }
.br-save-status.is-error { color:var(--ktk-9a563e); }
.br-recovery { margin-top:15px; padding:16px; background:var(--ks-fff8e9); border:1px solid var(--ks-e2d4b6); border-radius:12px; }
.br-recovery p { color:var(--kt-806743); font-size:12px; line-height:1.85; margin:0 0 13px; }
@media (max-width:1050px) { .br-layout { grid-template-columns:205px minmax(0,1fr); gap:18px; } .br-paper { padding:27px 24px; } .br-hero { padding:30px; grid-template-columns:minmax(0,1fr) 210px; } }
@media (max-width:780px) { .br-layout { display:block; } .br-rail { position:static; margin-bottom:22px; } .br-route { padding:18px; } .br-route ol { grid-template-columns:repeat(3,minmax(0,1fr)); } .br-route li:not(:last-child):after { display:none; } .br-route button { height:100%; } .br-bookmark { padding:12px 16px; } .br-bookmark-icon { font-size:29px; } .br-hero { grid-template-columns:minmax(0,1fr) 170px; padding:26px; gap:12px; } .br-hero-art { align-self:center; } .br-prose { font-size:18px; line-height:1.95; } }
@media (max-width:540px) { .br-hero { display:block; position:relative; padding:25px 22px; } .br-hero-art { display:none; } .book-reader .br-hero h1 { font-size:34px; } .br-hero>div>.br-hero-intro { font-size:14px; } .br-breadcrumb { font-size:11px; margin-bottom:17px; } .br-route ol { grid-template-columns:repeat(2,minmax(0,1fr)); } .br-route button { padding:9px; gap:8px; } .br-step-number { width:28px; min-width:28px; height:30px; font-size:14px; } .br-paper { padding:24px 17px; border-radius:18px; } .book-reader .br-part-heading h2 { font-size:27px; } .br-prose { font-size:17px; line-height:1.95; } .br-prose p { grid-template-columns:12px minmax(0,1fr); gap:8px; } .br-glossary dl,.br-cast dl { grid-template-columns:1fr; } .br-notes,.br-review { padding:18px 15px; } .br-input-meta { flex-wrap:wrap; gap:5px; } .br-input-meta>span { margin-left:auto; } .br-turn-pages>.br-button,.br-turn-pages>.br-secondary { flex:1; font-size:12px; padding:10px; min-width:140px; } .br-save-panel { padding:22px 18px; } .br-save-actions { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .book-reader * { scroll-behavior:auto!important; } }