:root{
  color-scheme:dark;
  --bg:#000000;
  --ink:#ecf0f7;
  --settled:#c3d9e6;   /* where a character lands after it has dimmed down */
  font-family:'Outfit','Century Gothic','Avenir Next',system-ui,sans-serif;
  font-synthesis:none;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);min-height:100svh;overflow:hidden}

/* The orb canvas clears to pure black, so the page stays pure black too and the
   canvas edges never show as a rectangle. Depth comes from the orb's own glow. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(70% 45% at 50% 44%,transparent 0%,transparent 55%,#00000055 100%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(to bottom,#ffffff07 0 1px,transparent 1px 3px);
  opacity:.35;mix-blend-mode:screen;
}

main{position:relative;z-index:1;max-width:1800px;margin:auto;padding:56px 52px 0;height:100svh;display:flex;flex-direction:column}

.stage{position:relative;flex:1 1 auto;min-height:0}
#orb{position:absolute;inset:0;overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:pan-y}
#status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;max-width:min(560px,88vw);font-size:13px;line-height:1.5;text-align:center;color:#bbc8dc}
#status:empty{display:none}

/* ---- Typewriter line ----------------------------------------------------
   .ghost holds the real text and reserves the final width, so the line never
   shifts while it fills in. .reveal is the animated copy laid over it.       */
.typeline{
  /* Pulled towards the orb with a transform, not a margin: the stage is a flex
     child that would otherwise grow into the freed space and resize the orb. */
  --lift:clamp(40px,12vh,150px);
  transform:translateY(calc(-1 * var(--lift)));
  flex:none;margin:0;padding:6px 0 4px;min-height:2.4em;
  display:flex;align-items:center;justify-content:center;
  font-weight:500;
  font-size:clamp(12px,2.1vw,27px);
  letter-spacing:.42em;
  text-indent:.42em; /* letter-spacing trails the last glyph; re-center the line */
  color:var(--settled);
}
.typewrap{position:relative;display:inline-block}
.ghost,.type{white-space:pre} /* only here: on .typeline it would render the markup's own indentation */
.reveal{display:none}
.js .reveal{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;display:flex;align-items:center}
.js .ghost{color:transparent} /* stays in the accessibility tree and keeps the width */

.type .ch{
  color:#fff;
  animation:ignite 1s cubic-bezier(.2,.62,.25,1) forwards;
}
@keyframes ignite{
  from{color:#fff;text-shadow:0 0 7px #ffffffd9,0 0 24px #b9e9ffa6,0 0 52px #3ba0ff73}
  to{color:var(--settled);text-shadow:0 0 12px #35b9ff2e}
}

.caret{
  display:inline-block;width:.5em;height:1.05em;flex:none;margin-left:.06em;margin-right:-.56em;
  background:linear-gradient(180deg,#ffffff,#7fd4ff);
  box-shadow:0 0 16px #8fdcffb0;
  transform:translateY(.12em);
  animation:blink 1.05s steps(1,end) infinite;
}
@keyframes blink{0%,54%{opacity:1}55%,100%{opacity:0}}
.typeline.done .caret{animation-duration:1.6s;opacity:.85}

footer{
  height:62px;flex:none;display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:9px;letter-spacing:2px;color:#5b6577;
}
footer .dot{width:3px;height:3px;border-radius:50%;background:#3d4757}

@media(max-width:850px){
  main{padding:40px 26px 0}
  .typeline{letter-spacing:.3em;text-indent:.3em}
}
@media(max-width:520px){
  main{padding:28px 18px 0}
  /* Portrait fits the orb to the width, which leaves more slack underneath. */
  .typeline{font-size:11px;letter-spacing:.22em;text-indent:.22em;--lift:clamp(60px,19vh,185px)}
  footer{height:52px;font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  .caret{animation:none}
  .type .ch{animation:none;color:var(--settled)}
  body::after{display:none}
}