:root{
  --bg:#050816;
  --bg-deep:#02030a;
  --panel:rgba(9,14,32,.82);
  --panel-strong:rgba(12,18,40,.94);
  --line:rgba(143,202,255,.22);
  --line-strong:rgba(166,230,255,.44);
  --text:#edf6ff;
  --muted:#9cb7d4;
  --cyan:#87e7ff;
  --blue:#77a9ff;
  --peach:#ffc68f;
  --shadow:0 28px 80px rgba(0,0,0,.45);
}

*{box-sizing:border-box}

html,body{
  min-height:100%;
  margin:0;
}

body{
  color:var(--text);
  font-family:"Space Grotesk", sans-serif;
  background:
    radial-gradient(circle at 18% 18%, rgba(57,108,255,.20), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(123,245,255,.18), transparent 22%),
    radial-gradient(circle at 50% 82%, rgba(255,136,77,.10), transparent 24%),
    linear-gradient(180deg, #0b1027 0%, var(--bg) 46%, var(--bg-deep) 100%);
  overflow-x:hidden;
}

body.page-transition{
  opacity:1;
  transition:opacity .42s ease;
}

body.page-transition.is-leaving{
  opacity:0;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025), rgba(255,255,255,.025)) 0 0 / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 60px);
  mix-blend-mode:soft-light;
  opacity:.22;
}

.starfield,
.nebula{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.starfield-a{
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.85) 0 1px, transparent 1.4px),
    radial-gradient(circle at 74% 38%, rgba(255,255,255,.7) 0 1px, transparent 1.4px),
    radial-gradient(circle at 34% 72%, rgba(255,255,255,.62) 0 1px, transparent 1.4px),
    radial-gradient(circle at 62% 84%, rgba(255,255,255,.84) 0 1px, transparent 1.4px),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.66) 0 1px, transparent 1.4px);
  opacity:.55;
}

.starfield-b{
  background-image:
    radial-gradient(circle at 22% 48%, rgba(135,231,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 58%, rgba(255,198,143,.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 48% 22%, rgba(119,169,255,.72) 0 1px, transparent 1.5px);
  opacity:.44;
}

.nebula-a{
  background:radial-gradient(circle at 20% 26%, rgba(80,128,255,.24), rgba(80,128,255,0) 38%);
}

.nebula-b{
  background:radial-gradient(circle at 80% 78%, rgba(102,232,255,.18), rgba(102,232,255,0) 34%);
}

.shell{
  position:relative;
  width:min(1180px, calc(100% - 28px));
  margin:0 auto;
  padding:42px 0 56px;
}

.hero{
  padding:34px 8px 24px;
}

.eyebrow{
  margin:0 0 10px;
  color:var(--cyan);
  font-size:12px;
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
}

h1,
h2{
  margin:0;
  font-family:"Orbitron", sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.hero h1{
  font-size:clamp(42px, 8vw, 92px);
  line-height:.92;
  text-shadow:0 0 22px rgba(135,231,255,.15);
}

.heroText{
  max-width:700px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:clamp(16px, 2.8vw, 20px);
  line-height:1.55;
}

.panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:30px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(180deg, rgba(12,18,40,.92), rgba(6,10,24,.96));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 26%, transparent 74%, rgba(255,255,255,.04));
  pointer-events:none;
}

.rolesGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:6px;
}

.roleCard{
  --card-accent: rgba(135,231,255,.18);
  --card-accent-strong: rgba(135,231,255,.42);
  --card-inner-top: rgba(119,169,255,.24);
  --card-inner-bottom: rgba(255,198,143,.12);
  --card-label: var(--peach);
  --card-border-start: rgba(255,255,255,.24);
  --card-border-mid: rgba(255,255,255,.04);
  --card-sheen: rgba(255,255,255,.06);
  --card-outline: rgba(255,255,255,.04);
  position:relative;
  min-height:240px;
  padding:1px;
  border-radius:28px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(140deg, var(--card-border-start), var(--card-border-mid) 40%, var(--card-accent));
  transform:translateY(0);
  transition:transform .28s ease, box-shadow .28s ease;
  box-shadow:0 18px 54px rgba(0,0,0,.32);
}

.roleCard:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 78px rgba(0,0,0,.42);
}

.roleGlow{
  position:absolute;
  inset:auto 18% -34px;
  height:92px;
  border-radius:999px;
  background:radial-gradient(circle, var(--card-accent-strong), rgba(135,231,255,0));
  filter:blur(28px);
  opacity:.7;
}

.roleCardInner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:238px;
  padding:20px;
  border-radius:27px;
  background:
    radial-gradient(circle at 80% 18%, var(--card-inner-top), transparent 18%),
    radial-gradient(circle at 18% 88%, var(--card-inner-bottom), transparent 18%),
    linear-gradient(180deg, rgba(18,25,52,.90), rgba(7,11,24,.96));
  box-shadow:inset 0 0 0 1px var(--card-outline);
}

.roleCardInner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(135deg, var(--card-sheen), transparent 26%, transparent 74%, rgba(255,255,255,.03));
  pointer-events:none;
}

.roleCamp{
  margin:0 0 12px;
  color:var(--card-label);
  font-size:12px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.roleCard--coalition{
  --card-accent: rgba(135,231,255,.18);
  --card-accent-strong: rgba(135,231,255,.42);
  --card-inner-top: rgba(119,169,255,.24);
  --card-inner-bottom: rgba(255,198,143,.12);
  --card-label: #ffc68f;
  --card-border-start: rgba(144,218,255,.34);
  --card-border-mid: rgba(69,125,255,.12);
  --card-sheen: rgba(129,212,255,.08);
  --card-outline: rgba(128,201,255,.12);
}

.roleCard--shadows{
  --card-accent: rgba(172,103,255,.24);
  --card-accent-strong: rgba(188,122,255,.5);
  --card-inner-top: rgba(144,92,255,.28);
  --card-inner-bottom: rgba(92,34,148,.18);
  --card-label: #d9b5ff;
  --card-border-start: rgba(193,128,255,.38);
  --card-border-mid: rgba(98,49,170,.16);
  --card-sheen: rgba(180,118,255,.09);
  --card-outline: rgba(181,121,255,.14);
}

.roleCard--petit-prince{
  --card-accent: rgba(108,226,122,.22);
  --card-accent-strong: rgba(130,244,145,.46);
  --card-inner-top: rgba(105,210,118,.25);
  --card-inner-bottom: rgba(191,255,137,.14);
  --card-label: #d7ffab;
  --card-border-start: rgba(155,245,146,.34);
  --card-border-mid: rgba(66,147,84,.14);
  --card-sheen: rgba(158,244,146,.08);
  --card-outline: rgba(151,235,138,.14);
}

.roleCard--alien{
  --card-accent: rgba(255,92,92,.24);
  --card-accent-strong: rgba(255,108,108,.5);
  --card-inner-top: rgba(255,96,96,.25);
  --card-inner-bottom: rgba(145,28,48,.18);
  --card-label: #ffb0a8;
  --card-border-start: rgba(255,134,134,.38);
  --card-border-mid: rgba(162,42,62,.16);
  --card-sheen: rgba(255,138,138,.09);
  --card-outline: rgba(255,126,126,.14);
}

.roleCard h2{
  font-size:clamp(28px, 4vw, 38px);
  line-height:.92;
}

.roleSummary{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.55;
}

.roleSummaryLine{
  color:var(--muted);
  line-height:1.55;
}

.roleSummarySpacer{
  height:12px;
}

.roleShell{
  display:block;
  min-height:100%;
}

.rolePanel{
  width:min(900px, 100%);
  margin:0 auto;
  padding:28px;
}

.roleMeta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 20px;
}

