.ph-cap{margin:16px 0 0; font-size:var(--fs-caption); color:var(--ink-3); max-width:68ch; line-height:1.6}
.proof{margin:16px 0 0; font-size:var(--fs-small); color:var(--ink-3); line-height:1.6; max-width:68ch}
.sec-body{max-width:62ch; min-width:0}
.sec-body.wide{max-width:none}
.sec-body h2{margin:0 0 16px; text-wrap:balance}
.sec-body > p{margin:0 0 24px; color:var(--ink-2)}
.badge{display:inline-block; vertical-align:middle; margin-left:6px; padding:1px 8px; border:1px solid var(--rule-2);
border-radius:var(--r-1); font:500 var(--fs-caption)/1.5 var(--sans); letter-spacing:0; color:var(--ink-2); white-space:nowrap}
.badge.pro{border-color:var(--ink); color:var(--ink)}
.facts{width:100%; border-collapse:collapse; font-size:var(--fs-small); font-variant-numeric:tabular-nums}
.facts th, .facts td{text-align:left; vertical-align:top; padding:12px 16px 12px 0; border-bottom:1px solid var(--rule); line-height:1.5}
.facts thead th{font:600 var(--fs-caption)/1.3 var(--sans); color:var(--ink-3); border-bottom:1px solid var(--rule-2)}
.facts tbody th{font-weight:600; color:var(--ink); font-variant-numeric:normal}
.facts td{color:var(--ink-2)}
.facts .n{text-align:right; white-space:nowrap}
.facts td.off{color:var(--ink); white-space:nowrap}
@media (max-width:560px){
.facts thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.facts, .facts tbody, .facts tr, .facts th, .facts td{display:block; width:100%}
.facts tr{padding:12px 0; border-bottom:1px solid var(--rule)}
.facts th, .facts td{border:0; padding:2px 0}
.facts td[data-l]::before{content:attr(data-l) ": "; color:var(--ink-3)}
.facts .n, .facts td.off{text-align:left; white-space:normal}
}
.with-shot{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:start}
.with-shot.phone{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr)}
.cap-fig{margin:0; min-width:0}
.cap-fig .frame{border:1px solid var(--rule-2); border-radius:var(--r-3); overflow:hidden; background:var(--card)}
.cap-fig .frame img{display:block; width:100%; height:auto}
.cap-fig.phone .frame{max-width:280px; margin:0 auto; border-radius:var(--r-4)}
.cap-fig figcaption{margin-top:12px; font-size:var(--fs-caption); color:var(--ink-3); line-height:1.6}
.cap-fig.phone figcaption{max-width:280px; margin-left:auto; margin-right:auto}
.cap-fig picture{display:block}
.cap-fig.second{margin-top:24px}
.hero-cap{margin-top:44px; max-width:1034px}
.ask-cap{margin-top:20px}
@media (max-width:900px){ .with-shot, .with-shot.phone{grid-template-columns:minmax(0,1fr); gap:32px} }
.sum{margin:0; padding:0; list-style:none; border-top:1px solid var(--rule-2); font-variant-numeric:tabular-nums}
.sum li{display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:12px; align-items:baseline;
padding:12px 0; border-bottom:1px solid var(--rule); font-size:var(--fs-small); color:var(--ink-2)}
.sum .op{color:var(--ink-3); text-align:center}
.sum .v{color:var(--ink); white-space:nowrap; font:600 var(--fs-body)/1.3 var(--sans); text-align:right}
.sum small{display:block; margin-top:2px; font-size:var(--fs-caption); color:var(--ink-3); line-height:1.5}
.sum li.tot{border-bottom:1px solid var(--rule-2); color:var(--ink); font-weight:600}
.sum li.tot .op{color:var(--signal)}
.sum li.tot .v{font:600 var(--fs-fig-m)/1.1 var(--display); letter-spacing:-.02em}
.has{list-style:none; margin:0; padding:0; font-size:var(--fs-small); color:var(--ink-3)}
.has li{position:relative; line-height:1.5; padding:1px 0 1px 22px}
.has li::before{content:""; position:absolute; left:0; top:calc(1px + .75em); width:8px; height:1px; background:var(--ink-3)}
.ph-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center}
.ph-device{margin:0}
.ph-device figcaption{margin:20px auto 0; max-width:40ch; font-size:var(--fs-caption); line-height:1.6; color:var(--ink-3); text-align:center}
.capture{width:250px; margin:0 auto; border:1px solid var(--rule); border-radius:var(--r-4); overflow:hidden; background:var(--card)}
.capture img{display:block; width:100%; height:auto}
@media (max-width:900px){ .ph-grid{grid-template-columns:1fr; gap:48px} .capture{width:230px} }
.limits{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-2)}
.limits li{position:relative; padding:20px 0 20px 26px; border-bottom:1px solid var(--rule); max-width:96ch;
color:var(--ink-2); font-size:var(--fs-body); line-height:1.65}
.limits li::before{content:""; position:absolute; left:1px; top:29px; width:8px; height:8px; border-radius:50%;
border:1.5px solid var(--ink-3)}
.limits strong{color:var(--ink); font-weight:600}
.limits.one{margin-top:18px; border-top:0}
.prose .ldate{margin:0 0 28px; font-size:var(--fs-small); color:var(--ink-3)}
.prose .lsum{margin:0 0 12px; padding:20px; border:1px solid var(--rule-2); border-radius:var(--r-3); background:var(--card);
color:var(--ink-2); font-size:var(--fs-body); line-height:1.7}
.prose .lsum b, .prose b{color:var(--ink); font-weight:600}
.prose .lnote{margin-top:56px; padding-top:20px; border-top:1px solid var(--rule); font-size:var(--fs-small); color:var(--ink-3)}
.ph-split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center}
.answers{margin:0; padding:8px 24px 16px; border:1px solid var(--rule-2); border-radius:var(--r-3); background:var(--card)}
.answers dl{margin:0}
.answers dl > div{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--rule)}
.answers dt{font-size:var(--fs-small); color:var(--ink-2)}
.answers dt a{display:inline-flex; align-items:center; min-height:24px; color:inherit; text-decoration:underline; text-decoration-color:var(--rule-2); text-underline-offset:3px}
.answers dt a:hover{color:var(--ink); text-decoration-color:var(--ink)}
.answers dd{margin:0; text-align:right; font:600 var(--fs-fig-s)/1.2 var(--display); letter-spacing:-.01em; color:var(--ink);
font-variant-numeric:tabular-nums; white-space:nowrap}
.answers dd span{display:block; font:400 var(--fs-caption)/1.4 var(--sans); letter-spacing:0; color:var(--ink-3)}
.answers-src{margin:12px 0 0; font:500 var(--fs-prov)/1.4 var(--mono); color:var(--ink-3)}
@media (max-width:900px){ .ph-split{grid-template-columns:minmax(0,1fr); gap:40px} }
@media (max-width:560px){ .answers{padding:4px 16px 12px} .answers dd span{white-space:normal} }
.tour{margin-top:48px}
.tour-tabs{position:relative; display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--rule-2)}
.tour-tabs [role="tab"]{min-height:44px; padding:0 16px; background:none; border:0; color:var(--ink-3);
font:500 var(--fs-body)/1 var(--sans); cursor:pointer; transition:color var(--t-fast) var(--ease-ui)}
.tour-tabs [role="tab"]:hover, .tour-tabs [aria-selected="true"]{color:var(--ink)}
.tour-tabs [role="tab"]:active{transform:translateY(1px)}
.tour-bar{position:absolute; left:0; bottom:-1px; width:1px; height:2px; background:var(--ink); transform-origin:0 0;
transform:scaleX(0); transition:transform var(--t-ui) var(--ease-ui)}
.tour-panels{margin-top:24px}
.tour-panel{margin:0 0 24px}
.tour-panel img{display:block; width:100%; height:auto; border:1px solid var(--rule-2); border-radius:var(--r-3); background:var(--card)}
.tour-panel figcaption{margin-top:12px; font-size:var(--fs-caption); color:var(--ink-3)}
.tour-panel figcaption a{color:var(--ink-2)}
.js .tour-panels{display:grid}
.js .tour-panel{grid-area:1/1; margin:0; opacity:0; visibility:hidden;
transition:opacity var(--t-ui) var(--ease-ui), visibility var(--t-ui) var(--ease-ui)}
.js .tour-panel.on{opacity:1; visibility:visible}
html:not(.js) .tour-tabs{display:none}
.mods2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; border-top:1px solid var(--rule-2)}
.mod2{padding:24px 0; border-bottom:1px solid var(--rule); scroll-margin-top:88px}
.mod2 h3{margin:0 0 8px; font-size:var(--fs-h3)}
.crop{margin:0 0 16px; overflow:hidden; aspect-ratio:calc(var(--w) / var(--h)); border:1px solid var(--rule-2);
border-radius:var(--r-3); background:var(--card)}
.crop.phone{max-width:280px}
.crop picture{display:block}
.crop img{display:block; max-width:none; height:auto; width:calc(var(--sw) / var(--w) * 100%);
margin-left:calc(var(--x) / var(--w) * -100%); margin-top:calc(var(--y) / var(--w) * -100%)}
.crop.cut img{width:100%; margin:0}
.mod2 p{margin:0; color:var(--ink-2); font-size:var(--fs-body); line-height:1.6}
.mod2 .eg{margin-top:12px; padding-left:12px; border-left:2px solid var(--rule-2); color:var(--ink); font-size:var(--fs-small);
font-variant-numeric:tabular-nums}
.limits.coming{margin-top:32px}
@media (max-width:900px){ .mods2{grid-template-columns:minmax(0,1fr)} }
.askdemo{display:grid; grid-template-columns:minmax(0,.36fr) minmax(0,.64fr); gap:40px; align-items:start}
.ask-qs{display:flex; flex-direction:column; border-top:1px solid var(--rule-2)}
.ask-qs [role="tab"]{min-height:52px; padding:0 16px 0 14px; text-align:left; background:none; border:0; border-bottom:1px solid var(--rule);
border-left:2px solid transparent;
color:var(--ink-2); font:500 var(--fs-body)/1.3 var(--sans); cursor:pointer;
transition:background var(--t-fast) var(--ease-ui), color var(--t-fast) var(--ease-ui)}
.ask-qs [role="tab"]:hover{background:var(--raised); color:var(--ink)}
.ask-qs [role="tab"]:active{transform:translateY(1px)}
.ask-qs [aria-selected="true"]{color:var(--ink); background:var(--card); border-left-color:var(--ink)}
.ask-as{min-width:0}
.ask-a{padding:24px; border:1px solid var(--rule-2); border-radius:var(--r-3); background:var(--card); margin-bottom:16px}
.said{margin:0 0 20px; font:500 var(--fs-lede)/1.5 var(--sans); color:var(--ink); text-wrap:pretty}
.js .ask-as{display:grid}
.js .ask-a{grid-area:1/1; margin:0; opacity:0; visibility:hidden;
transition:opacity var(--t-ui) var(--ease-ui), visibility var(--t-ui) var(--ease-ui)}
.js .ask-a.on{opacity:1; visibility:visible}
html:not(.js) .ask-qs{display:none}
@media (max-width:900px){
.askdemo{grid-template-columns:minmax(0,1fr); gap:20px}
.ask-qs{flex-direction:row; flex-wrap:wrap; gap:8px; border-top:0}
.ask-qs [role="tab"]{min-height:44px; border:1px solid var(--edge); border-radius:var(--r-2)}
.ask-qs [aria-selected="true"]{border-color:var(--ink); background:var(--ink); color:var(--on-ink)}
}
.claude{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px; align-items:start}
.claude h3{margin:0 0 8px; font-size:var(--fs-h3)}
.claude p{margin:0 0 20px; color:var(--ink-2)}
.claude .has{font-size:var(--fs-small); color:var(--ink-2)}
.claude .has li{padding-block:4px}
.payload{margin:0; padding:20px; border:1px solid var(--rule-2); border-radius:var(--r-3); background:var(--card);
overflow-x:auto; font:400 var(--fs-prov)/1.6 var(--mono); color:var(--ink-2); white-space:pre}
.payload code{font:inherit}
@media (max-width:900px){ .claude{grid-template-columns:minmax(0,1fr); gap:24px} }
.ph .board{margin:8px 0 0}
.board{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); border:1px solid var(--rule-2);
border-radius:var(--r-3); background:var(--card); overflow:hidden}
.board-sw{padding:24px; border-right:1px solid var(--rule)}
.board .h3{margin:0 0 4px; font-size:var(--fs-h3); letter-spacing:-.01em}
.board-sw > p, .board-out > p{margin:0 0 16px; font-size:var(--fs-small); color:var(--ink-3)}
.sw{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:56px; padding:8px 0;
background:none; border:0; border-top:1px solid var(--rule); color:var(--ink); text-align:left; cursor:pointer;
font:500 var(--fs-body)/1.3 var(--sans)}
.sw:last-child{border-bottom:1px solid var(--rule)}
.sw b{display:block; font-weight:600}
.sw small{display:block; margin-top:2px; font-size:var(--fs-caption); font-weight:400; color:var(--ink-3)}
.sw .track{flex:none; position:relative; width:34px; height:20px; border-radius:10px; background:var(--card);
border:1px solid var(--edge); transition:background var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui)}
.sw .track::after{content:""; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%;
background:var(--ink-2); transition:transform var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui)}
.sw[aria-pressed="true"] .track{background:var(--signal); border-color:var(--signal)}
.sw[aria-pressed="true"] .track::after{transform:translateX(14px); background:var(--card)}
.sw:active .track{transform:translateY(1px)}
.board-out{padding:24px; min-width:0}
.req{margin:0; padding:0; list-style:none}
.req li{padding:12px 0; border-top:1px solid var(--rule); font-size:var(--fs-small); color:var(--ink-3); line-height:1.55;
animation:arrive var(--t-ui) var(--ease-ui)}
.req li:last-child{border-bottom:1px solid var(--rule)}
.req b{display:block; font-weight:600; color:var(--ink)}
.req code{display:block; margin:4px 0; font:400 var(--fs-prov)/1.6 var(--mono); color:var(--ink-2); overflow-wrap:anywhere; white-space:pre-wrap}
.req .none{color:var(--ink-2); font-size:var(--fs-body)}
@keyframes arrive{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.ph .board + .ph-cap{margin-bottom:28px}
@media (max-width:900px){ .board{grid-template-columns:minmax(0,1fr)} .board-sw{border-right:0; border-bottom:1px solid var(--rule)} }
@media (max-width:560px){ .board-sw, .board-out{padding:16px} }
.arch{display:grid; grid-template-columns:200px minmax(0,68ch); gap:56px; justify-content:center; align-items:start}
.arch .prose{margin:0; min-width:0}
.toc{position:sticky; top:88px; padding-top:84px; font-size:var(--fs-small)}
.toc > p{margin:0 0 8px; font-weight:600; color:var(--ink)}
.toc ol{margin:0; padding:0; list-style:none; border-left:1px solid var(--rule-2)}
.toc a{display:block; padding:6px 0 6px 14px; color:var(--ink-3); line-height:1.4; text-decoration:none}
.toc a:hover{color:var(--ink)}
.prose [id]{scroll-margin-top:88px}
.prose code{font:400 var(--fs-prov)/1.5 var(--mono); color:var(--ink); background:var(--plate); padding:1px 4px;
border-radius:var(--r-1); overflow-wrap:anywhere}
.prose table.conns td, .prose table.history td{font-size:var(--fs-small)}
.prose table.conns th[scope="row"], .prose table.history th[scope="row"]{color:var(--ink); font-weight:600; font-size:var(--fs-small)}
.prose table.history th[scope="row"]{font-variant-numeric:tabular-nums; white-space:nowrap}
.flow2{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); margin:24px 0 8px; border:1px solid var(--rule-2);
border-radius:var(--r-3); background:var(--card); overflow:hidden}
.flow2 .pc{padding:20px; border-right:1px solid var(--rule)}
.flow2 .pc-h{margin:0 0 12px; font:500 var(--fs-prov)/1.3 var(--mono); color:var(--ink-3)}
.flow2 .node{position:relative; margin:0; padding:10px 12px; border:1px solid var(--rule-2); border-radius:var(--r-2);
font-size:var(--fs-small); color:var(--ink); line-height:1.4}
.flow2 .node + .node{margin-top:20px}
.flow2 .node + .node::before{content:""; position:absolute; left:50%; top:-21px; width:1px; height:20px; background:var(--ink)}
.flow2 .node.here{border-color:var(--ink); background:var(--plate)}
.flow2 small{display:block; font-size:var(--fs-caption); color:var(--ink-3)}
.flow2 .outs{margin:0; padding:20px; list-style:none; display:flex; flex-direction:column; justify-content:center; gap:4px}
.flow2 .outs li{display:grid; grid-template-columns:40px auto minmax(0,1fr); gap:10px; align-items:center; padding:8px 0;
margin:0; font-size:var(--fs-small); color:var(--ink); line-height:1.4}
.flow2 .wire{height:0; border-top:1px dashed var(--ink-3)}
.flow2 .off{font:500 var(--fs-prov)/1 var(--mono); color:var(--ink-3); padding:2px 4px; border:1px solid var(--rule-2); border-radius:var(--r-1)}
.flow2 figcaption{grid-column:1 / -1; padding:12px 20px; border-top:1px solid var(--rule); font-size:var(--fs-caption); color:var(--ink-3)}
@media (max-width:900px){
.arch{grid-template-columns:minmax(0,1fr); gap:0}
.toc{position:static; padding-top:56px}
.arch .prose{padding-top:40px}
}
@media (max-width:560px){
.flow2{grid-template-columns:minmax(0,1fr)}
.flow2 .pc{border-right:0; border-bottom:1px solid var(--rule)}
.flow2 .outs li{grid-template-columns:24px auto minmax(0,1fr)}
}
.ghost:active{opacity:.7}
.cta[aria-disabled="true"], .btn-line[aria-disabled="true"], .ghost[aria-disabled="true"], .plat[aria-disabled="true"],
.cta:disabled, .btn-line:disabled, .ghost:disabled{opacity:.45; cursor:not-allowed; pointer-events:none; transform:none}
.fade-img{opacity:0}
.fade-img.in{opacity:1; transition:opacity var(--t-ui) var(--ease-ui)}
@media (prefers-reduced-motion:reduce){ .fade-img.in{transition:none} }
.ph-split > .tour{margin-top:0; min-width:0}
.ph-split > .tour .ph-cap{margin-top:12px}
.ph-split:has(> .tour){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start}
@media (max-width:900px){ .ph-split:has(> .tour){grid-template-columns:minmax(0,1fr)} }
.ph-cap, .limits li, .sec-body p, .cap-fig figcaption{max-width:68ch}
.flow2 small, .arch small{font-size:var(--fs-caption)}
.close.alt{background:var(--plate); border-top:1px solid var(--rule)}
.ph-split > .hero-cap{margin-top:0; min-width:0}
.ltoc.strip{border-bottom:1px solid var(--rule)}
.ltoc.strip .wrap{display:flex; align-items:center; gap:24px}
.ltoc.strip .ltoc-h{flex:none; margin:0; font-size:var(--fs-small); color:var(--ink-3)}
.ltoc.strip ol{display:flex; gap:24px; margin:0; padding:0; list-style:none; overflow-x:auto}
.ltoc.strip li{flex:none; font-size:var(--fs-small)}
.ltoc.strip a{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:24px; white-space:nowrap}
.sec[id], .phase[id]{scroll-margin-top:88px}
@media (max-width:560px){ .ltoc.strip .wrap{gap:12px} .ltoc.strip ol{gap:16px} }
@media (max-width:900px){ .toc{padding-top:40px} .toc ol{display:flex; gap:16px; overflow-x:auto; border-left:0} .toc li{flex:none} .toc a{display:inline-flex; align-items:center; min-height:44px; padding:0; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; color:var(--ink)} }
@media (min-width:1000px) and (min-height:650px) and (prefers-reduced-motion:no-preference){
.mods2{grid-template-columns:minmax(0,1fr)}
.mod2{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); grid-template-rows:auto auto 1fr; gap:0 56px;
align-content:start; min-height:clamp(240px,30vh,320px); padding:24px 0}
.mod2 > :not(.crop):not(.cs){grid-column:1; max-width:46ch}
.mod2 > .crop, .mod2 > .cs{grid-column:2; grid-row:1 / span 3; position:sticky; top:96px; align-self:start; margin:0}
.mod2 > h3{margin-top:0}
.mod2 > .eg{align-self:start}
}
@supports (animation-timeline:view()){
@media (min-width:1000px) and (min-height:650px) and (prefers-reduced-motion:no-preference){
@keyframes beat-in{from{opacity:.25; transform:translateY(12px)} to{opacity:1; transform:none}}
.mod2 > .crop, .mod2 > .cs{animation:beat-in linear both; animation-timeline:view(); animation-range:entry 0% entry 50%}
}
}
@media (max-width:560px){ .ltoc.strip .ltoc-h{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .ltoc.strip ol{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent); padding-right:32px} }
.bare .wkc{display:none}
.bare .wk .wr:not(.tot){display:none}
html:not(.js) [data-wk]{display:none}
.ghost[data-wk]::after{content:" \00b7  on"; color:var(--ink-3)}
.ghost[data-wk][aria-pressed="false"]::after{content:" \00b7  off"}
.wl .op{margin-right:6px; color:var(--ink-3)}
.eg .fig{font-weight:600}
.wkp{margin:12px 0 0}
.ghost[data-wk]{background:none; border:0; cursor:pointer; font:inherit; font-weight:500; color:var(--ink); padding:12px 4px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--edge)}
:root{--fs-proof:clamp(72px, 40px + 4vw, 112px)}
.zero-split{align-items:end}
.zero-fig{display:flex; align-items:baseline; gap:16px; margin:0; padding-bottom:8px}
.zero-fig b{font:600 var(--fs-proof)/.9 var(--display); letter-spacing:-.05em}
.zero-fig span{max-width:17em; font-size:var(--fs-small); color:var(--ink-2)}
@media (max-width:900px){ .zero-fig{padding-bottom:0} }
.mob{display:none}
@media (max-width:700px){ .mob{display:block} .desk, [data-mob] > .crop, [data-mob] > .cs, .ph-split > .tour{display:none} .mob .crop{margin:0 0 16px} }
.ph-vis{margin:0; min-width:0}
.ph-vis figcaption{margin-top:12px; font-size:var(--fs-caption); line-height:1.6; color:var(--ink-3)}
.cs{margin:0 0 16px}
.cs .crop{margin:0}
.csp{position:relative}
.tp-marks{position:absolute; inset:0; margin:0; padding:0; list-style:none; pointer-events:none}
.tp-marks li{position:absolute; display:grid; place-items:center; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:var(--on-ink); color:var(--ink); font:600 var(--fs-caption)/1 var(--sans); box-shadow:0 0 0 2px var(--ink)}
@media (prefers-color-scheme: dark){ .tp-marks li{background:var(--ink); color:var(--on-ink); box-shadow:0 0 0 2px var(--on-ink)} }
.cs .tp-notes{display:grid; gap:6px; margin:12px 0 0; padding:0; list-style:none; counter-reset:note; font-size:var(--fs-small); line-height:1.5}
.cs .tp-notes li{counter-increment:note; display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; margin:0; color:var(--ink-2)}
.cs .tp-notes li::before{content:counter(note); font:600 var(--fs-caption)/1.6 var(--sans); color:var(--ink)}
@media (max-width:560px){ .tp-marks{display:none} }
.gl{color:inherit;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;cursor:help}
.gl:hover{text-decoration-style:solid}