:root {
  /* Compliance tokens from DESIGN.md: #000 Code's programming ligatures sequences like `->` proper `!=` not-equals (Google Interaction Design Design: Design* Design** Design:** */
  --void: #0a0a0f;
  --green: #00ff41;
  --cyan: #00e5ff;
  --violet: #7c4dff;
  --amber: #ffab00;
  --ghost: #2d3436;
  --white: #c8d6e5;
  --body-font: "Share Tech Mono", monospace;
  --hud-font: "Fira Code", monospace;
  --symbol-font: "JetBrains Mono", monospace;
  --interaction-design-token: "Interaction Design:**";
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--white);
  font-family: var(--body-font);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  background: repeating-linear-gradient(transparent 0px, transparent 1px, rgba(0, 0, 0, 0.08) 1px, rgba(0, 0, 0, 0.08) 2px);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(45, 52, 54, 0.28) 1px, transparent 1px),
    linear-gradient(rgba(45, 52, 54, 0.22) 1px, transparent 1px),
    radial-gradient(circle at 22% 24%, rgba(124, 77, 255, 0.16), transparent 28%),
    radial-gradient(circle at 76% 68%, rgba(0, 229, 255, 0.08), transparent 30%);
  background-size: 72px 72px, 72px 72px, auto, auto;
}

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--void);
  padding: 7vw;
  color: var(--green);
  font-family: var(--body-font);
  transition: opacity 900ms ease, visibility 900ms ease;
}

.boot-screen.dim { opacity: 0.3; }
.boot-screen.off { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-text { white-space: pre-line; max-width: 980px; text-shadow: 0 0 12px rgba(0, 255, 65, 0.45); }
.boot-cursor, .terminal-cursor, .section-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.2em;
  background: var(--green);
  animation: blink 530ms steps(1, end) infinite;
  vertical-align: -0.2em;
  box-shadow: 0 0 14px rgba(0, 255, 65, 0.75);
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.symbol-field {
  position: fixed;
  inset: -20vh 0 0 0;
  z-index: 1;
  overflow: hidden;
  font-family: var(--symbol-font);
  color: rgba(200, 214, 229, 0.1);
  font-size: 0.6rem;
  line-height: 2.2;
  white-space: pre-wrap;
  animation: symbolDrift 34s linear infinite;
  pointer-events: none;
}

@keyframes symbolDrift { from { transform: translateY(0); } to { transform: translateY(18vh); } }

.node-field, .trace-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.node-field { z-index: 2; }
.trace-layer { z-index: 3; }
.trace, .trace-node {
  fill: none;
  stroke: var(--green);
  stroke-width: 1;
  opacity: 0.3;
  filter: drop-shadow(0 0 5px rgba(0, 255, 65, 0.5));
}
.trace-node { fill: var(--green); stroke: none; animation: pulseNode 2.4s steps(2, end) infinite; }
.trace { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawTrace 3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.t2 { animation-delay: 400ms; }
.t3 { animation-delay: 900ms; }
body.validated .trace { stroke: var(--cyan); }

@keyframes drawTrace { to { stroke-dashoffset: 0; } }
@keyframes pulseNode { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.hud {
  position: fixed;
  z-index: 50;
  font-family: var(--hud-font);
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
  opacity: 0;
  transition: opacity 500ms ease;
}

body.loaded .hud { opacity: 1; }
.hud-top-left { top: 24px; left: 28px; color: var(--green); }
.hud-top-right { top: 24px; right: 28px; }
.hud-bottom-left { left: 28px; bottom: 24px; }
.hud-bottom-right { right: 28px; bottom: 32px; max-width: 340px; text-align: right; color: var(--amber); }
.prompt { margin-right: 2px; }
#stepDigits.roll { color: var(--amber); animation: digitRoll 320ms steps(4, end); }
@keyframes digitRoll { 0% { transform: translateY(-0.6em); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

.mini-tree { width: 220px; height: 150px; overflow: visible; }
.mini-tree text { fill: var(--cyan); font-family: var(--hud-font); font-size: 11px; }
.tree-line { stroke: var(--ghost); stroke-width: 1; fill: none; }
.mini-nodes circle { fill: var(--void); stroke: var(--ghost); stroke-width: 1; transition: stroke 300ms ease, fill 300ms ease, filter 300ms ease; }
.mini-nodes circle.lit { fill: var(--green); stroke: var(--green); filter: drop-shadow(0 0 7px rgba(0, 255, 65, 0.9)); }
.mini-nodes circle.done { fill: var(--cyan); stroke: var(--cyan); filter: drop-shadow(0 0 7px rgba(0, 229, 255, 0.75)); }

.viewport {
  position: fixed;
  inset: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity 650ms ease;
}
body.loaded .viewport { opacity: 1; }

.panel {
  position: absolute;
  left: 5vw;
  right: 5vw;
  top: 12vh;
  min-height: 66vh;
  border: 1px solid rgba(0, 255, 65, 0.3);
  border-radius: 3px;
  background: rgba(10, 10, 15, 0.82);
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.15), inset 0 0 42px rgba(45, 52, 54, 0.18);
  transform: translateX(100vw);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 600ms ease, border-color 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
}

.panel.active { transform: translateX(0); opacity: 1; }
.panel.exit-left { transform: translateX(-100vw); opacity: 0; }
.panel:hover { border-color: rgba(0, 255, 65, 1); box-shadow: 0 0 20px rgba(0, 255, 65, 0.28), inset 0 0 42px rgba(45, 52, 54, 0.22); }
.panel-bar {
  height: 34px;
  border-bottom: 1px solid rgba(0, 255, 65, 0.3);
  color: var(--green);
  font-family: var(--hud-font);
  font-size: 0.78rem;
  padding: 5px 14px;
  background: rgba(45, 52, 54, 0.35);
}

.panel-grid { padding: clamp(1.2rem, 4vw, 3rem); }
.two-column { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr); gap: clamp(1.2rem, 4vw, 4rem); align-items: center; }
h1, h2 {
  margin: 0 0 1.3rem;
  color: var(--green);
  font-family: var(--body-font);
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(0, 255, 65, 0.36);
}
p { margin: 0 0 1.05rem; color: var(--white); }
.type-target { visibility: hidden; }
.type-target.typed { visibility: visible; }
.flash-char { box-shadow: 0 0 0 1px rgba(200, 214, 229, 0.7); }
.section-cursor { position: fixed; z-index: 80; opacity: 0; transition: left 160ms steps(1, end), top 160ms steps(1, end), opacity 120ms ease; }
.section-cursor.on { opacity: 1; }

.visual {
  min-height: 300px;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(45, 52, 54, 0.26), rgba(10, 10, 15, 0.74));
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.08);
}
.proof-card { padding: 2rem; display: grid; align-content: center; gap: 1rem; font-family: var(--hud-font); }
.code-line, .rule-line, .result-line { border: 1px solid rgba(0, 255, 65, 0.35); padding: 0.8rem 1rem; color: var(--green); }
.rule-line { color: var(--violet); border-color: rgba(124, 77, 255, 0.45); }
.result-line { color: var(--amber); border-color: rgba(255, 171, 0, 0.55); animation: resolveFlash 2.2s steps(2, end) infinite; }
@keyframes resolveFlash { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 20px rgba(255, 171, 0, 0.28); } }

.proof-tree-large { position: relative; }
.proof-tree-large .node {
  position: absolute;
  border: 1px solid var(--green);
  border-radius: 2px;
  padding: 0.45rem 0.8rem;
  color: var(--green);
  background: var(--void);
  font-family: var(--hud-font);
  opacity: 0;
  animation: treeBuild 400ms steps(4, end) forwards;
}
.proof-tree-large .root { top: 28px; left: 50%; transform: translateX(-50%); }
.proof-tree-large .left { top: 132px; left: 18%; animation-delay: 400ms; }
.proof-tree-large .right { top: 132px; right: 18%; animation-delay: 800ms; }
.proof-tree-large .leaf-left { bottom: 34px; left: 26%; color: var(--cyan); border-color: var(--cyan); animation-delay: 1200ms; }
.proof-tree-large .leaf-right { bottom: 34px; right: 26%; color: var(--amber); border-color: var(--amber); animation-delay: 1600ms; }
.branch { position: absolute; height: 1px; background: var(--green); transform-origin: left center; opacity: 0.5; }
.b1 { width: 120px; top: 102px; left: 44%; transform: rotate(146deg); }
.b2 { width: 120px; top: 102px; left: 54%; transform: rotate(34deg); }
.b3 { width: 88px; top: 205px; left: 28%; transform: rotate(60deg); }
.b4 { width: 88px; top: 205px; right: 28%; transform: rotate(120deg); }
@keyframes treeBuild { to { opacity: 1; } }

.truth-table { display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; padding: 2rem; gap: 2px; font-family: var(--hud-font); }
.truth-table div { border: 1px solid rgba(0, 255, 65, 0.35); padding: 0.62rem; text-align: center; color: var(--white); animation: cellFill 4s steps(1, end) infinite; }
.truth-table div:nth-child(3n) { color: var(--cyan); }
.truth-table div:nth-child(-n+3) { color: var(--green); }
@keyframes cellFill { 0%, 100% { background: transparent; } 50% { background: rgba(0, 255, 65, 0.12); } }

.gate-diagram { padding: 2rem; }
.wire, .gate { fill: none; stroke: var(--green); stroke-width: 2; }
.input-dot { fill: var(--green); filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.8)); animation: dataPulse 1.8s linear infinite; }
.d2 { animation-delay: 500ms; }
.output-dot { fill: var(--cyan); filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.85)); }
.output-dot.amber { fill: var(--amber); filter: drop-shadow(0 0 10px rgba(255, 171, 0, 0.85)); }
.gate-diagram text { fill: var(--white); font-family: var(--hud-font); font-size: 18px; }
@keyframes dataPulse { 0% { transform: translateX(0); } 50% { transform: translateX(110px); } 100% { transform: translateX(0); } }

.resolution-card { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; padding: 2rem; }
.qed-mark { font-size: clamp(4rem, 11vw, 8rem); color: var(--amber); text-align: center; text-shadow: 0 0 28px rgba(255, 171, 0, 0.45); }
.system-lines { display: grid; gap: 0.9rem; font-family: var(--hud-font); color: var(--cyan); }
.system-lines span { border-left: 1px solid var(--cyan); padding-left: 1rem; }

.compute-flash .trace { animation: none; stroke-dashoffset: 0; opacity: 1; stroke: var(--green); }

@media (max-width: 820px) {
  .two-column { grid-template-columns: 1fr; }
  .panel { top: 9vh; min-height: 78vh; overflow-y: auto; }
  .hud-bottom-left { opacity: 0; }
  .hud-bottom-right { left: 28px; right: auto; text-align: left; }
}