/* ADV Plus edition. Same class names as the original guide, redesigned. */
:root{color-scheme:light;
  --bg:#f1f4ee;--paper:#fff;--ink:#11241d;--muted:#52665c;--line:#d6ded2;--soft:#e4eee6;--soft2:#eef3ea;
  --accent:#1b6b4f;--on-accent:#fff;--warm:#a85a08;--warm-f:#f0a23a;--teal:#23788a;
  --c1:#1b6b4f;--c2:#e0891b;--c3:#3b6fb0;--c4:#8a4f9e;--c5:#6b7c74;--on-seq:#fff;--on-bin:#11241d;
  --code-bg:#0f1f19;--code-ink:#e3ece4;--code-line:#243a30;
  --shadow:0 1px 2px rgba(17,36,29,.05),0 10px 28px rgba(17,36,29,.07);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1)}
body.dark{color-scheme:dark;
  --bg:#0c1612;--paper:#13221c;--ink:#e6efe6;--muted:#a3b8aa;--line:#29402f;--soft:#1a2f26;--soft2:#162820;
  --accent:#6fd6a8;--on-accent:#08130e;--warm:#f0a23a;--warm-f:#f0a23a;--teal:#59c3d6;
  --c1:#5fcf9f;--c2:#f0a23a;--c3:#6fa3e8;--c4:#c79be0;--c5:#9fb0a6;--on-seq:#08130e;--on-bin:#11241d;
  --code-bg:#0a1511;--code-ink:#e3ece4;--code-line:#223a2f;--shadow:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.75 var(--sans);transition:background .25s,color .25s;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid var(--line);border-radius:9px;padding:.45rem .9rem;background:var(--paper);color:var(--ink);transition:background .15s,border-color .15s,transform .15s}
button:hover{background:var(--soft);border-color:var(--accent)}
button:active{transform:scale(.97)}
:focus-visible{outline:3px solid var(--warm-f);outline-offset:3px;border-radius:4px}
input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;flex:none;cursor:pointer}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:.8rem;z-index:60;background:var(--paper);padding:.4rem .8rem;border-radius:6px}

/* ---------- top bar ---------- */
.reading-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:40;pointer-events:none}
.reading-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--warm-f));transform:scaleX(0);transform-origin:0 50%}
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem max(1.4rem,calc((100vw - 1260px)/2));background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.75rem;font-size:.84rem;letter-spacing:.09em;font-weight:760;text-decoration:none;color:var(--ink)}
.brand .mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--on-accent)}
.brand .mark svg{width:19px;height:19px}
.brand span.sub{font-weight:400;letter-spacing:0;color:var(--muted);margin-left:.2rem}
.badge-plus{font-size:.66rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .6rem;border-radius:99px;background:var(--soft);color:var(--accent)}
.top-actions{display:flex;align-items:center;gap:.9rem;font-size:.85rem}
.top-actions a{color:var(--muted);text-decoration:none}.top-actions a:hover{color:var(--accent)}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border-radius:10px}
.icon-btn svg{width:18px;height:18px}
.icon-btn .sun{display:none}body.dark .icon-btn .sun{display:block}body.dark .icon-btn .moon{display:none}

/* ---------- layout ---------- */
.layout{max-width:1260px;margin:auto;display:grid;grid-template-columns:260px minmax(0,1fr);gap:3.5rem;padding:2rem 1.5rem 4rem}
.rail{position:sticky;top:5rem;align-self:start;max-height:calc(100vh - 6.5rem);overflow:auto;padding-right:.25rem;scrollbar-width:thin}
.eyebrow,.rail h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;font-weight:760;color:var(--muted)}
.eyebrow{color:var(--warm)}
.rail h2{margin:1.4rem 0 .5rem}
.rail a{display:block;text-decoration:none;color:var(--muted);font-size:.8rem;line-height:1.4;margin:.1rem 0;padding:.42rem .65rem;border-radius:7px;border-left:3px solid transparent;transition:background .15s,color .15s}
.rail a:hover{background:var(--soft);color:var(--accent)}
.rail a[aria-current=page]{background:var(--soft);color:var(--accent);font-weight:650;border-left-color:var(--accent)}
.rail .mini-id{display:inline-block;font:11px var(--mono);min-width:38px;color:var(--warm)}
.progress-panel{background:var(--paper);border:1px solid var(--line);padding:1rem;border-radius:14px;font-size:.8rem;box-shadow:var(--shadow)}
.progress-panel strong{font:500 1.5rem var(--serif);display:block;margin:.1rem 0 .35rem}
.progress-panel progress{width:100%;height:8px;accent-color:var(--accent);border-radius:99px}
.progress-panel p{color:var(--muted);margin:.45rem 0 0;font-size:.74rem}
.page-toc{margin-top:1.2rem}
.page-toc a[aria-current=true]{color:var(--accent);background:var(--soft);border-left-color:var(--warm-f)}

