.hint { position: relative; margin: 22px 0 22px 116px; overflow: hidden; isolation: isolate; color: #fff; font-family: Inter, system-ui, sans-serif; } .hint-x { position: absolute; top: 12px; right: 12px; z-index: 9; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; color: rgb(255 255 255 / 0.62); background: rgb(3 7 18 / 0.6); cursor: pointer; } .hint-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .hint-x:hover { color: #fff; } .hint-act { cursor: pointer; font: inherit; } .hint:not(.is-on) *, .hint:not(.is-on) *::before, .hint:not(.is-on) *::after { animation-play-state: paused; } .hint.is-still *, .hint.is-still *::before, .hint.is-still *::after { animation: none !important; transition: none !important; } .hint.is-rewind *, .hint.is-rewind *::before, .hint.is-rewind *::after { animation: none !important; } @media (prefers-reduced-motion: reduce) { .hint *, .hint *::before, .hint *::after { animation: none !important; transition: none !important; } } @media (max-width: 767px) { .hint { margin: 18px 0 18px 60px; } } .hint--fable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 320px; background: #030712; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); } :where(.hint--fable) .fb-scene { order: 2; position: relative; min-height: 320px; overflow: hidden; background: radial-gradient(60% 70% at 55% 60%, rgb(238 255 65 / 0.07), rgb(3 7 18 / 0) 70%); } :where(.hint--fable) .fb-ph { position: relative; height: 100%; } :where(.hint--fable) .fb-sp { position: absolute; display: block; height: auto; mix-blend-mode: screen; } :where(.hint--fable) .fb-side { display: grid; align-content: center; justify-items: start; gap: 8px; padding: 30px 20px 30px 44px; } :where(.hint--fable) .fb-a { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 300; letter-spacing: -0.015em; color: rgb(255 255 255 / 0.86); text-wrap: balance; } :where(.hint--fable) .fb-b { margin: 0; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: #eeff41; text-wrap: balance; } :where(.hint--fable) .fb-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0 0; } :where(.hint--fable) .fb-name b { font-size: 15px; font-weight: 700; color: #fff; } :where(.hint--fable) .fb-name span { font-size: 14px; color: rgb(255 255 255 / 0.55); } :where(.hint--fable) .fb-acts { display: flex; gap: 10px; margin-top: 8px; } :where(.hint--fable) .fb-go { padding: 11px 22px; border: 0; border-radius: 999px; background: #eeff41; color: #030712; font-size: 14px; font-weight: 600; } :where(.hint--fable) .fb-alt { padding: 10px 21px; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 999px; background: transparent; color: #fff; font-size: 14px; font-weight: 600; } :where(.hint--fable) .fb-alt:hover { border-color: #eeff41; color: #eeff41; } @media (min-width: 768px) { .hint--fable > .fb-scene { container: fb-scene / inline-size; } .hint--fable > .fb-scene > .fb-ph { position: absolute; left: 50%; bottom: 0; width: 610px; height: 320px; margin-left: -305px; transform: scale(var(--fb-s, 1)); transform-origin: 50% 100%; mix-blend-mode: screen; } @container fb-scene (max-width: 599.98px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.95; } } @container fb-scene (max-width: 579.48px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.90; } } @container fb-scene (max-width: 548.98px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.85; } } @container fb-scene (max-width: 518.48px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.80; } } @container fb-scene (max-width: 487.98px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.75; } } @container fb-scene (max-width: 457.48px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.70; } } @container fb-scene (max-width: 426.98px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.65; } } @container fb-scene (max-width: 396.48px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.60; } } @container fb-scene (max-width: 365.98px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.55; } } @container fb-scene (max-width: 335.48px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.50; } } @container fb-scene (max-width: 304.98px) { .hint--fable > .fb-scene > .fb-ph { --fb-s: 0.45; } } } @media (max-width: 767px) { .hint--fable { display: block; min-height: 0; } .hint--fable > .fb-scene { position: relative; inset: auto; width: auto; height: 160px; min-height: 0; margin: 0; overflow: hidden; mix-blend-mode: screen; } .hint--fable > .fb-scene > .fb-ph { position: absolute; width: 306px; height: 190px; left: 50%; top: 4px; margin-left: -153px; transform: scale(var(--ph-s, .82)); transform-origin: 50% 0; mix-blend-mode: screen; } .hint--fable > .fb-side { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 5px 12px; padding: 2px 18px 16px; } .hint--fable .fb-a { flex: 1 0 100%; font-size: 15px; line-height: 1.25; } .hint--fable .fb-b { flex: 1 1 150px; font-size: 20px; line-height: 1.16; } .hint--fable .fb-name { display: none; } .hint--fable .fb-acts { flex: none; flex-wrap: nowrap; gap: 6px; margin: 0 0 0 auto; } .hint--fable .fb-acts:has(.fb-alt) { flex-basis: 100%; margin: 4px 0 0; } .hint--fable .fb-go, .hint--fable .fb-alt { padding: 8px 14px; font-size: 13px; white-space: nowrap; } .hint--fable .fb-go { padding: 7px 13px; border: 1.5px solid #eeff41; background: transparent; color: #eeff41; } } :where(.hint) .fb-mag { width: 330px; left: calc(50% - 160px); bottom: -34px; animation: fb-peck 1.2s ease-out .3s both; } @keyframes fb-peck { from { transform: translateY(14px) rotate(4deg); opacity: 0; } } :where(.hint) .fb-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 0.1); bottom: 14px; } :where(.hint) .fb-d1 { bottom: 26px; width: 7px; height: 7px; } :where(.hint) .fb-d2 { bottom: 8px; width: 12px; height: 12px; background: rgb(255 255 255 / 0.07); } :where(.hint) .fb-d3 { bottom: 34px; width: 5px; height: 5px; } :where(.hint) .fb-d4 { bottom: 20px; width: 10px; height: 10px; background: rgb(255 255 255 / 0.13); } :where(.hint) .fb-d5 { bottom: 4px; width: 8px; height: 8px; } :where(.hint) .fb-x0 { left: 6%; } :where(.hint) .fb-x1 { left: 14%; } :where(.hint) .fb-x2 { left: 23%; } :where(.hint) .fb-x3 { left: 31%; } :where(.hint) .fb-x4 { left: 40%; } :where(.hint) .fb-x5 { left: 58%; } :where(.hint) .fb-x6 { left: 67%; } :where(.hint) .fb-x7 { left: 76%; } :where(.hint) .fb-x8 { left: 85%; } :where(.hint) .fb-x9 { left: 93%; } :where(.hint) .filter-crow-pitcher-rig { position: absolute; width: 300px; aspect-ratio: 1; left: calc(50% - 150px); bottom: -8px; } :where(.hint) .filter-crow-pitcher-sp { inset: 0; width: 100%; } :where(.hint) .filter-crow-pitcher-water { position: absolute; left: 31%; width: 30%; top: 49%; bottom: 5%; border-radius: 3px 3px 14px 14px; background: linear-gradient(#eeff41, rgb(238 255 65 / 0.8)); mix-blend-mode: overlay; opacity: .8; transform-origin: 50% 100%; animation: filter-crow-pitcher-rise 1.9s linear .3s both; } :where(.hint) .filter-crow-pitcher-water::before { content: ''; position: absolute; left: 4%; right: 4%; top: 0; height: 2px; background: #eeff41; } @keyframes filter-crow-pitcher-rise { 0%, 22% { transform: scaleY(.32); } 30%, 48% { transform: scaleY(.55); } 56%, 74% { transform: scaleY(.78); } 82%, 100% { transform: scaleY(1); } } :where(.hint) .filter-crow-pitcher-stone { position: absolute; width: 13px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8a8d92, #3a3c40 70%); top: 84%; animation: filter-crow-pitcher-drop .5s cubic-bezier(.5, 0, .9, .6) both; } :where(.hint) .filter-crow-pitcher-s1 { left: 39%; animation-delay: .3s; } :where(.hint) .filter-crow-pitcher-s2 { left: 46%; top: 86%; animation-delay: .8s; } :where(.hint) .filter-crow-pitcher-s3 { left: 52%; top: 83%; animation-delay: 1.3s; } @keyframes filter-crow-pitcher-drop { from { transform: translateY(-260px); opacity: 0; } 15% { opacity: 1; } } :where(.hint) .filter-eagle-dot { left: var(--x); top: var(--y); position: absolute; width: calc(8px * var(--s)); height: calc(8px * var(--s)); border-radius: 50%; background: rgb(255 255 255 / 0.18); } :where(.hint) .filter-eagle-prey { position: absolute; left: 32%; top: 74%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #eeff41; box-shadow: 0 0 10px rgb(238 255 65 / 0.7); animation: filter-eagle-lit .4s ease-out 1.5s both; } :where(.hint) .filter-eagle-ring { position: absolute; left: 32%; top: 74%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1.5px solid #eeff41; animation: filter-eagle-close 1.5s cubic-bezier(.4, .1, .3, 1) .2s both; } @keyframes filter-eagle-close { from { transform: scale(7); opacity: .25; border-width: .4px; } } @keyframes filter-eagle-lit { from { background: rgb(255 255 255 / 0.18); box-shadow: none; } } :where(.hint) .filter-eagle-sp { width: 280px; right: 36px; top: -26px; animation: filter-eagle-glide 1.8s ease-out both; } @keyframes filter-eagle-glide { from { transform: translate(-36px, -8px); } } :where(.hint) .filter-radio-dial-rig { position: absolute; width: 360px; aspect-ratio: 1; left: calc(50% - 180px); top: calc(50% - 196px); } :where(.hint) .filter-radio-dial-sp { inset: 0; width: 100%; } :where(.hint) .filter-radio-dial-glow { position: absolute; left: 13%; top: 43%; width: 26%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgb(238 255 65 / 0.5), rgb(238 255 65 / 0.12) 70%, rgb(238 255 65 / 0)); mix-blend-mode: screen; animation: filter-radio-dial-on .6s ease-out 1.4s both; } @keyframes filter-radio-dial-on { from { opacity: 0; } } :where(.hint) .filter-radio-dial-hiss { position: absolute; left: 14%; top: 44%; width: 24%; height: 24%; opacity: 0; animation: filter-radio-dial-hiss 1.8s linear both; } :where(.hint) .filter-radio-dial-hiss svg { width: 100%; height: 100%; fill: none; stroke: rgb(255 255 255 / 0.7); stroke-width: 1.4; stroke-linejoin: round; } @keyframes filter-radio-dial-hiss { 0% { opacity: .9; transform: translateX(0); } 10% { transform: translateX(1px) scaleY(1.2); } 20% { transform: translateX(-1px) scaleY(.8); } 30% { transform: translateX(1px) scaleY(1.1); } 40% { transform: translateX(0) scaleY(.9); } 50% { transform: translateX(-1px); opacity: .9; } 60% { transform: translateX(1px) scaleY(1.2); } 80% { opacity: 0; } 100% { opacity: 0; } } :where(.hint) .filter-radio-dial-win { position: absolute; left: 46%; width: 38%; top: 47.5%; height: 15.5%; } :where(.hint) .filter-radio-dial-tick { left: var(--x); position: absolute; bottom: 8%; width: 2px; height: 22%; margin-left: -1px; background: rgb(255 255 255 / 0.35); animation: filter-radio-dial-flare .26s ease-out var(--d) both; } :where(.hint) .filter-radio-dial-tick.filter-radio-dial-on { height: 34%; background: #eeff41; box-shadow: 0 0 8px rgb(238 255 65 / 0.8); animation: none; } @keyframes filter-radio-dial-flare { from { background: rgb(255 255 255 / 0.35); } 30% { background: #eeff41; box-shadow: 0 0 8px rgb(238 255 65 / 0.9); } } :where(.hint) .filter-radio-dial-arm { position: absolute; inset: 0; transform: translateX(71%); animation: filter-radio-dial-sweep 1.3s cubic-bezier(.3, .1, .35, 1) .2s both; } :where(.hint) .filter-radio-dial-needle { position: absolute; left: -1px; top: 4%; bottom: 4%; width: 2px; background: #eeff41; box-shadow: 0 0 6px rgb(238 255 65 / 0.8); } @keyframes filter-radio-dial-sweep { from { transform: translateX(0); } 80% { transform: translateX(76%); } } :where(.hint) .filter-magnet-dust { left: var(--x); top: var(--y); position: absolute; width: calc(5px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; background: rgb(255 255 255 / 0.2); } :where(.hint) .filter-magnet-rig, :where(.hint) .filter-magnet-pull { position: absolute; width: 210px; aspect-ratio: 1; left: calc(50% - 105px); bottom: 62px; } :where(.hint) .filter-magnet-sp { inset: 0; width: 100%; } :where(.hint) .filter-magnet-rig { mix-blend-mode: screen; animation: filter-magnet-in 1.1s cubic-bezier(.25, .6, .3, 1) .1s both; } @keyframes filter-magnet-in { from { transform: translateX(-230px); } } :where(.hint) .filter-magnet-filing { left: var(--x); top: var(--y); position: absolute; width: 3px; height: 13px; margin: -1px 0 0 -1px; border-radius: 2px; background: #eeff41; transform-origin: 50% 0; transform: rotate(var(--r)); animation: filter-magnet-jump .55s cubic-bezier(.3, .7, .3, 1.2) var(--d) both; } @keyframes filter-magnet-jump { from { transform: translate(var(--gx), var(--gy)) rotate(var(--gr)); } } :where(.hint) .filter-combination-lock-rig { position: absolute; width: 270px; aspect-ratio: 1; left: calc(50% - 135px); top: calc(50% - 84px); } :where(.hint) .filter-combination-lock-sp { inset: 0; width: 100%; } :where(.hint) .filter-combination-lock-hasp { position: absolute; left: 30%; width: 40%; top: -17%; height: 40%; clip-path: inset(-200% -40% 0 -40%); } :where(.hint) .filter-combination-lock-hasp svg { width: 100%; height: 100%; overflow: visible; fill: none; transform: translateY(-11%); animation: filter-combination-lock-spring .35s cubic-bezier(.3, 1.6, .5, 1) 1.15s both; } :where(.hint) .filter-combination-lock-bar { stroke: #4d5056; stroke-width: 12; } :where(.hint) .filter-combination-lock-shine { stroke: rgb(255 255 255 / 0.32); stroke-width: 2.5; } :where(.hint) .filter-combination-lock-rim { stroke: #eeff41; stroke-width: 2; opacity: .85; } @keyframes filter-combination-lock-spring { from { transform: translateY(0); } } :where(.hint) .filter-combination-lock-wheel { position: absolute; top: 38%; height: 24%; width: 8.5%; overflow: hidden; border-radius: 3px; mix-blend-mode: screen; opacity: 0; animation: filter-combination-lock-blur .45s linear both; } :where(.hint) .filter-combination-lock-w0 { left: 34%; animation-delay: .2s; } :where(.hint) .filter-combination-lock-w1 { left: 45.6%; animation-delay: .45s; } :where(.hint) .filter-combination-lock-w2 { left: 57%; animation-delay: .7s; } :where(.hint) .filter-combination-lock-strip { position: absolute; left: 0; right: 0; top: 0; height: 400%; background: repeating-linear-gradient(rgb(255 255 255 / 0.55) 0 2px, rgb(255 255 255 / 0) 2px 7px); animation: inherit; animation-name: filter-combination-lock-spin; animation-timing-function: cubic-bezier(.2, .6, .4, 1); } @keyframes filter-combination-lock-blur { from { opacity: 1; } 85% { opacity: .9; } to { opacity: 0; } } @keyframes filter-combination-lock-spin { from { transform: translateY(-75%); } to { transform: translateY(0); } } :where(.hint) .filter-combination-lock-mark { position: absolute; top: 63.5%; width: 6%; height: 4px; margin-left: 1.25%; border-radius: 2px; background: #eeff41; box-shadow: 0 0 8px rgb(238 255 65 / 0.8); animation: filter-combination-lock-tick .2s ease-out both; } :where(.hint) .filter-combination-lock-m0 { left: 34%; animation-delay: .62s; } :where(.hint) .filter-combination-lock-m1 { left: 45.6%; animation-delay: .87s; } :where(.hint) .filter-combination-lock-m2 { left: 57%; animation-delay: 1.12s; } @keyframes filter-combination-lock-tick { from { opacity: 0; transform: scaleX(.2); } } @keyframes own-cuckoo-fill { from { opacity: 0; transform: scale(.92); } } :where(.hint) .own-hermit-crab-shell { width: 300px; right: 4%; bottom: -50px; animation: own-hermit-crab-lit .7s ease-out 1.5s both; } @keyframes own-hermit-crab-lit { from { filter: saturate(0) brightness(.75); } } :where(.hint) .own-hermit-crab-glow { position: absolute; right: calc(4% + 170px); bottom: 50px; width: 120px; height: 130px; border-radius: 50%; background: radial-gradient(closest-side, rgb(238 255 65 / 0.26), rgb(238 255 65 / 0)); animation: own-cuckoo-fill .7s ease-out 1.5s both; } :where(.hint) .own-hermit-crab-sp { width: 220px; right: 210px; bottom: -38px; animation: own-hermit-crab-walk 1.6s cubic-bezier(.4, .2, .4, 1) .1s both; } @keyframes own-hermit-crab-walk { from { transform: translateX(-190px); } 20% { transform: translateX(-160px) translateY(-2px); } 40% { transform: translateX(-112px); } 60% { transform: translateX(-62px) translateY(-2px); } 80% { transform: translateX(-18px); } } :where(.hint) .own-acorn-soil { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; border-top: 1px solid rgb(255 255 255 / 0.16); background: linear-gradient(rgb(255 255 255 / 0.03), rgb(255 255 255 / 0)); } :where(.hint) .own-acorn-sp { width: 240px; left: 10%; bottom: 15px; } :where(.hint) .own-acorn-seed { position: absolute; left: calc(10% + 230px); bottom: 58px; width: 60px; height: 200px; clip-path: inset(-300% -200% 0 -200%); mix-blend-mode: screen; } :where(.hint) .own-acorn-nut { width: 70px; left: -5px; bottom: -14px; animation: own-acorn-drop .7s cubic-bezier(.5, 0, .8, .6) .2s both; } @keyframes own-acorn-drop { from { transform: translate(-100px, -34px) rotate(-40deg); } 35% { transform: translate(-60px, -52px) rotate(-20deg); } 75% { transform: translate(0, -4px) rotate(0); } 88% { transform: translateY(-10px); } } :where(.hint) .own-acorn-tree { position: absolute; left: calc(10% + 190px); bottom: 74px; width: 150px; height: 200px; overflow: visible; fill: none; stroke: #eeff41; stroke-linecap: round; } :where(.hint) .own-acorn-stem { stroke-width: 3; stroke-dasharray: 1; animation: own-acorn-grow .8s ease-out 1s both; } :where(.hint) .own-acorn-br { stroke-width: 2; stroke-dasharray: 1; animation: own-acorn-grow .5s ease-out both; } :where(.hint) .own-acorn-b1 { animation-delay: 1.4s; } :where(.hint) .own-acorn-b2 { animation-delay: 1.55s; } :where(.hint) .own-acorn-b3 { animation-delay: 1.7s; } :where(.hint) .own-acorn-b4 { animation-delay: 1.85s; } @keyframes own-acorn-grow { from { stroke-dashoffset: 1; } } :where(.hint) .own-acorn-leaf { fill: #eeff41; stroke: none; transform-box: fill-box; transform-origin: center; animation: own-acorn-leaf .4s ease-out var(--d) both; } @keyframes own-acorn-leaf { from { transform: scale(0); } } :where(.hint) .own-octopus-rig { position: absolute; width: 310px; aspect-ratio: 1; left: calc(50% - 155px); top: -4px; } :where(.hint) .own-octopus-sp { inset: 0; width: 100%; } :where(.hint) .own-octopus-tok { left: var(--x); top: var(--y); position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #eeff41; filter: drop-shadow(0 0 5px rgb(238 255 65 / 0.8)); animation: own-octopus-pop .35s cubic-bezier(.3, 1.6, .5, 1) var(--d) both; } :where(.hint) .own-octopus-ring { background: none; border: 3px solid #eeff41; border-radius: 50%; box-sizing: border-box; } :where(.hint) .own-octopus-disc { border-radius: 50%; } :where(.hint) .own-octopus-sq { border-radius: 2px; width: 12px; height: 12px; } :where(.hint) .own-octopus-tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: none; } :where(.hint) .own-octopus-dia { width: 12px; height: 12px; transform: rotate(45deg); } :where(.hint) .own-octopus-bar { width: 18px; height: 7px; margin: -3px 0 0 -9px; border-radius: 4px; } @keyframes own-octopus-pop { from { opacity: 0; scale: 0; } } :where(.hint) .own-tailor-rig { position: absolute; width: 330px; aspect-ratio: 1; left: calc(50% - 165px); top: -6px; } :where(.hint) .own-tailor-sp { inset: 0; width: 100%; } :where(.hint) .own-tailor-tape { position: absolute; inset: 0; overflow: visible; fill: none; } :where(.hint) .own-tailor-reveal { stroke: #fff; stroke-width: 6; stroke-dasharray: 1; animation: own-acorn-grow 1.4s cubic-bezier(.4, .1, .4, 1) .3s both; } :where(.hint) .own-tailor-band { stroke: #eeff41; stroke-width: 1.8; } :where(.hint) .own-tailor-marks { stroke: #030712; stroke-width: 1.2; stroke-dasharray: .25 1.1; } :where(.hint) .own-tailor-chalk { stroke: rgb(255 255 255 / 0.85); stroke-width: .7; stroke-linecap: round; animation: own-tailor-chalk .25s ease-out var(--d) both; } @keyframes own-tailor-chalk { from { opacity: 0; } } :where(.hint) .own-circle-rig { position: absolute; width: 300px; aspect-ratio: 1; left: calc(50% - 93px); bottom: 30px; } :where(.hint) .own-circle-plane { position: absolute; inset: 0; overflow: visible; } :where(.hint) .own-circle-dot { fill: rgb(255 255 255 / 0.28); } :where(.hint) .own-circle-in { fill: #eeff41; animation: own-circle-in .3s ease-out var(--d) both; } @keyframes own-circle-in { from { fill: rgb(255 255 255 / 0.28); } } :where(.hint) .own-circle-arc { fill: none; stroke: #eeff41; stroke-width: .8; stroke-dasharray: 1; filter: drop-shadow(0 0 2px rgb(238 255 65 / 0.8)); animation: own-acorn-grow 1.4s cubic-bezier(.4, .1, .5, 1) .3s both; } :where(.hint) .own-circle-sp { inset: 0; width: 100%; transform-origin: 31% 90%; animation: own-circle-sway 1.7s ease-in-out .2s both; } @keyframes own-circle-sway { from { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } } @media (max-width: 767px) { :where(.hint) .fb-mag { width: 250px; left: calc(50% - 125px); } :where(.hint) .filter-crow-pitcher-rig { width: 210px; left: calc(50% - 105px); bottom: -6px; } @keyframes filter-crow-pitcher-drop { from { transform: translateY(-180px); opacity: 0; } 15% { opacity: 1; } } :where(.hint) .filter-eagle-sp { width: 190px; right: 10px; top: -24px; } :where(.hint) .filter-radio-dial-rig { width: 300px; left: calc(50% - 150px); top: calc(50% - 168px); } :where(.hint) .filter-magnet-rig, :where(.hint) .filter-magnet-pull { width: 128px; left: calc(50% - 64px); bottom: 40px; } :where(.hint) .filter-magnet-filing { width: 2.5px; height: 10px; } :where(.hint) .filter-combination-lock-rig { width: 170px; left: calc(50% - 85px); top: calc(50% - 48px); } :where(.hint) .own-hermit-crab-shell { width: 170px; bottom: -30px; } :where(.hint) .own-hermit-crab-glow { right: calc(4% + 96px); bottom: 26px; width: 70px; height: 76px; } :where(.hint) .own-hermit-crab-sp { width: 130px; right: 118px; bottom: -25px; } :where(.hint) .own-acorn-soil { height: 34px; } :where(.hint) .own-acorn-sp { width: 140px; left: 6%; bottom: 9px; } :where(.hint) .own-acorn-seed { left: calc(6% + 130px); bottom: 34px; width: 38px; } :where(.hint) .own-acorn-nut { width: 44px; left: -3px; bottom: -9px; } :where(.hint) .own-acorn-tree { left: calc(6% + 101px); bottom: 44px; width: 96px; height: 128px; } @keyframes own-acorn-drop { from { transform: translate(-58px, -18px) rotate(-40deg); } 35% { transform: translate(-36px, -30px) rotate(-20deg); } 75% { transform: translate(0, -3px) rotate(0); } 88% { transform: translateY(-6px); } } :where(.hint) .own-octopus-rig { width: 196px; left: calc(50% - 98px); top: -4px; } :where(.hint) .own-octopus-tok { scale: .75; } :where(.hint) .own-tailor-rig { width: 210px; left: calc(50% - 105px); top: -8px; } :where(.hint) .own-circle-rig { width: 180px; left: calc(50% - 56px); bottom: 18px; } } :where(.hint) .digest-st, :where(.hint) .live-st, :where(.hint) .compare-st { position: absolute; left: 50%; top: 50%; width: 440px; height: 320px; margin: -160px 0 0 -220px; } :where(.hint) .digest-st svg, :where(.hint) .live-st svg, :where(.hint) .compare-st svg { position: absolute; left: 0; top: 0; width: 440px; height: 320px; overflow: visible; } :where(.hint) .digest-st i, :where(.hint) .live-st i, :where(.hint) .compare-st i { position: absolute; display: block; } :where(.hint) .fb-hen { width: 330px; left: 4%; bottom: -30px; } :where(.hint) .fb-egg { width: 150px; left: 52%; bottom: 22px; animation: fb-roll 1.6s cubic-bezier(0.3, 0.7, 0.3, 1) .3s both; } @keyframes fb-roll { from { transform: translateX(-150px) rotate(-200deg); opacity: 0; } 30% { opacity: 1; } } :where(.hint) .digest-ant-trail { stroke: rgb(255 255 255 / .28); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; fill: none; } :where(.hint) .digest-ant-mound { fill: rgb(255 255 255 / .04); stroke: rgb(255 255 255 / .3); stroke-width: 1.5; } :where(.hint) .digest-ant-mouth { fill: #030712; stroke: rgb(255 255 255 / .25); stroke-width: 1.2; } :where(.hint) .digest-ant-ant { width: 270px; left: 196px; top: 92px; animation: digest-ant-walk 2s cubic-bezier(.3, .1, .4, 1) .2s both; } @keyframes digest-ant-walk { 0% { transform: translate(-270px, 0); } 12% { transform: translate(-236px, -3px); } 25% { transform: translate(-200px, 0); } 37% { transform: translate(-164px, -3px); } 50% { transform: translate(-126px, 0); } 62% { transform: translate(-88px, -3px); } 75% { transform: translate(-52px, 0); } 88% { transform: translate(-20px, -2px); } 100% { transform: none; } } :where(.hint) .digest-dog-paper-frame { stroke: rgb(255 255 255 / .2); stroke-width: 1.5; fill: rgb(255 255 255 / .02); } :where(.hint) .digest-dog-paper-knob { fill: rgb(255 255 255 / .35); } :where(.hint) .digest-dog-paper-step { fill: rgb(255 255 255 / .08); stroke: rgb(255 255 255 / .22); stroke-width: 1.2; } :where(.hint) .digest-dog-paper-floor { stroke: rgb(255 255 255 / .14); stroke-width: 1.2; } :where(.hint) .digest-dog-paper-dog { width: 300px; left: 120px; top: 26px; animation: digest-dog-trot 1.5s ease-out .2s both; } @keyframes digest-dog-trot { 0% { transform: translate(320px, 0); opacity: 0; } 12% { opacity: 1; } 20% { transform: translate(250px, -4px); } 40% { transform: translate(150px, 0); } 60% { transform: translate(60px, -4px); } 80% { transform: translate(0, 0); } 90% { transform: translate(0, 4px); } 100% { transform: none; } } :where(.hint) .digest-coffee-cup { width: 260px; left: 20px; top: 92px; } :where(.hint) .digest-coffee-steam path { fill: none; stroke-width: 3; stroke-linecap: round; } :where(.hint) .digest-coffee-c1, :where(.hint) .digest-coffee-c3 { stroke: rgb(255 255 255 / .5); opacity: .12; animation: digest-coffee-rise 1.8s ease-out .2s both; } :where(.hint) .digest-coffee-c3 { animation-delay: .4s; } :where(.hint) .digest-coffee-c2 { stroke: #eeff41; opacity: .7; animation: digest-coffee-keep 1.8s ease-out .3s both; } @keyframes digest-coffee-rise { from { transform: translateY(26px); opacity: .9; } } @keyframes digest-coffee-keep { from { transform: translateY(22px); opacity: 1; } } :where(.hint) .digest-coffee-ln { left: 262px; height: 7px; border-radius: 4px; background: rgb(255 255 255 / .42); transform-origin: 0 50%; animation: digest-coffee-tick .35s ease-out both; } :where(.hint) .digest-coffee-l1 { top: 162px; width: 150px; animation-delay: .5s; } :where(.hint) .digest-coffee-l2 { top: 190px; width: 128px; animation-delay: 1.05s; } :where(.hint) .digest-coffee-l3 { top: 218px; width: 96px; animation-delay: 1.6s; background: #eeff41; } @keyframes digest-coffee-tick { from { transform: scaleX(0); opacity: 0; } } :where(.hint) .digest-snow-globe-globe, :where(.hint) .digest-snow-globe-in { transform-origin: 220px 275px; animation: digest-snow-globe-rock .6s ease-in-out .15s both; } :where(.hint) .digest-snow-globe-globe { width: 380px; left: 30px; top: -10px; transform-origin: 50% 75%; } :where(.hint) .digest-snow-globe-in { position: absolute; inset: 0; } @keyframes digest-snow-globe-rock { 0% { transform: none; } 30% { transform: rotate(-6deg); } 70% { transform: rotate(6deg); } 100% { transform: none; } } :where(.hint) .digest-snow-globe-f { left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / .85); animation: digest-snow-globe-fall 2.4s cubic-bezier(.3, 0, .4, 1) var(--d) both; } :where(.hint) .digest-snow-globe-f.is-y { width: 6px; height: 6px; background: #eeff41; } @keyframes digest-snow-globe-fall { 0% { transform: translate(var(--sx), var(--sy)); } 40% { transform: translate(var(--mx), var(--my)); } 100% { transform: none; } } :where(.hint) .fb-meer { width: 300px; left: calc(50% - 150px); bottom: -24px; } :where(.hint) .fb-ring { position: absolute; left: calc(50% - 60px); top: 30px; width: 120px; height: 120px; border-radius: 50%; border: 1.5px solid rgb(238 255 65 / 0.5); animation: fb-ping 2.4s ease-out infinite both; } :where(.hint) .fb-r2 { animation-delay: .8s; } :where(.hint) .fb-r3 { animation-delay: 1.6s; } @keyframes fb-ping { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } } :where(.hint) .live-bell-the-cat-cat, :where(.hint) .live-bell-the-cat-ring { animation: live-bell-the-cat-walk 1.6s ease-in-out .2s both; } :where(.hint) .live-bell-the-cat-cat { width: 360px; left: 40px; top: 0; } :where(.hint) .live-bell-the-cat-ring { position: absolute; inset: 0; } @keyframes live-bell-the-cat-walk { 0% { transform: translate(-80px, 0); } 20% { transform: translate(-58px, -3px); } 40% { transform: translate(-40px, 0); } 60% { transform: translate(-18px, -3px); } 80%, 100% { transform: none; } } :where(.hint) .live-bell-the-cat-arcs path { fill: none; stroke: #eeff41; stroke-width: 2; stroke-linecap: round; opacity: .7; animation: live-bell-the-cat-ding 1.6s ease-out .2s both; } :where(.hint) .live-bell-the-cat-a2 { stroke-width: 1.6; } @keyframes live-bell-the-cat-ding { 0%, 14% { opacity: 0; } 24% { opacity: 1; } 40% { opacity: .1; } 62% { opacity: 1; } 100% { opacity: .7; } } :where(.hint) .live-spider-web { stroke: rgb(255 255 255 / .16); stroke-width: 1; fill: none; } :where(.hint) .live-spider-strand { position: absolute; left: 220px; top: 159px; width: 154px; height: 2px; transform-origin: 0 50%; transform: rotate(-29deg); } :where(.hint) .live-spider-lit { left: 24%; top: 0; width: 76%; height: 2px; background: #eeff41; box-shadow: 0 0 6px rgb(238 255 65 / .6); transform-origin: 100% 50%; animation: live-spider-run .6s ease-in .6s both; } @keyframes live-spider-run { from { transform: scaleX(0); } } :where(.hint) .live-spider-drop { left: 350px; top: 80px; width: 10px; height: 10px; border-radius: 50%; background: #eeff41; animation: live-spider-land .45s ease-in .15s both; } @keyframes live-spider-land { from { transform: translateY(-70px); opacity: 0; } 60% { opacity: 1; } } :where(.hint) .live-spider-pulse { left: 349px; top: 79px; width: 12px; height: 12px; border-radius: 50%; background: #eeff41; box-shadow: 0 0 10px #eeff41; opacity: 0; animation: live-spider-travel .6s ease-in .6s both; } @keyframes live-spider-travel { 0% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(-102px, 57px); } } :where(.hint) .live-spider-spider { width: 190px; left: 125px; top: 63px; transform: rotate(61deg); animation: live-spider-turn .5s ease-out 1.15s both; } @keyframes live-spider-turn { from { transform: none; } } :where(.hint) .live-lion-mouse-sizes circle { fill: rgb(255 255 255 / .25); } :where(.hint) .live-lion-mouse-rail { stroke: rgb(255 255 255 / .15); stroke-width: 1.2; } :where(.hint) .live-lion-mouse-sizes .live-lion-mouse-pick { fill: #eeff41; animation: live-lion-mouse-lit .4s ease-out 1.3s both; } @keyframes live-lion-mouse-lit { from { fill: rgb(255 255 255 / .25); } } :where(.hint) .live-lion-mouse-lion { width: 300px; left: -10px; top: 60px; } :where(.hint) .live-lion-mouse-eye { left: 218px; top: 208px; width: 8px; height: 5px; border-radius: 50%; background: #eeff41; box-shadow: 0 0 6px #eeff41; animation: live-lion-mouse-open .35s ease-out 1.2s both; } @keyframes live-lion-mouse-open { from { transform: scaleY(.1); opacity: 0; } } :where(.hint) .live-lion-mouse-mouse { width: 90px; left: 259px; top: 228px; animation: live-lion-mouse-run 1s cubic-bezier(.3, .5, .4, 1) .2s both; } @keyframes live-lion-mouse-run { from { transform: translateX(180px); opacity: 0; } 20% { opacity: 1; } } :where(.hint) .live-kettle-burner { stroke: rgb(255 255 255 / .22); stroke-width: 1.6; stroke-linecap: round; fill: none; } :where(.hint) .live-kettle-kettle { width: 260px; left: 60px; top: 70px; animation: live-kettle-shake .3s linear 1.5s 2 both; } @keyframes live-kettle-shake { 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } } :where(.hint) .live-kettle-wisps path { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 2; stroke-linecap: round; } :where(.hint) .live-kettle-wisps { opacity: 0; animation: live-kettle-wisp 1.6s ease-in-out both; } @keyframes live-kettle-wisp { 0% { opacity: 0; transform: none; } 40% { opacity: 1; } 90% { opacity: .6; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(-14px); } } :where(.hint) .live-kettle-jet { fill: #eeff41; opacity: .9; transform-origin: 296px 178px; animation: live-kettle-blow .3s ease-out 1.5s both; } @keyframes live-kettle-blow { from { transform: scale(0); opacity: 0; } } :where(.hint) .live-kettle-sound path { fill: none; stroke: #eeff41; stroke-width: 2; stroke-linecap: round; } :where(.hint) .live-kettle-sound { opacity: .55; animation: live-kettle-ring .6s ease-out 1.65s both; } @keyframes live-kettle-ring { 0% { opacity: 0; } 40% { opacity: 1; } } :where(.hint) .live-lightning-horizon { stroke: rgb(255 255 255 / .18); stroke-width: 1.4; } :where(.hint) .live-lightning-cloud { width: 360px; left: 40px; top: -30px; } :where(.hint) .live-lightning-bolt { fill: #eeff41; filter: drop-shadow(0 0 6px rgb(238 255 65 / .7)); animation: live-lightning-flash .5s linear .4s both; } @keyframes live-lightning-flash { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .15; } 60%, 100% { opacity: 1; } } :where(.hint) .live-lightning-thunder { left: 160px; top: 270px; width: 80px; height: 24px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .45); opacity: 0; } :where(.hint) .live-lightning-t1 { animation: live-lightning-roll 1.8s ease-out 1.2s both; } :where(.hint) .live-lightning-t2 { opacity: .18; transform: scale(3.4); animation: live-lightning-last 1.8s ease-out 1.7s both; } @keyframes live-lightning-roll { from { transform: scale(1); opacity: .7; } to { transform: scale(4.6); opacity: 0; } } @keyframes live-lightning-last { from { transform: scale(1); opacity: .7; } } @media (max-width: 767px) { :where(.hint) .digest-st, :where(.hint) .live-st, :where(.hint) .compare-st { zoom: .594; } :where(.hint) .fb-hen { width: 240px; bottom: -22px; } :where(.hint) .fb-egg { width: 110px; bottom: 16px; } :where(.hint) .fb-meer { width: 230px; left: calc(50% - 115px); } :where(.hint) .fb-ring { top: 24px; } } :where(.hint) .fb-tort { width: 230px; left: 2%; bottom: -26px; animation: fb-walk 6s linear both; } :where(.hint) .fb-hare { width: 290px; right: -10px; top: 0; animation: fb-leap 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) .2s both; } @keyframes fb-walk { from { transform: translateX(-40px); } } @keyframes fb-leap { from { transform: translate(-260px, 60px) rotate(-8deg); opacity: 0; } 40% { opacity: 1; } } :where(.hint) .compare-chameleon-ch { width: 280px; left: 0; top: 70px; } :where(.hint) .compare-chameleon-sight { position: absolute; left: 204px; top: 151px; height: 2px; transform-origin: 0 50%; } :where(.hint) .compare-chameleon-now { width: 214px; transform: rotate(-24.3deg); } :where(.hint) .compare-chameleon-week { width: 192px; transform: rotate(27.7deg); } :where(.hint) .compare-chameleon-ln { left: 0; top: 0; width: 100%; height: 0; border-top: 1.5px dashed rgb(255 255 255 / .4); transform-origin: 0 50%; } :where(.hint) .compare-chameleon-now .compare-chameleon-ln { border-top-color: rgb(238 255 65 / .8); animation: compare-chameleon-snap .3s ease-out .5s both; } :where(.hint) .compare-chameleon-week .compare-chameleon-ln { animation: compare-chameleon-slide 1.5s ease-in-out .9s both; } @keyframes compare-chameleon-snap { from { transform: scaleX(0); } } @keyframes compare-chameleon-slide { from { transform: scaleX(0); } } :where(.hint) .compare-chameleon-dot { left: 394px; top: 56px; width: 12px; height: 12px; border-radius: 50%; background: #eeff41; animation: compare-chameleon-blink .5s steps(1) .1s 3; } @keyframes compare-chameleon-blink { 50% { opacity: .15; } } :where(.hint) .compare-chameleon-flash { left: 382px; top: 44px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgb(238 255 65 / .6); opacity: 0; animation: compare-chameleon-pop .9s ease-out .5s both; } @keyframes compare-chameleon-pop { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } } :where(.hint) .compare-chameleon-bar { left: 384px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .45); } :where(.hint) .compare-chameleon-b1 { top: 222px; width: 52px; } :where(.hint) .compare-chameleon-b2 { top: 233px; width: 44px; } :where(.hint) .compare-chameleon-b3 { top: 244px; width: 50px; } :where(.hint) .compare-chameleon-b4 { top: 255px; width: 36px; } :where(.hint) .compare-tap-tap { width: 230px; left: 100px; top: 0; } :where(.hint) .compare-tap-glass { width: 200px; left: 78px; top: 134px; } :where(.hint) .compare-tap-fill { fill: rgb(238 255 65 / .5); transform-origin: 178px 272px; animation: compare-tap-rise 1.9s cubic-bezier(.5, 0, .7, .6) .35s both; } @keyframes compare-tap-rise { from { transform: scaleY(0); } } :where(.hint) .compare-tap-drops { position: absolute; inset: 0; } :where(.hint) .compare-tap-drop { left: 174px; top: 176px; width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #eeff41; opacity: 0; animation: compare-tap-fall .36s ease-in var(--d) both; } @keyframes compare-tap-fall { 0% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(86px); } } :where(.hint) .compare-tap-hang { left: 174px; top: 176px; width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #eeff41; box-shadow: 0 0 8px rgb(238 255 65 / .6); transform-origin: 50% 0; animation: compare-tap-swell .5s ease-out 2.1s both; } @keyframes compare-tap-swell { from { transform: scale(.2); opacity: 0; } } .compare-tortoise-hare .fb-acts, .compare-chameleon .fb-acts, .compare-tap .fb-acts { flex-wrap: wrap; } .compare-tortoise-hare .fb-acts .hint-act, .compare-chameleon .fb-acts .hint-act, .compare-tap .fb-acts .hint-act { white-space: nowrap; } @media (max-width: 767px) { :where(.hint) .fb-tort { width: 170px; } :where(.hint) .fb-hare { width: 210px; } } :where(.hint) .signal-stage, :where(.hint) .source-stage { position: absolute; left: calc(50% - 280px); bottom: 0; width: 560px; height: 320px; mix-blend-mode: screen; } :where(.hint) .signal-stage i, :where(.hint) .source-stage i { position: absolute; display: block; } :where(.hint) .signal-stage > div { mix-blend-mode: screen; } :where(.hint) .signal-gold-pan-tilt { position: absolute; left: 50px; top: -60px; width: 460px; height: 460px; transform-origin: 50% 50%; animation: signal-gold-pan-tilt 1.6s ease-in-out .3s both; } :where(.hint) .signal-gold-pan-pan { left: 0; top: 0; width: 100%; } :where(.hint) .signal-gold-pan-grit { left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: rgb(255 255 255 / 0.5); opacity: 0; animation: signal-gold-pan-wash .7s cubic-bezier(.5, 0, .7, .4) var(--d) both; } :where(.hint) .signal-gold-pan-stay { opacity: .45; animation: none; } :where(.hint) .signal-gold-pan-nug { left: 214px; top: 230px; width: 18px; height: 13px; border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; background: #eeff41; box-shadow: 0 0 14px 4px rgb(238 255 65 / 0.55); animation: signal-gold-pan-shine 1.9s ease-out .2s both; } @keyframes signal-gold-pan-tilt { 25% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-4deg); } } @keyframes signal-gold-pan-wash { from { transform: none; opacity: 1; } 60% { opacity: .9; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } } @keyframes signal-gold-pan-shine { from { opacity: .45; box-shadow: 0 0 0 0 rgb(238 255 65 / 0); } 70% { opacity: .6; } } :where(.hint) .signal-starlings-dot { left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: #eeff41; animation: signal-starlings-gather 2s cubic-bezier(.45, 0, .2, 1) var(--d) both; } :where(.hint) .signal-starlings-bird { width: 230px; left: 6px; top: 118px; animation: signal-starlings-fly 2.2s ease-out both; } @keyframes signal-starlings-gather { from { transform: translate(var(--dx), var(--dy)); background: rgb(255 255 255 / 0.4); } 50% { transform: translate(var(--mx), var(--my)); background: rgb(255 255 255 / 0.5); } } @keyframes signal-starlings-fly { from { transform: translate(-40px, 16px); } } :where(.hint) .signal-ostrich-sand { left: 40px; top: 268px; width: 480px; height: 2px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.32) 20%, rgb(255 255 255 / 0.32) 80%, transparent); } :where(.hint) .signal-ostrich-down { width: 320px; left: 175px; top: 9px; opacity: 0; animation: signal-ostrich-down 1.5s ease-in both; } :where(.hint) .signal-ostrich-up { width: 320px; left: 120px; top: -26px; transform-origin: 44% 92%; animation: signal-ostrich-up 2.3s ease-out both; } @keyframes signal-ostrich-down { from { opacity: 1; } 55% { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } } @keyframes signal-ostrich-up { from { opacity: 0; transform: translateY(26px); } 38% { opacity: 0; transform: translateY(26px); } 70% { opacity: 1; transform: none; } 84% { transform: rotate(-2deg); } } :where(.hint) .signal-highlighter-line { left: 30px; top: var(--y); width: var(--w); height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.18); opacity: .5; animation: signal-highlighter-dim .6s ease-out 1.2s both; } :where(.hint) .signal-highlighter-hit { background: rgb(255 255 255 / 0.5); opacity: 1; animation: none; } :where(.hint) .signal-highlighter-band { left: 22px; top: 162px; width: 390px; height: 22px; border-radius: 3px; background: rgb(238 255 65 / 0.8); transform-origin: 0 50%; animation: signal-highlighter-mark .9s cubic-bezier(.45, 0, .4, 1) .4s both; } :where(.hint) .signal-highlighter-pen { width: 170px; left: 375px; top: 44px; animation: signal-highlighter-glide .9s cubic-bezier(.45, 0, .4, 1) .4s both; } @keyframes signal-highlighter-dim { from { opacity: 1; } } @keyframes signal-highlighter-mark { from { transform: scaleX(0); } } @keyframes signal-highlighter-glide { from { transform: translateX(-390px); } } :where(.hint) .source-cat-hole-board { left: 0; top: 198px; width: 560px; height: 64px; border-top: 1.5px solid rgb(255 255 255 / 0.3); background: linear-gradient(rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.04)); } :where(.hint) .source-cat-hole-floor { left: 0; top: 262px; width: 560px; height: 1px; background: rgb(255 255 255 / 0.22); } :where(.hint) .source-cat-hole-hole { left: 398px; top: 214px; width: 58px; height: 48px; border-radius: 29px 29px 0 0; background: #000; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.22); } :where(.hint) .source-cat-hole-dot { left: 423px; top: 240px; width: 8px; height: 8px; border-radius: 50%; background: #eeff41; box-shadow: 0 0 10px 3px rgb(238 255 65 / 0.55); animation: source-cat-hole-glint .35s ease-out 1.5s both; } :where(.hint) .source-cat-hole-cat { width: 300px; left: 40px; top: 46px; transform: translateX(10px) rotate(2deg); transform-origin: 40% 95%; animation: source-cat-hole-wait 2.3s ease-in-out both; } @keyframes source-cat-hole-glint { from { transform: scale(.2); opacity: 0; } } @keyframes source-cat-hole-wait { from { transform: none; } 15% { transform: rotate(-1.4deg); } 22% { transform: none; } 34% { transform: rotate(-1.4deg); } 41% { transform: none; } 72% { transform: none; } 88% { transform: translateX(12px) rotate(2.5deg); } } :where(.hint) .source-cat-bag-floor { left: 20px; top: 291px; width: 520px; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.25) 15%, rgb(255 255 255 / 0.25) 85%, transparent); } :where(.hint) .source-cat-bag-sack { width: 250px; left: 30px; top: 120px; transform: scale(1.05, .82); transform-origin: 50% 68%; animation: source-cat-bag-slump .5s ease-out .45s both; } :where(.hint) .source-cat-bag-cat { width: 290px; left: 250px; top: 50px; animation: source-cat-bag-leap .9s cubic-bezier(.25, .7, .35, 1) .4s both; } @keyframes source-cat-bag-slump { from { transform: none; } } @keyframes source-cat-bag-leap { from { transform: translate(-150px, 70px) scale(.4); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(-60px, -36px) scale(.9); } } :where(.hint) .source-spring-svg { position: absolute; inset: 0; width: 100%; height: 100%; } :where(.hint) .source-spring-line { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: source-spring-run 1.4s cubic-bezier(.3, .5, .4, 1) var(--d) both; } :where(.hint) .source-spring-rocks { width: 330px; left: -6px; top: 14px; transform: scaleX(-1); } :where(.hint) .source-spring-ring { left: 99px; top: 186px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #eeff41; opacity: 0; animation: source-spring-pulse .7s ease-out .2s 2 both; } @keyframes source-spring-run { from { stroke-dashoffset: 1; } } @keyframes source-spring-pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.9); opacity: 0; } } :where(.hint) .world-st { position: absolute; left: 50%; top: 50%; width: 420px; height: 320px; margin: -160px 0 0 -210px; } :where(.hint) .world-st > * { position: absolute; } :where(.hint) .world-st, :where(.hint) .world-st > div { mix-blend-mode: screen; } :where(.hint) .world-st > div > .fb-sp { mix-blend-mode: normal; } :where(.hint) .world-bear-salmon-ledge { left: -60px; width: 250px; top: 22%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.35) 30%, rgb(255 255 255 / 0.35) 80%, rgb(255 255 255 / 0)); } :where(.hint) .world-bear-salmon-falls { left: -50px; width: 230px; top: 22%; height: 60%; overflow: hidden; filter: blur(0.5px); -webkit-mask-image: linear-gradient(#000 30%, transparent), linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 5px, #000 5px 7px, transparent 7px 13px, #000 13px 14px, transparent 14px 16px, #000 16px 18px, transparent 18px 27px, #000 27px 28px, transparent 28px 33px); -webkit-mask-composite: source-in; mask-image: linear-gradient(#000 30%, transparent), linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 5px, #000 5px 7px, transparent 7px 13px, #000 13px 14px, transparent 14px 16px, #000 16px 18px, transparent 18px 27px, #000 27px 28px, transparent 28px 33px); mask-composite: intersect; } :where(.hint) .world-bear-salmon-water { position: absolute; left: 0; right: 0; top: -110px; bottom: 0; background: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.28) 0 40px, rgb(255 255 255 / 0.04) 40px 47px, rgb(255 255 255 / 0.14) 47px 74px, rgb(255 255 255 / 0.02) 74px 81px, rgb(255 255 255 / 0.22) 81px 110px); } :where(.hint) .world-bear-salmon-bear { width: 340px; left: calc(50% - 60px); bottom: -46px; } :where(.hint) .world-bear-salmon-fish { width: 170px; left: calc(50% - 80px); top: -14px; transform: scaleX(-1) rotate(-14deg); } :where(.hint.is-on) .world-bear-salmon-water { animation: world-bear-salmon-pour 1.4s linear 3; } :where(.hint.is-on) .world-bear-salmon-fish { animation: world-bear-salmon-leap 1s cubic-bezier(0.25, 0.7, 0.3, 1) .3s both; } @keyframes world-bear-salmon-pour { to { transform: translateY(110px); } } @keyframes world-bear-salmon-leap { from { opacity: 0; transform: translate(-90px, 200px) scaleX(-1) rotate(-50deg); } 30% { opacity: 1; } to { transform: scaleX(-1) rotate(-14deg); } } :where(.hint) .world-fox-ear-snow { left: -120px; right: -120px; top: 78%; height: 2px; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.4) 25%, rgb(255 255 255 / 0.4) 75%, rgb(255 255 255 / 0)); } :where(.hint) .world-fox-ear-drift { left: -120px; right: -120px; top: 78%; height: 25%; background: radial-gradient(50% 100% at 50% 0, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0) 80%); } :where(.hint) .world-fox-ear-fox { width: 300px; left: calc(50% - 60px); top: calc(78% - 272px); transform-origin: 60% 90%; } :where(.hint) .world-fox-ear-ring { left: calc(50% - 110px); top: calc(78% + 12px); width: 70px; height: 22px; margin-left: -35px; border-radius: 50%; border: 1.5px solid rgb(238 255 65 / 0.8); opacity: 0.5; } :where(.hint) .world-fox-ear-dot { left: calc(50% - 114px); top: calc(78% + 19px); width: 8px; height: 8px; border-radius: 50%; background: #eeff41; box-shadow: 0 0 12px #eeff41; } :where(.hint.is-on) .world-fox-ear-ring { animation: world-fox-ear-ping 1.4s ease-out 3 both; } :where(.hint.is-on) .world-fox-ear-ring2 { animation-delay: .7s; } :where(.hint.is-on) .world-fox-ear-fox { animation: world-fox-ear-tilt 1s cubic-bezier(0.3, 0.7, 0.3, 1) .5s both; } @keyframes world-fox-ear-ping { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } } @keyframes world-fox-ear-tilt { from { transform: rotate(8deg); } } :where(.hint) .world-beacons-hz { left: -120px; right: -120px; top: 58%; height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.25) 40%, rgb(255 255 255 / 0.05)); } :where(.hint) .world-beacons-b { -webkit-mask-image: linear-gradient(#000 70%, transparent 92%); mask-image: linear-gradient(#000 70%, transparent 92%); } :where(.hint) .world-beacons-b img { position: absolute; inset: 0; width: 100%; } :where(.hint) .world-beacons-b1 { width: 260px; height: 260px; left: calc(50% - 250px); top: calc(68% - 190px); } :where(.hint) .world-beacons-b2 { width: 170px; height: 170px; left: calc(50% - 40px); top: calc(62% - 128px); } :where(.hint) .world-beacons-b3 { width: 110px; height: 110px; left: calc(50% + 125px); top: calc(58% - 84px); } :where(.hint) .world-beacons-d { left: var(--x); top: var(--y); width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #eeff41; opacity: 0.75; } :where(.hint.is-on) .world-beacons-on { animation: world-beacons-on .3s ease-out both; } :where(.hint.is-on) .world-beacons-b1 .world-beacons-on { animation-delay: .2s; } :where(.hint.is-on) .world-beacons-b2 .world-beacons-on { animation-delay: 1.1s; } :where(.hint.is-on) .world-beacons-b3 .world-beacons-on { animation-delay: 1.9s; } :where(.hint.is-on) .world-beacons-d { animation: world-beacons-d .2s ease-out var(--d) both; } @keyframes world-beacons-on { from { opacity: 0; } } @keyframes world-beacons-d { from { opacity: 0; transform: scale(2); } } @media (max-width: 767px) { :where(.hint) .signal-stage, :where(.hint) .source-stage { transform: scale(.54); transform-origin: 50% 100%; } :where(.hint) .world-st { transform: scale(0.594); } } :where(.hint) .share-bee-dance-floor { position: absolute; width: 360px; height: 200px; left: calc(50% - 180px); top: calc(50% - 100px); mix-blend-mode: screen; } :where(.hint) .share-bee-dance-path { position: absolute; inset: 0; overflow: visible; fill: none; stroke: #eeff41; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgb(238 255 65 / 0.6)); } :where(.hint) .share-bee-dance-path path { stroke-dasharray: 1; animation: share-bee-dance-draw 2.2s linear .2s both; } @keyframes share-bee-dance-draw { from { stroke-dashoffset: 1; } } :where(.hint) .share-bee-dance-bee { position: absolute; left: 0; top: 0; width: 120px; height: 120px; offset-path: path('M180 100C215 48 320 40 320 100S215 152 180 100 40 40 40 100 145 152 180 100'); offset-anchor: 50% 50%; offset-rotate: auto 90deg; offset-distance: 100%; animation: share-bee-dance-fly 2.2s linear .2s both; } :where(.hint) .share-bee-dance-sp { inset: 0; width: 100%; } @keyframes share-bee-dance-fly { from { offset-distance: 0%; } } :where(.hint) .share-penguin-egg-a { width: 240px; left: 18%; bottom: -14px; transform-origin: 50% 95%; animation: share-penguin-egg-nudge .7s ease-in-out .2s both; } :where(.hint) .share-penguin-egg-b { width: 240px; right: 18%; bottom: -14px; transform: scaleX(-1); transform-origin: 50% 95%; animation: share-penguin-egg-catch .6s ease-out 1.5s both; } @keyframes share-penguin-egg-nudge { 50% { transform: rotate(3deg); } } @keyframes share-penguin-egg-catch { 50% { transform: scaleX(-1) rotate(3deg); } } :where(.hint) .share-penguin-egg-glow { position: absolute; left: calc(82% - 210px); bottom: 2px; width: 120px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgb(238 255 65 / 0.4), rgb(238 255 65 / 0)); animation: share-penguin-egg-glow .5s ease-out 1.6s both; } @keyframes share-penguin-egg-glow { from { opacity: 0; } } :where(.hint) .share-penguin-egg-track { position: absolute; inset: 0; mix-blend-mode: screen; animation: share-penguin-egg-roll 1.4s cubic-bezier(.4, .15, .4, 1) .45s both; } :where(.hint) .share-penguin-egg-lift { position: absolute; inset: 0; animation: share-penguin-egg-lift 1.4s ease-in-out .45s both; } :where(.hint) .share-penguin-egg-egg { width: 104px; left: calc(82% - 150px - 52px); bottom: -16px; animation: share-penguin-egg-turn 1.4s cubic-bezier(.45, .1, .4, 1) .45s both; } @keyframes share-penguin-egg-roll { from { transform: translateX(calc(-64% + 305px)); } } @keyframes share-penguin-egg-lift { 0%, 100% { transform: none; } 50% { transform: translateY(-58px); } } @keyframes share-penguin-egg-turn { from { transform: rotate(-300deg); } } :where(.hint) .share-baton-rig { position: absolute; width: 520px; aspect-ratio: 1; left: calc(50% - 260px); top: calc(50% - 247px); } :where(.hint) .share-baton-give, :where(.hint) .share-baton-take { inset: 0; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 16%, #000 84%, transparent 98%); mask-image: linear-gradient(90deg, transparent 2%, #000 16%, #000 84%, transparent 98%); } :where(.hint) .share-baton-give { clip-path: polygon(0 0, 60% 0, 60% 54%, 54.5% 57%, 54.5% 100%, 0 100%); animation: share-baton-give 1s cubic-bezier(.3, .6, .3, 1) .2s both; } :where(.hint) .share-baton-take { clip-path: polygon(60% 0, 100% 0, 100% 100%, 54.5% 100%, 54.5% 57%, 60% 54%); animation: share-baton-take 1s cubic-bezier(.3, .6, .3, 1) .2s both; } @keyframes share-baton-give { from { transform: translateX(-40px); } } @keyframes share-baton-take { from { transform: translateX(56px); } } :where(.hint) .share-btn { display: inline-flex; align-items: center; gap: 8px; } :where(.hint) .hint-link { min-width: 0; flex: 1 1 200px; padding: 9px 14px; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 999px; background: rgb(255 255 255 / 0.04); color: #fff; font: inherit; font-size: 13px; outline: none; } :where(.hint) .hint-link:focus { border-color: #eeff41; } :where(.hint) .hint-note { align-self: center; min-height: 1em; font-family: var(--font-mono), ui-monospace, monospace; font-size: 12.5px; letter-spacing: .02em; line-height: 1; color: #eeff41; white-space: nowrap; transition: opacity .2s; } :where(.hint) .hint-note.is-gone { opacity: 0; } :where(.hint) .hint-said { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } :where(.hint) .share-glyph { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 767px) { :where(.hint) .share-bee-dance-floor { transform: scale(.62); } :where(.hint) .share-penguin-egg-a { width: 140px; left: 10%; bottom: -8px; } :where(.hint) .share-penguin-egg-b { width: 140px; right: 10%; bottom: -8px; } :where(.hint) .share-penguin-egg-egg { width: 66px; left: calc(90% - 88px - 33px); bottom: -11px; } :where(.hint) .share-penguin-egg-glow { left: calc(90% - 128px); width: 80px; height: 22px; bottom: 0; } @keyframes share-penguin-egg-roll { from { transform: translateX(calc(-80% + 180px)); } } @keyframes share-penguin-egg-lift { 0%, 100% { transform: none; } 50% { transform: translateY(-34px); } } :where(.hint) .share-baton-rig { width: 300px; left: calc(50% - 150px); top: calc(50% - 143px); } } :where(.hint) .j09-t, :where(.hint) .j13-sig li { mix-blend-mode: screen; } :where(.hint).jn { position: relative; display: block; padding: 30px 40px; background: #030712; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); } :where(.hint).jn.hint--banner { margin: 18px 0 8px; } :where(.hint) .jn-sp { display: block; height: auto; mix-blend-mode: screen; pointer-events: none; } :where(.hint) .jn-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #fff; } :where(.hint) .jn-k { margin: 0; font-size: 15px; color: rgb(255 255 255 / 0.72); } :where(.hint) .jn-h { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; color: #eeff41; text-wrap: balance; } :where(.hint) .jn-h2 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; color: #fff; text-wrap: balance; } :where(.hint) .jn-s { margin: 0; font-size: 17px; line-height: 1.35; color: rgb(255 255 255 / 0.8); text-wrap: balance; } :where(.hint) .jn-f { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: rgb(255 255 255 / 0.86); } :where(.hint) .jn-f li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #eeff41; vertical-align: middle; transform: translateY(-1px); } :where(.hint) .jn-acts { display: flex; flex-wrap: wrap; gap: 10px; } :where(.hint) .jn-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px; background: rgb(255 255 255 / 0.03); color: rgb(255 255 255 / 0.82); font-size: 14px; } :where(.hint) .jn-btn b { color: #eeff41; } :where(.hint) .jn-btn:hover { border-color: #eeff41; } :where(.hint) .jn-jp { display: none; } :where(.hint) .jn-go { padding: 10px 20px; border: 0; border-radius: 999px; background: #eeff41; color: #030712; font-size: 14px; font-weight: 600; cursor: pointer; } :where(.hint) .jn-chip { display: inline-block; padding: 5px 11px; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 999px; font-size: 13px; color: rgb(255 255 255 / 0.75); white-space: nowrap; } :where(.hint) .jn-chip.is-on { border-color: #eeff41; background: #eeff41; color: #030712; font-weight: 600; animation: jn-pick .4s ease-out .9s both; } @keyframes jn-pick { from { background: transparent; color: rgb(255 255 255 / 0.75); border-color: rgb(255 255 255 / 0.2); } } @keyframes jn-up { from { transform: translateY(14px); opacity: 0; } } @keyframes jn-in { from { opacity: 0; } } :where(.hint) .jn-wire { position: relative; height: 14px; } :where(.hint) .jn-wire__line { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgb(238 255 65 / 0.15), rgb(238 255 65 / 0.55)); } :where(.hint) .jn-wire__p { position: absolute; top: 3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #eeff41; box-shadow: 0 0 10px #eeff41; animation: jn-run 2.4s linear infinite both; } :where(.hint) .jn-wire__p1 { animation-delay: .8s; } :where(.hint) .jn-wire__p2 { animation-delay: 1.6s; } @keyframes jn-run { from { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } } :where(.hint).j03 { display: grid; grid-template-columns: minmax(0, 0.9fr) 190px minmax(0, 1.4fr); align-items: center; gap: 24px; } :where(.hint) .j03-id { display: grid; gap: 10px; } :where(.hint) .j03-h { font-size: 34px; } :where(.hint) .j03-n { font-size: 14px; color: rgb(255 255 255 / 0.6); } :where(.hint) .j03-sp { width: 210px; margin: -20px -10px; } :where(.hint) .j03-spec { display: grid; gap: 0; margin: 0; } :where(.hint) .j03-r { display: grid; grid-template-columns: 82px 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid rgb(255 255 255 / 0.1); animation: jn-in .4s ease-out both; } :where(.hint) .j03-r:first-child { border-top: 0; } :where(.hint) .j03-r1 { animation-delay: .2s; } :where(.hint) .j03-r2 { animation-delay: .4s; } :where(.hint) .j03-r3 { animation-delay: .6s; } :where(.hint) .j03-r4 { animation-delay: .8s; } :where(.hint) .j03-r dt { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #eeff41; padding-top: 3px; } :where(.hint) .j03-r dd { margin: 0; font-size: 16px; color: #fff; } :where(.hint) .j03-r dd b { color: #eeff41; } :where(.hint).j05 { display: grid; grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); align-items: center; gap: 20px; } :where(.hint) .j05-l { display: grid; gap: 10px; } :where(.hint) .j05-c { position: relative; height: 300px; } :where(.hint) .j05-phone { position: absolute; left: -10px; top: 0; width: 280px; } :where(.hint) .j05-note { position: absolute; left: 20px; right: 20px; display: flex; gap: 8px; padding: 9px 11px; border-radius: 10px; background: rgb(255 255 255 / 0.92); color: #030712; font-size: 12.5px; line-height: 1.25; box-shadow: 0 6px 22px rgb(0 0 0 / 0.5); animation: j05-drop .6s cubic-bezier(.2, .8, .3, 1) both; } :where(.hint) .j05-n0 { top: 92px; animation-delay: .6s; } :where(.hint) .j05-n1 { top: 160px; animation-delay: 1.2s; } @keyframes j05-drop { from { transform: translateY(-16px); opacity: 0; } } :where(.hint) .j05-dot { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #eeff41; box-shadow: 0 0 0 2px #030712; } :where(.hint) .j05-r { display: grid; gap: 12px; justify-items: start; } :where(.hint) .j05-lab { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #eeff41; } :where(.hint) .j05-chips { display: flex; flex-wrap: wrap; gap: 8px; } :where(.hint).j06 { display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 22px; align-items: center; } :where(.hint) .j06-areas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 14px; color: rgb(255 255 255 / 0.55); } :where(.hint) .j06-a { animation: j06-fall .9s cubic-bezier(.3, .7, .3, 1) both; } :where(.hint) .j06-a1 { animation-delay: .1s; } :where(.hint) .j06-a2 { animation-delay: .2s; } :where(.hint) .j06-a3 { animation-delay: .3s; } :where(.hint) .j06-a4 { animation-delay: .4s; } :where(.hint) .j06-a5 { animation-delay: .5s; } :where(.hint) .j06-a6 { animation-delay: .6s; } :where(.hint) .j06-a7 { animation-delay: .7s; } @keyframes j06-fall { from { transform: translateY(-14px); opacity: 0; } } :where(.hint) .j06-l, :where(.hint) .j06-r { display: grid; gap: 10px; } :where(.hint) .j06-r { justify-items: start; } :where(.hint) .j06-c { position: relative; height: 250px; } :where(.hint) .j06-funnel { position: absolute; left: calc(50% - 115px); top: -10px; width: 230px; } :where(.hint) .j06-chip { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); animation: j06-out .6s ease-out 1.2s both; } @keyframes j06-out { from { transform: translate(-50%, -40px); opacity: 0; } } :where(.hint).j07 { padding: 0 0 26px; overflow: hidden; } :where(.hint) .j07-tape { overflow: hidden; border-bottom: 1px solid rgb(238 255 65 / 0.25); background: rgb(238 255 65 / 0.05); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } :where(.hint) .j07-run { display: flex; gap: 34px; width: max-content; padding: 11px 0; font-size: 15px; font-weight: 600; color: #eeff41; animation: j07-roll 30s linear infinite; } @keyframes j07-roll { to { transform: translateX(-50%); } } :where(.hint) .j07-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: end; padding: 22px 300px 0 40px; } :where(.hint) .j07-l, :where(.hint) .j07-r { display: grid; gap: 12px; } :where(.hint) .j07-h { font-size: 30px; } :where(.hint) .j07-sp { position: absolute; right: 30px; bottom: -70px; width: 240px; } :where(.hint).j09 { padding: 44px 14px 14px; } :where(.hint) .j09-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 10px; } :where(.hint) .j09-head { grid-row: 1 / 3; display: grid; align-content: center; gap: 12px; padding: 20px 22px; } :where(.hint) .j09-h { font-size: 34px; } :where(.hint) .j09-n { font-size: 14px; color: rgb(255 255 255 / 0.6); } :where(.hint) .j09-t { display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto 1fr; column-gap: 10px; align-items: center; padding: 14px; border-radius: 12px; background: rgb(255 255 255 / 0.035); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); animation: jn-up .5s ease-out both; } :where(.hint) .j09-t1 { animation-delay: .2s; } :where(.hint) .j09-t2 { animation-delay: .4s; } :where(.hint) .j09-t3 { animation-delay: .6s; } :where(.hint) .j09-sp { grid-row: 1 / 3; width: 96px; margin: -6px; } :where(.hint) .j09-t b { align-self: end; font-size: 16px; color: #eeff41; } :where(.hint) .j09-t span { align-self: start; font-size: 13.5px; color: rgb(255 255 255 / 0.66); } :where(.hint).j10 { display: grid; justify-items: center; gap: 12px; padding: 30px 40px 26px; text-align: center; } :where(.hint) .j10-k { max-width: 62ch; } :where(.hint) .j10-h { font-size: 34px; } :where(.hint) .j10-box { position: relative; display: flex; align-items: center; gap: 0; margin-top: 4px; } :where(.hint) .j10-sp { width: 110px; margin: -20px -14px -20px -30px; } :where(.hint) .j10-field { display: flex; align-items: center; width: 360px; height: 48px; padding: 0 18px; border: 1px solid rgb(238 255 65 / 0.55); border-radius: 999px; background: rgb(255 255 255 / 0.03); font-size: 18px; font-weight: 600; color: #fff; } :where(.hint) .j10-typed { display: inline-block; overflow: hidden; white-space: nowrap; animation: j10-type .9s steps(8) .4s both; } @keyframes j10-type { from { width: 0; } } :where(.hint) .j10-caret { width: 2px; height: 22px; margin-left: 2px; background: #eeff41; animation: j10-blink 1s steps(1) 1.3s 3; } @keyframes j10-blink { 50% { opacity: 0; } } :where(.hint) .j10-res { display: flex; gap: 10px; max-width: 520px; padding: 10px 14px; border-radius: 10px; background: rgb(255 255 255 / 0.06); text-align: left; font-size: 14px; color: #fff; animation: jn-up .5s ease-out 1.5s both; } :where(.hint) .j10-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } :where(.hint).j11 { min-height: 300px; overflow: hidden; } :where(.hint) .j11-earth { position: absolute; width: 900px; right: -120px; top: -330px; opacity: 0.9; -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 40%); mask-image: linear-gradient(90deg, transparent 5%, #000 40%); } :where(.hint) .j11-copy { position: relative; z-index: 2; display: grid; gap: 14px; justify-items: start; max-width: 520px; } :where(.hint) .j11-h { font-size: 34px; } :where(.hint) .j11-pins { position: absolute; inset: 0; z-index: 1; } :where(.hint) .j11-pin { position: absolute; display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgb(3 7 18 / 0.8); box-shadow: inset 0 0 0 1px rgb(238 255 65 / 0.5); font-size: 13px; font-weight: 600; color: #fff; animation: jn-up .5s ease-out both; } :where(.hint) .j11-pin i { width: 8px; height: 8px; border-radius: 50%; background: #eeff41; box-shadow: 0 0 8px #eeff41; } :where(.hint) .j11-us { left: 58%; top: 150px; } :where(.hint) .j11-eu { left: 78%; top: 96px; animation-delay: .3s; } :where(.hint) .j11-br { left: 66%; top: 236px; animation-delay: .6s; } :where(.hint) .j11-af { left: 86%; top: 200px; animation-delay: .9s; } @media (min-width: 768px) and (max-width: 1063px) { :where(.hint).j11 { min-height: 0; padding-top: 150px; } :where(.hint) .j11-earth { width: 520px; right: -60px; top: -130px; -webkit-mask-image: none; mask-image: none; } :where(.hint) .j11-copy { max-width: none; margin: 0 -40px -30px; padding: 34px 40px 30px; background: linear-gradient(180deg, rgb(3 7 18 / 0), #030712 34px); } :where(.hint) .j11-us { left: calc(100% - 329px); top: 60px; } :where(.hint) .j11-eu { left: calc(100% - 176px); top: 26px; } :where(.hint) .j11-br { left: calc(100% - 286px); top: 104px; } :where(.hint) .j11-af { left: calc(100% - 132px); top: 92px; } } :where(.hint).j13 { padding: 30px 40px 26px; } :where(.hint) .j13-name { margin: 0; font-size: 76px; line-height: 0.95; font-weight: 800; letter-spacing: -0.05em; color: #fff; } :where(.hint) .j13-name span { color: #eeff41; } :where(.hint) .j13-sub { margin: 6px 0 0; font-size: 18px; color: rgb(255 255 255 / 0.7); } :where(.hint) .j13-sig { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 0.1); } :where(.hint) .j13-sig li { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: #fff; animation: jn-up .5s ease-out both; } :where(.hint) .j13-s1 { animation-delay: .15s; } :where(.hint) .j13-s2 { animation-delay: .3s; } :where(.hint) .j13-s3 { animation-delay: .45s; } :where(.hint) .j13-s4 { animation-delay: .6s; } :where(.hint) .j13-ic { flex: none; width: 58px; margin: -12px -4px -12px -10px; } :where(.hint).j15 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; overflow: hidden; } :where(.hint) .j15-l { position: relative; display: grid; gap: 12px; align-content: center; min-height: 260px; } :where(.hint) .j15-h { position: relative; z-index: 1; font-size: 30px; max-width: 13em; } :where(.hint) .j15-sp { position: absolute; right: -40px; top: -40px; width: 300px; opacity: 0.6; } :where(.hint) .j15-l { container: j15-l / inline-size; } :where(.hint) .j15-h { max-width: min(13em, calc(100% - 170px)); } @container j15-l (max-width: 500px) { :where(.hint) .j15-h { font-size: 24px; max-width: calc(100% - 110px); } :where(.hint) .j15-sp { width: 200px; right: -30px; top: -10px; } } :where(.hint) .j15-panel { display: grid; gap: 14px; justify-items: start; padding: 22px; border-radius: 14px; background: rgb(255 255 255 / 0.035); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); } :where(.hint) .j15-lab { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); } :where(.hint) .j15-chips { display: flex; flex-wrap: wrap; gap: 8px; } :where(.hint) .j15-on { border-color: #eeff41; background: #eeff41; color: #030712; font-weight: 600; animation: jn-pick .35s ease-out both; } :where(.hint) .j15-c0 { animation-delay: .4s; } :where(.hint) .j15-c1 { animation-delay: .7s; } :where(.hint) .j15-c3 { animation-delay: 1s; } :where(.hint) .j15-row { display: flex; align-items: center; gap: 10px; width: 100%; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.08); font-size: 14px; color: rgb(255 255 255 / 0.75); } :where(.hint) .j15-row b { color: #eeff41; font-size: 15px; } :where(.hint) .j15-row > span:not(.j15-seg) { flex: 1; } :where(.hint) .j15-tog { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: #eeff41; } :where(.hint) .j15-tog::after { content: ''; position: absolute; top: 3px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #030712; animation: j15-flip .3s ease-out 1.3s both; } @keyframes j15-flip { from { left: 3px; } } :where(.hint) .j15-seg { display: flex; flex: none; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 999px; overflow: hidden; } :where(.hint) .j15-seg i { padding: 3px 10px; font-style: normal; font-size: 12.5px; } :where(.hint) .j15-seg i.is-on { background: #eeff41; color: #030712; font-weight: 600; } :where(.hint).j17 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 22px 30px 26px; } :where(.hint) .j17-name { font-size: 20px; } :where(.hint) .j17-line { margin: 0; font-size: 19px; line-height: 1.3; color: rgb(255 255 255 / 0.85); text-wrap: balance; } :where(.hint) .j17-line b { color: #eeff41; } :where(.hint) .j17-wire { position: absolute; left: 30px; right: 30px; bottom: 4px; } :where(.hint).j18 { display: grid; gap: 14px; justify-items: start; min-height: 360px; overflow: hidden; } :where(.hint) .j18-bg { position: absolute; right: -200px; bottom: -330px; width: 900px; opacity: 0.55; } :where(.hint) .j18-k { position: relative; } :where(.hint) .j18-lines { position: relative; display: grid; gap: 2px; } :where(.hint) .j18-l { font-size: 40px; line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; color: #fff; animation: j18-slide .5s ease-out both; } :where(.hint) .j18-l0, :where(.hint) .j18-l2, :where(.hint) .j18-l4 { color: #eeff41; } :where(.hint) .j18-l1 { animation-delay: .15s; } :where(.hint) .j18-l2 { animation-delay: .3s; } :where(.hint) .j18-l3 { animation-delay: .45s; } :where(.hint) .j18-l4 { animation-delay: .6s; } @keyframes j18-slide { from { transform: translateX(-20px); opacity: 0; } } :where(.hint).j18 .jn-acts { position: relative; } :where(.hint).in-i01 { display: grid; background: #030712; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); } :where(.hint).in--mast { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 360px; margin-left: 0; } :where(.hint) .in-side { position: relative; z-index: 2; display: grid; align-content: center; justify-items: start; gap: 12px; padding: 36px 20px 34px 44px; } :where(.hint).in--mast .in-side { padding: 44px 20px 40px 52px; gap: 14px; } :where(.hint) .in-scene { position: relative; overflow: hidden; min-height: 240px; background: radial-gradient(60% 70% at 55% 60%, rgb(238 255 65 / 0.07), rgb(3 7 18 / 0) 70%); } :where(.hint) .in-sp { position: absolute; display: block; height: auto; mix-blend-mode: screen; pointer-events: none; } :where(.hint) .in-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; font-size: 15px; color: rgb(255 255 255 / 0.72); } :where(.hint) .in-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #fff; } :where(.hint) .in-h { margin: 0; max-width: 15em; font-size: 36px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; color: #eeff41; text-wrap: balance; } :where(.hint).in--mast .in-h { font-size: 46px; } :where(.hint) .in-f { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: rgb(255 255 255 / 0.86); } :where(.hint) .in-f li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 8px 0 0; border-radius: 50%; background: #eeff41; vertical-align: middle; transform: translateY(-1px); } :where(.hint) .in-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } :where(.hint) .in-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px; background: rgb(255 255 255 / 0.03); color: #fff; font-size: 14px; text-decoration: none; } :where(.hint) .in-btn:hover { border-color: #eeff41; } :where(.hint) .in-btn__n { font-weight: 700; color: #eeff41; } :where(.hint) .in-btn__j, :where(.hint) .in-btn__jp { color: rgb(255 255 255 / 0.8); } :where(.hint) .in-btn__jp { display: none; } :where(.hint) .in-btn--go { border-color: #eeff41; background: #eeff41; color: #030712; font-weight: 600; } :where(.hint) .in-btn--go .in-btn__j { color: #030712; } :where(.hint) .in-cue { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 0; border: 0; background: none; color: rgb(255 255 255 / 0.75); font: inherit; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; } :where(.hint) .in-cue:hover { color: #fff; } :where(.hint) .in-cue__a { width: 16px; height: 16px; fill: none; stroke: #eeff41; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: in-bob 1.4s ease-in-out 1.2s 3; } @keyframes in-bob { 50% { transform: translateY(4px); } } :where(.hint) .in01-box { position: absolute; mix-blend-mode: screen; width: 560px; aspect-ratio: 1; right: -60px; top: calc(50% - 300px); -webkit-mask-image: radial-gradient(62% 52% at 58% 42%, #000 60%, transparent 100%); mask-image: radial-gradient(62% 52% at 58% 42%, #000 60%, transparent 100%); } :where(.hint) .in01-line { inset: 0; width: 100%; mix-blend-mode: normal; } :where(.hint) .in01-pulse { position: absolute; inset: 0; filter: drop-shadow(0 0 3px #eeff41); } :where(.hint) .in01-dot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #eeff41; offset-path: path('M448 257.6 Q420 249.76 386.4 246.4 Q352.8 235.2 319.2 226.24 Q268.8 207.2 224 192.64 Q173.6 171.36 123.2 154.56 Q61.6 136.64 0 128.8'); offset-rotate: 0deg; offset-distance: 50%; animation: in01-run 2.4s linear infinite both; } :where(.hint) .in01-d1 { animation-delay: .8s; } :where(.hint) .in01-d2 { animation-delay: 1.6s; } @keyframes in01-run { from { offset-distance: 0%; } to { offset-distance: 100%; } } @media (max-width: 767px) { :where(.hint).in-i01 { grid-template-columns: 1fr; min-height: 0; margin: 10px 0 18px; } :where(.hint) .in-side, :where(.hint).in--mast .in-side { order: 2; gap: 10px; padding: 8px 20px 22px; } :where(.hint).jn { padding: 20px 18px; } :where(.hint).jn.hint--banner { margin: 10px 0 6px; } :where(.hint) .jn-h { font-size: 25px; } :where(.hint) .jn-h2 { font-size: 19px; } :where(.hint) .jn-s { font-size: 15px; } :where(.hint) .jn-acts { flex-wrap: nowrap; gap: 6px; } :where(.hint) .jn-btn { flex: 0 1 auto; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 13px; white-space: nowrap; } :where(.hint) .jn-j { display: none; } :where(.hint) .jn-jp { display: inline; } :where(.hint) .j07-more { display: none; } :where(.hint) .j05-chips .jn-chip:nth-child(5) { display: none; } :where(.hint).j03 { grid-template-columns: 1fr 110px; gap: 10px; } :where(.hint) .j03-spec { grid-column: 1 / -1; } :where(.hint) .j03-h { font-size: 25px; } :where(.hint) .j03-sp { width: 130px; margin: -10px; } :where(.hint) .j03-r { grid-template-columns: 66px 1fr; padding: 7px 0; } :where(.hint) .j03-r dd { font-size: 14px; } :where(.hint).j05 { grid-template-columns: 1fr; gap: 10px; } :where(.hint) .j05-c { height: 190px; order: -1; } :where(.hint) .j05-phone { left: calc(50% - 95px); width: 190px; top: -6px; } :where(.hint) .j05-note { left: 12%; right: 12%; font-size: 11.5px; } :where(.hint) .j05-n0 { top: 56px; } :where(.hint) .j05-n1 { top: 112px; } :where(.hint).j06 { grid-template-columns: 1fr 120px; gap: 8px 10px; } :where(.hint) .j06-areas { justify-content: flex-start; font-size: 12.5px; gap: 3px 10px; } :where(.hint) .j06-c { grid-column: 2; grid-row: 2; height: 140px; } :where(.hint) .j06-funnel { left: calc(50% - 65px); width: 130px; } :where(.hint) .j06-chip { font-size: 12px; } :where(.hint) .j06-r { grid-column: 1 / -1; } :where(.hint) .j07-body { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px 0; } :where(.hint) .j07-h { font-size: 22px; } :where(.hint) .j07-sp { display: none; } :where(.hint).j07 { padding-bottom: 18px; } :where(.hint).j09 { padding: 8px; } :where(.hint) .j09-grid { grid-template-columns: 1fr 1fr; } :where(.hint) .j09-head { grid-row: auto; grid-column: 1 / -1; padding: 12px 10px 4px; } :where(.hint) .j09-h { font-size: 25px; } :where(.hint) .j09-t { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: start; padding: 10px; } :where(.hint) .j09-sp { grid-row: auto; width: 64px; margin: -6px -6px 0; } :where(.hint) .j09-t b { font-size: 14px; } :where(.hint) .j09-t span { font-size: 12px; } :where(.hint).j10 { padding: 20px 16px; } :where(.hint) .j10-h { font-size: 24px; } :where(.hint) .j10-k { font-size: 13px; padding: 0 26px; } :where(.hint) .j10-sp { width: 74px; margin: -10px -10px -10px -18px; } :where(.hint) .j10-field { width: 220px; height: 42px; font-size: 16px; } :where(.hint) .j10-res { font-size: 12.5px; } :where(.hint).j11 { min-height: 0; padding-top: 150px; } :where(.hint) .j11-earth { width: 520px; right: -60px; top: -130px; -webkit-mask-image: none; mask-image: none; } :where(.hint) .j11-copy { max-width: none; margin: 0 -18px -20px; padding: 34px 18px 20px; background: linear-gradient(180deg, rgb(3 7 18 / 0), #030712 34px); } :where(.hint) .j11-h { font-size: 24px; } :where(.hint) .j11-pin { font-size: 11px; } :where(.hint) .j11-us { left: calc(100% - 329px); top: 60px; } :where(.hint) .j11-eu { left: calc(100% - 176px); top: 26px; } :where(.hint) .j11-br { left: calc(100% - 286px); top: 104px; } :where(.hint) .j11-af { left: calc(100% - 132px); top: 92px; } :where(.hint).j13 { padding: 20px 16px; } :where(.hint) .j13-name { font-size: 36px; padding-right: 30px; } :where(.hint) .j13-sig { grid-template-columns: 1fr 1fr; gap: 12px 10px; margin-top: 14px; padding-top: 14px; } :where(.hint) .j13-sig li { font-size: 14px; } :where(.hint) .j13-ic { width: 38px; margin: -6px 0 -6px -6px; } :where(.hint).j15 { grid-template-columns: 1fr; gap: 14px; } :where(.hint) .j15-l { min-height: 0; } :where(.hint) .j15-h { font-size: 23px; } :where(.hint) .j15-sp { width: 150px; right: -30px; top: -30px; } :where(.hint) .j15-panel { padding: 14px; } :where(.hint) .j15-row { flex-wrap: wrap; font-size: 13px; } :where(.hint).j17 { grid-template-columns: 1fr; gap: 10px; padding: 16px 16px 22px; } :where(.hint) .j17-line { font-size: 17px; } :where(.hint) .j17-wire { left: 16px; right: 16px; } :where(.hint).j18 { min-height: 0; } :where(.hint) .j18-bg { width: 560px; right: -150px; bottom: -220px; } :where(.hint) .j18-l { font-size: 29px; } :where(.hint) .in-scene { order: 1; min-height: 0; height: 170px; } :where(.hint).in--mast .in-scene { height: 140px; } :where(.hint) .in-h, :where(.hint).in--mast .in-h { font-size: 28px; } :where(.hint) .in-f { font-size: 14px; } :where(.hint) .in-f { gap: 4px 14px; } :where(.hint) .in-btn { padding: 9px 14px; font-size: 13px; } :where(.hint) .in-acts:has(.in-btn__jp) { flex-wrap: nowrap; gap: 6px; } :where(.hint) .in-acts:has(.in-btn__jp) .in-btn { gap: 6px; padding: 8px 12px; white-space: nowrap; } :where(.hint) .in-btn__jl { display: none; } :where(.hint) .in-btn__jp { display: inline; } :where(.hint) .in01-box { width: 330px; right: 0; top: -70px; } :where(.hint) .in01-dot { width: 6px; height: 6px; offset-path: path('M264 151.8 Q247.5 147.18 227.7 145.2 Q207.9 138.6 188.1 133.32 Q158.4 122.1 132 113.52 Q102.3 100.98 72.6 91.08 Q36.3 80.52 0 75.9'); } } :where(.hint) .j10-res > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2lh; } .hint.hint--banner .hint-x { display: none; } @media (max-width: 767px) { .hint.hint--banner.j07 { padding: 0 0 18px; } .hint.hint--banner.j07 .j07-body { grid-template-columns: minmax(0, 1fr); } .hint.hint--banner.j05 .j05-c { height: 210px; } .hint.hint--banner.j05 .j05-n1 { top: 132px; } } @media (min-width: 768px) { .hint.hint--banner.j13 .j13-sub { margin-top: 10px; font-size: 34px; } }