:root {
  color-scheme: dark;
  --red: #ff1734;
  --blood: #a4001b;
  --white: #f1eeee;
  --black: #000;
  font-family: "Cascadia Mono", "Lucida Console", "Courier New", monospace;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  position: relative;
  color: var(--white);
  isolation: isolate;
  cursor: crosshair;
}

button,
input { font: inherit; }

button { cursor: pointer; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.matrix-wall,
.radial-field,
.hex-field,
.scanlines,
.tracking-band,
.pulse-wave,
.screen-frame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.matrix-wall {
  z-index: -8;
  display: block;
  background: #000;
  opacity: .9;
  transition: opacity 900ms ease;
}

.radial-field {
  z-index: -7;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 0, 38, .19) 0, rgba(119, 0, 22, .12) 23%, rgba(28, 0, 7, .57) 57%, rgba(0, 0, 0, .91) 100%),
    linear-gradient(to bottom, rgba(35, 0, 7, .2), rgba(0, 0, 0, .56));
}

.hex-field {
  z-index: -5;
  inset: -10%;
  width: 120%;
  height: 120%;
  opacity: .13;
  background-image:
    linear-gradient(30deg, rgba(255, 42, 64, .52) 12%, transparent 12.5%, transparent 87%, rgba(255, 42, 64, .52) 87.5%, rgba(255, 42, 64, .52)),
    linear-gradient(150deg, rgba(255, 42, 64, .52) 12%, transparent 12.5%, transparent 87%, rgba(255, 42, 64, .52) 87.5%, rgba(255, 42, 64, .52)),
    linear-gradient(30deg, rgba(255, 42, 64, .52) 12%, transparent 12.5%, transparent 87%, rgba(255, 42, 64, .52) 87.5%, rgba(255, 42, 64, .52)),
    linear-gradient(150deg, rgba(255, 42, 64, .52) 12%, transparent 12.5%, transparent 87%, rgba(255, 42, 64, .52) 87.5%, rgba(255, 42, 64, .52)),
    linear-gradient(60deg, rgba(255, 42, 64, .3) 25%, transparent 25.5%, transparent 75%, rgba(255, 42, 64, .3) 75%, rgba(255, 42, 64, .3));
  background-position: 0 0, 0 0, 38px 66px, 38px 66px, 0 0;
  background-size: 76px 132px;
  filter: blur(.2px);
  mask-image: radial-gradient(circle at center, #000 0 22%, rgba(0,0,0,.7) 56%, transparent 92%);
  animation: shieldBreathe 7s ease-in-out infinite;
}

.scanlines {
  z-index: 30;
  opacity: .29;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .62) 3px 4px);
}

.tracking-band {
  z-index: 29;
  top: -18%;
  height: 17%;
  opacity: .16;
  background: linear-gradient(to bottom, transparent, rgba(255, 20, 47, .22), rgba(255,255,255,.1), transparent);
  filter: blur(4px);
  animation: trackingRoll 8.5s linear infinite;
}

.screen-frame {
  z-index: 40;
  box-shadow:
    inset 0 0 10vw 5vw #000,
    inset 0 0 2vw rgba(255, 0, 37, .18),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.pulse-wave {
  z-index: 25;
  left: 50%;
  top: 50%;
  width: 22vmin;
  height: 22vmin;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.03);
  background: radial-gradient(circle,
    transparent 0 38%,
    rgba(255, 0, 40, .02) 43%,
    rgba(255, 26, 58, .14) 52%,
    rgba(255, 255, 255, .05) 58%,
    rgba(124, 0, 28, .07) 65%,
    transparent 76%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

.pulse-wave.active {
  animation: circularEcho 2.25s cubic-bezier(.08,.62,.14,1) both;
}

.experience {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
}

.start-screen,
.access-screen,
.transmission-screen,
.terminal-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.start-screen {
  display: grid;
  place-items: center;
}

.start-button {
  position: relative;
  min-width: clamp(250px, 30vw, 470px);
  min-height: clamp(78px, 11vh, 118px);
  border: 1px solid rgba(247, 247, 247, .82);
  padding: 22px 42px;
  color: #f7f7f7;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 18% 82%, rgba(255,255,255,.035)),
    rgba(0,0,0,.88);
  box-shadow:
    0 0 0 1px #000,
    0 0 30px rgba(255,255,255,.07),
    0 0 70px rgba(255, 0, 34, .11),
    inset 0 0 28px rgba(255,255,255,.025);
  font-size: clamp(18px, 2.2vw, 31px);
  font-weight: 800;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  transition: color 180ms, border-color 180ms, box-shadow 180ms, transform 180ms;
}

.start-button::before,
.start-button::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: scaleX(.3);
  transition: transform 260ms ease;
}

.start-button::before { top: 10px; }
.start-button::after { bottom: 10px; }

.start-button:hover,
.start-button:focus-visible {
  color: #fff;
  border-color: #fff;
  outline: none;
  transform: scale(1.015);
  box-shadow:
    0 0 0 1px #000,
    0 0 24px rgba(255,255,255,.15),
    0 0 90px rgba(255, 0, 34, .23),
    inset 0 0 32px rgba(255,255,255,.055);
}

.start-button:hover::before,
.start-button:hover::after,
.start-button:focus-visible::before,
.start-button:focus-visible::after { transform: scaleX(1); }

.start-button__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--white);
}

