/* zdh — demo styling.
   No framework. No reset. No CDN font. No charting library. Every animation
   below is CSS and every diagram on the page is hand-written markup, because
   shipping a zero-dependency server with a demo page that imports three
   megabytes of somebody else's JavaScript would be the single funniest way to
   lose this hackathon. */

:root {
  --bg:        #07090f;
  --bg2:       #0b0e17;
  --card:      #10141f;
  --card2:     #151a28;
  --line:      #232a3d;
  --line2:     #2f3850;
  --ink:       #e8ecf5;
  --dim:       #94a0bb;
  --dimmer:    #64708c;

  --cyan:      #22d3ee;
  --lime:      #4ade80;
  --violet:    #a78bfa;
  --pink:      #f472b6;
  --amber:     #fbbf24;
  --red:       #fb7185;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 var(--sans);
  overflow-x: hidden;
}

/* ───────────────── animated background ───────────────── */

.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
  will-change: transform;
}
.a1 { width: 46vw; height: 46vw; left: -8vw;  top: -6vw;  background: #1d4ed8; animation: drift1 26s ease-in-out infinite; }
.a2 { width: 40vw; height: 40vw; right: -6vw; top: 12vh;  background: #7c3aed; animation: drift2 32s ease-in-out infinite; }
.a3 { width: 38vw; height: 38vw; left: 28vw;  bottom: -14vw; background: #0e7490; animation: drift3 29s ease-in-out infinite; }

@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw,8vh) scale(1.15); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-7vw,10vh) scale(0.92); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,-8vh) scale(1.2); } }

.grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, #ffffff08 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff08 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}

/* ───────────────── layout ───────────────── */

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.75rem 6rem; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

.act { padding: 5.5rem 0 1rem; border-top: 1px solid var(--line); margin-top: 3rem; }
.act:first-of-type { border-top: 0; }

.act-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 0.6rem;
}

h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
  max-width: 22ch;
  background: linear-gradient(96deg, var(--ink) 30%, #b9c6e6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

p { margin: 0 0 1rem; }
.big-text { font-size: 1.12rem; color: #cfd8ee; max-width: 68ch; }
.whisper { color: var(--dimmer); font-size: 0.95rem; max-width: 68ch; }
em { color: var(--amber); font-style: italic; }
strong { color: var(--ink); }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: #060810;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.4em;
  color: var(--cyan);
}

.two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; } }

/* ───────────────── hero ───────────────── */

.hero { padding: 6rem 0 4rem; text-align: center; }

.badge-row {
  display: flex; gap: 0.6rem;
  justify-content: center; align-items: center;
  flex-wrap: wrap; margin-bottom: 2rem;
}
.badge {
  /* hug the text. without this the flex row stretches the first badge across
     the whole line and leaves its dot stranded at the far left. */
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.75rem; white-space: nowrap;
  border: 1px solid var(--line2); border-radius: 999px;
  padding: 0.35rem 0.9rem; color: var(--dim);
  background: #0d111c99; backdrop-filter: blur(6px);
}
.badge.live { color: var(--lime); border-color: #2c5e45; }
.badge .dot {
  flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
  animation: blip 1.6s ease-in-out infinite;
}
@keyframes blip { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 #4ade8080; } 50% { opacity: 0.55; box-shadow: 0 0 0 6px #4ade8000; } }

.title { margin: 0 0 1.5rem; font-family: var(--mono); font-size: clamp(4.5rem, 17vw, 11rem); line-height: 0.85; }

/* the glitch: three stacked copies, two of them nudged and clipped */
.glitch { position: relative; display: inline-block; color: var(--ink); text-shadow: 0 0 42px #22d3ee55; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
}
.glitch::before { color: var(--cyan); clip-path: inset(0 0 58% 0); animation: gl1 4.2s steps(2,end) infinite; }
.glitch::after  { color: var(--pink); clip-path: inset(56% 0 0 0); animation: gl2 3.6s steps(2,end) infinite; }
@keyframes gl1 { 0%,92%,100% { transform: none; opacity: 0; } 93% { transform: translate(-4px,-2px); opacity: 0.9; } 96% { transform: translate(3px,1px); opacity: 0.9; } }
@keyframes gl2 { 0%,90%,100% { transform: none; opacity: 0; } 91% { transform: translate(4px,2px); opacity: 0.85; } 95% { transform: translate(-3px,-1px); opacity: 0.85; } }

.tagline { font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--ink); margin-bottom: 1.5rem; }
.lede { max-width: 60ch; margin: 0 auto 2.5rem; color: #c3cee8; }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  max-width: 62rem; margin: 0 auto;
}
@media (max-width: 760px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line); border-radius: 14px; padding: 1.15rem 1rem;
  transition: transform 0.2s, border-color 0.2s;
}
.stat:hover { transform: translateY(-4px); border-color: var(--cyan); }
.stat b {
  display: block; font-family: var(--mono); font-size: 2.3rem; line-height: 1;
  color: var(--cyan); text-shadow: 0 0 24px #22d3ee40;
}
.stat span { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: var(--dim); }

