/* "Play the hero": the site's cream / ink / forest / terracotta / mustard
   system, with the hard-shadow cards the homepage already uses.
   Every state keeps the same height (the bubble and the answer panel reserve
   their space), so nothing around the widget moves while it plays.
   Layouts: stacked (board, Pip, tiles) by default; compact when the widget is
   narrow; side by side (Pip beside the board) in short desktop windows, so the
   board, the tiles and the next step all sit above the fold on laptops. */

/* Height reservation for host pages: give the empty host class="hp-host" and it
   keeps exactly the widget's height before the script runs (no layout shift). */
.hp-host:not(.hp) { display: block; width: 100%; max-width: 392px; margin-inline: auto; container: hphost / inline-size; } /* same box as the mounted widget */
@media (min-width: 861px) and (max-height: 820px) { .hp-host:not(.hp) { max-width: 470px; } }
.hp-host:not(.hp)::before { content: ''; display: block; height: calc(min(100cqw, 392px) + 283.3px); }
@container hphost (max-width: 388px) { .hp-host:not(.hp)::before { height: calc(100cqw + 293px); } }
@container hphost (max-width: 326px) { .hp-host:not(.hp)::before { height: calc(100cqw + 313px); } }
@container hphost (max-width: 297px) { .hp-host:not(.hp)::before { height: calc(100cqw + 364.7px); } } /* the links stack from here down */
@container hphost (max-width: 284px) { .hp-host:not(.hp)::before { height: calc(100cqw + 385.1px); } }
@container hphost (max-width: 270px) { .hp-host:not(.hp)::before { height: calc(100cqw + 405.3px); } }
@container hphost (max-width: 250px) { .hp-host:not(.hp)::before { height: calc(100cqw + 425.7px); } }
@media (min-width: 861px) and (max-height: 820px) {
  @container hphost (min-width: 330px) { .hp-host:not(.hp)::before { height: calc(max(min(100cqw, 470px) - clamp(118px, min(100cqw, 470px) * .28, 136px) - 14px, 212.3px) + 188.5px); } }
  @container hphost (min-width: 330px) and (max-width: 379px) { .hp-host:not(.hp)::before { height: calc(max(100cqw - 132px, 212.3px) + 204.9px); } }
}

.hp {
  --hp-paper: #FFFBF2; --hp-ink: #22201C; --hp-ink-2: #57524A; --hp-rule: #D8D0BF; --hp-mustard: #F0C24B; --hp-forest: #2E5141; --hp-coral: #C8512E; --hp-wash: #EFE9DB;
  --hp-pip: 84px; --hp-say-lines: 3; --hp-cap-lines: 4;
  position: relative; display: grid; gap: 12px; width: 100%; max-width: 392px; margin-inline: auto; font-family: 'DM Sans Variable', 'DM Sans', system-ui, sans-serif; color: var(--hp-ink);
  container: hp / inline-size;
}
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hp-stage { display: grid; gap: 10px; }

