/* Placement of the two illustrations in v25. This only adds rules; v25.css is untouched. */
/* 01 the ontology: the twin sits where the define-readers iframe was; .on-box keeps its shadow */
.on-fig .tw-fig{width:100%}
/* the name section becomes the tacit scale: same pine as the footer, room to breathe */
.ts-sec{position:relative;background:var(--pine-800);color:var(--dk-ink);padding:var(--sp-4) 0;border-bottom:1px solid var(--dk-hair)}
/* (ours, item 76) the slider and its columns sit narrower and centred under the drawing; full width on phones */
.ts-ctl,.ts-list{width:min(100%,max(64%,760px));margin-left:auto;margin-right:auto}
@container (min-width:641px){.ts-list{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
/* (ours, item 77) the slider reads as a slider: a knob with arrows, no hairline under the stop names (it looked like a
   second track), and the lines still to come sit in place, blurred, clearing as the slider reaches them */
.ts .ts-rail{left:15px;right:15px}
.ts .ts-range::-webkit-slider-thumb{width:30px;height:30px;margin-top:7px;background:var(--ts-dk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M5 1 1 5l4 4M13 1l4 4-4 4' fill='none' stroke='%2318311e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 10px no-repeat}
.ts .ts-range::-moz-range-thumb{width:30px;height:30px;background:var(--ts-dk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M5 1 1 5l4 4M13 1l4 4-4 4' fill='none' stroke='%2318311e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 10px no-repeat}
.ts.ts-at-t .ts-range::-webkit-slider-thumb{background:var(--ts-coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M5 1 1 5l4 4M13 1l4 4-4 4' fill='none' stroke='%23fffdf8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 10px no-repeat}
.ts.ts-at-t .ts-range::-moz-range-thumb{background:var(--ts-coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M5 1 1 5l4 4M13 1l4 4-4 4' fill='none' stroke='%23fffdf8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 10px no-repeat}
.ts .ts-list{border-top:0;padding-top:0;margin-top:24px}
.ts .ts-list li,.ts .ts-list li.ts-off{transform:none;opacity:calc(.1 + .9*var(--ts-k,1));filter:blur(calc((1 - var(--ts-k,1))*6px));transition:opacity .4s,filter .4s}
@container (max-width:640px){.ts .ts-grp.ts-off,.ts .ts-list li.ts-off{display:block}}
@media (prefers-reduced-motion:reduce){.ts .ts-list li,.ts .ts-list li.ts-off{transition:none}}
/* (ours, item 78) the first pass: the scale pins under the nav while the page's scroll drives the slider (site/ts.js) */
.ts.ts-pinned{position:sticky}
/* (ours, item 79) the v2 drawing is taller (viewBox 722) and its tallest bar at Explicit came within 8-10 px of the frame's
   top (5 px on phones) while the sides had ~270 px; padding inside the frame gives it room without touching the SVG */
.ts .ts-svg{box-sizing:border-box;padding:clamp(14px,2.2vw,30px) 0}