/* ---------- home ---------- */
.hero{padding:1.2rem 0 2.4rem;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:3rem;align-items:center;border-bottom:1px solid var(--line);margin-bottom:2rem}
.hero h1{font:500 clamp(2.6rem,5vw,4.2rem)/1.05 var(--serif);letter-spacing:-.028em;margin:.8rem 0 1.1rem}
.hero .lead{font-size:1.12rem;color:var(--muted);max-width:640px}
.hero .caption{color:var(--muted);font-size:.8rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.6rem 0}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.35rem;min-height:44px;border-radius:11px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:650;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.stats{display:flex;gap:2.6rem;flex-wrap:wrap;margin:1.8rem 0 .6rem}
.stat strong{font:500 2.3rem/1.1 var(--serif);display:block}
.stat span{font-size:.78rem;color:var(--muted)}
.ring-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.5rem;box-shadow:var(--shadow)}
.ring-card .ring{display:flex;align-items:center;gap:1.3rem;margin:.9rem 0}
.ring svg{width:124px;height:124px;flex:none}
.ring .track{stroke:var(--soft)}.ring .fill{stroke:var(--accent);transition:stroke-dasharray .8s var(--ease)}
.ring text{fill:var(--ink)}
.ring-card .next{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.4rem;font-size:.86rem;color:var(--muted)}
.ring-card .next a{font-weight:650;text-decoration:none;display:block;color:var(--ink)}
.ring-card .next b{font:700 .75rem var(--mono);color:var(--warm);margin-right:.5rem}
.search-wrap{display:flex;align-items:center;margin:1.4rem 0 .4rem;gap:.7rem;position:relative}
#search{width:100%;padding:.85rem 3rem .85rem 1.05rem;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--paper);transition:border-color .15s,box-shadow .15s}
#search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.search-wrap kbd{position:absolute;right:.9rem;font:11px var(--mono);border:1px solid var(--line);border-radius:5px;padding:0 .4rem;color:var(--muted)}
.search-status{color:var(--muted);font-size:.8rem;min-height:1.4rem;margin:.2rem 0 .6rem}
.chips{display:flex;gap:.55rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.chip{padding:.4rem .95rem;min-height:38px;border-radius:99px;font-size:.82rem;font-weight:620}
.chip[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.note{border-left:3px solid var(--warm);padding:.75rem 1.1rem;background:var(--soft);font-size:.9rem;border-radius:0 8px 8px 0}
.unit{margin:2.6rem 0}
.unit-heading{display:flex;gap:1rem;align-items:baseline;margin:0 0 1rem;flex-wrap:wrap}
.unit-heading h2{font:500 1.7rem var(--serif);margin:0}
.unit-heading .unit-number{font:12px var(--mono);color:var(--warm);font-weight:700}
.unit-heading p{margin:0;color:var(--muted);font-size:.85rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.toc-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;overflow:hidden}
.toc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.toc-card.done::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent)}
.toc-row{padding:1.1rem 1.2rem .9rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.toc-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.toc-id{font:700 12px var(--mono);color:var(--warm)}
.tag{font-size:.64rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;padding:.1rem .6rem;border-radius:99px;background:var(--soft);color:var(--accent)}
.tag.tp{background:var(--warm);color:var(--bg)}
.toc-content a{color:var(--ink);font-weight:650;font-size:1.02rem;text-decoration:none;line-height:1.38;display:block}
.toc-content a::after{content:"";position:absolute;inset:0}
.toc-content a:hover{color:var(--accent)}
.toc-content p{font-size:.8rem;color:var(--muted);margin:.35rem 0 0;line-height:1.55}
.toc-meta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;padding:.65rem 1.2rem;border-top:1px dashed var(--line);font-size:.74rem;color:var(--muted)}
.toc-meta svg{width:14px;height:14px;vertical-align:-2px;margin-right:.25rem;stroke:var(--teal)}
.toc-meta label{margin-left:auto;display:inline-flex;gap:.4rem;align-items:center;position:relative;z-index:2;cursor:pointer}
.studio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.res{display:flex;flex-direction:column;gap:.35rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;text-decoration:none;color:var(--ink);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.res:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}
.res .kind{font-size:.66rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.res strong{font-size:.95rem;line-height:1.38}
.res span.why{font-size:.8rem;color:var(--muted);flex:1}
.res .host{font:11px var(--mono);color:var(--muted);display:flex;justify-content:space-between;gap:.5rem}
.res .ok{color:var(--accent)}

/* ---------- article ---------- */
.breadcrumbs{font-size:.8rem;color:var(--muted);margin:.2rem 0 1rem}
.breadcrumbs a{color:var(--muted)}
.article-header h1{font:500 clamp(2.1rem,4vw,3.3rem)/1.1 var(--serif);letter-spacing:-.02em;margin:.7rem 0 .4rem}
.subtitle{color:var(--muted);font-size:1.05rem;margin:0}
.meta-chips{display:flex;gap:.55rem;flex-wrap:wrap;margin:1rem 0 .4rem}
.meta-chips span,.meta-chips a{font-size:.74rem;padding:.2rem .75rem;border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--muted);text-decoration:none}
.meta-chips a:hover{border-color:var(--accent);color:var(--accent)}
.complete-label{display:inline-flex;align-items:center;gap:.55rem;font-size:.86rem;margin:.6rem 0 1rem;cursor:pointer}
.article{min-width:0}
.article section{margin:2.6rem 0;counter-increment:sec}
.article{counter-reset:sec}
.article h2{font:500 1.75rem/1.3 var(--serif);margin:0 0 1rem;padding-top:.4rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.article h2::before{content:counter(sec,decimal-leading-zero);font:700 .72rem var(--mono);color:var(--warm);letter-spacing:.05em}
.article section.plus-new h2::after{content:"New in Plus";font:750 .62rem var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:.15rem .6rem;border-radius:99px;background:var(--warm-f);color:#2a1a04}
.article h3{font:650 1.08rem/1.4 var(--sans);margin:1.7rem 0 .7rem}
.article p{margin:.85rem 0}
.article li{margin:.45rem 0}
.objectives{background:var(--soft);padding:1.1rem 1.4rem 1.1rem 1.8rem;border-radius:14px;border:1px solid var(--line)}
.objectives ul{margin:.2rem 0;padding-left:1.2rem}
.objectives li::marker{color:var(--accent)}
.formula{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--warm);border-radius:10px;padding:1rem 1.3rem;margin:1rem 0;overflow-x:auto}
.formula .formula-text{display:block;font:1.08rem/1.8 var(--serif)}
.formula p{font-size:.85rem;color:var(--muted);margin:.4rem 0 0}
.summary-box{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.1rem 0;font:1.18rem/1.6 var(--serif)}
details{border:1px solid var(--line);border-radius:12px;background:var(--paper);margin:.65rem 0;padding:.8rem 1.1rem;transition:border-color .15s}
details[open]{border-color:var(--accent)}
summary{cursor:pointer;font-weight:620;font-size:.94rem}
details p{color:var(--muted)}
.downloads{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.downloads a,.dl{font-size:.78rem;padding:.35rem .75rem;background:var(--soft);border-radius:8px;text-decoration:none}
.page-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:1px solid var(--line);margin-top:3rem;padding-top:1.5rem}
.page-nav a{display:flex;flex-direction:column;text-decoration:none;font-size:.9rem;padding:.9rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--paper);transition:transform .2s var(--ease),border-color .2s}
.page-nav a:hover{transform:translateY(-2px);border-color:var(--accent)}
.page-nav a:last-child{text-align:right}
.page-nav small{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.related-links{display:flex;gap:.7rem;flex-wrap:wrap}.related-links a{font-size:.85rem}
.sources{font-size:.85rem}.sources a{overflow-wrap:anywhere}
.output-note{color:var(--muted);font-size:.82rem}
table{border-collapse:collapse;width:100%;display:block;overflow:auto;font-size:.88rem}
td,th{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--soft);font-weight:620}
footer{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1rem;font-size:.78rem;color:var(--muted)}
.user-space{margin-top:2rem;border-top:1px dashed var(--line);padding-top:1rem}.user-space:empty{display:none}
.katex{color:var(--ink)}.katex-display{margin:.25rem 0!important}.katex-display>.katex{white-space:normal!important}
.to-top{position:fixed;right:1.2rem;bottom:1.2rem;z-index:35;width:44px;height:44px;border-radius:50%;padding:0;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s,transform .25s}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top svg{width:18px;height:18px}