.start-button__corner--one {
  top: -5px;
  left: -5px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.start-button__corner--two {
  right: -5px;
  bottom: -5px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

body.starting .start-button {
  pointer-events: none;
  animation: startActivation 820ms steps(8) both;
}

body.starting .experience {
  transform-origin: 50% 50%;
  animation: initializeJitter 820ms steps(1, end) both;
}

.access-screen {
  visibility: hidden;
  opacity: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(20px, 4vw, 54px) clamp(22px, 6vw, 92px);
}

body.access-active .start-screen { display: none; }

body.access-active .access-screen {
  visibility: visible;
  opacity: 1;
  animation: accessMaterialize 900ms steps(9) both;
}

.node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding: 0 1px 13px;
  color: rgba(244, 240, 240, .68);
  font-size: clamp(8px, .75vw, 11px);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.node-header p {
  position: relative;
  margin: 0;
}

.node-header span { color: rgba(255, 31, 56, .66); }

.authentication-core {
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(28px, 6vh, 70px);
  transform: translateY(-2vh);
}

.signature-control {
  position: relative;
  width: clamp(105px, 14vw, 178px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  filter:
    drop-shadow(0 20px 18px rgba(0, 0, 0, .98))
    drop-shadow(0 0 32px rgba(0, 0, 0, .92))
    drop-shadow(0 0 9px rgba(255, 0, 35, .28));
}

.signature-control img,
.terminal-signature img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0, 57% 18%, 79% 18%, 84% 39%, 100% 65%, 70% 95%, 38% 95%, 9% 65%, 20% 39%, 24% 18%, 44% 18%);
  user-select: none;
  pointer-events: none;
}

.signature-control img {
  filter:
    drop-shadow(0 14px 12px rgba(0,0,0,.94))
    drop-shadow(0 0 22px rgba(0,0,0,.84));
}

.signature-halo,
.terminal-halo {
  position: absolute;
  z-index: 1;
  inset: 7%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,0,34,.32), rgba(119,0,21,.12) 45%, transparent 72%);
  filter: blur(12px);
  animation: signatureBreathe 3.8s ease-in-out infinite;
}

.signature-control::before,
.signature-control::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -9%;
  border: 1px solid rgba(255,255,255,.16);
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
  opacity: .45;
  transition: transform 420ms ease, opacity 300ms, border-color 300ms;
}

.signature-control::after {
  inset: -18%;
  border-color: rgba(255, 0, 34, .2);
  transform: rotate(22.5deg);
}

.signature-control:hover::before,
.signature-control:focus-visible::before {
  opacity: .82;
  border-color: rgba(255,255,255,.5);
  transform: scale(1.05);
}

body.override-armed .signature-control::before {
  border-color: var(--red);
  opacity: 1;
  transform: scale(.92);
  animation:
    overrideWindowRotate 1.45s cubic-bezier(.16,1,.3,1) both,
    overrideWindowPulse 2s linear both;
}

body.override-armed .signature-control::after {
  opacity: .8;
  transform: rotate(22.5deg) scale(1.05);
  animation: overrideWindowOuter 2s linear both;
}

body.override-armed .signature-control img {
  transform-origin: 50% 50%;
  animation: overrideSignaturePulse 2s ease-in-out both;
}

.password-form {
  position: relative;
  width: min(620px, 80vw);
  height: clamp(76px, 11vh, 112px);
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.84);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 0 0 1px #000,
    0 0 36px rgba(255,255,255,.055),
    0 0 80px rgba(255, 0, 34, .09),
    inset 0 0 30px rgba(255,255,255,.025);
}

body.access-intro .password-form {
  transform-origin: 50% 50%;
  animation: passwordMaterialize 1.08s steps(1, end) both;
}

.password-form::before,
.password-form::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(22px, 6vw, 86px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55));
}

.password-form::before { right: 100%; }
.password-form::after { left: 100%; transform: rotate(180deg); }

.input-glitch-bar {
  position: absolute;
  z-index: 5;
  left: -18%;
  right: -18%;
  top: 50%;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0 3%,
    rgba(255,0,34,.18) 9%,
    rgba(255,0,34,.94) 27%,
    #fff 46% 54%,
    rgba(255,0,34,.94) 73%,
    rgba(255,0,34,.18) 91%,
    transparent 97% 100%);
  box-shadow:
    0 0 2px rgba(255,255,255,.95),
    0 0 13px rgba(255,0,34,.94),
    0 0 38px rgba(255,0,34,.58),
    0 -12px 30px rgba(255,0,34,.2),
    0 12px 30px rgba(255,0,34,.2);
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
}

body.access-intro .input-glitch-bar {
  animation: passwordBarTear 1.08s steps(1, end) both;
}

.password-form input {
  width: calc(100% - 42px);
  height: calc(100% - 22px);
  border: 0;
  outline: 0;
  padding: 0 22px;
  color: #fff;
  background: transparent;
  caret-color: var(--red);
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1;
  letter-spacing: .36em;
  text-align: center;
  text-indent: .36em;
  text-shadow: 0 0 7px rgba(255,255,255,.32);
}

.input-bracket {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 22px;
  border-color: var(--white);
  pointer-events: none;
}

.input-bracket--left {
  left: -6px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-bottom: 2px solid;
}

