:root {
  --bg-void: #050506;
  --ink: #f0eef5;
  --ink-dim: #85839a;
  --violet: #9b3df0;
  --glow: #c98bff;
  --flag: #ff5577;

  --mono: 'Courier New', Courier, monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg-void);
}
body {
  font-family: var(--mono);
  color: var(--ink);
  position: relative;
  overflow-x: hidden;
}
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--bg-void);
  background-size: cover;
  background-position: center;
  filter: saturate(0.8) brightness(0.6);
}
.bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 900px 1100px at center, rgba(5,5,6,0.4) 0%, rgba(5,5,6,0.82) 75%);
}
.noise-layer {
  position: fixed;
  inset: -50px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 0.6s steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}
.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 4;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.045) 0px,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  animation: roll 9s linear infinite;
}
@keyframes roll {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100px; }
}
.vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 4;
  box-shadow: inset 0 0 200px 60px rgba(0,0,0,0.8);
}
.crt-flicker {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: rgba(255,255,255,0.015);
  animation: flicker 4.2s infinite;
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 0; }
  97% { opacity: 1; }
  98% { opacity: 0; }
  99% { opacity: 0.6; }
}
body.channel-change .page,
body.channel-change .bg-layer {
  animation: channel-roll 0.5s steps(8);
}
body.channel-change .page {
  filter: contrast(1.5) brightness(1.7) saturate(0.3);
}
@keyframes channel-roll {
  0%   { transform: translateY(0); }
  15%  { transform: translateY(-8px); }
  30%  { transform: translateY(6px); }
  45%  { transform: translateY(-4px); }
  60%  { transform: translateY(3px); }
  75%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}
.page {
  position: relative;
  z-index: 3;
  max-width: 460px;
  margin: 0 auto;
  padding: 90px 24px 120px;
  animation: fade-in 0.9s ease-out;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 44px;
}
.avatar {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.03);
}
.name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: 0.5px;
  margin: 22px 0 0;
}
.divider {
  color: var(--ink-dim);
  opacity: 0.5;
  letter-spacing: 4px;
  font-size: 13px;
  margin: 40px 0;
  text-align: center;
}
.block {
  margin: 0 0 40px;
  text-align: left;
}
.label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(133, 131, 154, 0.25);
}
.linklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linklist li {
  margin: 9px 0;
}
.linklist a {
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.2px;
}
.linklist a:hover,
.linklist a:focus-visible {
  color: var(--glow);
  text-decoration: underline;
  outline: none;
}
.aside {
  color: var(--ink-dim);
  font-size: 13px;
  opacity: 0.7;
  margin-top: 36px;
  min-height: 16px;
}
.clock {
  position: fixed;
  right: 16px;
  bottom: 14px;
  z-index: 6;
  font-family: var(--mono);
  color: var(--ink-dim);
  text-align: right;
  pointer-events: none;
}
.clock-date {
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.8;
  margin-bottom: 2px;
}
.clock-time {
  font-size: 18px;
  letter-spacing: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
  .crt-flicker { animation: none; }
  .scanlines { animation: none; }
  .noise-layer { animation: none; opacity: 0.025; }
}
@media (max-width: 480px) {
  .bg-layer {
    top: 50%;
    left: 0;
    right: 0;
    bottom: auto;
    height: 84vh;
    transform: translateY(-50%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .page { padding: 56px 22px 90px; }
  .avatar { width: 92px; height: 92px; }
  .name { font-size: 27px; }
  .divider { margin: 30px 0; }
  .block { margin-bottom: 32px; }
  .linklist a { font-size: 15.5px; }
  .clock { right: 12px; bottom: 10px; }
  .clock-time { font-size: 14px; }
  .clock-date { font-size: 10px; }
}