/* ---------- the board ---------- */
.hp-card { --hp-pad: 10px; container: hpcard / inline-size; position: relative; z-index: 2; margin: 12px 0 0; padding: var(--hp-pad); background: var(--hp-paper); border: 2px solid var(--hp-ink); border-radius: 12px; box-shadow: 6px 6px 0 rgba(34, 32, 28, .16); }
.hp-tag { position: absolute; z-index: 2; top: -12px; left: 14px; margin: 0; padding: 2px 10px; border: 1.5px solid var(--hp-ink); border-radius: 999px; background: var(--hp-mustard); font-weight: 800; font-size: .72rem; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* opposite the tag: a 44 px tall target around a pill the size of the tag */
.hp-easier { position: absolute; z-index: 2; top: -22px; right: 8px; min-height: 44px; margin: 0; padding: 0 6px; display: flex; align-items: center; border: 0; background: none; color: var(--hp-ink); font: inherit; cursor: pointer; }
.hp-easier[hidden] { display: none; }
/* the place in the set: "Puzzle 3 of 5", and beside the Easier button on a narrower card "3 of 5", then "3/5" */
@container hpcard (max-width: 292px) { .hp-card.has-easier .hp-tag-w { display: none; } }
@container hpcard (max-width: 236px) { .hp-card.has-easier .hp-tag-of { display: none; } .hp-card.has-easier .hp-tag-t::before { content: '/'; } }
@container hpcard (max-width: 214px) { .hp-card.has-easier .hp-tag-n { display: none; } } /* the board's description still says it */
.hp-easier span { padding: 2px 10px; border: 1.5px solid var(--hp-ink); border-radius: 999px; background: #fff; font-weight: 800; font-size: .72rem; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.hp-easier:hover span { background: #FFF6D8; }
.hp-easier:focus-visible { outline: none; }
.hp-easier:focus-visible span { outline: 3px solid var(--hp-coral); outline-offset: 2px; }
.hp-board { display: block; width: 100%; height: auto; overflow: visible; }
.hp-frame { fill: #FFFDF7; stroke: var(--hp-ink); stroke-width: 2.5; }
.hp-lines { stroke: var(--hp-rule); stroke-width: 2; fill: none; transition: opacity .6s ease; }
.hp.lines-wait .hp-lines { opacity: 0; }
.hp-rowhi, .hp-colhi { fill: rgba(240, 194, 75, .18); stroke: var(--hp-mustard); stroke-width: 2.5; stroke-dasharray: 6 5; opacity: 0; transition: opacity .3s, fill .3s, stroke .3s; }
.hp.show-hint .hp-rowhi, .hp.show-hint.two .hp-colhi { opacity: 1; }
.hp.solved .hp-rowhi { opacity: 1; fill: rgba(46, 81, 65, .09); stroke: var(--hp-forest); stroke-dasharray: none; stroke-width: 2; }
.hp-cell .hp-pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.hp-cell.on .hp-pop { opacity: 1; animation: hpPop .42s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: var(--d, 0ms); }
.hp-cell.on.still .hp-pop { animation: none; }
.hp-cell.landed .hp-pop { animation: hpLand .45s cubic-bezier(.3, 1.6, .5, 1); }
.hp-q-ring { fill: #fff; stroke: var(--hp-ink-2); stroke-width: 2.5; stroke-dasharray: 5 5; }
.hp-q-glyph { font: 800 32px 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'DM Sans Variable', 'DM Sans', sans-serif; fill: var(--hp-ink-2); text-anchor: middle; }
.hp-q-cell { transform-box: fill-box; transform-origin: center; }
.hp-q-cell.pulse { animation: hpQ 1.3s ease-in-out 2; }
.hp-q-at .hp-q-cell { transition: opacity .25s ease .2s; }
.hp-q-at.fading .hp-q-cell { opacity: 0; animation: none; }
.hp-mark { stroke: var(--hp-mustard); stroke-width: 9; stroke-linecap: round; fill: none; stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset .35s ease-out .1s; }
.hp-mark.on { stroke-dashoffset: 0; }
.hp-amb-shape, .hp-fly, .hp-spark { transform-box: view-box; transform-origin: 0 0; }
.hp-fly { filter: drop-shadow(2px 3px 0 rgba(34, 32, 28, .22)); }
.hp-spark { pointer-events: none; }
@keyframes hpPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes hpLand { 0% { transform: scale(1.22, .82); } 55% { transform: scale(.94, 1.06); } 100% { transform: none; } }
@keyframes hpQ { 0%, 60%, 100% { transform: scale(1); } 78% { transform: scale(1.1); } }
/* the end-of-set summary covers the board, inside the card's padding, so nothing around it moves */
.hp-done { position: absolute; inset: var(--hp-pad); z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 12px; overflow: hidden; text-align: center; background: var(--hp-paper); border: 2px solid var(--hp-ink); border-radius: 10px; }
.hp-done[hidden] { display: none; }
.hp-done.pop { animation: hpDone .35s cubic-bezier(.3, 1.4, .5, 1); }
.hp-done p { margin: 0; }
.hp-done-h { font: 800 1.35rem/1.15 'Bricolage Grotesque Variable', 'Bricolage Grotesque', 'DM Sans Variable', 'DM Sans', sans-serif; }
.hp-done-first { max-width: 24ch; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.hp-done-k { padding-top: 6px; font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-ink-2); }
.hp-done-k[hidden] { display: none; }
.hp-done-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hp-done-list li { padding: 3px 10px; border: 1.5px solid var(--hp-ink); border-radius: 999px; background: #fff; font-weight: 700; font-size: .8rem; line-height: 1.3; }
@keyframes hpDone { from { opacity: 0; transform: scale(.94); } }
/* a small board (phones, and beside Pip on a laptop): tighter type, and the rules as one line of text */
@container hpcard (max-width: 280px) {
  .hp-done { gap: 4px; padding: 10px; }
  .hp-done-h { font-size: 1.12rem; }
  .hp-done-first { font-size: .86rem; }
  .hp-done-k { padding-top: 2px; }
  .hp-done-list { display: block; font-weight: 700; font-size: .84rem; line-height: 1.35; }
  .hp-done-list li { display: inline; padding: 0; border: 0; background: none; font-size: inherit; line-height: inherit; }
  .hp-done-list li:not(:last-child)::after { content: ', '; }
}
@container hpcard (max-width: 200px) {
  .hp-done { gap: 2px; padding: 8px; }
  .hp-done-h { font-size: 1rem; }
  .hp-done-first, .hp-done-list { font-size: .8rem; }
}

/* ---------- Pip ---------- */
.hp-pip { display: grid; grid-template-columns: var(--hp-pip) minmax(0, 1fr); gap: 10px; align-items: center; }
.hp-pip-face { position: relative; width: var(--hp-pip); height: var(--hp-pip); }
.hp-pip-face > svg { position: relative; width: 100%; height: 100%; display: block; }
.hp-star { position: absolute; z-index: 1; width: 24%; height: 24%; opacity: 0; pointer-events: none; }
.hp-star svg { display: block; width: 100%; height: 100%; }
.hp-star.s1 { left: -14%; top: 8%; } .hp-star.s2 { left: 34%; top: -24%; } .hp-star.s3 { left: -16%; top: 60%; } /* clear of the speech bubble */
.hp-pip-face.win .hp-star { animation: hpStar .95s ease-out both; }
.hp-pip-face.win .hp-star.s2 { animation-delay: .08s; } .hp-pip-face.win .hp-star.s3 { animation-delay: .16s; }
@keyframes hpStar { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 35% { opacity: 1; transform: scale(1.2) rotate(8deg); } 100% { opacity: 0; transform: translateY(-12px) scale(.8) rotate(30deg); } }
.hp-pip-face::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: repeating-conic-gradient(rgba(240, 194, 75, .85) 0 12deg, transparent 12deg 30deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 30%, #000 31%, #000 66%, transparent 67%); opacity: 0; transform: scale(.4); }
.hp-pip-face.win { z-index: 3; animation: hpPipWin 1.05s cubic-bezier(.3, 1.4, .5, 1); } /* Pip jumps in front of the board */
.hp-pip-face.win::before { animation: hpRays 1s ease-out; }
@keyframes hpPipWin { 0% { transform: none; } 32% { transform: translateY(-16px) scale(1.26) rotate(-6deg); } 62% { transform: translateY(0) scale(1.08) rotate(4deg); } 82% { transform: translateY(-4px) scale(1.12) rotate(-2deg); } 100% { transform: none; } }
@keyframes hpRays { 0% { opacity: 0; transform: scale(.4) rotate(0deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25) rotate(40deg); } }
.hp .hp-pip-face .cx[data-mood="idle"] .cx-body, .hp .hp-pip-face .cx[data-mood="think"] .cx-body { animation-iteration-count: 1; }
.hp-bubble { position: relative; display: flex; align-items: center; margin: 0; padding: 9px 13px; min-height: calc(var(--hp-say-lines) * 1.4em + 21px); border-radius: 14px; background: #fff; border: 1.5px solid var(--hp-ink); font-weight: 600; font-size: .95rem; line-height: 1.4; transition: background-color .3s; }
.hp-bubble::before { content: ''; position: absolute; left: -7px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; background: inherit; border-left: 1.5px solid var(--hp-ink); border-bottom: 1.5px solid var(--hp-ink); transform: rotate(45deg); }
.hp-bubble.win { background: #FFF4CF; }
.hp-bubble.pop { animation: hpSay .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes hpSay { from { transform: translateY(4px) scale(.98); opacity: .2; } }

/* ---------- the answer panel: ask and after share one grid cell ---------- */
.hp-panel { display: grid; }
/* the outgoing panel fades out first, then the incoming one fades in, so they never overlap */
.hp-ask, .hp-after { grid-area: 1 / 1; display: grid; align-content: start; opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility 0s linear .14s; }
.hp-ask.live, .hp-after.live { opacity: 1; visibility: visible; transition: opacity .26s ease .14s, visibility 0s; } /* visible at once so focus can land; the fade waits */
.hp-after.dim { opacity: .7; } /* outgoing caption while the next grid pops in; text stays above 4.5:1 */
.hp-ask { gap: 8px; align-content: center; }
.hp-q { margin: 0; text-align: center; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-ink-2); }
.hp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); justify-content: center; justify-items: center; gap: 0 clamp(10px, 5%, 20px); }
/* before the grid is complete the answer slots wait as dashed outlines (the panel is inert) */
.hp-ask.pre { opacity: 1; visibility: visible; }
.hp-ask.pre .hp-q { opacity: .55; }
.hp-opts:not(.live) .hp-opt { border-style: dashed; border-color: #BDB4A2; background: transparent; box-shadow: none; }
.hp-opts:not(.live) .hp-opt svg { visibility: hidden; }
.hp-opt { width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 2px; border: 2px solid var(--hp-ink); border-radius: 12px; background: #fff; color: var(--hp-ink); cursor: pointer; box-shadow: 3px 3px 0 var(--hp-ink); transition: transform .12s, box-shadow .12s, background .15s, opacity .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hp-opts.live .hp-opt { animation: hpTile .38s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: var(--d, 0ms); }
.hp-opt svg { width: 100%; height: 100%; overflow: visible; } /* hero.js sets the view box so pieces match the board's scale */
.hp-opt:not(:disabled):not([aria-disabled="true"]):hover { background: #FFF6D8; transform: translateY(-2px); }
.hp-opt:not(:disabled):not([aria-disabled="true"]):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hp-ink); }
.hp-opt:focus-visible { outline: 3px solid var(--hp-coral); outline-offset: 3px; }
.hp-opt[aria-disabled="true"] { cursor: default; }
.hp-opt.tried { box-shadow: none; background: var(--hp-wash); border-color: #8F877A; cursor: not-allowed; }
.hp-opt.tried svg { opacity: .38; } /* only the picture fades, so the focus ring stays at full strength */
.hp-opt.picked { background: #FFF6D8; box-shadow: 1px 1px 0 var(--hp-ink); transform: translate(2px, 2px); }
.hp-opt.picked svg { visibility: hidden; }
.hp-opts.live .hp-opt.shake { animation: hpShake .4s ease-in-out; }
@keyframes hpTile { from { opacity: 0; transform: translateY(8px) scale(.7); } }
@keyframes hpShake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

.hp-after { gap: 10px; }
.hp-cap { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 10px 13px; min-height: calc(var(--hp-cap-lines) * 1.45em + 23px); border-radius: 10px; background: var(--hp-wash); border: 1px solid var(--hp-rule); font-size: .9rem; line-height: 1.45; }
.hp-why { display: block; }
.hp-tail { display: block; }
.hp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.hp-next { display: inline-grid; align-items: center; justify-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--hp-ink); border-radius: 10px; background: #fff; color: var(--hp-ink); font: inherit; font-weight: 800; cursor: pointer; box-shadow: 3px 3px 0 var(--hp-ink); transition: transform .12s, box-shadow .12s, background .15s; }
.hp-next > span { grid-area: 1 / 1; }
.hp-next.set .hp-next-p, .hp-next:not(.set) .hp-next-s { visibility: hidden; } /* hidden text is left out of the button's name */
.hp-next:hover { background: #FFF6D8; }
.hp-next:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hp-ink); }
.hp-link { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; font-weight: 800; color: var(--hp-ink); text-decoration: none; }
.hp-play { font-weight: 800; color: var(--hp-ink); text-decoration: none; white-space: nowrap; }
.hp-play .hp-arrow { margin-left: .25em; }
.hp-link-text { text-decoration: underline; text-decoration-color: var(--hp-coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hp-link:hover .hp-link-text, .hp-play:hover .hp-link-text { text-decoration-thickness: 3px; }
.hp-next:focus-visible, .hp-link:focus-visible, .hp-play:focus-visible { outline: 3px solid var(--hp-coral); outline-offset: 3px; }
/* Hint is there from the start; "Show me the answer" keeps its space (no layout shift) and appears after a hint */
/* 44px buttons in a row that takes 32px of layout (the reserved height was measured with 32px), so nothing shifts */
.hp-help { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 14px; min-height: 44px; margin-block: -6px; position: relative; z-index: 1; }
.hp-hint { box-sizing: border-box; min-height: 44px; min-width: 64px; padding: 0 16px; border: 2px solid var(--hp-ink); border-radius: 999px; background: var(--hp-paper, #FFFDF7); color: var(--hp-ink); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.hp-hint:hover { background: var(--hp-wash); }
.hp-hint.nudge { background: var(--hp-wash); border-color: var(--hp-coral); }
/* every hint step used: the button stays put and focusable (aria-disabled), drawn as used up */
.hp-hint.spent, .hp-hint.spent:hover { background: var(--hp-wash); border-color: #8F877A; border-style: dashed; color: var(--hp-ink-2); cursor: default; }
.hp-hint:focus-visible { outline: 3px solid var(--hp-coral); outline-offset: 2px; }
.hp-show { justify-self: center; box-sizing: border-box; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--hp-ink); font: inherit; font-size: .85rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--hp-coral); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; visibility: hidden; }
.hp-show.on { visibility: visible; }
.hp-show:hover { text-decoration-thickness: 3px; }
.hp-show:focus-visible { outline: 3px solid var(--hp-coral); outline-offset: 2px; border-radius: 6px; }
.hp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* compact styles follow the widget's own width (phones, or a narrow two-column hero) */
@container hp (max-width: 388px) {
  .hp-stage { --hp-pip: 60px; gap: 8px; }
  .hp-card { --hp-pad: 8px; }
  .hp-bubble { font-size: .9rem; padding: 8px 11px; }
  .hp-cap { --hp-cap-lines: 5; font-size: .88rem; }
  .hp-links { gap: 8px 10px; }
  .hp-next { padding: 0 14px; }
  .hp-long { display: none; }
}
@container hp (max-width: 326px) { .hp-bubble { --hp-say-lines: 4; } }
@container hp (max-width: 297px) { .hp-links { flex-direction: column; align-items: flex-start; } } /* links: always two rows, never "sometimes" */
@container hp (max-width: 284px) { .hp-cap { --hp-cap-lines: 6; } }
@container hp (max-width: 270px) { .hp-bubble { --hp-say-lines: 5; } }
@container hp (max-width: 250px) { .hp-cap { --hp-cap-lines: 7; } }

/* short desktop windows (laptops, a tablet on its side): Pip stands beside the board so the
   board, the tiles and the next step all fit above the fold */
@media (min-width: 861px) and (max-height: 820px) {
  .hp { max-width: 470px; }
  @container hp (min-width: 330px) {
    .hp-stage { --hp-pip: 72px; grid-template-columns: minmax(0, 1fr) clamp(118px, 28cqw, 136px); align-items: center; column-gap: 14px; }
    .hp-card { --hp-pad: 10px; }
    .hp-pip { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
    .hp-bubble { --hp-say-lines: 7; width: 100%; padding: 8px 10px; font-size: .85rem; }
    .hp-bubble::before { left: 50%; top: -7px; margin: 0 0 0 -5.5px; border-bottom: 0; border-top: 1.5px solid var(--hp-ink); }
    .hp-cap { --hp-cap-lines: 4; font-size: .9rem; }
    .hp-links { gap: 8px 18px; }
    .hp-next { padding: 0 16px; }
    .hp-long { display: inline; }
  }
  @container hp (min-width: 330px) and (max-width: 379px) { .hp-stage { --hp-pip: 60px; } .hp-long { display: none; } .hp-links { gap: 8px 10px; } .hp-next { padding: 0 14px; } .hp-opts { grid-template-columns: repeat(3, minmax(0, 84px)); } .hp-cap { --hp-cap-lines: 5; } }
}
@supports not (container-type: inline-size) {
  @media (max-width: 420px) {
    .hp { --hp-pip: 60px; --hp-say-lines: 4; --hp-cap-lines: 5; }
    .hp-card { --hp-pad: 8px; }
    .hp-bubble { font-size: .9rem; padding: 8px 11px; }
    .hp-cap { font-size: .88rem; }
    .hp-links { gap: 8px 10px; }
    .hp-long { display: none; }
  }
}

/* Windows high contrast: keep the pictures on their own light ground so dark shapes stay visible */
@media (forced-colors: active) {
  .hp-opt svg { forced-color-adjust: none; background: #FFFDF7; border-radius: 8px; }
  .hp-board, .hp-pip-face { forced-color-adjust: none; }
}

/* reduced motion: the full puzzle at once, no flying, bursting, pulsing or blinking */
@media (prefers-reduced-motion: reduce) {
  .hp-q-at .hp-q-cell { transition: none; }
  .hp-cell.on .hp-pop, .hp-cell.landed .hp-pop, .hp-q-cell.pulse, .hp-opts.live .hp-opt, .hp-opts.live .hp-opt.shake, .hp-bubble.pop, .hp-pip-face.win, .hp-pip-face.win::before, .hp-done.pop { animation: none !important; }
  .hp-star { display: none; }
  .hp-mark, .hp-lines, .hp-rowhi, .hp-colhi, .hp-ask, .hp-after, .hp-opt, .hp-next, .hp-bubble, .hp .cx .cx-cheek { transition: none !important; }
}
:root[data-motion="reduced"] .hp-mark, :root[data-motion="reduced"] .hp-lines, :root[data-motion="reduced"] .hp-ask, :root[data-motion="reduced"] .hp-after, :root[data-motion="reduced"] .hp-bubble { transition: none !important; }
:root[data-motion="reduced"] .hp-star { display: none; }
:root[data-motion="reduced"] .hp-cell.on .hp-pop, :root[data-motion="reduced"] .hp-cell.landed .hp-pop, :root[data-motion="reduced"] .hp-q-cell.pulse, :root[data-motion="reduced"] .hp-opts.live .hp-opt, :root[data-motion="reduced"] .hp-bubble.pop, :root[data-motion="reduced"] .hp-pip-face.win, :root[data-motion="reduced"] .hp-pip-face.win::before, :root[data-motion="reduced"] .hp-done.pop { animation: none !important; }