:root{
  --bg:#07080a;
  --bg2:#0b0d12;
  --fg:#e8e8e8;
  --dim:rgba(232,232,232,0.65);
  --line:rgba(255,255,255,0.10);
  --neon:#aaff66;
  --vio:#a66bff;
  --red:#ff3b6b;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --retro: "VT323", ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(166,107,255,0.14), transparent 55%),
    radial-gradient(900px 520px at 18% 42%, rgba(170,255,102,0.08), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--fg);
  font-family:var(--mono);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

.scanlines, .noise{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:10;
}
.scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 1px,
    transparent 2px,
    transparent 6px
  );
  opacity:0.33;
  mix-blend-mode:overlay;
}
.noise{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:0.22;
  mix-blend-mode:overlay;
}

.topbar{
  position:sticky;
  top:0;
  z-index:9;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(5,6,8,0.88), rgba(5,6,8,0.62));
  backdrop-filter: blur(8px);
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 14px rgba(170,255,102,0.55);
}
.brandName{
  font-family:var(--retro);
  font-size:28px;
  letter-spacing:1px;
}
.brandSub{
  color:rgba(232,232,232,0.55);
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.nav a{
  font-size:12px;
  color:rgba(232,232,232,0.65);
  text-transform:uppercase;
  letter-spacing:1.2px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:12px;
}
.nav a:hover{
  color:var(--fg);
  border-color:rgba(170,255,102,0.35);
  box-shadow:0 0 0 3px rgba(170,255,102,0.08) inset;
}

.shell{
  max-width:1100px;
  margin:0 auto;
  padding:22px 16px 46px;
}
.panel{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.24);
  border-radius:22px;
  box-shadow:0 22px 70px rgba(0,0,0,0.52);
  overflow:hidden;
}
.panelTitle{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.28);
  color:rgba(232,232,232,0.66);
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:12px;
}
.panelBody{padding:16px 14px}

.h1{
  font-family:var(--retro);
  font-size:74px;
  letter-spacing:6px;
  text-transform:uppercase;
  line-height:0.92;
  margin:0;
  text-shadow:0 0 26px rgba(170,255,102,0.18), 0 0 24px rgba(166,107,255,0.15);
}
.h2{
  font-family:var(--retro);
  font-size:44px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0 0 12px;
}
.p{
  margin:10px 0 0;
  color:rgba(232,232,232,0.74);
  line-height:1.65;
  font-size:14px;
}
.glow{color:#f2fff0; text-shadow:0 0 14px rgba(170,255,102,0.28), 0 0 14px rgba(166,107,255,0.22)}

.btnRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.20);
  color:rgba(255,255,255,0.90);
  padding:10px 14px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-size:12px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(170,255,102,0.40);
  box-shadow:0 0 0 3px rgba(170,255,102,0.08) inset, 0 18px 34px rgba(0,0,0,0.35);
}
.btnPrimary{
  border-color:rgba(170,255,102,0.55);
  box-shadow:0 0 18px rgba(170,255,102,0.12);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.20);
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:rgba(232,232,232,0.62);
}
.badgeDot{
  width:8px;height:8px;border-radius:50%;
  background:var(--vio);
  box-shadow:0 0 12px rgba(166,107,255,0.45);
}

.grid2{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:14px;
}
@media (max-width: 900px){
  .grid2{grid-template-columns: 1fr}
  .nav{display:none}
  .h1{font-size:58px; letter-spacing:4px}
}

.hr{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  margin:16px 0;
}

.kv{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:10px 12px;
  font-size:13px;
  color:rgba(232,232,232,0.74);
}
.kv .k{color:rgba(232,232,232,0.55); text-transform:uppercase; letter-spacing:1.1px; font-size:12px}
.kv .v{color:rgba(255,255,255,0.86)}
.small{color:rgba(232,232,232,0.55); font-size:12px; line-height:1.55}

