:root{
  --p0-bg:#010306;
  --p0-cyan:#70efff;
  --p0-lime:#c7ff34;
  --p0-magenta:#ff4fd8;
  --p0-red:#ff4038;
  --p0-paper:#eefeff;
}
*{box-sizing:border-box}
.project0-runtime{
  position:fixed;inset:0;z-index:10000;overflow:hidden;
  background:#010306;color:var(--p0-paper);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  opacity:1;transition:opacity 1s cubic-bezier(.16,1,.3,1);
  contain:strict;
}
.project0-runtime.is-ending{opacity:0;pointer-events:none}
.project0-runtime canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.p0-ui{position:absolute;inset:0;pointer-events:none}
.p0-frame{position:absolute;inset:12px;border:1px solid rgba(145,245,255,.10)}
.p0-frame::before,.p0-frame::after{content:"";position:absolute;background:rgba(145,245,255,.055)}
.p0-frame::before{left:31%;top:0;width:1px;height:100%}
.p0-frame::after{left:0;top:74%;width:100%;height:1px}
.p0-meta,.p0-state,.p0-readout{
  position:absolute;z-index:4;font-size:9px;line-height:1.7;letter-spacing:.15em;
  color:rgba(220,252,255,.48)
}
.p0-meta{left:24px;top:22px}
.p0-state{right:24px;top:22px;text-align:right;color:rgba(118,245,255,.78)}
.p0-readout{left:24px;bottom:24px}
.p0-subtitle{
  position:absolute;z-index:4;left:50%;top:11%;transform:translateX(-50%);
  width:min(88vw,900px);text-align:center;font-size:9px;letter-spacing:.22em;
  color:rgba(220,252,255,.42)
}
.p0-center{position:absolute;inset:0;display:grid;place-items:center;z-index:5;pointer-events:none}
.p0-title{
  position:absolute;max-width:92vw;margin:0;text-align:center;
  font:700 clamp(42px,10vw,160px)/.82 Arial,sans-serif;
  letter-spacing:-.07em;color:#f4ffff;white-space:pre-line;
  opacity:0;filter:blur(18px);transform:translate3d(0,6vh,0) scale(.96);
}
.p0-title.show{animation:p0Title 3s cubic-bezier(.16,1,.3,1) both}
@keyframes p0Title{
  0%{opacity:0;filter:blur(18px);transform:translate3d(-4vw,7vh,0) scale(.95)}
  24%{opacity:1;filter:blur(0)}
  72%{opacity:.92;transform:translate3d(1vw,-1vh,0) scale(1.01)}
  100%{opacity:0;filter:blur(7px);transform:translate3d(5vw,-5vh,0) scale(1.04)}
}
.p0-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;z-index:6;background:var(--p0-lime);transform:scaleX(0);transform-origin:left}
.p0-scan{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--p0-cyan),transparent);opacity:.28;box-shadow:0 0 18px var(--p0-cyan);animation:p0scan 5.6s linear infinite}
@keyframes p0scan{from{transform:translateY(-12vh)}to{transform:translateY(112vh)}}
.p0-vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 34%,rgba(0,0,0,.8));pointer-events:none}
.p0-skip{
  position:absolute;right:24px;bottom:24px;z-index:8;
  border:1px solid rgba(125,240,255,.22);background:rgba(2,7,11,.52);
  color:rgba(225,252,255,.68);padding:10px 12px;
  font:9px ui-monospace,monospace;letter-spacing:.13em;cursor:pointer
}

/* Device-failure interlude */
.p0-failure{position:absolute;inset:0;z-index:7;opacity:0;pointer-events:none;overflow:hidden}
.project0-runtime.is-failing .p0-failure{opacity:1}
.p0-failure::before{
  content:"SYSTEM_RENDER_FAILURE / MEMORY ADDRESS 0x00000000";
  position:absolute;left:4vw;top:44%;right:4vw;color:#fff;
  font:700 clamp(12px,2vw,28px)/1.1 ui-monospace,monospace;
  letter-spacing:.12em;text-shadow:-5px 0 #ff245f,5px 0 #16dfff;
  animation:p0FailureText .17s steps(2,end) infinite
}
.p0-failure::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgba(255,0,70,.18),transparent 32%,rgba(0,220,255,.2));
  mix-blend-mode:screen;animation:p0FailureLayer .12s steps(2,end) infinite
}
.project0-runtime.is-failing canvas{filter:contrast(1.8) saturate(2.2);animation:p0CanvasFailure .14s steps(2,end) infinite}
.project0-runtime.is-failing .p0-ui:not(.p0-failure){animation:p0UiFailure .11s steps(2,end) infinite}
@keyframes p0FailureText{
  0%{transform:translate3d(-2vw,-4px,0) skewX(-8deg);clip-path:inset(0 0 58% 0)}
  50%{transform:translate3d(3vw,7px,0) skewX(10deg);clip-path:inset(43% 0 0 0)}
  100%{transform:translate3d(-1vw,1px,0);clip-path:inset(12% 0 18% 0)}
}
@keyframes p0FailureLayer{
  0%{transform:translateY(-4%)}50%{transform:translateY(3%)}100%{transform:translateY(-1%)}
}
@keyframes p0CanvasFailure{
  0%{transform:translate3d(-8px,2px,0) scale(1.01)}
  50%{transform:translate3d(11px,-4px,0) scale(1.025)}
  100%{transform:translate3d(-3px,5px,0) scale(1.008)}
}
@keyframes p0UiFailure{
  0%{transform:translateX(-5px)}50%{transform:translateX(9px)}100%{transform:translateX(-2px)}
}

body.runtime-running{overflow:hidden!important}
body.runtime-running>.observation-entry,
body.runtime-running>.limited-banner,
body.runtime-running>.player-center-button,
body.runtime-running>.observation-nav{visibility:hidden!important}

@media(max-width:700px){
  .p0-frame{inset:6px}
  .p0-meta{left:14px;top:13px;font-size:7px;max-width:54vw}
  .p0-state{right:14px;top:13px;font-size:7px;max-width:40vw}
  .p0-readout{left:14px;bottom:14px;font-size:7px}
  .p0-skip{right:14px;bottom:14px}
  .p0-title{font-size:clamp(44px,17vw,94px);max-width:94vw}
  .p0-subtitle{top:9%;font-size:7px}
}