.scroll-cue { margin-top: 3rem; font-family: var(--mono); font-size: 0.85rem; color: var(--dimmer); }
.arrow { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ───────────────── terminal ───────────────── */

.terminal {
  background: #05070d; border: 1px solid var(--line2); border-radius: 12px;
  overflow: hidden; box-shadow: 0 24px 60px #00000080;
}
.term-bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.9rem; background: #0b0e17; border-bottom: 1px solid var(--line);
}
.term-bar span { width: 11px; height: 11px; border-radius: 50%; background: #2c3348; }
.term-bar span:first-child { background: #fb7185; }
.term-bar span:nth-child(2) { background: var(--amber); }
.term-bar span:nth-child(3) { background: var(--lime); }
.term-bar em { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; color: var(--dimmer); font-style: normal; }
.terminal pre {
  margin: 0; padding: 1rem 1.1rem; font-family: var(--mono); font-size: 0.82rem;
  line-height: 1.7; color: var(--lime); white-space: pre-wrap; min-height: 17rem;
}
.terminal .c { color: var(--dimmer); }
.terminal .p { color: var(--cyan); }
.terminal .w { color: var(--ink); }
.cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ───────────────── callouts ───────────────── */

.callout {
  margin-top: 2rem; padding: 1.15rem 1.35rem;
  border-left: 3px solid var(--cyan); border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, #22d3ee14, transparent);
  font-size: 1rem; color: #cfd8ee;
}
.callout b { color: var(--cyan); }
.callout.alt { border-left-color: var(--pink); background: linear-gradient(90deg, #f472b614, transparent); }
.callout.alt b { color: var(--pink); }

/* ───────────────── the journey stage ───────────────── */

.journey-controls { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin: 1.75rem 0 1.25rem; }

.btn-big, .btn-ghost {
  font: 600 1rem var(--mono); cursor: pointer; border-radius: 10px;
  padding: 0.8rem 1.4rem; transition: transform 0.12s, filter 0.2s, box-shadow 0.2s;
}
.btn-big {
  color: #04060c; border: 0;
  background: linear-gradient(96deg, var(--cyan), var(--lime));
  box-shadow: 0 8px 30px #22d3ee40;
}
.btn-big:hover { filter: brightness(1.1); box-shadow: 0 10px 38px #22d3ee66; }
.btn-big:active { transform: translateY(2px); }
.btn-ghost { color: var(--violet); background: transparent; border: 1px solid var(--line2); }
.btn-ghost:hover { border-color: var(--violet); background: #a78bfa12; }
button:disabled { opacity: 0.45; cursor: wait; filter: saturate(0.4); }

.j-status { font-family: var(--mono); font-size: 0.8rem; color: var(--dimmer); }

.stage {
  position: relative;
  display: grid; grid-template-columns: 1fr 8rem 1.35fr;
  gap: 1rem; align-items: center;
  background: linear-gradient(180deg, #0a0d16, #070910);
  border: 1px solid var(--line2); border-radius: 16px;
  padding: 1.5rem; overflow: hidden;
}
@media (max-width: 880px) { .stage { grid-template-columns: 1fr; } .wire { display: none; } }

.scanline {
  position: absolute; left: 0; right: 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #22d3ee0a 55%, transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan { 0% { top: -120px; } 100% { top: 100%; } }

.side { display: flex; flex-direction: column; gap: 0.6rem; }
.side-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  color: var(--dimmer); margin: 0 0 0.3rem;
}

.node-b, .node-s {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.7rem 0.9rem;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s, background 0.25s;
}
.node-b b, .node-s b { display: block; font-family: var(--mono); font-size: 0.86rem; color: var(--ink); }
.node-b small, .node-s small { display: block; font-size: 0.72rem; color: var(--dimmer); margin-top: 0.1rem; }

.node-b { border-color: #35405c; background: #121728; }

/* the currently-visited station */
.node-b.hot, .node-s.hot {
  border-color: var(--cyan);
  background: #0f2430;
  box-shadow: 0 0 0 1px var(--cyan), 0 0 34px #22d3ee44;
  transform: translateX(5px);
}
.node-b.hot b, .node-s.hot b { color: var(--cyan); }
/* stations already passed */
.node-b.done, .node-s.done { border-color: #2b5744; background: #0d1a17; }
.node-b.done b, .node-s.done b { color: var(--lime); }

.wire { position: relative; height: 100%; min-height: 90px; display: grid; place-items: center; }
.wire::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line2) 0 8px, transparent 8px 16px);
}
.wire-label {
  position: relative; font-family: var(--mono); font-size: 0.62rem; color: var(--dimmer);
  background: #070910; padding: 0.2rem 0.4rem; text-align: center; line-height: 1.3;
}

.packet {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--cyan) 45%, #0891b2);
  box-shadow: 0 0 18px 4px #22d3ee88;
  opacity: 0; pointer-events: none;
  transition: left 0.55s cubic-bezier(.45,.05,.35,1), top 0.55s cubic-bezier(.45,.05,.35,1), opacity 0.3s, background 0.3s;
  z-index: 5;
}
.packet.on { opacity: 1; }
/* on the way home it turns green, because it's carrying your file */
.packet.returning { background: radial-gradient(circle at 35% 35%, #fff, var(--lime) 45%, #16a34a); box-shadow: 0 0 18px 4px #4ade8088; }

/* narration */
.narration {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem;
  margin-top: 1.25rem; padding: 1.35rem 1.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.narr-step { font-family: var(--mono); text-align: center; }
.narr-step span { display: block; font-size: 2.4rem; line-height: 1; color: var(--cyan); }
.narr-step small { color: var(--dimmer); font-size: 0.75rem; }
.narr-body h3 { margin: 0 0 0.4rem; font-size: 1.2rem; color: var(--ink); }
.quip { color: var(--amber); font-size: 1.02rem; margin: 0 0 0.5rem; }
.tech { color: var(--dim); font-size: 0.92rem; font-family: var(--mono); margin: 0; }

.real-numbers { margin-top: 1.25rem; padding: 1.25rem 1.5rem; background: #0a1a14; border: 1px solid #2b5744; border-radius: 14px; }
.rn-title { color: var(--lime); font-size: 0.95rem; margin: 0 0 0.9rem; }
.rn-title b { color: #fff; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; margin: 0; font-family: var(--mono); font-size: 0.92rem; }
dt { color: var(--dimmer); }
dd { margin: 0; color: var(--ink); }

/* ───────────────── architecture ───────────────── */

.arch { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0.75rem; align-items: center; margin: 2rem 0; }
@media (max-width: 980px) { .arch { grid-template-columns: 1fr; } .arch-arrow { text-align: center; } }

.arch-node { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.3rem; position: relative; }
.arch-node b { display: block; font-family: var(--mono); font-size: 1.05rem; margin: 0.5rem 0 0.5rem; }
.arch-node p { font-size: 0.9rem; color: var(--dim); margin: 0; }
.arch-node.reader { border-color: #2b4a6b; } .arch-node.reader b { color: var(--cyan); }
.arch-node.streams { border-color: #4b3a6b; } .arch-node.streams b { color: var(--violet); }
.arch-node.writer { border-color: #2b5744; box-shadow: 0 0 28px #4ade8022; } .arch-node.writer b { color: var(--lime); }
.tag-mini { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dimmer); }
.arch-arrow { font-family: var(--mono); font-size: 0.75rem; color: var(--dimmer); }

.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.85rem; margin-top: 1.5rem; }
.pkg { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 0.9rem 1rem; transition: border-color 0.2s, transform 0.2s; }
.pkg:hover { border-color: var(--violet); transform: translateY(-3px); }
.pkg b { display: block; font-family: var(--mono); font-size: 0.85rem; color: var(--violet); margin-bottom: 0.25rem; }
.pkg span { font-size: 0.82rem; color: var(--dim); }

/* ───────────────── live multiplexing ───────────────── */

.live { display: grid; grid-template-columns: 1fr 23rem; gap: 1.1rem; margin-top: 1.25rem; }
@media (max-width: 940px) { .live { grid-template-columns: 1fr; } }

.live-viz { background: #05070d; border: 1px solid var(--line2); border-radius: 12px; padding: 0.9rem; }
.lane-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.78rem; color: var(--dim); margin-bottom: 0.6rem; }
.lane-head b { color: var(--cyan); }
#viz-clock { color: var(--amber); }

.lanes { position: relative; height: 320px; overflow: hidden; border-left: 2px solid var(--line2); }
.bar {
  position: absolute; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #0e7490, var(--cyan));
  box-shadow: 0 0 8px #22d3ee55;
  transform-origin: left center; animation: grow 0.45s cubic-bezier(.2,.8,.2,1) both;
}
.bar.done { background: linear-gradient(90deg, #15803d, var(--lime)); box-shadow: 0 0 6px #4ade8044; }
@keyframes grow { from { transform: scaleX(0); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } }

.ticker {
  background: #05070d; border: 1px solid var(--line2); border-radius: 12px;
  padding: 0.85rem 1rem; font-family: var(--mono); font-size: 0.78rem; line-height: 1.6;
  height: 361px; overflow: hidden; display: flex; flex-direction: column-reverse;
}
.ticker .frame { color: var(--dim); overflow-wrap: anywhere; animation: fadein 0.3s ease-out; }
.ticker .frame b { color: var(--cyan); }
.ticker .frame.data b { color: var(--lime); }
.ticker .frame.settings b { color: var(--violet); }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

.result { margin-top: 1.25rem; padding: 1.25rem 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.verdict { margin: 1rem 0 0; font-size: 1.05rem; color: var(--lime); }

/* ───────────────── tables ───────────────── */

.table-wrap { overflow-x: auto; margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.86rem; table-layout: fixed; }
th, td { text-align: left; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--dimmer); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; background: #0c1019; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: #151b2a; }
td.n, th.n { text-align: right; }
#refusals td:first-child, #resources td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#refusals th:nth-child(2), #refusals td:nth-child(2) { width: 5.5rem; text-align: center; }

.tag { display: inline-block; padding: 0.1em 0.5em; border-radius: 5px; font-weight: 600; }
.tag.h2 { color: var(--lime); background: #14331f; }
.tag.other { color: var(--red); background: #331a1f; }

/* ───────────────── paranoia ───────────────── */

.paranoia { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 2rem 0; }
.para-card { background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem; transition: transform 0.2s, border-color 0.2s; }
.para-card:hover { transform: translateY(-5px); border-color: var(--pink); }
.para-card b { display: block; font-family: var(--mono); font-size: 2.5rem; line-height: 1; color: var(--pink); text-shadow: 0 0 28px #f472b640; }
.para-card b span { font-size: 1.1rem; color: var(--dimmer); }
.para-card p { margin: 0.4rem 0 0.5rem; font-family: var(--mono); font-size: 0.82rem; color: var(--ink); }
.para-card small { font-size: 0.8rem; color: var(--dim); line-height: 1.5; display: block; }

/* ───────────────── outro ───────────────── */

footer { padding: 5.5rem 0 0; border-top: 1px solid var(--line); margin-top: 4rem; text-align: center; }
.outro-title { max-width: none; margin: 0 auto 2rem; background: linear-gradient(96deg, var(--cyan), var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.verify { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; text-align: left; margin-bottom: 3rem; }
.verify-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; position: relative; }
.vnum { position: absolute; top: -0.7rem; left: 1.1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--cyan); color: #04060c; font: 700 0.85rem/1.6rem var(--mono); text-align: center; }
.verify-item code { display: block; margin: 0.6rem 0 0.5rem; font-size: 0.78rem; background: #05070d; padding: 0.6rem 0.7rem; border-radius: 7px; overflow-x: auto; white-space: nowrap; }
.verify-item small { color: var(--dim); font-size: 0.82rem; }
.verify-item small b { color: var(--lime); }

.credits { color: var(--dim); font-size: 0.92rem; line-height: 1.9; max-width: 62ch; margin: 0 auto 1.5rem; }
.credits b { color: var(--ink); }
.sign-off { color: var(--dimmer); font-size: 0.86rem; max-width: 52ch; margin: 0 auto; }

/* ───────────────── people who get motion sick ───────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora, .arrow, .scanline, .glitch::before, .glitch::after, .badge .dot { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .packet { transition: none; }
  .bar { animation: none; }
}