/* Kosher salt lesson. All rules scoped under .ksl-* */
.ksl-sc { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ksl-col { gap: 8px; }
.ksl-note { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }

/* the spoons */
.ksl-spoons { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.ksl-bowl { fill: #2a2f45; stroke: #c9cfe3; stroke-width: 3; }
.ksl-handle { stroke: #c9cfe3; stroke-width: 9; stroke-linecap: round; }
.ksl-level { stroke: rgba(201,207,227,.6); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ksl-tg { fill: #f4f2ff; }
.ksl-flake { fill: #f4f2ff; stroke: #c9c3ea; stroke-width: .8; }
.ksl-hole { fill: #2a2f45; opacity: .55; }
.ksl-spoons.pour .ksl-g { animation: kslPour .7s cubic-bezier(.4,.1,.6,1) both; }
@keyframes kslPour { from { transform: translateY(-120px); opacity: 0; } 30% { opacity: 1; } }
.ksl-scale rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.ksl-read { font: 800 18px var(--mono); fill: var(--dim); font-variant-numeric: tabular-nums; }
.ksl-spoons.weighed .ksl-read { fill: var(--gold); }
.ksl-name { font: 800 15px var(--sans); fill: var(--text); }

/* the lenses */
.ksl-lensbg { fill: #20243a; }
.ksl-ring { fill: none; stroke: var(--gold); stroke-width: 3; }
.ksl-cube { fill: #f4f2ff; stroke: #b9b2e2; stroke-width: 1; }
.ksl-flake.big { stroke-width: 1.2; }
.ksl-step { fill: #dcd7f5; }
.ksl-lenses { animation: kslLens .5s ease-out both; transform-origin: 170px 46px; }
@keyframes kslLens { from { opacity: 0; transform: scale(.85); } }

/* the growing flake */
.ksl-growbox { position: relative; }
.ksl-grow { width: min(100%, 230px); height: auto; transition: opacity .6s; }
.ksl-brine { fill: #24406a; }
.ksl-gstep { fill: rgba(244,242,255,.16); stroke: #f4f2ff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s, transform .3s; transform: scale(.85); }
.ksl-gstep.on { opacity: 1; transform: none; }
.ksl-gstep.k0 { fill: #f4f2ff; }
.ksl-real { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity .6s; pointer-events: none; }
.ksl-real img { width: min(100%, 230px); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.ksl-real span { font: 700 12.5px var(--sans); color: var(--dim); }
.ksl-growbox.real .ksl-grow { opacity: 0; }
.ksl-growbox.real .ksl-real { opacity: 1; }
@media (max-height: 700px) { .ksl-grow, .ksl-real img { width: 190px; } }

/* the tomato */
.ksl-plate { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.ksl-dish { fill: #e9ecf5; }
.ksl-tom { fill: #d8402f; }
.ksl-flesh { fill: #f0624c; }
.ksl-seed { fill: #f7d58a; }
.ksl-fine { fill: #fff; opacity: .6; }
.ksl-flake.drop { animation: kslDrop .35s ease-out both; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
@keyframes kslDrop { from { opacity: 0; } }
.ksl-hit { fill: transparent; cursor: pointer; }
.ksl-hand { font: 700 13.5px var(--sans); color: var(--dim); padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); }
.ksl-hand b { color: var(--text); }
@media (max-height: 700px) { .ksl-plate { max-width: 220px; } }

.ksl-photo { display: flex; justify-content: center; }
.ksl-photo img { width: min(100%, 320px); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
@media (max-height: 700px) { .ksl-photo img { width: 240px; } }