:root {
  color-scheme: dark;
  --ink: #050608;
  --silver: #edf1f8;
}
* {box-sizing: border-box}
html,body {width:100%;height:100%;margin:0;background:var(--ink);color:var(--silver)}
body {font-family:Arial,Helvetica,sans-serif;overflow:hidden;-webkit-tap-highlight-color:transparent}
.stage {position:relative;width:100%;height:100svh;height:100dvh;min-height:280px;overflow:hidden;isolation:isolate}
.prism {position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease-out}
.prism[data-ready="true"] {opacity:1}
.prism canvas {width:100%;height:100%;display:block}
.veil {position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(5,6,8,.12)}
.wordmark {position:absolute;z-index:2;left:50%;top:52%;width:min(78vw,1120px);height:clamp(180px,34vw,460px);transform:translate(-50%,-50%)}
.ascii {position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;filter:drop-shadow(0 3px 25px rgba(5,6,8,.45))}
.fallback {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;color:var(--silver);font-size:clamp(42px,11.5vw,170px);font-weight:700;line-height:1;letter-spacing:-.045em;white-space:nowrap;pointer-events:none;transition:opacity .22s ease-out}
.ascii[data-ready="true"] + .fallback {opacity:0}
.motion-control {position:absolute;z-index:3;right:max(24px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(237,241,248,.08);border-radius:50%;background:rgba(5,6,8,.12);color:rgba(237,241,248,.45);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.motion-control[hidden] {display:none}
.motion-control:hover {color:#edf1f8;border-color:rgba(237,241,248,.26);background:rgba(237,241,248,.04)}
.motion-control:focus-visible {outline:2px solid #c6dcff;outline-offset:4px;color:#edf1f8}
.play-icon {display:none}
.motion-control[aria-pressed="true"] .pause-icon {display:none}
.motion-control[aria-pressed="true"] .play-icon {display:block}
@media(max-width:700px) {
  .wordmark {width:94vw;height:260px;top:51%}
  .fallback {font-size:13.4vw;letter-spacing:-.04em}
  .motion-control {right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
  .prism[data-ready="true"] {opacity:1}
}
@media(max-height:500px) and (min-width:701px) {
  .wordmark {width:min(72vw,800px);height:240px}
  .fallback {font-size:10vw}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {transition:none!important;animation:none!important}
}