:root {
  --black: #020603;
  --panel: rgba(2, 10, 5, 0.88);
  --green: #61ff88;
  --green-strong: #a4ffb8;
  --green-dim: #2f9d50;
  --green-faint: rgba(97, 255, 136, 0.12);
  --line: rgba(97, 255, 136, 0.28);
  --text: #d3ffdc;
  --muted: #83a98b;
  --mono: "IBM Plex Mono", monospace;
  --display: "Share Tech Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--black);
  font-family: var(--mono);
  line-height: 1.6;
}
a { color: var(--green); text-underline-offset: 0.22em; }
a:hover, a:focus-visible { color: var(--green-strong); }
button, a { -webkit-tap-highlight-color: transparent; }

.matrix-fallback,
#matrix {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.matrix-fallback {
  opacity: 0.12;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(47, 157, 80, 0.18) 29px 30px),
    repeating-linear-gradient(180deg, rgba(47, 157, 80, 0.09) 0 1px, transparent 1px 22px);
}
#matrix {
  opacity: 0.27;
  transform: translateZ(0);
}
.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.18) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.018), rgba(0, 255, 0, 0.012), rgba(0, 0, 255, 0.018));
  background-size: 100% 4px, 6px 100%;
}
.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  padding: 0.65rem 0.9rem;
  color: var(--black);
  background: var(--green);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.shell {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding-bottom: 2rem;
}
.system-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  background: rgba(2, 6, 3, 0.92);
  backdrop-filter: blur(14px);
}
.system-id {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.08em;
}
.system-id span { color: var(--green); }
.system-stats {
  display: flex;
  gap: 1.15rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.system-stats span:first-child { color: var(--green); }
.system-stats i {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}
.boot {
  min-height: 580px;
  padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.boot > * {
  width: min(100%, 880px);
  align-self: center;
  margin-right: auto;
  margin-left: auto;
}
.boot-log {
  margin-bottom: 2.5rem;
  color: var(--green-dim);
  font-size: clamp(0.68rem, 1.5vw, 0.82rem);
}
.boot-log p { margin: 0.25rem 0; }
.ascii {
  display: block;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--green);
  font-family: var(--display);
  font-size: clamp(0.5rem, 1.48vw, 1rem);
  line-height: 1.1;
  font-variant-ligatures: none;
  letter-spacing: 0;
  text-shadow: 0 0 16px rgba(97, 255, 136, 0.5);
}
.tagline {
  margin: 2rem 0 1rem;
  color: var(--green-strong);
  font-family: var(--display);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  letter-spacing: 0.06em;
}
.intro {
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.2rem);
}
.truth, .projects, .manifest {
  margin: 0 0 clamp(4rem, 9vw, 7rem);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.38);
}
.truth {
  position: relative;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  overflow: hidden;
}
.truth::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 7rem;
  height: 2px;
  content: "";
  background: var(--green);
  box-shadow: 0 0 16px var(--green);
}
.file-path, .file-header p, .manifest-title > p {
  margin: 0 0 0.6rem;
  color: var(--green-dim);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.truth h1, .file-header h2, .manifest-title h2 {
  margin: 0;
  color: var(--green-strong);
  font-family: var(--display);
  font-size: clamp(1.6rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: 0.04em;
}
.truth > p:not(.file-path) {
  max-width: 850px;
  margin: 1.5rem 0 0;
}
.truth .truth-declaration {
  display: grid;
  gap: 0.35rem;
  max-width: 850px;
  margin: 1.5rem 0 0;
  color: var(--green);
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.8vw, 1.65rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.truth-declaration span {
  display: grid;
  grid-template-columns: 1.2em minmax(0, 1fr);
  align-items: baseline;
}
.truth-declaration span::before {
  content: ">";
  color: var(--green-strong);
}
.truth .truth-note {
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--green);
  color: var(--green-strong);
  background: var(--green-faint);
}
.truth-note span { color: var(--green); font-weight: 600; }
.file-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.file-header > p {
  margin: 0;
  color: var(--green);
  white-space: nowrap;
}
.project-row {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.2rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  transition: background 160ms ease;
}
.project-row:last-child { border-bottom: 0; }
.project-row:hover { background: rgba(97, 255, 136, 0.045); }
.project-row > span {
  color: var(--green-dim);
  font-family: var(--display);
  font-size: 1.3rem;
}
.project-type {
  margin: 0 0 0.45rem;
  color: var(--green-dim);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.project-row h3 {
  margin: 0;
  color: var(--green-strong);
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.5vw, 2rem);
  letter-spacing: 0.03em;
}
.project-row h3 + p {
  max-width: 760px;
  margin: 0.75rem 0 1.1rem;
  color: var(--muted);
}
.project-row a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.manifest {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.5fr);
}
.manifest-title, .manifest-body { padding: clamp(1.5rem, 5vw, 3rem); }
.manifest-title { border-right: 1px solid var(--line); }
.manifest-body > p {
  margin-top: 0;
  color: var(--text);
  font-size: 1.02rem;
}
.manifest-copy {
  margin-top: 1.5rem;
  color: var(--muted);
}
.manifest-copy p { margin: 0.55rem 0; }
.manifest-copy span { color: var(--green); }
footer {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 2rem;
  padding: 2rem 0 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
footer p { margin: 0; }
.footer-network span { color: #64836b; }
.footer-meta { text-align: right; }

@media (max-width: 720px) {
  .shell { width: min(100% - 1.2rem, 1120px); }
  .system-stats span:last-child { display: none; }
  .system-stats { gap: 0.7rem; }
  .boot { min-height: 520px; }
  .ascii { font-size: clamp(0.29rem, 1.55vw, 0.5rem); }
  .file-header { align-items: start; flex-direction: column; gap: 1rem; }
  .project-row { grid-template-columns: 2rem 1fr; gap: 0.55rem; }
  .manifest { grid-template-columns: 1fr; }
  .manifest-title { border-right: 0; border-bottom: 1px solid var(--line); }
  footer { grid-template-columns: 1fr; }
  .footer-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #matrix { opacity: 0.24; }
}