/* Homepage: living Characters, interactive Game, and Explore the Universe as miniature worlds.
   Built from the approved previews by home_alive.py. Prefixed ha- / hw- to avoid clashes. */
.ha-deck,.ha-table{--ink:#17121F;--ink2:#121016;--line:#2A2433;--paper:#FFFFFF;--soft:#E7E1EF;--soft2:#D9D2E3;--pink:#FE62C3;--lav:#CDA2F5;--yellow:#FFDE59;--green:#75D04C;
  --display:'Inter Tight','DM Sans',sans-serif;--body:'DM Sans',sans-serif;--serif:'Abril Fatface',Georgia,serif}
.ha-deck button:focus-visible,.ha-table :focus-visible{outline:3px solid #CDA2F5;outline-offset:3px}
.ha-box-sheen{--boximg:url(../images/game/game-box-640.webp)}
/* ---------- 1. Characters ---------- */
.ha-chars{background:var(--ink)}
.ha-deck{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:18px}
.ha-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ha-ch{position:relative;display:block;width:100%;aspect-ratio:411/561;border:0;padding:0;background:none;cursor:pointer;border-radius:8px;perspective:700px;-webkit-tap-highlight-color:transparent}
.ha-ch span{display:block}
.ha-ch-float{position:absolute;inset:0;animation:ha-ch-float var(--dur,7s) ease-in-out infinite;animation-delay:var(--del,0s)}
@keyframes ha-ch-float{0%,100%{transform:translateY(0) rotate(calc(var(--r,0.5deg)*-1))}50%{transform:translateY(calc(var(--amp,4px)*-1)) rotate(var(--r,0.5deg))}}
.ha-ch-tilt{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--z,0px));transition:transform .25s ease-out,filter .3s,opacity .3s;transform-style:preserve-3d}
.ha-ch-react{position:absolute;inset:0;border-radius:8px}
.ha-ch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.ha-ch[data-c="ghost"] img{outline:1px solid #3D3549}
.ha-ch-sheen{position:absolute;inset:0;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.9),rgba(255,255,255,0) 55%)}
.ha-ch-glint{position:absolute;inset:0;border-radius:8px;pointer-events:none;overflow:hidden}
.ha-ch-glint::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-70%);opacity:0}
.ha-ch.ha-glint .ha-ch-glint::after{animation:ha-glint 1.3s ease-in-out}
@keyframes ha-glint{0%{transform:translateX(-70%);opacity:0}15%{opacity:1}100%{transform:translateX(70%);opacity:0}}
.ha-ch.ha-hot{z-index:2}
.ha-ch.ha-hot .ha-ch-tilt{--z:26px;filter:brightness(1.06) saturate(1.1)}
.ha-ch.ha-hot .ha-ch-sheen{opacity:.85}
.ha-grid.ha-focusing .ha-ch:not(.ha-hot) .ha-ch-tilt{opacity:.62;filter:saturate(.75)}
.ha-caption{min-height:3.4em;margin:0;font-size:16px;line-height:1.45;color:var(--soft2)}
.ha-caption b{display:block;color:var(--paper);font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}

