#systems-chapter {
  --spine-blue: #8ea8e6;
  --spine-muted: #97a3b6;
  --spine-line: #263040;
  color: #e5e9f0;
  background: #020304;
  scroll-margin-top: 0;
}
.spine-kicker { margin: 0; color: #8795ac; font: 9px/1.5 'Courier New',monospace; letter-spacing: .13em; text-transform: uppercase; }
.systems-intro { min-height: 70svh; max-width: 1600px; margin: auto; padding: 10svh 6% 8svh; display: flex; flex-direction: column; justify-content: center; }
.systems-intro h2 { margin: 26px 0 38px; font-size: clamp(48px,7.6vw,114px); font-weight: 400; line-height: 1.04; letter-spacing: -.055em; }
.systems-intro h2 em { color: var(--spine-blue); font-family: Georgia,'Times New Roman',serif; font-weight: 400; }
.systems-intro-bottom { display: flex; justify-content: space-between; align-items: end; gap: 45px; }
.systems-intro-bottom p { max-width: 585px; margin: 0; color: #a6b0bd; font-size: 15px; line-height: 1.85; }
.spine-start { display: flex; align-items: center; gap: 28px; min-height: 48px; font-size: 12px; border-bottom: 1px solid #6d83ae55; white-space: nowrap; }
.spine-start span { color: var(--spine-blue); font-size: 25px; }
.system-story { position: relative; height: 420svh; border-top: 1px solid #1f2631; }
.system-sticky { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr); width: 100%; min-width: 0; height: 100svh; padding: 22px 5% 14px; max-width: 1650px; margin: auto; overflow: hidden; }
.spine-header,.spine-steps,.spine-workbench,.spine-narrative { min-width: 0; max-width: 100%; }
.spine-narrative h3,.spine-body,.spine-rule p { overflow-wrap: anywhere; }
.spine-header { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-bottom: 18px; border-bottom: 1px solid var(--spine-line); }
.spine-identity { display: flex; gap: 13px; align-items: center; font: 10px/1.3 'Courier New',monospace; white-space: nowrap; }
.spine-identity span { color: #69768b; font-size: 8px; letter-spacing: .12em; }
.spine-identity strong { font-weight: 400; color: #adbeea; }
.spine-tabs { display: flex; gap: 5px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #445a7d transparent; }
.spine-tabs::-webkit-scrollbar { display: block; height: 3px; }
.spine-tabs::-webkit-scrollbar-thumb { background: #445a7d; }
.spine-tabs button { flex: 0 0 auto; white-space: nowrap; min-height: 44px; padding: 10px 17px; background: none; border: 1px solid transparent; border-radius: 3px; color: #8996a9; font-size: 12px; transition: background .2s,color .2s; }
.spine-tabs button:hover { background: #111723; color: #d8e2f4; }
.spine-tabs button[aria-selected=true] { border-color: #44587d; background: #101a2b; color: #dce7ff; }
.spine-steps { display: flex; align-items: center; gap: 22px; padding: 13px 0; }
.spine-steps button { display: flex; align-items: center; gap: 9px; min-height: 33px; padding: 0; border: 0; background: none; color: #8793a5; font-size: 11px; }
.spine-steps button span { font: 9px 'Courier New',monospace; color: #526078; }
.spine-steps button:hover,.spine-steps button[aria-current=step] { color: #e0e9f9; }
.spine-steps button[aria-current=step] span { color: var(--spine-blue); }
.spine-workbench { display: grid; grid-template-columns: minmax(250px,.9fr) minmax(0,1.35fr); gap: 5%; min-height: 0; outline: none; padding: 10px 0 20px; }
.spine-narrative { min-height: 0; overflow-y: auto; padding-right: 10px; }
.spine-narrative h3 { max-width: 470px; margin: 15px 0 18px; font-size: clamp(28px,3.1vw,45px); font-weight: 400; line-height: 1.13; letter-spacing: -.04em; }
.spine-body { max-width: 450px; color: #aeb7c5; font-size: 13px; line-height: 1.75; margin: 0 0 20px; }
.spine-rule { border-left: 1px solid #718cbf; padding-left: 15px; margin: 19px 0; }
.spine-rule > span { color: #73829a; font-size: 9px; }
.spine-rule p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: #c8d6ef; }
.spine-tradeoff { font-size: 11px; color: #91a0b7; }
.spine-tradeoff summary { min-height: 36px; cursor: pointer; padding: 9px 0; }
.spine-tradeoff p { margin: 6px 0 15px; color: #aab5c6; line-height: 1.7; max-width: 440px; }
.spine-aside { display: flex; flex-direction: column; gap: 6px; max-width: 340px; margin: 20px 0 0; color: #90a6d7; font-family: Georgia,'Times New Roman',serif; font-size: 15px; font-style: italic; line-height: 1.5; }
.spine-aside > span:first-child { color: #697fa9; font: 8px/1.5 Arial,Helvetica,sans-serif; letter-spacing: .10em; }
.spine-right { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(125px,.8fr) minmax(150px,1.2fr); gap: 15px; }
.spine-diagram { min-width: 0; min-height: 0; background: radial-gradient(ellipse,#16203a2e,transparent 70%); }
.spine-diagram svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spine-wire { fill: none; stroke: #313e54; stroke-width: 1.1; stroke-dasharray: 4 5; }
.spine-wire.is-reached { stroke: #758fbd; }
.spine-node rect { fill: #06090e; stroke: #303c50; stroke-width: 1; }
.spine-node { opacity: .5; transition: opacity .25s; }
.spine-node.is-reached { opacity: 1; }
.spine-node.is-current rect { fill: #101a2b; stroke: #97b2ed; }
.spine-node.is-guarded rect { stroke: #bf9c69; fill: #201a12; }
.spine-node-label { fill: #d4deed; font: 11px Arial,Helvetica,sans-serif; }
.spine-node-sub { fill: #8b9ab3; font: 7px 'Courier New',monospace; }
.spine-event { fill: #c1d2ff; filter: drop-shadow(0 0 5px #668dde); }
.spine-preview { min-height: 0; overflow: hidden; background: #070a10; border: 1px solid #252d3a; border-radius: 4px; }
.spine-mobile-source { display: none; min-height: 44px; margin: 12px 0; padding: 10px 14px; border: 1px solid #425474; border-radius: 3px; background: #0d1522; color: #c8d7f3; font-size: 11px; }
.spine-mobile-source:hover { background: #18263f; border-color: #829dcc; }
.spine-code-header { display: flex; justify-content: space-between; gap: 14px; align-items: center; min-height: 38px; padding: 0 13px; border-bottom: 1px solid #202733; font: 9px 'Courier New',monospace; color: #7f91ac; }
.spine-code-header button { border: 0; padding: 10px 0; color: #a6b9df; font: 10px Arial,Helvetica,sans-serif; background: none; }
.spine-preview pre { height: calc(100% - 38px); margin: 0; overflow: auto; padding: 13px 10px 18px; color: #b7c2d4; font: 11px/1.75 'Cascadia Code',Consolas,monospace; tab-size: 4; }
.source-line { display: block; white-space: pre; min-height: 1.7em; }
.source-line::before { content: attr(data-line); display: inline-block; width: 35px; padding-right: 14px; text-align: right; color: #526075; user-select: none; }
.syn-comment { color: #758399; }
.syn-keyword { color: #9aafe6; }
.syn-string { color: #a4c6bf; }
.syn-number { color: #c6b391; }

body.source-open { overflow: hidden; }
.system-source-dialog { width: min(1160px,calc(100vw - 42px)); height: min(880px,calc(100svh - 42px)); max-width: none; max-height: none; margin: auto; padding: 0; color: #dce4ef; background: #080c13; border: 1px solid #3d4e6b; border-radius: 9px; box-shadow: 0 20px 90px #000b; overflow: hidden; }
.system-source-dialog[open] { display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto; }
.system-source-dialog::backdrop { background: #000b; backdrop-filter: blur(7px); }
.source-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 28px; border-bottom: 1px solid #243046; }
.source-header h2 { margin: 7px 0 0; font-size: 22px; font-weight: 400; letter-spacing: -.025em; }
.source-close { background: none; color: #c5d2e8; border: 1px solid #36445d; border-radius: 50%; width: 42px; height: 42px; flex-shrink: 0; font-size: 27px; }
.source-close:hover { background: #1a2538; }
.source-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 25px; }
.source-toolbar > div { display: flex; align-items: center; gap: 10px; }
.source-toolbar button,.source-toolbar a { display: inline-flex; align-items: center; min-height: 40px; padding: 10px; border: 1px solid #303e54; border-radius: 3px; color: #9fb5de; background: none; font-size: 11px; cursor: pointer; }
.source-views button[aria-pressed=true] { color: #e1ebff; background: #17243b; border-color: #6079a9; }
.source-toolbar button:hover,.source-toolbar a:hover { border-color: #7c94bf; }
.source-scope { margin: 0; padding: 5px 28px 16px; color: #92a2bb; font-size: 11px; line-height: 1.65; border-bottom: 1px solid #233047; }
.source-full { min-height: 0; overflow: auto; margin: 0; padding: 22px 22px 30px; font: 12px/1.7 'Cascadia Code',Consolas,monospace; color: #c0ccdf; tab-size: 4; }
.source-status { margin: 0; min-height: 28px; padding: 5px 28px; font-size: 10px; color: #a4b7dc; }
.spine-narrative,.spine-preview pre,.source-full { scrollbar-width: thin; scrollbar-color: #415471 #0c111a; }
.spine-narrative::-webkit-scrollbar,.spine-preview pre::-webkit-scrollbar,.source-full::-webkit-scrollbar { display: block; width: 7px; height: 7px; }
.spine-narrative::-webkit-scrollbar-thumb,.spine-preview pre::-webkit-scrollbar-thumb,.source-full::-webkit-scrollbar-thumb { background: #415471; border-radius: 5px; }

@media(max-width:740px) {
  .systems-intro { min-height: 74svh; padding: 70px 6% 65px; }
  .systems-intro h2 { font-size: clamp(42px,11.3vw,70px); margin: 24px 0 30px; }
  .systems-intro-bottom { flex-direction: column; align-items: start; gap: 23px; }
  .systems-intro-bottom p { font-size: 13px; line-height: 1.8; }
  .system-story { height: 440svh; }
  .system-sticky { padding: 15px 5% 9px; }
  .spine-header { display: block; padding-bottom: 7px; }
  .spine-identity { justify-content: space-between; margin-bottom: 10px; font-size: 9px; }
  .spine-tabs { gap: 3px; justify-content: flex-start; }
  .spine-tabs button { min-height: 44px; padding: 8px 13px; font-size: 11px; flex: 0 0 auto; }
  .spine-mobile-source { display: inline-flex; align-items: center; }
  .spine-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; padding: 7px 0; }
  .spine-steps button { gap: 5px; font-size: 10px; min-height: 33px; }
  .spine-steps button span { font-size: 8px; }
  .spine-workbench { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) minmax(175px,25svh); gap: 4px; padding: 5px 0 8px; }
  .spine-narrative { padding-right: 3px; }
  .spine-narrative h3 { font-size: 28px; margin: 9px 0 12px; }
  .spine-body { font-size: 12px; line-height: 1.65; margin-bottom: 10px; }
  .spine-rule { margin: 13px 0 8px; padding-left: 12px; }
  .spine-rule p { font-size: 11px; }
  .spine-tradeoff { font-size: 10px; }
  .spine-aside { margin-top: 10px; font-size: 12px; }
  .spine-right { display: block; }
  .spine-diagram { height: 100%; }
  .spine-preview { display: none; }
  .system-source-dialog { width: calc(100vw - 12px); height: calc(100svh - 16px); border-radius: 6px; }
  .source-header { padding: 17px 15px; }
  .source-header h2 { font-size: 17px; }
  .source-header .spine-kicker { font-size: 8px; }
  .source-toolbar { flex-wrap: wrap; gap: 7px; padding: 8px 12px; }
  .source-toolbar > div { gap: 6px; }
  .source-toolbar button,.source-toolbar a { font-size: 10px; min-height: 39px; padding: 8px; }
  .source-scope { padding: 5px 16px 12px; font-size: 10px; }
  .source-full { padding: 16px 8px 25px; font-size: 11px; }
  .source-line::before { width: 29px; padding-right: 10px; }
}
@media(max-height:730px) {
  .spine-aside { display: none; }
  .spine-narrative h3 { font-size: 29px; }
  .spine-rule { margin: 10px 0; }
}
@media(max-height:650px) and (max-width:740px) {
  .system-sticky { padding-top: 8px; }
  .spine-workbench { grid-template-rows: minmax(0,1fr) 160px; }
  .spine-identity { margin-bottom: 4px; }
  .spine-steps { padding: 3px 0; }
}
@media(prefers-reduced-motion:reduce) {
  .spine-node,.spine-tabs button { transition: none; }
  .spine-event { filter: none; }
}