.input-bracket--right {
  right: -6px;
  border-top: 2px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

body.lock-response .password-form {
  animation: lockResistance 1.2s steps(1, end) both;
}

body.wrong-response .password-form {
  border-color: var(--red);
  animation: wrongResponse 480ms steps(1, end) both;
}

body.screen-disruption .experience {
  animation: screenDisruption 180ms steps(1, end) 1;
}

body.screen-disruption .hex-field { opacity: .32; }

.transmission-screen,
.terminal-screen {
  visibility: hidden;
  opacity: 0;
}

body.deteriorating .access-screen {
  pointer-events: none;
  animation: accessDeteriorate 2.9s cubic-bezier(.22,.58,.16,1) both;
}

body.deteriorating .hex-field {
  animation: gridDeteriorate 2.8s cubic-bezier(.2,.7,.2,1) both;
}

body.deteriorating .experience {
  transform-origin: 50% 50%;
  animation: systemCorruption 2.9s steps(1, end) both;
}

body.deteriorating .matrix-wall { animation: matrixRupture 2.9s cubic-bezier(.2,.62,.19,1) both; }
body.deteriorating .radial-field { animation: fieldRupture 2.9s ease-in-out both; }
body.deteriorating .scanlines { animation: scanlineRupture 2.9s cubic-bezier(.22,.6,.2,1) both; }

body.message-active .start-screen,
body.message-active .access-screen { display: none; }

body.message-active .matrix-wall { opacity: .2; }
body.message-active .hex-field { opacity: .03; }
body.message-active .radial-field { background: rgba(0,0,0,.84); }

body.message-active .transmission-screen {
  visibility: visible;
  opacity: 1;
  display: grid;
  place-items: center;
}

.transmission-copy {
  position: relative;
  width: min(960px, 86vw);
  min-height: 5em;
  color: rgba(255,255,255,.9);
  font-size: clamp(9px, 1.02vw, 14px);
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
  white-space: pre-line;
  text-shadow: 1px 0 rgba(255,0,34,.42), -1px 0 rgba(120,220,255,.16);
}

.transmission-copy::before,
.transmission-copy::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
}

.transmission-copy.glitching::before {
  color: var(--red);
  opacity: .62;
  transform: translateX(4px);
  clip-path: inset(7% 0 67% 0);
}

.transmission-copy.glitching::after {
  color: #dffaff;
  opacity: .27;
  transform: translateX(-4px);
  clip-path: inset(63% 0 6% 0);
}

.transmission-copy.final-clue {
  font-size: clamp(10px, 1.28vw, 17px);
  line-height: 2.35;
}

.clue-code {
  display: block;
  margin-top: clamp(24px, 5vh, 56px);
  color: var(--red);
  font-size: clamp(30px, 6vw, 84px);
  line-height: 1;
  letter-spacing: .24em;
  text-indent: .24em;
  text-shadow:
    2px 0 #fff,
    -3px 0 rgba(83, 0, 13, .9),
    0 0 10px rgba(255, 0, 34, .7),
    0 0 34px rgba(141, 0, 25, .56);
  animation: clueCorruption 140ms steps(3) infinite;
}

body.terminal-active .matrix-wall,
body.terminal-active .radial-field,
body.terminal-active .hex-field,
body.terminal-active .scanlines,
body.terminal-active .tracking-band,
body.terminal-active .pulse-wave,
body.terminal-active .screen-frame,
body.terminal-active .start-screen,
body.terminal-active .access-screen,
body.terminal-active .transmission-screen {
  display: none !important;
}

body.terminal-active { background: #000; }

body.terminal-active .terminal-screen {
  position: fixed;
  isolation: isolate;
  visibility: visible;
  opacity: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

body.terminal-active .terminal-screen::before,
body.terminal-active .terminal-screen::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body.terminal-active .terminal-screen::before {
  z-index: 4;
  inset: -18%;
  opacity: .76;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' seed='13' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.92'/%3E%3C/svg%3E");
  background-size: 134px 134px;
  mix-blend-mode: screen;
  filter: contrast(1.9) brightness(.72);
  animation: terminalGrain 110ms steps(2, jump-none) infinite;
}

body.terminal-active .terminal-screen::after {
  z-index: 5;
  inset: 0;
  opacity: .62;
  background:
    linear-gradient(to bottom, transparent 0 48%, rgba(255,255,255,.1) 49%, rgba(84,0,14,.26) 50%, transparent 53%) 0 -18vh / 100% 24vh no-repeat,
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.52) 1px 3px);
  box-shadow: inset 0 0 16vw 7vw #000;
  animation: terminalTracking 4.2s linear infinite;
}

.terminal-signature {
  position: relative;
  z-index: 3;
  width: clamp(125px, 17vw, 260px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 12px rgba(255, 0, 34, .58));
  animation: terminalPulse 3.4s ease-in-out infinite;
}

.terminal-signature img {
  filter:
    saturate(1.85)
    brightness(1.42)
    contrast(1.16)
    drop-shadow(0 0 5px rgba(255,0,32,.9));
}

.terminal-halo {
  inset: -20%;
  filter: blur(24px);
}

body.tv-shutdown .experience,
body.tv-shutdown .matrix-wall,
body.tv-shutdown .radial-field,
body.tv-shutdown .hex-field,
body.tv-shutdown .scanlines,
body.tv-shutdown .tracking-band,
body.tv-shutdown .screen-frame {
  transform-origin: 50% 50%;
  animation: tvPowerOff 1.08s cubic-bezier(.4,0,.18,1) both;
}

body.tv-shutdown::before,
body.tv-shutdown::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

body.tv-shutdown::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,.96) 0 1%, rgba(255,28,57,.78) 7%, rgba(65,0,12,.28) 31%, transparent 67%);
  mix-blend-mode: screen;
  animation: tvShutdownFlash 1.08s cubic-bezier(.24,.62,.18,1) both;
}

body.tv-shutdown::after {
  background: #000;
  transform-origin: center;
  animation: tvBlackout 1.08s cubic-bezier(.45,0,.16,1) both;
}

@keyframes shieldBreathe {
  0%, 100% { opacity: .08; transform: scale(1); }
  50% { opacity: .17; transform: scale(1.018); }
}

@keyframes trackingRoll {
  from { transform: translateY(-18vh); }
  to { transform: translateY(136vh); }
}