/* Timeline */
.feed{
  display:grid;
  gap:12px;
}
.post{
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.22);
  overflow:hidden;
}
.postHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.22);
}
.postAuthor{
  font-family:var(--retro);
  font-size:26px;
  letter-spacing:1px;
}
.postMeta{
  color:rgba(232,232,232,0.6);
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.postBody{padding:12px 12px}
.postText{
  color:rgba(255,255,255,0.78);
  font-size:14px;
  line-height:1.62;
  white-space:pre-wrap;
}
.postImg{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  display:block;
  margin-top:10px;
  background:rgba(255,255,255,0.04);
}
.memescore{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.memeBar{
  flex:1;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
}
.memeFill{
  height:100%;
  width:42%;
  background:linear-gradient(90deg, rgba(170,255,102,0.85), rgba(166,107,255,0.85));
  box-shadow:0 0 18px rgba(170,255,102,0.25);
}
.memeLabel{
  font-family:var(--retro);
  font-size:22px;
  letter-spacing:1px;
  min-width:90px;
  text-align:right;
}

.reacts{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.reactBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.18);
  cursor:pointer;
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.78);
}
.reactBtn:hover{
  border-color:rgba(170,255,102,0.35);
  color:rgba(255,255,255,0.92);
}
.reactBtn.on{
  border-color:rgba(170,255,102,0.55);
  box-shadow:0 0 0 3px rgba(170,255,102,0.08) inset;
  color:rgba(255,255,255,0.92);
}
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:99;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.42);
  color:rgba(255,255,255,0.85);
  font-size:12px;
  letter-spacing:1px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(-2px)}
.input, textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.18);
  color:rgba(255,255,255,0.88);
  padding:10px 12px;
  outline:none;
  font-size:14px;
}
label{display:block; margin:10px 0 6px; color:rgba(232,232,232,0.62); font-size:12px; letter-spacing:1.2px; text-transform:uppercase}
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width: 720px){ .row{grid-template-columns:1fr} }


/* Background Snake (no HUD) */
#snakeCanvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
  opacity:0.92;
  filter:contrast(1.18) saturate(1.08);
}
/* Keep UI above snake */
.topbar{ position:sticky; z-index:9; }
.shell{ position:relative; z-index:3; }


/* Icon links used in timeline header */
.iconLinks{
  display:flex;
  align-items:center;
  gap:10px;
}
.iconBtn{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.20);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 3px rgba(170,255,102,0.06) inset;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.iconBtn img{
  width:26px;
  height:26px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 0 10px rgba(170,255,102,0.12));
}
.iconBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(170,255,102,0.40);
  box-shadow:0 0 0 3px rgba(170,255,102,0.08) inset, 0 18px 34px rgba(0,0,0,0.35);
}


/* TOKEN PAGE */
.tokenHero{ padding-top: 22px; }
.tokenPanel{ max-width: 1200px; }
.tokenGrid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .tokenGrid{ grid-template-columns: 1fr; }
}
.tokenAside{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,0.18);
}
.miniTitle{
  font-family: 'Press Start 2P', system-ui;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .86;
  margin-bottom: 10px;
}
.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  align-items: baseline;
}
.kv .k{ opacity: .65; font-size: 12px; letter-spacing:.06em; }
.kv .v{ text-align:right; font-size: 13px; }
.story{ margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.12); }
.story .p{ margin: 6px 0; }
.chartHdr{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.iconLinks{ display:flex; gap: 10px; }
.iconBtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .15s ease, border-color .15s ease;
}
.iconBtn:hover{ transform: translateY(-1px); border-color: rgba(0,255,120,0.35); }
.iconBtn img{ width: 26px; height: 26px; display:block; }
.chartFrame{
  border: 1px solid rgba(0,255,120,0.22);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(0,0,0,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 22px 80px rgba(0,0,0,0.45);
}
.chartFallback{ padding: 14px; }
.small{ font-size: 11px; }


/* Token page: center the widget block */
.tokenCenterWrap{
  width:100%;
  min-height: calc(100dvh - var(--header-height));
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Make token page grid centered and nicer */
.tokenCenterWrap .grid{
  width:min(1100px, 100%);
  margin:0 auto;
}
/* Ensure iframe panel stays centered */
.tokenCenterWrap iframe{
  display:block;
  margin:0 auto;
}


/* Token page: hard-center the entire token widget */
body.tokenPage{
  min-height:100dvh;
}
body.tokenPage .tokenShell{
  max-width:none;
  width:100%;
}
body.tokenPage .tokenStage{
  min-height: calc(100dvh - var(--header-height));
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--size-md);
}
/* Center the main panel itself */
body.tokenPage .tokenStage > .panel{
  width: min(1200px, 100%);
  margin: 0 auto;
}
/* If layout is panel -> panelBody -> grid, keep grid centered */
body.tokenPage .tokenStage .grid{
  width:100%;
  margin:0 auto;
}


/* TOKEN PAGE CENTER FIX */
body.tokenPage main.page{
  min-height: calc(100dvh - var(--header-height));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--size-md);
}
body.tokenPage .tokenHero{
  width:100%;
  padding-top: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
body.tokenPage .tokenPanel{
  width: min(1200px, 100%);
  margin: 0 auto;
}


/* VHS OVERLAY (landing) */
#vhsOverlay{
  position: fixed;
  inset: 0;
  z-index: 2; /* above background/snake, below UI */
  pointer-events: none;
  background-image: url(/assets/fx/vhs.gif);
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  mix-blend-mode: screen;
  filter: saturate(0.9) contrast(1.05);
}

/* Make sure UI stays above overlay */
.topbar{ position: sticky; z-index: 9; }
.shell{ position: relative; z-index: 5; }

/* TOPBAR REC (landing) */
.topbarInner.topbarGrid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
/* Existing left/right items should sit naturally; we force center */
.topbarCenter{
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 0.9;
}
#topbarRec{
  height: 22px;
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(255,0,64,0.25));
}

/* On small screens, keep it subtle */
@media (max-width: 560px){
  #topbarRec{ height: 18px; }
  #vhsOverlay{ opacity: 0.11; }
}



/* FIX: VHS overlay as animated IMG (landing only) */
#vhsOverlay{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  z-index: 2; /* above background/snake, below UI */
  opacity: 0.18;
  mix-blend-mode: screen;
  filter: saturate(0.95) contrast(1.08);
  will-change: transform;
  animation: vhsFloat 4.2s linear infinite;
}
@keyframes vhsFloat{
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-0.6px, 0.4px, 0); }
  50%  { transform: translate3d(0.4px, -0.6px, 0); }
  75%  { transform: translate3d(0.7px, 0.2px, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* Make sure UI is above overlay */
.topbar{ z-index: 9; }
.shell{ position: relative; z-index: 5; }

/* FIX: REC centered in topbar without moving the brand */
.topbarRec{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 34px;
  width: auto;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 0.95;
  filter: drop-shadow(0 0 12px rgba(255, 0, 64, 0.28));
}
@media (max-width: 560px){
  .topbarRec{ height: 26px; }
  #vhsOverlay{ opacity: 0.14; }
}


/* VHS FIX v3: animate provided "gif" as a moving texture (works even if it is 1 frame) */
#vhsOverlay{
  position: fixed;
  inset: 0;
  z-index: 2; /* above background/snake, below UI */
  pointer-events: none;
}
#vhsOverlay::before{
  content:"";
  position:absolute;
  inset: -18%;
  background-image: url(/assets/fx/vhs.gif);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  mix-blend-mode: screen;
  filter: saturate(0.95) contrast(1.10);
  animation: vhsTextureMove 2.2s steps(14, end) infinite;
  will-change: transform;
}
#vhsOverlay::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px
    );
  opacity: 0.08;
  mix-blend-mode: overlay;
  animation: vhsScan 6s linear infinite;
  will-change: transform;
}

/* occasional "tracking" bright bar */
#vhsOverlay .vhsBar{
  display:none;
}
@keyframes vhsTextureMove{
  0%   { transform: translate3d(0,0,0) scale(1.03); }
  20%  { transform: translate3d(-8px, 4px, 0) scale(1.03); }
  40%  { transform: translate3d(6px, -6px, 0) scale(1.03); }
  60%  { transform: translate3d(-10px, -2px, 0) scale(1.03); }
  80%  { transform: translate3d(8px, 6px, 0) scale(1.03); }
  100% { transform: translate3d(0,0,0) scale(1.03); }
}
@keyframes vhsScan{
  0%   { transform: translate3d(0,-18%,0); }
  100% { transform: translate3d(0,18%,0); }
}

/* Keep UI above overlay */
.topbar{ z-index: 9; }
.shell{ position: relative; z-index: 5; }

/* REC SIZE: bigger like your reference */
.topbarRec{ height: 58px; }
@media (max-width: 560px){
  .topbarRec{ height: 44px; }
  #vhsOverlay::before{ opacity: 0.14; }
}


