:root{
  --fit-size: 74px;
  --fit-size-secondary: 27px;
  --text-color: #ffffff;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:#070913;
}
body{
  min-height:100svh;
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.experience{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#070913;
}
.scene{
  position:absolute;
  inset:-8%;
  opacity:0;
  transform:scale(1.03);
  transition:opacity 3.6s ease, transform 4.2s ease, filter 3.6s ease;
  pointer-events:none;
  filter:saturate(.98) brightness(.98);
}
.scene.is-active{
  opacity:1;
  transform:scale(1);
  filter:saturate(1) brightness(1);
}
.scene > *{position:absolute}
.sky{inset:0; z-index:-12}
.sky-1{
  background:
    radial-gradient(1100px 620px at 50% 14%, rgba(76,93,156,.18), rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#10182f 0%, #0a1020 48%, #060912 100%);
}
.sky-2{
  background:
    radial-gradient(980px 520px at 50% 18%, rgba(116,102,193,.18), rgba(255,255,255,0) 58%),
    linear-gradient(180deg,#111730 0%, #0b1024 50%, #050812 100%);
}
.sky-3{
  background:
    radial-gradient(1000px 560px at 50% 20%, rgba(144,98,144,.14), rgba(255,255,255,0) 56%),
    linear-gradient(180deg,#15162d 0%, #0d1020 52%, #060810 100%);
}
.sky-4{
  background:
    radial-gradient(980px 540px at 50% 16%, rgba(84,120,198,.14), rgba(255,255,255,0) 56%),
    linear-gradient(180deg,#0f1530 0%, #0b1024 50%, #050711 100%);
}
.global-vignette{
  position:absolute;
  inset:0;
  z-index:80;
  pointer-events:none;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 28%, rgba(0,0,0,.34) 100%);
}
.global-noise{
  position:absolute;
  inset:0;
  z-index:79;
  pointer-events:none;
  background-image:url("noise.svg");
  background-size:180px 180px;
  opacity:.10;
  mix-blend-mode:screen;
}

/* Main card */
.content-shell{
  position:relative;
  z-index:90;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:18px;
}
.content-card{
  width:min(1280px, 95vw);
  min-height:min(420px, 76svh);
  max-height:95svh;
  display:grid;
  grid-template-rows:1fr auto auto;
  gap:12px;
  padding:clamp(18px, 2.6vw, 28px);
  border-radius:36px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(7,10,18,.42);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  box-shadow:
    0 38px 120px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 80px rgba(105,122,255,.04);
  position:relative;
  overflow:hidden;
}
.card-scrim{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(900px 420px at 50% 42%, rgba(0,0,0,.32), rgba(0,0,0,.08) 58%, rgba(0,0,0,.02) 74%),
    linear-gradient(180deg, rgba(8,12,20,.12), rgba(8,12,20,.18));
  pointer-events:none;
}
.text-box{
  width:100%;
  max-width:min(1080px, 88vw);
  max-height:68svh;
  min-height:0;
  display:grid;
  place-items:center;
  margin:0 auto;
  overflow:hidden;
  position:relative;
  z-index:2;
}
.message-stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:min(320px, 60svh);
  display:grid;
  place-items:center;
}
.quote,
.hidden-message{
  width:100%;
  margin:0;
  text-align:center;
  color:var(--text-color);
  text-wrap:balance;
  text-shadow:
    0 2px 22px rgba(0,0,0,.26),
    0 14px 44px rgba(0,0,0,.28),
    0 0 1px rgba(0,0,0,.28);
}
.quote{
  font-size:var(--fit-size);
  line-height:.96;
  letter-spacing:-.058em;
  font-weight:680;
  transition:opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
}
.quote span{
  display:block;
}
.quote span + span{
  margin-top:.16em;
}
.quote.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}
.quote.is-hidden{
  opacity:0;
  transform:scale(.96) translateY(-10px);
  filter:blur(10px);
  pointer-events:none;
}

.hidden-message{
  position:absolute;
  inset:0;
  display:grid;
  align-content:center;
  gap:.8em;
  font-size:var(--fit-size-secondary);
  line-height:1.3;
  letter-spacing:-.022em;
  font-weight:520;
  opacity:0;
  transform:translateY(16px) scale(.98);
  filter:blur(16px);
  transition:opacity 1.6s ease, transform 1.6s ease, filter 1.6s ease;
  overflow:auto;
  padding:8px 0;
}
.hidden-message p{
  margin:0;
}
.hidden-message.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}
.hidden-message::-webkit-scrollbar{
  width:0;height:0;
}

.secret-prompt{
  position:relative;
  z-index:5;
  width:min(760px, 88vw);
  margin:0 auto;
  min-height:1.5em;
  text-align:center;
  color:rgba(226,234,255,.90);
  font-size:1rem;
  line-height:1.35;
  letter-spacing:-.01em;
  opacity:0;
  transform:translateY(10px);
  filter:blur(12px);
  transition:opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
  pointer-events:none;
}
.secret-prompt.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

/* Console */
.console-wrap{
  position:relative;
  z-index:5;
  width:min(720px, 88vw);
  margin:0 auto;
  display:grid;
  gap:10px;
  text-align:center;
  padding-top:4px;
}
.console-label{
  color:rgba(255,255,255,.74);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.72rem;
}
.console-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
.console-input{
  width:100%;
  min-width:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  outline:none;
  padding:15px 18px;
  font-size:1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.console-input::placeholder{
  color:rgba(255,255,255,.45);
}
.console-input:focus{
  border-color:rgba(195,215,255,.36);
  background:rgba(255,255,255,.10);
  box-shadow:0 0 0 6px rgba(130,168,255,.08), inset 0 1px 0 rgba(255,255,255,.08);
}
.console-button{
  border:0;
  border-radius:999px;
  padding:0 20px;
  min-height:50px;
  color:#fff;
  font-weight:600;
  font-size:1rem;
  background:linear-gradient(180deg, rgba(138,173,255,.88), rgba(94,125,234,.88));
  box-shadow:0 14px 28px rgba(70,97,199,.26), inset 0 1px 0 rgba(255,255,255,.26);
  cursor:pointer;
  transition:transform .25s ease, filter .25s ease;
}
.console-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}
.console-response{
  min-height:1.4em;
  color:rgba(255,255,255,.82);
  font-size:.98rem;
  line-height:1.35;
}
.console-response.is-soft{
  color:rgba(255,255,255,.82);
}
.console-response.is-secret{
  color:rgba(222,230,255,.96);
}

/* Dots */
.scene-dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:95;
}
.dot{
  width:9px;height:9px;border-radius:999px;border:0;padding:0;
  background:rgba(255,255,255,.26);
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
.dot.is-active{
  width:22px;
  background:rgba(255,255,255,.92);
}

/* Burst effect */
.burst{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:visible;
}
.burst-particle{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.96), rgba(184,210,255,.54) 52%, rgba(255,255,255,0) 74%);
  box-shadow:0 0 18px rgba(255,255,255,.24), 0 0 32px rgba(165,179,255,.18);
  animation:burstOut 1.4s cubic-bezier(.19,1,.22,1) forwards;
}