@keyframes circularEcho {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.03); filter: blur(5px); }
  12% { opacity: .8; }
  58% { opacity: .4; filter: blur(2px); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(9); filter: blur(8px); }
}

@keyframes startActivation {
  0% { opacity: 1; transform: scale(1); filter: none; }
  18% { transform: scaleX(1.05) scaleY(.92); filter: brightness(2); }
  29% { transform: translateX(-6px) scaleX(.96); clip-path: inset(0 0 65% 0); }
  42% { transform: translateX(7px) scaleX(1.08); clip-path: inset(57% 0 7% 0); }
  58% { transform: scaleX(.86); clip-path: inset(21% 0 38% 0); }
  72% { opacity: .88; transform: scaleX(1.16) scaleY(.52); filter: brightness(1.4); }
  100% { opacity: 0; transform: scaleX(.04) scaleY(.02); filter: brightness(4); }
}

@keyframes initializeJitter {
  0%, 4%, 100% { transform: translate3d(0,0,0) scale(1.012); }
  8% { transform: translate3d(-7px,4px,0) rotate(-.18deg) scale(1.016); }
  12% { transform: translate3d(5px,-6px,0) rotate(.24deg) scale(1.014); }
  17% { transform: translate3d(-3px,-4px,0) rotate(.12deg) scale(1.018); }
  22% { transform: translate3d(9px,3px,0) rotate(-.3deg) scale(1.015); }
  27% { transform: translate3d(-8px,6px,0) rotate(.27deg) scale(1.019); }
  32% { transform: translate3d(4px,-5px,0) rotate(-.16deg) scale(1.014); }
  38% { transform: translate3d(-10px,-2px,0) rotate(.31deg) scale(1.018); }
  43% { transform: translate3d(7px,5px,0) rotate(-.23deg) scale(1.016); }
  49% { transform: translate3d(-5px,-7px,0) rotate(.19deg) scale(1.02); }
  55% { transform: translate3d(10px,-1px,0) rotate(-.34deg) scale(1.017); }
  61% { transform: translate3d(-6px,4px,0) rotate(.22deg) scale(1.018); }
  67% { transform: translate3d(3px,-5px,0) rotate(-.13deg) scale(1.014); }
  73% { transform: translate3d(-8px,2px,0) rotate(.25deg) scale(1.017); }
  79% { transform: translate3d(6px,4px,0) rotate(-.2deg) scale(1.015); }
  85% { transform: translate3d(-4px,-3px,0) rotate(.11deg) scale(1.014); }
  91% { transform: translate3d(3px,2px,0) rotate(-.08deg) scale(1.013); }
  96% { transform: translate3d(-1px,1px,0) rotate(.03deg) scale(1.012); }
}

@keyframes accessMaterialize {
  0% { opacity: 0; filter: brightness(3) contrast(3); transform: scaleX(.04); }
  18% { opacity: .88; transform: scaleX(1.04); }
  31% { opacity: .22; transform: translateX(-6px); }
  48% { opacity: 1; transform: translateX(4px); }
  68% { filter: brightness(1.3) contrast(1.4); }
  100% { opacity: 1; filter: none; transform: none; }
}

