@font-face {
  font-family: "VCR OSD Mono";
  src: url("../fonts/vcr-osd-mono.woff") format("woff"),
       url("../fonts/vcr-osd-mono.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   S.O.N.A.R. — Sexy Online Now Augmented Reality
   Shared stylesheet. Each page sets <body data-entity="...">
   to pick a world: sonar (default), dolphin, alien, angel.
   ========================================================= */

:root {
  --abyss: #0a1033;        /* deep sea-midnight base */
  --nebula: #2a1460;       /* cosmic violet */
  --signal: #5ff3ff;       /* sonar cyan */
  --pulse: #ff6ad5;        /* sexy-online magenta */
  --paper: #f3ecff;        /* text */
  --dim: #b9b0d9;          /* secondary text */
  --accent: var(--signal);
  --accent-2: var(--pulse);
  --win-face: #c9c3e6;     /* beveled window chrome */
  --win-light: #ffffff;
  --win-dark: #3b3463;
  --win-title-a: #2a1460;
  --win-title-b: #5ff3ff;

  --font-display: "VCR OSD Mono", "Courier New", monospace;
  --font-body: "Times New Roman", Times, Georgia, serif;
  --font-terminal: "VCR OSD Mono", "Courier New", monospace;

  color-scheme: dark;
}

body[data-entity="dolphin"] {
  --abyss: #021a33; --nebula: #064a6e;
  --accent: #3ee0e8; --accent-2: #9ff7ff;
  --win-title-a: #064a6e; --win-title-b: #3ee0e8;
}
body[data-entity="alien"] {
  --abyss: #050f0a; --nebula: #1b3a12;
  --accent: #9dff6a; --accent-2: #d4ff3a;
  --win-title-a: #1b3a12; --win-title-b: #9dff6a;
}
body[data-entity="angel"] {
  --abyss: #2a2140; --nebula: #6b5a8f;
  --accent: #ffd76a; --accent-2: #fff6d6;
  --win-title-a: #8a6a1f; --win-title-b: #ffd76a;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--abyss); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  text-align: center;
  /* tiled starfield, the way 1998 intended */
  background-color: var(--abyss);
  background-image:
    radial-gradient(1px 1px at 12px 18px, #fff 99%, transparent),
    radial-gradient(1px 1px at 73px 41px, #fff8 99%, transparent),
    radial-gradient(1.5px 1.5px at 140px 90px, #fff 99%, transparent),
    radial-gradient(1px 1px at 33px 120px, #fff6 99%, transparent),
    radial-gradient(1px 1px at 101px 150px, #fffa 99%, transparent),
    radial-gradient(ellipse at 50% -10%, var(--nebula), transparent 70%);
  background-size: 160px 170px, 160px 170px, 160px 170px, 160px 170px, 160px 170px, 100% 900px;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
}

/* faint CRT scanlines over everything */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  z-index: 50;
}

a { color: var(--accent); }
a:visited { color: var(--accent-2); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px dashed var(--accent);
  outline-offset: 3px;
}

.page { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

/* ---------- WordArt title ---------- */
.wordart {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(3rem, 13vw, 6.5rem);
  line-height: .95;
  letter-spacing: .02em;
  margin: .5rem 0 .25rem;
  background: linear-gradient(180deg, #fff 0%, var(--accent-2) 35%, var(--accent) 52%, #1a0f40 54%, var(--accent) 80%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(3px 3px 0 var(--nebula)) drop-shadow(6px 6px 0 rgba(0,0,0,.55));
}
.wordart.small { font-size: clamp(2.4rem, 9vw, 4.25rem); }

.tagline {
  font-style: italic;
  font-size: 1.25rem;
  color: var(--dim);
  margin: 0 0 1rem;
}

/* ---------- link bar, Joan Ocean style ---------- */
.linkbar {
  font-weight: bold;
  font-size: 1rem;
  line-height: 2;
  margin: 1rem 0;
}
.linkbar a { text-decoration: none; padding: 0 .15rem; color: var(--paper); }
.linkbar a:hover, .linkbar a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
.linkbar .br { color: var(--dim); }

/* literal underscore divider */
.divider {
  font-weight: bold;
  color: var(--dim);
  letter-spacing: -.05em;
  overflow: hidden;
  white-space: nowrap;
  margin: 2rem auto;
  max-width: 100%;
  user-select: none;
}

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden;
  border-top: 2px ridge var(--accent);
  border-bottom: 2px ridge var(--accent);
  background: rgba(0,0,0,.35);
  font-family: var(--font-terminal);
  font-size: 1.35rem;
  color: var(--accent);
  white-space: nowrap;
}
.ticker span { display: inline-block; padding-left: 100%; animation: tick 28s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }

/* ---------- beveled window (the modern-retro seam) ---------- */
.window {
  background: var(--win-face);
  color: #1a1433;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  box-shadow: 0 0 0 1px #000, 0 0 40px -6px var(--accent);
  margin: 2rem auto;
  text-align: left;
}
.window-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .2rem .4rem .2rem .6rem;
  background: linear-gradient(90deg, var(--win-title-a), var(--win-title-b));
  color: #fff;
  font-family: var(--font-terminal);
  font-size: 1.3rem;
  text-shadow: 1px 1px 0 #000;
}
.window-title .btns { display: flex; gap: 3px; }
.window-title .btns i {
  width: 18px; height: 16px;
  background: var(--win-face);
  border: 2px solid; border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
}
.window-body { padding: 1rem 1.1rem 1.2rem; }
.window-body.dark { background: #05071a; color: var(--paper); margin: .4rem; border: 2px inset var(--win-face); }

/* retro button */
.btn {
  font-family: var(--font-terminal);
  font-size: 1.4rem;
  line-height: 1;
  padding: .45rem 1.1rem .5rem;
  background: var(--win-face);
  color: #1a1433;
  border: 2px solid;
  border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  box-shadow: 0 0 0 1px #000;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:active { border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark); }
.btn.glow { background: var(--accent); box-shadow: 0 0 0 1px #000, 0 0 18px var(--accent); }
.btn[disabled] { opacity: .55; cursor: wait; }
a.btn, a.btn:visited { color: #1a1433; }

/* ---------- landing: ad TV ---------- */
.tv { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.tv video, .tv canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .tv-label {
  position: absolute; left: 0; right: 0; bottom: 10%;
  font-family: var(--font-terminal); font-size: 1.6rem; color: #fff;
  text-align: center; text-shadow: 0 0 8px var(--accent);
}
.tv .tv-play {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
}

/* ---------- landing: sonar router ---------- */
.radar-wrap { display: grid; place-items: center; padding: .5rem 0 1rem; }
#radar { width: min(100%, 340px); aspect-ratio: 1; display: block; }
.radar-status {
  font-family: var(--font-terminal);
  font-size: 1.6rem;
  color: var(--accent);
  min-height: 2.2em;
  text-align: center;
  margin: .25rem 0 .75rem;
}
.transmit label { display: block; font-family: var(--font-terminal); font-size: 1.3rem; color: var(--dim); margin-bottom: .3rem; }
.transmit textarea, .chat-form input, .form input, .form textarea, .form select {
  width: 100%;
  font-family: var(--font-terminal);
  font-size: 1.35rem;
  color: var(--accent);
  background: #000;
  border: 2px inset var(--win-face);
  padding: .5rem .6rem;
  resize: vertical;
}
.transmit .row { display: flex; justify-content: center; margin-top: .8rem; }

/* ---------- entity cards on landing ---------- */
.beings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.being {
  text-decoration: none;
  color: var(--paper);
  padding: 1rem .5rem;
  border: 3px double var(--c);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%);
}
.being:visited { color: var(--paper); }
.being .glyph { font-size: 3.5rem; display: block; animation: bob 4s ease-in-out infinite; }
.being:nth-child(2) .glyph { animation-delay: -1.3s; }
.being:nth-child(3) .glyph { animation-delay: -2.6s; }
.being b { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; display: block; color: var(--c); }
.being small { color: var(--dim); font-style: italic; }
.being:hover { box-shadow: 0 0 24px var(--c); }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- entity page ---------- */
.portrait {
  font-size: 7rem; line-height: 1;
  width: 11rem; height: 11rem; margin: 1rem auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%);
  animation: bob 5s ease-in-out infinite;
}
.portrait img { max-width: 100%; border-radius: 50%; }
.bio p { margin: 0 0 1em; max-width: 62ch; }
.placeholder { color: #6a6290; font-style: italic; }
.window-body.dark .placeholder { color: var(--dim); }

.chat-log {
  height: 18rem; overflow-y: auto;
  font-family: var(--font-terminal); font-size: 1.35rem; line-height: 1.3;
  padding: .5rem; display: flex; flex-direction: column; gap: .6rem;
}
.msg { max-width: 85%; padding: .35rem .6rem; }
.msg.you { align-self: flex-end; color: var(--paper); border: 1px dashed var(--dim); }
.msg.being { align-self: flex-start; color: var(--accent); border: 1px solid var(--accent); }
.msg .who { display: block; font-size: 1rem; opacity: .7; }
.chat-form { display: flex; gap: .5rem; padding: .4rem; }
.chat-form input { flex: 1; }

.descend { margin: 2.5rem 0; }
.descend .btn { font-size: 1.7rem; }

/* ---------- meditation page ---------- */
.chamber { aspect-ratio: 4 / 3; position: relative; background: #000; display: grid; place-items: center; overflow: hidden; }
.chamber .portrait { margin: 0; }
.progress { height: 10px; background: #000; border: 2px inset var(--win-face); margin: .75rem 0 .25rem; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.time { font-family: var(--font-terminal); font-size: 1.2rem; color: var(--dim); text-align: right; }

/* ---------- archive + gallery + testimonies ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0; }
.filters .btn[aria-pressed="true"] { background: var(--accent); }
.log-entry { border-bottom: 1px dashed var(--win-dark); padding: .8rem 0; }
.log-entry:last-child { border-bottom: 0; }
.log-entry h3 { margin: 0; font-family: var(--font-display); font-style: italic; }
.log-entry .meta { font-family: var(--font-terminal); font-size: 1.15rem; color: #4a4275; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .8rem; }
.gallery figure { margin: 0; background: #000; aspect-ratio: 1; display: grid; place-items: center; color: var(--dim); font-family: var(--font-terminal); border: 2px inset var(--win-face); }
.testimony { background: #fff8e6; color: #2a1e10; border: 1px solid #b8a27a; padding: .8rem 1rem; margin: 0 0 .8rem; font-style: italic; }
.testimony footer { font-style: normal; font-weight: bold; margin-top: .3rem; }
.form { display: grid; gap: .7rem; }
.form label { font-family: var(--font-terminal); font-size: 1.25rem; }

/* ---------- footer ---------- */
.counter {
  display: inline-block;
  font-family: var(--font-terminal);
  font-size: 1.4rem;
  background: #000;
  color: #ff3b3b;
  border: 2px inset var(--win-face);
  padding: 0 .5rem;
  letter-spacing: .15em;
}
.site-footer { color: var(--dim); font-size: .95rem; margin-top: 2rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 560px) {
  .beings { grid-template-columns: 1fr; }
  .window-title { font-size: 1.05rem; }
  .window-title span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .tv .tv-label { font-size: 1.15rem; }
  .chat-log { height: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker span { padding-left: 0; white-space: normal; }
}

/* small home logo on inner pages */
.wordart.mini, .wordart.mini:visited { color: transparent; display: inline-block; font-size: 2rem; text-decoration: none; margin: 0 0 1rem; filter: drop-shadow(2px 2px 0 var(--nebula)); }

/* =========================================================
   PHONE-FIRST LAYER
   ========================================================= */
html { -webkit-text-size-adjust: 100%; }
body {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* room for the taskbar + iPhone home indicator */
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
.page {
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  padding-left: max(.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(.75rem, env(safe-area-inset-right, 0px));
}
.btn { min-height: 44px; }
.chat-log { height: min(18rem, 45dvh); }

/* ---------- taskbar + start menu ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex; align-items: center; gap: .4rem;
  height: calc(52px + env(safe-area-inset-bottom, 0px));
  padding: 4px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
  background: var(--win-face);
  border-top: 2px solid var(--win-light);
  box-shadow: 0 -1px 0 #000, 0 -8px 30px -10px var(--accent);
  font-family: var(--font-terminal);
  color: #1a1433;
  text-align: left;
  transition: transform .2s;
}
body.typing .taskbar { transform: translateY(110%); }  /* get out of the keyboard's way */

.start-btn {
  height: 42px; padding: 0 .8rem;
  font: inherit; font-size: 1.45rem; font-weight: bold; color: #1a1433;
  background: var(--win-face);
  border: 2px solid; border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  box-shadow: 0 0 0 1px #000;
  cursor: pointer;
}
.start-btn[aria-expanded="true"] { border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark); background: #b3acd6; }
.task-here {
  flex: 1; min-width: 0;
  height: 42px; line-height: 38px; padding: 0 .6rem;
  font-size: 1.3rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border: 2px solid; border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
}
.task-clock {
  height: 42px; line-height: 38px; padding: 0 .6rem;
  font-size: 1.3rem;
  border: 2px solid; border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
}

.start-menu {
  position: absolute; left: max(6px, env(safe-area-inset-left, 0px));
  bottom: calc(100% + 2px);
  display: flex;
  width: min(19rem, calc(100vw - 12px));
  background: var(--win-face);
  border: 2px solid; border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light);
  box-shadow: 0 0 0 1px #000, 0 0 40px -6px var(--accent);
}
.start-side {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: .6rem .3rem;
  background: linear-gradient(0deg, var(--win-title-a), var(--win-title-b));
  color: #fff;
  font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.6rem;
  text-shadow: 1px 1px 0 #000;
}
.start-menu ul { list-style: none; margin: 0; padding: .3rem 0; flex: 1; }
.start-menu a {
  display: flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: 0 .9rem;
  font-size: 1.5rem; color: #1a1433; text-decoration: none;
}
.start-menu a span { font-size: 1.5rem; }
.start-menu a:hover, .start-menu a:focus-visible, .start-menu a[aria-current="page"] {
  background: var(--win-title-a); color: #fff; outline: none;
}

@media (max-width: 700px) {
  body { font-size: 1.0625rem; }
  .linkbar { display: none; }               /* the taskbar takes over on phones */
  .window { margin: 1.25rem auto; }
  .window-body { padding: .8rem .8rem 1rem; }
  .window-body.dark { margin: .3rem; }
  .divider { margin: 1.25rem auto; }
  .ticker { font-size: 1.2rem; }
  .chamber { aspect-ratio: 3 / 4; }          /* portrait, ready for the front camera */
  .portrait { font-size: 5.5rem; width: 9rem; height: 9rem; }
  .descend .btn { font-size: 1.35rem; width: 100%; padding: .7rem .5rem; }
  .filters .btn { font-size: 1.2rem; padding: .4rem .7rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .msg { max-width: 92%; }
}
@media (max-width: 380px) {
  .task-clock { display: none; }
}
.start-menu a { white-space: nowrap; }
@media (max-width: 700px) {
  /* keep the question box on the first screen */
  #radar { width: min(100%, 300px, 30dvh); }
  .radar-status { font-size: 1.35rem; min-height: 1.6em; margin: 0 0 .5rem; }
  .radar-wrap { padding: 0 0 .25rem; }
  .ticker { display: none; }
  .tagline { margin-bottom: .5rem; }
  header .wordart { margin-top: 0; }
}
@media (max-width: 700px) {
  /* chamber + play button share one screen */
  .chamber { aspect-ratio: auto; height: 48dvh; }
  .time { margin: 0 0 .25rem; }
}

/* ---------- pixel computer logo (replaces the curly serif) ---------- */
:root { --font-pixel: "Press Start 2P", "VT323", "Courier New", monospace; }
.wordart {
  font-family: var(--font-pixel);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2rem, 9.5vw, 5rem);
  line-height: 1.25;
  letter-spacing: 0;
  padding-top: .1em;
  /* chunky banded chrome, like a 90s screen font */
  background: linear-gradient(180deg, #fff 0%, var(--accent-2) 30%, var(--accent) 50%, #1a0f40 51%, var(--accent) 70%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(4px 4px 0 var(--nebula)) drop-shadow(8px 8px 0 rgba(0,0,0,.55));
}
.wordart.small { font-size: clamp(1.3rem, 6.2vw, 2.9rem); line-height: 1.35; }
.wordart.mini, .wordart.mini:visited { font-size: 1.05rem; filter: drop-shadow(2px 2px 0 var(--nebula)); }
.start-side { font-family: var(--font-pixel); font-style: normal; font-weight: 400; font-size: 1rem; }

.tagline.caps { font-style: normal; letter-spacing: .14em; font-size: 1.05rem; }
@media (max-width: 700px) {
  .tagline.caps { font-size: .8rem; letter-spacing: .1em; }
}


/* =========================================================
   TWINKLING PIXEL STARFIELD (old-school animated GIF energy)
   ========================================================= */
body {
  background-image: radial-gradient(ellipse at 50% -10%, var(--nebula), transparent 70%);
  background-size: 100% 900px;
  background-repeat: no-repeat;
}
.starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.starfield i { position: absolute; inset: 0; background-repeat: repeat; will-change: opacity; }
.starfield i:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='331' height='331'%3E%3Crect x='290' y='181' width='2' height='10' fill='%23fff'/%3E%3Crect x='286' y='185' width='10' height='2' fill='%23fff'/%3E%3Crect x='116' y='209' width='2' height='10' fill='%23fff'/%3E%3Crect x='112' y='213' width='10' height='2' fill='%23fff'/%3E%3Crect x='150' y='281' width='2' height='2' fill='%23ffd6f5'/%3E%3Crect x='220' y='135' width='2' height='2' fill='%23fff'/%3E%3Crect x='291' y='128' width='1' height='1' fill='%23bdf6ff'/%3E%3Crect x='179' y='31' width='3' height='3' fill='%23fff'/%3E%3Crect x='252' y='312' width='3' height='3' fill='%23fff'/%3E%3Crect x='124' y='252' width='2' height='2' fill='%23ffd6f5'/%3E%3Crect x='24' y='154' width='3' height='3' fill='%23fff'/%3E%3Crect x='42' y='60' width='1' height='1' fill='%23fff'/%3E%3Crect x='32' y='147' width='3' height='3' fill='%23fff'/%3E%3Crect x='84' y='180' width='1' height='1' fill='%23fff'/%3E%3Crect x='129' y='199' width='3' height='3' fill='%23fff'/%3E%3Crect x='192' y='237' width='3' height='3' fill='%23fff'/%3E%3Crect x='194' y='306' width='2' height='2' fill='%23ffd6f5'/%3E%3Crect x='40' y='89' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E"); animation: twinkle 1.4s steps(2, jump-none) infinite; }
.starfield i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='457' height='457'%3E%3Crect x='422' y='79' width='2' height='10' fill='%23ffe9a8'/%3E%3Crect x='418' y='83' width='10' height='2' fill='%23ffe9a8'/%3E%3Crect x='192' y='164' width='2' height='10' fill='%23ffe9a8'/%3E%3Crect x='188' y='168' width='10' height='2' fill='%23ffe9a8'/%3E%3Crect x='257' y='377' width='2' height='10' fill='%23ffd6f5'/%3E%3Crect x='253' y='381' width='10' height='2' fill='%23ffd6f5'/%3E%3Crect x='405' y='49' width='1' height='1' fill='%23fff'/%3E%3Crect x='390' y='309' width='1' height='1' fill='%23fff'/%3E%3Crect x='204' y='46' width='3' height='3' fill='%23ffd6f5'/%3E%3Crect x='319' y='318' width='3' height='3' fill='%23fff'/%3E%3Crect x='142' y='131' width='2' height='2' fill='%23fff'/%3E%3Crect x='429' y='104' width='3' height='3' fill='%23ffe9a8'/%3E%3Crect x='158' y='150' width='2' height='2' fill='%23bdf6ff'/%3E%3Crect x='337' y='77' width='2' height='2' fill='%23ffe9a8'/%3E%3Crect x='171' y='52' width='3' height='3' fill='%23fff'/%3E%3Crect x='445' y='98' width='2' height='2' fill='%23ffd6f5'/%3E%3Crect x='24' y='82' width='2' height='2' fill='%23ffe9a8'/%3E%3Crect x='364' y='191' width='3' height='3' fill='%23bdf6ff'/%3E%3Crect x='245' y='76' width='2' height='2' fill='%23fff'/%3E%3Crect x='197' y='196' width='3' height='3' fill='%23ffd6f5'/%3E%3Crect x='330' y='171' width='2' height='2' fill='%23fff'/%3E%3C/svg%3E"); animation: twinkle 2.2s steps(2, jump-none) infinite .5s; }
.starfield i:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='587' height='587'%3E%3Crect x='50' y='324' width='2' height='10' fill='%23fff'/%3E%3Crect x='46' y='328' width='10' height='2' fill='%23fff'/%3E%3Crect x='399' y='201' width='2' height='10' fill='%23bdf6ff'/%3E%3Crect x='395' y='205' width='10' height='2' fill='%23bdf6ff'/%3E%3Crect x='160' y='178' width='2' height='10' fill='%23fff'/%3E%3Crect x='156' y='182' width='10' height='2' fill='%23fff'/%3E%3Crect x='357' y='144' width='2' height='10' fill='%23ffd6f5'/%3E%3Crect x='353' y='148' width='10' height='2' fill='%23ffd6f5'/%3E%3Crect x='444' y='465' width='3' height='3' fill='%23ffd6f5'/%3E%3Crect x='385' y='472' width='2' height='2' fill='%23fff'/%3E%3Crect x='128' y='321' width='2' height='2' fill='%23bdf6ff'/%3E%3Crect x='157' y='562' width='2' height='2' fill='%23bdf6ff'/%3E%3Crect x='332' y='283' width='2' height='2' fill='%23ffd6f5'/%3E%3Crect x='86' y='257' width='2' height='2' fill='%23bdf6ff'/%3E%3Crect x='139' y='399' width='2' height='2' fill='%23ffd6f5'/%3E%3Crect x='241' y='482' width='3' height='3' fill='%23fff'/%3E%3Crect x='452' y='242' width='2' height='2' fill='%23bdf6ff'/%3E%3Crect x='76' y='39' width='1' height='1' fill='%23fff'/%3E%3Crect x='60' y='312' width='3' height='3' fill='%23fff'/%3E%3Crect x='356' y='294' width='3' height='3' fill='%23ffe9a8'/%3E%3Crect x='110' y='561' width='3' height='3' fill='%23fff'/%3E%3Crect x='490' y='53' width='3' height='3' fill='%23fff'/%3E%3Crect x='505' y='8' width='3' height='3' fill='%23bdf6ff'/%3E%3Crect x='494' y='250' width='3' height='3' fill='%23fff'/%3E%3C/svg%3E"); animation: twinkle 3.1s steps(3, jump-none) infinite 1.1s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
.page { position: relative; z-index: 1; }

/* =========================================================
   PIXEL LOGO
   ========================================================= */
.wordart.logo {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.9rem, 8.6vw, 5rem);
  line-height: 1.15;
  letter-spacing: 0;
  margin: .6rem 0 .6rem;
  /* hard-edged bands instead of smooth chrome, like an 8-bit title screen */
  background: linear-gradient(180deg, #fff 0 22%, var(--accent-2) 22% 44%, var(--accent) 44% 66%, var(--pulse) 66% 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(4px 4px 0 var(--nebula)) drop-shadow(4px 4px 0 #000);
}
.wordart.mini.logo { font-size: 1.1rem; margin: 0 0 1.2rem; filter: drop-shadow(2px 2px 0 #000); }
.tagline.caps {
  font-style: normal;
  font-family: var(--font-terminal);
  font-size: 1.45rem;
  letter-spacing: .12em;
  color: var(--accent);
}
@media (max-width: 700px) {
  .tagline.caps { font-size: 1.1rem; letter-spacing: .06em; }
}


/* =========================================================
   TWO FONTS ONLY: VCR OSD Mono + Times New Roman
   VCR has one weight, so never fake-bold or italicize it.
   ========================================================= */
.wordart, .wordart.logo, .start-btn, .start-side, .being b, .log-entry h3, h1.wordart {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
}
.wordart { letter-spacing: 0; line-height: 1.1; }
.wordart.small { font-size: clamp(1.9rem, 8vw, 3.4rem); margin: .4rem 0 .35rem; }
.wordart.logo { font-size: clamp(2.6rem, 11vw, 6rem); }
.wordart.mini.logo { font-size: 1.3rem; }
.being b { font-size: 1.35rem; letter-spacing: .04em; }
.start-side { font-size: 1.4rem; letter-spacing: .1em; }
.log-entry h3 { font-size: 1.3rem; }

/* VCR runs larger than the old terminal font: rebalance sizes */
.ticker { font-size: 1.05rem; padding: .3rem 0; }
.window-title { font-size: 1.05rem; padding-top: .3rem; padding-bottom: .3rem; }
.btn { font-size: 1.1rem; padding: .55rem 1rem; }
.descend .btn { font-size: 1.2rem; }
.radar-status { font-size: 1.2rem; }
.transmit label, .form label { font-size: 1rem; }
.transmit textarea, .chat-form input, .form input, .form textarea, .form select { font-size: 1.05rem; }
.chat-log { font-size: 1.05rem; line-height: 1.35; }
.msg .who { font-size: .8rem; }
.log-entry .meta, .time { font-size: .95rem; }
.counter { font-size: 1.15rem; }
.tv .tv-label { font-size: 1.25rem; }
.start-btn { font-size: 1.15rem; }
.task-here, .task-clock { font-size: 1.05rem; }
.start-menu a { font-size: 1.15rem; }
.tagline.caps { font-size: 1.15rem; letter-spacing: .08em; }
@media (max-width: 700px) {
  .tagline.caps { font-size: .85rem; letter-spacing: .03em; }
  .window-title { font-size: .95rem; }
  .radar-status { font-size: 1.05rem; }
  .descend .btn { font-size: 1.05rem; }
  .filters .btn { font-size: .95rem; }
  .ticker { font-size: .95rem; }
  .start-menu a { font-size: 1.1rem; }
}
/* phones: inputs must stay >= 16px so iOS doesn't zoom */
.transmit textarea, .chat-form input, .form input, .form textarea, .form select { font-size: max(16px, 1.05rem); }
/* hard-banded VCR titles everywhere (no dark band through the letters) */
.wordart {
  background: linear-gradient(180deg, #fff 0 30%, var(--accent-2) 30% 55%, var(--accent) 55% 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(3px 3px 0 var(--nebula)) drop-shadow(3px 3px 0 #000);
}
.wordart.logo {
  background: linear-gradient(180deg, #fff 0 22%, var(--accent-2) 22% 44%, var(--accent) 44% 66%, var(--pulse) 66% 100%);
  -webkit-background-clip: text; background-clip: text;
}
.tagline.caps { font-size: 1.35rem; }
.ticker { font-size: 1.2rem; }
@media (max-width: 700px) {
  .tagline.caps { font-size: .95rem; }
  .ticker { font-size: 1rem; }
}