/*!
 * kwokka-motion.css v1.0
 *
 * The Duolingo tactile principles translated into Kwokka's parchment and
 * gold, in plain CSS (no framework, no build step):
 *
 *   1. Physical mimicry: interactive elements look like pressable objects,
 *      a solid base edge below (border-bottom depth layer) and a downward
 *      translate on :active, so a click FEELS like a click.
 *   2. Instant feedback: transitions run 90-140ms, transform and opacity
 *      only (GPU-composited, no layout thrash, no CLS).
 *   3. Calm by default: everything sits inside prefers-reduced-motion
 *      guards; with reduced motion the depth stays but nothing moves.
 *
 * Applied via the .km-tactile class, which kwokka-motion.js adds to the
 * site's existing buttons, so no template edits are needed and nothing
 * breaks if this file is absent.
 */
 .km-tactile{--km-depth:4px;--km-edge:rgba(87, 66, 16, 0.55);position:relative;border-bottom:var(--km-depth) solid var(--km-edge)!important;transform:translateY(0);transition:transform 0.1s ease;will-change:transform}.km-tactile:hover{box-shadow:0 3px 10px rgb(60 48 20 / .18)}.km-tactile:active{transform:translateY(var(--km-depth));box-shadow:none}.km-tactile:focus-visible{outline:3px solid #8b6914;outline-offset:2px}.km-tactile-soft{--km-depth:2px}.km-card{transition:transform 0.14s ease,box-shadow 0.14s ease}.km-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgb(60 48 20 / .14)}.km-reveal{opacity:0;transform:translateY(14px);transition:opacity 0.45s ease,transform 0.45s ease}.km-reveal.km-in{opacity:1;transform:translateY(0)}.km-progress{border-radius:999px;overflow:hidden}.km-progress .km-fill,.km-progress>[class*="fill"]{position:relative;border-radius:999px;transition:width 0.5s cubic-bezier(.22,1,.36,1)}.km-progress .km-fill::after,.km-progress>[class*="fill"]::after{content:'';position:absolute;top:0;left:0;right:0;height:30%;background:rgb(255 255 255 / .32);border-radius:999px 999px 0 0;pointer-events:none}@keyframes km-yes{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}@keyframes km-no{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.km-yes{animation:km-yes 0.32s ease}.km-no{animation:km-no 0.3s ease}@media (prefers-reduced-motion:reduce){.km-tactile,.km-card,.km-reveal,.km-progress .km-fill,.km-progress>[class*="fill"]{transition:none}.km-tactile:active{transform:none}.km-card:hover{transform:none}.km-reveal{opacity:1;transform:none}.km-yes,.km-no{animation:none}}.dropdown-item-formal,.mobile-type-formal{display:block;font-size:.68rem;color:#8a7c6a;letter-spacing:.02em}img.dilemma-illustration{aspect-ratio:1460 / 1077;width:100%;height:auto;object-fit:cover}#kw-sound-toggle{position:fixed;left:14px;bottom:14px;z-index:95;font-family:system-ui,sans-serif;font-size:.72rem;color:#57503f;background:rgb(247 242 223 / .95);border:2px solid rgb(90 74 31 / .55);border-radius:999px;padding:.35rem .75rem;cursor:pointer;box-shadow:2px 2px 0 rgb(90 74 31 / .35)}#kw-sound-toggle:focus-visible{outline:3px solid #8b6914;outline-offset:2px}#kw-sound-toggle[aria-pressed="true"]{background:#6b5211;color:#fff;border-color:#6b5211}#kw-chapter-bar{display:none!important}