.brand-mark {
  display: inline-flex !important;
  width: 46px;
  height: 46px;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
}

.brand-mark img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px #ff00aa);
}

.hero-seal {
  position: absolute;
  right: 3.5vw;
  bottom: 3.5%;
  z-index: 7;
  width: clamp(170px, 20vw, 330px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(0, 217, 255, .8)) drop-shadow(0 0 28px rgba(255, 0, 170, .56));
  animation: seal-pulse 4.4s ease-in-out infinite alternate;
}

@keyframes seal-pulse {
  from { transform: rotate(-3deg) scale(.96); }
  to { transform: rotate(3deg) scale(1.04); }
}

.body,
body {
  background-color: #090009;
  background-image: linear-gradient(rgba(3, 0, 5, .44), rgba(8, 0, 10, .58)), url("./assets/meme-brain.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero {
  padding: 0;
  width: 100%;
}

.hero {
  min-height: 1100px;
}

.hero-collage {
  display: block;
  width: 100vw;
  height: 1100px;
  object-position: center center;
  filter: saturate(1.22) contrast(1.08) brightness(.9);
}

.hero-overlay {
  top: 9%;
  z-index: 7;
}

.hero h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(72px, 10.5vw, 178px);
  line-height: .86;
  letter-spacing: -.04em;
  transform: rotate(-1deg);
}

.hero h1 span {
  display: block;
  animation: title-jolt 3.4s steps(1, end) infinite;
}

.hero h1 span:first-child {
  color: #ffe600;
  text-shadow: 3px 3px 0 #ff204e, -2px -2px 0 #3155ff, 7px 8px 0 #050005;
}

.hero h1 span:last-child {
  color: #b7ff00;
  text-shadow: 3px 3px 0 #ff5b00, -2px -2px 0 #00d9ff, 7px 8px 0 #050005;
}