/* Celestial elements */
.moon,.aurora,.glow,.flare{
  border-radius:50%;
  mix-blend-mode:screen;
}
.moon{
  filter:blur(.08px);
}
.moon-1{
  width:min(112px, 11vw); height:min(112px, 11vw);
  top:10%; right:15%;
  background:radial-gradient(circle at 38% 38%, rgba(255,255,255,.98), rgba(216,231,255,.88) 46%, rgba(216,231,255,0) 70%);
  box-shadow:0 0 30px rgba(190,219,255,.10);
  animation:moonFloatA 20s ease-in-out infinite alternate;
}
.moon-2{
  width:min(94px, 10vw); height:min(94px, 10vw);
  top:12%; left:13%;
  background:radial-gradient(circle at 38% 38%, rgba(255,255,255,.98), rgba(216,231,255,.88) 46%, rgba(216,231,255,0) 70%);
  box-shadow:0 0 28px rgba(190,219,255,.10);
  animation:moonFloatB 18s ease-in-out infinite alternate;
}
.moon-3{
  width:min(84px, 9vw); height:min(84px, 9vw);
  top:14%; right:20%;
  background:radial-gradient(circle at 38% 38%, rgba(255,255,255,.98), rgba(216,231,255,.82) 46%, rgba(216,231,255,0) 70%);
  box-shadow:0 0 24px rgba(190,219,255,.10);
  animation:moonFloatA 22s ease-in-out infinite alternate;
}
.moon-4{
  width:min(102px, 10vw); height:min(102px, 10vw);
  top:11%; left:18%;
  background:radial-gradient(circle at 38% 38%, rgba(255,255,255,.98), rgba(216,231,255,.84) 46%, rgba(216,231,255,0) 70%);
  box-shadow:0 0 28px rgba(190,219,255,.10);
  animation:moonFloatB 19s ease-in-out infinite alternate;
}
.aurora{
  filter:blur(58px);
}
.aurora-a{
  width:min(540px, 50vw); height:min(280px, 26vw);
  left:6%; top:12%;
  background:radial-gradient(circle, rgba(96,141,255,.18), rgba(96,141,255,.04) 55%, rgba(96,141,255,0) 74%);
  animation:auroraMoveA 20s ease-in-out infinite alternate;
}
.aurora-b{
  width:min(520px, 48vw); height:min(260px, 24vw);
  right:8%; bottom:10%;
  background:radial-gradient(circle, rgba(206,138,255,.14), rgba(206,138,255,.04) 55%, rgba(206,138,255,0) 74%);
  animation:auroraMoveB 24s ease-in-out infinite alternate;
}

