/* Protein folding lesson. All rules scoped under .pf-* */

.pf-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pf-sc > svg { display: block; width: 100%; height: auto; overflow: hidden; }
.pf-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.pf-hero { width: min(80%, 300px); }
.pf-hero img { width: 100%; display: block; }
.pf-t { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.pf-t.dim { fill: var(--dim); }

.pf-water { fill: rgba(96, 160, 255, .08); stroke: rgba(96, 160, 255, .22); stroke-width: 1.5; transition: fill .6s, stroke .6s; }
.pf-plain { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.pf-bb { fill: none; stroke: rgba(234, 227, 215, .55); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.pf-b { stroke-width: 3; transition: fill .4s, stroke .4s; }
.pf-b.h { fill: var(--gold); stroke: var(--gold-deep); }
.pf-b.p { fill: #1d2a48; stroke: #7fb2ff; }
.pf-mono .pf-b.h, .pf-mono .pf-b.p { fill: var(--violet-deep); stroke: var(--violet-bright); }
.pf-hit { fill: transparent; cursor: pointer; }
.pf-big.done .pf-b.h { stroke: #fff3cf; }

.pf-key { display: flex; gap: 16px; justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.pf-key span { display: inline-flex; align-items: center; gap: 6px; }
.pf-key i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid; }
.pf-key i.h { background: var(--gold); border-color: var(--gold-deep); }
.pf-key i.p { background: #1d2a48; border-color: #7fb2ff; }

.pf-sugar path { fill: rgba(63, 214, 154, .25); stroke: var(--mint); stroke-width: 2.5; }
.pf-sugar { opacity: 0; transition: opacity .6s; }
.pf-pocket.in .pf-sugar { opacity: 1; }
.pf-pocket { max-height: 230px; }

.pf-strip { max-height: 120px; }
.pf-strip.tall { max-height: 230px; }
.pf-mini { width: 100%; height: 86px; display: block; }
.pf-opts .choice { padding: 6px; }

.pf-big.chem .pf-water { fill: rgba(169, 155, 255, .16); stroke: var(--violet-bright); }
.pf-white { fill: rgba(234, 227, 215, .05); stroke: rgba(234, 227, 215, .3); stroke-width: 2; transition: fill 1s, stroke .6s; }
.pf-egg.hot .pf-white { stroke: var(--streak); }
.pf-egg.cooked .pf-white { fill: rgba(245, 240, 230, .5); stroke: rgba(245, 240, 230, .8); }
.pf-q { font-size: 30px; }

@media (max-height: 700px) {
  .pf-hero { width: min(62%, 230px); }
  .pf-pocket { max-height: 190px; }
  .pf-play { max-height: 230px; }
  .pf-strip.tall { max-height: 190px; }
  .pf-mini { height: 78px; }
}
.pf-t.lg { font-size: 19px; }
.pf-sc .gauge { width: 100%; }
.pf-egg.cooked .pf-elab { fill: #2a2a33; }
.pf-count { font-size: 14px; color: var(--dim); font-weight: 600; }
.pf-count b { font: 700 20px var(--mono); color: var(--gold); }
.pf-many { max-height: 250px; }
@media (max-height: 700px) { .pf-many { max-height: 190px; } }