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

/* ---------- the spools ---------- */
.srt-game { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.srt-fuel { margin: 0 6px; }
.srt-dna { display: block; width: 100%; height: auto; overflow: visible; }
.srt-strand { fill: none; stroke: #A99BFF; stroke-width: 3; stroke-linecap: round; opacity: .7; }
.srt-sp { cursor: pointer; }
.srt-loop { fill: none; stroke: rgba(169,155,255,.6); stroke-width: 4; transition: stroke .3s, r .3s; }
.srt-core { fill: #3B3570; stroke: #7B6CE0; stroke-width: 2; transition: fill .3s; }
.srt-sp.loose .srt-loop { stroke: rgba(252,192,80,.8); stroke-dasharray: 6 5; }
.srt-sp.loose .srt-core { fill: #5A4A2E; }
.srt-hit { fill: transparent; }
.srt-tag path { fill: var(--gold); stroke: #FFE3A6; stroke-width: 1.5; }
.srt-tag { transition: opacity .25s; }
.srt-tag.pop { opacity: 0; }
.srt-gene rect { fill: var(--raised); stroke: var(--line-strong); stroke-width: 2; transition: fill .3s, stroke .3s; }
.srt-gene text { fill: var(--dim); font: 700 14px var(--sans); text-anchor: middle; letter-spacing: .04em; }
.srt-gene.on rect { fill: rgba(216,85,85,.3); stroke: var(--red); }
.srt-gene.on text { fill: #FFD0D0; }
.srt-core.shake { animation: srtShake .3s; }
@keyframes srtShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---------- yeast ---------- */
.srt-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.srt-bt { font-size: 12.5px; color: var(--dim); text-align: center; }
.srt-br { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.srt-br i { height: 12px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.srt-br b { display: block; height: 100%; width: 0; background: #9FA8D6; border-radius: 6px; transition: width .8s ease-out; }
.srt-br.x b { background: var(--gold); }

/* ---------- the story ---------- */
.srt-chain { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.srt-link { width: 100%; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 14px; font-weight: 700; color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * .25s); }
.srt-chain.on .srt-link { opacity: 1; transform: none; }
.srt-arr { display: block; width: 2px; height: 10px; background: var(--line-strong); }
.srt-pill { margin-top: 8px; width: 100%; display: flex; align-items: center; gap: 10px; background: rgba(252,192,80,.08); border: 1px dashed rgba(252,192,80,.6); border-radius: 14px; padding: 6px 12px; font-size: 14px; font-weight: 700; color: var(--gold); opacity: 0; transition: opacity .5s 1.4s; }
.srt-chain.on .srt-pill { opacity: 1; }
.srt-pill img { width: 52px; height: 52px; object-fit: contain; flex: none; }

/* ---------- the bench ---------- */
.srt-bench { width: 100%; max-width: 340px; display: grid; grid-template-columns: 96px 1fr 1fr; gap: 6px 8px; align-items: center; }
.srt-ch { font-size: 12.5px; font-weight: 700; color: var(--dim); text-align: center; }
.srt-rh { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25; }
.srt-tube { appearance: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-height: 88px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: var(--text); }
.srt-tube.ran { cursor: default; }
.srt-tube svg { width: 34px; height: 60px; display: block; }
.srt-glass { fill: rgba(255,255,255,.05); stroke: #C9D1E0; stroke-width: 2; }
.srt-liq { fill: var(--mint); opacity: .85; }
.srt-spd { font-size: 13px; font-weight: 700; color: var(--dim); }
.srt-tube.ran .srt-spd { color: var(--text); }

/* ---------- what came of it ---------- */
.srt-cards { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.srt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.srt-card b { font: 700 24px var(--serif); color: var(--gold); }
.srt-card span { font-size: 14px; color: var(--dim); line-height: 1.4; }

@media (max-height: 700px) {
  .srt-sc { gap: 6px; }
  .srt-hero img { max-height: 22vh; }
  .srt-hero.sm img { max-height: 13vh; }
  .srt-hero.xs img { max-height: 10vh; }
  .srt-game { max-width: 320px; gap: 6px; }
  .srt-link { padding: 6px 10px; }
  .srt-tube { min-height: 76px; }
  .srt-tube svg { height: 50px; }
  .srt-card { padding: 10px 14px; }
}