:root {
  --bg: #090c0f;
  --surface: #10151a;
  --surface-2: #151b21;
  --line: #29343d;
  --text: #e4eee8;
  --muted: #8c9a95;
  --mint: #9bf3b4;
  --mint-dim: #5fbf88;
  --amber: #f1c77b;
  --lilac: #bbb0ff;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .025; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
.shell { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 25px 0 21px; border-bottom: 1px solid var(--line); }
.brand { color: var(--mint); font-weight: 700; letter-spacing: -.04em; }
.prompt { color: var(--amber); margin-right: 7px; }
.cursor { color: var(--amber); animation: blink 1.1s step-end infinite; }
.topbar nav { display: flex; gap: 27px; color: var(--muted); font-size: .78rem; }
.topbar nav a { transition: color .2s ease; }
.topbar nav a:hover, .text-link:hover, .contact-links a:hover { color: var(--mint); }
.hero { display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: center; min-height: 620px; padding: 86px 0 90px; }
.eyebrow, .card-kicker { margin: 0 0 22px; color: var(--mint-dim); font-size: .7rem; letter-spacing: .13em; font-weight: 700; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); }
.slash { color: var(--line); padding: 0 7px; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 720px; margin-bottom: 25px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(3.3rem, 8vw, 6.8rem); line-height: .93; letter-spacing: -.09em; font-weight: 700; }
h1 em { color: var(--mint); font-style: normal; }
.lede { max-width: 570px; color: var(--muted); font-size: 1.02rem; line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; align-items: center; margin-top: 34px; }
.button { border: 1px solid var(--line); padding: 11px 16px; font-size: .76rem; transition: all .2s ease; }
.button span { margin-left: 8px; color: var(--mint); }
.button-primary { border-color: var(--mint-dim); color: var(--bg); background: var(--mint); }
.button-primary:hover { background: #c1ffd0; transform: translateY(-2px); }
.button-quiet { color: var(--muted); }
.button-quiet:hover { border-color: var(--mint-dim); color: var(--mint); }
.hero-portrait { justify-self: end; width: min(100%, 290px); }
.portrait-frame { position: relative; padding: 14px; border: 1px solid var(--line); background: var(--surface); }
.portrait-frame::before, .portrait-frame::after { content: ""; position: absolute; width: 36px; height: 36px; border-color: var(--mint); }
.portrait-frame::before { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.portrait-frame::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.portrait-frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.65) contrast(1.08); }
.frame-label { display: block; padding: 11px 2px 0; color: var(--muted); font-size: .64rem; }
.caption { color: var(--muted); font-size: .68rem; line-height: 1.7; margin: 17px 0 0 17px; }
.signal-grid { display: grid; grid-template-columns: 1.25fr .875fr .875fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signal-card { min-height: 320px; padding: 33px 30px 30px; border-right: 1px solid var(--line); }
.signal-card:last-child { border-right: 0; }
.signal-card h2 { margin-bottom: 17px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: .98; letter-spacing: -.07em; }
.signal-card p:not(.card-kicker) { max-width: 31ch; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.signal-main h2 { color: var(--mint); }
.signal-side h2 { color: var(--text); }
.accent-card { background: linear-gradient(135deg, rgba(187,176,255,.08), transparent 68%); }
.accent-card h2 { color: var(--lilac); }
.card-kicker { color: var(--amber); }
.text-link { display: inline-block; margin-top: 34px; color: var(--text); font-size: .73rem; border-bottom: 1px solid var(--mint-dim); padding-bottom: 3px; }
.text-link span { color: var(--mint); margin-left: 8px; }
.status { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; color: var(--mint-dim); font-size: .65rem; }
.status i { display: block; width: 6px; height: 6px; background: var(--mint); border-radius: 50%; }
.status-warm { color: var(--amber); }.status-warm i { background: var(--amber); }
.threads-section { padding: 112px 0 95px; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.section-note { color: var(--muted); font-size: .75rem; }
.thread-list { margin-top: 15px; }
.thread { display: grid; grid-template-columns: 70px 1fr 30px; align-items: center; width: 100%; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; font: inherit; font-size: clamp(1.1rem, 2.5vw, 1.7rem); cursor: pointer; transition: color .2s ease, padding .2s ease; }
.thread:hover, .thread.active { padding-left: 13px; color: var(--text); }
.thread.active { color: var(--mint); }
.thread-index { color: var(--amber); font-size: .65rem; }
.thread-arrow { text-align: right; color: var(--mint); opacity: 0; transition: opacity .2s ease; }.thread:hover .thread-arrow, .thread.active .thread-arrow { opacity: 1; }
.thread-output { margin-top: 17px; color: var(--muted); font-size: .72rem; min-height: 24px; }
.manifesto { padding: 80px 0 110px; border-top: 1px solid var(--line); }
.quote-mark { margin: 0; color: var(--amber); font-family: Georgia, serif; font-size: 5rem; line-height: .5; }
blockquote { max-width: 720px; margin: 25px 0 13px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.9rem, 4vw, 3.7rem); line-height: 1.03; letter-spacing: -.07em; }
.quote-byline { color: var(--muted); font-size: .7rem; }
.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 72px 0 100px; border-top: 1px solid var(--line); }
.contact-section h2 { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: var(--mint); font-size: clamp(2.3rem, 5vw, 4rem); line-height: .95; letter-spacing: -.08em; }
.contact-links { align-self: end; }
.contact-links a { display: grid; grid-template-columns: 85px 1fr 20px; gap: 10px; padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .74rem; }
.contact-links b { color: var(--text); font-weight: 400; }.contact-links i { color: var(--mint); font-style: normal; text-align: right; }
.footer { display: flex; justify-content: space-between; gap: 15px; padding: 22px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: .65rem; }
.footer a { color: var(--muted); border-bottom: 1px dotted var(--muted); }.live-dot { color: var(--mint); font-size: .55rem; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 750px) { .shell { width: min(calc(100% - 34px), var(--max)); } .topbar nav { gap: 13px; } .hero { grid-template-columns: 1fr; gap: 40px; min-height: auto; padding: 70px 0 75px; } .hero-portrait { justify-self: start; max-width: 235px; } .signal-grid { grid-template-columns: 1fr; } .signal-card { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .signal-card:last-child { border-bottom: 0; } .section-heading { display: block; }.section-note { margin-top: -10px; } .contact-section { grid-template-columns: 1fr; gap: 25px; } .footer { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }