@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root {
  --paper:#f9f8f3;
  --white:#fffefa;
  --ink:#202e29;
  --muted:#64716a;
  --line:#dfe2d8;
  --green:#285c43;
  --pale:#eaf0e5;
  --orange:#bb7443;
  --sidebar-bg:#f0f1e9;
  --subtle:#77856e;
  --nav-ink:#4b5c51;
  --nav-active-bg:#e0e8d9;
  --nav-active-ink:#22452f;
  --line-strong:#bac6b7;
  --diagram-bg:#f0f2e8;
  --diagram-border:#dbe1d2;
  --box-border:#b3c1a9;
  --pale-strong:#e0e9d8;
  --surface-soft:#f4f5ed;
  --code-bg:#edf0e6;
  --code-border:#dce2d4;
  --mermaid-bg:#f1f3eb;
  --input-border:#cfd7c7;
  --focus:#6e9257;
  --status:#6d8b52;
  --badge-bg:#ecede5;
  --badge-ink:#607057;
  --success-bg:#e0eddd;
  --success-ink:#376c36;
  --active-bg:#e3eddf;
  --active-ink:#456a36;
  --warning-bg:#f3ead8;
  --warning-ink:#92713f;
  --error-bg:#f7e9e2;
  --error-ink:#874c3d;
  --error-border:#e8ccc0;
  --notice-bg:#f0f3e9;
  --notice-border:#d8dfce;
  --pending-bg:#f2eddf;
  --pending-border:#e0d6bf;
  --plan-bg:#eef2e7;
  --button-ink:#fffefa;
  --shadow:0 16px 36px rgba(29,49,35,.045);
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif
}
:root[data-theme="dark"] {
  --paper:#111b16;
  --white:#17251d;
  --ink:#e3e9df;
  --muted:#abb9a7;
  --line:#344439;
  --green:#b0cda3;
  --pale:#243b2b;
  --orange:#e1a77b;
  --sidebar-bg:#15211a;
  --subtle:#91a18b;
  --nav-ink:#b8c8b1;
  --nav-active-bg:#2b402f;
  --nav-active-ink:#d8e8cf;
  --line-strong:#61745a;
  --diagram-bg:#1b2b20;
  --diagram-border:#43573c;
  --box-border:#6d8563;
  --pale-strong:#2c412e;
  --surface-soft:#1b2a20;
  --code-bg:#1b2a21;
  --code-border:#3a4d3e;
  --mermaid-bg:#14221c;
  --input-border:#50644c;
  --focus:#bddda9;
  --status:#9fbe88;
  --badge-bg:#2b392e;
  --badge-ink:#b6c8ac;
  --success-bg:#263f2b;
  --success-ink:#bcdaa8;
  --active-bg:#293f2d;
  --active-ink:#bfd8b0;
  --warning-bg:#403b25;
  --warning-ink:#e4ca8b;
  --error-bg:#402e28;
  --error-ink:#e9b7a0;
  --error-border:#765444;
  --notice-bg:#233324;
  --notice-border:#4f6345;
  --pending-bg:#363322;
  --pending-border:#6a603e;
  --plan-bg:#243526;
  --button-ink:#142319;
  --shadow:0 16px 36px rgba(0,0,0,.16);
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.65 var(--sans)
}
a {
  color:var(--green);
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  outline-offset:4px
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.55
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:260px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  padding:30px 18px;
  z-index:10
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  font-size:24px;
  font-weight:600;
  padding:0 12px 30px
}
.brand-icon {
  font:italic 35px var(--serif);
  border:1px solid var(--line-strong);
  border-radius:12px 2px 12px 2px;
  width:45px;
  height:45px;
  text-align:center;
  line-height:40px
}
.brand-icon span {
  font-size:26px
}
.brand small {
  display:block;
  font:10px/1.6 var(--sans);
  letter-spacing:.03em;
  color:var(--muted)
}
#navigation {
  overflow:auto;
  flex:1
}
.nav-item {
  display:block;
  padding:8px 13px;
  border-radius:4px;
  color:var(--nav-ink);
  font-size:12px;
  margin:2px 0
}
.nav-item.active {
  background:var(--nav-active-bg);
  color:var(--nav-active-ink);
  font-weight:600
}
.nav-group {
  margin:23px 13px 6px;
  color:var(--subtle);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase
}
.nav-number {
  color:var(--subtle);
  display:inline-block;
  width:24px;
  font-size:10px
}
.sidebar-foot {
  border-top:1px solid var(--line);
  margin:20px 12px 0;
  padding-top:17px;
  font-size:11px
}
.sidebar-foot small {
  color:var(--muted);
  font-size:10px
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--status);
  border-radius:50%;
  margin-right:7px
}
.workspace {
  margin-left:260px
}
.topbar {
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 50px;
  border-bottom:1px solid var(--line);
  gap:20px
}
.breadcrumb {
  font-size:9px;
  letter-spacing:.1em;
  color:var(--muted)
}
.breadcrumb span {
  color:var(--subtle);
  margin-left:10px
}
.top-tabs {
  display:flex;
  gap:24px;
  white-space:nowrap
}
.top-tabs a {
  font-size:12px;
  color:var(--muted)
}
.top-tabs span {
  font-size:14px
}
.icon-button {
  display:none;
  background:none;
  border:0
}
main {
  max-width:1400px;
  margin:auto;
  padding:65px 60px 80px;
  min-height:calc(100vh - 150px)
}
.eyebrow {
  font-size:10px;
  letter-spacing:.16em;
  color:var(--green);
  font-weight:600;
  margin:0 0 20px
}
h1,h2,h3 {
  font-weight:400;
  line-height:1.15
}
h1,h2 {
  font-family:var(--serif)
}
h1 {
  font-size:clamp(40px,4.6vw,68px);
  letter-spacing:-.035em;
  margin:0 0 24px
}
h1 em {
  font-weight:400;
  color:var(--green)
}
h2 {
  font-size:34px;
  letter-spacing:-.02em
}
h3 {
  font-size:18px;
  font-weight:600
}
.hero {
  max-width:840px
}
.hero-description {
  font-size:16px;
  color:var(--muted);
  max-width:640px;
  line-height:1.8
}
.hero-actions {
  display:flex;
  gap:12px;
  margin:30px 0
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border:1px solid var(--line-strong);
  border-radius:4px;
  padding:11px 18px;
  font-size:12px;
  background:transparent;
  color:var(--green)
}
.button.primary {
  background:var(--green);
  border-color:var(--green);
  color:var(--button-ink)
}
.button.small {
  padding:6px 12px;
  gap:12px
}
.hero-meta {
  display:flex;
  gap:28px;
  font-size:10px;
  color:var(--muted)
}
.hero-meta span+span:before {
  content:'·';
  margin-right:25px;
  color:var(--orange)
}
.intro-grid {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:55px;
  border-top:1px solid var(--line);
  margin-top:55px;
  padding-top:45px;
  align-items:center
}
.intro-grid h2 {
  margin-top:0
}
.intro-grid p:not(.eyebrow) {
  color:var(--muted);
  font-size:13px;
  max-width:440px
}
.diagram-card {
  padding:26px;
  background:var(--diagram-bg);
  border:1px solid var(--diagram-border);
  border-radius:6px
}
.diagram-heading {
  font-size:9px;
  letter-spacing:.11em;
  color:var(--muted);
  display:flex;
  justify-content:space-between
}
.diagram-heading span {
  color:var(--subtle)
}
.loop-row {
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:28px
}
.loop-box {
  flex:1;
  border:1px solid var(--box-border);
  padding:17px 12px;
  background:var(--white);
  border-radius:4px;
  text-align:center;
  font-size:12px
}
.loop-box small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}
.loop-box.shaded {
  background:var(--pale-strong)
}
.loop-return {
  border-bottom:1px dashed var(--box-border);
  color:var(--green);
  padding:12px 0 15px
}
.loop-return span {
  font-size:10px;
  margin-left:8px
}
.diagram-caption {
  font-size:11px!important;
  line-height:1.7;
  margin-bottom:0
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  transform:translateY(-160%);
  padding:10px 18px;
  background:var(--white);
  border:1px solid var(--green);
  border-radius:4px;
  z-index:50
}
.skip-link:focus {
  transform:none
}
:focus-visible {
  outline:2px solid var(--focus)
}
::selection {
  background:var(--pale-strong);
  color:var(--ink)
}
.topbar-actions {
  display:flex;
  align-items:center;
  gap:24px;
  margin-left:auto
}
.intro-brand {
  display:none;
  font:600 24px/1.2 var(--sans);
  color:var(--ink);
  flex-shrink:0
}
.intro-brand span {
  display:block;
  font:10px/1.8 var(--sans);
  color:var(--muted)
}
.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-shrink:0;
  min-height:36px;
  padding:7px 10px;
  background:var(--white);
  color:var(--green);
  border:1px solid var(--line-strong);
  border-radius:5px;
  font-size:11px
}
.theme-toggle[aria-pressed="true"] {
  background:var(--pale)
}
.theme-icon {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.sun-icon, [data-theme="dark"] .moon-icon {
  display:none
}
[data-theme="dark"] .sun-icon {
  display:block
}
.intro-page .sidebar, .intro-page #menu-button, .intro-page .breadcrumb {
  display:none
}
.intro-page .workspace {
  margin-left:0
}
.intro-page .intro-brand {
  display:block
}
.intro-page .topbar {
  height:88px;
  padding-inline:max(32px,calc((100vw - 1100px) / 2))
}
.intro-page main {
  max-width:1180px;
  padding:44px 40px 60px
}
.intro-cover-card, .intro-preamble {
  width:100%;
  margin-inline:auto;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  box-shadow:var(--shadow)
}
.intro-cover-link {
  position:relative;
  display:block;
  border-radius:8px
}
.intro-cover-link img {
  display:block;
  width:100%;
  height:auto;
  border-radius:8px
}
.cover-link-hint {
  position:absolute;
  right:24px;
  bottom:24px;
  display:inline-flex;
  align-items:center;
  gap:20px;
  padding:8px 14px;
  background:var(--white);
  border:1px solid var(--line-strong);
  border-radius:4px;
  font-size:11px;
  font-weight:500
}
.intro-cover-link:hover .cover-link-hint {
  background:var(--pale)
}
.intro-preamble {
  margin-top:30px;
  padding:40px 52px 44px
}
.intro-preamble .eyebrow {
  margin-bottom:12px
}
.intro-preamble h2 {
  margin:0 0 26px;
  font-size:34px
}
.preamble-copy {
  font-size:15px;
  line-height:1.9
}
.preamble-copy p {
  margin:0 0 19px
}
.preamble-copy p:last-child {
  margin-bottom:0
}
.model-note {
  color:var(--muted);
  font-size:12px;
  line-height:1.85;
  padding-top:18px;
  border-top:1px solid var(--line);
  margin-top:25px
}
.model-note strong {
  color:var(--ink);
  font-weight:500
}
.intro-cta {
  margin-top:12px;
  min-width:175px
}
.button:hover {
  background:var(--pale);
  border-color:var(--green)
}
.button.primary:hover {
  background:var(--green);
  opacity:.88
}
.site-footer {
  display:flex;
  align-items:center;
  gap:22px;
  padding-block:15px;
  letter-spacing:0
}
.site-footer .footer-brand {
  letter-spacing:.1em;
  font-size:9px
}
.site-footer .footer-author {
  float:none;
  margin:0 0 0 auto;
  font-size:12px;
  color:var(--muted)
}
.site-footer nav {
  display:flex;
  gap:20px
}
.site-footer nav a {
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:12px
}
.intro-page .site-footer {
  padding-inline:max(32px,calc((100vw - 1100px) / 2))
}
input::placeholder, textarea::placeholder {
  color:var(--muted);
  opacity:.8
}
hr {
  border:0;
  border-top:1px solid var(--line);
  margin-block:30px
}
.build-status {
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:4px;
  margin-top:36px;
  font-size:13px
}
.build-status p {
  margin:3px 0;
  color:var(--muted);
  font-size:12px
}
footer {
  padding:22px 50px;
  border-top:1px solid var(--line);
  font-size:9px;
  letter-spacing:.1em;
  color:var(--green)
}
footer span {
  float:right;
  color:var(--muted);
  letter-spacing:0;
  font-size:10px
}
@media(min-width:1600px) {
  main {
    padding-top:85px
  }
}
@media(max-width:1100px) {
  .sidebar {
    width:220px
  }
  .workspace {
    margin-left:220px
  }
  .topbar {
    padding:0 28px
  }
  .breadcrumb span {
    display:none
  }
  main {
    padding:45px 32px
  }
  .intro-grid {
    gap:25px
  }
  .top-tabs {
    gap:15px
  }
  .topbar-actions {
    gap:18px
  }
  .breadcrumb {
    display:none
  }
  .theme-label {
    display:none
  }
}
@media(max-width:760px) {
  .sidebar {
    transform:translateX(-100%);
    width:260px
  }
  .sidebar.open {
    transform:none
  }
  .workspace {
    margin-left:0
  }
  .icon-button {
    display:block;
    color:var(--ink);
    padding:6px;
    font-size:19px
  }
  .breadcrumb {
    display:none
  }
  .topbar {
    height:62px;
    padding:0 20px
  }
  main {
    padding:35px 22px
  }
  .intro-grid {
    grid-template-columns:1fr
  }
  .hero-meta {
    flex-wrap:wrap;
    gap:9px 18px
  }
  .hero-meta span+span:before {
    display:none
  }
  .hero-actions {
    flex-wrap:wrap
  }
  footer {
    padding:18px 22px
  }
  footer span {
    float:none;
    display:block;
    margin-top:5px
  }
  h1 {
    font-size:43px
  }
  .diagram-card {
    padding:20px
  }
  .topbar-actions {
    gap:14px
  }
  .top-tabs a:nth-child(n+3) {
    display:none
  }
  .intro-page .topbar {
    height:75px;
    padding-inline:22px
  }
  .intro-page main {
    padding:25px 22px 38px
  }
  .intro-page .top-tabs a:not(:first-child) {
    display:none
  }
  .intro-preamble {
    padding:28px 25px 30px;
    margin-top:22px
  }
  .intro-preamble h2 {
    font-size:29px
  }
  .preamble-copy {
    font-size:14px
  }
  .cover-link-hint {
    bottom:10px;
    right:10px;
    padding:5px 10px;
    gap:12px;
    font-size:10px
  }
  .site-footer, .intro-page .site-footer {
    padding:16px 22px;
    flex-wrap:wrap;
    gap:4px 18px
  }
  .site-footer .footer-author {
    display:inline;
    margin:0 0 0 auto
  }
  .site-footer nav {
    width:100%;
    justify-content:flex-end
  }
}