:root {
  color-scheme: dark;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  --bg: #030303;
  --text: #f5f5f3;
  --muted: #9e9e9a;
  --border: #292927;
  --border-strong: #4a4a47;
  --green: #62df78;
  --red: #ff5967;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--text); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.site-header, .hero, .workflow, .boundaries, .visible, footer {
  width: min(1440px, calc(100% - 96px));
  margin-inline: auto;
}
.site-header { position: relative; z-index: 5; display: grid; grid-template-columns: 190px 1fr auto; min-height: 116px; align-items: center; border-bottom: 1px solid var(--border); }
.wordmark { width: max-content; font-size: 38px; font-weight: 750; letter-spacing: -.06em; }
.site-header nav { display: flex; gap: clamp(34px, 5vw, 82px); }
.site-header nav a, footer nav a { color: #d2d2cf; font: 14px var(--mono); }
.site-header nav a:hover, footer nav a:hover, .text-link:hover { color: var(--green); }
.dashboard-link { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; padding: 0 30px; border: 1px solid #67b873; border-radius: 3px; color: #89ea98; font: 15px var(--mono); }
.dashboard-link:hover { background: var(--green); color: #041007; }
.menu-button { display: none; }
.hero { display: grid; grid-template-columns: minmax(440px, .9fr) minmax(560px, 1.25fr); gap: clamp(48px, 7vw, 120px); align-items: center; min-height: 530px; padding: 56px 0; border-bottom: 1px solid var(--border); }
h1, h2 { margin: 0; font-weight: 520; letter-spacing: -.055em; }
h1 { font-size: clamp(64px, 6vw, 94px); line-height: .94; }
.hero__copy > p { max-width: 530px; margin: 28px 0 32px; color: #b2b2af; font: 18px/1.65 var(--mono); }
.hero__actions { display: flex; align-items: center; gap: 30px; }
.text-link { color: #83e692; font: 14px var(--mono); text-decoration: underline; text-underline-offset: 6px; }
.status { display: inline-flex; align-items: center; gap: 11px; color: #b9b9b5; font: 13px var(--mono); }
.hero__copy > .status { margin-top: 34px; }
.status i { width: 10px; height: 10px; border: 1px solid #7f7f7b; border-radius: 50%; }
.status--checking i { border-color: #b9b9b5; border-top-color: transparent; animation: spin .9s linear infinite; }
.status--online { color: #88e998; }
.status--online i { border-color: var(--green); background: var(--green); }
.status--offline { color: #c8a3a6; }
.status--offline i { border-color: var(--red); background: var(--red); }
@keyframes spin { to { transform: rotate(360deg); } }
.terminal { min-width: 0; min-height: 330px; padding: 45px 34px; border: 1px solid var(--border-strong); border-radius: 4px; font: 15px var(--mono); }
.terminal > div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.terminal > div span, .terminal a { color: var(--green); }
.terminal code { overflow-wrap: anywhere; line-height: 1.55; }
.terminal p { margin: 20px 0 40px 28px; color: #a6a6a2; line-height: 1.55; }
.terminal p:last-of-type { margin-bottom: 23px; }
.cursor { display: block; width: 9px; height: 22px; background: var(--green); animation: cursor 1.1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: .15; } }
.workflow { min-height: 420px; padding: 52px 0 34px; border-bottom: 1px solid var(--border); }
.workflow h2, .visible h2 { font-size: clamp(38px, 4vw, 56px); }
.workflow ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 42px 0 0; padding: 0; list-style: none; }
.workflow li { min-width: 0; padding-right: 20px; }
.workflow li > span { color: var(--green); font: 13px var(--mono); }
.workflow h3 { margin: 14px 0 18px; font-size: 26px; font-weight: 500; }
.workflow li > i { position: relative; display: block; height: 1px; background: var(--green); }
.workflow li > i::before { position: absolute; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); content: ""; }
.workflow li:last-child > i::after { position: absolute; top: -8px; right: 0; width: 15px; height: 15px; border: 2px solid var(--green); border-radius: 50%; background: var(--bg); content: ""; }
.workflow li p { max-width: 260px; margin-top: 20px; color: var(--muted); font: 12px/1.6 var(--mono); }
.workflow__fallback { width: 82%; margin: 24px auto 0; padding-top: 16px; border-top: 1px dashed #73736f; color: #a5a5a1; font: 12px var(--mono); text-align: center; }
.boundaries { display: grid; grid-template-columns: minmax(330px, .9fr) minmax(560px, 1.35fr); gap: clamp(54px, 9vw, 150px); min-height: 500px; align-items: center; padding: 70px 0; border-bottom: 1px solid var(--border); }
.boundaries h2 { font-size: clamp(50px, 5vw, 74px); line-height: 1.04; }
.boundaries > div p { max-width: 440px; margin-top: 35px; color: #a9a9a5; font: 16px/1.7 var(--mono); }
.boundaries dl { margin: 0; border-top: 1px solid var(--border); }
.boundaries dl div { display: grid; grid-template-columns: 1fr .9fr; gap: 24px; min-height: 72px; align-items: center; border-bottom: 1px solid var(--border); font-family: var(--mono); }
.boundaries dt, .boundaries dd { margin: 0; }
.boundaries dt { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.boundaries dt span { color: var(--green); font-size: 24px; }
.boundaries dd { color: #8e8e8a; font-size: 12px; }
.visible { min-height: 520px; padding: 62px 0; border-bottom: 1px solid var(--border); }
.visible__grid { display: grid; grid-template-columns: 1fr 330px; gap: 46px; margin-top: 36px; }
.trace { min-height: 276px; padding: 28px 30px; border: 1px solid var(--border-strong); border-radius: 4px; font-family: var(--mono); }
.trace > span { color: #83837f; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.trace ol { display: grid; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.trace li { display: grid; grid-template-columns: 9px minmax(190px, .72fr) 1fr; gap: 18px; align-items: center; }
.trace li i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.trace strong { color: #8bea9a; font-size: 13px; font-weight: 500; }
.trace li span { color: #a2a29e; font-size: 12px; }
.visible aside { border-left: 1px solid var(--border-strong); font-family: var(--mono); }
.visible aside h3, .visible aside > .status, .visible aside > a { margin-left: 38px; }
.visible aside h3 { margin-top: 25px; margin-bottom: 16px; font-size: 22px; font-weight: 450; }
.visible aside > a { display: flex; min-height: 68px; align-items: center; justify-content: space-between; margin-top: 28px; padding-right: 10px; border-top: 1px solid var(--border); color: #83e692; font-size: 13px; }
.visible aside > a + a { margin-top: 0; }
footer { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 112px; align-items: center; font-family: var(--mono); }
footer .wordmark { font-family: Inter, Arial, sans-serif; font-size: 28px; }
footer > span { color: #8d8d89; font-size: 12px; }
footer nav { display: flex; justify-content: flex-end; gap: 50px; }
footer nav a { color: #83e692; font-size: 12px; }

@media (max-width: 1050px) {
  .site-header, .hero, .workflow, .boundaries, .visible, footer { width: min(100% - 48px, 900px); }
  .site-header { grid-template-columns: 150px 1fr auto; }
  .hero { grid-template-columns: 1fr; gap: 44px; padding-block: 70px; }
  .workflow ol { grid-template-columns: repeat(2, 1fr); row-gap: 38px; }
  .boundaries { grid-template-columns: 1fr; }
  .visible__grid { grid-template-columns: 1fr 270px; }
}

@media (max-width: 700px) {
  .site-header, .hero, .workflow, .boundaries, .visible, footer { width: calc(100% - 40px); }
  .site-header { grid-template-columns: 1fr auto auto; gap: 13px; min-height: 80px; }
  .wordmark { font-size: 29px; }
  .dashboard-link--header { min-height: 42px; padding: 0 13px; font-size: 11px; }
  .menu-button { display: grid; width: 42px; height: 42px; place-content: center; gap: 4px; border: 0; background: transparent; }
  .menu-button > span:not(.sr-only) { display: block; width: 18px; height: 1px; background: var(--text); }
  .site-header nav { position: absolute; top: 80px; right: 0; left: 0; display: none; padding: 8px 0; border-bottom: 1px solid var(--border-strong); background: var(--bg); }
  .site-header nav.navigation--open { display: grid; }
  .site-header nav a { min-height: 50px; padding: 15px 0; }
  .hero { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding: 43px 0 22px; }
  h1 { font-size: clamp(52px, 15vw, 72px); line-height: .98; }
  .hero__copy > p { margin: 22px 0 24px; font-size: 14px; }
  .hero__actions { display: grid; gap: 18px; text-align: center; }
  .dashboard-link { min-height: 50px; }
  .dashboard-link--header { min-height: 42px; }
  .hero__copy > .status { margin-top: 20px; }
  .status { font-size: 11px; }
  .terminal { min-height: 0; padding: 24px 18px; font-size: 12px; }
  .terminal p { margin: 16px 0 27px 26px; }
  .workflow { padding: 38px 0; }
  .workflow h2, .visible h2 { font-size: 31px; }
  .workflow ol { display: block; margin-top: 28px; padding-left: 40px; border-left: 1px solid var(--green); }
  .workflow li { display: grid; grid-template-columns: 34px 124px 1fr; min-height: 92px; padding: 0 0 20px; border-bottom: 1px solid var(--border); }
  .workflow li + li { padding-top: 18px; }
  .workflow h3 { margin: -4px 0 0; font-size: 18px; }
  .workflow li > i { display: none; }
  .workflow li p { margin: 0; font-size: 10px; }
  .workflow__fallback { width: 100%; line-height: 1.6; }
  .boundaries { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding: 48px 0; }
  .boundaries h2 { font-size: 40px; }
  .boundaries > div p { margin-top: 22px; font-size: 13px; }
  .boundaries dl div { grid-template-columns: 1fr; gap: 6px; min-height: 74px; align-content: center; padding: 10px 0; }
  .boundaries dt { gap: 13px; font-size: 12px; }
  .boundaries dd { padding-left: 27px; font-size: 10px; }
  .visible { min-height: 0; padding: 45px 0; }
  .visible__grid { grid-template-columns: 1fr; gap: 26px; margin-top: 24px; }
  .trace { min-height: 0; padding: 22px 17px; }
  .trace li { grid-template-columns: 7px 1fr; gap: 8px 12px; }
  .trace li span { grid-column: 2; font-size: 10px; }
  .trace strong { font-size: 11px; }
  .visible aside { border-top: 1px solid var(--border-strong); border-left: 0; }
  .visible aside h3, .visible aside > .status, .visible aside > a { margin-left: 0; }
  footer { grid-template-columns: 1fr auto; min-height: 110px; row-gap: 14px; }
  footer > span { grid-row: 2; }
  footer nav { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; gap: 16px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor, .status--checking i { animation: none; }
}