.metaBadge{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(135,231,255,.08);
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.roleStoryText{
  margin-top:24px;
  color:var(--text);
  line-height:1.72;
  font-size:17px;
}

.roleStoryLine{
  color:var(--text);
  line-height:1.72;
}

.roleStorySpacer{
  height:12px;
}

.backLink{
  display:inline-flex;
  margin-top:22px;
  color:var(--peach);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.backLink:hover{
  color:#ffe0bb;
}

.loadingState{
  text-align:left;
}

.appView[hidden]{
  display:none !important;
}

.appView--index{
  position:relative;
  z-index:1;
}

.appView--role{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  min-height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  z-index:20;
  opacity:1;
  transform:none;
  transition:opacity .42s ease, transform .42s ease;
}

.appView--transition{
  z-index:30;
  opacity:1;
  transition:opacity .42s ease;
}

.appView--role.is-entering{
  opacity:0;
  transform:translateY(18px) scale(.985);
}

.appView--transition.is-fading-out{
  opacity:0;
  pointer-events:none;
}

.transitionStage{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.transitionScene{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
}

.transitionScene canvas{
  position:fixed;
  inset:0;
  width:100vw !important;
  height:100vh !important;
  display:block;
}

.transitionStage[data-role="cosmonautes"] .transitionScene--cosmos,
.transitionStage[data-role="trou-noir"] .transitionScene--trou-noir,
.transitionStage[data-role="horloger-cosmique"] .transitionScene--horloger-cosmique,
.transitionStage[data-role="astrologue"] .transitionScene--astrologue,
.transitionStage[data-role="nucleote"] .transitionScene--nucleote,
.transitionStage[data-role="oracle"] .transitionScene--oracle{
  opacity:1;
}

.transitionStage[data-role="trou-noir"] .transitionScene--trou-noir{
  pointer-events:auto;
}

.transitionStage[data-role="trou-noir"] .transitionScene--trou-noir canvas{
  pointer-events:auto;
}

.transitionStage[data-role="shadows"] .transitionScene--shadows{
  opacity:1;
}

.transitionStage[data-role="alien"] .transitionScene--alien{
  opacity:1;
}

.transitionStage[data-role="parasite"] .transitionScene--parasite{
  opacity:1;
}

.transitionStage[data-role="zeus"] .transitionScene--zeus{
  opacity:1;
}

.transitionStage[data-role="pantheon-cosmique"] .transitionScene--pantheon-cosmique{
  opacity:1;
}

.transitionStage[data-role="physicien-quantique"] .transitionScene--physicien-quantique{
  opacity:1;
}

.transitionStage[data-role="petit-prince"] .transitionScene--petit-prince{
  opacity:1;
}

.transitionStage[data-role="ange"] .transitionScene--ange{
  opacity:1;
}

.transitionStage[data-role="medium"] .transitionScene--medium{
  opacity:1;
}

.transitionStage[data-role="telepathe"] .transitionScene--telepathe{
  opacity:1;
}

.transitionRunway{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(122,214,255,.2), transparent 22%),
    radial-gradient(circle at 50% 78%, rgba(69,113,255,.18), transparent 28%),
    linear-gradient(180deg, rgba(11,20,42,.94), rgba(4,7,17,.98));
}

.transitionRunway::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 24%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 62%, rgba(140,227,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 74%, rgba(140,227,255,.6) 0 1px, transparent 1.5px);
  opacity:.7;
}

.transitionRunway::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:2px;
  height:100%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(148,214,255,.42), rgba(255,255,255,0));
  opacity:.34;
}

.cosmosCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.phantomStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(182,223,255,.16), transparent 20%),
    radial-gradient(circle at 50% 72%, rgba(122,156,255,.12), transparent 24%),
    linear-gradient(180deg, rgba(11,16,34,.96), rgba(4,6,14,.98));
}

.phantomCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.physicienStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(117,216,255,.08), transparent 22%),
    radial-gradient(circle at 50% 82%, rgba(126,158,255,.08), transparent 28%),
    linear-gradient(180deg, #07111a 0%, #04080d 100%);
}

.physicienCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.petitPrinceStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,214,182,.08), transparent 22%),
    radial-gradient(circle at 50% 78%, rgba(255,128,168,.06), transparent 26%),
    linear-gradient(180deg, #050814 0%, #02040a 100%);
}

.petitPrinceCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.phantomMist,
.phantomAura,
.phantomBody,
.phantomRune{
  position:absolute;
}

.phantomMist{
  left:50%;
  width:120vmax;
  height:34vmax;
  transform:translateX(-50%);
  border-radius:50%;
  filter:blur(24px);
}

.phantomMist--back{
  bottom:-8vmax;
  background:radial-gradient(circle, rgba(135,196,255,.18), rgba(135,196,255,0) 62%);
  animation:phantomMistDriftBack 5s ease-in-out infinite alternate;
}

.phantomMist--front{
  bottom:-14vmax;
  background:radial-gradient(circle, rgba(218,241,255,.14), rgba(218,241,255,0) 58%);
  animation:phantomMistDriftFront 3.8s ease-in-out infinite alternate;
}

.phantomAura{
  left:50%;
  top:50%;
  width:min(58vmin, 620px);
  height:min(70vmin, 760px);
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(190,232,255,.22), rgba(190,232,255,0) 62%);
  filter:blur(18px);
  animation:phantomAuraPulse 3.2s ease-in-out infinite alternate;
}

.phantomBody{
  left:50%;
  top:52%;
  width:min(34vmin, 360px);
  height:min(58vmin, 620px);
  transform:translate(-50%, -50%);
  animation:phantomFloat 3.2s ease-in-out infinite alternate;
}

.phantomHead{
  position:absolute;
  left:50%;
  top:2%;
  width:32%;
  height:20%;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.72), rgba(210,239,255,.48) 42%, rgba(113,162,255,.18) 72%, rgba(113,162,255,0) 100%);
  box-shadow:0 0 28px rgba(199,236,255,.28);
}

.phantomVeil{
  position:absolute;
  left:50%;
  top:16%;
  width:100%;
  height:84%;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 50% 8%, rgba(236,248,255,.78), rgba(190,232,255,.54) 22%, rgba(133,185,255,.18) 54%, rgba(133,185,255,0) 100%);
  clip-path:polygon(50% 0, 76% 10%, 88% 28%, 94% 48%, 100% 74%, 86% 100%, 64% 88%, 50% 100%, 36% 88%, 14% 100%, 0 74%, 6% 48%, 12% 28%, 24% 10%);
  filter:blur(1px);
}

.phantomVeil::after{
  content:"";
  position:absolute;
  inset:16% 10% 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, rgba(216,240,255,.12) 0 8%, rgba(216,240,255,0) 8% 18%);
  clip-path:inherit;
  opacity:.6;
}

