:root {
  color-scheme:dark;
  --bg:#111211;
  --surface:#161716;
  --surface-deep:#131413;
  --line:#2b2d2a;
  --text:#f1f2ee;
  --muted:#a2a69e;
  --soft:#858b80;
  --accent:#d4ef88;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:32px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:7px;
  border-radius:3px;
}

::selection {
  background:var(--accent);
  color:var(--bg);
}

svg {
  flex-shrink:0;
  vertical-align:middle;
}

h1,h2,h3,p,figure {
  margin:0;
}

.shell {
  width:min(1120px,calc(100% - 80px));
  margin-inline:auto;
}

.skip-link {
  position:fixed;
  left:20px;
  top:15px;
  z-index:10;
  background:var(--accent);
  color:var(--bg);
  padding:10px 18px;
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:translateY(0);
}

.site-header {
  height:99px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.brand {
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:1.5625rem;
  font-weight:620;
  letter-spacing:-1.2px;
  line-height:1.2;
}

.brand-mark {
  color:var(--accent);
}

.brand-family {
  display:flex;
  align-items:center;
  gap:18px;
}

.product-brand {
  font-size:1.75rem;
  font-weight:580;
  letter-spacing:-1px;
}

.product-brand .brand-mark {
  display:block;
  height:auto;
  flex-shrink:0;
}

.brand-endorsement {
  padding-left:18px;
  border-left:1px solid var(--line);
  color:var(--soft);
  font-size:0.75rem;
  letter-spacing:0;
}

.brand-endorsement strong {
  font-weight:500;
  color:var(--muted);
}

.site-header nav {
  display:flex;
  gap:34px;
  align-items:center;
  font-size:0.875rem;
}

.site-header nav a {
  padding-block:12px;
  color:var(--muted);
  transition:color .2s;
}

.site-header nav a:hover,.email:hover,.email:focus-visible {
  color:var(--accent);
}

.code-symbol {
  font-family:var(--mono);
  font-size:0.875rem;
  margin-right:6px;
  color:var(--soft);
}

.hero {
  text-align:center;
  padding-top:80px;
}

.hero-kicker {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.hero-intro {
  font-size:0.8125rem;
  color:var(--text);
  letter-spacing:.01em;
}

.development {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 11px;
  border:1px solid #363a30;
  border-radius:5px;
  color:#bdc5ae;
  background:#1a1d17;
  font-family:var(--mono);
  font-size:0.75rem;
  line-height:1.6;
}

.status-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
}

h1 {
  font-size:clamp(44px,6.6vw,82px);
  font-weight:500;
  letter-spacing:-.064em;
  line-height:1.075;
  margin:28px 0 24px;
}

h1 span {
  color:var(--accent);
}

.hero-description {
  max-width:565px;
  margin:auto;
  color:var(--muted);
  font-size:1.125rem;
  line-height:1.65;
  letter-spacing:-.015em;
  text-wrap:pretty;
}

.button {
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  margin-top:32px;
  padding:11px 23px;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:6px;
  color:#1c2510;
  font-size:0.875rem;
  font-weight:600;
  transition:background .2s,transform .2s;
}

.button:hover {
  background:#e0faa0;
  transform:translateY(-2px);
}

.hero-note {
  font-size:0.8125rem;
  margin-top:15px;
  color:var(--soft);
}

.hero-note strong {
  font-weight:500;
  color:var(--muted);
}

.hero-rule {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:17px;
  color:#555b4d;
  margin:65px auto 0;
  max-width:550px;
}

.hero-rule span {
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,var(--line));
}

.hero-rule span:last-child {
  transform:rotate(180deg);
}

.product-section {
  padding-top:66px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:32px;
}

.eyebrow {
  font-family:var(--mono);
  color:var(--soft);
  font-size:0.75rem;
  letter-spacing:.075em;
  text-transform:uppercase;
  line-height:1.5;
  margin-bottom:20px;
}

h2 {
  font-size:clamp(30px,3.8vw,44px);
  font-weight:480;
  letter-spacing:-.05em;
  line-height:1.16;
}

