/* Akribeia motion: precise, brief, and still while a player thinks. */
.precision-mark{display:inline-flex;align-items:center;gap:5px;width:51px;flex:none}
.precision-mark i{display:block;width:13px;height:13px;background:#b56845}
.precision-mark i:first-child{background:#305ca5;border-radius:50%}
.precision-mark i:last-child{background:#b49043;border-radius:8px 8px 0 0}
.piece-in-transit{z-index:6}
.piece-in-transit .piece{pointer-events:none}
#motion-toggle{white-space:nowrap;min-height:32px;border:1px solid var(--line);border-radius:3px;padding:6px 10px}
#motion-toggle:disabled{opacity:.75}
.hero-actions .button,.header-cta{position:relative}
@media(prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .lesson-card{transition:transform .24s ease,background .24s,border-color .24s,box-shadow .24s}
  :root:not([data-motion="off"]) .button span,:root:not([data-motion="off"]) .text-link span,:root:not([data-motion="off"]) .journal-arrow,:root:not([data-motion="off"]) .lesson-card-footer span:last-child{display:inline-block;transition:transform .22s ease}
  :root:not([data-motion="off"]) .button:hover span,:root:not([data-motion="off"]) .button:focus-visible span,:root:not([data-motion="off"]) .journal-row:hover .journal-arrow,:root:not([data-motion="off"]) .lesson-card:hover .lesson-card-footer span:last-child{transform:translate(3px,-3px)}
  :root:not([data-motion="off"]) .text-link:hover span{transform:translateY(3px)}
  :root:not([data-motion="off"]) .round-button{transition:transform .22s,background .22s}
  :root:not([data-motion="off"]) .round-button:hover{transform:rotate(8deg)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){:root:not([data-motion="off"]) .lesson-card:hover{transform:translateY(-4px);box-shadow:0 10px 18px -15px #213c3360}}
:root[data-motion="off"]{scroll-behavior:auto}
:root[data-motion="off"] *, :root[data-motion="off"] *::before,:root[data-motion="off"] *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
:root[data-motion="off"] .button:hover{transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.button:hover{transform:none}}
@media(max-width:380px){.hero h1{font-size:60px}.hero-actions{flex-wrap:wrap;gap:14px}.footer>div{flex-wrap:wrap;gap:12px}.precision-mark{width:43px;gap:4px}.precision-mark i{width:11px;height:11px}}