.phantomEye{
  position:absolute;
  top:16%;
  width:10%;
  height:4%;
  border-radius:999px;
  background:#f2f8ff;
  box-shadow:0 0 18px rgba(255,255,255,.54);
}

.phantomEye--left{
  left:38%;
}

.phantomEye--right{
  right:38%;
}

.phantomArm{
  position:absolute;
  top:32%;
  width:26%;
  height:18%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(219,243,255,.54), rgba(132,181,255,.08));
  filter:blur(1px);
}

.phantomArm--left{
  left:4%;
  transform:rotate(30deg);
}

.phantomArm--right{
  right:4%;
  transform:rotate(-30deg);
}

.phantomRune{
  width:min(3.6vmin, 36px);
  height:min(3.6vmin, 36px);
  border:2px solid rgba(214,241,255,.84);
  border-radius:8px;
  transform:rotate(45deg);
  box-shadow:0 0 16px rgba(196,231,255,.24);
  animation:phantomRuneSpin 6s linear infinite;
}

.phantomRune::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:36%;
  height:36%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:rgba(230,246,255,.88);
}

.phantomRune--a{
  left:24%;
  top:24%;
}

.phantomRune--b{
  right:24%;
  top:18%;
  animation-direction:reverse;
}

.phantomRune--c{
  left:20%;
  bottom:24%;
  animation-duration:7.2s;
}

.phantomRune--d{
  right:18%;
  bottom:20%;
  animation-duration:5.4s;
  animation-direction:reverse;
}

@keyframes phantomMistDriftBack{
  from{transform:translateX(-50%) translateY(0) scale(1)}
  to{transform:translateX(-50%) translateY(-16px) scale(1.08)}
}

@keyframes phantomMistDriftFront{
  from{transform:translateX(-50%) translateY(0) scale(.96)}
  to{transform:translateX(-50%) translateY(-10px) scale(1.04)}
}

@keyframes phantomAuraPulse{
  from{transform:translate(-50%, -50%) scale(.94); opacity:.42}
  to{transform:translate(-50%, -50%) scale(1.06); opacity:.76}
}

@keyframes phantomFloat{
  from{transform:translate(-50%, -52%) translateY(-8px)}
  to{transform:translate(-50%, -52%) translateY(8px)}
}

@keyframes phantomRuneSpin{
  from{transform:rotate(45deg)}
  to{transform:rotate(405deg)}
}

.rocket{
  position:absolute;
  left:50%;
  bottom:8vh;
  width:110px;
  height:170px;
  transform:translateX(-50%);
  animation:rocketLaunch 2.6s cubic-bezier(.24,.72,.16,1) forwards;
}

.rocketBody{
  position:absolute;
  left:50%;
  bottom:28px;
  width:54px;
  height:108px;
  transform:translateX(-50%);
  border-radius:28px 28px 18px 18px;
  background:linear-gradient(180deg, #f8fbff 0%, #c9d8ff 58%, #8aa4ff 100%);
  box-shadow:0 0 28px rgba(133,198,255,.18);
}

.rocketBody::before{
  content:"";
  position:absolute;
  left:50%;
  top:-24px;
  width:0;
  height:0;
  transform:translateX(-50%);
  border-left:27px solid transparent;
  border-right:27px solid transparent;
  border-bottom:30px solid #f8fbff;
}

.rocketBody::after{
  content:"";
  position:absolute;
  left:50%;
  top:24px;
  width:18px;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, #8fe7ff 0%, #2b77ff 62%, rgba(43,119,255,0) 70%);
  box-shadow:0 0 20px rgba(143,231,255,.55);
}

.rocketWing{
  position:absolute;
  bottom:40px;
  width:24px;
  height:44px;
  background:linear-gradient(180deg, #8ec0ff, #4d67d9);
}

.rocketWing--left{
  left:18px;
  clip-path:polygon(100% 0, 100% 100%, 0 72%);
}

.rocketWing--right{
  right:18px;
  clip-path:polygon(0 0, 100% 72%, 0 100%);
}

.rocketFlame{
  position:absolute;
  left:50%;
  bottom:0;
  width:34px;
  height:62px;
  transform:translateX(-50%);
  border-radius:50% 50% 60% 60%;
  background:linear-gradient(180deg, #fff5b8 0%, #ffb85f 45%, #ff623d 100%);
  filter:blur(.4px);
  animation:rocketFlamePulse 220ms ease-in-out infinite alternate;
}

.rocketFlame::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:10px;
  width:16px;
  height:30px;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg, #ffffff, #ffe06f 70%, rgba(255,224,111,0));
}

.rocketSmoke{
  position:absolute;
  left:50%;
  bottom:18px;
  width:180px;
  height:180px;
  transform:translateX(-50%);
}

.rocketSmoke span{
  position:absolute;
  bottom:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(205,231,255,.66), rgba(205,231,255,0));
  animation:rocketSmokeRise 1.3s ease-in infinite;
}

.rocketSmoke span:nth-child(1){
  left:18px;
  width:56px;
  height:56px;
  animation-delay:0s;
}

.rocketSmoke span:nth-child(2){
  left:62px;
  width:72px;
  height:72px;
  animation-delay:.18s;
}

.rocketSmoke span:nth-child(3){
  left:110px;
  width:48px;
  height:48px;
  animation-delay:.36s;
}

@keyframes rocketLaunch{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  30%{transform:translateX(-50%) translateY(-8px) scale(1.01)}
  100%{transform:translateX(-50%) translateY(-360px) scale(.78)}
}

@keyframes rocketFlamePulse{
  from{height:52px; opacity:.88}
  to{height:72px; opacity:1}
}

@keyframes rocketSmokeRise{
  0%{transform:translateY(0) scale(.5); opacity:0}
  20%{opacity:.52}
  100%{transform:translateY(-84px) scale(1.26); opacity:0}
}

.blackholeStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(12,17,39,.45), rgba(5,7,15,.96) 34%, #020305 70%),
    radial-gradient(circle at 50% 50%, rgba(118,182,255,.08), transparent 58%);
}

.blackholeCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.blackholeBackdrop,
.collapseGlow,
.gravitationalLens,
.eventHorizon,
.accretionRing,
.orbitalDebris{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.blackholeBackdrop{
  width:140vmax;
  height:140vmax;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(31,44,89,.12), transparent 38%),
    radial-gradient(circle, rgba(113,164,255,.08), transparent 52%);
  filter:blur(28px);
  animation:blackholePulse 4.8s ease-in-out infinite alternate;
}

.accretionRing{
  border-radius:50%;
  mix-blend-mode:screen;
  filter:blur(.6px);
}

.accretionRing--outer{
  width:min(118vmin, 1180px);
  height:min(34vmin, 340px);
  border-top:10px solid rgba(155,220,255,.9);
  border-bottom:10px solid rgba(99,134,255,.18);
  border-left:24px solid rgba(255,162,103,.42);
  border-right:24px solid rgba(109,169,255,.28);
  box-shadow:
    0 0 70px rgba(120,182,255,.24),
    inset 0 0 40px rgba(255,186,122,.18);
  animation:blackholeCrushOuter 5.2s cubic-bezier(.2,.72,.14,1) forwards, blackholeTilt 4.6s ease-in-out infinite alternate;
}

