/* Personalization on Demand, the essay: a reading column on the light sheet (read.css), and its figures as plates.
   Loads after tokens.css, pages.css and read.css. A figure's picture is drawn by assets/pod/draw.js; what stands in
   the page before any script runs is that same markup, so these rules style both. The palette is the essay's own
   pictures': warm paper, ink, lavender for the first visitor and sage for the second. */
.pod{--pp:#fffdf8;--pi:#231e16;--pm:#5f574a;--pr:#ddd6c8;--ps:#ebe6da;--lav:#ddd3ee;--lav-d:#6a52b8;--sage:#d5e3cd;--sage-d:#2e6a4d;--gold:#f4b829;--bad:#b3261e;--bad-s:#fbe9e6;--tile:#f5f2ec}
.pod,.pod *,.pod *::before,.pod *::after{box-sizing:border-box}
.pod .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pod .p-band>header .subtitle{margin-top:18px;font:500 13px/1.4 var(--mono);letter-spacing:.04em;color:#cfccd8}
.pod-about{max-width:36em;margin:14px 0 0;color:#dcd9e4;font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.6}
.pod .p-band .hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.pod .p-band .button{display:inline-flex;align-items:center;justify-content:center}
.pod-cover{display:block;padding:0;overflow:hidden;background:#f6ecdb}
.pod .reading-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:26px}
.pod .reading-map span{display:block}
.pod .p-band .hero-actions{margin-top:18px}
.pod-cover img{display:block;width:100%;height:auto}

/* ---------- the reading column ---------- */
.pod-essay{padding:clamp(20px,4vw,56px) 0 clamp(12px,3vw,40px)}
.pod-essay>section,.pod-end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,43.5rem) minmax(0,1fr)}
.pod-essay>section>*,.pod-end>*{grid-column:2;min-width:0}
.pod-essay>section>.fig{grid-column:1/-1;justify-self:center;width:100%;max-width:60rem}
.pod-essay>section+section{margin-top:clamp(34px,5vw,64px);padding-top:clamp(30px,4.4vw,56px);border-top:1px solid var(--line)}
.pod-essay p{margin:0 0 1.05em;font-size:18px;line-height:1.72;color:var(--ink)}
.pod .p-sheet .pod-essay .lead{font-size:clamp(1.24rem,2vw,1.46rem);line-height:1.5;letter-spacing:-.014em}
.pod-essay h2{margin:0 0 .75em;font:650 clamp(1.8rem,3.4vw,2.6rem)/1.06 var(--sans);letter-spacing:-.035em;color:var(--ink)}
.pod-no{display:block;margin-bottom:10px;font:400 italic 1.5rem/1 var(--serif);letter-spacing:0;color:var(--accent-dark)}
.pod-no::before{content:"№ "}
.pod-end{margin-top:clamp(34px,5vw,64px);padding-top:26px;border-top:1px solid var(--line)}
.pod-essay .pod-end p{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ---------- a figure: a plate with its number, its name, its picture and a note ---------- */
.fig{margin:1.5rem 0 2.2rem;border-radius:22px;background:var(--pp);color:var(--pi);box-shadow:0 0 0 1px rgba(35,30,22,.16),0 1px 0 #fff inset,0 34px 60px -46px rgba(35,30,22,.55);overflow:hidden}
.fig-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:18px clamp(14px,3vw,26px) 15px;border-bottom:1px solid var(--pr)}
.fig-no{font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--pm)}
.pod .fig-head h3{margin:0;font:400 italic clamp(1.55rem,3vw,2rem)/1.05 var(--serif);letter-spacing:-.005em;color:var(--pi)}
.fig-tag{margin-left:auto;align-self:center;padding:5px 10px;border-radius:999px;background:var(--gold);font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pi)}
.fig-live{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:clamp(14px,3vw,26px)}
.fig figcaption{padding:15px clamp(14px,3vw,26px) 18px;border-top:1px solid var(--pr);background:#f8f4ec}
.pod-essay .fig figcaption p{max-width:46rem;margin:0;font-size:15.5px;line-height:1.55;color:var(--pi)}
.pod-essay .fig figcaption p+p{margin-top:8px}
.pod-essay .fig figcaption .fig-note{font-size:13.5px;line-height:1.6;color:var(--pm)}
.pod .fig figcaption a{color:var(--pi);text-decoration-color:var(--pm)}
.fig-still{display:none;padding:clamp(10px,2vw,18px)}
.fig-still img{display:block;width:100%;max-width:720px;height:auto;margin:0 auto;border-radius:12px}
html:not(.js) .fig-still{display:block}
html:not(.js) .fig-still~.fig-live,html:not(.js) .fig-ctl,html:not(.js) .says-js{display:none}
.fig:not(.live) .fig-ctl{visibility:hidden}
.fig img{max-width:none}

/* ---------- what a reader presses ---------- */
.fig-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.pf-btn,.pf-switch{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--pr);background:var(--ps);color:var(--pi);font:500 13.5px/1.15 var(--mono);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.pf-btn:hover,.pf-switch:hover{border-color:var(--pi)}
.pf-btn[aria-pressed="true"]{background:var(--pi);border-color:var(--pi);color:var(--pp)}
.pf-btn.go{background:var(--gold);border-color:var(--pi);font-weight:700;box-shadow:2px 2px 0 var(--pi)}
.pf-btn[hidden]{display:none}
.pod .fig :focus-visible{outline:3px solid #2f4f9a;outline-offset:2px;border-radius:999px}
.pf-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:26px;background:var(--ps)}
.pf-seg .pf-btn{min-height:44px;border-color:transparent;background:none}
.pf-seg .pf-btn[aria-pressed="true"]{background:var(--pi)}
.pf-switch{display:inline-flex;align-items:center;gap:10px;padding-left:10px;background:none;text-align:left}
.pf-switch::before{content:"";flex:none;width:34px;height:20px;border-radius:999px;background:radial-gradient(circle at 10px 10px,var(--pp) 0 7px,transparent 7.5px),#b9b0a0;transition:background-color .15s}
.pf-switch[aria-checked="true"]{border-color:var(--pi)}
.pf-switch[aria-checked="true"]::before{background:radial-gradient(circle at 24px 10px,var(--pp) 0 7px,transparent 7.5px),var(--pi)}
.pf-n{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--pi);color:#fff;font:700 11.5px/1 var(--mono)}
.pf-line{display:block;width:100%;height:10px}
.pf-line .zero{stroke:var(--pi);stroke-width:1.5;vector-effect:non-scaling-stroke}
.d-lighting{--c:#e2a91f}.d-furniture{--c:#3e6fb3}.d-decor{--c:#ef6a4c}.d-kitchen{--c:#3f9c74}.d-storage-garden{--c:#8b74ff}

/* ---------- 1: two phones ---------- */
.pf-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,4vw,56px);width:100%;max-width:44rem;margin:0 auto}
.pf-phone{--tone:var(--lav);--tone-d:var(--lav-d);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;min-width:0}
.pf-b{--tone:var(--sage);--tone-d:var(--sage-d)}
.pod .p-sheet .pf-phone h4,.pod .p-sheet .pf-box h4{font-family:var(--sans);letter-spacing:-.015em}
.pod .pf-phone h4{margin:0;padding:11px 14px;border-radius:12px;background:var(--tone);font:700 clamp(13px,2.2vw,16.5px)/1.2 var(--sans);letter-spacing:-.01em;color:var(--pi)}
.pod-essay .pf-saw{display:flex;align-items:center;gap:clamp(3px,1vw,5px);min-height:28px;overflow:hidden;white-space:nowrap;margin:0;font:500 11.5px/1 var(--mono);color:var(--pm)}
.pf-saw span{flex:none;margin-right:3px}
.pf-saw img{flex:none;width:clamp(22px,6vw,28px);height:clamp(22px,6vw,28px);border-radius:7px;background:var(--tile);box-shadow:0 0 0 1px var(--pr)}
.pf-screen{position:relative;padding:26px clamp(7px,1.6vw,14px) clamp(10px,2vw,16px);border:2px solid var(--pi);border-radius:clamp(22px,4vw,34px);background:#fff;box-shadow:4px 4px 0 var(--pi)}
.pf-screen::before{content:"";position:absolute;left:50%;top:9px;width:54px;height:7px;margin-left:-27px;border-radius:999px;background:var(--pi)}
.pod-essay .pf-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 3px 9px;font:500 11px/1 var(--mono);color:var(--pm)}
.pf-top b{font:400 italic clamp(20px,3.4vw,27px)/1 var(--serif);color:var(--pi)}
.pf-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px clamp(6px,1.4vw,10px)}
.pf-grid li{position:relative;min-width:0}
.pf-tile{display:grid;gap:5px;width:100%;min-height:44px;padding:0 0 3px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left}
button.pf-tile{cursor:pointer}
.pf-tile img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px;background:var(--tile);box-shadow:0 0 0 1px var(--pr);transition:box-shadow .15s}
button.pf-tile:hover img{box-shadow:0 0 0 2px var(--pi)}
.pod .fig button.pf-tile:focus-visible{border-radius:12px}
.pf-tile .pf-n{position:absolute;left:6px;top:6px}
.pf-name{display:-webkit-box;min-height:2.5em;padding:0 2px;font:500 clamp(11px,1.8vw,12.5px)/1.25 var(--sans);overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.pf-fold{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:1px 0 3px;font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pm)}
.pf-fold::before,.pf-fold::after{content:"";flex:1;border-top:1.5px dashed var(--pm)}
.pf-moved{display:grid;gap:10px;padding:12px clamp(8px,1.6vw,14px);border-radius:14px;background:#f8f4ec;box-shadow:0 0 0 1px var(--pr)}
.pod-essay .pf-moved p{display:grid;gap:3px;margin:0;font-size:14px;line-height:1.25;color:var(--pi)}
.pf-moved p span{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pm)}
.pf-moved p i{font:500 11px/1.3 var(--mono);font-style:normal;color:var(--pm)}
.pf-bars{display:grid;gap:5px;margin:0}
.pf-bars div{display:grid;grid-template-columns:minmax(0,8.6em) minmax(0,1fr);align-items:center;gap:2px 8px}
.pf-bars dt{font:500 11px/1.2 var(--mono);color:var(--pm)}
.pf-bars dd{display:grid;grid-template-columns:minmax(0,1fr) 4.6em;align-items:center;gap:6px;margin:0}
.pf-bars b{font:600 11px/1 var(--mono);text-align:right}
.pf-line.pos .v{fill:var(--tone-d)}.pf-line.neg .v{fill:#b9b0a0}

/* ---------- 2: a search answered by meaning ---------- */
.pf-search{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pod-essay .pf-query{display:flex;align-items:center;gap:10px;min-height:52px;margin:0;padding:0 20px;border:1.5px solid var(--pi);border-radius:999px;background:#fff;font:500 17px/1.2 var(--sans);color:var(--pi)}
.pf-query::before{content:"";flex:none;width:13px;height:13px;border:2px solid var(--pm);border-radius:50%;box-shadow:5px 5px 0 -4.2px var(--pm)}
.pf-read{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.pf-read li{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--pr);background:#fff;font:500 13px/1 var(--mono)}
.pf-read s{color:var(--pm)}
.pf-read i{padding:3px 7px;border-radius:999px;background:var(--ps);font-size:11px;font-style:normal}
.pf-read .stop{border-style:dashed}
.pf-read .typo,.pf-read .none{border-color:var(--pi)}
.pf-read .typo i{background:var(--gold)}.pf-read .none i{background:var(--lav)}
.pod-essay .pf-how{margin:0;font:500 12.5px/1.3 var(--mono);color:var(--pm)}
.pf-how b{color:var(--pi);font-weight:700}
.pf-found{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-found li{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:3px 12px;min-width:0;padding:8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--pr)}
.pf-found img{grid-row:1/3;width:56px;height:56px;border-radius:10px;background:var(--tile)}
.pf-t{align-self:end;font:500 14px/1.25 var(--sans)}
.pf-kin{align-self:start;font:500 12px/1.2 var(--mono);color:var(--pm)}
.pf-kin b{color:var(--pi)}

/* ---------- 3: from a request to a live model ---------- */
.pf-work{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.pf-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.pf-node{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:1px 10px;min-height:48px;padding:6px 12px 6px 8px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--pr);transition:opacity .2s,box-shadow .2s,background-color .2s}
.pf-no{grid-row:1/3;display:grid;place-items:center;width:30px;height:26px;border-radius:7px;background:var(--lav);font:700 11.5px/1 var(--mono)}
.pf-node:nth-child(n+6) .pf-no{background:var(--sage)}
.pf-node b{font:650 14.5px/1.2 var(--sans);letter-spacing:-.01em}
.pf-node i{font:500 11px/1.25 var(--mono);font-style:normal;color:var(--pm)}
.pf-node[data-state="idle"]{opacity:.42}
.pf-node[data-state="done"]{box-shadow:0 0 0 1.5px var(--pi)}
.pf-node[data-state="running"]{box-shadow:0 0 0 1.5px var(--pi),0 0 0 5px var(--gold)}
.pf-node[data-state="failed"]{background:var(--bad-s);box-shadow:0 0 0 2px var(--bad)}
.pf-node[data-state="failed"] .pf-no{background:var(--bad);color:#fff}
.pf-node[data-state="failed"] i{color:var(--bad);font-weight:700}
.pf-node[data-state="waiting"]{background:#fdf3d3;box-shadow:0 0 0 2px var(--pi)}
.pf-node[data-state="waiting"] .pf-no{background:var(--gold)}
.pf-node[data-state="skipped"]{opacity:.6;box-shadow:none;outline:1.5px dashed var(--pm);outline-offset:-1.5px}
.pf-node[data-state="skipped"] b{text-decoration:line-through}
.pf-ran{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:#f8f4ec;box-shadow:0 0 0 1px var(--pr)}
.playing .pf-ran{visibility:hidden}
.pod-essay .pf-where{margin:0;font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pm)}
.pf-recipe{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pf-recipe li{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px 0 8px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--pr);font:500 12px/1.2 var(--mono)}
.pf-recipe li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--sage-d);color:#fff;font-size:11px}
.pf-recipe li.bad{background:var(--bad-s);box-shadow:0 0 0 1.5px var(--bad)}
.pf-recipe li.bad::before{content:"×";background:var(--bad)}
.pf-recipe span{color:var(--pm)}.pf-recipe li.bad span{color:var(--bad)}
.pod-essay .pf-end,.pod-essay .pf-verdict{margin:2px 0 0;font:400 italic clamp(1.35rem,2.6vw,1.7rem)/1.15 var(--serif);color:var(--pi)}
.pod-essay .pf-end.ok,.pod-essay .pf-verdict.model{color:var(--sage-d)}
.pod-essay .pf-end.bad,.pod-essay .pf-verdict.store{color:var(--bad)}
.pod-essay .pf-end.wait{color:#8a5a00}
.pf-clock{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--pr)}
.pod-essay .pf-clock p{margin:0;font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pm)}
.pf-clock dl{display:grid;gap:6px;margin:0}
.pf-clock dl div{display:grid;grid-template-columns:minmax(0,13.5em) minmax(0,1fr);align-items:center;gap:2px 12px}
.pf-clock dt{font:500 13px/1.25 var(--sans)}
.pf-clock dd{display:grid;grid-template-columns:minmax(0,1fr) 3.4em;align-items:center;gap:10px;margin:0}
.pf-clock .pf-line{height:14px}
.pf-clock .v{fill:var(--pi)}.pf-clock .goal .v{fill:var(--sage-d)}
.pf-clock b{font:700 15px/1 var(--mono);text-align:right}

/* ---------- 4: what a label weighs; what the model is sent ---------- */
.pf-knobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:4px 22px}
.pf-knob{display:grid;grid-template-columns:auto minmax(0,1fr) 3.8em;align-items:center;gap:10px;min-height:44px;font:500 13px/1.15 var(--mono);color:var(--pi)}
.pf-knob label::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:3px;background:var(--k,var(--pr))}
.k-click{--k:#c3b9a6}.k-cart{--k:#9c88dd}.k-buy{--k:var(--pi)}.k-cap label::before{display:none}
.pf-knob input{width:100%;height:44px;margin:0;accent-color:var(--pi);cursor:pointer}
.pf-knob output{font-weight:700;text-align:right}
.pf-knob.off{opacity:.4}
.pf-labels{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pod-essay .pf-rule{justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:30px;margin:0;padding:0 5px 0 12px;border-radius:999px;box-shadow:0 0 0 1px var(--pr);font:500 12px/1 var(--mono);color:var(--pi)}
.pf-rule b{padding:5px 9px;border-radius:999px;background:var(--sage);font-weight:700}
.pf-rule.bad{box-shadow:0 0 0 1.5px var(--bad)}.pf-rule.bad b{background:var(--bad);color:#fff}
.pf-weighed{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pf-weighed li{display:grid;grid-template-columns:22px 44px minmax(0,15rem) minmax(0,1fr) 3.6em;align-items:center;gap:4px 10px;padding:6px 10px 6px 8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--pr)}
.pf-weighed img{width:44px;height:44px;border-radius:9px;background:var(--tile)}
.pod-essay .pf-weighed p{display:grid;gap:3px;margin:0;font-size:14px;line-height:1.2;color:var(--pi)}
.pf-weighed p b{font-weight:600}
.pf-weighed p span{font:500 10.5px/1.35 var(--mono);color:var(--pm)}
.pf-weighed p i{display:inline-block;padding:1px 6px;border-radius:999px;background:var(--gold);font-style:normal;color:var(--pi)}
.pf-line.stack{height:16px}
.stack .click{fill:#c3b9a6}.stack .cart{fill:#9c88dd}.stack .buy{fill:var(--pi)}
.pf-total{font:700 13px/1 var(--mono);text-align:right}
.pf-journal{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.pf-sent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pod-essay .pf-src{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:74px;margin:0;padding:10px 12px;border-radius:14px;background:var(--lav);font-size:13px;line-height:1.2;color:var(--pi)}
.pod-essay .pf-src.s{background:var(--sage)}
.pf-src span{flex:1 0 100%;font:700 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pf-src img{width:36px;height:36px;border-radius:8px;background:var(--tile);box-shadow:0 0 0 1px rgba(35,30,22,.2)}
.pf-src i{font:500 12.5px/36px var(--mono);font-style:normal;color:var(--pm)}
.pf-back{list-style:none;margin:0;padding:0;max-width:36rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pf-back li{position:relative;display:grid;gap:5px;min-width:0}
.pf-back img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px;background:var(--tile);box-shadow:0 0 0 1px var(--pr)}
.pf-back .pf-n{position:absolute;left:6px;top:6px}

/* ---------- 5: the race ---------- */
.pf-race{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pf-lane{display:block;width:100%;height:56px}
.pf-lane .bed{fill:var(--ps)}
.pf-lane .st-out,.pf-lane .st-back{fill:#b9b0a0}.pf-lane .st-history{fill:#9c88dd}.pf-lane .st-model{fill:var(--pi)}
.pf-lane .cut{fill:#d9d0ee}
.pf-lane .dead{stroke:var(--bad);stroke-width:2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.pf-lane .veil{fill:var(--pp);opacity:.94}
.pod-essay .pf-scale{display:flex;justify-content:space-between;gap:8px;margin:2px 0 0;font:500 11px/1.2 var(--mono);color:var(--pm)}
.pf-scale .dead{color:var(--bad);font-weight:700}
.pf-stages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pf-stages li{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 11px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--pr);font:500 12px/1 var(--mono)}
.pf-stages li::before{content:"";width:10px;height:10px;border-radius:3px;background:#b9b0a0}
.pf-stages .st-history::before{background:#9c88dd}.pf-stages .st-model::before{background:var(--pi)}.pf-stages .cut::before{background:#d9d0ee}
.pf-stages i{font-style:normal;color:var(--lav-d)}
.pf-ends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pod-essay .pf-ends p{display:flex;flex-wrap:wrap;align-content:start;align-items:center;gap:6px;margin:0;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--pr);font-size:15px;line-height:1.25;color:var(--pi)}
.pf-ends span{flex:1 0 100%;font:700 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pm)}
.pf-ends b{flex:1 0 100%;font-weight:650}
.pf-ends img{width:36px;height:36px;border-radius:8px;background:var(--tile);box-shadow:0 0 0 1px var(--pr)}
.pod-essay .pf-shopper.store{background:var(--bad-s);box-shadow:0 0 0 1.5px var(--bad)}
.pod-essay .pf-shopper.model{background:#eef5ea;box-shadow:0 0 0 1.5px var(--sage-d)}
.playing .pf-ends p,.playing .pf-verdict{visibility:hidden}
.playing.painted .pf-shopper,.playing.answered .pf-server{visibility:visible}

/* ---------- 6: the experiment ---------- */
.pf-trial{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pf-axes{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px}
.pod-essay .pf-y{display:flex;flex-direction:column;justify-content:space-between;margin:0;font:500 11px/1 var(--mono);color:var(--pm);text-align:right}
.pod-essay .pf-x{grid-column:2;display:flex;justify-content:space-between;margin:0;font:500 11px/1 var(--mono);color:var(--pm)}
.pf-plot{display:block;width:100%;height:clamp(200px,34vw,280px);border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--pr);overflow:hidden}
.pf-plot path,.pf-plot polyline{fill:none;vector-effect:non-scaling-stroke}
.pf-plot .grid{stroke:var(--ps);stroke-width:1}
.pf-plot .zero{stroke:var(--pi);stroke-width:1.2}
.pf-plot .truth{stroke:var(--sage-d);stroke-width:2;stroke-dasharray:6 5}
.pf-plot .band{fill:var(--lav);opacity:.85}
.pf-plot .est{stroke:var(--pi);stroke-width:2.2;stroke-linejoin:round}
.pf-read6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.pf-read6 div{padding:9px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--pr)}
.pf-read6 .wide{grid-column:1/-1;background:var(--lav);box-shadow:none}
.pf-read6 dt{font:600 10.5px/1.25 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pm)}
.pf-read6 dd{margin:5px 0 0;font:700 17px/1.15 var(--mono);letter-spacing:-.02em}
.pf-read6 dd span{font-weight:500;font-size:13px;letter-spacing:0}

/* ---------- 7: the next client ---------- */
.pf-clients{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pf-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pf-box{display:grid;gap:8px;align-content:start;min-width:0;padding:12px;border-radius:16px 16px 4px 4px;background:#fff;box-shadow:0 0 0 1.5px var(--pi)}
.pod .pf-box h4{margin:0;font:650 16px/1.15 var(--sans);letter-spacing:-.02em;color:var(--pi)}
.pod-essay .pf-box p{margin:0;font:500 12px/1.3 var(--mono);color:var(--pm)}
.pf-own b{color:var(--pi)}
.pod-essay .pf-logic{padding:7px 9px;border-radius:9px;background:var(--lav);color:var(--pi)}
.pf-logic span{display:block;margin-bottom:2px;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.pod-essay .pf-box .pf-seeing{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:10px;font:500 13px/1.25 var(--sans);color:var(--pi)}
.pf-seeing img,.pf-like img{display:block;width:56px;height:56px;border-radius:10px;background:var(--tile);box-shadow:0 0 0 1px var(--pr)}
.pf-like{list-style:none;margin:0;padding:8px 0 0;border-top:1.5px dashed var(--pr);display:flex;gap:6px}
.pf-like li{flex:0 1 56px;min-width:0}
.pf-like img{width:100%;height:auto;aspect-ratio:1}
.pod-essay .pf-wall{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:10px 14px;border-radius:12px;background:var(--bad-s);box-shadow:0 0 0 1.5px var(--bad);font-size:14px;line-height:1.3;color:var(--pi)}
.pf-wall i{margin-left:auto;font:700 12px/1 var(--mono);font-style:normal;color:var(--bad)}
.pf-engine{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-radius:4px 4px 16px 16px;background:var(--pi);color:var(--pp)}
.pf-engine b{font:400 italic 1.4rem/1 var(--serif)}
.pf-engine ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pf-engine li{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;box-shadow:0 0 0 1px rgba(255,253,248,.35);font:500 11.5px/1 var(--mono)}
.pf-engine .ck{background:var(--sage);color:var(--pi);box-shadow:none}
.pf-engine .ck::before{content:"✓";font-weight:700}
.pf-engine .ck.off{background:none;color:inherit;box-shadow:none;outline:1.5px dashed rgba(255,253,248,.5);outline-offset:-1.5px;opacity:.7}
.pf-engine .ck.off::before{content:"+"}

@media (min-width:860px){
  .pf-flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 16px}
  .pf-node{grid-template-columns:minmax(0,1fr);align-content:start;gap:5px;min-height:104px;padding:10px 11px 11px}
  .pf-no{grid-row:auto}
  .pf-node:nth-child(6){grid-area:2/5}.pf-node:nth-child(7){grid-area:2/4}.pf-node:nth-child(8){grid-area:2/3}.pf-node:nth-child(9){grid-area:2/2}.pf-node:nth-child(10){grid-area:2/1}
  /* the way through: along the top, down, and back along the bottom */
  .pf-node::after{content:"";position:absolute;left:100%;top:50%;width:16px;height:2px;background:var(--pi)}
  .pf-node:nth-child(5)::after{left:50%;top:100%;width:2px;height:14px}
  .pf-node:nth-child(n+6)::after{left:auto;right:100%}
  .pf-node:nth-child(10)::after{display:none}
}
@media (max-width:859px){
  .pf-flow{padding-left:14px;border-left:2px solid var(--pi)}
  .pf-node::before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:var(--pi)}
}
@media (max-width:640px){
  .pod-essay p{font-size:17px;line-height:1.68}
  .fig{margin-inline:-10px;border-radius:18px}
  .pod .pf-phone h4{display:flex;align-items:center;min-height:3.9em}
  .pf-bars div{grid-template-columns:minmax(0,1fr)}
  .pf-bars dd{grid-template-columns:minmax(0,1fr) 4.4em}
  .pf-found{grid-template-columns:minmax(0,1fr)}
  .pf-clock dl div{grid-template-columns:minmax(0,1fr)}
  .pf-weighed li{grid-template-columns:22px 44px minmax(0,1fr) 3.4em}
  .pf-weighed .pf-line{grid-column:1/4}
  .pf-weighed p{grid-column:3/5}
  .pf-weighed .pf-total{grid-column:4}
  .pf-ends,.pf-boxes{grid-template-columns:minmax(0,1fr)}
  .pf-read6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-read6 div:first-child{grid-column:1/-1}
  .pf-seg{border-radius:22px}
}
@media (prefers-reduced-motion:reduce){.pf-btn,.pf-switch,.pf-switch::before,.pf-node,.pf-tile img{transition:none}}
@media print{.fig-ctl{display:none}.fig{box-shadow:0 0 0 1px #999;break-inside:avoid}}