/* each Character's own small reaction, played once when you arrive */
.ha-ch.ha-react[data-c="human"] .ha-ch-react{animation:ha-r-human .7s ease-out}
@keyframes ha-r-human{0%{transform:none}40%{transform:translateY(-6px) rotate(0)}100%{transform:none}}
.ha-ch.ha-react[data-c="ghost"] .ha-ch-react{animation:ha-r-ghost 1.4s ease-in-out}
@keyframes ha-r-ghost{0%{opacity:1;transform:none}45%{opacity:.25;transform:translateY(-10px) scale(.98);filter:blur(1px)}100%{opacity:1;transform:none;filter:none}}
.ha-ch[data-c="angel"]{--glow:rgba(150,215,255,.55)}
.ha-ch[data-c="shapeshifter"]{--glow:rgba(235,235,245,.5)}
.ha-ch[data-c="frenemy"]{--glow:rgba(255,222,89,.5)}
.ha-ch.ha-react[data-c="angel"] .ha-ch-react,.ha-ch.ha-react[data-c="shapeshifter"] .ha-ch-react,.ha-ch.ha-react[data-c="frenemy"] .ha-ch-react{animation:ha-r-angel 1.2s ease-out}
@keyframes ha-r-angel{0%{transform:none;box-shadow:0 0 0 transparent}45%{transform:translateY(-12px);box-shadow:0 0 34px 6px var(--glow)}100%{transform:none;box-shadow:0 0 0 transparent}}
.ha-ch.ha-react[data-c="lover"] .ha-ch-react{animation:ha-r-lover .9s ease-in-out}
@keyframes ha-r-lover{0%,100%{transform:scale(1)}15%{transform:scale(1.07)}30%{transform:scale(1)}45%{transform:scale(1.09)}60%{transform:scale(1)}}
.ha-ch.ha-react[data-c="destiny"] .ha-ch-react{animation:ha-r-destiny 1.6s ease-in-out}
@keyframes ha-r-destiny{0%{transform:none;box-shadow:0 0 0 rgba(255,222,89,0)}25%{transform:translate(4px,-4px)}50%{transform:translate(0,-8px);box-shadow:0 0 30px 4px rgba(255,222,89,.4)}75%{transform:translate(-4px,-4px)}100%{transform:none;box-shadow:0 0 0 rgba(255,222,89,0)}}
.ha-ch.ha-react[data-c="devil"] .ha-ch-react{animation:ha-r-devil .6s linear}
@keyframes ha-r-devil{0%,100%{transform:none;box-shadow:0 0 0 rgba(255,60,60,0)}20%{transform:translateX(-3px) rotate(-1deg)}40%{transform:translateX(3px) rotate(1deg);box-shadow:0 0 26px 4px rgba(255,60,60,.45)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.ha-ch.ha-react[data-c="enabler"] .ha-ch-react{animation:ha-r-enabler .8s ease-out}
@keyframes ha-r-enabler{0%,100%{transform:none}20%{transform:translateY(-9px)}40%{transform:none}60%{transform:translateY(-5px)}80%{transform:none}}
.ha-ch.ha-react[data-c="opportunist"] .ha-ch-react{animation:ha-r-opp .9s cubic-bezier(.3,1.3,.5,1)}
@keyframes ha-r-opp{0%{transform:none}35%{transform:scale(1.1) translateY(-4px)}100%{transform:none}}

/* ---------- 2. The Game ---------- */
.ha-game{background:var(--ink2);border-top:1px solid var(--line)}
.ha-badges{display:flex;flex-wrap:wrap;gap:10px}
.ha-badge{border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800}
.ha-badge.ha-y{background:var(--yellow);color:var(--ink2)}
.ha-badge.ha-o{border:2px solid var(--paper);padding:4px 12px}
.ha-game h2{font-weight:900;letter-spacing:-.04em;font-size:clamp(40px,5.5vw,72px);line-height:.95}
.ha-game h2 i{font-style:normal;color:var(--pink)}
.ha-row{display:flex;flex-wrap:wrap;gap:14px}
.ha-pinkbtn{background:var(--pink);color:var(--ink2);text-decoration:none;padding:14px 26px;border-radius:999px;font-weight:800}
.ha-ghostbtn{border:2px solid var(--paper);color:var(--paper);text-decoration:none;padding:12px 24px;border-radius:999px;font-weight:700;background:none;font:inherit;font-weight:700;cursor:pointer}
.ha-story{margin:4px 0 0;font-size:16px;color:var(--soft2)}
.ha-story a{font-weight:700;color:var(--lav)}

.ha-table{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:18px}
.ha-stage{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/0.92;perspective:1000px;--rx:0deg;--ry:0deg}
.ha-glow{position:absolute;inset:6% 4% 14%;border-radius:50%;background:radial-gradient(closest-side,rgba(152,100,255,.35),transparent 75%);pointer-events:none}
.ha-box{position:absolute;left:4%;top:16%;width:70%;animation:ha-bob 7s ease-in-out infinite}
.ha-box-tilt{transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .3s ease-out;transform-style:preserve-3d}
.ha-box img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.ha-box-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.7;
  -webkit-mask:var(--boximg) center/contain no-repeat;mask:var(--boximg) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.9) 45%,transparent 60%) calc(50% + var(--sx,0%)) 0/300% 100% no-repeat}
@keyframes ha-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.ha-card{position:absolute;right:3%;top:2%;width:34%;aspect-ratio:533/677;border:0;padding:0;background:none;cursor:pointer;perspective:900px;animation:ha-hover-float 5.2s ease-in-out infinite;animation-delay:-1.4s;z-index:3}
@keyframes ha-hover-float{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.ha-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.25,.45,1)}
.ha-card.ha-turned .ha-flip{transform:rotateY(180deg)}
@media (hover:hover){.ha-card:hover .ha-flip{transform:rotateY(180deg)}}
.ha-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:block}
.ha-face img{width:100%;height:100%;display:block;object-fit:contain}
.ha-face.ha-b{transform:rotateY(180deg)}

.ha-cells{position:absolute;left:0;right:0;bottom:3%;height:16%}
.ha-cell{position:absolute;bottom:0;width:var(--d,40px);aspect-ratio:1;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:
   radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,0) 18%),
   radial-gradient(circle at 70% 75%,rgba(255,255,255,.35),rgba(255,255,255,0) 30%),
   conic-gradient(from var(--spin,0deg),#7A2CFF,#FE62C3,#39B7FF,#B86BFF,#FE62C3,#7A2CFF);
  box-shadow:inset -6px -8px 14px rgba(40,0,80,.65),inset 4px 4px 10px rgba(255,255,255,.25),0 0 22px rgba(190,110,255,.55);transform:translateX(var(--x,0px))}
.ha-cell::after{content:"";position:absolute;left:10%;right:10%;bottom:-18%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);transform:translateY(0)}
.ha-pop{position:absolute;bottom:110%;left:50%;transform:translate(-50%,0);font-size:12px;font-weight:800;color:var(--lav);white-space:nowrap;opacity:0;pointer-events:none}
.ha-pop.ha-show{animation:ha-pop 1s ease-out}
@keyframes ha-pop{0%{opacity:0;transform:translate(-50%,6px)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-22px)}}