/* Rings / orbits */
.orbital,.halo,.pulse{
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.orbital{
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 18px rgba(255,255,255,.04), 0 0 22px rgba(126,168,255,.06);
}
.orbital::after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  top:50%;left:100%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.96), rgba(194,223,255,.42) 48%, rgba(255,255,255,0) 74%);
  box-shadow:0 0 12px rgba(255,255,255,.18), 0 0 18px rgba(124,179,255,.12);
}
.orbital-lg{width:min(960px, 86vw); aspect-ratio:1/1; animation:spinA 52s linear infinite}
.orbital-md{width:min(700px, 64vw); aspect-ratio:1/1; animation:spinB 36s linear infinite}
.orbital-sm{width:min(480px, 44vw); aspect-ratio:1/1; animation:spinC 22s linear infinite}
.orbital-night-lg{width:min(980px, 88vw); aspect-ratio:1/1; animation:spinA 58s linear infinite}
.orbital-night-md{width:min(660px, 60vw); aspect-ratio:1/1; animation:spinB 40s linear infinite}
.halo{
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 14px rgba(255,255,255,.02), 0 0 18px rgba(255,255,255,.05);
}
.halo-a{width:min(980px, 88vw); aspect-ratio:1/1; animation:spinA 44s linear infinite}
.halo-b{width:min(640px, 58vw); aspect-ratio:1/1; animation:spinB 28s linear infinite; border-color:rgba(208,180,255,.10)}
.sweep{
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.sweep::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,0), rgba(154,186,255,.22), rgba(255,255,255,0) 28%, rgba(255,255,255,0));
  filter:blur(12px);
}
.sweep-a{
  width:min(980px, 88vw); height:min(980px, 88vw);
  mask-image:radial-gradient(circle, transparent 60%, black 63%, black 65%, transparent 68%);
  -webkit-mask-image:radial-gradient(circle, transparent 60%, black 63%, black 65%, transparent 68%);
  animation:spinA 20s linear infinite;
}
.sweep-b{
  width:min(640px, 58vw); height:min(640px, 58vw);
  mask-image:radial-gradient(circle, transparent 56%, black 59%, black 61%, transparent 64%);
  -webkit-mask-image:radial-gradient(circle, transparent 56%, black 59%, black 61%, transparent 64%);
  animation:spinB 15s linear infinite;
}
.sweep-b::before{
  background:conic-gradient(from 0deg, rgba(255,255,255,0), rgba(219,168,255,.20), rgba(255,255,255,0) 28%, rgba(255,255,255,0));
}
.pulse{
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 16px rgba(255,255,255,.02), 0 0 20px rgba(255,255,255,.05);
}
.pulse-a{width:min(960px, 86vw); aspect-ratio:1/1; animation:pulseRingA 12s ease-in-out infinite, spinA 54s linear infinite}
.pulse-b{width:min(640px, 58vw); aspect-ratio:1/1; animation:pulseRingB 9s ease-in-out infinite, spinB 34s linear infinite; border-color:rgba(209,171,255,.10)}

