/* Sourdough lesson. All rules scoped under .sdo-* */
.sdo-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sdo-read { display: flex; gap: 18px; font: 700 13px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.sdo-read b { font: 800 22px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; margin-left: 6px; vertical-align: -2px; letter-spacing: 0; }
.sdo-note { font: 600 12.5px/1.3 var(--sans); color: var(--faint); }

/* the jar */
.sdo-jar { width: 190px; max-width: 70%; touch-action: none; }
.sdo-jar svg { display: block; width: 100%; height: auto; }
.sdo-tap { cursor: pointer; }
.sdo-glass { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.55); stroke-width: 3; }
.sdo-lip { fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.55); stroke-width: 2; }
.sdo-paste { fill: #E3D3AE; }
.sdo-bubs circle { fill: rgba(120,96,58,.35); stroke: rgba(255,255,255,.5); stroke-width: 1; }
.sdo-band { fill: var(--gold); filter: drop-shadow(0 0 4px rgba(252,192,80,.5)); }

/* the lens, over the photo */
.sdo-carl { width: 100%; max-width: 340px; touch-action: none; cursor: grab; }
.sdo-carl { transition: max-width .4s; }
.sdo-q .sdo-carl { max-width: 250px; }
.sdo-carl svg { display: block; width: 100%; height: auto; overflow: visible; border-radius: 12px; }
.sdo-mag { fill: #2A2416; }
.sdo-rod { fill: #B98BE0; stroke: #E2CCF5; stroke-width: 1.6; }
.sdo-ycell { fill: #EADBB4; stroke: #BFA46A; stroke-width: 3; }
.sdo-lensring { fill: none; stroke: var(--violet-bright); stroke-width: 7; filter: drop-shadow(0 0 6px rgba(123,92,253,.7)); }
.sdo-handle { stroke: var(--violet-bright); stroke-width: 14; stroke-linecap: round; }
.sdo-grab { fill: transparent; }
.sdo-tally b { color: var(--text); }
.sdo-tally .sdo-nb { color: #C9A2EC; }

/* two jobs */
.sdo-world { display: block; width: min(100%, 330px); height: auto; }
.sdo-world .sdo-ycell { stroke-width: 2.5; }
.sdo-shine { fill: #fff; opacity: .4; }
.sdo-yeast, .sdo-bact { cursor: pointer; }
.sdo-world .sdo-rod { stroke-width: 1.5; }
.sdo-tx { font: 700 14px var(--sans); fill: var(--dim); text-anchor: middle; }
.sdo-tg, .sdo-ta { opacity: 0; transition: opacity .4s; font-size: 16px; font-weight: 800; }
.sdo-tg { fill: #fff; }
.sdo-ta { fill: #D7E86A; }
.sdo-gas circle { fill: rgba(255,255,255,.18); stroke: rgba(255,255,255,.85); stroke-width: 1.5; opacity: 0; }
.sdo-acid path { fill: #D7E86A; opacity: 0; }
.sdo-g .sdo-tg, .sdo-a .sdo-ta { opacity: 1; }
.sdo-g .sdo-gas circle { animation: sdoUp 1.3s ease-out 3; }
.sdo-g .sdo-gas circle:nth-child(2) { animation-delay: .25s; }
.sdo-g .sdo-gas circle:nth-child(3) { animation-delay: .5s; }
.sdo-g .sdo-gas circle:nth-child(4) { animation-delay: .75s; }
.sdo-a .sdo-acid path { animation: sdoDrip 1.2s ease-in 3; }
.sdo-a .sdo-acid path:nth-child(2) { animation-delay: .35s; }
.sdo-a .sdo-acid path:nth-child(3) { animation-delay: .7s; }
.sdo-g .sdo-gas circle, .sdo-a .sdo-acid path { animation-fill-mode: both; }
@keyframes sdoUp { 0% { opacity: 0; transform: none; } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-44px); } }
@keyframes sdoDrip { 0% { opacity: 0; transform: translateY(-6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }

/* store bread */
.sdo-store img { display: block; max-width: 100%; max-height: 220px; width: auto; filter: drop-shadow(0 10px 18px rgba(123,92,253,.3)); }

/* feed it */
.sdo-frow { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.sdo-frow .sdo-jar { width: 160px; max-width: 48%; flex: 0 0 auto; }
.sdo-side { flex: 1 1 0; min-width: 0; max-width: 180px; display: flex; flex-direction: column; gap: 12px; }
.sdo-side .sdo-read b { font-size: 26px; }
.sdo-food .gt i { background: var(--gold); transition: width .15s linear; }
.sdo-loaf { width: 100%; display: flex; justify-content: center; }
.sdo-loaf img { display: block; max-width: 92%; max-height: 220px; width: auto; height: auto; animation: sdoIn .5s cubic-bezier(.2,.8,.2,1) both; filter: drop-shadow(0 10px 18px rgba(123,92,253,.3)); }
@keyframes sdoIn { from { opacity: 0; scale: .9; } }

/* the whole day */
.sdo-chart { display: block; width: min(100%, 340px); height: auto; overflow: visible; }
.sdo-ax { stroke: rgba(255,255,255,.4); stroke-width: 1.5; }
.sdo-tk { font: 600 12px var(--sans); fill: var(--dim); text-anchor: middle; }
.sdo-youtx { fill: var(--violet-bright); font-weight: 700; }
.sdo-you { stroke: var(--violet-bright); stroke-width: 2; stroke-dasharray: 4 4; }
.sdo-lv { fill: none; stroke: #EADBB4; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sdo-fd { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; }
.sdo-lg { font: 800 13px var(--sans); text-anchor: middle; }
.sdo-lgl { fill: #EADBB4; }
.sdo-lgf { fill: var(--gold); }

/* two loaves */
.sdo-pk { width: 100%; }
.sdo-pk .choices.sdo-two { display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap: 10px; width: 100%; }
.sdo-pk .choice { flex: 1 1 0; min-width: 0; max-width: 170px; padding: 8px 6px; min-height: 0; background: transparent; border-color: transparent; box-shadow: none; flex-direction: column; justify-content: flex-end; gap: 6px; }
.sdo-pk .choice.right { border-color: var(--mint); background: rgba(63,214,154,.08); }
.sdo-pk .choice.wrong { border-color: var(--red); background: rgba(216,85,85,.08); }
.sdo-pic { position: relative; display: block; width: 100%; }
.sdo-pic img { display: block; width: 100%; max-height: 150px; object-fit: contain; }
.sdo-cap { font: 700 14px var(--sans); color: var(--text); }
.sdo-fuzz { position: absolute; inset: 6% 6% 10%; opacity: 0; transition: opacity .5s; pointer-events: none;
  background: radial-gradient(circle at 22% 30%, #4F6B3E 0 9%, rgba(79,107,62,.5) 12%, transparent 15%), radial-gradient(circle at 62% 22%, #3E5A36 0 11%, rgba(62,90,54,.5) 14%, transparent 17%),
    radial-gradient(circle at 74% 60%, #5C7A48 0 8%, rgba(92,122,72,.5) 11%, transparent 14%), radial-gradient(circle at 36% 66%, #445E3A 0 12%, rgba(68,94,58,.5) 15%, transparent 18%),
    radial-gradient(circle at 52% 44%, #6E8C5A 0 6%, transparent 9%), radial-gradient(circle at 80% 36%, #3E5A36 0 7%, transparent 10%), radial-gradient(circle at 30% 46%, #56703F 0 7%, transparent 10%); }
.sdo-moldy .sdo-fuzz { opacity: 1; }

@media (max-height: 700px) {
  .sdo-jar { width: 170px; }
  .sdo-frow .sdo-jar { width: 150px; }
  .sdo-store img, .sdo-loaf img { max-height: 180px; }
  .sdo-pic img { max-height: 120px; }
  .sdo-world { width: min(100%, 290px); }
}