.section-description {
  color:var(--muted);
  font-size:1rem;
  padding-bottom:3px;
  line-height:1.65;
}

.product-concept {
  background:var(--surface);
  border:1px solid #3a3e33;
  border-radius:10px;
  box-shadow:0 24px 80px -40px #000,0 0 55px -35px #8dab57;
  overflow:hidden;
}

.concept-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 22px;
  border-bottom:1px solid var(--line);
  background:#1b1d19;
}

.concept-identity {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.9375rem;
}

.concept-identity strong {
  font-weight:550;
  letter-spacing:-.035em;
}

.concept-path {
  display:flex;
  gap:13px;
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--muted);
  margin-left:5px;
}

.concept-path>span {
  color:#5c6255;
}

.concept-label {
  font-family:var(--mono);
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#a9b09f;
  line-height:1.5;
}

.concept-body {
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 230px;
}

.team-panel {
  padding:27px 22px;
  border-right:1px solid var(--line);
  background:#141613;
}

.panel-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--soft);
  line-height:1.5;
}

.panel-label>span {
  font-size:0.75rem;
  border:1px solid var(--line);
  padding:0 5px;
  border-radius:3px;
}

.team-member {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:24px;
}

.avatar {
  width:29px;
  height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:0.75rem;
  border-radius:6px;
  flex-shrink:0;
  font-weight:500;
}

.developer {
  background:#27321f;
  color:#d4ef88;
  border:1px solid #405030;
}

.reviewer {
  background:#252c37;
  color:#b9c7dc;
  border:1px solid #3a465a;
}

.person {
  background:#30312e;
  color:#d0d3c9;
  border:1px solid #464942;
}

.team-member strong {
  display:block;
  font-size:0.8125rem;
  font-weight:550;
  line-height:1.5;
}

.team-member div>span {
  display:block;
  font-size:0.75rem;
  color:var(--soft);
  line-height:1.5;
}

.team-context {
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.team-context p {
  font-size:0.8125rem;
  color:var(--muted);
  margin-top:12px;
  line-height:1.8;
}

.conversation {
  min-width:0;
}

.conversation-header {
  padding:20px 25px;
  border-bottom:1px solid #242722;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:0.8125rem;
  line-height:1.5;
}

.hash {
  font-family:var(--mono);
  color:var(--soft);
  font-size:1.0625rem;
  margin-right:7px;
}

.small-label {
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--soft);
}

.messages {
  padding:27px 25px 20px;
  display:grid;
  gap:24px;
}

.message {
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.message strong {
  font-size:0.8125rem;
  font-weight:550;
  display:block;
  line-height:1.6;
}

.role-label {
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--soft);
  font-weight:400;
  margin-left:7px;
}

.message p {
  font-size:0.875rem;
  color:#b7bbb0;
  line-height:1.65;
  margin-top:5px;
}

.mention {
  color:#d4dfbf;
}

.conversation-footnote {
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--soft);
  display:flex;
  align-items:center;
  gap:7px;
  padding:2px 25px 22px;
}

.workspaces {
  border-left:1px solid var(--line);
  background:#141613;
  padding:27px 20px;
}

.workspace {
  margin-top:23px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:15px 13px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.workspace svg {
  color:var(--muted);
  margin-bottom:4px;
}

.workspace strong {
  font-size:0.75rem;
  font-weight:550;
}

.workspace code {
  font-family:var(--mono);
  font-size:0.75rem;
  color:#c0c7b3;
  overflow-wrap:anywhere;
  white-space:normal;
}

.workspace>span {
  font-size:0.75rem;
  color:var(--soft);
}

.workflow {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  list-style:none;
  margin:0;
  padding:25px 0 0;
  gap:20px;
}

.workflow li {
  display:flex;
  gap:12px;
  align-items:center;
  color:#bdc2b6;
  font-size:0.8125rem;
}

.workflow li:nth-child(2) {
  justify-content:center;
}

.workflow li:last-child {
  justify-content:flex-end;
}

.workflow li>span {
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--soft);
}

