/* Existing layered artwork/motions shared with the 114-word trial; no launcher styles. */
.reader-meaning-face[hidden], .reader-meaning-art[hidden] { display: none !important; }
.reader-meaning-art {
  position: absolute;
  width: 45%;
  aspect-ratio: 1;
  left: -30%;
  bottom: 3%;
  pointer-events: none;
}
#readerCornerMeaning .reader-meaning-art { width: 38%; left: -25%; }
.reader-meaning-art img {
  position: absolute;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 .08cqw .07cqw #67422b22);
}
.reader-meaning-sewn-name {
  position: absolute;
  left: 50%;
  top: 51%;
  translate: -50% -50%;
  color: #714a32;
  font: 900 2.5cqw "STKaiti", "KaiTi", serif;
  white-space: nowrap;
}
.reader-meaning-turn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 3%; }
.reader-meaning-turn span:first-child,
.reader-meaning-turn span:last-child {
  display: grid;
  place-items: center;
  width: 37%;
  height: 40%;
  border: 2px solid #d9ac76;
  border-radius: 12px;
  background: #fff0d8;
  color: #765039;
  font: 700 2.6cqw "STKaiti", "KaiTi", serif;
}
.reader-meaning-turn span:last-child { background: #e6f5f0; }
.reader-meaning-turn span:nth-child(2) { color: #cf9860; font: 900 4.2cqw/1 system-ui, sans-serif; }
.reader-meaning-timeline { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-evenly; }
.reader-meaning-timeline::before { content: ""; position: absolute; left: 15%; right: 15%; top: 50%; border-top: .25cqw solid #d6a568; }
.reader-meaning-timeline span { position: relative; width: 12%; aspect-ratio: 1; border: .22cqw solid #a8805a; border-radius: 50%; background: #fff4df; }
.reader-meaning-timeline span.current { width: 24%; background: #efb843; box-shadow: 0 0 0 .33cqw #fff2c1; }
.reader-meaning-timeline::after { content: attr(data-label); position: absolute; left: 25%; right: 25%; bottom: 7%; color: #745438; text-align: center; font: 700 2cqw "STKaiti", "KaiTi", serif; }
.reader-meaning-watch { position: absolute; inset: 0; }
.reader-meaning-watch span { position: absolute; top: 22%; width: 30%; aspect-ratio: 1; border: .28cqw solid #6b4d39; border-radius: 50%; background: radial-gradient(circle at 64% 48%, #29495a 0 18%, #fff8e9 19% 100%); }
.reader-meaning-watch span:first-child { left: 13%; }
.reader-meaning-watch span:nth-child(2) { left: 43%; }
.reader-meaning-watch i { position: absolute; left: 76%; top: 18%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #eea43d; box-shadow: 0 .18cqw 0 #b46d43; }
#readerMeaning.shown .reader-meaning-art[data-visual="watch"] .reader-meaning-watch i { animation: trial-watch-ball .7s .15s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art { animation: reader-sticker-in .36s .02s cubic-bezier(.2,1.35,.35,1) both; }
#readerMeaning.victory-sync .reader-meaning-art { translate: var(--victory-face-x) var(--victory-face-y); rotate: var(--victory-face-rotate); scale: var(--victory-face-scale); transition: translate .08s ease-out, rotate .08s ease-out, scale .08s ease-out; }
#readerMeaning.shown .reader-meaning-art[data-visual="under"] img:first-child { animation: trial-ball-under .65s .18s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="our"] img:nth-child(2) { animation: trial-cake-appear .55s .24s cubic-bezier(.2,1.25,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="four"] img { animation: trial-bead-pop .38s calc(.12s * var(--layer-index)) cubic-bezier(.2,1.35,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="turn"] span:nth-child(2) { animation: trial-turn .55s .2s cubic-bezier(.2,1.2,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="relation"] span:nth-child(2) { animation: trial-turn .55s .2s cubic-bezier(.2,1.2,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="toward"] img { animation: trial-toward .75s .15s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="rain"] img { animation: trial-rain .8s .12s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="fire"] img { animation: trial-fire .7s .15s cubic-bezier(.2,1.15,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="retrieve"] img:nth-child(2) { animation: trial-retrieve .8s .2s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="time"] .current { animation: trial-time .55s .2s cubic-bezier(.2,1.2,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="sewn-name"] .reader-meaning-sewn-name { animation: trial-bead-pop .45s .25s cubic-bezier(.2,1.2,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="over"] img:first-child { animation: trial-over .7s .15s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="fly"] img { animation: trial-fly .7s .15s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="roll"] img { animation: trial-roll .7s .15s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="grow"] img { animation: trial-grow .7s .15s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="snow"] img { animation: trial-grow .65s .15s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="halt"] img { animation: trial-halt .5s .1s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="bow"] img { animation: trial-bow .6s .15s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="gleam"] img { animation: trial-gleam .85s .1s ease-out both; }
#readerMeaning.shown .reader-meaning-art[data-visual="walk"] img { animation: trial-walk .65s .1s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="bar"] img:first-child {
  transform-origin: 50% 7%;
  animation: trial-bar-grip .7s .15s cubic-bezier(.2,1.1,.35,1) both;
}
#readerMeaning.shown .reader-meaning-art[data-visual="put-on"] img:nth-child(2) { animation: trial-put-hat .72s .18s cubic-bezier(.2,1.15,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="sit"] img { animation: trial-sit .62s .1s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="some-foam"] img { animation: trial-some-foam .62s .08s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="take-heavy"] img { animation: trial-take-heavy .8s .1s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="think-egg"] img { animation: trial-think-egg .68s .12s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="been"] img { animation: trial-been .72s .1s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="bus"] img { animation: trial-bus .8s .08s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="buy"] img { animation: trial-buy .65s .12s cubic-bezier(.2,1.15,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="feet"] img { animation: trial-feet .62s .1s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="five"] img { animation: trial-five .72s .12s cubic-bezier(.2,1.2,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="garden"] img { animation: trial-garden .72s .1s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="made"] img { animation: trial-made .72s .08s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="man"] img { animation: trial-man .65s .12s cubic-bezier(.2,1.15,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="morning"] img { animation: trial-morning .72s .08s cubic-bezier(.2,1.1,.35,1) both; }
#readerMeaning.shown .reader-meaning-art[data-visual="quiet"] img { animation: trial-quiet .7s .1s cubic-bezier(.2,1.1,.35,1) both; }
@keyframes trial-ball-under { from { opacity: .45; translate: 18% -17%; } to { opacity: 1; translate: 0 0; } }
@keyframes trial-cake-appear { from { opacity: 0; translate: 0 20%; scale: .75; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-bead-pop { from { opacity: 0; scale: .68; } to { opacity: 1; scale: 1; } }
@keyframes trial-turn { from { opacity: 0; rotate: -38deg; scale: .75; } to { opacity: 1; rotate: 0; scale: 1; } }
@keyframes trial-toward { from { opacity: .4; translate: -21% -8%; rotate: -4deg; } to { opacity: 1; translate: 0 0; rotate: 0; } }
@keyframes trial-rain { from { opacity: .4; translate: 0 -18%; } to { opacity: 1; translate: 0 0; } }
@keyframes trial-fire { from { opacity: .55; scale: .84; } to { opacity: 1; scale: 1; } }
@keyframes trial-retrieve { from { opacity: .7; translate: 0 -50%; } to { opacity: 1; translate: 0 0; } }
@keyframes trial-time { from { scale: .55; } to { scale: 1; } }
@keyframes trial-over { from { opacity: .7; translate: -18% 20%; } to { opacity: 1; translate: 0 0; } }
@keyframes trial-fly { from { opacity: .6; translate: -22% 12%; } to { opacity: 1; translate: 0 0; } }
@keyframes trial-roll { from { rotate: -15deg; } to { rotate: 0; } }
@keyframes trial-grow { from { scale: .72; transform-origin: center bottom; } to { scale: 1; transform-origin: center bottom; } }
@keyframes trial-halt { from { translate: -12% 0; } to { translate: 0 0; } }
@keyframes trial-bow { from { rotate: -4deg; } to { rotate: 0; } }
@keyframes trial-gleam { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.24); } }
@keyframes trial-walk { from { translate: -12% 0; } to { translate: 0 0; } }
@keyframes trial-bar-grip { from { opacity: .7; rotate: -5deg; } to { opacity: 1; rotate: 0deg; } }
@keyframes trial-put-hat { from { opacity: .25; translate: 0 -28%; rotate: -7deg; } to { opacity: 1; translate: 0 0; rotate: 0; } }
@keyframes trial-sit { from { opacity: .35; translate: 0 -8%; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-some-foam { from { opacity: .35; scale: .78; } to { opacity: 1; scale: 1; } }
@keyframes trial-take-heavy { 0% { opacity: .35; translate: -8% 0; rotate: -2deg; } 55% { opacity: 1; translate: 2% 0; rotate: 1deg; } 100% { opacity: 1; translate: 0 0; rotate: 0; } }
@keyframes trial-think-egg { from { opacity: .3; translate: 0 -10%; scale: .86; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-been { 0% { opacity: .2; translate: 0 -13%; scale: .84; } 70% { opacity: 1; translate: 0 1%; scale: 1.02; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-bus { from { opacity: .25; translate: 22% 0; } to { opacity: 1; translate: 0 0; } }
@keyframes trial-buy { 0% { opacity: .25; translate: 0 12%; scale: .82; } 70% { opacity: 1; translate: 0 -1%; scale: 1.02; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-feet { 0% { opacity: .2; rotate: -4deg; translate: -5% 0; } 65% { opacity: 1; rotate: 2deg; translate: 1% 0; } 100% { opacity: 1; rotate: 0; translate: 0 0; } }
@keyframes trial-five { 0% { opacity: .2; translate: 0 16%; scale: .76; } 75% { opacity: 1; translate: 0 -2%; scale: 1.04; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-garden { 0% { opacity: .2; translate: 0 12%; scale: .8; } 70% { opacity: 1; translate: 0 -1%; scale: 1.02; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-made { from { opacity: .25; translate: 0 14%; scale: .84; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-man { 0% { opacity: .2; translate: 0 -10%; scale: .86; } 70% { opacity: 1; translate: 0 1%; scale: 1.02; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-morning { from { opacity: .25; translate: 0 12%; scale: .84; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-quiet { 0% { opacity: .2; translate: 0 -9%; scale: .86; } 70% { opacity: 1; translate: 0 1%; scale: 1.02; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes trial-watch-ball { from { opacity: .25; translate: -38% 12%; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  #readerMeaning.shown .reader-meaning-art,
  #readerMeaning.shown .reader-meaning-art img,
  #readerMeaning.shown .reader-meaning-art span { animation: none !important; }
}