/* ---------- code ---------- */
pre{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--code-line);padding:1rem 1.2rem;border-radius:12px;overflow:auto;font:13px/1.7 var(--mono);tab-size:4;max-width:100%;margin:0}
code{font-family:var(--mono);font-size:.88em}
p code,li code,td code,summary code{background:var(--soft);padding:.1em .35em;border-radius:5px;overflow-wrap:anywhere}
pre code{font-size:inherit;background:none;padding:0}
.codeblock{margin:1rem 0;border-radius:12px;overflow:hidden;border:1px solid var(--code-line);background:var(--code-bg)}
.codeblock pre{border:0;border-radius:0}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:.3rem .5rem .3rem .9rem;background:#162a21;color:#9fb8aa;font:11px var(--mono);text-transform:lowercase;letter-spacing:.04em}
.code-head .copy{background:transparent;border:1px solid #2c4a3c;color:#cfe3d6;padding:.15rem .65rem;font-size:11px;border-radius:7px}
.code-head .copy:hover{background:#21392e}
.hljs-keyword,.hljs-built_in,.hljs-literal{color:#f0a23a}
.hljs-string,.hljs-subst{color:#8fd9ae}
.hljs-number{color:#79b8f0}
.hljs-comment{color:#7f9a8b;font-style:italic}
.hljs-title,.hljs-function .hljs-title{color:#f4d58d}
.hljs-params,.hljs-attr{color:#cfe3d6}
.hljs-meta,.hljs-decorator{color:#d6a8ec}
.hljs-class .hljs-title{color:#7fd1c7}
pre.out{background:#0b1a14;color:#bfe3cc}
.mermaid{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1rem;font:13px/1.5 var(--mono);color:var(--muted);text-align:center;overflow:auto;white-space:pre}
.mermaid[data-processed]{white-space:normal;color:inherit}

/* ---------- examples ---------- */
.example{background:var(--paper);border:1px solid var(--line);border-radius:16px;margin:1.3rem 0;overflow:hidden;box-shadow:var(--shadow)}
.example-head{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.3rem .4rem}
.example-no{flex:none;width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:700 .85rem var(--mono)}
.example-head h3{margin:.1rem 0 .15rem;font-size:1.06rem}
.example-head p{margin:0;color:var(--muted);font-size:.9rem}
.example-body{padding:0 1.3rem 1.2rem}
.tabs [role=tablist]{display:flex;gap:.3rem;margin:.9rem 0 .5rem}
.tabs [role=tab]{border:0;background:transparent;padding:.35rem .9rem;border-radius:99px;font-size:.8rem;font-weight:650;color:var(--muted)}
.tabs [role=tab][aria-selected=true]{background:var(--soft);color:var(--accent)}
.tabs [role=tabpanel] .codeblock{margin:0}
.example .try{font-size:.88rem;border-left:3px solid var(--warm-f);padding:.2rem .9rem;margin:.9rem 0 0;color:var(--muted)}
.example .try b{color:var(--ink)}

/* ---------- charts ---------- */
figure.chart{margin:1.4rem 0;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem 1rem;box-shadow:var(--shadow)}
.chart-head h3{margin:0 0 .2rem;font-size:1.02rem}
.chart-head p{margin:0;color:var(--muted);font-size:.82rem}
.legend{display:flex;gap:1rem;flex-wrap:wrap;margin:.7rem 0 0;font-size:.78rem;color:var(--muted)}
.legend-item{display:inline-flex;align-items:center;gap:.4rem}.legend-item i{width:11px;height:11px;border-radius:3px;display:inline-block}
.chart-plot{margin-top:.6rem;overflow-x:auto}
.chart-plot svg{display:block;overflow:visible}
.chart text{font-family:var(--sans)}
.chart .tick{font-size:11.5px;fill:var(--muted)}.chart .mono{font-family:var(--mono)}
.chart .ax-title{font-size:11.5px;fill:var(--muted);letter-spacing:.02em}
.chart .vlabel{font-size:11.5px;font-weight:650;fill:var(--ink)}
.chart .reflabel{font-size:11px;fill:var(--warm);font-weight:650}
.chart .cell-label{font-size:11.5px;font-weight:700}
.chart .donut-num{font:500 28px var(--serif);fill:var(--ink)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{stroke:var(--muted);stroke-width:1;fill:none}
.chart .refline{stroke:var(--warm);stroke-width:1.6;stroke-dasharray:5 4}
.chart .seg{stroke:var(--muted);stroke-width:2;opacity:.6}
.chart figcaption{font-size:.78rem;color:var(--muted);margin-top:.7rem;border-top:1px dashed var(--line);padding-top:.6rem}
.chart .chart-data{margin:.7rem 0 0;padding:.45rem .9rem}
.chart .chart-data summary{font-size:.8rem}
.chart .chart-data table{font-size:.78rem;margin-top:.5rem}
.chart .bar,.chart .cell,.chart .pt,.chart .arc{cursor:default}
.chart.ready:not(.in) .bar{transform:scaleY(0)}
.chart.ready:not(.in) .barh{transform:scaleX(0)}
.chart .bar{transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s var(--ease);transition-delay:calc(var(--i,0)*35ms)}
.chart .barh{transform-origin:0 50%}
.chart.ready:not(.in) .cell{opacity:0}
.chart .cell{transition:opacity .5s ease,filter .15s;transition-delay:calc(var(--i,0)*10ms)}
.chart .cell:hover,.chart .bar:hover,.chart .arc:hover{filter:brightness(1.12)}
.chart.ready:not(.in) .pt{opacity:0}
.chart .pt{transition:opacity .5s ease .5s,r .15s}
.chart .pt:hover{stroke-width:3}
.chart.ready:not(.in) .draw{stroke-dashoffset:1}
.chart .draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease)}
.chart.ready:not(.in) .arc{opacity:0}
.chart .arc{transition:opacity .6s ease;transition-delay:calc(var(--i,0)*120ms)}
.chart .area{transition:opacity 1s}.chart.ready:not(.in) .area{opacity:0}
.chart-tip{position:fixed;z-index:80;pointer-events:none;max-width:280px;padding:.35rem .65rem;border-radius:8px;background:var(--ink);color:var(--bg);font-size:.76rem;line-height:1.4;opacity:0;transition:opacity .12s}

/* ---------- widgets ---------- */
.widget{background:var(--soft2);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem;margin:1.4rem 0}
.widget>h3{margin:0 0 .2rem;font-size:1.02rem}.widget>p.hint{margin:0 0 .8rem;color:var(--muted);font-size:.84rem}
.w-controls{display:grid;gap:.5rem;margin-bottom:.6rem}
.w-row{display:grid;grid-template-columns:minmax(120px,190px) 1fr 3.2ch;align-items:center;gap:.8rem;font-size:.84rem}
.w-row input[type=range]{width:100%;accent-color:var(--accent)}
.w-row select{padding:.35rem .6rem;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);grid-column:2/4}
.w-row output{font:12px var(--mono);color:var(--muted)}
.w-seg{display:flex;gap:.4rem;flex-wrap:wrap}
.w-seg button[aria-checked=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.widget svg text.tick{font-size:11px;fill:var(--muted)}.widget svg text.vlabel{font-size:11.5px;font-weight:650;fill:var(--ink)}.widget svg text.ax-title{font-size:11px;fill:var(--muted)}
.widget svg .grid{stroke:var(--line)}.widget svg .axis{stroke:var(--muted)}.widget svg .refline{stroke:var(--warm);stroke-dasharray:5 4}
.w-result p{margin:.35rem 0;font-size:.88rem}.w-result .ok{color:var(--accent);font-weight:650}.w-result .warn{color:var(--warm);font-weight:650}.w-result .muted,.muted{color:var(--muted)}
.w-table{display:grid;gap:.3rem;margin:.6rem 0}
.w-line{display:grid;grid-template-columns:90px 52px 1fr 64px;gap:.7rem;align-items:center;font-size:.82rem}
.w-line b{font:600 .82rem var(--mono);text-align:right}.w-line em{font-style:normal;font-size:.7rem;color:var(--muted)}
.w-track{height:10px;border-radius:99px;background:var(--soft);overflow:hidden;display:block}
.w-bar{display:block;height:100%;border-radius:99px;background:var(--c1);transition:width .5s var(--ease)}
.w-bar.filled{background:var(--c2)}.w-bar.dropped{background:var(--c5);opacity:.35}
.w-line.dropped{opacity:.55;text-decoration:line-through}

/* ---------- reveal ---------- */
.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s var(--ease)}
.js-reveal .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js-reveal .reveal{opacity:1;transform:none}}

noscript p{padding:.8rem;background:var(--soft);border-radius:8px}

/* ---------- responsive ---------- */
@media(max-width:1020px){.layout{grid-template-columns:210px minmax(0,1fr);gap:2rem}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1fr}.brand span.sub{display:none}}
@media(max-width:760px){.layout{display:block;padding:1rem 1rem 3rem}.rail{position:static;max-height:none;border-bottom:1px solid var(--line);margin-bottom:1.5rem;padding-bottom:1rem}.rail .course-nav,.rail .page-toc{display:none}.topbar{padding:.6rem 1rem}.top-actions a.home-link{display:none}.top-actions a:nth-last-child(2){display:none}.brand{font-size:.72rem;letter-spacing:.04em;white-space:nowrap;gap:.5rem}.brand .badge-plus{display:none}.top-actions{gap:.7rem}.grid3,.studio{grid-template-columns:1fr}.stats{gap:1.6rem}.hero h1{font-size:2.6rem}.article h2{font-size:1.5rem}.page-nav{grid-template-columns:1fr}.w-row{grid-template-columns:1fr 3.2ch}.w-row label{grid-column:1/3}.w-line{grid-template-columns:70px 44px 1fr}.w-line em{display:none}pre{font-size:12px}.example-head{padding:1rem 1rem .3rem}.example-body{padding:0 1rem 1rem}}

/* ---------- print ---------- */
@media print{.rail,.topbar,.complete-label,.page-nav,.search-wrap,.search-status,.chips,.reading-progress,.to-top,.code-head .copy,.tabs [role=tablist],.cta-row{display:none!important}
.layout{display:block;max-width:none;padding:0}.article{font-size:11pt}
body,body.dark{--bg:#fff;--paper:#fff;--ink:#000;--muted:#444;--line:#ccc;--soft:#f3f3f3;--soft2:#f7f7f7;--code-bg:#f5f5f5;--code-ink:#000;--code-line:#ccc;background:#fff;color:#000}
.js-reveal .reveal{opacity:1!important;transform:none!important}
.tabs [role=tabpanel]{display:block!important}
pre{white-space:pre-wrap}.code-head{background:#eee;color:#333}
details,figure.chart,.example{break-inside:avoid}details>*{display:block}
a{color:#000}.article section{margin:1rem 0}}

/* =====================================================================
   One-app shell (added 2026-11-02): menu, search, What's new, nav state.
   Lesson content keeps the Plus classes above.
   ===================================================================== */
.top-actions{display:flex;align-items:center;gap:.6rem}
.top-actions .tb-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .75rem;border-radius:9px;font-size:.82rem;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line);position:relative;line-height:1.3}
.top-actions .tb-btn svg{width:16px;height:16px}
.top-actions .tb-btn kbd{font:11px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 .3rem}
.tb-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:99px;background:var(--warm);color:var(--bg);font:700 11px/18px var(--sans);text-align:center;padding:0 4px}
.top-actions .menu-btn{display:none}
.panel-head>svg{width:18px;height:18px;flex:none;color:var(--muted)}
.rail .course-nav a.is-done .mini-id::after{content:" ✓";color:var(--accent)}
.rail .course-nav a .nav-new{font:700 9px var(--sans);letter-spacing:.06em;text-transform:uppercase;background:var(--warm);color:var(--bg);border-radius:99px;padding:0 .4rem;margin-left:.35rem;vertical-align:1px}
.rail .page-toc:empty{display:none}
.toc-card .tag.new{background:var(--warm);color:var(--bg);margin-left:.3rem}
.course-empty{color:var(--muted)}

/* overlay panels */
.overlay{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--ink) 38%,transparent);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px}
.overlay[hidden]{display:none!important}
.panel{width:min(720px,100%);max-height:82vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.panel-head h2{font:500 1.25rem var(--serif);margin:0;flex:1}
.panel-head input{flex:1;border:0;background:transparent;color:var(--ink);font-size:1.05rem;padding:.4rem .2rem;outline:none;min-width:0}
.panel-body{overflow:auto;padding:.4rem 0}
.panel .close{padding:.3rem .6rem;font-size:.8rem}
.sr-hit{display:block;padding:.65rem 1.1rem;text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.sr-hit:hover,.sr-hit[aria-selected=true]{background:var(--soft);border-left-color:var(--accent)}
.sr-hit b{font-weight:650}.sr-hit .sr-id{font:700 11px var(--mono);color:var(--warm);margin-right:.5rem}
.sr-hit .sr-sec{color:var(--muted);font-size:.8rem}
.sr-hit p{margin:.15rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}
.sr-hit mark{background:color-mix(in srgb,var(--warm-f) 40%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.sr-empty{padding:1rem 1.1rem;color:var(--muted);margin:0}
.wn-entry{padding:.9rem 1.2rem;border-bottom:1px dashed var(--line)}
.wn-entry:last-child{border-bottom:0}
.wn-entry h3{margin:0 0 .2rem;font-size:1rem}
.wn-entry time{font:12px var(--mono);color:var(--warm)}
.wn-entry ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.88rem}
.wn-entry .wn-items{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}
.wn-entry .wn-items a{font:700 11px var(--mono);border:1px solid var(--line);border-radius:6px;padding:.05rem .45rem;text-decoration:none}
.wn-entry.unseen h3::after{content:"new";font:700 10px var(--sans);text-transform:uppercase;background:var(--warm);color:var(--bg);border-radius:99px;padding:.05rem .45rem;margin-left:.5rem;vertical-align:2px}
.table-wrap{overflow-x:auto;margin:1rem 0}
.table-wrap table{min-width:480px}

@media(max-width:760px){
  .top-actions .menu-btn{display:inline-flex}
  .top-actions .tb-btn .tb-label,.top-actions .tb-btn kbd{display:none}
  body.nav-open .rail .course-nav,body.nav-open .rail .page-toc{display:block}
  .overlay{padding:3vh 10px 10px}
}
@media print{.overlay,.tb-btn{display:none!important}}

/* sections added after the Plus edition */
.article section.plus-new.is-new>h2::after{content:"New"}
/* narrow phones: let the brand shrink instead of pushing the buttons off-screen (2026-11-02) */
.topbar .brand{min-width:0;overflow:hidden}
.topbar .top-actions{flex:none}
@media(max-width:420px){.topbar .brand{text-overflow:ellipsis}.top-actions{gap:.4rem}.top-actions .tb-btn{padding:.4rem .55rem}}