/* Progressive enhancement: without JS all content keeps its final appearance. */
picture { display: block; }
.button { transition: transform 140ms; }
.button > span[aria-hidden], .text-link > span[aria-hidden] { display: inline-block; }
.tasks-visual::before { content: none; }
.task-tape {
  width: 60%; height: 27px; position: absolute; left: -15px; top: -13px;
  z-index: 2; transform: rotate(-4deg);
  background: repeating-linear-gradient(125deg, var(--yellow) 0 7px, #15161a 7px 14px);
}
.income-number { position: relative; }
.income-accent {
  display: block; position: absolute; left: 0; bottom: -6px;
  width: 110px; height: 3px; background: var(--yellow); transform-origin: left center;
}
.cat-trail { display: flex; align-items: center; gap: 16px; margin-top: 27px; color: var(--yellow); }
.paw-mark { width: 23px; height: 25px; fill: currentColor; opacity: .64; transform: rotate(-15deg); }
.paw-mark:nth-child(2) { transform: translateY(-5px) rotate(12deg); }
.paw-mark:nth-child(3) { transform: rotate(-8deg); }
.learning-track { position: relative; min-width: 0; }
.learning-rail { position: absolute; left: -15px; top: 0; bottom: 0; width: 2px; background: var(--yellow); opacity: .28; transform-origin: top center; }
.progress-track > span { width: 100%; transform: scaleX(.333333); transform-origin: left center; transition: transform 140ms; }
.motion-playing {
  animation-duration: var(--motion-duration);
  animation-delay: var(--motion-delay);
  animation-timing-function: cubic-bezier(.22, .8, .25, 1);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}
.motion-playing[data-motion="sticker"] { animation-name: ch-sticker; }
.motion-playing[data-motion="note"] { animation-name: ch-note; }
.motion-playing[data-motion="label"], .motion-playing[data-motion="step"],
.motion-playing[data-motion="complete"] { animation-name: ch-rise; }
.motion-playing[data-motion="guide"], .motion-playing[data-motion="skill"] { animation-name: ch-guide; }
.motion-playing[data-motion="tape"] { animation-name: ch-tape; }
.motion-playing[data-motion="underline"] { animation-name: ch-line; }
.motion-playing[data-motion="stamp"] { animation-name: ch-stamp; }
.motion-playing[data-motion="paw"] { animation-name: ch-paw; }
.motion-playing[data-motion="rail"] { animation-name: ch-rail; }
.motion-playing[data-motion="invite"] { animation-name: ch-invite; }
.motion-playing[data-motion="panel"] { animation-name: ch-panel; }
.reveal-ready { opacity: 0; }
.motion-playing[data-motion^="enter-"] { animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
.motion-playing[data-motion="enter-rise"] { animation-name: ch-enter-rise; }
.motion-playing[data-motion="enter-left"] { animation-name: ch-enter-left; }
.motion-playing[data-motion="enter-right"] { animation-name: ch-enter-right; }
.motion-playing[data-motion="enter-depth"] { animation-name: ch-enter-depth; }
.motion-playing[data-motion="enter-tilt"] { animation-name: ch-enter-tilt; }
.motion-playing[data-motion="enter-soft"] { animation-name: ch-enter-soft; }
:root { --reveal-y: 32px; --reveal-x: 36px; --reveal-scale: .94; --reveal-angle: -2deg; }
:root[data-motion-mode="lite"] { --reveal-y: 14px; --reveal-x: 12px; --reveal-scale: .985; --reveal-angle: 0deg; }
@keyframes ch-enter-rise { from { opacity: 0; transform: var(--motion-base) translateY(var(--reveal-y)); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@keyframes ch-enter-left { from { opacity: 0; transform: var(--motion-base) translateX(calc(-1 * var(--reveal-x))); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@keyframes ch-enter-right { from { opacity: 0; transform: var(--motion-base) translateX(var(--reveal-x)); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@keyframes ch-enter-depth { from { opacity: 0; transform: var(--motion-base) scale(var(--reveal-scale)) translateY(var(--reveal-y)); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@keyframes ch-enter-tilt { from { opacity: 0; transform: var(--motion-base) translateY(var(--reveal-y)) rotate(var(--reveal-angle)) scale(.985); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@keyframes ch-enter-soft { from { opacity: 0; transform: var(--motion-base) translateY(10px) scale(.99); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
:root { --motion-rise: 6px; --motion-sticker: 8px; --motion-arrow: 4px; --motion-guide: -6px; --motion-stamp: .94; }
:root[data-motion-mode="lite"] { --motion-rise: 4px; --motion-sticker: 4px; --motion-arrow: 2px; --motion-guide: -3px; --motion-stamp: .97; }
@keyframes ch-sticker { from { transform: var(--motion-base) translateY(var(--motion-sticker)); } to { transform: var(--motion-base); } }
@keyframes ch-note { from { transform: var(--motion-base) translateX(10px); } to { transform: var(--motion-base); } }
@keyframes ch-rise { from { opacity: .35; transform: var(--motion-base) translateY(var(--motion-rise)); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@keyframes ch-guide { from { opacity: .4; transform: var(--motion-base) translateX(var(--motion-guide)); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@keyframes ch-tape { from { transform: var(--motion-base) translateX(-12px); } to { transform: var(--motion-base); } }
@keyframes ch-line { from { transform: var(--motion-base) scaleX(0); } to { transform: var(--motion-base); } }
@keyframes ch-stamp { from { opacity: .4; transform: var(--motion-base) scale(var(--motion-stamp)); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@keyframes ch-paw { from { opacity: 0; transform: var(--motion-base) translateY(3px); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@keyframes ch-rail { from { transform: var(--motion-base) scaleY(0); } to { transform: var(--motion-base); } }
@keyframes ch-invite { 0%, 100% { transform: var(--motion-base); } 50% { transform: var(--motion-base) translate(var(--motion-arrow), calc(-1 * var(--motion-arrow))); } }
@keyframes ch-panel { from { opacity: .6; transform: var(--motion-base) translateY(4px); } to { opacity: var(--motion-opacity); transform: var(--motion-base); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button > span[aria-hidden], .text-link > span[aria-hidden] { transition: transform 140ms; }
  .button:hover > span[aria-hidden], .text-link:hover > span[aria-hidden] { transform: translate(2px, -2px); }
}
@media (max-width: 600px), (pointer: coarse), (hover: none) {
  dialog::backdrop { backdrop-filter: none; }
  .learning-rail, .paw-mark:last-child { display: none; }
  .button:not(:disabled):hover, .wordmark:hover { transform: none; }
  .button:not(:disabled):active { transform: scale(.985); }
}
@media (max-width: 600px) {
  .task-tape { width: 52%; height: 23px; left: -9px; }
  .cat-trail { margin-top: 23px; }
  .paw-mark { width: 20px; height: 22px; }
  .income-accent { width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready { opacity: 1; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}