/* Syn-propanethial S-oxide lesson. All rules scoped under .spo-* */
.spo-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spo-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(252,192,80,.22)); }
.spo-nw { white-space: nowrap; }
.spo-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12.5px; color: var(--dim); }
.spo-key span { display: inline-flex; align-items: center; gap: 6px; }
.spo-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.spo-key i.gold { background: var(--gold); }
.spo-key i.violet { background: var(--violet-bright); }
.spo-key i.mint { background: var(--mint); }
.spo-key i.gas { background: #CFE8A0; }
.spo-key i.off { background: none; border: 1.5px dashed var(--mint); opacity: .7; }

/* ---------- kitchen: eye over four cells ---------- */
.spo-kit, .spo-lab-svg { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.spo-lab { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.spo-white { fill: #EAE3D7; }
.spo-iris { fill: #6B5A3E; }
.spo-pupil { fill: #0A0E1A; }
.spo-rim { fill: none; stroke: var(--line-strong); stroke-width: 2; transition: stroke .4s; }
.spo-lid { transition: transform .4s; }
.spo-eye.sting .spo-rim { stroke: var(--streak); stroke-width: 3; }
.spo-eye.sting .spo-white { fill: #F2D3C8; }
.spo-tear { fill: #9FD4FF; }
.spo-wall { fill: rgba(232,217,168,.07); stroke: #D9C894; stroke-width: 2; transition: stroke .3s, fill .3s; }
.spo-sac { fill: rgba(123,92,253,.2); stroke: var(--violet-bright); stroke-width: 1.6; transition: opacity .3s; }
.spo-s { fill: var(--gold); transition: fill .4s, opacity .5s, r .4s; }
.spo-e { fill: var(--violet-bright); }
.spo-e.mint { fill: var(--mint); }
.spo-slash { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 110; stroke-dashoffset: 110; opacity: 0; }
.spo-cell.cut .spo-slash { opacity: .9; transition: opacity .6s .5s; }
.spo-cell.open .spo-slash { opacity: 0; }
.spo-cell.cut .spo-wall { stroke-dasharray: 6 5; fill: rgba(232,217,168,.03); }
.spo-cell.open .spo-sac { opacity: .15; stroke-dasharray: 4 6; }
.spo-cell.spent .spo-s { opacity: .18; }
.spo-cell.flavor .spo-s, .spo-dish.flavor .spo-s { fill: #C98C1B; r: 4.4px; }
.spo-cell.lit .spo-sac { stroke: var(--gold); stroke-width: 2.4; }
.spo-hit { fill: transparent; }
.spo-kit.live .spo-cell:not(.cut) { cursor: pointer; }
.spo-g { fill: #CFE8A0; }

/* ---------- the 2002 test ---------- */
.spo-glass { fill: rgba(159,212,255,.06); stroke: rgba(234,227,215,.4); stroke-width: 2; }
.spo-dish.spent .spo-s { opacity: .18; }