.ct { min-height: 100svh; display: grid; place-items: center; padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gutter, 20px) 64px; }
.ct-stage { display: grid; justify-items: center; gap: 22px; text-align: center; max-width: 560px; }
/* only the cloud itself is Ray: the button's empty corners don't take clicks, hovers or petting (the events of the cloud's
   shapes still reach the button) */
.ct-ray { position: relative; border: 0; background: none; padding: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ct-ray svg { pointer-events: none; }
.ct-ray svg :is(rect, circle, ellipse, path) { pointer-events: visiblePainted; cursor: grab; }
.ct-ray:focus-visible { outline: 2px solid #4fb584; outline-offset: 6px; border-radius: 28px; }
.ct-ray-art { display: block; width: 200px; height: 200px;  transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .ct-ray-art { width: 240px; height: 240px; } }   /* desktop: a little bigger */
.ct-ray-art .blob { width: 100%; height: 100%; }
/* he never spins or tilts. The one turn he makes: when he sulks he turns his back (a quick squeeze edge-on and back out,
   with no eyes on the other side), and when he gets over it he turns round again */
.ct-ray.turn { animation: ct-turn .32s ease-in-out; }
@keyframes ct-turn { 50% { transform: scaleX(.04); } }
.ct-ray.back { transform: scaleX(-1); }   /* seen from behind: mirrored, and no eyes */
.ct-ray.back .look { opacity: 0; }
.ct-say { min-height: 3.2em; max-width: 34ch; margin: 0; padding: 12px 18px; border-radius: 22px; font-size: 17px; line-height: 1.4; opacity: 0; transform: translateY(6px);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), 0 14px 30px -22px rgba(20,22,40,.3); transition: opacity .3s, transform .3s; }
.ct-say.on { opacity: 1; transform: none; }
.ct-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ct-pill { display: grid; gap: 2px; text-align: left; padding: 12px 22px; min-width: 200px; border-radius: 22px; border: 1px solid rgba(255,255,255,.85); cursor: pointer; text-decoration: none; color: #16171b; font: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1.5px 0 #fff, 0 14px 30px -20px rgba(20,22,40,.35); transition: transform .2s; }
.ct-pill:hover { transform: translateY(-2px); }
.ct-k { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.ct-pill b { font-weight: 500; font-size: 17px; }
.ct-note { font-size: 13px; opacity: .6; margin: 0; }
.ct-ray.hit .ct-ray-art { animation: ct-hit .6s cubic-bezier(.3,1.4,.5,1); }
@keyframes ct-hit { 0% { transform: none; } 15% { transform: translate(-16px, 4px) scale(.92, 1.06); } 40% { transform: translate(12px, -2px) scale(1.05, .93); } 70% { transform: translate(-5px, 0); } 100% { transform: none; } }
.ct-ray.peek .ct-ray-art { transform: translateY(-4px); }
:root.lowfx .ct-say, :root.lowfx .ct-pill { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .ct-ray.hit .ct-ray-art, .ct-ray.turn { animation: none; } }
.ct-ray.flash .ct-ray-art svg { animation: rb-bolt 1.6s steps(1) both; }