.accretionRing--mid{
  width:min(92vmin, 920px);
  height:min(22vmin, 220px);
  border-top:7px solid rgba(255,205,133,.86);
  border-bottom:7px solid rgba(90,113,255,.15);
  border-left:16px solid rgba(255,118,74,.34);
  border-right:16px solid rgba(132,200,255,.24);
  opacity:.95;
  box-shadow:0 0 54px rgba(255,163,107,.18);
  animation:blackholeCrushMid 5s cubic-bezier(.2,.72,.14,1) forwards;
}

.accretionRing--inner{
  width:min(66vmin, 660px);
  height:min(12vmin, 120px);
  border-top:5px solid rgba(255,239,180,.92);
  border-bottom:5px solid rgba(74,94,211,.12);
  border-left:10px solid rgba(255,154,98,.3);
  border-right:10px solid rgba(163,224,255,.24);
  box-shadow:
    0 0 42px rgba(255,218,160,.2),
    0 0 120px rgba(88,140,255,.12);
  animation:blackholeCrushInner 4.8s cubic-bezier(.2,.72,.14,1) forwards;
}

.gravitationalLens{
  width:min(50vmin, 500px);
  height:min(50vmin, 500px);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(73,107,224,.12) 0 24%, rgba(6,8,16,0) 48%, rgba(112,171,255,.08) 58%, rgba(6,8,16,0) 68%);
  filter:blur(6px);
  animation:blackholeLensPulse 4.4s ease-in-out infinite alternate;
}

.eventHorizon{
  width:min(32vmin, 320px);
  height:min(32vmin, 320px);
  border-radius:50%;
  background:
    radial-gradient(circle at 44% 38%, rgba(32,44,82,.2), rgba(0,0,0,.98) 38%, #000 62%),
    radial-gradient(circle, rgba(127,170,255,.08), transparent 68%);
  box-shadow:
    0 0 140px rgba(25,37,80,.55),
    0 0 240px rgba(0,0,0,.9),
    inset 0 0 42px rgba(27,40,88,.24);
  animation:blackholeSink 5.2s cubic-bezier(.18,.72,.12,1) forwards;
}

.collapseGlow{
  width:min(72vmin, 720px);
  height:min(72vmin, 720px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(112,170,255,.14), rgba(83,126,255,.05) 28%, rgba(0,0,0,0) 62%);
  filter:blur(20px);
  animation:blackholeCollapseHalo 5.2s ease-out forwards;
}

.orbitalDebris{
  width:min(90vmin, 900px);
  height:min(24vmin, 240px);
  border-radius:50%;
  filter:blur(.4px);
}

.orbitalDebris::before,
.orbitalDebris::after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,229,172,0), rgba(255,214,150,.98) 50%, rgba(255,137,87,0));
  box-shadow:0 0 20px rgba(255,165,105,.28);
}

.orbitalDebris--a{
  transform:translate(-50%, -50%) rotate(-12deg);
  animation:blackholeDebrisInA 5s cubic-bezier(.18,.72,.14,1) forwards;
}

.orbitalDebris--a::before{
  left:6%;
  top:50%;
  width:180px;
  height:10px;
}

.orbitalDebris--a::after{
  right:7%;
  top:46%;
  width:140px;
  height:8px;
}

.orbitalDebris--b{
  width:min(70vmin, 700px);
  height:min(18vmin, 180px);
  transform:translate(-50%, -50%) rotate(10deg);
  animation:blackholeDebrisInB 4.8s cubic-bezier(.18,.72,.14,1) forwards;
}

.orbitalDebris--b::before{
  left:10%;
  top:52%;
  width:120px;
  height:8px;
}

.orbitalDebris--b::after{
  right:10%;
  top:44%;
  width:100px;
  height:7px;
}

.orbitalDebris--c{
  width:min(52vmin, 520px);
  height:min(12vmin, 120px);
  transform:translate(-50%, -50%) rotate(4deg);
  animation:blackholeDebrisInC 4.6s cubic-bezier(.18,.72,.14,1) forwards;
}

.orbitalDebris--c::before{
  left:8%;
  top:48%;
  width:78px;
  height:6px;
}

.orbitalDebris--c::after{
  right:9%;
  top:48%;
  width:72px;
  height:5px;
}

@keyframes blackholeTilt{
  from{filter:blur(.4px) brightness(1)}
  to{filter:blur(1.1px) brightness(1.16)}
}

@keyframes blackholePulse{
  from{transform:translate(-50%, -50%) scale(.96); opacity:.45}
  to{transform:translate(-50%, -50%) scale(1.06); opacity:.72}
}

@keyframes blackholeLensPulse{
  from{transform:translate(-50%, -50%) scale(.94); opacity:.28}
  to{transform:translate(-50%, -50%) scale(1.04); opacity:.58}
}

@keyframes blackholeSink{
  0%{transform:translate(-50%, -50%) scale(.88)}
  40%{transform:translate(-50%, -50%) scale(1.04)}
  100%{transform:translate(-50%, -50%) scale(.58)}
}

@keyframes blackholeCollapseHalo{
  0%{transform:translate(-50%, -50%) scale(1.08); opacity:0}
  24%{opacity:.66}
  100%{transform:translate(-50%, -50%) scale(.22); opacity:.08}
}

@keyframes blackholeCrushOuter{
  0%{transform:translate(-50%, -50%) scale(1) rotate(0deg)}
  100%{transform:translate(-50%, -50%) scale(.54) rotate(28deg)}
}

@keyframes blackholeCrushMid{
  0%{transform:translate(-50%, -50%) scale(1) rotate(0deg)}
  100%{transform:translate(-50%, -50%) scale(.38) rotate(-18deg)}
}

@keyframes blackholeCrushInner{
  0%{transform:translate(-50%, -50%) scale(1) rotate(0deg)}
  100%{transform:translate(-50%, -50%) scale(.22) rotate(14deg)}
}

@keyframes blackholeDebrisInA{
  0%{transform:translate(-50%, -50%) rotate(-12deg) scale(1); opacity:.72}
  100%{transform:translate(-50%, -50%) rotate(8deg) scale(.32); opacity:.16}
}

@keyframes blackholeDebrisInB{
  0%{transform:translate(-50%, -50%) rotate(10deg) scale(1); opacity:.64}
  100%{transform:translate(-50%, -50%) rotate(-6deg) scale(.26); opacity:.12}
}

@keyframes blackholeDebrisInC{
  0%{transform:translate(-50%, -50%) rotate(4deg) scale(1); opacity:.56}
  100%{transform:translate(-50%, -50%) rotate(-2deg) scale(.18); opacity:.08}
}

.clockStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(28,44,92,.34), rgba(5,8,18,.96) 48%, #010204 100%),
    radial-gradient(circle at 50% 50%, rgba(117,174,255,.08), transparent 58%);
}

.clockAura,
.clockFace,
.timeArc{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.clockAura{
  width:120vmax;
  height:120vmax;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(128,191,255,.12), transparent 26%),
    radial-gradient(circle, rgba(53,94,211,.08), transparent 52%);
  filter:blur(30px);
  animation:clockAuraPulse 10s ease-in-out infinite alternate;
}

