/* TF Page System v2 | Page 5626 | source d5545d733f8cdb4a5431e7a1c5070b7d02627316b7d8587488af66bbd26aeee2 */
:root {
  --cyan: #62f4e8;
  --lime: #cfff42;
  --red: #ff4e48;
  --paper: #ead9aa;
  --ink: #111513;
  --violet: #a88cff;
  --ticker-clearance: 64px;
  --nav-clearance: 52px;
  --board-content-lift: -32px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #020405; color: #eef1e8; font-family: Arial, Helvetica, sans-serif; }
body { overflow-y: auto; overflow-x: hidden; }
.scene {
  min-height: 100vh;
  background:
    radial-gradient(circle at 74% 42%, rgba(98, 244, 232, .16), transparent 24%),
    linear-gradient(90deg, rgba(2, 4, 5, .88), rgba(2, 4, 5, .58) 38%, rgba(2, 4, 5, .18) 72%),
    linear-gradient(0deg, rgba(2, 4, 5, .76), rgba(2, 4, 5, .08) 48%),
    url("https://www.thetruthfiles.com/wp-content/uploads/2026/09/tf-lossless-14875-20260919.webp") center / cover fixed;
  position: relative;
}
.scene::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 4% 18%, rgba(255,255,255,.68) 0 1px, transparent 1.9px),
    radial-gradient(circle at 8% 73%, rgba(98,244,232,.38) 0 1px, transparent 1.8px),
    radial-gradient(circle at 13% 41%, rgba(255,255,255,.44) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 18% 92%, rgba(207,255,66,.26) 0 1px, transparent 1.7px),
    radial-gradient(circle at 24% 11%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 29% 66%, rgba(168,140,255,.35) 0 1.1px, transparent 2px),
    radial-gradient(circle at 34% 28%, rgba(98,244,232,.42) 0 1px, transparent 1.9px),
    radial-gradient(circle at 39% 84%, rgba(255,255,255,.36) 0 1px, transparent 1.8px),
    radial-gradient(circle at 45% 7%, rgba(207,255,66,.28) 0 1px, transparent 1.7px),
    radial-gradient(circle at 48% 52%, rgba(255,255,255,.5) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 53% 23%, rgba(98,244,232,.32) 0 1px, transparent 1.8px),
    radial-gradient(circle at 57% 76%, rgba(255,255,255,.44) 0 1px, transparent 1.9px),
    radial-gradient(circle at 62% 36%, rgba(168,140,255,.34) 0 1px, transparent 1.9px),
    radial-gradient(circle at 68% 91%, rgba(98,244,232,.36) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 13%, rgba(255,255,255,.6) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 77% 61%, rgba(207,255,66,.3) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 32%, rgba(255,255,255,.38) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 81%, rgba(98,244,232,.4) 0 1px, transparent 1.9px),
    radial-gradient(circle at 93% 9%, rgba(255,255,255,.48) 0 1px, transparent 1.8px),
    radial-gradient(circle at 97% 48%, rgba(168,140,255,.32) 0 1px, transparent 1.9px),
    radial-gradient(circle at 6% 54%, rgba(255,255,255,.24) 0 1px, transparent 1.8px),
    radial-gradient(circle at 21% 79%, rgba(98,244,232,.24) 0 1px, transparent 1.8px),
    radial-gradient(circle at 36% 13%, rgba(255,255,255,.28) 0 1px, transparent 1.8px),
    radial-gradient(circle at 51% 88%, rgba(207,255,66,.18) 0 1px, transparent 1.8px),
    radial-gradient(circle at 66% 5%, rgba(255,255,255,.26) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 55%, rgba(98,244,232,.22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 95% 70%, rgba(255,255,255,.25) 0 1px, transparent 1.8px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 67% 71%, 73% 79%, 83% 77%, 79% 69%, 89% 81%, 71% 83%, 97% 73%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 12% 18%, 42% 7%, 75% 24%, 18% 82%, 91% 63%, 33% 54%, 58% 88%;
  mix-blend-mode: screen;
  opacity: .68;
  animation: starDrift 72s linear infinite;
}
.scene::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(168,140,255,.08), transparent 22%),
    radial-gradient(circle at 72% 34%, rgba(98,244,232,.06), transparent 24%),
    radial-gradient(circle at 54% 72%, rgba(207,255,66,.035), transparent 18%);
  opacity: .62;
}
.main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 41% 59%;
  gap: 3vw;
  padding: 6vh 4vw 5vh;
}
.copy { align-self: center; padding-bottom: 3vh; }
.kicker { color: var(--cyan); font: 900 11px/1.4 "Courier New", monospace; letter-spacing: .18em; }
.kicker b { color: var(--lime); }
.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  color: #f8f4ff;
  font: 900 13px "Courier New", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(168,140,255,.45);
}
.live-tag b { color: var(--violet); }
.live-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 18px var(--violet);
}
h1 {
  position: relative;
  display: inline-block;
  margin: 18px 0 18px;
  font-size: clamp(76px, 10.4vw, 158px);
  line-height: .76;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fbfaf4;
  text-shadow: 0 0 22px rgba(168,140,255,.16);
  animation: titleSignal 6s steps(1, end) infinite;
}
h1 span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(168,140,255,.68); }
h1::before,
h1::after {
  content: "ALIEN\A FILES" / "";
  position: absolute;
  inset: 0;
  white-space: pre;
  pointer-events: none;
  opacity: 0;
  line-height: .76;
}
h1::before {
  color: rgba(98,244,232,.82);
  transform: translate(2px, 0);
  clip-path: inset(0 0 54% 0);
  text-shadow: -2px 0 rgba(98,244,232,.85);
  animation: glitchCyan 4.8s steps(1, end) infinite;
}
h1::after {
  color: rgba(168,140,255,.76);
  transform: translate(-2px, 0);
  clip-path: inset(46% 0 0 0);
  text-shadow: 2px 0 rgba(255,78,72,.75);
  animation: glitchViolet 5.4s steps(1, end) infinite;
}
.copy > p { max-width: 500px; color: #c5cbc5; font-size: 20px; line-height: 1.35; margin: 0; }
.signal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(500px, 100%);
  margin-top: 30px;
  color: #d8ded6;
  font: 900 10px "Courier New", monospace;
  letter-spacing: .16em;
  overflow: hidden;
  white-space: nowrap;
}
.signal::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 18px var(--lime);
  animation: signalPulse 1.45s ease-in-out infinite;
}
.signal-track {
  display: inline-flex;
  gap: 42px;
  min-width: max-content;
  animation: signalScroll 18s linear infinite;
}
.signal-track span { display: inline-block; }
.open {
  display: inline-block;
  padding: 13px 17px;
  color: #03100f;
  background: var(--cyan);
  text-decoration: none;
  font: 900 10px "Courier New", monospace;
  letter-spacing: .13em;
}
.board {
  position: relative;
  align-self: center;
  height: min(74vh, 730px);
  min-height: 570px;
  border: 1px solid rgba(98,244,232,.45);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 247, 214, .18) 0 1px, transparent 1.8px),
    radial-gradient(circle at 71% 63%, rgba(65, 49, 31, .24) 0 1px, transparent 2px),
    repeating-linear-gradient(3deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(93deg, rgba(58,43,27,.12) 0 1px, transparent 1px 9px),
    linear-gradient(115deg, rgba(72, 49, 31, .16), rgba(255,255,255,.06) 36%, rgba(47, 35, 24, .2)),
    linear-gradient(135deg, #b99a66, #a67f4e 47%, #7d5931);
  background-size: 17px 17px, 29px 29px, auto, auto, auto, auto;
  box-shadow: 0 28px 85px rgba(0,0,0,.72), inset 0 0 78px rgba(51, 33, 18, .62), inset 0 0 0 10px rgba(62, 39, 20, .26);
  overflow: hidden;
}
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(70, 47, 28, .28), transparent 16%, transparent 84%, rgba(58, 38, 22, .32)),
    linear-gradient(0deg, rgba(67, 43, 24, .28), transparent 15%, transparent 83%, rgba(50, 32, 19, .3)),
    repeating-linear-gradient(24deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(151deg, rgba(55,38,22,.09) 0 1px, transparent 1px 15px),
    radial-gradient(circle at 34% 37%, rgba(255,255,255,.12) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 23%, rgba(43,29,16,.16) 0 1px, transparent 1.8px);
  background-size: auto, auto, auto, auto, 21px 19px, 26px 23px;
  opacity: .92;
  filter: saturate(.62) contrast(1.06);
}
.board::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(58, 38, 22, .38);
  box-shadow: inset 0 0 0 2px rgba(216, 185, 130, .08), 0 0 0 1px rgba(0,0,0,.18);
  pointer-events: none;
  z-index: 1;
}
.board-title {
  position: absolute;
  z-index: 10;
  left: 26px;
  top: 22px;
  color: var(--cyan);
  font: 900 10px "Courier New", monospace;
  letter-spacing: .16em;
}
#strings, #files {
  position: absolute;
  inset: 0 0 var(--ticker-clearance);
  transform: translateY(var(--board-content-lift));
}
.string {
  position: absolute;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, rgba(95, 10, 8, .18), rgba(255, 42, 36, .96) 18%, rgba(255, 42, 36, .9) 82%, rgba(95, 10, 8, .22));
  box-shadow: 0 0 0 1px rgba(72, 4, 3, .18), 0 0 13px rgba(255,42,36,.76);
  transform-origin: 0 50%;
  pointer-events: none;
}
.file {
  position: absolute;
  z-index: 5;
  width: clamp(150px, 14.2vw, 190px);
  min-height: clamp(158px, 15.4vw, 188px);
  padding: 16px 14px 15px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 38%),
    linear-gradient(145deg, #f0dfb3, #b39f70);
  box-shadow: 8px 16px 22px rgba(0,0,0,.62);
  text-decoration: none;
  transition:
    left 900ms cubic-bezier(.18,.86,.2,1),
    top 900ms cubic-bezier(.18,.86,.2,1),
    transform 900ms cubic-bezier(.18,.86,.2,1),
    opacity 260ms ease,
    filter 260ms ease;
  will-change: left, top, transform;
}
.file-pin {
  display: block;
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--pin);
  box-shadow: 0 2px 7px rgba(0,0,0,.7), 0 0 12px var(--pin);
  transform: translateX(-50%);
}
.file:hover { z-index: 12; transform: translate(-50%, 0) rotate(0deg) scale(1.07) !important; }
.file small {
  display: block;
  color: rgba(34, 43, 38, .78);
  font: 900 9px "Courier New", monospace;
  letter-spacing: .12em;
  text-decoration: underline;
  text-decoration-color: rgba(34, 43, 38, .46);
  text-underline-offset: 3px;
}
.file h2 {
  margin: 16px 0 8px;
  max-width: 100%;
  color: #21312b;
  font-size: clamp(14px, 1.08vw, 18px);
  line-height: .95;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 245, 206, .38);
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: balance;
  hyphens: auto;
  overflow: hidden;
}
.thumb {
  display: block;
  height: clamp(38px, 4.3vw, 52px);
  margin: 8px 0 11px;
  border: 1px solid rgba(17, 21, 19, .36);
  background-image:
    linear-gradient(135deg, rgba(207,255,66,.2), transparent 34%),
    linear-gradient(0deg, rgba(1,7,8,.36), transparent),
    var(--thumb-url);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 18px rgba(98,244,232,.22);
  filter: sepia(.18) saturate(.95) contrast(1.08);
}
.file em {
  display: block;
  margin-top: 0;
  color: #475338;
  font: 900 8px "Courier New", monospace;
  font-style: normal;
  letter-spacing: .12em;
  text-decoration: underline;
  text-decoration-color: rgba(71, 83, 56, .52);
  text-underline-offset: 3px;
}
.f0 { --thumb-x: 18%; --thumb-y: 42%; }
.f1 { --thumb-x: 38%; --thumb-y: 55%; }
.f2 { --thumb-x: 64%; --thumb-y: 36%; }
.f3 { --thumb-x: 77%; --thumb-y: 62%; }
.f4 { --thumb-x: 52%; --thumb-y: 72%; }
.f0 { --pin: #ff625d; }
.f1 { --pin: #ffc457; }
.f2 { --pin: #cfff42; }
.f3 { --pin: #62f4e8; }
.f4 { --pin: #ff625d; }
.board.switching .file { filter: brightness(.82) contrast(1.05); }
.alien-nav {
  position: absolute;
  z-index: 20;
  left: 26px;
  bottom: calc(24px + var(--nav-clearance));
  display: grid;
  grid-template-columns: 84px 146px 84px;
  align-items: center;
  gap: 8px;
}
.alien-nav::before {
  content: "SIGNAL PATH / CASE ROUTER";
  position: absolute;
  left: 2px;
  bottom: calc(100% + 8px);
  color: var(--lime);
  font: 900 8px "Courier New", monospace;
  letter-spacing: .14em;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(207,255,66,.45);
}
.alien-btn {
  height: 38px;
  border: 1px solid rgba(98,244,232,.72);
  border-radius: 999px;
  color: #edfdf9;
  background:
    linear-gradient(90deg, rgba(168,140,255,.2), rgba(98,244,232,.14)),
    rgba(3, 18, 20, .9);
  font: 900 9px "Courier New", monospace;
  letter-spacing: .12em;
  cursor: pointer;
  clip-path: none;
  box-shadow: inset 0 0 22px rgba(98,244,232,.1), 0 0 22px rgba(98,244,232,.22);
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.alien-btn:hover, .alien-btn:focus-visible {
  color: #060b0b;
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(207,255,66,.45);
}
.alien-btn:active { transform: translateY(1px) scale(.96); }
.alien-count {
  height: 34px;
  display: grid;
  place-items: center;
  color: #eef1e8;
  background: rgba(1, 6, 7, .86);
  border: 1px solid rgba(207,255,66,.55);
  border-radius: 999px;
  font: 900 7px "Courier New", monospace;
  letter-spacing: .1em;
  box-shadow: 0 0 18px rgba(207,255,66,.18);
}
.stats {
  display: none;
}
.stat {
  width: 104px;
  padding: 12px 10px;
  border: 1px solid rgba(98,244,232,.18);
  background: rgba(1, 5, 6, .76);
  text-align: center;
  font: 900 8px "Courier New", monospace;
  color: #8d9792;
  letter-spacing: .08em;
}
.stat b { display: block; color: var(--cyan); font: 900 28px Arial, sans-serif; letter-spacing: 0; margin-bottom: 4px; }
.ticker {
  position: relative;
  z-index: 4;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 54px;
  overflow: hidden;
  align-items: center;
  background: linear-gradient(90deg, rgba(0,0,0,.9), rgba(20,9,43,.78), rgba(0,0,0,.9));
  border-top: 1px solid rgba(168,140,255,.36);
  color: #d7dce0;
  font: 900 15px "Courier New", monospace;
  letter-spacing: .12em;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  min-width: max-content;
  height: 100%;
  animation: tickerScroll 58s linear infinite;
}
.ticker span b { color: var(--cyan); }
.ticker span small { color: var(--lime); font-size: .66em; letter-spacing: .16em; }
.ticker i { width: 7px; height: 7px; background: var(--lime); display: inline-block; transform: rotate(45deg); box-shadow: 0 0 12px var(--lime); }
@keyframes signalPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px var(--lime); }
  50% { transform: scale(1.45); box-shadow: 0 0 26px var(--lime); }
}
@keyframes signalScroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes starDrift {
  from {
    transform: translate3d(0, 0, 0);
    filter: brightness(1);
  }
  50% {
    transform: translate3d(-1.1vw, .8vh, 0);
    filter: brightness(1.14);
  }
  to {
    transform: translate3d(-2.2vw, 1.6vh, 0);
    filter: brightness(1);
  }
}
@keyframes titleSignal {
  0%, 87%, 100% { transform: translateX(0); filter: none; }
  88% { transform: translateX(-1px); filter: brightness(1.18); }
  89% { transform: translateX(2px); }
  90% { transform: translateX(0); }
}
@keyframes glitchCyan {
  0%, 84%, 100% { opacity: 0; transform: translate(0, 0); }
  85% { opacity: .85; transform: translate(7px, -2px); clip-path: inset(0 0 68% 0); }
  86% { opacity: .45; transform: translate(-4px, 3px); clip-path: inset(18% 0 44% 0); }
  87% { opacity: 0; transform: translate(0, 0); }
}
@keyframes glitchViolet {
  0%, 72%, 100% { opacity: 0; transform: translate(0, 0); }
  73% { opacity: .75; transform: translate(-6px, 2px); clip-path: inset(52% 0 16% 0); }
  74% { opacity: .42; transform: translate(5px, -1px); clip-path: inset(36% 0 30% 0); }
  75% { opacity: 0; transform: translate(0, 0); }
}
@media (max-width: 980px) {
  body { overflow: auto; }
  .main { height: auto; min-height: 100vh; display: block; padding: 34px 18px 58px; }
  .copy { padding: 0 0 30px; }
  .board { min-height: 560px; height: 68vh; }
}
@media (max-width: 620px) {
  :root {
    --ticker-clearance: 54px;
    --nav-clearance: 38px;
    --board-content-lift: -24px;
  }
  h1 { font-size: 74px; }
  .copy > p { font-size: 17px; }
  .file { width: 136px; min-height: 142px; padding: 12px 11px; }
  .file h2 { font-size: 13px; margin-top: 12px; line-height: 1; }
  .thumb { height: 34px; margin: 7px 0 9px; }
  .file em { font-size: 7px; }
  .alien-nav { left: 12px; bottom: calc(15px + var(--ticker-clearance)); grid-template-columns: 64px 110px 64px; }
  .alien-btn { height: 42px; font-size: 8px; }
  .alien-count { font-size: 7px; }
  .ticker { height: 44px; font-size: 11px; }
}

/* Preserve the original constrained scene rather than scaling the board. */
main.scene {
  width: min(1140px, 100%);
  margin-inline: auto;
}

/* TF-AUD-07: keep the corkboard, put phone cards in readable document flow. */
@media (max-width: 620px) {
  .board { height: auto; min-height: 0; padding: 24px; }
  .board-title { position: relative; left: auto; top: auto; line-height: 1.4; }
  #strings { display: none; }
  body.page-id-5626 .board #files { position: relative !important; inset: auto !important; transform: none !important; display: grid; gap: 24px; margin: 28px 0; }
  .file, .file:hover { position: relative; left: auto !important; top: auto !important; width: 100%; min-height: 0; padding: 18px; transform: none !important; will-change: auto; }
  .file h2 { font-size: 23px; line-height: 1.15; overflow: visible; }
  .file small, .file em { font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
  .thumb { height: 100px; }
  body.page-id-5626 .board .alien-nav { position: relative; left: auto; bottom: auto !important; width: 100%; grid-template-columns: 1fr 1.3fr 1fr; margin-top: 40px; }
  .alien-count { font-size: 9px; }
}

/* TF-AUD-14: keep decorative motion optional and the stopped guide readable. */
.alien-motion { margin-top: 16px; width: auto; padding-inline: 16px; }
.scene[data-motion-paused] *,
.scene[data-motion-paused]::before, .scene[data-motion-paused]::after,
.scene[data-motion-paused] *::before, .scene[data-motion-paused] *::after {
  animation-play-state: paused !important;
  transition: none !important;
}
.scene[data-motion-paused] .signal-track {
  animation: none !important;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  white-space: normal;
}
.scene[data-motion-paused] .signal-track [aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .scene, .scene *, .scene::before, .scene::after,
  .scene *::before, .scene *::after {
    animation: none !important;
    transition: none !important;
  }
  .scene .signal-track {
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    white-space: normal;
  }
  .scene .signal-track [aria-hidden="true"] { display: none; }
  .alien-motion { display: none; }
}