| :root { |
| color-scheme: dark; |
| --ink: #0d100c; |
| --ink-2: #151912; |
| --paper: #eee4cf; |
| --paper-2: #d9cdb5; |
| --muted: #a99d87; |
| --line: rgba(238, 228, 207, 0.18); |
| --line-strong: rgba(238, 228, 207, 0.34); |
| --teal: #4fa997; |
| --rust: #c76b42; |
| --green: #a4d65e; |
| --blue: #547aa5; |
| --violet: #9b82c7; |
| --shadow: 0 24px 80px rgba(0, 0, 0, 0.34); |
| --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif; |
| --sans: "Aptos", "Segoe UI", "Helvetica Neue", sans-serif; |
| --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| background: var(--ink); |
| } |
|
|
| body { |
| margin: 0; |
| min-width: 320px; |
| color: var(--paper); |
| background: |
| linear-gradient(rgba(238, 228, 207, 0.035) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(238, 228, 207, 0.028) 1px, transparent 1px), |
| linear-gradient(135deg, #0d100c 0%, #171510 48%, #0b0d0a 100%); |
| background-size: 42px 42px, 42px 42px, auto; |
| font-family: var(--sans); |
| line-height: 1.5; |
| overflow-x: hidden; |
| } |
|
|
| a { |
| color: inherit; |
| } |
|
|
| button, |
| input { |
| font: inherit; |
| } |
|
|
| button { |
| cursor: pointer; |
| } |
|
|
| .hero { |
| position: relative; |
| min-height: 92svh; |
| display: grid; |
| align-items: end; |
| overflow: hidden; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| #harnessCanvas { |
| position: absolute; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| background: #0d100c; |
| } |
|
|
| .hero::after { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| background: |
| linear-gradient(90deg, rgba(13, 16, 12, 0.94) 0%, rgba(13, 16, 12, 0.72) 45%, rgba(13, 16, 12, 0.22) 100%), |
| linear-gradient(180deg, rgba(13, 16, 12, 0.12) 0%, rgba(13, 16, 12, 0.86) 100%); |
| pointer-events: none; |
| } |
|
|
| .topbar { |
| position: absolute; |
| z-index: 4; |
| top: 0; |
| left: 0; |
| right: 0; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| padding: 24px 40px; |
| } |
|
|
| .brand { |
| display: inline-flex; |
| align-items: center; |
| gap: 12px; |
| color: var(--paper); |
| text-decoration: none; |
| font-family: var(--mono); |
| font-size: 0.86rem; |
| text-transform: uppercase; |
| } |
|
|
| .brand-mark { |
| width: 34px; |
| height: 34px; |
| border: 1px solid var(--line-strong); |
| background: |
| linear-gradient(135deg, rgba(79, 169, 151, 0.88), rgba(199, 107, 66, 0.82)); |
| box-shadow: inset 0 0 0 7px rgba(13, 16, 12, 0.38); |
| transform: rotate(45deg); |
| } |
|
|
| .nav-links { |
| display: flex; |
| gap: 10px; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| } |
|
|
| .nav-links a { |
| display: inline-flex; |
| align-items: center; |
| min-height: 38px; |
| padding: 0 12px; |
| border: 1px solid transparent; |
| color: var(--muted); |
| text-decoration: none; |
| font-family: var(--mono); |
| font-size: 0.82rem; |
| transition: color 160ms ease, border-color 160ms ease, background 160ms ease; |
| } |
|
|
| .nav-links a:hover, |
| .nav-links a:focus-visible { |
| color: var(--paper); |
| border-color: var(--line); |
| background: rgba(238, 228, 207, 0.05); |
| } |
|
|
| .hero-inner { |
| position: relative; |
| z-index: 2; |
| width: calc(100% - 40px); |
| max-width: 1120px; |
| margin: 0 auto; |
| padding: 128px 0 56px; |
| } |
|
|
| .eyebrow, |
| .kicker { |
| margin: 0 0 16px; |
| color: var(--green); |
| font-family: var(--mono); |
| font-size: 0.82rem; |
| text-transform: uppercase; |
| } |
|
|
| h1, |
| h2, |
| h3, |
| p { |
| margin: 0; |
| } |
|
|
| h1 { |
| max-width: 900px; |
| font-family: var(--serif); |
| font-size: 4.8rem; |
| line-height: 0.98; |
| font-weight: 700; |
| overflow-wrap: anywhere; |
| } |
|
|
| .hero-copy { |
| max-width: 660px; |
| margin-top: 24px; |
| color: rgba(238, 228, 207, 0.78); |
| font-size: 1.18rem; |
| } |
|
|
| .stage-control { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin: 36px 0 24px; |
| } |
|
|
| .stage-button, |
| .chip, |
| .copy-button, |
| .tool-tab, |
| select { |
| min-height: 42px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: rgba(238, 228, 207, 0.06); |
| color: var(--paper); |
| padding: 0 14px; |
| transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; |
| } |
|
|
| .stage-button:hover, |
| .chip:hover, |
| .copy-button:hover, |
| .tool-tab:hover, |
| select:hover, |
| .stage-button:focus-visible, |
| .chip:focus-visible, |
| .copy-button:focus-visible, |
| .tool-tab:focus-visible, |
| select:focus-visible { |
| transform: translateY(-2px); |
| border-color: var(--line-strong); |
| background: rgba(238, 228, 207, 0.1); |
| } |
|
|
| .stage-button.is-active, |
| .chip.is-active, |
| .tool-tab.is-active { |
| border-color: rgba(164, 214, 94, 0.8); |
| background: rgba(164, 214, 94, 0.14); |
| color: #f6ffe7; |
| } |
|
|
| .stage-readout { |
| width: min(760px, 100%); |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 26px; |
| padding: 22px 0 0; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .stage-readout span { |
| color: var(--rust); |
| font-family: var(--mono); |
| font-size: 0.82rem; |
| text-transform: uppercase; |
| } |
|
|
| .stage-readout h2 { |
| margin-top: 10px; |
| font-family: var(--serif); |
| font-size: 2rem; |
| line-height: 1.08; |
| } |
|
|
| .stage-readout p { |
| color: rgba(238, 228, 207, 0.76); |
| } |
|
|
| .band { |
| padding: 82px 0; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .section-inner { |
| width: calc(100% - 40px); |
| max-width: 1120px; |
| margin: 0 auto; |
| } |
|
|
| .section-head { |
| display: grid; |
| grid-template-columns: 0.8fr 1.2fr; |
| gap: 42px; |
| align-items: start; |
| margin-bottom: 34px; |
| } |
|
|
| .section-head.compact { |
| grid-template-columns: 1fr; |
| max-width: 760px; |
| } |
|
|
| .section-head h2 { |
| font-family: var(--serif); |
| font-size: 3rem; |
| line-height: 1.04; |
| } |
|
|
| .section-head p:not(.kicker) { |
| max-width: 620px; |
| color: rgba(238, 228, 207, 0.72); |
| font-size: 1.04rem; |
| } |
|
|
| .map-band { |
| background: |
| linear-gradient(180deg, rgba(79, 169, 151, 0.08), rgba(13, 16, 12, 0)), |
| rgba(13, 16, 12, 0.74); |
| } |
|
|
| .tools-band { |
| background: |
| linear-gradient(90deg, rgba(84, 122, 165, 0.1), rgba(79, 169, 151, 0.05)), |
| #10130f; |
| } |
|
|
| .tool-switcher { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-bottom: 18px; |
| } |
|
|
| .tool-tab { |
| padding: 0 14px; |
| font-family: var(--mono); |
| font-size: 0.84rem; |
| } |
|
|
| .tool-readout { |
| display: grid; |
| grid-template-columns: 0.72fr 1.28fr; |
| gap: 18px; |
| } |
|
|
| .tool-readout aside, |
| .tool-spec { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: rgba(238, 228, 207, 0.055); |
| box-shadow: var(--shadow); |
| } |
|
|
| .tool-readout aside { |
| padding: 24px; |
| } |
|
|
| .tool-readout aside span { |
| color: var(--green); |
| font-family: var(--mono); |
| font-size: 0.78rem; |
| text-transform: uppercase; |
| } |
|
|
| .tool-readout h3 { |
| margin-top: 22px; |
| font-family: var(--serif); |
| font-size: 2.3rem; |
| } |
|
|
| .tool-readout p { |
| margin-top: 12px; |
| color: rgba(238, 228, 207, 0.74); |
| } |
|
|
| .tool-spec { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| overflow: hidden; |
| } |
|
|
| .tool-spec div { |
| min-height: 136px; |
| padding: 20px; |
| border-left: 1px solid var(--line); |
| border-top: 1px solid var(--line); |
| } |
|
|
| .tool-spec div:nth-child(1), |
| .tool-spec div:nth-child(2) { |
| border-top: 0; |
| } |
|
|
| .tool-spec div:nth-child(odd) { |
| border-left: 0; |
| } |
|
|
| .tool-spec strong { |
| display: block; |
| margin-bottom: 18px; |
| color: var(--rust); |
| font-family: var(--mono); |
| font-size: 0.78rem; |
| text-transform: uppercase; |
| } |
|
|
| .tool-spec span { |
| color: rgba(238, 228, 207, 0.8); |
| } |
|
|
| .flow-grid { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .flow-node { |
| min-height: 190px; |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| align-items: flex-start; |
| gap: 20px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 18px; |
| color: var(--paper); |
| background: rgba(238, 228, 207, 0.045); |
| text-align: left; |
| transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; |
| } |
|
|
| .flow-node:hover, |
| .flow-node:focus-visible { |
| transform: translateY(-4px); |
| border-color: var(--line-strong); |
| background: rgba(238, 228, 207, 0.08); |
| } |
|
|
| .flow-node.is-active { |
| border-color: rgba(79, 169, 151, 0.9); |
| background: rgba(79, 169, 151, 0.16); |
| } |
|
|
| .flow-node span { |
| color: var(--rust); |
| font-family: var(--mono); |
| font-size: 0.84rem; |
| } |
|
|
| .flow-node strong { |
| display: block; |
| font-family: var(--serif); |
| font-size: 1.55rem; |
| line-height: 1.04; |
| } |
|
|
| .flow-node em { |
| color: var(--muted); |
| font-style: normal; |
| font-size: 0.92rem; |
| } |
|
|
| .builder-band { |
| background: |
| linear-gradient(90deg, rgba(199, 107, 66, 0.11), transparent 55%), |
| #12150f; |
| } |
|
|
| .workbench { |
| min-height: 620px; |
| } |
|
|
| .builder-layout { |
| display: grid; |
| grid-template-columns: 0.82fr 1.18fr; |
| gap: 18px; |
| align-items: stretch; |
| } |
|
|
| .tool-panel, |
| .prompt-panel, |
| .gate-verdict { |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| background: rgba(238, 228, 207, 0.06); |
| box-shadow: var(--shadow); |
| } |
|
|
| .tool-panel { |
| padding: 24px; |
| } |
|
|
| .field-group + .field-group { |
| margin-top: 30px; |
| } |
|
|
| select { |
| width: 100%; |
| padding: 0 12px; |
| appearance: none; |
| } |
|
|
| .field-group h3 { |
| margin-bottom: 12px; |
| color: var(--paper-2); |
| font-family: var(--mono); |
| font-size: 0.92rem; |
| } |
|
|
| .chip-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .packet-meter { |
| margin-top: 34px; |
| padding-top: 22px; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .packet-meter span, |
| .packet-meter strong, |
| .panel-topline { |
| font-family: var(--mono); |
| font-size: 0.86rem; |
| text-transform: uppercase; |
| } |
|
|
| .packet-meter div { |
| height: 12px; |
| margin: 10px 0 10px; |
| border: 1px solid var(--line); |
| border-radius: 999px; |
| overflow: hidden; |
| background: rgba(13, 16, 12, 0.5); |
| } |
|
|
| .packet-meter i { |
| display: block; |
| width: 74%; |
| height: 100%; |
| background: linear-gradient(90deg, var(--rust), var(--green), var(--teal)); |
| transition: width 220ms ease; |
| } |
|
|
| .prompt-panel { |
| overflow: hidden; |
| } |
|
|
| .panel-topline { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| min-height: 58px; |
| padding: 0 18px; |
| border-bottom: 1px solid var(--line); |
| color: var(--paper-2); |
| } |
|
|
| .copy-button { |
| min-height: 34px; |
| padding: 0 12px; |
| font-family: var(--mono); |
| font-size: 0.82rem; |
| } |
|
|
| pre { |
| margin: 0; |
| min-height: 420px; |
| max-height: 520px; |
| overflow: auto; |
| padding: 20px; |
| color: #f3ead7; |
| background: rgba(5, 7, 5, 0.68); |
| font-family: var(--mono); |
| font-size: 0.86rem; |
| line-height: 1.6; |
| white-space: pre-wrap; |
| overflow-wrap: anywhere; |
| } |
|
|
| .gates-band { |
| background: |
| linear-gradient(90deg, rgba(84, 122, 165, 0.12), rgba(155, 130, 199, 0.08)), |
| #0f120e; |
| } |
|
|
| .gate-layout { |
| display: grid; |
| grid-template-columns: 1fr 0.8fr; |
| gap: 18px; |
| } |
|
|
| .gate-list { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| } |
|
|
| .gate-list label { |
| min-height: 68px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 14px; |
| color: rgba(238, 228, 207, 0.82); |
| background: rgba(238, 228, 207, 0.045); |
| } |
|
|
| .gate-list input { |
| width: 18px; |
| height: 18px; |
| accent-color: var(--rust); |
| } |
|
|
| .gate-verdict { |
| min-height: 224px; |
| padding: 26px; |
| align-self: stretch; |
| } |
|
|
| .gate-verdict span { |
| display: inline-flex; |
| min-height: 34px; |
| align-items: center; |
| padding: 0 12px; |
| border-radius: 999px; |
| background: rgba(164, 214, 94, 0.15); |
| color: #f6ffe7; |
| font-family: var(--mono); |
| font-size: 0.82rem; |
| } |
|
|
| .gate-verdict.is-stop span { |
| background: rgba(199, 107, 66, 0.2); |
| color: #ffe4d6; |
| } |
|
|
| .gate-verdict h3 { |
| margin-top: 26px; |
| font-family: var(--serif); |
| font-size: 2rem; |
| line-height: 1.08; |
| } |
|
|
| .gate-verdict p { |
| margin-top: 16px; |
| color: rgba(238, 228, 207, 0.74); |
| } |
|
|
| .runbook-band { |
| background: |
| linear-gradient(180deg, rgba(238, 228, 207, 0.035), rgba(13, 16, 12, 0)), |
| #11130e; |
| } |
|
|
| .accordion { |
| border-top: 1px solid var(--line); |
| } |
|
|
| .run-step { |
| width: 100%; |
| min-height: 78px; |
| display: grid; |
| grid-template-columns: 70px 1fr 240px; |
| align-items: center; |
| gap: 20px; |
| border: 0; |
| border-bottom: 1px solid var(--line); |
| color: var(--paper); |
| background: transparent; |
| text-align: left; |
| } |
|
|
| .run-step span { |
| color: var(--rust); |
| font-family: var(--mono); |
| } |
|
|
| .run-step strong { |
| font-family: var(--serif); |
| font-size: 1.7rem; |
| } |
|
|
| .run-step em { |
| justify-self: end; |
| color: var(--muted); |
| font-style: normal; |
| } |
|
|
| .run-step.is-open { |
| color: #f6ffe7; |
| } |
|
|
| .run-detail { |
| display: none; |
| padding: 0 0 24px 90px; |
| border-bottom: 1px solid var(--line); |
| color: rgba(238, 228, 207, 0.72); |
| } |
|
|
| .run-detail.is-open { |
| display: block; |
| } |
|
|
| .docs-band { |
| background: #0d100c; |
| } |
|
|
| .doc-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .doc-link { |
| min-height: 140px; |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 18px; |
| color: var(--paper); |
| text-decoration: none; |
| background: rgba(238, 228, 207, 0.048); |
| transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; |
| } |
|
|
| .doc-link:hover, |
| .doc-link:focus-visible { |
| transform: translateY(-3px); |
| border-color: var(--line-strong); |
| background: rgba(238, 228, 207, 0.08); |
| } |
|
|
| .doc-link span { |
| color: var(--green); |
| font-family: var(--mono); |
| font-size: 0.82rem; |
| text-transform: uppercase; |
| } |
|
|
| .doc-link strong { |
| overflow-wrap: anywhere; |
| } |
|
|
| .site-footer { |
| display: flex; |
| justify-content: space-between; |
| gap: 18px; |
| width: calc(100% - 40px); |
| max-width: 1120px; |
| margin: 0 auto; |
| padding: 26px 0 42px; |
| color: var(--muted); |
| font-family: var(--mono); |
| font-size: 0.82rem; |
| } |
|
|
| @media (max-width: 940px) { |
| .topbar { |
| padding: 18px 20px; |
| } |
|
|
| .nav-links { |
| display: none; |
| } |
|
|
| h1 { |
| font-size: 3.5rem; |
| } |
|
|
| .stage-readout, |
| .section-head, |
| .builder-layout, |
| .gate-layout, |
| .tool-readout { |
| grid-template-columns: 1fr; |
| } |
|
|
| .flow-grid, |
| .doc-grid, |
| .tool-spec { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .run-step { |
| grid-template-columns: 52px 1fr; |
| } |
|
|
| .run-step em { |
| grid-column: 2; |
| justify-self: start; |
| } |
|
|
| .run-detail { |
| padding-left: 72px; |
| } |
| } |
|
|
| @media (max-width: 620px) { |
| .hero-inner, |
| .section-inner, |
| .site-footer { |
| width: calc(100vw - 24px); |
| max-width: 340px; |
| margin-left: 12px; |
| margin-right: 0; |
| } |
|
|
| .hero-inner { |
| padding-bottom: 34px; |
| } |
|
|
| h1 { |
| font-size: 2.18rem; |
| line-height: 1.04; |
| } |
|
|
| .stage-button { |
| flex: 1 1 96px; |
| } |
|
|
| .hero-copy { |
| font-size: 1rem; |
| max-width: calc(100vw - 24px); |
| } |
|
|
| .stage-control { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| width: 100%; |
| max-width: calc(100vw - 24px); |
| } |
|
|
| .stage-control .stage-button:last-child { |
| grid-column: span 2; |
| } |
|
|
| .section-head h2, |
| .gate-verdict h3 { |
| font-size: 2.1rem; |
| } |
|
|
| .flow-grid, |
| .gate-list, |
| .doc-grid, |
| .tool-spec { |
| grid-template-columns: 1fr; |
| } |
|
|
| .tool-spec div, |
| .tool-spec div:nth-child(2) { |
| border-left: 0; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .tool-spec div:first-child { |
| border-top: 0; |
| } |
|
|
| .band { |
| padding: 58px 0; |
| } |
|
|
| .site-footer { |
| flex-direction: column; |
| } |
| } |
|
|
