/* Tacit · "the tacit scale". Everything is scoped under .ts / .ts-. Light frame on the dark section (see README). */
.ts{--ts-ink:#18311e;--ts-coral:#de6a4b;--ts-dk:#f1efe4;--ts-dk2:#c2cec1;--ts-dk3:#8fa08d;container-type:inline-size;color:var(--ts-dk)}
.ts-fig{position:relative;margin:0;overflow:hidden;border-radius:14px;box-shadow:0 1px 0 rgba(0,0,0,.18),0 32px 64px -32px rgba(0,0,0,.65);background:repeating-linear-gradient(26.57deg,rgba(24,49,30,.07) 0 .6px,transparent .6px 14px),repeating-linear-gradient(-26.57deg,rgba(24,49,30,.07) 0 .6px,transparent .6px 14px),#f7f4ec}
.ts-svg{display:block;width:100%;height:min(58vh,620px);min-height:300px}
/* drawing vocabulary — the same as the "What it holds" plates */
.ts-svg .tp{fill:#fffdf8}.ts-svg .sl{fill:#efe9dc}.ts-svg .sr{fill:#e4ddcc}
.ts-svg .tp,.ts-svg .sl,.ts-svg .sr,.ts-svg .ln,.ts-svg .bx{stroke:var(--ts-ink);stroke-width:1;stroke-linejoin:round}
.ts-svg .ln{fill:none}.ts-svg .bx{fill:#fffdf8}.ts-svg .dot{fill:#fffdf8;stroke:var(--ts-ink);stroke-width:1}
.ts-svg .wt{stroke:#fff;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ts-svg .ts-ink{fill:var(--ts-ink)}
.ts-svg .ts-grid{fill:none;stroke:var(--ts-ink);stroke-opacity:.075;stroke-width:.7}
/* the three kinds of knowledge: solid · dashed · dotted, as on the scale line */
.ts-svg .ts-ln{fill:none;stroke:var(--ts-ink);stroke-width:1.2;stroke-linejoin:round}
.ts-svg .ts-i{stroke-dasharray:5 4}
.ts-svg .ts-t{stroke-dasharray:.1 4.2;stroke-linecap:round;stroke-width:1.7}
.ts-svg .ts-stem{stroke:var(--ts-ink);stroke-opacity:.55;stroke-width:1}
.ts-svg .ts-stem.ts-t{stroke-width:1.5;stroke-opacity:.7}
.ts-svg .ts-ft{fill:var(--ts-ink);opacity:.45}
.ts-svg .tp.ts-tdot{stroke-dasharray:.1 3.2;stroke-linecap:round;stroke-width:1.5}
.ts-svg .ts-hi{fill:none;stroke:var(--ts-coral);stroke-width:1.8;opacity:0}
.ts-svg .ts-mk{fill:none;stroke:#fff;stroke-width:6}
/* labels */
.ts-svg text{paint-order:stroke;stroke:#fffdf8;stroke-width:5px;stroke-linejoin:round}
.ts-svg .ts-tl{font:500 14.5px/1 "JetBrains Mono",monospace;fill:var(--ts-ink)}
.ts-svg .ts-tl.ts-ts{font-size:15.5px;font-weight:600}
.ts-svg .ts-tm{font:500 13px/1 "JetBrains Mono",monospace;fill:#44503f}
.ts-svg .ts-to{font:600 12.5px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;fill:var(--ts-ink)}
.ts-svg .ts-tc{font:600 7.5px/1 "JetBrains Mono",monospace;fill:var(--ts-ink);stroke:none}
/* hallucination level */
.ts-svg .ts-bar{--c:color-mix(in oklab,#ed8a6b,#8fa286 calc(var(--g,0)*100%))}
.ts-svg .ts-bar .tp{fill:var(--c)}.ts-svg .ts-bar .sl{fill:color-mix(in oklab,#efe9dc,var(--c) 38%)}.ts-svg .ts-bar .sr{fill:color-mix(in oklab,#e4ddcc,var(--c) 52%)}
.ts-svg .ts-ft2{fill:none;stroke:var(--ts-ink);stroke-opacity:.35;stroke-dasharray:2 2.5}
/* without JS: the explicit still */
.ts-svg .ts-k1,.ts-svg .ts-k2{opacity:0}
/* ---- the slider ---- */
.ts-ctl{margin-top:24px}
.ts-track{position:relative;height:44px}
.ts-rail{position:absolute;left:11px;right:11px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:rgba(241,239,228,.18)}
.ts-fill{position:absolute;left:0;top:0;bottom:0;width:var(--ts-v,0%);border-radius:2px;background:rgba(241,239,228,.7)}
.ts-range{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:grab;touch-action:pan-y}
.ts-range:active{cursor:grabbing}
.ts-range::-webkit-slider-runnable-track{height:44px;background:none}
.ts-range::-moz-range-track{height:44px;background:none}
.ts-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:11px;border:0;border-radius:50%;background:var(--ts-dk);box-shadow:0 0 0 6px rgba(241,239,228,.12),0 2px 8px rgba(0,0,0,.35);transition:background .3s,box-shadow .3s}
.ts-range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--ts-dk);box-shadow:0 0 0 6px rgba(241,239,228,.12),0 2px 8px rgba(0,0,0,.35);transition:background .3s,box-shadow .3s}
.ts.ts-at-t .ts-range::-webkit-slider-thumb{background:var(--ts-coral);box-shadow:0 0 0 6px rgba(222,106,75,.2),0 2px 8px rgba(0,0,0,.35)}
.ts.ts-at-t .ts-range::-moz-range-thumb{background:var(--ts-coral);box-shadow:0 0 0 6px rgba(222,106,75,.2),0 2px 8px rgba(0,0,0,.35)}
.ts-range:focus{outline:none}
.ts-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #112215,0 0 0 5px var(--ts-dk)}
.ts-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #112215,0 0 0 5px var(--ts-dk)}
.ts-hint .ts-range::-webkit-slider-thumb{box-shadow:0 0 0 12px rgba(241,239,228,.14),0 2px 8px rgba(0,0,0,.35)}
.ts-hint .ts-range::-moz-range-thumb{box-shadow:0 0 0 12px rgba(241,239,228,.14),0 2px 8px rgba(0,0,0,.35)}
.ts:not(.ts-on) .ts-range{visibility:hidden}
.ts-stops{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;margin-top:6px}
.ts-stop{padding:0;border:0;background:none;color:var(--ts-dk);font:400 clamp(24px,2.6vw,36px)/1 Newsreader,Georgia,serif;letter-spacing:-.01em;cursor:pointer;transition:color .3s}
.ts-stop:nth-child(1){justify-self:start}.ts-stop:nth-child(3){justify-self:end}
.ts-stop:hover{color:#fff}
.ts-stop:focus-visible{outline:2px solid var(--ts-dk);outline-offset:4px;border-radius:2px}
/* the three columns: what each kind of knowledge adds, arriving with the slider (also the text alternative) */
.ts-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px clamp(20px,3vw,48px);margin-top:20px;padding-top:18px;border-top:1px solid rgba(241,239,228,.14)}
.ts-hal{display:none}
.ts-gk{margin:0 0 10px;font:500 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ts-dk3)}
.ts-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ts-list li{font:400 16px/1.4 "Hanken Grotesk",system-ui,sans-serif;color:var(--ts-dk2);text-wrap:pretty;transition:opacity .4s,transform .4s}
.ts-list li.ts-off{opacity:0;transform:translateY(4px)}
.ts-grp:nth-of-type(2){text-align:center}.ts-grp:nth-of-type(3){text-align:right}
@media (prefers-reduced-motion:reduce){.ts-range::-webkit-slider-thumb,.ts-range::-moz-range-thumb,.ts-stop,.ts-list li{transition:none}}
@container (max-width:640px){
 .ts-svg{height:auto;min-height:0}
 .ts-svg text{display:none}
 .ts-stop{font-size:24px}
 .ts-list{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:22px}
 .ts-grp:nth-of-type(2),.ts-grp:nth-of-type(3){text-align:left}
 .ts-hal{display:block;margin:0;font:400 14px/1.45 "Hanken Grotesk",system-ui,sans-serif;color:var(--ts-dk3)}
 .ts-grp.ts-off,.ts-list li.ts-off{display:none}
 .ts-list li{padding:6px 0;border-top:1px solid rgba(241,239,228,.12)}
}