/* Light effects */
.glow,.flare{
  filter:blur(56px);
}
.glow-blue{
  width:min(400px, 36vw); height:min(400px, 36vw);
  right:8%; top:24%;
  background:radial-gradient(circle, rgba(106,145,255,.20), rgba(106,145,255,.05) 46%, rgba(106,145,255,0) 72%);
  animation:glowMoveA 20s ease-in-out infinite alternate;
}
.glow-violet{
  width:min(360px, 34vw); height:min(360px, 34vw);
  left:14%; bottom:10%;
  background:radial-gradient(circle, rgba(203,152,255,.16), rgba(203,152,255,.04) 46%, rgba(203,152,255,0) 72%);
  animation:glowMoveB 24s ease-in-out infinite alternate;
}
.glow-rose{
  width:min(360px, 34vw); height:min(360px, 34vw);
  right:10%; bottom:8%;
  background:radial-gradient(circle, rgba(246,161,205,.14), rgba(246,161,205,.04) 46%, rgba(246,161,205,0) 72%);
  animation:glowMoveA 22s ease-in-out infinite alternate;
}
.flare{
  mix-blend-mode:screen;
}
.flare-a{
  width:min(360px, 32vw); height:min(360px, 32vw);
  left:18%; top:54%;
  background:radial-gradient(circle, rgba(100,142,255,.14), rgba(100,142,255,.04) 50%, rgba(100,142,255,0) 72%);
  animation:glowMoveA 20s ease-in-out infinite alternate;
}
.flare-b{
  width:min(300px, 28vw); height:min(300px, 28vw);
  right:18%; top:22%;
  background:radial-gradient(circle, rgba(247,157,208,.12), rgba(247,157,208,.04) 50%, rgba(247,157,208,0) 72%);
  animation:glowMoveB 18s ease-in-out infinite alternate;
}
.flare-c{
  width:min(320px, 30vw); height:min(320px, 30vw);
  left:50%; bottom:4%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(171,152,255,.12), rgba(171,152,255,.04) 50%, rgba(171,152,255,0) 72%);
  animation:glowPulse 16s ease-in-out infinite alternate;
}
.veil{
  filter:blur(36px);
}
.veil-a{
  width:min(900px, 82vw); height:min(220px, 18vw);
  left:50%; top:54%; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(205,178,255,.12), rgba(255,255,255,0));
  animation:veilMoveA 18s ease-in-out infinite alternate;
}
.veil-b{
  width:min(820px, 74vw); height:min(180px, 16vw);
  left:50%; bottom:12%; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(124,162,255,.10), rgba(255,255,255,0));
  animation:veilMoveB 20s ease-in-out infinite alternate;
}
.beam,.comet,.lattice{
  height:2px;
  border-radius:999px;
}
.beam,.comet{
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.52), rgba(255,255,255,0));
}
.beam::after,.comet::after,.lattice::after{
  content:"";
  position:absolute;
  inset:-6px 0;
  background:inherit;
  filter:blur(14px);
  opacity:.36;
}
.beam-a{
  width:min(1000px, 92vw); left:50%; top:50%; transform:translate(-50%,-50%) rotate(16deg);
  opacity:.12; animation:beamShiftA 20s ease-in-out infinite;
}
.beam-b{
  width:min(920px, 84vw); left:50%; top:50%; transform:translate(-50%,-50%) rotate(-24deg);
  opacity:.10; animation:beamShiftB 18s ease-in-out infinite;
}
.comet{
  width:min(210px, 20vw);
  opacity:.20;
}
.comet-a{right:12%; top:24%; transform:rotate(-14deg); animation:cometA 16s ease-in-out infinite}
.comet-b{left:12%; bottom:20%; transform:rotate(24deg); animation:cometB 18s ease-in-out infinite}
.comet-c{left:44%; top:18%; transform:rotate(-40deg); animation:cometC 15s ease-in-out infinite}
.lattice{
  width:min(1100px, 102vw);
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(160,188,255,.20), rgba(255,255,255,0));
  opacity:.16;
}
.lattice-a{ transform:translate(-50%,-50%) rotate(0deg); animation:latticeA 18s ease-in-out infinite; }
.lattice-b{ transform:translate(-50%,-50%) rotate(90deg); animation:latticeB 18s ease-in-out infinite; opacity:.12; }

/* Stars */
.stars{
  inset:0;
}
.star{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 10px rgba(255,255,255,.14), 0 0 16px rgba(138,187,255,.08);
  opacity:.16;
}
.s1{left:12%;top:18%;animation:twinkleA 9s ease-in-out infinite}
.s2{left:26%;top:12%;animation:twinkleB 11s ease-in-out infinite}
.s3{left:42%;top:20%;animation:twinkleA 10s ease-in-out infinite}
.s4{left:64%;top:10%;animation:twinkleB 12s ease-in-out infinite}
.s5{left:82%;top:22%;animation:twinkleA 9.5s ease-in-out infinite}
.s6{left:78%;top:48%;animation:twinkleB 10.5s ease-in-out infinite}
.s7{left:20%;top:56%;animation:twinkleA 11.5s ease-in-out infinite}
.s8{left:58%;top:64%;animation:twinkleB 8.8s ease-in-out infinite}