.clockFace{
  width:min(78vmin, 780px);
  height:min(78vmin, 780px);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(10,15,28,.96) 0 38%, rgba(21,33,62,.94) 58%, rgba(89,146,255,.12) 74%, rgba(0,0,0,0) 80%);
  box-shadow:
    0 0 120px rgba(82,135,255,.14),
    inset 0 0 48px rgba(143,209,255,.08);
  animation:clockFaceBreath 12s ease-in-out infinite alternate;
}

.clockRing{
  position:absolute;
  inset:0;
  border-radius:50%;
}

.clockRing--outer{
  border:2px solid rgba(147,213,255,.24);
  box-shadow:0 0 50px rgba(123,183,255,.14);
}

.clockRing--inner{
  inset:9%;
  border:1px solid rgba(255,216,146,.14);
}

.clockTick{
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:calc(50% - 30px);
  transform-origin:center top;
  transform:translate(-50%, -50%);
}

.clockTick::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:4px;
  height:26px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,228,172,.95), rgba(132,192,255,.22));
  box-shadow:0 0 12px rgba(255,216,156,.18);
}

.tick-12{transform:translate(-50%, -50%) rotate(0deg)}
.tick-1{transform:translate(-50%, -50%) rotate(30deg)}
.tick-2{transform:translate(-50%, -50%) rotate(60deg)}
.tick-3{transform:translate(-50%, -50%) rotate(90deg)}
.tick-4{transform:translate(-50%, -50%) rotate(120deg)}
.tick-5{transform:translate(-50%, -50%) rotate(150deg)}
.tick-6{transform:translate(-50%, -50%) rotate(180deg)}
.tick-7{transform:translate(-50%, -50%) rotate(210deg)}
.tick-8{transform:translate(-50%, -50%) rotate(240deg)}
.tick-9{transform:translate(-50%, -50%) rotate(270deg)}
.tick-10{transform:translate(-50%, -50%) rotate(300deg)}
.tick-11{transform:translate(-50%, -50%) rotate(330deg)}

.clockGlyph{
  position:absolute;
  inset:18%;
  border-radius:50%;
  border:1px dashed rgba(147,210,255,.12);
  opacity:.65;
  animation:clockGlyphSpin 44s linear infinite;
}

.clockHand{
  position:absolute;
  left:50%;
  bottom:50%;
  width:6px;
  transform-origin:center bottom;
  transform:translateX(-50%) rotate(0deg);
  border-radius:999px;
}

.clockHand--hour{
  height:24%;
  background:linear-gradient(180deg, rgba(255,233,182,.98), rgba(255,173,93,.32));
  box-shadow:0 0 16px rgba(255,201,122,.16);
  animation:clockHourSweep 72s linear infinite;
}

.clockHand--minute{
  height:34%;
  background:linear-gradient(180deg, rgba(192,228,255,.98), rgba(108,166,255,.3));
  box-shadow:0 0 18px rgba(133,198,255,.18);
  animation:clockMinuteSweep 28s linear infinite;
}

.clockHand--second{
  width:3px;
  height:40%;
  background:linear-gradient(180deg, rgba(153,227,255,.96), rgba(104,180,255,.2));
  box-shadow:0 0 20px rgba(143,231,255,.24);
  animation:clockSecondSpin 12s linear infinite;
}

.clockCenter{
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(circle, #f4fbff 0%, #9fd8ff 46%, rgba(159,216,255,0) 70%);
  box-shadow:0 0 24px rgba(159,216,255,.42);
}

.timeArc{
  width:min(94vmin, 940px);
  height:min(94vmin, 940px);
  border-radius:50%;
  border:1px solid rgba(140,205,255,.08);
  mix-blend-mode:screen;
}

.timeArc::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:12px;
  height:12px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,229,170,.98), rgba(255,229,170,0));
  box-shadow:0 0 18px rgba(255,215,156,.22);
}

.timeArc--a{
  animation:clockArcSpinA 24s linear infinite;
}

.timeArc--b{
  width:min(72vmin, 720px);
  height:min(72vmin, 720px);
  animation:clockArcSpinB 18s linear infinite reverse;
}

.timeArc--c{
  width:min(52vmin, 520px);
  height:min(52vmin, 520px);
  animation:clockArcSpinC 14s linear infinite;
}

@keyframes clockAuraPulse{
  from{transform:translate(-50%, -50%) scale(.96); opacity:.46}
  to{transform:translate(-50%, -50%) scale(1.06); opacity:.76}
}

@keyframes clockFaceBreath{
  from{transform:translate(-50%, -50%) scale(.98)}
  to{transform:translate(-50%, -50%) scale(1.02)}
}

@keyframes clockGlyphSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes clockHourSweep{
  0%{transform:translateX(-50%) rotate(-40deg)}
  100%{transform:translateX(-50%) rotate(110deg)}
}

@keyframes clockMinuteSweep{
  0%{transform:translateX(-50%) rotate(0deg)}
  100%{transform:translateX(-50%) rotate(280deg)}
}

@keyframes clockSecondSpin{
  0%{transform:translateX(-50%) rotate(0deg); opacity:.22}
  12%{opacity:1}
  100%{transform:translateX(-50%) rotate(1440deg); opacity:.4}
}

@keyframes clockArcSpinA{
  from{transform:translate(-50%, -50%) rotate(0deg)}
  to{transform:translate(-50%, -50%) rotate(360deg)}
}

@keyframes clockArcSpinB{
  from{transform:translate(-50%, -50%) rotate(0deg)}
  to{transform:translate(-50%, -50%) rotate(360deg)}
}

@keyframes clockArcSpinC{
  from{transform:translate(-50%, -50%) rotate(0deg)}
  to{transform:translate(-50%, -50%) rotate(360deg)}
}

.astrologueStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(35,28,72,.34), rgba(7,8,19,.96) 54%, #05050a 100%),
    linear-gradient(180deg, rgba(13,17,34,.94), rgba(8,8,14,.98));
}

.astroAura,
.astroCard,
.astroConstellation{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.astroAura{
  width:120vmax;
  height:120vmax;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,219,136,.12), transparent 22%),
    radial-gradient(circle, rgba(117,174,255,.08), transparent 52%);
  filter:blur(30px);
  animation:astroAuraPulse 3.6s ease-in-out infinite alternate;
}

.astroCard{
  width:min(48vmin, 480px);
  aspect-ratio:3 / 4.2;
  border-radius:30px;
}

.astroCard--back{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,214,128,.12), transparent 38%),
    linear-gradient(180deg, rgba(29,67,92,.9), rgba(18,48,72,.94));
  border:3px solid rgba(77,139,153,.9);
  box-shadow:0 18px 90px rgba(0,0,0,.45);
  animation:astroCardBackDrift 4s ease-in-out forwards;
}

.astroCard--front{
  background:
    linear-gradient(180deg, rgba(247,236,208,.98), rgba(240,227,194,.98));
  border:5px solid #2c7a84;
  box-shadow:
    0 22px 120px rgba(0,0,0,.42),
    inset 0 0 28px rgba(255,255,255,.28);
  animation:astroCardReveal 4s cubic-bezier(.24,.72,.18,1) forwards;
  overflow:hidden;
}

.astroFrame{
  position:absolute;
  inset:20px;
  border-radius:20px;
}

.astroFrame--outer{
  border:3px solid rgba(44,122,132,.9);
}

