/* Ikigai lesson. Everything scoped under .ik-*. */
.ik-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ik-hero img { display: block; width: 240px; max-width: 100%; max-height: 28vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.3)); }
.ik-hero.wide img { width: 300px; }
.ik-hero.small img { width: 170px; max-height: 16vh; }
.ik-note { text-align: center; font-size: 13px; color: var(--dim); }

/* the four-circle chart */
.ik-chart { width: 100%; max-width: 320px; }
.ik-chart svg { display: block; width: 100%; height: auto; max-height: 32vh; overflow: visible; }
.ik-c { stroke-width: 2; transition: fill-opacity .3s, stroke .3s, stroke-width .3s, opacity .3s; fill-opacity: .2; }
.ik-love { fill: #F160C4; stroke: #F160C4; }
.ik-good { fill: #A99BFF; stroke: #A99BFF; }
.ik-need { fill: #3FD69A; stroke: #3FD69A; }
.ik-paid { fill: #FCC050; stroke: #FCC050; }
.ik-c.yes { fill-opacity: .42; stroke-width: 4; }
.ik-c.no { fill-opacity: .04; stroke: var(--red); stroke-dasharray: 5 5; }
.ik-lab text { font: 700 14px var(--sans); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.ik-mid { fill: var(--bg); stroke: var(--gold); stroke-width: 2.5; transition: fill .3s, stroke .3s; transform-box: fill-box; transform-origin: center; }
.ik-mid.flip { animation: ik-flip .5s ease-out; }
@keyframes ik-flip { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.ik-midt { font: 700 14px var(--sans); fill: var(--gold); text-anchor: middle; }
.ik-chart.pass .ik-mid { fill: var(--gold); }
.ik-chart.pass .ik-midt { fill: #2a1c05; }
.ik-chart.fail .ik-mid { stroke: var(--red); }
.ik-chart.fail .ik-midt { fill: var(--red); }
.ik-card { padding: 10px 16px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line-strong); font: 700 17px/1.25 var(--serif); color: var(--text); text-align: center; max-width: 320px; transition: border-color .3s; }
.ik-card.in { animation: ik-in .4s cubic-bezier(.2,.8,.2,1); }
@keyframes ik-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.ik-card.pass { border-color: var(--gold); }
.ik-card.fail { border-color: var(--red); }
.ik-tally { display: flex; align-items: center; gap: 6px; min-height: 16px; }
.ik-tally i { width: 12px; height: 12px; border-radius: 50%; }
.ik-tally i.y { background: var(--gold); }
.ik-tally i.n { background: var(--red); }
.ik-tally span { font-size: 12px; font-weight: 700; color: var(--dim); margin-left: 4px; }

/* survey bars */
.ik-bars { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 14px; }
.ik-row { display: grid; grid-template-columns: 1fr 48px; grid-template-rows: auto 18px; gap: 4px 8px; align-items: center; }
.ik-row span { grid-column: 1 / 3; font: 600 16px/1.25 var(--serif); color: var(--text); }
.ik-row i { height: 18px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; }
.ik-row u { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, #F160C4, var(--gold)); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.ik-row b { font: 700 16px var(--mono); color: var(--gold); }
.ik-bars small { text-align: center; font-size: 12px; color: var(--faint); }

/* small ikigai */
.ik-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 330px; }
.ik-chips span { padding: 6px 12px; border-radius: 999px; background: rgba(241,96,196,.14); border: 1px solid rgba(241,96,196,.4); font-size: 14px; font-weight: 700; color: var(--text); animation: ik-in .4s calc(var(--d) * 90ms) both; }

/* last: three speakers */
.ik-who { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 8px; }
.ik-who > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); transition: border-color .3s; }
.ik-who b { font-size: 15px; color: var(--gold); }
.ik-who span { font: 600 15px/1.3 var(--serif); color: var(--text); }
.ik-who > div.mark { border-color: var(--mint); }

@media (max-height: 700px) {
  .ik-chart { max-width: 290px; }
  .ik-card { font-size: 15px; padding: 8px 12px; }
}