/* Proteostasis lesson. All rules scoped under .pst-* */
.pst-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pst-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.pst-hero img { width: 260px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }

/* ---------- the line ---------- */
.pst-game { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 4px; border-radius: 18px; transition: box-shadow .4s, background .4s; }
.pst-game.hot { background: radial-gradient(ellipse at 50% 70%, rgba(224,90,60,.16), rgba(224,90,60,0) 70%); }
.pst-line { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; cursor: pointer; }
.pst-hud { display: flex; justify-content: space-between; align-items: center; min-height: 26px; padding: 0 4px; }
.pst-pool { display: flex; align-items: center; gap: 3px; }
.pst-pool.shake { animation: pstShake .3s; }
.pst-pl { font-size: 12.5px; font-weight: 700; color: var(--dim); margin-right: 4px; }
.pst-pool i { width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--gold); box-shadow: 0 0 6px rgba(252,192,80,.5); }
.pst-pool i.busy { border-color: var(--faint); box-shadow: none; }
.pst-cnt { display: flex; gap: 10px; white-space: nowrap; font-size: 12.5px; color: var(--dim); font-weight: 600; }
.pst-cnt b { font-family: var(--mono); color: var(--text); }
.pst-cnt .pst-cl { color: #FF9A6A; }
@keyframes pstShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.pst-belt { stroke: var(--line-strong); stroke-width: 3; stroke-dasharray: 6 6; stroke-linecap: round; }
.pst-ribo ellipse { fill: rgba(123,92,253,.35); stroke: var(--violet-bright); stroke-width: 1.5; }
.pst-barrel rect { fill: rgba(216,85,85,.18); stroke: #D86A6A; stroke-width: 1.5; }
.pst-lab { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.pst-lab.hi { fill: var(--text); font-weight: 700; }
.pst-fold { fill: #7B5CFD; stroke: #A99BFF; stroke-width: 1.5; }
.pst-curl { fill: none; stroke: #D8D0FF; stroke-width: 2; stroke-linecap: round; }
.pst-loose { fill: none; stroke: #A99BFF; stroke-width: 4; stroke-linecap: round; }
.pst-stk { fill: #FF9A4A; stroke: #FFD2A8; stroke-width: 1; }
.pst-clump .pst-loose { stroke: #8E84B8; }
.pst-clump .pst-stk { fill: #C9774A; stroke: none; }
.pst-ring { fill: rgba(252,192,80,.12); stroke: var(--gold); stroke-width: 3.5; }
.pst-tag { fill: #E05A5A; stroke: #FFC2C2; stroke-width: 1; }
.pst-bit { fill: #A99BFF; }
.pst-p.shook .pst-gl { animation: pstShake .3s 2; }
.pst-p.shake { animation: none; }

/* ---------- the race ---------- */
.pst-bal { display: flex; align-items: stretch; gap: 10px; width: 100%; max-width: 340px; }
.pst-side { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; padding: 18px 10px; border-radius: 16px; background: rgba(255,154,74,.1); border: 2px solid rgba(255,154,74,.5); }
.pst-side.help { background: rgba(252,192,80,.08); border-color: var(--gold); }
.pst-side b { font-size: 15px; color: var(--text); }
.pst-side span { font-size: 12.5px; color: var(--dim); }
.pst-vs { align-self: center; font-size: 12.5px; color: var(--faint); font-weight: 700; }

/* ---------- worm ---------- */
.pst-worm { display: block; width: 100%; max-width: 340px; height: auto; }
.pst-wbody { fill: none; stroke: #E8C9A8; stroke-width: 10; stroke-linecap: round; }
.pst-weye { fill: #3A2A20; }