.principles {
  padding-top:112px;
  padding-bottom:87px;
}

.principle-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:56px;
  margin-top:42px;
}

.principle-icon {
  color:#b9c3a6;
  margin-bottom:19px;
}

h3 {
  font-size:1.125rem;
  font-weight:550;
  letter-spacing:-.02em;
  line-height:1.4;
  margin-bottom:12px;
}

.principle p {
  color:var(--muted);
  font-size:1rem;
  line-height:1.75;
  max-width:300px;
}

.local-note {
  color:var(--soft);
  font-size:0.75rem;
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:42px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.open-source {
  border-top:1px solid var(--line);
  padding-top:74px;
  padding-bottom:78px;
  display:grid;
  grid-template-columns:1fr .5fr;
  gap:50px;
  align-items:center;
}

.open-content h2 {
  font-size:clamp(34px,4.4vw,52px);
}

.open-content h2 span {
  color:var(--muted);
}

.open-content>p:not(.eyebrow) {
  color:var(--muted);
  max-width:470px;
  font-size:1rem;
  margin-top:23px;
  line-height:1.75;
}

.source-status {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:0.75rem;
  color:#bec8ad;
  margin-top:26px;
}

.source-bracket {
  color:var(--accent);
  letter-spacing:-3px;
  margin-right:3px;
}

.source-signature {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.source-signature>img {
  margin-bottom:20px;
}

.source-signature>span {
  font-size:2.5rem;
  font-weight:500;
  letter-spacing:-.05em;
  line-height:1.1;
}

.source-signature>small {
  color:var(--soft);
  font-size:0.8125rem;
  margin-top:10px;
}

.site-footer {
  display:flex;
  align-items:center;
  gap:24px;
  border-top:1px solid var(--line);
  padding:27px 0 33px;
  font-size:0.75rem;
  color:var(--soft);
}

.footer-brand {
  font-size:1.25rem;
  letter-spacing:-.8px;
  color:var(--text);
  gap:8px;
}

.footer-note {
  margin-left:7px;
}

.email {
  padding-block:8px;
  margin-left:auto;
  color:#555a50;
  transition:color .2s;
}

.error-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px 24px;
  text-align:center;
}

.error-page h1 {
  font-size:clamp(42px,7vw,74px);
}

.error-page p {
  color:var(--muted);
}

@media(min-width:1500px) {
  .hero {
    padding-top:100px;
  }
}

@media(max-width:1000px) {
  .shell {
    width:calc(100% - 56px);
  }
  .concept-body {
    grid-template-columns:180px minmax(0,1fr);
  }
  .workspaces {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    border-left:0;
    border-top:1px solid var(--line);
    grid-column:1/-1;
    padding:20px;
  }
  .workspaces>.panel-label {
    grid-column:1/-1;
  }
  .workspace {
    margin:0;
    display:grid;
    grid-template-columns:auto 1fr;
    padding:12px 15px;
    column-gap:9px;
  }
  .workspace svg {
    grid-row:1/4;
    margin:0;
    align-self:center;
  }
  .workspace code,.workspace>span {
    grid-column:2;
  }
  .section-description br {
    display:none;
  }
  .section-description {
    max-width:290px;
  }
  .principle-grid {
    gap:30px;
  }
}

@media(max-width:680px) {
  .shell {
    width:calc(100% - 40px);
  }
  .site-header {
    height:80px;
  }
  .brand {
    font-size:1.4375rem;
  }
  .brand-family {
    gap:10px;
  }
  .brand-endorsement {
    display:none;
  }
  .site-header nav {
    gap:20px;
    font-size:0.8125rem;
  }
  .code-symbol {
    display:none;
  }
  .hero {
    padding-top:56px;
  }
  h1 {
    font-size:clamp(39px,7.3vw,50px);
    letter-spacing:-.055em;
    line-height:1.12;
    margin-top:26px;
  }
  .hero-description {
    font-size:1rem;
    max-width:430px;
  }
  .hero-note {
    font-size:0.75rem;
  }
  .hero-rule {
    margin-top:48px;
  }
  .product-section {
    padding-top:46px;
  }
  .section-heading {
    display:block;
    margin-bottom:27px;
  }
  .section-description {
    margin-top:18px;
    max-width:360px;
    font-size:1rem;
  }
  .eyebrow {
    font-size:0.75rem;
    margin-bottom:14px;
  }
  h2 {
    font-size:2rem;
  }
  .concept-caption {
    padding:13px 15px;
  }
  .concept-path {
    display:none;
  }
  .concept-label {
    font-size:0.75rem;
  }
  .concept-body {
    display:block;
  }
  .team-panel {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:17px 15px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .team-panel>.panel-label {
    grid-column:1/-1;
  }
  .team-member {
    margin:0;
    gap:8px;
  }
  .team-member strong {
    font-size:0.75rem;
  }
  .team-member div>span {
    font-size:0.75rem;
  }
  .team-context {
    display:none;
  }
  .conversation-header {
    padding:15px 17px;
  }
  .messages {
    padding:22px 17px;
    gap:22px;
  }
  .message {
    gap:10px;
  }
  .message p {
    font-size:0.875rem;
  }
  .conversation-footnote {
    padding:0 17px 20px;
    font-size:0.75rem;
  }
  .workspaces {
    display:grid;
    gap:10px;
    padding:17px 15px;
  }
  .workspace {
    display:flex;
    padding:12px 10px;
  }
  .workspace svg {
    align-self:auto;
  }
  .workspace code {
    font-size:0.75rem;
  }
  .workspace>span {
    font-size:0.75rem;
  }
  .workflow {
    grid-template-columns:1fr;
    gap:13px;
    padding-top:23px;
  }
  .workflow li:nth-child(2),.workflow li:last-child {
    justify-content:flex-start;
  }
  .workflow li {
    font-size:0.8125rem;
  }
  .workflow li>span {
    font-size:0.75rem;
  }
  .principles {
    padding-top:72px;
    padding-bottom:55px;
  }
  .principle-grid {
    grid-template-columns:1fr;
    gap:30px;
    margin-top:32px;
  }
  .principle {
    display:grid;
    grid-template-columns:28px 1fr;
    column-gap:17px;
    align-items:start;
  }
  .principle-icon {
    grid-row:1/3;
    margin:2px 0 0;
    width:23px;
    height:23px;
  }
  h3 {
    font-size:1.125rem;
    margin-bottom:8px;
  }
  .principle p {
    grid-column:2;
    font-size:1rem;
    max-width:450px;
  }
  .local-note {
    align-items:flex-start;
    margin-top:29px;
    font-size:0.75rem;
  }
  .local-note svg {
    margin-top:2px;
  }
  .open-source {
    padding-top:50px;
    padding-bottom:50px;
    grid-template-columns:1fr;
    gap:0;
  }
  .source-signature {
    display:none;
  }
  .open-content h2 {
    font-size:2.25rem;
  }
  .open-content>p:not(.eyebrow) {
    font-size:1rem;
    margin-top:20px;
  }
  .source-status {
    font-size:0.75rem;
  }
  .site-footer {
    flex-wrap:wrap;
    gap:18px 10px;
    padding:24px 0;
  }
  .footer-note {
    display:none;
  }
  .email {
    font-size:0.75rem;
  }
}

@media(max-width:360px) {
  .shell {
    width:calc(100% - 32px);
  }
  .site-header nav {
    gap:14px;
    font-size:0.75rem;
  }
  .brand {
    font-size:1.3125rem;
    gap:6px;
  }
  .brand-mark {
    width:25px;
  }
  h1 {
    font-size:2.25rem;
  }
  .concept-label {
    font-size:0.75rem;
  }
  .workspaces {
    gap:8px;
    padding-inline:12px;
  }
  .workspace code {
    font-size:0.75rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
  .button:hover {
    transform:none;
  }
}