/* Stress management lesson. All rules scoped under .stm-* */
.stm-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stm-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.stm-hero img { display: block; width: 240px; max-width: 100%; max-height: 19vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }
.stm-hero.bag img { width: 90px; }

/* the boiler */
.stm-boil { width: 100%; max-width: 320px; }
.stm-boil svg { width: 100%; display: block; overflow: visible; }
.stm-tank { fill: #3A3F55; stroke: var(--line-strong); stroke-width: 3; }
.stm-tl { font: 700 15px var(--sans); fill: var(--text); text-anchor: middle; }
.stm-pipe { fill: none; stroke: #6A7090; stroke-width: 8; stroke-linejoin: round; }
.stm-valve { fill: #FF6B6B; }
.stm-dial { fill: #F3EEE4; stroke: #C9C2B4; stroke-width: 3; }
.stm-arc { fill: none; stroke: #D85555; stroke-width: 5; stroke-dasharray: 60 200; stroke-dashoffset: -40; }
.stm-needle { stroke: #1E1A14; stroke-width: 3.5; stroke-linecap: round; }
.stm-hub { fill: #1E1A14; }
.stm-gl { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.stm-steam circle { fill: #EAE3D7; opacity: 0; }
.stm-vent .stm-steam circle { animation: stmPuff 1.2s ease-out 2; }
.stm-vent .stm-steam circle:nth-child(2) { animation-delay: .15s; }
.stm-vent .stm-steam circle:nth-child(3) { animation-delay: .3s; }
@keyframes stmPuff { 0% { opacity: .9; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(10px, -16px); } }

/* groups with bars */
.stm-gr { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 6px; }
.stm-g { display: grid; grid-template-columns: 22px 1fr 110px; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 10px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); }
.stm-g > b { grid-row: 1 / span 2; font: 800 16px var(--sans); color: var(--gold); }
.stm-gn { font: 700 14px var(--sans); }
.stm-gs { grid-column: 2; font-size: 12px; color: var(--dim); }
.stm-gb { grid-column: 3; grid-row: 1 / span 2; height: 14px; border-radius: 7px; background: var(--raised); overflow: hidden; }
.stm-gb i { display: block; height: 100%; width: 0; border-radius: 7px; background: #FF8A6B; }
.stm-hh .stm-g { grid-template-columns: 22px 1fr 110px; }
.stm-hh .stm-gn { grid-row: 1 / span 2; }
.stm-hh .stm-gb i { background: var(--violet-bright); }

/* the loop */
.stm-loop { width: 100%; max-width: 340px; }
.stm-loop svg { width: 100%; display: block; overflow: visible; }
.stm-ed { fill: none; stroke: var(--line-strong); stroke-width: 3; }
.stm-ah { fill: var(--line-strong); }
.stm-rep { stroke: #FF8A6B; stroke-dasharray: 7 6; transition: opacity .5s; }
.stm-rept { font: 700 13px var(--sans); fill: #FF8A6B; transition: opacity .5s; }
.stm-noreplay .stm-rep, .stm-noreplay .stm-rept { opacity: .15; }
.stm-n circle { fill: var(--raised); stroke: var(--violet-bright); stroke-width: 2.5; }
.stm-n-a circle { stroke: #FF6B6B; }
.stm-ic { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; }
.stm-hrt { fill: #FF6B6B; stroke: none; }
.stm-nl { font: 700 13px var(--sans); fill: var(--text); text-anchor: middle; }
.stm-n.stm-on circle { animation: stmRing .5s ease-out; }
@keyframes stmRing { 40% { fill: #4A3B8F; stroke-width: 5; } }
.stm-n-a.stm-on circle { animation-name: stmRingA; }
@keyframes stmRingA { 40% { fill: #7A2E3A; stroke-width: 5; } }
.stm-mt { fill: #0B1020; stroke: var(--line); stroke-width: 1.5; }
.stm-mf { fill: #FF6B6B; }
.stm-dot { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(252, 192, 80, .9)); transition: opacity .3s; }
.stm-tg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.stm-tg span { font: 700 13px var(--sans); padding: 5px 10px; border-radius: 10px; border: 1.5px solid; }
.stm-t1 { color: var(--violet-bright); border-color: var(--violet-bright); }
.stm-t2 { color: var(--gold); border-color: var(--gold); }
.stm-t3 { color: #FF8A8A; border-color: #FF8A8A; }
.stm-tags .stm-n-t circle { stroke: var(--violet-bright); stroke-width: 4; }
.stm-tags .stm-n-r circle { stroke: var(--gold); stroke-width: 4; }
.stm-tags .stm-n-a circle { stroke: #FF8A8A; stroke-width: 4; }

/* the board */
.stm-bd { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stm-c { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 6px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); }
.stm-c i { grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--sans); font-style: normal; align-self: center; }
.stm-c b { font: 700 14px var(--sans); }
.stm-c span { font-size: 12px; color: var(--dim); }
.stm-ok i { background: var(--mint); color: var(--mint-ink); }
.stm-mid i { background: var(--gold); color: #3A2604; }
.stm-no i { background: var(--red); color: #fff; }
.stm-no { border-color: rgba(216, 85, 85, .5); }

@media (max-height: 700px) {
  .stm-hero img { max-height: 16vh; }
  .stm-hero.bag img { width: 64px; }
  .stm-g { padding: 4px 8px; }
}