/* Shared reading frame; diagrams keep their semantic colors. */
:root { --sp-paper:#f3f7f7; --sp-ink:#142b38; --sp-muted:#4e6974; --sp-line:#cad9dc; --sp-accent:#205e76; --sp-copper:#b87638; --sp-surface:#e7f0f1; --sp-display:"Iowan Old Style","Palatino Linotype","Songti SC","STSong",Georgia,serif; --sp-ui:"Segoe UI","Microsoft YaHei",system-ui,sans-serif; --sp-header-height:82px; }
:root[data-theme="dark"],:root:not([data-theme])[data-theme-page="night"] { --sp-paper:#102530; --sp-ink:#e5eef0; --sp-muted:#a8c0c8; --sp-line:#365560; --sp-accent:#98d5e5; --sp-copper:#e7b37b; --sp-surface:#183642; }
@media(prefers-color-scheme:dark) { :root:not([data-theme]) { --sp-paper:#102530; --sp-ink:#e5eef0; --sp-muted:#a8c0c8; --sp-line:#365560; --sp-accent:#98d5e5; --sp-copper:#e7b37b; --sp-surface:#183642; } }
:root[data-note] { --bg:var(--sp-paper); --fg:var(--sp-ink); --text:var(--sp-ink); --paper:var(--sp-paper); --ink:var(--sp-ink); --muted:var(--sp-muted); --line:var(--sp-line); --hair:var(--sp-line); --accent:var(--sp-accent); --accent-hover:var(--sp-accent); --cyan:var(--sp-accent); --orange:var(--sp-copper); --surface:var(--sp-surface); --surface-2:var(--sp-paper); --panel:var(--sp-surface); --panel2:var(--sp-surface); --panel-2:var(--sp-surface); --soft:var(--sp-surface); --code-bg:var(--sp-surface); --code:var(--sp-surface); }
:root[data-theme="light"][data-theme-page="night"] body.sp-content-page,:root[data-theme="light"][data-theme-page="night"] .sp-content-page :is(img,video,canvas) { filter:none; }
body.sp-content-page { background:var(--sp-paper); color:var(--sp-ink); overflow-x:clip; font-family:var(--sp-display); font-size:17px; line-height:1.9; min-width:320px; }
.sp-content-page * { box-sizing:border-box; }
.sp-content-page :is(a,button,input,summary):focus-visible { outline:2px solid var(--sp-accent); outline-offset:4px; }
.sp-content-page :is(h1,h2,h3,h4,section,article)[id] { scroll-margin-top:160px; }
.sp-content-page .sp-header { position:sticky; top:0; z-index:40; width:100%; margin:0; padding:0; background:color-mix(in srgb,var(--sp-paper) 93%,transparent); backdrop-filter:blur(18px); border:0; border-bottom:1px solid var(--sp-line); color:var(--sp-ink); font-family:var(--sp-display); }
.sp-content-page .sp-header__inner { display:flex; align-items:center; flex-direction:row; gap:2rem; width:min(100% - 5rem,1240px); margin:auto; min-height:var(--sp-header-height); padding:0; }
.sp-content-page .sp-header .sp-brand { margin:0 auto 0 0; padding:0; font:600 1.7rem var(--sp-display); letter-spacing:-.055em; color:var(--sp-ink); opacity:1; border:0; }
.sp-content-page .sp-brand span { color:var(--sp-copper); }
.sp-content-page .sp-nav { display:flex; width:auto; margin:0; gap:2rem; font:500 .88rem var(--sp-ui); order:0; }
.sp-content-page .sp-nav a { position:relative; padding:.75rem 0; color:var(--sp-ink); opacity:1; border:0; text-decoration:none; }
:root[data-theme] .sp-content-page .sp-nav a[aria-current] { color:var(--sp-accent); }
.sp-content-page .sp-nav a::after { content:''; position:absolute; bottom:.2rem; left:0; width:100%; height:1px; background:var(--sp-accent); transform:scaleX(0); transform-origin:right; transition:transform .35s; }
.sp-content-page .sp-nav a:is(:hover,[aria-current])::after { transform:scaleX(1); transform-origin:left; }
.sp-content-page .sp-theme-toggle { border:1px solid var(--sp-line); color:var(--sp-ink); opacity:1; align-self:auto; font-family:var(--sp-ui); }
.sp-content-page .sp-footer { width:min(100% - 5rem,1240px); color:var(--sp-muted); margin:auto; padding:1.5rem 0 2.5rem; opacity:1; border-top:1px solid var(--sp-line); font:.75rem/1.7 var(--sp-ui); text-align:left; }
.sp-content-page .sp-footer p { font:inherit; font-style:normal; color:inherit; opacity:1; }
.sp-content-page .sp-skip { z-index:80; color:var(--sp-ink); background:var(--sp-paper); font:500 .85rem var(--sp-ui); opacity:1; }
.sp-readerbar { position:sticky; top:var(--sp-header-height); z-index:30; background:color-mix(in srgb,var(--sp-paper) 95%,transparent); backdrop-filter:blur(16px); border-bottom:1px solid var(--sp-line); }
.sp-readerbar__inner { display:flex; align-items:center; gap:.85rem; min-height:49px; width:min(100% - 5rem,1240px); margin:auto; color:var(--sp-muted); font:.7rem var(--sp-ui); }
.sp-readerbar a { color:var(--sp-accent); text-decoration:none; border:0; opacity:1; }
.sp-readerbar__divider { color:var(--sp-copper); }
.sp-readerbar__count { margin-left:auto; font-variant-numeric:tabular-nums; }
.sp-content-page .sp-outline { position:relative; padding:0; margin:0 0 0 1rem; background:none; border:0; border-radius:0; font:inherit; }
.sp-outline > summary { display:flex; align-items:center; gap:1rem; padding:.7rem 0 .7rem .6rem; color:var(--sp-ink); font:inherit; cursor:pointer; list-style:none; }
.sp-outline > summary::-webkit-details-marker { display:none; }
.sp-outline > summary span { color:var(--sp-copper); font-size:1rem; transition:transform .3s; }
.sp-outline[open] > summary span { transform:rotate(45deg); }
.sp-outline > nav { position:absolute; right:0; top:calc(100% + 8px); display:grid; width:min(420px,calc(100vw - 2.4rem)); max-height:min(65vh,560px); overflow-y:auto; padding:1rem; background:var(--sp-paper); border:1px solid var(--sp-line); border-radius:4px; box-shadow:0 18px 50px #10253018; }
.sp-outline > nav a { display:block; padding:.7rem .8rem; border-left:2px solid transparent; color:var(--sp-muted); white-space:normal; font:.8rem/1.65 var(--sp-ui); }
.sp-outline > nav a:is(:hover,[aria-current]) { background:var(--sp-surface); color:var(--sp-accent); border-left-color:var(--sp-copper); }
.sp-read-progress { position:fixed; z-index:70; left:0; top:0; width:100%; height:2px; background:var(--sp-copper); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.sp-read-dock { display:flex; position:fixed; right:1.3rem; bottom:1.3rem; z-index:25; align-items:center; gap:.9rem; padding:.35rem .4rem .35rem .9rem; border:1px solid var(--sp-line); border-radius:24px; background:var(--sp-paper); box-shadow:0 5px 25px #10253010; color:var(--sp-muted); font:.68rem var(--sp-ui); }
.sp-read-dock[hidden] { display:none; }
.sp-read-dock a { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--sp-surface); color:var(--sp-accent); font-size:1rem; text-decoration:none; border:0; opacity:1; }
.sp-content-page > :is(.progress,.topbtn,.topbar,.nav) { display:none; }
.sp-content-page :is(.toc,.contents) { top:160px; max-height:calc(100dvh - 185px); overflow-y:auto; scrollbar-width:thin; border-radius:4px; box-shadow:none; }
.sp-content-page :is(.toc,.contents) a { font-family:var(--sp-ui); }
.sp-content-page .hero { border-color:var(--sp-line); }
.sp-content-page h1 { font-family:var(--sp-display); font-weight:500; line-height:1.3; letter-spacing:-.035em; }
.sp-content-page :is(.hero h1,main > header h1,.page h1) { font-size:clamp(2.35rem,4.3vw,4rem); }
.sp-content-page :is(.grad,.gradient,.gradient-text) { color:var(--sp-ink); background:none; -webkit-text-fill-color:currentColor; }
.sp-content-page :is(.hero-sub,.hero .subtitle,.hero p.lead,.hero .lead) { font-size:clamp(1.02rem,1.65vw,1.2rem); line-height:1.9; }
.sp-content-page :is(.eyebrow,.kicker,.type-line) { font-family:var(--sp-ui); font-size:.72rem; font-weight:500; letter-spacing:.03em; text-transform:none; }
.sp-content-page :is(.eyebrow,.hero .chip) { border-radius:3px; }
.sp-content-page :is(.back-link,.site-back,.back) { font:.75rem/1.7 var(--sp-ui); color:var(--sp-muted); text-decoration:none; }
.sp-content-page :is(.hero-grid,.summary-grid) { gap:1rem; }
.sp-content-page :is(.metric,.hero-card,.metric-card,.lead-card,.claim,.hero .card) { border-radius:5px; box-shadow:none; }
.sp-content-page main > section:not(.chart-section):not(.article-footer):not(.references) { border:0; border-top:1px solid var(--sp-line); border-radius:0; background:transparent; box-shadow:none; padding-top:2.6rem; padding-bottom:2.6rem; margin-bottom:0; }
.sp-content-page :is(main,article) h2 { font-family:var(--sp-display); font-weight:500; font-size:clamp(1.55rem,2.5vw,2.15rem); line-height:1.45; letter-spacing:-.025em; text-transform:none; opacity:1; }
.sp-content-page :is(main,article) h3 { font-family:var(--sp-display); line-height:1.5; }
.sp-content-page :is(.card,.callout,.formula,.diagram,.math-card,.strategy-card,.definition,.recording-note,.chart-shell,.quote,.flow-card,.triad > div,.question-grid > div,.result-box,.exercise,.insight,.file-window) { border-radius:5px; box-shadow:none; }
.sp-content-page :is(.callout,.quote,.insight) { border-left-width:2px; }
.sp-content-page pre { border-radius:4px; font-size:.82rem; line-height:1.75; }
.sp-content-page :is(table,.table-scroll,.diagram,.chart-scroll,.formula) { max-width:100%; }
.sp-content-page :is(td,th) { line-height:1.65; }
.sp-content-page .sp-table-scroll { width:100%; overflow:auto; margin:1.5rem 0; }
.sp-content-page .sp-table-scroll table { margin:0; }
.sp-content-page .sp-code-wrap { position:relative; min-width:0; margin:1.5rem 0; padding-top:1.6rem; }
.sp-content-page .sp-code-wrap pre { margin:0; }
.sp-copy-code { position:absolute; right:0; top:0; border:0; background:none; color:var(--sp-muted); cursor:pointer; padding:.15rem .4rem; font:.66rem var(--sp-ui); }
.sp-copy-code:hover { color:var(--sp-accent); }
.sp-essay.sp-content-page .page { max-width:900px; padding:3.5rem 2rem 4rem; }
.sp-essay.sp-content-page article { font-size:18px; line-height:1.95; }
.sp-essay.sp-content-page article p { margin-bottom:1.45rem; }
.sp-essay.sp-content-page .article-meta { margin:1.4rem 0 3rem; padding-bottom:1.5rem; border-bottom:1px solid var(--sp-line); font:.8rem/1.7 var(--sp-ui); }
.sp-reading.sp-content-page main,.sp-knowledge.sp-content-page main { width:min(100% - 3rem,900px); max-width:900px; margin-inline:auto; padding:3.5rem 0 5rem; }
.sp-reading.sp-content-page h1 { font-size:clamp(2.05rem,4vw,3.4rem); }
.sp-reading.sp-content-page .meta { font:.8rem/1.8 var(--sp-ui); margin:1rem 0 2rem; }
.sp-reading.sp-content-page :is(h2,.entry) { margin-top:3rem; }
.sp-reading.sp-content-page figure { margin:2.3rem 0; }
.sp-reading.sp-content-page figure img { border-radius:4px; }
.sp-reading.sp-content-page figcaption { font:.75rem/1.7 var(--sp-ui); margin-top:.8rem; }
.sp-content-page .sp-read-next { display:flex; justify-content:space-between; align-items:center; gap:2rem; width:min(100% - 5rem,1240px); margin:0 auto 3rem; padding:2.4rem 0; border-top:1px solid var(--sp-line); color:var(--sp-ink); }
.sp-read-next > div { max-width:850px; }
.sp-read-next span { display:block; color:var(--sp-muted); font:.7rem var(--sp-ui); margin-bottom:.85rem; }
.sp-read-next a { border:0; text-decoration:none; opacity:1; color:var(--sp-ink); font:500 1.45rem/1.55 var(--sp-display); }
.sp-read-next i { font-style:normal; color:var(--sp-copper); white-space:nowrap; }
.sp-read-next a.sp-read-next__all { flex-shrink:0; color:var(--sp-accent); font:.75rem var(--sp-ui); }
.sp-content-page .sp-table-scroll:focus-visible { outline:2px solid var(--sp-accent); outline-offset:4px; }
/* Keep legacy article selectors out of the shared reading controls. */
:root[data-note] .sp-content-page :is(.sp-header,.sp-readerbar,.sp-read-next,.sp-read-dock) a { text-decoration:none; border-bottom:0; }
:root[data-note] .sp-content-page .sp-outline { background:none; border:0; padding:0; }
:root[data-note] .sp-content-page .sp-outline > summary { background:none; border:0; color:var(--sp-ink); }
:root[data-note] .sp-content-page .sp-outline > nav { background:var(--sp-paper); border:1px solid var(--sp-line); }
@media(prefers-reduced-motion:no-preference) {
  .sp-content-page h1 { animation:reader-title .9s cubic-bezier(.2,.75,.25,1) both; }
  .sp-outline[open] > nav { animation:reader-panel .2s ease-out; }
}
@keyframes reader-title { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes reader-panel { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media(max-width:1050px) {
  .sp-content-page .sp-header__inner,.sp-readerbar__inner,.sp-content-page .sp-footer,.sp-content-page .sp-read-next { width:calc(100% - 3rem); }
  .sp-content-page .sp-header__inner { gap:1.2rem; }
  .sp-content-page .sp-nav { gap:1.4rem; }
}
@media(max-width:920px) { .sp-content-page :is(.toc,.contents) { position:relative; top:0; max-height:none; } }
@media(max-width:740px) {
  :root { --sp-header-height:97px; }
  .sp-content-page .sp-header__inner { min-height:97px; flex-wrap:wrap; gap:0 .8rem; padding:.6rem 0 .15rem; }
  .sp-content-page .sp-nav { order:3; width:100%; justify-content:space-between; gap:.4rem; font-size:.78rem; }
  .sp-content-page .sp-nav a { padding:.55rem 0; }
  .sp-content-page .sp-brand { font-size:1.5rem; }
  .sp-content-page :is(h1,h2,h3,section,article)[id] { scroll-margin-top:165px; }
  .sp-readerbar__inner { font-size:.65rem; gap:.6rem; min-height:45px; }
  .sp-readerbar__count { font-size:.6rem; }
  .sp-content-page .sp-outline { margin-left:.3rem; }
  .sp-outline summary { gap:.5rem; }
  .sp-content-page .sp-read-next { display:block; padding:2rem 0; }
  .sp-read-next a { font-size:1.25rem; }
  .sp-read-next a.sp-read-next__all { display:inline-block; margin-top:1.3rem; }
  .sp-essay.sp-content-page .page { padding:2.5rem 1.3rem 3rem; }
  .sp-essay.sp-content-page article { font-size:17px; }
  .sp-content-page .hero h1 { font-size:clamp(2.05rem,7vw,3.2rem); }
  .sp-reading.sp-content-page main,.sp-knowledge.sp-content-page main { padding-top:2.5rem; }
  .sp-content-page :is(.hero-sub,.hero .subtitle,.hero p.lead,.hero .lead) { font-size:1rem; }
  .sp-read-dock { right:.75rem; bottom:.75rem; }
}
@media(max-width:420px) {
  .sp-content-page .sp-header__inner,.sp-readerbar__inner,.sp-content-page .sp-footer,.sp-content-page .sp-read-next { width:calc(100% - 2.4rem); }
  .sp-readerbar__label { display:none; }
  .sp-content-page main > section { padding-inline:0; }
  .sp-reading.sp-content-page main,.sp-knowledge.sp-content-page main { width:calc(100% - 2.4rem); }
  .sp-content-page pre { font-size:.75rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto!important; }
  .sp-content-page *, .sp-content-page *::before, .sp-content-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media print {
  .sp-header,.sp-footer,.sp-readerbar,.sp-read-dock,.sp-read-progress,.sp-read-next,.sp-copy-code { display:none!important; }
  body.sp-content-page { background:#fff; color:#111; }
  .sp-code-wrap { padding-top:0!important; }
}