.ha-reveal{border-radius:16px;border:1px solid var(--line);background:#1A1622;padding:18px 20px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.ha-reveal .ha-k{margin:0;font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--green)}
.ha-reveal h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:22px}
.ha-reveal p{margin:0;font-size:16px;line-height:1.5;color:var(--soft2)}
.ha-reveal p b{color:var(--paper)}
.ha-reveal .ha-row{margin-top:6px;gap:16px;align-items:center}
.ha-reveal a{color:var(--lav);font-weight:700}
.ha-reveal .ha-again{background:none;border:0;color:var(--paper);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}

/* pause idle movement when a section is off screen */
.ha-off .ha-ch-float,.ha-off .ha-box,.ha-off .ha-card{animation-play-state:paused}

@media (max-width:760px){
  .ha-wrap{padding-block:80px;gap:36px}
  .ha-grid{gap:8px}
  .ha-caption b{font-size:18px}
  .ha-stage{aspect-ratio:1/1}
  .ha-card{width:38%}
}
@media (prefers-reduced-motion:reduce){
  .ha-ch-float,.ha-box,.ha-card,.ha-ch-react,.ha-ch-glint::after,.ha-pop{animation:none!important}
  .ha-ch-tilt,.ha-box-tilt,.ha-flip{transition:none!important}
  .ha-ch.ha-hot .ha-ch-tilt{--z:0px}
}

.hw-uni{--space:#0E0A18;--paper:#FFFFFF;--soft:#D9D2E3;--muted:#A99FBA;--line:rgba(255,255,255,.18);--pink:#F7B6DD;--lav:#CDA2F5;
  --display:'Inter Tight','DM Sans',sans-serif;--body:'DM Sans',sans-serif;--serif:'Abril Fatface',Georgia,serif;color:var(--paper)}
.hw-uni{position:relative;overflow:hidden;background:
  radial-gradient(circle at 18% 30%,rgba(152,100,255,.28),transparent 42%),
  radial-gradient(circle at 85% 70%,rgba(254,98,195,.14),transparent 40%),var(--space)}
