.op{overflow-anchor:none;--bg:#f4f5ef;--ink:#142b26;--mut:#4c5f59;--line:#b8c2b9;--wash:#e6eae1;--slab:#17453b;--slab-ink:#f4f5ef;--slab-mut:#bfd2c8;--accent:#b5481a;--comp:#2f6f8f;--mark:#7f9a8d;--tile:#e1e6da;--lo:#d3ddcd;--hi:#17453b;container-type:inline-size;font-family:"Segoe UI",system-ui,sans-serif;font-size:15px;line-height:1.4}
.op[data-theme=dark]{--bg:#10241f;--ink:#e9efe8;--mut:#a9bcb2;--line:#35504a;--wash:#1a332d;--slab:#d9e4d6;--slab-ink:#10241f;--slab-mut:#3e544c;--accent:#f0935a;--comp:#79bfe0;--mark:#6f8a7e;--tile:#1b352f;--lo:#2a4740;--hi:#cfe0cb}
.op-head{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:8px 16px;padding:6px 16px;background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap}
.op-brand{font:italic 600 20px "Sitka Banner","Sitka Text",Constantia,serif}
.op-rail{flex:1;display:flex;align-items:center;gap:2px;min-width:0}.op-rl-h{font-size:12px;color:var(--mut);margin-right:6px}
.op-rail button,.op-rl-h{white-space:nowrap;overflow-wrap:normal}.op.op-nar .op-brand{flex:1}.op.op-nar .op-rail{order:3;flex:1 0 100%}.op-rail button{font:inherit;font-size:13px;min-width:30px;min-height:34px;padding:0 6px;background:transparent;color:var(--mut);border:0;border-top:3px solid var(--line);cursor:pointer}
.op-rail button[aria-current]{border-top-color:var(--accent);color:var(--ink);font-weight:700}.op-rail .op-w{margin-left:8px;border-top-color:transparent;text-decoration:underline;text-underline-offset:3px}
.op-intro{padding:22px 24px 26px;max-width:900px}.op-intro h1{margin:0 0 8px;font:italic 500 clamp(28px,4cqw,40px)/1.08 "Sitka Banner","Sitka Display",Constantia,serif}.op-intro p{margin:4px 0;font-size:14px}.op-intro span{margin-right:10px}.op-hint{color:var(--mut)}.op-intro .op-by{font-size:13px;color:var(--mut);margin:0 0 10px}
.op-scrolly{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,30%);border-top:1px solid var(--line)}
.op-stage{grid-area:1/1;position:sticky;top:var(--head);height:var(--stage);align-self:start;display:flex;flex-direction:column;z-index:3;background:var(--bg);outline:none}
.op-tool{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 16px 4px}
.op-tool .cs-sel{display:flex;align-items:center;gap:6px;flex:0 1 250px}.op-tool .cs-sel span{white-space:nowrap}.op-tool .cs-sel select{min-height:34px;padding:4px 6px;border-left:4px solid var(--accent)}.op-tool .cs-sel+.cs-sel select{border-left-color:var(--comp)}.op-tool .cs-text{min-height:34px;padding:4px 10px}
.op-cap{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;padding:2px 16px 6px;font-size:13px;color:var(--mut);border-bottom:1px solid var(--line)}
.op-chn{font:italic 16px "Sitka Text",Constantia,serif;color:var(--ink)}.op-cap .cs-switch{color:var(--ink);font-size:14px;min-height:30px}.op-key{flex:1 1 100%}.op-sc{border:1px solid var(--line);padding:0 6px;font-size:12.5px;color:var(--ink)}.op-sc.on{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}
.op-plot{position:relative;flex:1;min-height:0;margin:10px 16px 12px;overflow:hidden}
.op-layer{position:absolute;inset:0}.op-layer svg{display:block;overflow:visible}
.op svg text{font:12px "Segoe UI",system-ui,sans-serif;fill:var(--ink)}.op svg .op-sm{font-size:11px}.op svg .op-h{font-weight:700;fill:var(--mut)}.op svg .op-h.op-cur{fill:var(--ink)}.op svg .op-v,.op svg .op-b{font-weight:700}
.op-hit,.op-shit{fill:transparent;stroke:transparent;cursor:pointer}.op-shit{stroke-width:12}
.op [role=button]{cursor:pointer}.op svg [role=button]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.op-sq{fill:var(--mark)}.op-ex{fill:var(--accent)}.op-ex.off{fill:none;stroke:var(--accent);stroke-width:.6}.op-d.is-f .op-sq{fill:var(--ink)}.op-d.is-c .op-sq{fill:var(--comp)}.op-d.is-f>text,.op-d.is-c>text{font-weight:700}.op svg .op-ref{fill:var(--accent);font-weight:700}
.op-sline{stroke:var(--mark);stroke-width:1.2}.op-sl circle{fill:var(--mark)}.op-sl.is-f .op-sline{stroke:var(--accent);stroke-width:3.5}.op-sl.is-f circle{fill:var(--accent)}.op-sl.is-c .op-sline{stroke:var(--comp);stroke-width:3.5;stroke-dasharray:7 4}.op-sl.is-c circle{fill:var(--comp)}.op-sl.is-f text,.op-sl.is-c text{font-weight:700}
.op-rl{transition:opacity .25s}
.op-tb{fill:var(--tile);stroke:var(--bg);stroke-width:2}.op-tf{fill:var(--mark)}.op-tile.is-f .op-tf{fill:var(--ink)}.op-tile.is-c .op-tf{fill:var(--comp)}
.op-hat,.op-gb{fill:url(#op-hatch)}.op rect.op-ref{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 3}
.op-sel{fill:none;stroke:var(--ink);stroke-width:3.5}.op-tile.is-c .op-sel{stroke:var(--comp);stroke-dasharray:7 4}
.op-tile:hover .op-tb{fill:var(--wash)}
.op svg .op-tn{font-weight:700}.op svg .op-tv{font-weight:700;font-variant-numeric:tabular-nums}
.op-lab text,.op-sl text,.op-d text{paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}.op-lab[data-ch="2"] text{stroke:var(--tile)}
.op-ruler line{stroke:var(--ink);stroke-width:1.2}
.op-cam *{vector-effect:non-scaling-stroke}
.op-gb{stroke:var(--bg);stroke-width:1}.op-gf{fill:color-mix(in srgb,var(--hi) var(--t),var(--lo));stroke:var(--bg);stroke-width:1}.op-gs{fill:none;stroke:var(--accent);stroke-width:3.5}.op-frame{fill:none;stroke:var(--ink);stroke-width:1.5}
.op-g:hover .op-gb,.op-g:hover .op-gf{stroke:var(--ink);stroke-width:2}.op-gl rect{fill:var(--bg);opacity:.92}.op-gl text{stroke:none}.op svg .op-gh{font-weight:700}
.op-r{fill:var(--mark)}.op-rf{fill:var(--accent)}.op-rf.off{fill:none;stroke:var(--accent);stroke-width:1.2}.op-ring circle{fill:none;stroke:var(--ink);stroke-width:1.4}
.op-axis{stroke:var(--ink);stroke-width:1}.op-med{stroke:var(--mut);stroke-width:1.5;stroke-dasharray:3 3}
.op-tick line{stroke:var(--mark);stroke-width:2.5}.op-tick.is-f line{stroke:var(--accent);stroke-width:5}.op-tick.is-c line{stroke:var(--comp);stroke-width:5}.op-link{stroke:var(--accent);stroke-width:2;fill:none;stroke-dasharray:6 5}
.op svg .op-big{font-weight:700;font-style:italic;font-family:"Sitka Text",Constantia,serif}
.op-box{fill:var(--wash);stroke:var(--ink)}.op-boxl{stroke:var(--ink);stroke-width:2.5}.op-boxr{fill:none;stroke:var(--mut);stroke-dasharray:5 4}.op-boxrl{stroke:var(--mut);stroke-dasharray:5 4}
.op-dm{fill:var(--mark)}.op-dot.is-f .op-dm{fill:var(--accent)}.op-dot.is-c .op-dm{fill:var(--comp)}.op-pin{stroke:var(--ink);stroke-width:1}.op-pin.is-c{stroke-dasharray:3 3}.op svg .op-dl{font-weight:700}
.op-lab{opacity:0;transition:opacity .2s;pointer-events:none}.op-lab.on{opacity:1}
.op-steps{grid-area:1/2;padding:0 16px calc(var(--stage)*.5) 0}
.op-step{min-height:var(--step);padding-top:12px}
.op-card *,.op-end{scroll-margin-top:calc(var(--head) + 8px)}.op-card{background:var(--slab);color:var(--slab-ink);padding:16px 20px 18px;--ink:var(--slab-ink);--mut:var(--slab-mut);--line:var(--slab-mut);--accent:var(--slab-ink);--wash:transparent;transition:opacity .25s}
.op-step:not(.on) .op-card{opacity:.55}
.op-card h2{margin:0;font:italic 500 clamp(22px,2.4cqw,30px)/1.1 "Sitka Banner","Sitka Display",Constantia,"Palatino Linotype",serif}
.op-num{margin:0 0 6px;font:italic 15px "Sitka Text",Constantia,serif;color:var(--slab-mut)}.op-a{margin:10px 0 0;font-size:15px}
.op-card .cs-seg{margin-top:12px;flex-wrap:wrap}.op .cs-seg button{white-space:nowrap;overflow-wrap:normal}.op-card .cs-seg button[aria-pressed=true]{background:var(--slab-ink);color:var(--slab)}.op-card select{background:transparent;color:var(--slab-ink)}.op-card select option{color:#142b26;background:#fff}.op-card .cs-small{color:var(--slab-mut)}
.op-card .cs-ledgers{margin-top:10px}.op-card h3{margin:6px 0;font-size:14px}
.op-ranks{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}.op-ranks p{margin:0;font-size:13px;line-height:1.4}
.op-card .cs-values{margin-top:10px;font-size:14px}.op-card .cs-conc{margin-top:10px;font-size:14px}
.op-end{padding:22px 24px;max-width:1180px;border-top:1px solid var(--line)}.op-end h2{margin:0 0 8px;font:italic 500 26px "Sitka Banner",Constantia,serif}
.op-fl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;counter-reset:fl}.op-fl li{border-top:3px solid var(--ink);padding-top:6px;counter-increment:fl}.op-fl h3{margin:0 0 4px;font:italic 500 20px/1.2 "Sitka Banner",Constantia,serif}.op-fl h3::before{content:counter(fl,decimal-leading-zero) "  ";font-size:15px;color:var(--accent)}.op-fl p{margin:0;max-width:60ch}
.op .cs-gallery{--slide-h:clamp(170px,26cqw,340px)}.op .cs-galhead h2{margin:0}
.op-foot{padding-block:12px 18px}
.op-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.op-defs{position:absolute;width:0;height:0}
.op.op-ph .op-head{padding:4px 8px;gap:4px 8px}.op.op-ph .op-brand{flex:1}.op.op-ph .op-rail{order:3;flex:1 0 100%;justify-content:space-between}.op.op-ph .op-rl-h{display:none}.op.op-ph .op-rail button{min-width:24px;padding:0 3px;font-size:12.5px}.op.op-ph .op-rail .op-w{margin-left:2px}
.op.op-ph .op-scrolly{grid-template-columns:minmax(0,1fr)}.op.op-ph .op-stage{box-shadow:0 6px 8px -6px #0005}
.op.op-ph .op-card *{scroll-margin-top:calc(var(--head) + var(--stage) + 12px)}.op.op-ph .op-steps{grid-area:1/1;padding:var(--stage) 8px calc(var(--stage)*.3)}
.op.op-ph .op-tool{padding:6px 8px 2px;gap:4px 6px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.op.op-ph .op-tool .cs-sel{display:grid;gap:0;min-width:0}.op.op-ph .op-tool .cs-sel span{font-size:11.5px}.op.op-ph .op-tool .cs-text{align-self:end;padding:4px 6px;font-size:13px}
.op.op-ph .op-cap{padding:2px 8px 4px;font-size:11.5px;line-height:1.25;gap:0 8px}.op.op-ph .op-cap .cs-switch{font-size:13px;min-height:28px}.op.op-ph .op-cap .cs-switch input{width:18px;height:18px}.op.op-ph .op-chn{font-size:14px}.op.op-ph .op-plot{margin:6px 8px 6px}
.op.op-ph .op-intro{padding:14px 12px 18px}.op.op-ph .op-card{padding:12px 14px 14px}.op.op-ph .op-card h2{font-size:22px}.op.op-ph .op-end{padding:18px 12px}.op.op-ph .op-fl{grid-template-columns:1fr}
@media (prefers-reduced-motion:reduce){.op-lab,.op-rl,.op-card{transition:none!important}}