/* VHS OVERLAY v4: use true animated gif (10 frames) + subtle scanlines */
#vhsOverlay{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: screen;
  filter: saturate(0.95) contrast(1.08);
}
#vhsOverlay .vhsGif{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 1;
  image-rendering: auto;
}
/* scanlines + gentle drift */
#vhsOverlay::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px
    );
  opacity: 0.10;
  mix-blend-mode: overlay;
  animation: vhsScanV4 6.5s linear infinite;
  will-change: transform;
}
@keyframes vhsScanV4{
  0%   { transform: translate3d(0,-18%,0); }
  100% { transform: translate3d(0,18%,0); }
}
/* tiny opacity flutter, keeps it alive even on slow GIF decode */
#vhsOverlay{
  animation: vhsFlickerV4 3.2s steps(10, end) infinite;
}
@keyframes vhsFlickerV4{
  0%   { opacity: 0.14; }
  20%  { opacity: 0.17; }
  40%  { opacity: 0.15; }
  60%  { opacity: 0.18; }
  80%  { opacity: 0.16; }
  100% { opacity: 0.14; }
}

/* UI above overlay */
.topbar{ z-index: 9; }
.shell{ position: relative; z-index: 5; }

/* REC v4: bigger like reference */
.topbarRec{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 72px;
  width: auto;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 0.98;
  filter: drop-shadow(0 0 14px rgba(255, 0, 64, 0.32));
}
@media (max-width: 560px){
  .topbarRec{ height: 54px; }
  #vhsOverlay{ opacity: 0.13; }
  #vhsOverlay::after{ opacity: 0.08; }
}


/* PROFILE PAGE */
body.profilePage .page{ padding: var(--size-md); }
.profileHero{
  position: relative;
  min-height: calc(100dvh - var(--header-height));
  display:flex;
  align-items:center;
  justify-content:center;
}
.profileBg{
  position: absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  opacity: 0.65;
}
.profileNoise{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(160,255,90,0.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
  mix-blend-mode: screen;
  pointer-events:none;
}
.profileHeroInner{
  position: relative;
  width: min(1100px, 100%);
  z-index: 3;
  backdrop-filter: blur(10px);
}
.profileTop{
  display:flex;
  gap: 18px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.profileIdentity{
  display:flex;
  gap: 14px;
  align-items: center;
}
.profileAvatar{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  border: 1px solid rgba(170,255,102,0.25);
  box-shadow: 0 0 0 4px rgba(170,255,102,0.07) inset;
  background: rgba(0,0,0,0.35);
}
.profileRec{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.profileRec .recDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 64, 92, 0.95);
  box-shadow: 0 0 12px rgba(255, 64, 92, 0.35);
  animation: recBlink 1.1s steps(1,end) infinite;
}
@keyframes recBlink{ 0%,55%{ opacity:1;} 56%,100%{ opacity:.25;} }

.profileStats{
  display:grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  min-width: min(520px, 100%);
}
.statCard{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.25);
}
.statK{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}
.statV{
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 22px;
}
.profileGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.profileBlock{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,0.20);
}
.blockTitle{
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .75;
  margin-bottom: 10px;
}
.console{
  margin:0;
  white-space: pre-wrap;
}
.typeBlock{
  font-family: var(--font-mono);
}
@media (max-width: 860px){
  .profileGrid{ grid-template-columns: 1fr; }
  .profileStats{ grid-template-columns: 1fr; min-width: 0; }
}

/* Timeline author avatar/link */
.authorLink{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.authorLink:hover{ text-decoration: underline; }
.authorAvatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(170,255,102,0.22);
  background: rgba(0,0,0,0.25);
  image-rendering: auto;
}

/* NAV CONSISTENCY PATCH */
.brand{ color: inherit; text-decoration:none; display:flex; align-items:center; gap:10px; }
.brand:hover{ text-decoration:none; }
.nav a.active{ border-color: rgba(170,255,102,0.55); box-shadow: 0 0 0 3px rgba(170,255,102,0.10) inset; }

.topbar{ position: sticky; top: 0; }
.topbar{ position: sticky; }
.topbar{ position: sticky; }

.topbar{ position: sticky; top:0; }
.topbar{ position: sticky; top:0; }

/* header layout fix */
.topbar{ position: sticky; top:0; }
.topbar{ position: sticky; }