@keyframes passwordMaterialize {
  0%, 7% {
    opacity: 0;
    transform: translate3d(0,0,0) scaleX(.025) scaleY(.2);
    filter: brightness(4) contrast(3);
    clip-path: inset(47% 0 47% 0);
  }
  11% {
    opacity: .92;
    transform: translate3d(-11px,5px,0) rotate(-.32deg) scaleX(1.08) scaleY(.72);
    filter: brightness(2.2) contrast(2.2);
    clip-path: polygon(0 4%,100% 0,100% 18%,0 23%,0 54%,100% 49%,100% 72%,0 78%,0 91%,100% 86%,100% 100%,0 100%);
  }
  15% {
    opacity: .38;
    transform: translate3d(9px,-6px,0) rotate(.25deg) scaleX(.93) scaleY(1.08);
    filter: invert(.18) brightness(1.4) contrast(2.5);
    clip-path: inset(58% 0 9% 0);
  }
  20% {
    opacity: 1;
    transform: translate3d(-7px,-3px,0) rotate(.18deg) scaleX(1.045) scaleY(.96);
    filter: brightness(1.8) contrast(1.9);
    clip-path: polygon(0 0,100% 0,100% 31%,0 36%,0 63%,100% 57%,100% 100%,0 100%);
  }
  25% {
    opacity: .65;
    transform: translate3d(12px,6px,0) rotate(-.38deg) scaleX(.97) scaleY(1.035);
    filter: brightness(.88) contrast(2.7);
    clip-path: inset(12% 0 63% 0);
  }
  30% {
    opacity: 1;
    transform: translate3d(-10px,2px,0) rotate(.31deg) scaleX(1.035);
    filter: brightness(1.55) contrast(1.8);
    clip-path: polygon(0 0,100% 4%,100% 22%,0 17%,0 46%,100% 51%,100% 69%,0 74%,0 100%,100% 96%,100% 100%,0 100%);
  }
  36% {
    transform: translate3d(7px,-7px,0) rotate(-.22deg) scaleX(.985) scaleY(1.02);
    filter: brightness(2.1) contrast(2.25);
    clip-path: inset(67% 0 3% 0);
  }
  42% {
    opacity: .9;
    transform: translate3d(-5px,5px,0) rotate(.2deg) scaleX(1.025);
    filter: brightness(1.18) contrast(1.7);
    clip-path: polygon(0 0,100% 0,100% 41%,0 37%,0 81%,100% 75%,100% 100%,0 100%);
  }
  49% {
    transform: translate3d(8px,-2px,0) rotate(-.17deg) scaleX(.995);
    filter: brightness(1.72) contrast(1.95);
    clip-path: inset(25% 0 42% 0);
  }
  56% {
    opacity: 1;
    transform: translate3d(-6px,-4px,0) rotate(.14deg) scaleX(1.018);
    filter: brightness(1.3) contrast(1.5);
    clip-path: polygon(0 0,100% 0,100% 62%,0 67%,0 100%,100% 100%);
  }
  63% {
    transform: translate3d(5px,3px,0) rotate(-.11deg) scaleX(.998);
    filter: brightness(1.42) contrast(1.65);
    clip-path: inset(0);
  }
  71% {
    transform: translate3d(-3px,-2px,0) rotate(.07deg) scaleX(1.01);
    filter: brightness(1.16) contrast(1.35);
    clip-path: inset(0);
  }
  80% {
    transform: translate3d(2px,2px,0) rotate(-.04deg) scaleX(.999);
    filter: brightness(1.08) contrast(1.18);
    clip-path: inset(0);
  }
  90% {
    transform: translate3d(-1px,0,0) scaleX(1.003);
    filter: brightness(1.03) contrast(1.08);
    clip-path: inset(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }
}

@keyframes passwordBarTear {
  0%, 13% {
    opacity: 0;
    top: 50%;
    height: 1px;
    transform: translate3d(0,0,0) scaleX(.02);
  }
  16% {
    opacity: .55;
    top: 49%;
    height: 1px;
    transform: translate3d(-15%,0,0) scaleX(.3);
  }
  20% {
    opacity: 1;
    top: 49%;
    height: 3px;
    transform: translate3d(8%,0,0) scaleX(1.04);
  }
  24% {
    opacity: .92;
    top: 22%;
    height: 7px;
    transform: translate3d(-5%,0,0) scaleX(.88) skewX(-12deg);
  }
  28% {
    opacity: 1;
    top: 72%;
    height: 2px;
    transform: translate3d(11%,0,0) scaleX(1.12) skewX(8deg);
  }
  33% {
    opacity: .76;
    top: 43%;
    height: 10px;
    transform: translate3d(-8%,0,0) scaleX(.96);
    filter: blur(1px) brightness(1.8);
  }
  38% {
    opacity: 1;
    top: 58%;
    height: 1px;
    transform: translate3d(4%,0,0) scaleX(1.18);
    filter: brightness(2.4);
  }
  44% {
    opacity: .4;
    top: 50%;
    height: 4px;
    transform: translate3d(-3%,0,0) scaleX(.7);
    filter: blur(2px);
  }
  51% {
    opacity: .16;
    top: 50%;
    height: 1px;
    transform: translate3d(0,0,0) scaleX(.26);
  }
  58%, 100% {
    opacity: 0;
    top: 50%;
    height: 1px;
    transform: translate3d(0,0,0) scaleX(0);
    filter: none;
  }
}

@keyframes signatureBreathe {
  0%, 100% { opacity: .42; transform: scale(.92); }
  50% { opacity: .86; transform: scale(1.08); }
}

@keyframes overrideWindowRotate {
  from { rotate: 0deg; }
  to { rotate: 45deg; }
}

@keyframes overrideWindowPulse {
  0% { opacity: 1; transform: scale(.82); filter: brightness(2.2); }
  21% { opacity: 1; transform: scale(1.02); filter: brightness(1.5); }
  50% { opacity: .94; transform: scale(1.02); filter: brightness(1.5); }
  64% { opacity: .88; transform: scale(.94); }
  82% { opacity: .52; transform: scale(.82); }
  100% { opacity: .08; transform: scale(.72); filter: brightness(.65); }
}

@keyframes overrideWindowOuter {
  0% { opacity: .9; transform: rotate(22.5deg) scale(.86); }
  22% { opacity: .82; transform: rotate(22.5deg) scale(1.09); }
  78% { opacity: .55; transform: rotate(22.5deg) scale(.98); }
  100% { opacity: .05; transform: rotate(22.5deg) scale(.74); }
}

@keyframes overrideSignaturePulse {
  0% {
    transform: scale(.94);
    filter:
      brightness(1.05)
      drop-shadow(0 14px 12px rgba(0,0,0,.94))
      drop-shadow(0 0 12px rgba(255,0,34,.5));
  }
  20% {
    transform: scale(1.08);
    filter:
      brightness(1.42)
      drop-shadow(0 14px 12px rgba(0,0,0,.94))
      drop-shadow(0 0 30px rgba(255,0,34,.98))
      drop-shadow(0 0 54px rgba(255,0,34,.58));
  }
  44% {
    transform: scale(1);
    filter:
      brightness(1.13)
      drop-shadow(0 14px 12px rgba(0,0,0,.94))
      drop-shadow(0 0 17px rgba(255,0,34,.68));
  }
  68% {
    transform: scale(1.055);
    filter:
      brightness(1.3)
      drop-shadow(0 14px 12px rgba(0,0,0,.94))
      drop-shadow(0 0 27px rgba(255,0,34,.88))
      drop-shadow(0 0 46px rgba(255,0,34,.42));
  }
  100% {
    transform: scale(.96);
    filter:
      brightness(1.02)
      drop-shadow(0 14px 12px rgba(0,0,0,.94))
      drop-shadow(0 0 10px rgba(255,0,34,.36));
  }
}

@keyframes lockResistance {
  0%, 5%, 88%, 100% { transform: translate3d(0,0,0); filter: none; }
  8% { transform: translate3d(-5px,3px,0) rotate(-.18deg); filter: brightness(1.45); }
  11% { transform: translate3d(7px,-4px,0) rotate(.25deg) scale(1.006); }
  14% { transform: translate3d(-8px,-2px,0) rotate(-.3deg); }
  17% { transform: translate3d(4px,5px,0) rotate(.12deg) scale(.997); filter: contrast(1.5); }
  20% { transform: translate3d(-3px,-5px,0) rotate(.22deg); }
  24% { transform: translate3d(8px,2px,0) rotate(-.24deg) scale(1.008); }
  28% { transform: translate3d(-6px,4px,0) rotate(.16deg); }
  33% { transform: translate3d(3px,-3px,0) rotate(-.12deg); filter: brightness(1.18); }
  38% { transform: translate3d(-4px,2px,0) rotate(.1deg); }
  44% { transform: translate3d(5px,-2px,0) rotate(-.08deg); }
  51% { transform: translate3d(-3px,3px,0) rotate(.07deg); }
  59% { transform: translate3d(2px,-2px,0); }
  68% { transform: translate3d(-2px,1px,0); filter: brightness(1.06); }
  78% { transform: translate3d(1px,-1px,0); }
}

@keyframes wrongResponse {
  0%, 100% { transform: translate3d(0,0,0); filter: none; }
  6% { transform: translate3d(-10px,5px,0) rotate(-.32deg); filter: invert(.2) contrast(2); }
  12% { transform: translate3d(8px,-6px,0) rotate(.28deg) scale(1.008); }
  18% { transform: translate3d(-6px,-3px,0) rotate(.18deg); }
  24% { transform: translate3d(11px,4px,0) rotate(-.4deg) scale(.995); filter: contrast(1.9); }
  31% { transform: translate3d(-9px,2px,0) rotate(.35deg); }
  38% { transform: translate3d(5px,-5px,0) rotate(-.2deg); }
  45% { transform: translate3d(-7px,6px,0) rotate(.24deg) scale(1.004); filter: contrast(1.65); }
  52% { transform: translate3d(8px,-3px,0) rotate(-.27deg); }
  60% { transform: translate3d(-5px,-4px,0) rotate(.17deg); }
  68% { transform: translate3d(4px,3px,0) rotate(-.12deg); }
  76% { transform: translate3d(-3px,-2px,0) rotate(.08deg); }
  84% { transform: translate3d(2px,2px,0) rotate(-.05deg); }
  92% { transform: translate3d(-1px,0,0); }
}

@keyframes screenDisruption {
  0%, 100% { transform: translate3d(0,0,0) scale(1.01); filter: none; clip-path: inset(0); }
  6% { transform: translate3d(-9px,6px,0) rotate(-.25deg) scale(1.018); filter: contrast(1.7) brightness(1.26); clip-path: inset(0 0 71% 0); }
  13% { transform: translate3d(7px,-5px,0) rotate(.18deg) scale(1.012); clip-path: inset(62% 0 4% 0); }
  20% { transform: translate3d(-5px,-7px,0) rotate(.3deg) scale(1.02); clip-path: inset(19% 0 47% 0); }
  27% { transform: translate3d(10px,3px,0) rotate(-.34deg) scale(1.014); filter: contrast(1.9) brightness(1.18); clip-path: inset(44% 0 21% 0); }
  34% { transform: translate3d(-8px,5px,0) rotate(.22deg) scale(1.019); clip-path: inset(7% 0 64% 0); }
  42% { transform: translate3d(4px,-6px,0) rotate(-.16deg) scale(1.013); clip-path: inset(69% 0 2% 0); }
  50% { transform: translate3d(-6px,2px,0) rotate(.27deg) scale(1.017); filter: contrast(1.55); clip-path: inset(31% 0 36% 0); }
  58% { transform: translate3d(9px,-3px,0) rotate(-.29deg) scale(1.015); clip-path: inset(51% 0 15% 0); }
  66% { transform: translate3d(-4px,-5px,0) rotate(.14deg) scale(1.018); clip-path: inset(12% 0 58% 0); }
  74% { transform: translate3d(6px,4px,0) rotate(-.19deg) scale(1.012); filter: contrast(1.35); clip-path: inset(57% 0 8% 0); }
  82% { transform: translate3d(-3px,2px,0) rotate(.1deg) scale(1.014); clip-path: inset(24% 0 43% 0); }
  91% { transform: translate3d(2px,-2px,0) rotate(-.06deg) scale(1.011); clip-path: inset(4% 0 77% 0); }
}

@keyframes accessDeteriorate {
  0% { opacity: 1; transform: none; filter: none; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  11% { transform: scale(1.006,.997) skew(.3deg,-.18deg); filter: contrast(1.36) brightness(1.08); }
  23% { transform: scale(1.012,.992) skew(-.52deg,.23deg); clip-path: polygon(0 0,100% 2%,97% 31%,100% 62%,95% 100%,0 97%,3% 70%,0 43%); }
  37% { opacity: .94; transform: scale(.994,1.016) skew(.78deg,-.31deg); filter: contrast(1.8) brightness(.84); clip-path: polygon(2% 0,96% 0,100% 18%,97% 47%,100% 76%,94% 100%,3% 98%,0 61%,4% 28%); }
  52% { opacity: .76; transform: scale(1.025,.98) skew(-1deg,.48deg); filter: contrast(2.15) brightness(.68); clip-path: polygon(0 4%,97% 0,95% 24%,100% 38%,96% 59%,100% 92%,83% 100%,1% 96%,5% 67%,0 51%); }
  66% { opacity: .54; transform: scale(.97,1.035) skew(.58deg,-.7deg); filter: contrast(2.55) brightness(.48); clip-path: polygon(4% 0,100% 5%,96% 29%,100% 53%,91% 77%,98% 100%,7% 96%,0 79%,4% 48%,0 19%); }
  79% { opacity: .31; transform: scale(1.045,.94) skew(-1.25deg,.76deg); filter: contrast(3.1) brightness(.31); clip-path: polygon(0 9%,100% 0,94% 18%,100% 41%,92% 63%,98% 100%,0 91%,6% 72%,0 36%); }
  91% { opacity: .12; transform: scale(.91,.82) skew(.44deg,-.36deg); filter: contrast(3.6) brightness(.12); clip-path: polygon(0 18%,100% 11%,96% 34%,100% 52%,93% 76%,100% 87%,0 80%,5% 58%,0 39%); }
  100% { opacity: 0; transform: scale(.86,.68); filter: contrast(4) brightness(0); clip-path: polygon(0 44%,100% 38%,100% 59%,0 64%); }
}

@keyframes gridDeteriorate {
  0% { opacity: .13; transform: scale(1); filter: none; }
  19% { opacity: .25; transform: translate(-1.2%,.8%) scale(1.03,.98) skew(.4deg); }
  43% { opacity: .34; transform: translate(1.6%,-1.1%) scale(.98,1.05) skew(-.8deg,.3deg); filter: contrast(2); }
  68% { opacity: .17; transform: translate(-2%,1.5%) scale(1.07,.94) skew(1.2deg,-.5deg); filter: contrast(2.8); }
  100% { opacity: 0; transform: translate(1%,-.8%) scale(.76,.69); filter: brightness(0); }
}

@keyframes systemCorruption {
  0%, 3% { transform: translate3d(0,0,0) scale(1.015); filter: none; }
  6% { transform: translate3d(-8px,5px,0) rotate(-.22deg) scale(1.018); filter: contrast(1.14); }
  9% { transform: translate3d(6px,-7px,0) rotate(.28deg) scale(1.016); }
  12% { transform: translate3d(-3px,-4px,0) rotate(.13deg) scale(1.02); }
  15% { transform: translate3d(10px,3px,0) rotate(-.34deg) scale(1.017); filter: contrast(1.24); }
  18% { transform: translate3d(-7px,7px,0) rotate(.26deg) scale(1.021); }
  21% { transform: translate3d(4px,-5px,0) rotate(-.18deg) scale(1.016); }
  24% { transform: translate3d(-10px,-2px,0) rotate(.31deg) scale(1.019); filter: contrast(1.34); }
  27% { transform: translate3d(8px,6px,0) rotate(-.27deg) scale(1.022); }
  30% { transform: translate3d(-5px,-8px,0) rotate(.19deg) scale(1.017); }
  33% { transform: translate3d(11px,2px,0) rotate(-.38deg) scale(1.02); filter: contrast(1.43) brightness(.94); }
  36% { transform: translate3d(-8px,4px,0) rotate(.3deg) scale(1.024); }
  39% { transform: translate3d(3px,-6px,0) rotate(-.15deg) scale(1.018); }
  42% { transform: translate3d(-11px,7px,0) rotate(.36deg) scale(1.022); filter: contrast(1.52) brightness(.9); }
  45% { transform: translate3d(7px,-3px,0) rotate(-.24deg) scale(1.025); }
  48% { transform: translate3d(-4px,-7px,0) rotate(.2deg) scale(1.019); }
  51% { transform: translate3d(10px,5px,0) rotate(-.32deg) scale(1.023); filter: contrast(1.63) brightness(.84); }
  54% { transform: translate3d(-9px,-3px,0) rotate(.29deg) scale(1.026); }
  57% { transform: translate3d(5px,8px,0) rotate(-.17deg) scale(1.02); }
  60% { transform: translate3d(-12px,1px,0) rotate(.4deg) scale(1.024); filter: contrast(1.74) brightness(.76); }
  63% { transform: translate3d(8px,-6px,0) rotate(-.31deg) scale(1.027); }
  66% { transform: translate3d(-6px,5px,0) rotate(.23deg) scale(1.021); }
  69% { transform: translate3d(12px,-2px,0) rotate(-.42deg) scale(1.025); filter: contrast(1.88) brightness(.67); }
  72% { transform: translate3d(-9px,-7px,0) rotate(.34deg) scale(1.028); }
  75% { transform: translate3d(4px,6px,0) rotate(-.16deg) scale(1.022); }
  78% { transform: translate3d(-11px,3px,0) rotate(.37deg) scale(1.026); filter: contrast(2.02) brightness(.56); }
  81% { transform: translate3d(9px,-5px,0) rotate(-.3deg) scale(1.029); }
  84% { transform: translate3d(-5px,-4px,0) rotate(.21deg) scale(1.023); }
  87% { transform: translate3d(7px,4px,0) rotate(-.25deg) scale(1.027); filter: contrast(2.2) brightness(.42); }
  90% { transform: translate3d(-6px,2px,0) rotate(.18deg) scale(1.02); }
  93% { transform: translate3d(4px,-3px,0) rotate(-.12deg) scale(1.015); filter: contrast(2.45) brightness(.27); }
  96% { transform: translate3d(-2px,2px,0) rotate(.07deg) scale(.98,.92); }
  100% { transform: translate3d(0,0,0) scale(.94,.82); filter: contrast(3) brightness(0); }
}

@keyframes matrixRupture {
  0% { opacity: .9; transform: scale(1); filter: none; }
  18% { opacity: 1; transform: translate(-.5%,.4%) scale(1.015,.995); filter: contrast(1.3); }
  39% { opacity: .78; transform: translate(.8%,-.7%) scale(.992,1.025) skew(-.3deg,.2deg); }
  58% { opacity: .62; transform: translate(-1.1%,.9%) scale(1.035,.98) skew(.5deg,-.35deg); filter: contrast(2); }
  76% { opacity: .33; transform: translate(.7%,-.5%) scale(.96,1.05); }
  100% { opacity: 0; transform: scale(.88,.74); filter: brightness(0) contrast(3); }
}

@keyframes fieldRupture {
  0% { opacity: 1; transform: scale(1); }
  24% { opacity: .92; transform: translate(1%,-.6%) scale(1.04,.97); filter: hue-rotate(-8deg) contrast(1.25); }
  49% { opacity: .75; transform: translate(-1.4%,1%) scale(.98,1.07); }
  73% { opacity: .38; transform: translate(.8%,-1.2%) scale(1.08,.93); filter: contrast(2); }
  100% { opacity: 0; transform: scale(.82,.74); filter: brightness(0); }
}

@keyframes scanlineRupture {
  0% { opacity: .29; transform: translateY(0) scaleY(1); }
  17% { opacity: .5; transform: translateY(-3px) scaleY(1.03); }
  38% { opacity: .22; transform: translateY(7px) scaleY(.96) skewY(.35deg); }
  61% { opacity: .56; transform: translateY(-9px) scaleY(1.08) skewY(-.42deg); }
  82% { opacity: .14; transform: translateY(5px) scaleY(.84); }
  100% { opacity: 0; transform: translateY(-2px) scaleY(.62); }
}

@keyframes clueCorruption {
  0% { transform: translateX(-2px) skewX(-1deg); filter: brightness(.86); }
  33% { transform: translateX(3px) scaleX(1.008); filter: brightness(1.35); }
  66% { transform: translateX(-1px) skewX(.8deg); filter: contrast(1.6); }
  100% { transform: translateX(1px); }
}

@keyframes terminalPulse {
  0%, 100% { transform: scale(.96); filter: brightness(1.02) drop-shadow(0 0 9px rgba(255,0,34,.68)); }
  50% { transform: scale(1.035); filter: brightness(1.42) drop-shadow(0 0 26px rgba(255,0,34,.96)); }
}

@keyframes tvPowerOff {
  0%, 42% { opacity: 1; transform: scale(1); filter: none; }
  55% { opacity: 1; transform: scale(1.018,.94) skew(-.35deg,.18deg); filter: contrast(1.5) brightness(1.28); }
  67% { opacity: .94; transform: translate(-4px,2px) scale(.982,.72) skew(.5deg,-.3deg); filter: contrast(2.1) brightness(1.7); }
  78% { opacity: .92; transform: translate(3px,-1px) scale(.91,.09) skew(-.22deg); filter: contrast(2.8) brightness(3.6); }
  88% { opacity: .88; transform: scale(.58,.004); filter: contrast(4) brightness(7); }
  96% { opacity: .5; transform: scale(.08,.002); filter: brightness(10); }
  100% { opacity: 0; transform: scale(0); filter: brightness(0); }
}

@keyframes tvShutdownFlash {
  0%, 38% { opacity: 0; transform: scale(1.4); }
  53% { opacity: .18; transform: scale(1.08,.92); }
  72% { opacity: .72; transform: scale(.94,.24); filter: blur(3px); }
  86% { opacity: 1; transform: scale(.62,.015); filter: blur(1px) brightness(3); }
  100% { opacity: 0; transform: scale(.02,.004); filter: blur(6px); }
}

@keyframes tvBlackout {
  0%, 68% { opacity: 0; }
  83% { opacity: .3; }
  100% { opacity: 1; }
}

@keyframes terminalGrain {
  0% { transform: translate3d(-2.4%,-1.2%,0) scale(1.03); background-position: 0 0; }
  25% { transform: translate3d(1.6%,2.1%,0) scale(1.035); background-position: 29px -17px; }
  50% { transform: translate3d(-1.1%,1.7%,0) scale(1.028); background-position: -21px 31px; }
  75% { transform: translate3d(2.2%,-1.8%,0) scale(1.034); background-position: 37px 13px; }
  100% { transform: translate3d(-1.8%,-2.3%,0) scale(1.03); background-position: -13px -33px; }
}

@keyframes terminalTracking {
  from { background-position: 0 -18vh, 0 0; }
  to { background-position: 0 118vh, 0 0; }
}

@media (max-width: 640px) {
  .access-screen { padding: 24px 20px; }
  .node-header { letter-spacing: .15em; }
  .node-header span { display: none; }
  .authentication-core { transform: translateY(-1vh); }
  .password-form { width: min(84vw, 560px); }
  .transmission-copy { width: 90vw; letter-spacing: .11em; }
}

@media (max-height: 580px) {
  .access-screen { padding-top: 16px; padding-bottom: 16px; }
  .authentication-core { gap: 18px; transform: none; }
  .signature-control { width: clamp(76px, 18vh, 115px); }
  .password-form { height: clamp(60px, 18vh, 84px); }
}

@media (prefers-reduced-motion: reduce) {
  .hex-field,
  .tracking-band,
  .signature-halo,
  .terminal-halo,
  .terminal-signature { animation-duration: 14s !important; }

  body.tv-shutdown .experience,
  body.tv-shutdown .matrix-wall,
  body.tv-shutdown .radial-field,
  body.tv-shutdown .hex-field,
  body.tv-shutdown .scanlines,
  body.tv-shutdown .tracking-band,
  body.tv-shutdown .screen-frame,
  body.tv-shutdown::before,
  body.tv-shutdown::after { animation-duration: 420ms !important; }
}