/* Keyframes */
@keyframes spinA{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spinB{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
@keyframes spinC{0%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.02)}100%{transform:translate(-50%,-50%) rotate(360deg) scale(1)}}
@keyframes moonFloatA{from{transform:translateY(-.6vh)}to{transform:translateY(1vh)}}
@keyframes moonFloatB{from{transform:translateY(.8vh)}to{transform:translateY(-1vh)}}
@keyframes auroraMoveA{from{transform:translate(-1vw,-1vh) scale(.96)}to{transform:translate(2vw,2vh) scale(1.06)}}
@keyframes auroraMoveB{from{transform:translate(2vw,1vh) scale(1)}to{transform:translate(-2vw,-1.5vh) scale(1.07)}}
@keyframes glowMoveA{from{transform:translate(-1vw,-1vh) scale(.97)}to{transform:translate(1.5vw,1.5vh) scale(1.06)}}
@keyframes glowMoveB{from{transform:translate(1.5vw,1vh) scale(1)}to{transform:translate(-1.5vw,-1.5vh) scale(1.05)}}
@keyframes glowPulse{from{transform:translateX(-50%) scale(.96);opacity:.10}to{transform:translateX(-50%) scale(1.04);opacity:.18}}
@keyframes veilMoveA{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-1vh)}}
@keyframes veilMoveB{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(1vh)}}
@keyframes beamShiftA{0%,100%{opacity:.08}50%{opacity:.14}}
@keyframes beamShiftB{0%,100%{opacity:.07}50%{opacity:.12}}
@keyframes cometA{0%,100%{transform:translate(0,0) rotate(-14deg);opacity:.04}50%{transform:translate(-70px,12px) rotate(-14deg);opacity:.18}}
@keyframes cometB{0%,100%{transform:translate(0,0) rotate(24deg);opacity:.04}50%{transform:translate(72px,-14px) rotate(24deg);opacity:.18}}
@keyframes cometC{0%,100%{transform:translate(0,0) rotate(-40deg);opacity:.04}50%{transform:translate(36px,54px) rotate(-40deg);opacity:.16}}
@keyframes latticeA{0%,100%{transform:translate(-50%,-50%) rotate(0deg) scaleX(.88)}50%{transform:translate(-50%,-50%) rotate(30deg) scaleX(1)}}
@keyframes latticeB{0%,100%{transform:translate(-50%,-50%) rotate(90deg) scaleX(.82)}50%{transform:translate(-50%,-50%) rotate(130deg) scaleX(1)}}
@keyframes twinkleA{0%,100%{opacity:.10;transform:scale(1)}50%{opacity:.28;transform:scale(1.42)}}
@keyframes twinkleB{0%,100%{opacity:.09;transform:scale(.95)}50%{opacity:.24;transform:scale(1.34)}}
@keyframes pulseRingA{0%,100%{opacity:.08;scale:1}50%{opacity:.16;scale:1.025}}
@keyframes pulseRingB{0%,100%{opacity:.08;scale:1}50%{opacity:.15;scale:1.04}}
@keyframes burstOut{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) translate(0,0) scale(.3);
  }
  15%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) translate(var(--tx), var(--ty)) scale(1.55);
  }
}

/* Responsive */
@media (max-width:900px){
  .content-card{
    width:min(96vw, 780px);
    min-height:min(440px, 82svh);
    max-height:95svh;
    padding:18px 16px;
    border-radius:28px;
  }
  .text-box{
    max-width:min(92vw, 720px);
    max-height:66svh;
  }
  .console-wrap{
    width:min(92vw, 720px);
  }
}
@media (max-width:560px){
  .content-shell{
    padding:12px;
  }
  .content-card{
    width:96vw;
    min-height:470px;
    max-height:96svh;
    padding:16px 12px;
    border-radius:22px;
  }
  .text-box{
    max-width:90vw;
    max-height:62svh;
  }
  .message-stage{
    min-height:min(280px, 52svh);
  }
  .console-form{
    grid-template-columns:1fr;
  }
  .console-button{
    min-height:48px;
  }
  .quote{
    line-height:.98;
    letter-spacing:-.05em;
  }
  .quote span + span{
    margin-top:.18em;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition:none!important;
  }
}

@media (max-width:560px){
  .secret-prompt{
    width:min(90vw, 720px);
    font-size:.95rem;
  }
}