/* Stoicism lesson. All rules scoped under .sto-* */
.sto-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sto-sc.sto-full { flex: 1; min-height: 0; justify-content: center; }

/* the jet */
.sto-sky { position: relative; width: 100%; max-width: 380px; flex: 1; min-height: 300px; max-height: 460px; border-radius: 22px; overflow: hidden; background: linear-gradient(#6fa3d8, #b9d6ee 70%, #d9e6df); }
.sto-land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; }
.sto-land .h1 { fill: #4f8a4a; } .sto-land .h2 { fill: #2f6a37; }
.sto-jet { position: absolute; top: 20%; left: -24%; width: 22%; fill: #3a4252; }
.sto-sky.go .sto-jet { animation: sto-fly 2.6s linear forwards; }
@keyframes sto-fly { 0% { transform: translate(0, 0); } 55% { transform: translate(260%, 0) rotate(0); } 100% { transform: translate(560%, 140%) rotate(28deg); } }
.sto-puff { position: absolute; left: 52%; top: 18%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: radial-gradient(#ffd27a, #ff8a3d 45%, rgba(90, 90, 90, .7) 70%, rgba(90, 90, 90, 0) 72%); opacity: 0; transform: scale(.2); }
.sto-sky.go .sto-puff { animation: sto-puff 1.6s 1.6s ease-out forwards; }
@keyframes sto-puff { 0% { opacity: 1; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.8); } }
.sto-smoke { position: absolute; left: 56%; top: 22%; width: 120px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(70, 70, 70, 0), rgba(70, 70, 70, .55)); opacity: 0; transform-origin: 0 50%; transform: rotate(28deg); }
.sto-sky.go .sto-smoke { animation: sto-smoke 2s 1.7s ease-out forwards; }
@keyframes sto-smoke { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
.sto-chute { position: absolute; left: 50%; top: 12%; width: 34%; margin-left: -17%; opacity: 0; transform: translateY(0) scale(.3); }
.sto-sky.go .sto-chute { animation: sto-chute 7s 2.4s ease-out forwards; }
@keyframes sto-chute { 0% { opacity: 0; transform: translateY(0) scale(.3); } 10% { opacity: 1; transform: translateY(0) scale(1); } 40% { transform: translateY(18%) rotate(-3deg) scale(1); } 70% { transform: translateY(36%) rotate(3deg) scale(1); } 100% { opacity: 1; transform: translateY(48%) rotate(0) scale(1); } }

/* photo and quote */
.sto-photo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sto-photo img { width: 150px; height: auto; border-radius: 14px; display: block; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.sto-photo.small img { width: 100px; }
.sto-photo figcaption { font: 600 12.5px var(--sans); color: var(--faint); }
.sto-quote { margin: 0; max-width: 320px; padding: 12px 16px; border-left: 4px solid var(--gold); font: italic 700 19px var(--serif); line-height: 1.3; color: var(--text); }

/* the handbook */
.sto-book { position: relative; width: 250px; height: 200px; padding: 0; border: 0; background: none; perspective: 900px; }
.sto-book:disabled { opacity: 1; }
.sto-cover, .sto-page { position: absolute; inset: 0; border-radius: 10px 16px 16px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; box-sizing: border-box; }
.sto-page { background: #efe6d0; color: #2d2414; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.sto-page small { font: 700 12px var(--sans); color: #8a7650; letter-spacing: .4px; text-transform: uppercase; }
.sto-page q { font: italic 700 21px var(--serif); line-height: 1.25; text-align: center; quotes: none; opacity: 0; transition: opacity .6s .5s; }
.sto-cover { z-index: 2; background: linear-gradient(135deg, #6b3b2a, #4a2518); color: #ffe39a; border: 2px solid #c9a057; transform-origin: 0 50%; transition: transform .9s cubic-bezier(.5, 0, .3, 1); backface-visibility: hidden; }
.sto-cover b { font: 800 26px var(--serif); }
.sto-cover small { font: 700 14px var(--sans); color: #e8cf98; }
.sto-book.open .sto-cover { transform: rotateY(-100deg); }
.sto-book.open .sto-page q { opacity: 1; }

/* the worries */
.sto-split { gap: 8px; }
.sto-cloud { position: relative; display: flex; justify-content: center; align-items: stretch; gap: 8px; width: 100%; max-width: 350px; min-height: 66px; }
.sto-worry { min-height: 56px; padding: 10px 20px; border-radius: 28px; border: 2px solid rgba(255, 255, 255, .5); background: #e8ecff; color: #1b2040; font: 800 17px var(--sans); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); animation: sto-in .4s ease-out both; }
.sto-worry:disabled { opacity: 1; }
.sto-half { flex: 1 1 0; min-height: 56px; padding: 8px 10px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .45); background: #e8ecff; color: #1b2040; font: 800 15px var(--sans); line-height: 1.2; transition: transform .7s ease-in, opacity .7s, border-color .3s, background .3s; }
.sto-half.l { animation: sto-l .45s ease-out both; } .sto-half.r { animation: sto-r .45s ease-out both; }
@keyframes sto-l { from { transform: translateX(40%); } } @keyframes sto-r { from { transform: translateX(-40%); } }
.sto-half:disabled { opacity: 1; }
.sto-half.off { opacity: .45; }
.sto-half.right { border-color: var(--mint); background: #d6f7e8; }
.sto-half.wrong { border-color: var(--red); }
.sto-half.float { transform: translateY(-60px) scale(.8); opacity: 0; }
.sto-half.gone { opacity: 0; transform: translateY(60px) scale(.8); }
@keyframes sto-in { from { opacity: 0; transform: scale(.8); } }
.sto-head img { width: 220px; height: auto; display: block; }
.sto-tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: 100%; max-width: 350px; min-height: 44px; padding: 8px 10px; border-radius: 16px; border: 1.5px dashed rgba(63, 214, 154, .5); box-sizing: border-box; }
.sto-tray > b { font: 800 12px var(--sans); color: var(--mint); letter-spacing: .4px; text-transform: uppercase; }
.sto-kept { padding: 4px 10px; border-radius: 999px; background: rgba(63, 214, 154, .16); color: var(--text); font: 700 13px var(--sans); animation: sto-in .35s ease-out both; }

.sto-head { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sto-head figcaption { font: 700 12.5px var(--sans); color: var(--faint); }

/* the cell */
.sto-cell { gap: 16px; }
.sto-cellrow { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 14px; }
.sto-facts { display: flex; flex-direction: column; gap: 8px; }
.sto-facts span { font: 600 14px var(--sans); color: var(--dim); }
.sto-facts b { display: block; font: 800 18px var(--sans); color: var(--text); }
.sto-cell .sto-half.gone { opacity: 1; transform: none; }

/* two books */
.sto-books { flex-direction: row; justify-content: center; align-items: stretch; gap: 10px; }
.sto-tome { margin: 0; flex: 1 1 0; max-width: 170px; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: 6px 14px 14px 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.sto-tome.old { background: #efe6d0; color: #2d2414; border-left: 8px solid #6b3b2a; }
.sto-tome.new { background: #e6ecf7; color: #1b2440; border-left: 8px solid #3a5a9e; }
.sto-tome small { font: 700 12px var(--sans); opacity: .7; }
.sto-tome b { font: 800 15px var(--serif); line-height: 1.15; }
.sto-tome q { font: italic 600 14px var(--serif); line-height: 1.3; quotes: none; }
.sto-tome cite { font: 700 12px var(--sans); font-style: normal; opacity: .75; margin-top: auto; }

@media (max-height: 700px) {
  .sto-head img { width: 170px; }
  .sto-photo img { width: 120px; }
  .sto-quote { font-size: 17px; }
  .sto-book { width: 220px; height: 170px; }
}