.astroFrame--inner{
  inset:40px;
  border:2px solid rgba(233,90,120,.72);
}

.astroMoon{
  position:absolute;
  top:72px;
  width:92px;
  height:92px;
  border-radius:50%;
  background:#ea5f86;
  box-shadow:0 0 18px rgba(234,95,134,.18);
}

.astroMoon::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}

.astroMoon--left{
  left:-24px;
}

.astroMoon--right{
  right:-24px;
}

.astroSunburst{
  position:absolute;
  left:50%;
  top:50%;
  width:178px;
  height:178px;
  transform:translate(-50%, -54%);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,236,132,.98) 0 52%, rgba(255,236,132,0) 53%),
    conic-gradient(from 0deg, rgba(44,122,132,0) 0 8deg, rgba(44,122,132,.94) 8deg 14deg, rgba(44,122,132,0) 14deg 30deg);
  animation:astroSunSpin 8s linear infinite;
}

.astroEye{
  position:absolute;
  left:50%;
  top:50%;
  width:150px;
  height:80px;
  transform:translate(-50%, -52%);
  border-radius:90px / 52px;
  background:#2b2925;
}

.astroEye::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:82px;
  height:34px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:#59b9c0;
}

.astroEye::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:#22211f;
  box-shadow:0 0 16px rgba(89,185,192,.35);
}

.astroStars span{
  position:absolute;
  width:12px;
  height:12px;
  transform:rotate(45deg);
  background:#f4c54f;
  box-shadow:0 0 16px rgba(244,197,79,.25);
  animation:astroSparkle 2.2s ease-in-out infinite alternate;
}

.astroStars span:nth-child(1){
  left:70px;
  top:150px;
}

.astroStars span:nth-child(2){
  right:82px;
  top:138px;
  animation-delay:.3s;
}

.astroStars span:nth-child(3){
  left:96px;
  bottom:132px;
  animation-delay:.6s;
}

.astroStars span:nth-child(4){
  right:94px;
  bottom:116px;
  animation-delay:.9s;
}

.astroConstellation{
  width:min(70vmin, 700px);
  height:min(70vmin, 700px);
  animation:astroConstellationTurn 5s linear infinite;
}

.star,
.starLink{
  position:absolute;
}

.star{
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle, #fff7cf 0%, #ffe39a 58%, rgba(255,227,154,0) 72%);
  box-shadow:0 0 22px rgba(255,227,154,.28);
}

.star-1{left:14%; top:26%}
.star-2{left:32%; top:14%}
.star-3{right:24%; top:18%}
.star-4{right:14%; top:42%}
.star-5{left:26%; bottom:22%}
.star-6{right:20%; bottom:18%}

.starLink{
  height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(255,222,151,.62), rgba(255,222,151,0));
  opacity:.7;
}

.starLink-1{
  left:16%;
  top:28%;
  width:146px;
  transform:rotate(-20deg);
}

.starLink-2{
  left:34%;
  top:17%;
  width:192px;
  transform:rotate(12deg);
}

.starLink-3{
  left:28%;
  bottom:24%;
  width:220px;
  transform:rotate(-8deg);
}

@keyframes astroAuraPulse{
  from{transform:translate(-50%, -50%) scale(.96); opacity:.44}
  to{transform:translate(-50%, -50%) scale(1.06); opacity:.76}
}

@keyframes astroCardBackDrift{
  0%{transform:translate(-50%, -50%) rotate(-6deg) scale(1.04); opacity:.38}
  100%{transform:translate(-50%, -50%) rotate(6deg) scale(.88); opacity:0}
}

@keyframes astroCardReveal{
  0%{transform:translate(-50%, -50%) rotate(-10deg) scale(.78); opacity:0}
  30%{opacity:1}
  65%{transform:translate(-50%, -50%) rotate(4deg) scale(1.04)}
  100%{transform:translate(-50%, -50%) rotate(0deg) scale(1)}
}

@keyframes astroSunSpin{
  from{transform:translate(-50%, -54%) rotate(0deg)}
  to{transform:translate(-50%, -54%) rotate(360deg)}
}

@keyframes astroSparkle{
  from{transform:rotate(45deg) scale(.84); opacity:.48}
  to{transform:rotate(45deg) scale(1.14); opacity:1}
}

@keyframes astroConstellationTurn{
  from{transform:translate(-50%, -50%) rotate(0deg)}
  to{transform:translate(-50%, -50%) rotate(360deg)}
}

.nucleoteStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 72%, rgba(255,190,102,.16), transparent 18%),
    radial-gradient(circle at 50% 44%, rgba(255,120,88,.08), transparent 26%),
    linear-gradient(180deg, #130b0a 0%, #090505 100%);
}

.nucleoteCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.parasiteStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(123,245,255,.08), transparent 20%),
    radial-gradient(circle at 50% 76%, rgba(117,228,184,.08), transparent 26%),
    linear-gradient(180deg, #071015 0%, #04090d 100%);
}

.parasiteCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.zeusStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(185,214,255,.09), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(255,210,122,.06), transparent 26%),
    linear-gradient(180deg, #050914 0%, #02040a 100%);
}

.zeusCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.oracleStage{
  overflow:hidden;
  background:#181412;
}

.oracleCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.oraclePaper,
.oracleCorner,
.oracleDots,
.oracleSeal,
.oraclePlanet{
  position:absolute;
}

.oraclePaper{
  inset:2.8vmin;
  border-radius:1.8vmin;
  background:
    radial-gradient(circle at 50% 42%, rgba(247,236,214,.86), rgba(240,227,198,.96) 46%, rgba(232,213,180,.98) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(91,68,54,.08),
    inset 0 0 90px rgba(181,135,85,.12);
}

.oraclePaper::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:
    radial-gradient(rgba(72,58,46,.07) .8px, transparent .8px),
    radial-gradient(rgba(210,151,114,.06) .8px, transparent .8px);
  background-size:4px 4px, 7px 7px;
  background-position:0 0, 2px 1px;
  mix-blend-mode:multiply;
  opacity:.55;
}

.oracleCorner{
  opacity:.95;
}

.oracleCorner--tl,
.oracleCorner--bl{
  left:-2vmin;
  width:26vmin;
  height:26vmin;
  background:#ef7f58;
  border:min(1.2vmin, 14px) solid #3d6f6c;
}

.oracleCorner--tl{
  top:-2vmin;
  clip-path:polygon(0 0, 100% 0, 100% 14%, 18% 14%, 18% 100%, 0 100%);
}

.oracleCorner--bl{
  bottom:-2vmin;
  clip-path:polygon(0 0, 18% 0, 18% 86%, 100% 86%, 100% 100%, 0 100%);
}

.oracleCorner--tr,
.oracleCorner--br{
  right:-9vmin;
  width:34vmin;
  height:34vmin;
  border-radius:50%;
  border:min(1.1vmin, 13px) solid #3d6f6c;
  overflow:hidden;
}

.oracleCorner--tr{
  top:-9vmin;
  background:
    radial-gradient(circle at 50% 50%, rgba(212,124,116,.8) 0 4%, transparent 5% 10%, rgba(212,124,116,.8) 11% 15%, transparent 16% 100%),
    #eac95f;
}

