/* Book discovery and reading workspace. Authored mathematical layout stays in each renderer. */
body[data-book]{--breadcrumb-height:45px;--sticky-tabs:0px;--font-ui:var(--ds-font);--measure:68ch;--size-100:.8125rem;--size-200:.875rem;--size-300:1rem;--size-400:1.125rem;--size-500:1.375rem;--size-600:1.75rem;--size-700:2.25rem;--leading-body:1.65;margin:0;background:var(--ds-page);color:var(--ds-body);font-family:var(--ds-font)}
body[data-book] .nav :is(a,button){font-family:var(--ds-font)}
@media screen {
  body[data-book]{--book-control-inset:6px;--book-nav-gap:4px}
  body[data-book="9"][data-view="contents"] .unit-doc{display:none!important}
  body[data-book]:has(#panel-generator:not([hidden]) #practice-workspace:not([hidden])){--sticky-tabs:0px}
  body[data-book]:has(#panel-generator:not([hidden]) #practice-workspace:not([hidden])) .tabs-wrap{position:static}
  body[data-book] :is(#book-main,.view-contents>.wrap-wide,.library-masthead>.wrap){max-width:var(--ds-width);padding-inline:var(--ds-gutter);margin-inline:auto}
  body[data-book] #book-main{padding-bottom:32px}
  body[data-book] .view-contents>.wrap-wide{padding-bottom:32px}
  body[data-book] .library-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:28px 0;border:0;font:400 13px/1.5 var(--ds-font);color:var(--ds-muted);background:none}
  body[data-book] .library-top a{color:inherit;text-decoration:none}.library-top a:hover{text-decoration:underline}
  body[data-book] .library-masthead{border:0;background:transparent;border-radius:12px 12px 0 0}
  body[data-book] .library-masthead>.library-top.wrap{padding-block:28px 0}
  .book-overview-hero{display:grid;grid-template-columns:1fr 220px;align-items:center;gap:40px;padding:32px 0 36px}
  .book-kicker{margin:0 0 16px;font:500 12px/1.6 var(--ds-font);text-transform:uppercase;letter-spacing:.08em;color:var(--ds-muted)}
  .book-overview-hero h1{font:600 34px/1.15 var(--ds-font);letter-spacing:-.035em;color:var(--ds-ink);margin:0}
  .book-overview-hero h1 span{color:var(--ds-primary)}
  .book-overview-lede{font-size:18px;line-height:1.75;margin:24px 0 0;color:var(--ds-body)}
  .book-coverage{font-size:13px;color:var(--ds-muted);margin:24px 0 0}
  .overview-cover{display:flex;flex-direction:column;aspect-ratio:3/4;width:200px;justify-self:center;padding:24px;border:1px solid var(--ds-line-strong);border-left:8px solid var(--ds-primary);background:var(--ds-surface);color:var(--ds-ink);box-shadow:8px 10px 0 color-mix(in srgb,var(--ds-primary) 8%,transparent)}
  .overview-cover>span{font-size:12px;letter-spacing:.06em}.overview-cover strong{font:400 92px/1.5 var(--ds-font);letter-spacing:-.07em;color:var(--ds-primary)}.overview-cover small{font:400 12px/1.6 var(--ds-font);margin-top:auto}
  .book-directory{border-top:1px solid var(--ds-line);padding-top:32px}
  body[data-book] .contents-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}
  .contents-heading .book-kicker{margin-bottom:8px}.contents-heading h2{font:600 28px/1.2 var(--ds-font);letter-spacing:-.03em;margin:0;color:var(--ds-ink)}
  body[data-book] .unit-search{display:flex;align-items:center;gap:8px;position:relative;width:300px;max-width:100%;height:48px;border:1px solid var(--ds-line-strong);border-radius:6px;padding:0 14px;background:var(--ds-surface);margin:0}
  .unit-search input{font:400 14px/1.5 var(--ds-font);color:var(--ds-ink);min-width:0;flex:1;border:0;outline:none;background:none;width:100%;height:100%;padding:0}.unit-search:focus-within{outline:2px solid var(--ds-primary);outline-offset:2px}
  .unit-search button{font:400 22px var(--ds-font);color:var(--ds-muted);background:none;border:0;cursor:pointer;min-width:28px;min-height:36px}
  .unit-directory{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
  body[data-book] .unit-feature{grid-column:1/-1;display:grid;grid-template-columns:80px minmax(0,1fr);gap:28px;background:var(--ds-surface);border:1px solid var(--ds-line);border-left:3px solid var(--ds-primary);padding:32px;margin:0 0 24px;border-radius:8px;align-items:start}
  .feature-index{font:400 48px/1.2 var(--ds-font);letter-spacing:-.05em;color:var(--ds-primary);width:auto;min-height:0;display:block;margin:0;background:none;border:0;border-radius:0}
  .unit-availability{font:500 12px var(--ds-font);color:var(--ds-primary);margin:0 0 12px}
  .feature-content h3{font:600 27px/1.2 var(--ds-font);letter-spacing:-.025em;margin:0 0 12px;color:var(--ds-ink)}
  .feature-content>p:not(.unit-availability){font-size:14px;color:var(--ds-muted);margin:0}
  .feature-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:24px}
  .book-button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:48px;padding:12px 20px;border:1px solid var(--ds-primary);border-radius:999px;background:var(--ds-primary);color:var(--ds-on-primary);font:500 14px/1.5 var(--ds-font);text-decoration:none}
  .book-button:hover{background:var(--ds-primary-hover)}
  .feature-practice{font:500 14px/1.5 var(--ds-font);color:var(--ds-primary);text-decoration:none}
  body[data-book] .unit-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;padding:22px 0;border:0;border-bottom:1px solid var(--ds-line);background:none;border-radius:0;align-items:start}
  .unit-index{font:400 12px/1.6 var(--ds-mono);color:var(--ds-muted);padding-top:2px}
  .unit-row h3{font:500 16px/1.5 var(--ds-font);letter-spacing:-.01em;margin:0;color:var(--ds-body)}.unit-row p{font:400 12px/1.6 var(--ds-font);color:var(--ds-muted);margin:4px 0 0}
  .book-edition-note{font-size:13px;color:var(--ds-muted);max-width:80ch;line-height:1.8;margin:32px 0 0}.unit-empty{padding:24px 0;font-size:15px}
  body[data-book] .masthead{background:var(--ds-page);padding:32px 0 24px}
  body[data-book] .masthead>.wrap{max-width:var(--ds-width);padding-inline:var(--ds-gutter)}
  body[data-book] .masthead h1{font:600 clamp(26px,2.6vw,36px)/1.25 var(--ds-font);letter-spacing:-.035em;color:var(--ds-ink);margin:16px 0}
  body[data-book] .crumb{font-size:13px}.crumb a{color:var(--ds-muted)}
  body[data-book] .masthead :is(.search,.searchbar){background:var(--ds-surface);border:1px solid var(--ds-line-strong);border-radius:6px;min-height:48px;box-shadow:none}
  body[data-book] .masthead :is(.search-help,.search-scope,.search-count){font-size:12px;line-height:1.65;color:var(--ds-muted)}
  body[data-book] :is(.tab,[role=tab]){width:max-content;min-width:0;max-width:100%;padding:4px var(--book-control-inset);border-radius:6px;font:500 14px/1.5 var(--ds-font);color:var(--ds-muted);min-height:36px}
  body[data-book] :is(.tab,[role=tab])[aria-selected=true]{color:var(--ds-primary);background:var(--ds-tint);border-color:var(--ds-line-strong);box-shadow:none}
  body[data-book] .tab[aria-current=page]{color:var(--ds-primary);background:var(--ds-tint);border-color:var(--ds-line-strong);box-shadow:none}
  body[data-book] .tabs-wrap :is(.tab,[role=tab]){padding-inline:12px}
  body[data-book] .tabs-wrap :is(.tab,[role=tab]){text-decoration:none}
  body[data-book] .tabs-wrap .tab{display:inline-flex;align-items:center;white-space:nowrap;flex:none}
  body[data-book] .local-jump{box-shadow:none;border-bottom:1px solid var(--ds-line);padding-block:4px;gap:var(--book-nav-gap);background:var(--ds-page)}
  body[data-book] .local-jump a{width:max-content;flex:none;border-radius:4px;font:500 13px/1.5 var(--ds-font);color:var(--ds-muted);padding:6px var(--book-control-inset);min-height:32px;border:0;background:none}
  body[data-book] .local-jump a:is(.active,.is-active,[aria-current]){color:var(--ds-primary);background:var(--ds-surface);box-shadow:none}
  body[data-book] .local-jump a:not([aria-current="true"]){background:transparent;box-shadow:none}
  body[data-book] .local-jump .seg{background:none;border:0;box-shadow:none;padding:0;gap:var(--book-nav-gap)}
  body[data-book] .grp{box-shadow:none;border:0;background:var(--ds-page)}
  body[data-book] .qn{border-radius:4px;color:var(--ds-primary);background:var(--ds-tint);border:1px solid var(--ds-line);font-size:13px;font-weight:600}
  body[data-book] :is(.qblock,.part,.card,.concept-card,.written,.defn){border-color:var(--ds-line);box-shadow:none}
  body[data-book] .practice :is(.builder-main,.paper-sheet,.answer-panel){background:var(--ds-surface);border-color:var(--ds-line);box-shadow:none}
  body[data-book] :is(.mode-option,.builder-fields,.level-options label,.stepper,.paper-return,.practice-dialog,.dialog-panel,.workspace-bar,.answer-heading){background:var(--ds-surface)}
  body[data-book] :is(.btn-primary,.paper-view-switch>button[aria-pressed=true]){color:var(--ds-on-primary)}
  body[data-book] .practice .builder-summary{background:var(--ds-tint);border:1px solid var(--ds-line);border-radius:8px}
  body[data-book] .practice :is(.topic-choice,.practice-mode-card){background:var(--ds-surface);border-color:var(--ds-line);color:var(--ds-body)}
  body[data-book] .practice :is(.topic-choice,.practice-mode-card):has(input:checked){background:var(--ds-tint);border-color:var(--ds-primary);color:var(--ds-primary)}
  body[data-book] .practice :is(.stepper,.number-control){background:var(--ds-surface);color:var(--ds-body);border-color:var(--ds-line-strong)}
  body[data-book] .practice :is(.answer-heading,.key-section-title,.practice-title){color:var(--ds-ink)}
  body[data-book] .practice :is(select,input[type=number]){background:var(--ds-surface);color:var(--ds-ink)}
  body[data-book] #toTop{box-shadow:none;background:var(--ds-surface);border-color:var(--ds-line);color:var(--ds-primary)}
  body[data-book] :is(.compact-hint,.side-hint,.swhy){color:var(--ds-hint)}
  /* reasonStyle emits this exact TeX ink; connect it to the active screen theme. */
  body[data-book] .katex [style*="color: rgb(79, 111, 174)"]{color:var(--ds-hint)!important}
}
@media screen and (width >= 1000px){
  body[data-book] :is(#view-unit:not([hidden]),.unit-doc:not([hidden])){display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:16px;align-items:start;max-width:var(--ds-width);margin-inline:auto;padding:0 var(--ds-gutter) 32px}
  body[data-book]{--sticky-tabs:0px}
  body[data-book] .masthead{grid-column:1/-1;grid-row:2;padding-block:16px 24px}
  body[data-book] .masthead>.wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:40px;align-items:center;padding:0;max-width:none}
  body[data-book] .masthead .crumb{grid-column:1/-1}
  body[data-book] .masthead h1{grid-column:1;grid-row:1;margin-block:8px}
  body[data-book] .masthead :is(.search,.searchbar){grid-column:2;grid-row:1;margin:0}
  body[data-book] .masthead :is(.search-help,.search-scope){grid-column:2;grid-row:2;margin-block:8px 0}
  body[data-book] .masthead .search-count{grid-column:2;grid-row:3;margin-block:4px 0}
  body[data-book] .masthead .results{grid-column:1/-1}
  body[data-book] .tabs-wrap{grid-column:1;grid-row:3;position:sticky;top:calc(var(--site-chrome-top,0px) + var(--breadcrumb-height) + 16px);z-index:10;background:none;border:0;box-shadow:none;padding:0}
  body[data-book] .tabs-wrap>.wrap{max-width:none;padding:0!important}
  body[data-book] .tabs-wrap::before{content:'IN THIS UNIT';display:block;font:500 11px/1.5 var(--ds-font);letter-spacing:.09em;color:var(--ds-muted);margin:8px 0}
  body[data-book] :is(.tabs,#tablist){display:flex;flex-direction:column;align-items:flex-start;gap:var(--book-nav-gap);padding:0;overflow:visible;scroll-snap-type:none}
  body[data-book] :is(.tabs-shell,.tabs-track){overflow:visible;padding:0}
  body[data-book] .tabs-shell::before,body[data-book] .tabs-shell::after{display:none}
  body[data-book] :is(.tab,[role=tab]){display:flex;justify-content:flex-start;text-align:left;white-space:nowrap;margin:0}
  body[data-book] :is(#main,.chapter-view){grid-column:2;grid-row:3;min-width:0;max-width:100%;padding:0!important;margin:0;width:100%}
  body[data-book] #view-unit>#results{grid-column:2;grid-row:3;width:100%;max-width:none;padding:0;margin:0}
  body[data-book] #view-unit:has(>#results:not([hidden]))>#main{display:none}
  body[data-book] .chapter-view>.panel>.wrap{max-width:none;padding:0}
  body[data-book] .practice #practice-workspace{max-width:800px;margin-inline:auto}
  body[data-book] .practice .builder-grid{grid-template-columns:minmax(0,1fr) 230px;gap:24px}
  body[data-book] .practice .builder-summary{padding:24px 20px}
  body[data-book]:has(#panel-generator:not([hidden]) #practice-workspace:not([hidden])) .tabs-wrap{position:static}
}
@media screen and (width < 1000px){
  body[data-book] .tabs-wrap>.wrap{max-width:var(--ds-width);padding-inline:var(--ds-gutter)}
  body[data-book] :is(#main,.chapter-view>.panel>.wrap){padding-inline:var(--ds-gutter);max-width:var(--ds-width);width:100%}
}
@media screen and (width <= 767px){
  body[data-book]{--size-400:1.0625rem}
  .book-overview-hero{grid-template-columns:1fr 130px;gap:24px;padding-block:40px}
  .overview-cover{width:124px;padding:16px;border-left-width:5px}.overview-cover>span{font-size:9px}.overview-cover strong{font-size:58px;line-height:1.5}.overview-cover small{font-size:10px}
  .book-overview-hero h1{font-size:38px}.book-overview-lede{font-size:16px}.book-coverage{font-size:12px}
  .unit-directory{grid-template-columns:1fr}
  body[data-book] .contents-heading{align-items:start;flex-direction:column;gap:20px}.contents-heading h2{font-size:25px}
  body[data-book] .unit-search{width:100%}
  body[data-book] .unit-feature{padding:24px;grid-template-columns:40px minmax(0,1fr);gap:16px}.feature-index{font-size:32px}.feature-content h3{font-size:24px}.feature-links{align-items:start;flex-direction:column;gap:20px}
  body[data-book] .masthead{padding-block:24px 16px}
}
@media screen and (width <= 430px){.book-overview-hero{grid-template-columns:1fr}.overview-cover{display:none}.book-overview-hero h1{font-size:40px}.book-overview-lede br{display:none}.book-overview-lede{max-width:28ch}.book-coverage{margin-top:20px}.feature-content h3{font-size:22px}.feature-content>p:not(.unit-availability){font-size:13px}.book-button{width:100%;padding-inline:14px;font-size:13px}.feature-practice{font-size:13px}.feature-links{gap:16px}.book-directory{padding-top:24px}}
@media print{.book-overview-hero,.book-directory,.library-top,.book-edition-note{display:none!important}}

@media screen {
  body[data-book="9"] .panel[data-panel="generator"]>.wrap>p{max-width:65ch;font-size:15px;color:var(--ds-muted)}
  body[data-book="9"] .ctrl{margin-top:28px}
  body[data-book="9"] .ctrl-l{font-size:12px;letter-spacing:.07em;margin-bottom:12px;color:var(--ds-muted)}
  body[data-book="9"] .nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  body[data-book="9"] .num{padding:16px;min-width:0}
  body[data-book="9"] .num label{display:block;font-size:13px;line-height:1.5;font-weight:500;margin-bottom:12px;color:var(--ds-ink)}
  body[data-book="9"] .num .row{display:flex;border:1px solid var(--ds-line-strong);border-radius:6px;overflow:hidden;min-height:44px;background:var(--ds-surface)}
  body[data-book="9"] .num .row button{width:32px;flex:none;border:0;background:var(--ds-page);color:var(--ds-primary);font:400 20px var(--ds-font);cursor:pointer}
  body[data-book="9"] .num .row input{min-width:0;width:100%;border:0;background:var(--ds-surface);color:var(--ds-ink);font:500 15px var(--ds-font);text-align:center;appearance:textfield;padding:0}
  body[data-book="9"] .num input::-webkit-inner-spin-button{appearance:none}
  body[data-book="9"] .num .avail{display:block;margin-top:8px;font-size:12px;color:var(--ds-muted)}
}
@media screen and (width <= 800px){body[data-book="9"] .nums{grid-template-columns:1fr 1fr}}

/* Books share the personal workspace frame; mathematics retains its own reading measure. */
@media screen {
  body[data-book] :is(#view-book,#view-contents,#view-unit,.unit-doc){max-width:var(--ds-width);margin-inline:auto;background:var(--ds-surface);border:1px solid var(--ds-edge);border-radius:12px;box-shadow:var(--ds-shadow)}
  body[data-book] :is(#view-unit,.unit-doc){padding-bottom:32px}
  body[data-book] [role=tabpanel]{padding-bottom:0}
  body[data-book] .flow-section:last-child,body[data-book] .flow-section>.qblock:last-child{margin-bottom:0}
  body[data-book] .masthead{background:transparent;border-radius:12px 12px 0 0}
  body[data-book] .masthead h1{font-size:30px}
  body[data-book] .grp{background:var(--ds-surface)}
  body[data-book] .tabs-wrap{background:var(--ds-surface)}
  body[data-book] .local-jump{background:var(--ds-surface)}
  body[data-book] .local-jump a:is(.active,.is-active,[aria-current=true]){background:var(--ds-page)}
  .book-overview-lede{font-size:16px;margin-top:20px}
  .book-overview-hero{grid-template-columns:128px minmax(0,1fr);gap:28px;padding-block:24px 28px}
  .book-overview-hero>div:first-child{grid-column:2;grid-row:1}
  .overview-cover{grid-column:1;grid-row:1;width:120px;padding:16px;border-left:5px solid var(--ds-study);border-radius:2px 6px 6px 2px;background:var(--ds-page);box-shadow:4px 5px 0 color-mix(in srgb,var(--ds-study) 8%,transparent)}
  .overview-cover>span{font-size:7px}.overview-cover strong{font-size:52px;line-height:1.4;color:var(--ds-study)}.overview-cover small{font-size:8px}
  .book-overview-hero h1{font-size:34px}.book-overview-hero h1 br{display:none}.book-overview-hero .book-kicker{font-size:11px;line-height:1.5;letter-spacing:.06em;margin-bottom:12px}
  .book-overview-hero .book-overview-lede{font-size:15px;line-height:1.8;margin-top:20px}.book-overview-hero .book-coverage{font-size:12px;margin-top:16px}
  .book-overview-hero h1 span{color:var(--ds-body)}
  body[data-book] .unit-feature{background:var(--ds-page);border:1px solid var(--ds-line);border-left:3px solid var(--ds-study);border-radius:10px}
  .feature-index{color:var(--ds-study)}.unit-availability{color:var(--ds-green)}
  body[data-book] .practice .builder-summary{background:var(--ds-page);border-radius:10px}
  body[data-book] .practice .builder-main{border-radius:10px}
  body[data-book] .practice :is(.btn,.btn-primary,.paper-return){border-radius:999px}
  body[data-book] .book-button{border-radius:999px}
  body[data-book] .masthead :is(.search,.searchbar){background:var(--ds-page);border-color:var(--ds-line);border-radius:8px}
  body[data-book] .masthead :is(.search,.searchbar) input{border:0;border-radius:inherit;background:transparent;box-shadow:none;outline:none}
  body[data-book] .masthead :is(.search,.searchbar):focus-within{outline:2px solid var(--ds-focus);outline-offset:2px}
  body[data-book] .practice #gen-out>.paper-return{background:var(--ds-surface);border:0;border-radius:0;padding:8px 0;box-shadow:none}
  body[data-book] .practice .paper-return #gen-edit{border:1px solid var(--ds-line);border-radius:8px;background:var(--ds-page);min-height:48px;padding:12px 16px}
  body[data-book] .practice .paper-return #gen-edit:hover{background:var(--ds-tint);border-color:var(--ds-line-strong)}
}
@media screen and (width < 600px){
  body[data-book]{--ds-gutter:18px}
  body[data-book] .library-top{font-size:11px;gap:12px;padding-top:20px}
  .book-overview-hero{grid-template-columns:1fr;padding-block:28px;gap:0}
  .book-overview-hero>div:first-child{grid-column:1}
  .overview-cover{display:none}.book-overview-hero h1{font-size:30px}.book-overview-hero .book-overview-lede{font-size:14px;max-width:35ch}.book-coverage{font-size:11px;margin-top:16px}
  body[data-book] .contents-heading h2{font-size:23px}.book-directory{padding-top:24px}
  body[data-book] .unit-feature{padding:20px 16px;grid-template-columns:28px minmax(0,1fr);gap:12px}
  .feature-index{font-size:24px}.feature-content h3{font-size:21px}.feature-content>p:not(.unit-availability){font-size:12px}
  .feature-links{gap:16px;margin-top:20px}.book-button{padding-inline:12px;font-size:12px;gap:12px}.feature-practice{font-size:12px}
  .book-edition-note{font-size:11px}.unit-row h3{font-size:14px}.unit-row p{font-size:11px}
  body[data-book] .masthead h1{font-size:26px}
  body[data-book] .practice-heading{flex-wrap:wrap;gap:12px}
}
@media screen and (width < 400px){
  body[data-book] .practice :is(.source-options,.practice-modes){grid-template-columns:1fr}
}
@media screen and (width < 800px){
  /* Header visibility and the available sticky inset are shared site-wide. */
  body[data-book]>.nav{position:fixed}
}
@media print{
  body.printing-paper .answer-item::details-content{display:contents}
  /* Keep each short explanatory stage with its aligned derivation. */
  body.printing-paper .working-stage{break-inside:avoid;page-break-inside:avoid}
}
@media screen{
  body[data-book] .crumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0;font:400 12px/1.5 var(--ds-font)}
  body[data-book] .crumb li{display:flex;align-items:center;min-width:0;gap:4px}
  body[data-book] .crumb li+li::before{content:'';width:6px;height:6px;flex:none;border-top:1px solid var(--ds-muted);border-right:1px solid var(--ds-muted);transform:rotate(45deg);margin:0 7px 0 3px}
  body[data-book] .crumb a{display:inline-flex;align-items:center;min-height:40px;padding:8px;border-radius:6px;color:var(--ds-muted);font-weight:400;text-decoration:none;white-space:nowrap}
  body[data-book] .crumb a:hover{background:var(--ds-page);color:var(--ds-ink)}
  body[data-book] .crumb li[aria-current=page]{font-weight:500;color:var(--ds-ink);min-height:40px;padding-right:8px}
  body[data-book] .crumb li:first-child a{margin-left:-8px}
  body[data-book] .library-top{padding-top:16px}
  body[data-book] .library-masthead>.library-top.wrap{padding-top:16px}
}
@media screen and (width < 600px){
  body[data-book] .crumb ol{font-size:11px;gap:2px}
  body[data-book] .crumb a{min-height:44px;padding-inline:6px}
  body[data-book] .crumb li:first-child a{margin-left:-6px}
  body[data-book] .crumb-unit-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  body[data-book] .crumb--unit li:nth-child(2)::before{display:block}
  body[data-book] .crumb--unit li:nth-child(2) a{margin-left:0}
  body[data-book] .crumb--unit li[aria-current=page]{min-height:44px;padding-right:0}
}
@media screen{
  body[data-book] .crumb--unit{position:sticky;top:var(--site-chrome-top,0px);z-index:55;grid-column:1/-1;grid-row:1;padding:0 var(--ds-gutter);background:var(--ds-surface);border-bottom:1px solid transparent;border-radius:12px 12px 0 0}
  body[data-book] :is(.library-top,#book-masthead){position:sticky;top:var(--site-chrome-top,0px);z-index:55;background:var(--ds-surface)}
  body[data-book] #book-masthead .library-top{position:static;background:transparent}
  body[data-book].has-scrolled-content :is(.crumb--unit,.library-top,#book-masthead){background:var(--ds-surface);border-bottom-color:var(--ds-line)}
  body[data-book].has-scrolled-content #book-masthead .library-top{background:transparent}
  body[data-book] .local-jump{top:calc(var(--site-chrome-top,0px) + var(--breadcrumb-height) + var(--sticky-tabs))}
  /* Keep the current question in view, bounded by its own question block. */
  body[data-book]{--question-heading-height:36px}
  body[data-book] .grp{position:sticky;top:calc(var(--site-chrome-top,0px) + var(--breadcrumb-height) + var(--sticky-tabs) + var(--sticky-jump,0px));z-index:20;min-height:var(--question-heading-height);padding:4px 0;background:var(--ds-surface);box-shadow:none}
  body[data-book] .grp.is-stuck{box-shadow:0 1px 0 var(--ds-line)}
  body[data-book] .grp .qn{min-height:28px;margin:0;padding:4px 12px;font-size:13px;line-height:18px;box-sizing:border-box}
  body[data-book="9"]{--sticky-jump:var(--sticky-sections,0px)}
  body[data-book] :is(.flow-section,.qblock,.part,[id$="-compact"]){scroll-margin-top:calc(var(--site-chrome-top,0px) + var(--breadcrumb-height) + var(--sticky-tabs) + var(--sticky-jump,0px) + 16px)}
  body[data-book] .qblock :is(.part,[id$="-compact"]){scroll-margin-top:calc(var(--site-chrome-top,0px) + var(--breadcrumb-height) + var(--sticky-tabs) + var(--sticky-jump,0px) + var(--question-heading-height) + 16px)}
  body[data-book]:has(#panel-generator:not([hidden]) #practice-workspace:not([hidden])) .crumb--unit{position:static;backdrop-filter:none}
}
/* The sticky breadcrumb spans the whole reading card, gutters included, so nothing scrolled
   beneath it shows at the card edges. */
@media screen and (width >= 1000px){body[data-book] .crumb--unit{margin-inline:calc(-1 * var(--ds-gutter));padding-inline:var(--ds-gutter)}}
@media screen and (width < 1000px){
  /* Use the renderer's measured row height; the desktop rail occupies no
     vertical sticky space. Generated papers retain their return bar alone. */
  body[data-book]{--sticky-tabs:inherit}
  body[data-book] .tabs-wrap{position:sticky;top:calc(var(--site-chrome-top,0px) + var(--breadcrumb-height));z-index:40}
  body[data-book] :is(.tabs,#tablist){padding-block:2px;gap:var(--book-nav-gap)}
  body[data-book] .masthead{padding-top:8px}
}


@media screen{
  body[data-book] .crumb ol{height:44px;flex-wrap:nowrap;gap:2px}
  body[data-book] .crumb a,body[data-book] .crumb li[aria-current=page]{height:44px;min-height:44px}
  body[data-book] .crumb li[aria-current=page]{overflow:hidden;white-space:nowrap}
  body[data-book] .crumb li[aria-current=page] .crumb-unit-name{overflow:hidden;text-overflow:ellipsis}
  body[data-book] .crumb li:not([aria-current=page]){flex:none}
  body[data-book] .crumb--unit{height:45px}
  body[data-book] .library-top,body[data-book] .library-masthead>.library-top.wrap{padding-block:0;height:45px;border-bottom:1px solid transparent}
  body[data-book] .crumb-home-icon{width:16px;height:16px;display:none;font-size:0;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='m3 10 9-7 9 7v11h-6v-7H9v7H3Z'/%3E%3C/svg%3E") center/contain no-repeat}
  body[data-book]:has(#panel-generator:not([hidden]) #practice-workspace:not([hidden])){--breadcrumb-height:0px}
}
@media screen and (width < 600px){
  body[data-book] .crumb ol{font-size:11px}
  body[data-book] .crumb li{gap:0}
  body[data-book] .crumb li+li::before{margin:0 4px 0 0;width:5px;height:5px}
  body[data-book] .crumb a{padding-inline:4px}
  body[data-book] .crumb-home-icon{display:block}
  body[data-book] .crumb-home-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}
@media print{body.printing-paper[data-print-mode="worked"] .answer-stack{display:block}}

/* Shared interface scale; mathematics retains a readable, explicit prose size. */
@media screen{
 body[data-book]{--size-400:1rem;--size-500:1.25rem;--size-600:1.5rem;font-size:16px}
 body[data-book] .masthead h1{font-size:32px}
 body[data-book] :is(.tab,[role=tab]),.book-button{font-size:13px}
 body[data-book] :is(.flow-section h2,.flow-head h3,.contents-heading h2){font-size:24px;line-height:1.3;font-weight:600}
}
@media screen and (width < 600px){body[data-book] .masthead h1{font-size:28px}body[data-book] :is(.flow-section h2,.flow-head h3,.contents-heading h2){font-size:23px}}

/* Every sticky reading layer starts at --site-chrome-top: the desktop frame inset, or the
   mobile header while it is shown. The generated-paper return bar is the only layer in
   paper view. */
@media screen{
 body[data-book] #gen-out>.paper-return{top:calc(var(--site-chrome-top,0px) + var(--sticky-tabs,0px))}
 /* Generate and Randomize show the workspace from its top: the return bar at its sticky
    line, the Randomize row under it, then the paper. Paper sections land below the bar. */
 body[data-book] #gen-out{scroll-margin-top:calc(var(--site-chrome-top,0px) + var(--sticky-tabs,0px))}
 body[data-book] #practice-workspace :is([id^="paper-"],#key-wrap){scroll-margin-top:calc(var(--site-chrome-top,0px) + var(--sticky-tabs,0px) + var(--sticky-jump,0px) + 14px)}
 /* The paper summary follows the reader below the sticky breadcrumb, never under it. */
 body[data-book] .practice .builder-summary{top:calc(var(--site-chrome-top,0px) + var(--breadcrumb-height,0px) + var(--sticky-tabs,0px) + 16px)}
}

/* The scroller reaches the panel edge; padding belongs inside its moving track. */
@media screen and (width < 1000px){
 body[data-book-pending]{--sticky-tabs:41px;--sticky-jump:41px}
 body[data-book] .tabs-wrap>.wrap{padding-inline:0}
 body[data-book] #tablist{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 body[data-book] :is(.tabs,#tablist){padding-inline:var(--ds-gutter);scroll-padding-inline:var(--ds-gutter)}
 body[data-book] .local-jump{width:calc(100% + 2 * var(--ds-gutter));margin-inline:calc(-1 * var(--ds-gutter));padding-inline:var(--ds-gutter);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--ds-gutter)}
 body[data-book] .local-jump .seg{display:flex;max-width:none;width:max-content;overflow:visible}
 body[data-book] :is(.tab,.local-jump a):focus-visible{outline-offset:-2px}
}
@media screen and (width >= 1000px){body[data-book-pending]{--sticky-tabs:0px;--sticky-jump:41px}}

/* Wide Class 10 mathematics: fade whichever edge still hides part of the expression,
   matching the Class 9 cue. The fade never covers the last characters once reached. */
.math-enhanced body[data-book="10"] .is-overflowing:not(.is-at-end)>.math-scroll{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
.math-enhanced body[data-book="10"] .is-overflowing:not(.is-at-start).is-at-end>.math-scroll{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px);mask-image:linear-gradient(to right,transparent,#000 32px)}
.math-enhanced body[data-book="10"] .is-overflowing:not(.is-at-start):not(.is-at-end)>.math-scroll{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
@media print{body[data-book="10"] .math-scroll{-webkit-mask-image:none!important;mask-image:none!important}}

/* The current breadcrumb item has no link padding, so give its separator the same
   distance a linked item gets from its own padding. */
@media screen{body[data-book] .crumb li[aria-current=page]::before{margin-right:15px}}
@media screen and (width < 600px){body[data-book] .crumb li[aria-current=page]::before{margin-right:13px}}

/* Short viewports (phone landscape, 200–400% zoom): the breadcrumb, exercise strip, section
   links and question label together cover 127–163px, up to 80% of a 204px window. Below 480px
   of height they scroll with the page, and every sticky offset is zero so anchors and scripts
   agree. Practice keeps its single Back to paper settings bar. */
@media screen and (height < 480px){
  body[data-book]{--breadcrumb-height:0px;--sticky-tabs:0px;--sticky-jump:0px;--sticky-sections:0px;--question-heading-height:0px}
  body[data-book] :is(.crumb--unit,.library-top,#book-masthead,.tabs-wrap,.local-jump,.grp){position:relative;top:auto}
  body[data-book] .practice .builder-summary{position:static}
}

/* Reading measure: the book frame stops growing at 1160px (about its 1440px-window width), so
   lesson prose stays near 95 characters per line instead of reaching 140 on wide screens. */
body[data-book]{--ds-width:1160px}

/* Secondary book actions keep a 44px target like every other control. */
body[data-book] .feature-practice{display:inline-flex;align-items:center;min-height:44px}

/* Navigation chrome never prints on lessons or practice papers. */
@media print{body[data-book] .crumb{display:none!important}}

/* Phones: the breadcrumb and the exercise strip stay; section links and the question label
   scroll with the page. Five stacked layers covered up to 257px (30%) of an 844px screen. */
@media screen and (width < 600px){
  body[data-book],body[data-book="9"]{--sticky-jump:0px;--sticky-sections:0px;--question-heading-height:0px}
  body[data-book] :is(.local-jump,.grp){position:relative;top:auto}
  body[data-book] :is(.local-jump,.grp).is-stuck{box-shadow:none}
}

/* Class 9 Practice follows the Class 10 workspace order: one sticky Back to paper settings
   bar while a paper is open, Randomize above the paper, Answer key and Print below it. */
@media screen{
  body[data-book="9"]:has(.panel[data-panel="generator"]:not([hidden]) .gen-out:not(:empty)) :is(.crumb--unit,.library-top,#book-masthead,.tabs-wrap){position:static}
  body[data-book="9"] .gen-return{position:sticky;top:var(--site-chrome-top,0px);z-index:30;margin-top:24px;padding:8px 0;background:var(--ds-surface)}
  body[data-book="9"] .gen-edit{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--ds-line);border-radius:8px;background:var(--ds-page);color:var(--ds-ink);font:600 14px/1.4 var(--ds-font);text-align:left;cursor:pointer}
  body[data-book="9"] .gen-edit:hover{background:var(--ds-tint);border-color:var(--ds-line-strong)}
  body[data-book="9"] .gen-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:8px 0 16px}
  body[data-book="9"] .gen-status{margin:0;font-size:13px;line-height:1.5;color:var(--ds-muted)}
  body[data-book="9"] .gen-status:empty{display:none}
  body[data-book="9"] .noscript-note{max-width:var(--ds-width);margin:16px auto;padding:12px 16px;border:1px solid var(--ds-line);border-radius:8px;background:var(--ds-surface);color:var(--ds-ink);font-size:14px;line-height:1.6}
  /* Step reasons are hints: blue, never filled, as in Class 10. */
  body[data-book="9"] .step .why:not(.note){color:var(--ds-hint)}
}
body[data-book="9"] .paper-candidate{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;margin:0 0 16px;font-size:13px;color:var(--ds-body)}
body[data-book="9"] .paper-candidate span{display:flex;align-items:flex-end;gap:8px;white-space:nowrap}
body[data-book="9"] .paper-candidate span::after{content:'';flex:1;min-width:32px;border-bottom:1px solid var(--ds-line-strong)}
@media screen and (width < 600px){body[data-book="9"] .paper-candidate{grid-template-columns:1fr;gap:12px}}
@media print{
  body[data-book="9"] .gen-sol .paper{break-before:page}
  body[data-book="9"] .paper-candidate{color:#000;font-size:9pt;margin:0 0 8pt}
  body[data-book="9"] .paper-candidate span::after{border-bottom-color:#000}
}

/* One focus colour across the site and the books. */
@media screen{body[data-book] :focus-visible{outline-color:var(--ds-focus);outline-width:2px}}