.token-declaration {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 1.5fr .55fr 1fr;
  gap: 8px;
  padding: 18px max(20px, calc((100vw - 1280px)/2));
  border-top: 5px ridge #fff;
  border-bottom: 7px groove #ff00aa;
  background: repeating-linear-gradient(135deg, #b7ff00 0 22px, #ffe600 22px 44px);
  color: #050005;
  transform: rotate(-.35deg) scale(1.01);
}

.token-declaration div {
  padding: 13px 16px;
  border: 3px solid #050005;
  background: #050005;
  color: #fff;
  box-shadow: 5px 5px 0 #ff00aa;
}

.token-declaration small { display: block; color: #00eaff; font-weight: 900; }
.token-declaration strong { display: block; margin-top: 5px; font: clamp(22px, 3vw, 42px)/.9 Impact, sans-serif; color: #ffe600; }
.token-declaration p { grid-column: 1 / -1; margin: 10px 0 0; padding: 12px 16px; background: #fff; font-weight: 900; line-height: 1.45; }

.meme-zone {
  position: relative;
  overflow: hidden;
}

.lore,
.history-section,
.brain-section,
.diagnostics,
.transmissions {
  background-color: rgba(7, 0, 10, .66) !important;
  background-image: linear-gradient(rgba(7, 0, 10, .34), rgba(18, 0, 22, .52)) !important;
  border-top: 3px solid rgba(183, 255, 0, .72);
  backdrop-filter: blur(1.5px);
}

.history-section h2 {
  max-width: 1120px;
  margin: 25px 0 20px;
  font: 900 clamp(44px, 7vw, 100px)/.86 Impact, sans-serif;
  color: #fff;
  letter-spacing: -.03em;
  text-shadow: 5px 4px #ff00aa;
}

.history-intro {
  position: relative;
  z-index: 5;
  max-width: 820px;
  padding: 16px 20px;
  border-left: 8px solid #b7ff00;
  background: rgba(8, 0, 12, .9);
  font-size: 18px;
  line-height: 1.55;
}

.history-dashboard {
  position: relative;
  z-index: 5;
  margin-top: 30px;
  border: 5px ridge #fff;
  background: rgba(5, 0, 8, .93);
  box-shadow: 12px 12px 0 #00d9ff;
}

.history-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 4px solid #b7ff00;
}

.history-stats span {
  padding: 18px;
  border-right: 2px solid #ff00aa;
  color: #fff;
  text-align: center;
  font-weight: 900;
}

.history-stats b {
  margin-right: 8px;
  color: #ffe600;
  font: 38px Impact, sans-serif;
}

.timeline-scroll {
  overflow-x: auto;
  padding: 54px 28px 34px;
  scrollbar-color: #b7ff00 #170014;
}

.timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(11, 300px);
  gap: 26px;
  min-width: max-content;
}

.timeline-track::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg, #b7ff00 0 44px, #ff00aa 44px 88px, #00d9ff 88px 132px);
  box-shadow: 0 0 18px #b7ff00;
}

.timeline-track article {
  position: relative;
  min-height: 310px;
  padding: 22px;
  border: 3px solid #fff;
  background: #100011;
  box-shadow: 8px 8px 0 #ff00aa;
  transform: rotate(-1deg);
}

.timeline-track article:nth-child(even) {
  margin-top: 32px;
  box-shadow: 8px 8px 0 #00d9ff;
  transform: rotate(1deg);
}

.timeline-track article::before {
  content: "";
  position: absolute;
  top: -69px;
  left: 48%;
  width: 22px;
  height: 22px;
  border: 5px solid #050005;
  border-radius: 50%;
  background: #ffe600;
  box-shadow: 0 0 0 4px #b7ff00;
}

.timeline-track time {
  display: block;
  color: #ffe600;
  font: 52px Impact, sans-serif;
}

.timeline-track strong {
  display: block;
  margin: 10px 0;
  color: #b7ff00;
  font: 28px Impact, sans-serif;
}

.timeline-track p { line-height: 1.5; }
.timeline-track em { color: #00d9ff; font-style: normal; font-weight: 900; }
.timeline-track .timeline-now { background: #240020; border-color: #b7ff00; }

.lore-grid article,
.transmission-grid article,
.diagnostic-machine,
.brain-copy {
  background: rgba(8, 0, 12, .9);
}

.cult-card {
  grid-column: 1 / -1;
  min-height: auto !important;
  border-color: #b7ff00 !important;
  box-shadow: 9px 9px 0 #00d9ff !important;
}

.cult-card h3 {
  color: #ffe600 !important;
  font-size: clamp(34px, 5vw, 68px) !important;
}

.meme-litany {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  border-top: 8px groove #00eaff;
  border-bottom: 8px groove #b7ff00;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,0,170,.52), transparent 24%),
    radial-gradient(circle at 77% 70%, rgba(0,234,255,.38), transparent 27%),
    rgba(4,0,8,.8);
}

.meme-litany > p {
  position: relative;
  z-index: 6;
  padding: 10px;
  border: 3px dashed #050005;
  background: #ffe600;
  color: #050005;
  font-weight: 900;
  line-height: 1.6;
  transform: rotate(1deg);
}

.meme-litany h2 {
  position: relative;
  z-index: 6;
  max-width: 1000px;
  margin: 55px 0 35px;
  font: 900 clamp(56px, 10vw, 150px)/.78 Impact, sans-serif;
  color: #b7ff00;
  text-shadow: 8px 7px 0 #ff00aa, -4px -3px 0 #00eaff;
  transform: rotate(-2deg);
}

.litany-grid {
  position: relative;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.litany-grid span {
  padding: 13px 16px;
  border: 4px outset #fff;
  background: #090009;
  color: #fff;
  font-weight: 900;
  box-shadow: 7px 7px 0 #ff00aa;
  transform: rotate(-1deg);
}

.litany-grid span:nth-child(even) { color: #050005; background: #00eaff; box-shadow: 7px 7px 0 #b7ff00; transform: rotate(2deg); }

.meme-sprite {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 4;
  width: var(--size);
  max-width: 30vw;
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: .82;
  filter: drop-shadow(9px 11px 0 rgba(0, 0, 0, .68));
  animation: meme-drift var(--duration) ease-in-out var(--delay) infinite alternate;
  transform-origin: center;
}

.hero .meme-sprite {
  z-index: 6;
  opacity: .96;
}

.lore-grid,
.brain-copy,
.board-shell,
.diagnostic-machine,
.transmission-grid,
.section-kicker,
.meme-zone > h2 {
  position: relative;
  z-index: 5;
}

@keyframes meme-drift {
  0% { transform: translate3d(-18px, 5px, 0) rotate(var(--tilt)) scale(.84); }
  45% { transform: translate3d(25px, -34px, 0) rotate(calc(var(--tilt) + 13deg)) scale(1.04); }
  100% { transform: translate3d(-8px, 38px, 0) rotate(calc(var(--tilt) - 7deg)) scale(.93); }
}

@keyframes title-jolt {
  0%, 92%, 100% { transform: translate(0); }
  93% { transform: translate(8px, -4px); }
  95% { transform: translate(-5px, 3px); }
}

@media (max-width: 760px) {
  .hero,
  .hero-collage {
    min-height: 880px;
    height: 880px;
  }

  .hero-overlay { top: 8%; }
  .hero h1 { font-size: clamp(46px, 15vw, 82px) !important; }
  .meme-sprite { max-width: 42vw; opacity: .78; }
  .hero-seal { width: 150px; right: -15px; bottom: 2%; opacity: .88; }
  .history-stats { grid-template-columns: 1fr; }
  .history-stats span { border-right: 0; border-bottom: 1px solid #ff00aa; }
  .timeline-track { grid-template-columns: repeat(11, 260px); }
  .token-declaration { grid-template-columns: 1fr; transform: none; }
  .token-declaration p { grid-column: 1; }
  .meme-litany { min-height: 760px; }
}

@media (prefers-reduced-motion: reduce) {
  .meme-sprite,
  .hero h1 span,
  .hero-seal { animation: none; }
}

/* Collective board voting workspace */
.brain-workspace { position:relative; z-index:7; display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }
.brain-workspace .board-shell { min-width:0; }
.canvas-scroller { width:100%; height:min(72vh,760px); overflow:auto; padding:12px; background:#08000a; scrollbar-color:#b7ff00 #170014; }
.canvas-scroller .canvas-wrap { overflow:hidden; flex:0 0 auto; transform-origin:top left; }
#zoom-level { min-width:46px; font-weight:900; text-align:center; }
.board-footer input { max-width:200px; }
.vote-sidebar { position:sticky; top:90px; max-height:82vh; margin-top:30px; overflow:hidden; border:6px ridge #fff; background:#080009; box-shadow:12px 12px 0 #ff00aa; }
.vote-sidebar > header { display:block; padding:13px; background:#b7ff00; color:#000; }
.vote-sidebar > header strong,.vote-sidebar > header small { display:block; }
.vote-sidebar > header strong { font:28px Impact,sans-serif; }
.vote-sidebar > header small { margin-top:5px; font-weight:900; }
#proposal-list { max-height:calc(82vh - 76px); overflow:auto; scrollbar-color:#ff00aa #080009; }
.proposal-card { margin:10px; padding:10px; border:3px dashed #00eaff; background:#150016; }
.proposal-card img { display:block; width:100%; aspect-ratio:12/7; object-fit:cover; border:2px solid #fff; }
.proposal-card strong,.proposal-card small,.proposal-card b { display:block; margin-top:8px; }
.proposal-card strong { color:#ffe600; }
.proposal-card small { color:#00eaff; }
.proposal-card b { color:#fff; }
.proposal-card div { display:flex; gap:8px; margin-top:8px; }
.proposal-card div button:first-child { background:#b7ff00; }
.proposal-card div button:last-child { background:#ff2c2c; color:#fff; }
.proposal-card.accepted { border-color:#b7ff00; }
.proposal-card.rejected { opacity:.55; border-color:#ff2c2c; }
.queue-empty { padding:18px; color:#ffe600; font-weight:900; line-height:1.5; }

@media (max-width: 980px) {
  .brain-workspace { grid-template-columns:1fr; }
  .vote-sidebar { position:relative; top:auto; max-height:none; }
  #proposal-list { max-height:620px; }
}

/* The truth protocol is an unstable meme ritual. */
#truth-dialog { width:min(760px,94vw); max-width:none; padding:0; overflow:visible; border:0; background:transparent; color:#fff; box-shadow:none; }
#truth-dialog::backdrop { background:rgba(0,0,0,.9); backdrop-filter:blur(3px) saturate(1.8); animation:truth-backdrop .22s steps(2,end) infinite; }
.truth-terminal { position:relative; overflow:hidden; padding:0 24px 18px; text-align:center; border:8px ridge #b7ff00; background:radial-gradient(circle at 50% 28%,#3b0053 0,#16001d 38%,#030004 75%); box-shadow:0 0 0 5px #ff00aa,16px 16px 0 #00eaff,-14px -14px 0 #ffe600,0 0 80px #ff00aa; transform:rotate(-.4deg); }
.truth-terminal::before,.truth-terminal::after { content:""; position:absolute; z-index:7; pointer-events:none; }
.truth-terminal::before { inset:0; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.3) 4px); mix-blend-mode:multiply; }
.truth-terminal::after { width:54px; height:54px; right:-9px; bottom:-8px; background:url('./assets/sprites/doge.png') center/contain no-repeat; animation:truth-spin 2.2s steps(5,end) infinite; }
.truth-noise { position:absolute; inset:0; opacity:.16; background-image:repeating-radial-gradient(circle at 17% 41%,#fff 0 1px,transparent 1px 7px); animation:truth-static .13s steps(2,end) infinite; }
.truth-ticker { position:relative; z-index:8; margin:0 -24px 13px; overflow:hidden; border-bottom:3px solid #000; background:#b7ff00; color:#000; font:900 13px/28px monospace; white-space:nowrap; }
.truth-ticker span { display:inline-block; min-width:180%; animation:truth-marquee 7s linear infinite; }
.dialog-title { position:relative; z-index:8; display:flex; align-items:center; justify-content:center; gap:12px; padding:9px; border:3px outset #fff; background:linear-gradient(90deg,#1200a8,#ff00aa,#1200a8); font:900 17px monospace; letter-spacing:2px; text-shadow:2px 2px #000; }
.dialog-title i { width:13px; height:13px; border-radius:50%; background:#fffc00; box-shadow:0 0 14px #fffc00; animation:truth-blink .45s steps(1,end) infinite; }
.truth-oracle { position:relative; z-index:4; display:flex; height:112px; align-items:center; justify-content:center; gap:8px; margin-top:8px; }
.truth-oracle > img { width:90px; height:90px; object-fit:contain; filter:drop-shadow(5px 4px 0 #00eaff); animation:truth-witness .8s steps(2,end) infinite alternate; }
.truth-oracle > img:last-child { animation-delay:-.37s; filter:drop-shadow(-5px 4px 0 #ff00aa); }
.truth-oracle .truth-eye { width:128px; height:108px; filter:drop-shadow(0 0 14px #ffe600); animation:truth-orbit 2.8s steps(8,end) infinite; }
.truth-alert { position:relative; z-index:8; display:inline-block; margin:0; padding:4px 10px; background:#ffe600; color:#000; font:900 12px monospace; transform:rotate(1deg); }
.truth-terminal h2 { position:relative; z-index:8; margin:10px 0 4px; color:#fff; font:clamp(30px,5.4vw,54px)/.9 Impact,sans-serif; letter-spacing:1px; text-shadow:4px 4px 0 #ff00aa,-4px -3px 0 #00eaff; animation:truth-jolt 1.8s steps(1,end) infinite; }
.truth-terminal h2 em { color:#b7ff00; font-style:normal; }
.truth-prophecy { position:relative; z-index:8; min-height:22px; margin:10px auto 4px; color:#00eaff; font:900 14px monospace; }
.truth-buttons { position:relative; z-index:10; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; min-height:68px; }
.truth-buttons button { min-width:205px; margin:8px 0; padding:12px 16px; border:4px outset #fff; color:#000; font:900 15px monospace; box-shadow:5px 5px 0 #000; cursor:pointer; }
#truth-yes { background:#b7ff00; animation:truth-yes .55s steps(2,end) infinite; }
#truth-no { background:#ff3158; color:#fff; transition:transform .08s linear; }
.truth-footer { position:relative; z-index:8; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-top:5px; padding-top:8px; border-top:2px dashed #ff00aa; color:#ffe600; font:900 11px monospace; }
.truth-rejected .truth-terminal { animation:truth-reject .22s steps(2,end) 2; }
@keyframes truth-backdrop { 50% { background-color:rgba(12,0,14,.92); } }
@keyframes truth-static { 50% { transform:translate(7px,-4px); } }
@keyframes truth-marquee { to { transform:translateX(-50%); } }
@keyframes truth-spin { to { transform:rotate(360deg); } }
@keyframes truth-blink { 50% { opacity:.15; } }
@keyframes truth-witness { to { transform:translateY(-7px) rotate(5deg); } }
@keyframes truth-orbit { 25% { transform:rotate(5deg) scale(1.05); } 75% { transform:rotate(-5deg) scale(.96); } }
@keyframes truth-jolt { 92% { transform:none; } 93% { transform:translate(5px,-2px) skewX(-4deg); } 96% { transform:translate(-3px,2px); } }
@keyframes truth-yes { 50% { transform:scale(1.035) rotate(-1deg); filter:brightness(1.3); } }
@keyframes truth-reject { 50% { transform:translateX(12px) rotate(1deg); filter:hue-rotate(80deg); } }
@media (max-width:600px) { .truth-terminal{padding-inline:12px}.truth-ticker{margin-inline:-12px}.truth-oracle{height:84px}.truth-oracle>img{width:62px;height:62px}.truth-oracle .truth-eye{width:90px;height:76px}.truth-buttons button{min-width:230px}.truth-footer{gap:7px} }
@media (prefers-reduced-motion:reduce) { #truth-dialog *,#truth-dialog::backdrop{animation:none!important} }