/* Coffee Bean lesson. All rules scoped under .cbn-* */
.cbn-sc { position: relative; width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

/* the cherry */
.cbn-hit { display: block; width: 100%; padding: 0; background: transparent; border: 0; cursor: pointer; }
.cbn-hit:disabled { cursor: default; opacity: 1; }
.cbn-ch { display: block; width: 100%; max-height: 250px; overflow: visible; }
.cbn-br { fill: none; stroke: #6b4a2f; stroke-width: 7; stroke-linecap: round; }
.cbn-stem { fill: none; stroke: #6b4a2f; stroke-width: 5; stroke-linecap: round; }
.cbn-leaf { fill: #2f6b3c; stroke: #5fae6b; stroke-width: 1.5; }
.cbn-l, .cbn-r, .cbn-hi { transition: transform 1s cubic-bezier(.3,.7,.2,1), opacity 1s; transform-box: view-box; transform-origin: 150px 130px; }
.cbn-ch { animation: cbnSway 2.6s ease-in-out 2 alternate; transform-origin: 50% 0; }
@keyframes cbnSway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
.cbn-sc.open .cbn-ch { animation: none; }
.cbn-sc.open .cbn-l { transform: translateX(-62px) rotate(-14deg); opacity: .85; }
.cbn-sc.open .cbn-r { transform: translateX(62px) rotate(14deg); opacity: .85; }
.cbn-sc.open .cbn-hi { opacity: 0; }
.cbn-hi { fill: rgba(255,255,255,.35); }
.cbn-sd { fill: #cbd59a; stroke: #8f9a5c; stroke-width: 2; }
.cbn-cr { fill: none; stroke: #8f9a5c; stroke-width: 2; stroke-linecap: round; }
.cbn-lab { display: flex; justify-content: center; gap: 46px; min-height: 20px; margin-top: -6px; }
.cbn-lab span { font: 800 13px var(--sans); color: var(--text); animation: cbnUp .4s ease-out both; }
@keyframes cbnUp { from { opacity: 0; translate: 0 6px; } }

/* photo */
.cbn-photo { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cbn-photo img { width: 100%; border-radius: 14px; display: block; }
.cbn-photo span { font: 600 12.5px var(--sans); color: var(--dim); }

/* the roaster */
.cbn-roast { gap: 4px; }
.cbn-bean { width: 230px; max-width: 70%; height: auto; overflow: visible; display: block; }
.cbn-bg { transform-box: fill-box; transform-origin: center; transition: transform .45s ease; }
.cbn-body { fill: #9fae7a; transition: fill .45s; stroke: rgba(0,0,0,.25); stroke-width: 2; }
.cbn-crease { fill: none; stroke: rgba(0,0,0,.35); stroke-width: 4; stroke-linecap: round; }
.cbn-sheen { fill: rgba(255,255,255,.22); }
.cbn-oil { fill: rgba(255,255,255,0); transition: fill .5s; }
.cbn-roast.oily .cbn-oil { fill: rgba(255,255,255,.4); }
.cbn-roast.oily .cbn-sheen { fill: rgba(255,255,255,.42); }
.cbn-roast.pop .cbn-bean { animation: cbnPop .32s ease-out 3; }
@keyframes cbnPop { 50% { translate: 0 -5px; } }
.cbn-stage { min-height: 22px; font: 800 15px var(--sans); color: var(--gold); text-align: center; }
.cbn-read { display: flex; gap: 8px; width: 100%; }
.cbn-read > div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cbn-read span { font: 700 11.5px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.cbn-read b { font: 800 16px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.cbn-read b.c { color: var(--mint); }
.cbn-read b.c.q { color: var(--text); }
.cbn-note { font: 600 12px var(--sans); color: var(--faint); margin-top: 2px; }

/* the scoops */
.cbn-two { display: flex; justify-content: center; gap: 16px; width: 100%; }
.cbn-sp { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 150px; }
.cbn-scoop { width: 140px; height: 110px; overflow: visible; }
.cbn-cup { fill: #2a3148; stroke: var(--line-strong); stroke-width: 2; }
.cbn-scoop.lt ellipse { fill: #9c6634; }
.cbn-scoop.dk ellipse { fill: #3c2113; stroke: rgba(255,255,255,.25); stroke-width: 1; }
.cbn-scoop path:not(.cbn-cup) { fill: none; stroke: rgba(0,0,0,.45); stroke-width: 1.6; }
.cbn-sp b { font: 800 14px var(--sans); color: var(--text); }
.cbn-sp span { font: 600 12.5px var(--sans); color: var(--dim); }

/* peaberry */
.cbn-peas { display: flex; justify-content: center; gap: 12px; width: 100%; }
.cbn-pea { width: 100px; height: 100px; padding: 4px; border-radius: 50%; background: transparent; border: 2px solid transparent; cursor: pointer; transition: opacity .3s, border-color .3s; }
.cbn-pea svg { width: 100%; height: 100%; display: block; }
.cbn-skin { fill: #b3242f; stroke: #6e0d17; stroke-width: 3; }
.cbn-pea.right { border-color: var(--mint); }
.cbn-pea.wrong { border-color: var(--red); }
.cbn-pea.off { opacity: .4; }

@media (max-height: 700px) {
  .cbn-ch { max-height: 200px; }
  .cbn-bean { width: 180px; }
  .cbn-scoop { width: 120px; height: 94px; }
  .cbn-pea { width: 88px; height: 88px; }
}