:root{color-scheme:light;--panel:#fffdfa;--button-bg:#24483d;--button-ink:#fff;--muted:#505b53;--soft:#f0e9e1;--offer-bg:#eee7df}
:root[data-theme=dark]{color-scheme:dark;--ivory:#17241e;--green:#d9e8dd;--ink:#f3f1ea;--sage:#263a2f;--pink:#e8c8c2;--terra:#dfb0a1;--line:#45574b;--panel:#21332a;--button-bg:#dce5dc;--button-ink:#17241e;--muted:#c0cfc4;--soft:#203028;--offer-bg:#203028}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--line);border-radius:24px;min-height:44px;padding:8px 13px;font-size:13px;color:var(--green);flex-shrink:0}.theme-toggle b{font-size:19px;font-weight:400}.button{background:var(--button-bg);border-color:var(--button-bg);color:var(--button-ink)}.button:hover{background:var(--button-bg);filter:brightness(.95)}.fine,.quantity-foot,.visual-note,.image-disclosure,footer small{color:var(--muted)}.quantity{background:var(--soft)}.offer{background:var(--offer-bg)}.quantity-controls select{background:var(--panel);color:var(--green);border-color:var(--line)}.page-wrap{background:var(--soft)}.photo-note,.offer-card,.quantity-card{background:var(--panel)}.worksheet-band,.edition-strip{background:#24483d;color:#faf7f2}.worksheet-band h2,.worksheet-band .eyebrow{color:#faf7f2}.worksheet-band em{color:#e8c8c2}.inside dl>div{border-color:var(--line)}.paper-back{background:var(--panel);border-color:var(--line)}.book-display .cover{border-color:#ffffff66}.zoom{background:var(--button-bg);color:var(--button-ink)}:root[data-theme=dark] .page-preview:hover .page-wrap{background:#2e4236}:root[data-theme=dark] .skip{background:var(--panel)}
@media(max-width:1050px){header{gap:14px}header nav{gap:16px}.theme-toggle{padding:8px 10px}}
@media(max-width:900px){header nav{display:none}header .theme-toggle{margin-left:auto}}
@media(max-width:760px){header{gap:10px}header .brand img{width:clamp(120px,35vw,165px)}header .button{font-size:11px;padding:10px}.theme-toggle span{display:none}.theme-toggle{width:44px;min-width:44px;padding:0}}
@media(max-width:360px){header{padding-inline:16px;gap:8px}header .brand img{width:120px}header .button{font-size:11px;padding:10px 8px}}

/* Animate user-initiated theme changes without hiding content or delaying controls. */
@media(prefers-reduced-motion:no-preference){.theme-changing body,.theme-changing header,.theme-changing footer,.theme-changing section,.theme-changing aside,.theme-changing dialog,.theme-changing .photo-note,.theme-changing .quantity-card,.theme-changing .offer-card,.theme-changing .order-card,.theme-changing .product-teaser,.theme-changing .note-panel,.theme-changing .purchase-footer,.theme-changing .page-wrap,.theme-changing .purchase-previews button,.theme-changing .button,.theme-changing .theme-toggle,.theme-changing select,.theme-changing h1,.theme-changing h2,.theme-changing h3,.theme-changing p,.theme-changing a,.theme-changing strong,.theme-changing span,.theme-changing small,.theme-changing em,.theme-changing dt,.theme-changing dd{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease}.theme-toggle b{transition:transform .4s ease}.theme-toggle:hover b{transform:rotate(25deg)}:root[data-theme=dark] .theme-toggle b{transform:rotate(180deg)}}