.oracleCorner--br{
  bottom:-10vmin;
  background:
    radial-gradient(circle at 68% 24%, #6da081 0 14%, transparent 15%),
    radial-gradient(circle at 40% 54%, #6fa8ae 0 36%, transparent 37%),
    radial-gradient(circle at 62% 64%, #496e74 0 8%, transparent 9%),
    #87b38f;
}

.oracleCorner--tr::before,
.oracleCorner--br::before{
  content:"";
  position:absolute;
  inset:0;
  background:#ef8693;
}

.oracleCorner--tr::before{
  clip-path:polygon(58% 0, 100% 0, 100% 42%);
}

.oracleCorner--br::before{
  clip-path:polygon(66% 100%, 100% 100%, 100% 62%);
}

.oracleCorner--br::after{
  content:"";
  position:absolute;
  left:16%;
  top:34%;
  width:44%;
  height:6%;
  border-radius:999px;
  background:#3d6f6c;
  box-shadow:
    0 3.2vmin 0 #3d6f6c,
    0 6.4vmin 0 #3d6f6c;
  transform:rotate(18deg);
  opacity:.72;
}

.oracleDots{
  top:11%;
  width:16vmin;
  height:24vmin;
  background-image:radial-gradient(circle, rgba(229,127,136,.9) 0 22%, transparent 24%);
  background-size:4.8vmin 4.8vmin;
  opacity:.72;
}

.oracleDots--left{
  left:25%;
}

.oracleDots--right{
  right:22%;
}

.oracleSeal{
  left:50%;
  top:50%;
  width:min(44vmin, 500px);
  height:min(46vmin, 520px);
  transform:translate(-50%, -48%);
}

.oracleLetter{
  position:absolute;
  left:50%;
  top:2%;
  width:62%;
  height:48%;
  transform:translateX(-50%);
  border:min(.9vmin, 10px) solid #3d6f6c;
  border-radius:1.2vmin;
  background:#f8f0dd;
  box-shadow:0 1.6vmin 0 rgba(61,111,108,.12);
  animation:oracleLetterReveal 4.2s cubic-bezier(.22,.72,.18,1) forwards;
}

.oracleLetter::before{
  content:"";
  position:absolute;
  left:50%;
  top:-22%;
  width:42%;
  height:28%;
  transform:translateX(-50%);
  background:#436d68;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}

.oracleLetter span{
  position:absolute;
  left:14%;
  right:14%;
  height:min(1.2vmin, 12px);
  border-radius:999px;
  background:#5d8e8b;
}

.oracleLetter span:nth-child(1){
  top:18%;
  width:34%;
}

.oracleLetter span:nth-child(2){
  top:34%;
  width:72%;
}

.oracleLetter span:nth-child(3){
  top:52%;
  width:64%;
}

.oracleLetter span:nth-child(4){
  top:70%;
  width:70%;
}

.oracleEnvelope{
  position:absolute;
  left:50%;
  bottom:0;
  width:86%;
  height:62%;
  transform:translateX(-50%);
  border:min(.95vmin, 11px) solid #3d6f6c;
  border-radius:1.2vmin;
  background:
    linear-gradient(135deg, #cfd6c7 0 49.5%, #92a99d 49.5% 50.5%, transparent 50.5%),
    linear-gradient(225deg, #d7ddd0 0 49.5%, #92a99d 49.5% 50.5%, transparent 50.5%),
    linear-gradient(45deg, #bcc8bc 0 49.5%, #7f9890 49.5% 50.5%, transparent 50.5%),
    linear-gradient(315deg, #aab6ab 0 49.5%, #6f8d84 49.5% 50.5%, transparent 50.5%),
    #b8c5b6;
  overflow:hidden;
  animation:oracleEnvelopeSettle 4.2s cubic-bezier(.22,.72,.18,1) forwards;
}

.oracleFlap{
  position:absolute;
}

.oracleFlap--top{
  left:50%;
  top:-1%;
  width:76%;
  height:46%;
  transform:translateX(-50%);
  background:#6b8882;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  opacity:.5;
}

.oracleFlap--left{
  left:0;
  top:0;
  width:52%;
  height:100%;
  background:#d5ddd1;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.oracleFlap--right{
  right:0;
  top:0;
  width:52%;
  height:100%;
  background:#c7d0c4;
  clip-path:polygon(100% 0, 0 50%, 100% 100%);
}

.oracleFlap--bottom{
  left:50%;
  bottom:0;
  width:100%;
  height:56%;
  transform:translateX(-50%);
  background:#90a49b;
  clip-path:polygon(0 100%, 50% 0, 100% 100%);
}

.oracleBolt{
  position:absolute;
  left:50%;
  top:48%;
  width:26%;
  height:42%;
  transform:translate(-50%, -50%) rotate(8deg);
  background:#f0c95f;
  clip-path:polygon(54% 0, 82% 0, 62% 34%, 84% 34%, 34% 100%, 42% 58%, 18% 58%);
  box-shadow:0 0 0 min(.8vmin, 8px) #eb7386;
  animation:oracleBoltFlash 1.8s ease-in-out infinite;
}

.oraclePlanet{
  border:min(.95vmin, 11px) solid #3d6f6c;
  border-radius:50%;
  opacity:.9;
}

.oraclePlanet--left{
  left:-12vmin;
  top:-7vmin;
  width:34vmin;
  height:34vmin;
  background:
    linear-gradient(135deg, rgba(255,255,255,0) 0 58%, #ef8693 58% 61%, transparent 61%),
    linear-gradient(180deg, #ef8556 0%, #de7448 100%);
}

.oraclePlanet--left::before{
  content:"";
  position:absolute;
  left:24%;
  top:34%;
  width:12%;
  height:8%;
  border-radius:999px;
  background:#3d6f6c;
  box-shadow:
    10vmin -3vmin 0 .2vmin #3d6f6c,
    3vmin 6vmin 0 .1vmin #3d6f6c;
  transform:rotate(-28deg);
}

.oraclePlanet--right{
  right:-12vmin;
  bottom:-11vmin;
  width:38vmin;
  height:38vmin;
  background:
    radial-gradient(circle at 38% 30%, #8cbc7d 0 16%, transparent 17%),
    radial-gradient(circle at 54% 50%, #7ba7a6 0 38%, transparent 39%),
    radial-gradient(circle at 72% 36%, #5f8f7f 0 18%, transparent 19%),
    #74a2a6;
}

.transitionScene--oracle::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.14), transparent 24%);
  animation:oracleGlowPulse 2.2s ease-in-out infinite;
}

@keyframes oracleLetterReveal{
  0%{transform:translateX(-50%) translateY(16%) scale(.92); opacity:0}
  18%{opacity:1}
  100%{transform:translateX(-50%) translateY(0) scale(1); opacity:1}
}

@keyframes oracleEnvelopeSettle{
  0%{transform:translateX(-50%) translateY(8%) scale(.94); opacity:0}
  20%{opacity:1}
  100%{transform:translateX(-50%) translateY(0) scale(1); opacity:1}
}

@keyframes oracleBoltFlash{
  0%, 100%{filter:brightness(1); transform:translate(-50%, -50%) rotate(8deg) scale(1)}
  50%{filter:brightness(1.16); transform:translate(-50%, -50%) rotate(8deg) scale(1.06)}
}

@keyframes oracleGlowPulse{
  0%, 100%{opacity:.28}
  50%{opacity:.56}
}

.shadowStage{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,180,140,.08), transparent 24%),
    radial-gradient(circle at 50% 78%, rgba(255,88,88,.08), transparent 28%),
    linear-gradient(180deg, #0c101b 0%, #05070d 100%);
}

.shadowCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.alienStage{
  overflow:hidden;
  background:#120b0c;
}

.alienPaper,
.alienField,
.alienCore,
.alienMembrane,
.alienEye,
.alienPupil,
.alienTendril,
.alienSpore{
  position:absolute;
}

.alienPaper{
  inset:2.8vmin;
  border-radius:1.8vmin;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,231,216,.12), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(104,14,26,.18), transparent 52%),
    linear-gradient(180deg, #2a1116 0%, #14090c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 0 110px rgba(255,105,105,.08);
}

.alienPaper::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:
    radial-gradient(rgba(255,208,185,.06) .8px, transparent .8px),
    radial-gradient(rgba(99,18,27,.12) 1px, transparent 1px);
  background-size:4px 4px, 8px 8px;
  background-position:0 0, 2px 1px;
  mix-blend-mode:screen;
  opacity:.34;
}

.alienField{
  border-radius:50%;
  filter:blur(14px);
}

.alienField--a{
  left:50%;
  top:50%;
  width:82vmin;
  height:82vmin;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle, rgba(255,96,96,.22), rgba(255,96,96,0) 64%);
  animation:alienFieldPulse 3s ease-in-out infinite alternate;
}

.alienField--b{
  left:50%;
  top:50%;
  width:54vmin;
  height:54vmin;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle, rgba(255,194,150,.16), rgba(255,194,150,0) 60%);
  animation:alienFieldPulse 2.2s ease-in-out infinite alternate-reverse;
}

.alienCore{
  left:50%;
  top:50%;
  width:min(42vmin, 470px);
  height:min(54vmin, 600px);
  transform:translate(-50%, -52%);
  animation:alienCoreRise 4.2s cubic-bezier(.22,.72,.18,1) forwards;
}

.alienMembrane{
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border-radius:52% 48% 46% 54% / 40% 42% 58% 60%;
}

.alienMembrane--outer{
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,205,176,.28), transparent 18%),
    radial-gradient(circle at 64% 70%, rgba(85,7,18,.22), transparent 20%),
    linear-gradient(180deg, #f27773 0%, #b12939 56%, #63111f 100%);
  border:min(.9vmin, 11px) solid #21181a;
  box-shadow:
    0 0 0 min(.8vmin, 9px) rgba(237,118,129,.36),
    0 20px 44px rgba(0,0,0,.22);
}

.alienMembrane--inner{
  width:70%;
  height:68%;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,245,212,.32), transparent 22%),
    linear-gradient(180deg, rgba(255,183,129,.92) 0%, rgba(219,88,91,.92) 54%, rgba(118,19,33,.96) 100%);
  border:min(.8vmin, 9px) solid #21181a;
  box-shadow:inset 0 0 30px rgba(97,10,23,.3);
}

.alienEye{
  left:50%;
  top:42%;
  width:48%;
  height:22%;
  transform:translate(-50%, -50%);
  border:min(.8vmin, 9px) solid #21181a;
  border-radius:100px / 60px;
  background:linear-gradient(180deg, #fff0c5 0%, #f0b65d 100%);
  box-shadow:0 0 26px rgba(255,202,120,.16);
  z-index:2;
}

.alienPupil{
  left:50%;
  top:50%;
  width:24%;
  height:72%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,220,160,.34), transparent 18%),
    linear-gradient(180deg, #1b1113 0%, #6c101c 100%);
  animation:alienPupilNarrow 2.4s ease-in-out infinite alternate;
}

.alienTendril{
  bottom:8%;
  width:18%;
  height:34%;
  border:min(.75vmin, 8px) solid #21181a;
  border-top:none;
  border-radius:0 0 999px 999px;
  background:linear-gradient(180deg, #ca4d54 0%, #781729 100%);
  transform-origin:top center;
}

.alienTendril--a{
  left:12%;
  transform:rotate(22deg);
  animation:alienTendrilWaveA 2.6s ease-in-out infinite alternate;
}

.alienTendril--b{
  left:32%;
  height:30%;
  transform:rotate(8deg);
  animation:alienTendrilWaveB 2.8s ease-in-out infinite alternate;
}

.alienTendril--c{
  right:32%;
  height:30%;
  transform:rotate(-8deg);
  animation:alienTendrilWaveB 2.5s ease-in-out infinite alternate-reverse;
}

.alienTendril--d{
  right:12%;
  transform:rotate(-22deg);
  animation:alienTendrilWaveA 2.7s ease-in-out infinite alternate-reverse;
}

.alienSpore{
  width:min(6vmin, 64px);
  aspect-ratio:1;
  border:min(.6vmin, 7px) solid #21181a;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #ffe0b8 0%, #ee7f69 48%, #7a1626 100%);
  opacity:.9;
  animation:alienSporeDrift 3.4s ease-in-out infinite;
}

.alienSpore--a{
  left:20%;
  top:24%;
}

.alienSpore--b{
  right:20%;
  top:18%;
  width:min(4.8vmin, 52px);
  animation-delay:.6s;
}

.alienSpore--c{
  left:24%;
  bottom:20%;
  width:min(5.2vmin, 56px);
  animation-delay:1s;
}

.alienSpore--d{
  right:22%;
  bottom:24%;
  width:min(7vmin, 72px);
  animation-delay:.3s;
}

@keyframes alienFieldPulse{
  from{transform:translate(-50%, -50%) scale(.94); opacity:.46}
  to{transform:translate(-50%, -50%) scale(1.06); opacity:.82}
}

@keyframes alienCoreRise{
  0%{transform:translate(-50%, -46%) scale(.9); opacity:0}
  18%{opacity:1}
  100%{transform:translate(-50%, -52%) scale(1); opacity:1}
}

@keyframes alienPupilNarrow{
  from{transform:translate(-50%, -50%) scaleX(1)}
  to{transform:translate(-50%, -50%) scaleX(.74)}
}

@keyframes alienTendrilWaveA{
  from{transform:rotate(16deg)}
  to{transform:rotate(28deg)}
}

@keyframes alienTendrilWaveB{
  from{transform:rotate(2deg)}
  to{transform:rotate(12deg)}
}

@keyframes alienSporeDrift{
  0%, 100%{transform:translateY(0) scale(.92); opacity:.68}
  50%{transform:translateY(-12px) scale(1.04); opacity:1}
}

@media (max-width:980px){
  .rolesGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

}

@media (max-width:680px){
  .shell{
    width:min(100% - 18px, 1180px);
    padding:26px 0 34px;
  }

  .rolesGrid{
    grid-template-columns:1fr;
  }

  .rolePanel{
    padding:20px;
    margin:0 auto;
    min-height:calc(100dvh - 20px);
  }

  .backLink{
    position:sticky;
    bottom:0;
    padding:16px 0 max(6px, env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(6,10,24,0), rgba(6,10,24,.9) 28%, rgba(6,10,24,.98) 100%);
  }

}