/* a faint field of stars, fixed so it costs nothing */
.hw-uni::before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;background-image:
  radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 33% 72%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 26%,#fff,transparent),
  radial-gradient(1px 1px at 76% 12%,#fff,transparent),radial-gradient(1px 1px at 90% 58%,#fff,transparent),radial-gradient(1.5px 1.5px at 46% 88%,#fff,transparent),
  radial-gradient(1px 1px at 6% 64%,#fff,transparent),radial-gradient(1px 1px at 68% 80%,#fff,transparent),radial-gradient(1px 1px at 24% 44%,#fff,transparent)}
.hw-in{position:relative;max-width:1240px;margin:0 auto;padding-block:96px 88px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.hw-eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.24em;color:var(--pink)}
.hw-uni h2{margin:0;max-width:900px;font-family:var(--display);font-weight:800;letter-spacing:-.035em;font-size:clamp(36px,5vw,64px);line-height:1.04;text-wrap:balance}
.hw-uni h2 span{color:var(--lav)}
.hw-lede{margin:0;max-width:760px;font-size:19px;line-height:1.6;color:var(--soft)}
.hw-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}
.hw-hint{margin:0;font-size:14px;font-weight:700;color:var(--lav)}
.hw-arrows{display:flex;gap:10px}
.hw-arrow{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:none;color:var(--paper);font-size:20px;cursor:pointer}
.hw-arrow:hover{border-color:var(--lav)}
.hw-arrow:disabled{opacity:.3;cursor:default}
.hw-uni :focus-visible{outline:3px solid var(--lav);outline-offset:3px}

/* the drift */
.hw-track{-webkit-mask:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);mask:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);position:relative;margin:0 calc(-1*max(24px,env(safe-area-inset-left,0px)));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:max(24px,env(safe-area-inset-left,0px))}
.hw-track::-webkit-scrollbar{display:none}
.hw-worlds{position:relative;list-style:none;margin:0;padding:24px max(24px,env(safe-area-inset-left,0px)) 12px;display:flex;gap:36px;width:max-content}
.hw-path{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.hw-path path{fill:none;stroke:rgba(205,162,245,.35);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
.hw-world{position:relative;width:250px;flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;margin-top:var(--lift,0px)}
.hw-world:nth-child(2){--lift:46px}.hw-world:nth-child(3){--lift:12px}.hw-world:nth-child(4){--lift:54px}.hw-world:nth-child(5){--lift:20px}.hw-world:nth-child(6){--lift:50px}.hw-world:nth-child(7){--lift:8px}

.hw-orb{position:relative;width:100%;aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;display:block;color:inherit;font:inherit}
.hw-orb>span{position:absolute;display:block}
.hw-halo{inset:8%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 34%,transparent),transparent 72%);transition:transform .6s,opacity .6s;opacity:.8}
.hw-on .hw-halo{transform:scale(1.12);opacity:1}
.hw-disc{left:12%;right:12%;bottom:8%;height:15%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent 70%),conic-gradient(from 90deg,color-mix(in srgb,var(--c) 70%,#fff),#B98AF0,#7FD3FF,#FF9AD9,color-mix(in srgb,var(--c) 70%,#fff));
  box-shadow:0 0 30px color-mix(in srgb,var(--c) 55%,transparent),inset 0 -6px 10px rgba(0,0,0,.35);opacity:.85}
.hw-disc::after{content:"";position:absolute;inset:18% 10% 30%;border-radius:50%;background:rgba(14,10,24,.55)}
.hw-thing{left:0;right:0;top:0;bottom:18%;animation:hw-float var(--dur,7s) ease-in-out infinite;animation-delay:var(--del,0s)}
@keyframes hw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hw-thing *{position:absolute}

.hw-w-meta{display:flex;flex-direction:column;gap:6px}
.hw-status{margin:0;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.16em;padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 70%,#fff);color:color-mix(in srgb,var(--c) 45%,#fff)}
.hw-world h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.025em;font-size:22px;line-height:1.1}
.hw-w-meta p.hw-k{margin:0;font-size:15px;line-height:1.45;color:var(--soft)}
.hw-w-meta a{align-self:flex-start;color:var(--paper);font-weight:700;text-decoration:none;border-bottom:2px solid var(--c);padding-bottom:2px}
.hw-w-meta a:hover{border-bottom-width:3px}
.hw-live{min-height:1.4em;margin:0;font-size:14px;line-height:1.45;color:var(--lav)}

/* Characters: a hand of cards that fans open */
.hw-w-ch img{width:34%;left:33%;top:14%;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.5);transform-origin:50% 120%;transition:transform .6s cubic-bezier(.3,1.3,.45,1)}
.hw-w-ch img:nth-child(1){transform:rotate(-14deg);z-index:1}.hw-w-ch img:nth-child(2){transform:rotate(14deg);z-index:1}
.hw-w-ch img:nth-child(3){transform:rotate(-6deg);z-index:2}.hw-w-ch img:nth-child(4){transform:rotate(6deg);z-index:2}.hw-w-ch img:nth-child(5){z-index:3}
.hw-on .hw-w-ch img:nth-child(1){transform:rotate(-38deg)}.hw-on .hw-w-ch img:nth-child(2){transform:rotate(38deg)}
.hw-on .hw-w-ch img:nth-child(3){transform:rotate(-19deg)}.hw-on .hw-w-ch img:nth-child(4){transform:rotate(19deg)}.hw-on .hw-w-ch img:nth-child(5){transform:translateY(-8px)}
/* Game: a Scenario card rises out of the box */
.hw-w-game .hw-gc{width:30%;left:52%;top:8%;transform:translateY(34%) rotate(8deg);transition:transform .6s cubic-bezier(.3,1.3,.45,1)}
.hw-w-game .hw-gb{width:80%;left:10%;top:26%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.55))}
.hw-on .hw-w-game .hw-gc{transform:translateY(-6%) rotate(14deg)}
/* Story: a glass globe with the attic inside; a light comes on */
.hw-w-story .hw-globe{left:16%;top:6%;width:68%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 0 30px rgba(57,183,255,.35)}
.hw-w-story .hw-globe img{left:-15%;top:-10%;width:140%;height:auto;filter:brightness(.62) saturate(.9);transition:filter 1.2s,transform 6s ease-out}
.hw-w-story .hw-globe::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 28%),radial-gradient(circle at 70% 85%,rgba(255,255,255,.15),transparent 30%)}
.hw-on .hw-w-story .hw-globe img{filter:brightness(1.05) saturate(1.15);transform:scale(1.08) translate(-3%,2%)}
/* Deck: draw a sample question */
.hw-w-deck .hw-dc{left:24%;top:8%;width:52%;aspect-ratio:411/561;border-radius:10px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.25,.45,1)}
.hw-w-deck .hw-dc.hw-s1{transform:rotate(-8deg) translate(-6px,6px);background:#2A1F3D;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.hw-w-deck .hw-dc.hw-s2{transform:rotate(5deg) translate(4px,3px);background:#3A2A55;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.hw-w-deck .hw-top{perspective:800px}
.hw-w-deck .hw-face{inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:10%;box-sizing:border-box}
.hw-w-deck .hw-fa{background:linear-gradient(160deg,#FFE88A,#FFDE59 45%,#E9B92F);color:#17121F;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),0 12px 24px rgba(0,0,0,.5)}
.hw-w-deck .hw-fa b{position:static;font-family:var(--serif);font-size:15px;letter-spacing:.04em}
.hw-w-deck .hw-fb{transform:rotateY(180deg);background:#FFFFFF;color:#17121F;box-shadow:inset 0 0 0 4px var(--qc,#9864FF),0 12px 24px rgba(0,0,0,.5)}
.hw-w-deck .hw-fb i{position:static;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--qc,#9864FF)}
.hw-w-deck .hw-fb q{position:static;font-size:13px;line-height:1.3;font-weight:700;quotes:none}
.hw-w-deck .hw-dc.hw-top.hw-flipped{transform:rotateY(180deg)}
/* Podcast: a pulse of sound */
.hw-w-pod .hw-ring{left:50%;top:44%;width:30%;aspect-ratio:1;border-radius:50%;border:2px solid color-mix(in srgb,var(--c) 70%,#fff);transform:translate(-50%,-50%) scale(.7);opacity:0}
.hw-on .hw-w-pod .hw-ring{animation:hw-ring 2s ease-out infinite}.hw-on .hw-w-pod .hw-ring:nth-child(2){animation-delay:.66s}.hw-on .hw-w-pod .hw-ring:nth-child(3){animation-delay:1.33s}
@keyframes hw-ring{0%{opacity:.9;transform:translate(-50%,-50%) scale(.7)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
.hw-w-pod .hw-bars{left:26%;right:26%;top:30%;height:30%;display:flex!important;align-items:center;justify-content:space-between}
.hw-w-pod .hw-bars i{position:static;width:9%;border-radius:4px;height:var(--h);background:linear-gradient(#FF8A8A,var(--c));box-shadow:0 0 12px rgba(255,90,90,.5);transform-origin:center;transform:scaleY(.45);transition:transform .3s}
.hw-on .hw-w-pod .hw-bars i{animation:hw-talk .9s ease-in-out infinite;animation-delay:var(--d)}
@keyframes hw-talk{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* Journal: a page turns */
.hw-w-jr .hw-book{left:14%;right:14%;top:22%;height:44%;perspective:700px}
.hw-w-jr .hw-pg{top:0;bottom:0;width:50%;background:repeating-linear-gradient(#FBF7F0 0 9px,#E3DCCF 9px 10px);box-shadow:0 10px 20px rgba(0,0,0,.45)}
.hw-w-jr .hw-pl{left:0;border-radius:8px 2px 2px 8px;transform:skewY(4deg)}
.hw-w-jr .hw-pr{right:0;border-radius:2px 8px 8px 2px;transform:skewY(-4deg)}
.hw-w-jr .hw-turn{right:0;transform-origin:0 50%;transform:skewY(-4deg) rotateY(0deg);transition:transform 1s ease-in-out;display:flex!important;align-items:center;justify-content:center;background:#FBF7F0;border-radius:2px 8px 8px 2px}
.hw-w-jr .hw-turn b{position:static;font-family:var(--serif);font-size:13px;color:#17121F;padding:0 8%;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg)}
.hw-w-jr .hw-turn{transform-style:preserve-3d}
.hw-on .hw-w-jr .hw-turn{transform:skewY(4deg) rotateY(-178deg)}
.hw-w-jr .hw-spine{left:49%;width:2%;top:0;bottom:0;background:var(--c)}
/* Still forming */
.hw-w-form .hw-dust{left:18%;top:8%;width:64%;aspect-ratio:1;border-radius:50%;opacity:.45;filter:blur(1px);transition:opacity 1s,filter 1s;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.5),transparent 18%),conic-gradient(from 0deg,transparent,rgba(205,162,245,.6),transparent 30%,rgba(127,211,255,.45),transparent 60%,rgba(255,154,217,.5),transparent);
  -webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);animation:hw-swirl 24s linear infinite}
@keyframes hw-swirl{to{transform:rotate(360deg)}}
.hw-on .hw-w-form .hw-dust{opacity:.95;filter:blur(0)}
.hw-w-form + .hw-w-meta, .hw-world.hw-forming .hw-status{border-style:dashed}

.hw-also{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.hw-also p{margin:0 6px 0 0;font-size:14px;font-weight:700;color:var(--muted)}
.hw-chip{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:999px;padding:8px 16px;color:var(--paper);text-decoration:none;font-weight:700;font-size:14px}
.hw-chip i{width:10px;height:10px;border-radius:50%;background:var(--k);box-shadow:0 0 10px var(--k)}
.hw-chip:hover{border-color:var(--k)}

.hw-off .hw-thing,.hw-off .hw-dust{animation-play-state:paused}
@media (max-width:760px){
  .hw-world{width:220px}
  .hw-arrows{display:none}
  .hw-worlds{gap:24px}
  .hw-world:nth-child(n){--lift:0px}
  .hw-world:nth-child(even){--lift:28px}
}
@media (prefers-reduced-motion:reduce){
  .hw-thing,.hw-dust,.hw-ring,.hw-bars i{animation:none!important}
  .hw-w-ch img,.hw-w-game .hw-gc,.hw-w-story .hw-globe img,.hw-w-deck .hw-dc,.hw-w-jr .hw-turn,.hw-halo{transition:none!important}
  .hw-track{scroll-behavior:auto}
}

/* hero card fan */
.hh-table,.hh-hint{--label:#5A2FD6;--serif:'Abril Fatface',Georgia,serif}
.hh-table :focus-visible{outline:3px solid #5A2FD6;outline-offset:3px}
/* ---- the fan ---- */
.hh-table{position:relative;margin-top:36px;height:calc(var(--h) + 90px);--w:120px;--h:164px;--step:100px;--drop:1.15px;perspective:1100px}
.hh-fan{position:absolute;left:50%;top:44px;width:0;height:0;transform:rotateX(var(--lx,0deg)) rotateY(var(--ly,0deg));transition:transform .5s ease-out;transform-style:preserve-3d}
.hh-c{position:absolute;left:calc(var(--w)/-2);top:0;width:var(--w);height:var(--h);border:0;padding:0;background:none;cursor:pointer;border-radius:10px;
  transform:translateX(calc(var(--dx) * var(--step) + var(--sx,0px))) translateY(calc(var(--dx) * var(--dx) * var(--drop) + var(--y,0px))) rotate(var(--a)) translateZ(var(--tz,0px));transition:transform .55s cubic-bezier(.25,1.2,.4,1);z-index:var(--z)}
.hh-dealing .hh-c{transition-duration:.9s;transition-delay:calc(var(--d) * 70ms)}
.hh-stacked .hh-c{transform:translateY(20px) rotate(calc(var(--dx) * 1deg))}
.hh-c-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.25,.45,1)}
.hh-c.hh-turned .hh-c-in{transform:rotateY(180deg)}
.hh-side{position:absolute;inset:0;border-radius:10px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 12px 30px rgba(23,18,31,.22)}
.hh-side img{width:100%;height:100%;object-fit:cover;display:block}
.hh-foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;transition:opacity .3s;
  background:linear-gradient(115deg,transparent 25%,rgba(255,170,230,.55) 38%,rgba(150,230,255,.55) 50%,rgba(255,240,160,.5) 60%,transparent 75%) 0 0/260% 100%;background-position:var(--fx,120%) 0}
.hh-c:hover .hh-foil,.hh-c.hh-lift .hh-foil{opacity:.9}
.hh-back{transform:rotateY(180deg);background:linear-gradient(var(--col) 0 9px,#FFFFFF 9px);color:#17121F;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;text-align:center;box-sizing:border-box;box-shadow:0 0 0 3px var(--col) inset,0 12px 30px rgba(23,18,31,.22)}
.hh-back b{font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.05;color:#17121F}
.hh-back i{font-style:normal;font-size:10.5px;line-height:1.35;color:#3A3346}
.hh-c.hh-lift{--y:-30px;--tz:60px;z-index:60}
.hh-c.hh-lift .hh-side:not(.hh-back){box-shadow:0 22px 40px rgba(23,18,31,.3),0 0 0 2px #fff}
/* the Host: always lit, and takes on the colour of whoever you're looking at */
.hh-c.hh-host .hh-halo{position:absolute;inset:-26px;border-radius:30px;pointer-events:none;background:radial-gradient(closest-side,var(--watch,rgba(205,162,245,.65)),transparent 75%);opacity:.75;animation:hh-breathe 4.5s ease-in-out infinite;transition:background .5s}
@keyframes hh-breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:.95;transform:scale(1.04)}}
.hh-hint{text-align:center;margin:0;font-size:14px;font-weight:700;color:var(--label);min-height:1.4em}

@media (max-width:760px){
  .hh-in{padding-block:56px 24px}
  .hh-table{--w:58px;--h:79px;--step:29px;--drop:.6px;margin-top:20px}
  .hh-back b{font-size:9px}.hh-back i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hh-fan,.hh-c,.hh-c-in{transition:none!important}
  .hh-c.hh-host .hh-halo{animation:none}
}

/* follow the influence */
.hf-fi{--ink:#17121F;--paper:#FFFFFF;--soft:#E7E1EF;--muted:#B9AFC8;--lav:#CDA2F5;--pink:#F7B6DD;--line:rgba(255,255,255,.16);--display:'Inter Tight','DM Sans',sans-serif;--body:'DM Sans',sans-serif;--serif:'Abril Fatface',Georgia,serif;color:var(--paper)}
.hf-fi{position:relative;overflow:hidden;background:radial-gradient(circle at 22% 30%,rgba(152,100,255,.28),transparent 45%),radial-gradient(circle at 80% 70%,rgba(254,98,195,.12),transparent 40%),var(--ink)}
.hf-in{max-width:1240px;margin:0 auto;padding-block:112px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.hf-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:20px}
.hf-eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.24em;color:var(--pink)}
.hf-fi h2{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:clamp(40px,5.2vw,72px);line-height:1;text-wrap:balance}
.hf-fi h2 .hf-ring{position:relative;display:inline-block;padding:0 .14em}
.hf-fi h2 .hf-ring::after{content:"";position:absolute;inset:-.04em -.06em -.06em;border:3px solid var(--lav);border-radius:50%;transform:rotate(-4deg)}
.hf-lede{margin:0;font-size:19px;line-height:1.6;color:var(--soft);max-width:32em}
.hf-fi :focus-visible{outline:3px solid var(--lav);outline-offset:3px}

/* the loudest voice */
.hf-ask{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.hf-hand{list-style:none;margin:0;padding:34px 0 0;display:flex;justify-content:flex-start;height:130px}
.hf-hand li{flex:0 0 auto;width:62px;margin-right:-14px}
.hf-v{position:relative;display:block;width:76px;aspect-ratio:411/561;border:0;padding:0;background:none;cursor:pointer;border-radius:7px;transform-origin:50% 120%;
  transform:rotate(calc((var(--i) - 4.5) * 4deg)) translateY(calc(var(--off,0) * 1px));transition:transform .35s cubic-bezier(.3,1.3,.45,1),filter .3s,opacity .3s}
.hf-v img{width:100%;height:100%;display:block;border-radius:7px;box-shadow:0 8px 18px rgba(0,0,0,.5)}
.hf-v:hover{transform:rotate(calc((var(--i) - 4.5) * 4deg)) translateY(-14px)}
.hf-hand.hf-picked .hf-v:not(.hf-loud){filter:saturate(.5) brightness(.6)}
.hf-v.hf-loud{transform:rotate(0) translateY(-26px) scale(1.18);z-index:3}
.hf-v.hf-loud img{box-shadow:0 0 0 2px #fff,0 0 34px 8px var(--glow,rgba(205,162,245,.6))}
.hf-v.hf-loud.hf-shout{animation:hf-shout .5s linear}
@keyframes hf-shout{0%,100%{translate:0}20%{translate:-3px 0}40%{translate:3px 0}60%{translate:-2px 0}80%{translate:2px 0}}
.hf-wave{position:absolute;left:50%;top:40%;width:100%;aspect-ratio:1;border:2px solid var(--glow,var(--lav));border-radius:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none}
.hf-v.hf-loud .hf-wave{animation:hf-wave 1.4s ease-out 2}.hf-v.hf-loud .hf-wave:nth-child(3){animation-delay:.45s}
@keyframes hf-wave{0%{opacity:.9;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
.hf-said{margin:0;min-height:3.2em;font-size:18px;line-height:1.5;color:var(--soft)}
.hf-said b{color:var(--paper)}
.hf-socials{display:flex;flex-wrap:wrap;gap:14px}
.hf-soc{display:inline-flex;align-items:center;gap:12px;padding:12px 22px 12px 16px;border-radius:999px;text-decoration:none;font-weight:800;line-height:1.15}
.hf-soc small{display:block;font-weight:500;font-size:14px;opacity:.8}
.hf-soc svg{width:22px;height:22px;flex:0 0 auto}
.hf-soc.hf-ig{background:var(--lav);color:var(--ink)}
.hf-soc.hf-tt{background:var(--paper);color:var(--ink)}

/* the glass phone */
.hf-phonewrap{flex:1 1 360px;min-width:0;display:flex;justify-content:center;perspective:1200px}
.hf-phone{position:relative;display:block;width:min(320px,82vw);aspect-ratio:9/18.5;border-radius:46px;padding:12px;text-decoration:none;color:var(--paper);
  background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(205,162,245,.35) 30%,rgba(127,211,255,.25) 60%,rgba(254,98,195,.4));
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 40px 80px rgba(0,0,0,.55),0 0 60px rgba(152,100,255,.35);
  transform:rotateY(-12deg) rotateX(4deg);transition:transform .5s ease-out;animation:hf-drift 8s ease-in-out infinite}
@keyframes hf-drift{0%,100%{translate:0 0}50%{translate:0 -10px}}
.hf-phone:hover{transform:rotateY(-4deg) rotateX(2deg)}
.hf-phone::after{content:"";position:absolute;inset:0;border-radius:46px;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 45%,transparent 55%)}
.hf-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#0F0B17;display:flex;flex-direction:column}
.hf-notch{position:absolute;left:50%;top:10px;width:30%;height:22px;border-radius:999px;background:#05030A;transform:translateX(-50%);z-index:3}
.hf-bar{padding:44px 16px 8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.hf-prof{padding:6px 16px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hf-av{width:74px;height:74px;border-radius:50%;padding:3px;background:conic-gradient(#FE62C3,#9864FF,#39B7FF,#75D04C,#FFDE59,#FE62C3)}
.hf-av span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#F3EEFA}
.hf-av img{width:74%;height:74%;object-fit:contain}
.hf-nm{margin:0;font-weight:800;font-size:14px;letter-spacing:.12em}
.hf-bio{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted);max-width:24ch}
.hf-follow{margin-top:2px;padding:7px 26px;border-radius:9px;background:var(--lav);color:var(--ink);font-weight:800;font-size:13px}
.hf-gridwin{position:relative;flex:1;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.hf-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;animation:hf-feed 80s linear infinite}
.hf-feed img{width:100%;height:auto;aspect-ratio:300/337;object-fit:cover;display:block}
@keyframes hf-feed{to{transform:translateY(calc(-50% - 1px))}}
.hf-phone:hover .hf-feed{animation-play-state:paused}
.hf-gridwin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,#0F0B17);pointer-events:none}
.hf-cap{margin:14px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.hf-cap a{color:var(--lav);font-weight:700}

.hf-off .hf-phone,.hf-off .hf-feed{animation-play-state:paused}
@media (max-width:760px){
  .hf-in{padding-block:80px;gap:44px}
  .hf-hand{height:140px;padding-top:40px;justify-content:center;padding-right:24px}
  .hf-hand li{width:28px;margin-right:0}
  .hf-v{width:54px}
  .hf-phone{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hf-phone,.hf-feed,.hf-v,.hf-wave{animation:none!important;transition:none!important}
}

/* Explore the Universe page: the worlds as a wrapping map, with fuller descriptions */
.hw-map .hw-worlds{width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px;padding:24px 0 8px}
.hw-map .hw-world{width:auto;margin-top:0}
.hw-map .hw-world:nth-child(3n+2){margin-top:44px}
.hw-map .hw-orb{max-width:290px;margin:0 auto}
.hw-map .hw-k{margin:0;font-size:15px;line-height:1.5;color:var(--soft)}
.hw-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.hw-links a{align-self:flex-start;color:var(--paper);font-weight:700;text-decoration:none;border-bottom:2px solid var(--c);padding-bottom:2px}
.hw-links a:hover{border-bottom-width:3px}
/* the Method: four stones that light up in turn */
.hw-w-me{display:flex!important;align-items:center;justify-content:center;gap:6%}
.hw-w-me i{position:static!important;display:grid;place-items:center;width:17%;aspect-ratio:1;border-radius:50%;font-style:normal;font-weight:800;font-family:var(--display);color:#E9F8EE;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 40%),#145C38;box-shadow:inset 0 -4px 8px rgba(0,0,0,.4),0 6px 14px rgba(0,0,0,.45);transform:translateY(calc(var(--n) * -8px));transition:background .4s,box-shadow .4s}
.hw-on .hw-w-me i{animation:hw-step 2.4s ease-in-out infinite;animation-delay:calc(var(--n) * .45s)}
@keyframes hw-step{0%,30%,100%{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 40%),#145C38;box-shadow:inset 0 -4px 8px rgba(0,0,0,.4),0 6px 14px rgba(0,0,0,.45)}
  12%{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,0) 40%),#2FB36A;box-shadow:inset 0 -4px 8px rgba(0,0,0,.25),0 0 26px rgba(47,179,106,.8)}}
/* glass objects (mirror, mic) */
.hw-w-glass img{left:22%;top:2%;width:56%;height:92%;object-fit:contain;transition:transform .5s cubic-bezier(.3,1.3,.45,1)}
.hw-on .hw-w-glass img{transform:translateY(-6px) scale(1.04)}
.hw-w-glass b{left:50%;top:34%;width:24%;transform:translate(-50%,-50%);text-align:center;font-family:var(--serif);font-weight:400;font-size:13px;line-height:1.05;color:#fff;
  text-shadow:0 0 12px rgba(120,40,220,.9);opacity:0;transition:opacity .6s}
.hw-on .hw-w-glass b{opacity:1}
.hw-w-mic .hw-ring{left:50%;top:30%;width:34%;aspect-ratio:1;border-radius:50%;border:2px solid #7FD3FF;transform:translate(-50%,-50%) scale(.7);opacity:0}
.hw-on .hw-w-mic .hw-ring{animation:hw-ring 2s ease-out infinite}.hw-on .hw-w-mic .hw-ring:nth-child(2){animation-delay:.66s}.hw-on .hw-w-mic .hw-ring:nth-child(3){animation-delay:1.33s}
@media (max-width:980px){.hw-map .hw-worlds{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}.hw-map .hw-world:nth-child(n){margin-top:0}.hw-map .hw-world:nth-child(even){margin-top:36px}}
@media (max-width:560px){.hw-map .hw-worlds{grid-template-columns:1fr}.hw-map .hw-world:nth-child(n){margin-top:0}.hw-map .hw-orb{max-width:240px}}
@media (prefers-reduced-motion:reduce){.hw-w-me i,.hw-w-mic .hw-ring{animation:none!important}.hw-w-glass img{transition:none}}
/* Amelia, Influenced: the glass book (replaces the paper book) */
.hw-w-book img{left:8%!important;top:24%!important;width:84%!important;height:56%!important}
.hw-w-book b{top:18%!important;width:60%!important;font-size:14px!important;font-family:"DM Sans",sans-serif!important;font-weight:800!important;letter-spacing:.02em;color:#17121F!important;text-shadow:none!important;background:rgba(255,255,255,.85);border-radius:999px;padding:5px 10px;box-shadow:0 6px 14px rgba(0,0,0,.25)}
/* the Method world: four glass marbles instead of green stones */
.hw-w-marbles i{background:none!important;box-shadow:none!important;position:relative!important;width:21%!important;color:#fff;animation:none}
.hw-w-marbles i img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));transition:transform .4s,filter .4s}
.hw-w-marbles i b{position:relative;font-family:var(--display);font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hw-on .hw-w-marbles i{animation:none!important}
.hw-on .hw-w-marbles i img{animation:hw-marble 2.4s ease-in-out infinite;animation-delay:calc(var(--n) * .45s)}
@keyframes hw-marble{0%,30%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}12%{transform:translateY(-8px) scale(1.12);filter:drop-shadow(0 0 16px rgba(205,162,245,.9)) brightness(1.15)}}
@media (prefers-reduced-motion:reduce){.hw-on .hw-w-marbles i img{animation:none}}
/* one body typeface everywhere: these sections were falling back to the browser's default serif */
.hw-uni,.hf-fi,.hh-table,.hh-hint{font-family:'DM Sans',system-ui,sans-serif}
.hh-back i{font-family:'DM Sans',system-ui,sans-serif}
/* Conversation Deck world: the yellow glass card */
#hw-deckcard .hw-fa{background:transparent url(../images/game/glass-card-back-yellow.webp) center/contain no-repeat!important;border:0!important;box-shadow:none!important;color:transparent!important}
#hw-deckcard .hw-fa b{opacity:0}
#hw-deckworld .hw-s1,#hw-deckworld .hw-s2{display:none}
#hw-deckcard{filter:drop-shadow(0 18px 30px rgba(255,210,60,.35))}