@font-face {
  font-display:swap;
  font-family:Sohne;
  src:url('assets/soehne-buch.woff2')
}
@font-face {
  font-display:swap;
  font-family:Sohne;
  src:url('assets/soehne-halbfett.woff2');
  font-weight:600
}

:root {
  --bg:var(--tone-0);
  --surface:var(--tone-2);
  --ink:var(--tone-14);
  --muted:var(--tone-13);
  --blue:var(--tone-13);
  --action:var(--tone-8);
  --control-border:var(--tone-11);
  --focus:var(--tone-13);
  --header-height:88px;
  --line:color-mix(in srgb,var(--tone-14) 12.549%,transparent);
  --display:Sohne,Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + 16px)
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Sohne,Arial,sans-serif;
  font-size:1rem;
  line-height:1.55
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--tone-13);
  outline-offset:5px
}
.skip {
  position:fixed;
  top:-100px;
  padding:16px;
  background:var(--action);
  z-index:100
}
.skip:focus {
  top:0
}
header {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--tone-0) 92.549%,transparent);
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(20px)
}
.brand {
  display:flex;
  gap:14px;
  align-items:center;
  font-weight:600;
  font-size:.95rem
}
.mark {
  display:grid;
  place-content:center;
  border:1px solid color-mix(in srgb,var(--tone-9) 46.667%,transparent);
  border-radius:7px;
  width:45px;
  height:34px;
  font-size:.875rem;
  letter-spacing:-.035em;
  color:var(--tone-13)
}
header nav {
  display:flex;
  gap:35px;
  font-size:.9rem
}
header nav a {
  color:var(--tone-13)
}
header nav a:hover {
  color:var(--tone-14)
}
.edition,.eyebrow,.mini-label,.chapter-meta,.tag,.diagram-top,.hero-bottom,.principle>span,.pdf-label {
  font-size:.875rem;
  letter-spacing:.04em
}
.edition {
  color:var(--muted)
}
.reading-progress {
  position:fixed;
  top:var(--header-height);
  left:0;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--blue);
  z-index:31
}
.hero {
  min-height:750px;
  padding:65px 5% 25px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:5%;
  position:relative;
  background:radial-gradient(ellipse at 100% 42%,color-mix(in srgb,var(--tone-7) 43.922%,transparent),transparent 65%);
  overflow:hidden
}
.eyebrow {
  color:var(--muted);
  display:flex;
  gap:10px;
  align-items:center
}
.line {
  width:23px;
  height:2px;
  background:var(--blue)
}
h1 {
  font-family:var(--display);
  font-size:clamp(3.5rem,6.2vw,6rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:29px 0 24px
}
.title-dot {
  color:var(--blue)
}
.hero-deck {
  font-size:1.55rem;
  line-height:1.4;
  margin:0 0 20px;
  letter-spacing:-.02em
}
.hero-intro {
  color:var(--muted);
  max-width:460px;
  margin-bottom:28px
}
.primary {
  display:inline-block;
  background:var(--ink);
  color:var(--tone-1);
  border-radius:5px;
  padding:13px 22px;
  font-weight:600;
  font-size:.95rem;
  transition:background .2s,transform .2s
}
.primary:hover {
  background:var(--tone-14);
  transform:translateY(-2px)
}
.hero-system {
  align-self:center;
  max-width:560px;
  border:1px solid color-mix(in srgb,var(--tone-13) 21.961%,transparent);
  background:linear-gradient(130deg,color-mix(in srgb,var(--tone-2) 86.667%,transparent),color-mix(in srgb,var(--tone-7) 37.647%,transparent));
  padding:25px;
  border-radius:12px
}
.diagram-top {
  display:flex;
  justify-content:space-between;
  color:var(--tone-13);
  border-bottom:1px solid var(--line);
  padding-bottom:20px
}
.system-map {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px 30px;
  padding:24px 0
}
.system-node {
  position:relative;
  text-align:left;
  border:1px solid color-mix(in srgb,var(--tone-11) 30.196%,transparent);
  background:var(--tone-4);
  padding:14px;
  border-radius:6px;
  transition:background-color .18s,border-color .18s,color .18s
}
.system-node:nth-child(2n+1):after {
  content:'';
  position:absolute;
  width:31px;
  height:1px;
  right:-31px;
  top:50%;
  background:color-mix(in srgb,var(--tone-9) 53.333%,transparent)
}
.system-node span {
  font-size:.875rem;
  color:var(--tone-13);
  margin-right:9px
}
.system-node strong {
  font-size:.9rem;
  font-weight:600
}
.system-node:hover,.system-node.active {
  background:var(--tone-8);
  border-color:var(--tone-12)
}
.map-note {
  min-height:164px;
  background:color-mix(in srgb,var(--tone-1) 62.745%,transparent);
  border-radius:5px;
  padding:15px 18px
}
.map-note p {
  font-size:.95rem;
  margin:8px 0 0;
  color:var(--tone-14)
}
.mini-label {
  color:var(--tone-13)
}
.human-boundary {
  border-top:1px solid color-mix(in srgb,var(--tone-13) 33.333%,transparent);
  padding-top:18px;
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.9rem;
  color:var(--tone-14)
}
.boundary-icon {
  color:var(--tone-13);
  font-size:1.2rem
}
.hero-bottom {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  color:var(--tone-12);
  margin-top:35px;
  font-size:.875rem
}
.chapter-layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:60px;
  max-width:1280px;
  margin:auto;
  padding:90px 5%
}
.chapter-nav {
  position:sticky;
  top:140px;
  align-self:start
}
.chapter-nav nav {
  margin-top:25px
}
.chapter-nav a {
  display:flex;
  gap:15px;
  font-size:.95rem;
  color:var(--tone-12);
  padding:13px 0;
  border-bottom:1px solid color-mix(in srgb,var(--tone-14) 5.098%,transparent);
  transition:background-color .18s,border-color .18s,color .18s
}
.chapter-nav a span {
  font-size:.875rem;
  color:var(--tone-13)
}
.chapter-nav a.active {
  color:var(--tone-14)
}
.chapter-nav a.active span {
  color:var(--tone-12)
}
.aside-note {
  color:var(--tone-13);
  font-size:.875rem;
  margin-top:45px
}
.chapter {
  padding-bottom:90px;
  margin-bottom:85px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:24px
}
.chapter:last-child {
  margin-bottom:0;
  padding-bottom:0;
  border:0
}
.chapter-meta {
  display:flex;
  justify-content:space-between;
  color:var(--tone-11);
  margin-bottom:22px
}
h2 {
  font-family:var(--display);
  font-size:clamp(2rem,3.4vw,3.4rem);
  line-height:1.15;
  letter-spacing:-.035em;
  margin:0 0 22px
}
.chapter-intro {
  font-size:1.18rem;
  color:var(--tone-13);
  max-width:680px;
  margin:0 0 35px
}
.interactive-panel {
  background:linear-gradient(140deg,var(--tone-3),var(--tone-2));
  border:1px solid color-mix(in srgb,var(--tone-12) 18.824%,transparent);
  border-radius:10px;
  padding:28px;
  margin:30px 0
}
.panel-head {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:20px;
  margin-bottom:22px
}
h3 {
  font-size:1.15rem;
  margin:0;
  line-height:1.4
}
.tag {
  color:var(--tone-11);
  font-size:.875rem;
  white-space:nowrap;
  margin-top:5px
}
.segmented {
  display:flex;
  gap:4px;
  border:1px solid var(--line);
  padding:4px;
  border-radius:7px;
  width:max-content;
  max-width:100%;
  margin-bottom:28px
}
.segmented button {
  padding:8px 14px;
  background:none;
  border:0;
  border-radius:4px;
  color:var(--tone-13);
  font-size:.9rem
}
.segmented button[aria-pressed=true] {
  background:var(--tone-8);
  color:var(--tone-14)
}
.slice-diagram {
  display:flex;
  align-items:center;
  gap:0;
  min-height:100px;
  position:relative
}
.slice-node {
  flex:1;
  text-align:center;
  background:var(--tone-5);
  border:1px solid color-mix(in srgb,var(--tone-11) 53.333%,transparent);
  border-radius:5px;
  padding:17px 6px;
  font-size:.875rem;
  font-weight:600
}
.connector {
  height:2px;
  background:var(--blue);
  width:20px;
  flex-shrink:0
}
.horizontal .connector {
  background:repeating-linear-gradient(90deg,var(--tone-9) 0 4px,transparent 4px 7px)
}
.horizontal .slice-node {
  background:var(--tone-5);
  border-color:var(--tone-8);
  color:var(--tone-13)
}
.diagram-caption {
  color:var(--tone-13);
  font-size:.95rem;
  margin-top:24px;
  margin-bottom:0
}
.principle {
  display:flex;
  gap:25px;
  border-left:2px solid var(--blue);
  padding-left:22px;
  margin:30px 0
}
.principle>span {
  color:var(--tone-12);
  padding-top:4px;
  white-space:nowrap
}
.principle p {
  font-size:1.2rem;
  line-height:1.5;
  margin:0
}
.sources {
  padding:70px 5%;
  border-top:1px solid var(--line);
  background:linear-gradient(90deg,var(--tone-1),var(--tone-2));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.sources h2 {
  font-size:2.3rem;
  margin-top:20px
}
.sources p {
  color:var(--muted);
  max-width:430px
}
.source-links {
  align-self:center
}
.source-links a {
  display:flex;
  align-items:center;
  gap:25px;
  border-top:1px solid var(--line);
  padding:25px 0
}
.source-links a:hover {
  color:var(--tone-13)
}
.source-links a>span:first-child {
  color:var(--tone-11);
  font-size:.875rem
}
.source-links small {
  display:block;
  color:var(--tone-12);
  font-size:.875rem;
  margin-top:5px
}
.pdf-label {
  margin-left:auto;
  color:var(--tone-12);
  font-size:.875rem
}
footer {
  padding:30px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.875rem;
  color:var(--tone-12)
}
footer .brand {
  color:var(--tone-13)
}
@media(min-width:1500px) {
  .hero {
    padding-left:max(5%,calc((100vw - 1400px)/2));
    padding-right:max(5%,calc((100vw - 1400px)/2))
  }
}
@media(max-width:1000px) {
  header .edition {
    display:none
  }
  .hero {
    gap:30px
  }
  .hero-system {
    padding:19px
  }
  .system-node {
    padding:12px 8px
  }
  .system-node strong {
    font-size:.875rem
  }
  .system-node span {
    margin-right:5px
  }
  .chapter-layout {
    grid-template-columns:170px 1fr;
    gap:35px
  }
  .tag {
    display:none
  }
  .slice-node {
    font-size:.875rem
  }
  .connector {
    width:10px
  }
  .sources {
    gap:35px
  }
}
@media(max-width:720px) {
  html {
    scroll-padding-top:calc(var(--header-height) + 16px)
  }
  header {
    height:70px;
    padding:0 6%
  }
  header nav {
    gap:15px;
    font-size:.875rem
  }
  header nav a:first-child {
    display:none
  }
  .brand {
    font-size:.875rem;
    gap:10px
  }
  .hero {
    padding:40px 6% 24px;
    grid-template-columns:1fr;
    gap:32px;
    min-height:0
  }
  .hero .eyebrow {
    font-size:.875rem
  }
  h1 {
    font-size:clamp(3.6rem,13vw,5.5rem);
    margin:26px 0
  }
  .hero-deck {
    font-size:1.3rem
  }
  .hero-intro {
    font-size:1rem
  }
  .hero-system {
    width:100%;
    max-width:none
  }
  .system-node strong {
    font-size:.9rem
  }
  .hero-bottom {
    margin-top:5px;
    gap:20px;
    font-size:.875rem;
    line-height:1.6
  }
  .hero-bottom span:first-child {
    max-width:200px
  }
  .hero-bottom span:last-child {
    text-align:right;
    max-width:90px
  }
  .chapter-layout {
    display:block;
    padding:40px 6%
  }
  .chapter-nav {
    position:static;
    margin-bottom:50px
  }
  .chapter-nav nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 22px;
    margin-top:15px
  }
  .chapter-nav a {
    font-size:.875rem;
    gap:10px;
    padding:10px 0
  }
  .aside-note {
    display:none
  }
  .chapter {
    padding-bottom:55px;
    margin-bottom:55px;
    scroll-margin-top:24px
  }
  .chapter-meta {
    font-size:.875rem
  }
  h2 {
    font-size:2.1rem
  }
  .chapter-intro {
    font-size:1.05rem
  }
  .interactive-panel {
    padding:20px
  }
  .panel-head h3 {
    font-size:1rem
  }
  .slice-diagram {
    flex-direction:column;
    align-items:stretch
  }
  .slice-node {
    font-size:.95rem;
    padding:13px
  }
  .connector {
    height:20px;
    width:2px;
    align-self:center
  }
  .horizontal .connector {
    background:repeating-linear-gradient(0deg,var(--tone-9) 0 4px,transparent 4px 7px)
  }
  .principle {
    display:block;
    padding-left:18px
  }
  .principle p {
    font-size:1.1rem;
    margin-top:10px
  }
  .sources {
    display:block;
    padding:50px 6%
  }
  .sources h2 {
    font-size:2rem
  }
  .source-links {
    margin-top:30px
  }
  .source-links a {
    gap:15px;
    font-size:.95rem
  }
  footer {
    gap:24px;
    flex-wrap:wrap;
    padding:25px 6%
  }
  footer>span {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
.slide-notes {
  margin-top:35px
}
.notes-label {
  font-size:.875rem;
  letter-spacing:.04em;
  color:var(--tone-11);
  margin-bottom:15px
}
.slide-notes details {
  border-bottom:1px solid var(--line)
}
summary {
  cursor:pointer;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
.slide-notes summary {
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 0;
  font-size:.95rem;
  line-height:1.4
}
.slide-number {
  color:var(--tone-11);
  font-size:.875rem;
  width:23px;
  flex-shrink:0
}
.expand-icon {
  margin-left:auto;
  font-size:1.2rem;
  color:var(--tone-12)
}
.slide-notes details[open] .expand-icon {
  transform:rotate(45deg)
}
.notes-body {
  padding:0 32px 12px 38px
}
.notes-body p {
  font-size:1rem;
  color:var(--tone-14)
}
.notes-body .walkthrough-copy {
  color:var(--tone-12);
  border-left:1px solid var(--tone-8);
  padding-left:18px
}
.packet {
  margin:38px 0
}
.packet-title {
  margin-bottom:20px
}
.packet-title h3 {
  margin-top:9px;
  font-size:1.3rem
}
.packet-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.packet-grid>div {
  padding:22px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.packet-grid span {
  font-size:.875rem;
  color:var(--tone-12);
  letter-spacing:.04em
}
.packet-grid h4 {
  font-size:1.1rem;
  margin:12px 0 8px;
  font-weight:600
}
.packet-grid p {
  color:var(--tone-12);
  font-size:.95rem;
  margin:0
}
.repo-flow {
  border-top:1px solid var(--line);
  padding-top:25px;
  margin:32px 0
}
.repo-chats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:20px 0 0;
  padding-bottom:25px
}
.repo-chats button {
  background:var(--tone-3);
  border:1px solid color-mix(in srgb,var(--tone-8) 40.0%,transparent);
  padding:14px 7px;
  position:relative;
  font-size:.875rem;
  border-radius:4px
}
.repo-chats button:after {
  content:'';
  height:25px;
  width:1px;
  background:var(--tone-9);
  position:absolute;
  bottom:-26px;
  left:50%
}
.repo-chats button[aria-pressed=true] {
  border-color:var(--tone-12);
  background:var(--tone-7)
}
.repo-rail {
  background:var(--tone-4);
  border:1px solid color-mix(in srgb,var(--tone-9) 46.667%,transparent);
  display:flex;
  justify-content:space-between;
  padding:13px 18px;
  font-weight:600;
  font-size:.95rem
}
.repo-rail span {
  font-size:.875rem;
  font-weight:400;
  color:var(--tone-13)
}
.repo-flow p {
  font-size:.95rem;
  color:var(--tone-13);
  min-height:48px
}
.shape-diagram {
  min-height:300px
}
.flow-svg {
  display:block;
  width:100%;
  height:auto;
  max-height:390px
}
.flow-svg .node {
  fill:var(--tone-4);
  stroke:var(--tone-9);
  stroke-width:1
}
.flow-svg .gate {
  fill:var(--tone-8);
  stroke:var(--tone-12);
  stroke-width:1.5
}
.flow-svg text {
  fill:var(--tone-14);
  font-family:Sohne,sans-serif;
  font-size:0.9375rem
}
.flow-svg .small {
  font-size:0.75rem;
  fill:var(--tone-13)
}
.flow-svg .wire {
  fill:none;
  stroke:var(--tone-12);
  stroke-width:1.7
}
.flow-svg .retry {
  stroke-dasharray:5 5;
  stroke:var(--tone-12)
}
.flow-svg .label {
  fill:var(--tone-12);
  font-size:0.75rem
}
.role-list>div {
  display:grid;
  grid-template-columns:24px 1fr;
  gap:4px 18px;
  padding:22px 0;
  border-bottom:1px solid var(--line)
}
.role-list span {
  grid-row:span 2;
  color:var(--tone-11);
  font-size:.875rem;
  padding-top:4px
}
.role-list h3 {
  font-size:1.05rem
}
.role-list p {
  margin:2px 0 0;
  color:var(--tone-13);
  font-size:1rem
}
.small-intro {
  color:var(--tone-12);
  font-size:.9rem;
  margin-top:-8px;
  margin-bottom:23px
}
.afk-contract {
  border:1px solid color-mix(in srgb,var(--tone-11) 33.333%,transparent);
  background:var(--tone-4);
  border-radius:5px;
  padding:15px 18px;
  position:relative
}
.afk-contract p {
  margin:7px 0 0;
  font-size:.95rem
}
.duration {
  font-size:.875rem;
  letter-spacing:.04em;
  color:var(--tone-13);
  position:absolute;
  top:17px;
  right:17px
}
.afk-stages {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:27px 0
}
.afk-step {
  flex:1;
  color:var(--tone-11);
  font-size:.875rem;
  text-align:center;
  border-top:2px solid var(--tone-8);
  padding-top:12px
}
.afk-step.complete {
  border-color:var(--tone-11);
  color:var(--tone-13)
}
.afk-step.current {
  color:var(--tone-14);
  border-color:var(--tone-13)
}
.run-lanes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.run-lanes>div {
  background:var(--tone-4);
  border:1px solid color-mix(in srgb,var(--tone-8) 50.196%,transparent);
  border-radius:4px;
  padding:16px 12px
}
.run-lanes span {
  display:block;
  font-size:.875rem;
  letter-spacing:.04em;
  color:var(--tone-12)
}
.run-lanes strong {
  font-size:.9rem;
  font-weight:400;
  display:block;
  margin-top:10px
}
.run-lanes .paused {
  border-color:color-mix(in srgb,var(--tone-12) 46.667%,transparent);
  background:color-mix(in srgb,var(--tone-5) 43.922%,transparent)
}
.run-lanes .paused strong {
  color:var(--tone-13)
}
.state-rail {
  display:flex;
  justify-content:space-between;
  padding:15px 0;
  border-bottom:1px solid var(--tone-8);
  margin-top:10px;
  font-size:.875rem;
  color:var(--tone-13)
}
.state-rail span {
  font-size:.875rem;
  color:var(--tone-12)
}
.run-message {
  font-size:1rem;
  color:var(--tone-13);
  min-height:95px;
  margin-top:22px
}
.run-message strong {
  display:block;
  color:var(--tone-14);
  margin-bottom:5px
}
.run-controls {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center
}
.blue-button,.outline-button {
  border:1px solid var(--tone-9);
  border-radius:4px;
  padding:10px 15px;
  font-size:.875rem
}
.blue-button {
  background:var(--tone-8)
}
.outline-button {
  background:transparent;
  color:var(--tone-13)
}
.blue-button:hover {
  background:var(--tone-8)
}
.outline-button:hover {
  background:var(--tone-5)
}
.text-button {
  background:none;
  border:0;
  color:var(--tone-12);
  padding:10px;
  font-size:.875rem
}
.blue-button:disabled {
  background:var(--tone-5);
  color:var(--tone-12);
  cursor:default
}
.fences {
  margin:25px 0;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.fences p {
  font-size:1rem;
  color:var(--tone-13);
  margin-bottom:0
}
.rail-label {
  font-size:.875rem;
  letter-spacing:.04em;
  color:var(--tone-12)
}
.production-path {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin:18px 0 30px
}
.production-step {
  position:relative;
  border:1px solid color-mix(in srgb,var(--tone-8) 40.0%,transparent);
  background:var(--tone-4);
  border-radius:4px;
  padding:13px 6px;
  min-height:72px;
  font-size:.875rem;
  line-height:1.4
}
.production-step small {
  display:block;
  color:var(--tone-12);
  font-size:.875rem;
  margin-bottom:6px
}
.production-step[aria-pressed=true] {
  background:var(--tone-8);
  border-color:var(--tone-13);
  color:var(--tone-14)
}
.production-step.gated {
  border-color:var(--tone-12)
}
.production-item:not(:nth-child(5n)) .production-step:after {
  content:'';
  position:absolute;
  width:13px;
  height:1px;
  background:var(--tone-9);
  top:50%;
  right:-14px
}
.db-path {
  padding:18px;
  background:var(--tone-1);
  border:1px solid color-mix(in srgb,var(--tone-8) 53.333%,transparent);
  border-radius:5px
}
.db-nodes {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:15px
}
.db-nodes span {
  color:var(--tone-13);
  font-size:.875rem;
  border-top:1px solid var(--tone-11);
  padding-top:12px
}
.db-join {
  font-size:.875rem;
  color:var(--tone-12);
  margin-top:18px
}
.production-note {
  margin-top:25px;
  min-height:125px;
  border-left:2px solid var(--blue);
  padding-left:18px
}
.production-note h4 {
  margin:0 0 8px;
  font-size:1.05rem
}
.production-note p {
  color:var(--tone-13);
  margin:0;
  font-size:1rem
}
.production-note .gate-note {
  display:block;
  color:var(--tone-13);
  font-size:.875rem;
  margin-top:10px
}
.production-rules {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin:35px 0
}
.production-rules h3 {
  font-size:1.05rem
}
.production-rules p {
  font-size:1rem;
  color:var(--tone-13);
  margin-bottom:0
}
.incident-quota {
  padding:28px;
  border:1px solid color-mix(in srgb,var(--tone-9) 33.333%,transparent);
  border-radius:9px;
  background:linear-gradient(110deg,var(--tone-3),color-mix(in srgb,var(--tone-5) 33.333%,transparent));
  margin:35px 0
}
.quota-numbers {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:25px
}
.quota-numbers>div {
  display:flex;
  flex-direction:column
}
.quota-numbers>div+div {
  padding-left:25px;
  border-left:1px solid var(--line)
}
.quota-numbers span {
  font-size:.875rem;
  color:var(--tone-12);
  letter-spacing:.04em
}
.quota-numbers strong {
  font-family:var(--display);
  font-size:clamp(2rem,3.7vw,3.8rem);
  line-height:1.3;
  letter-spacing:-.04em
}
.quota-numbers>div+div strong {
  color:var(--tone-12)
}
.quota-numbers small {
  color:var(--tone-12);
  font-size:.875rem
}
.incident-quota p {
  font-size:1rem;
  color:var(--tone-13);
  margin-bottom:0;
  margin-top:25px
}
.review-strip {
  padding:20px 0;
  border-bottom:1px solid var(--line)
}
.review-strip>span {
  font-size:.875rem;
  letter-spacing:.04em;
  color:var(--tone-11)
}
.review-strip p {
  font-size:1.1rem;
  margin:8px 0;
  color:var(--tone-14)
}
.review-strip small {
  font-size:.9rem;
  color:var(--tone-12)
}
.incident-options {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.incident-options button {
  border:1px solid color-mix(in srgb,var(--tone-8) 46.667%,transparent);
  background:var(--tone-4);
  border-radius:4px;
  padding:9px 12px;
  font-size:.875rem;
  color:var(--tone-13)
}
.incident-options button[aria-pressed=true] {
  border-color:var(--tone-12);
  background:var(--tone-8);
  color:var(--tone-14)
}
.scar-flow>div {
  margin-top:25px;
  padding:22px;
  border:1px solid color-mix(in srgb,var(--tone-8) 46.667%,transparent);
  border-radius:5px
}
.scar-lesson {
  background:var(--tone-4)
}
.scar-lesson h3 {
  margin-top:12px;
  font-size:1.2rem
}
.scar-lesson p {
  color:var(--tone-13);
  font-size:1rem;
  margin-bottom:0
}
.destinations {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px
}
.destinations>div {
  font-size:1rem;
  padding-left:14px;
  border-left:2px solid var(--tone-8)
}
.destinations .enforce {
  border-left-color:var(--tone-12)
}
.destinations small {
  display:block;
  color:var(--tone-12);
  font-size:.875rem;
  margin-top:5px
}
.scar-control {
  background:var(--tone-4);
  border-color:var(--tone-12)!important
}
.scar-control p {
  font-size:1rem;
  color:var(--tone-14)
}
.blocked-label {
  font-size:.875rem;
  color:var(--tone-13);
  letter-spacing:.04em
}
.authority {
  padding:25px 0
}
.authority h3 {
  font-family:var(--display);
  font-size:1.65rem;
  line-height:1.35;
  margin-top:15px;
  letter-spacing:-.03em
}
.authority p {
  color:var(--tone-13);
  font-size:1rem
}
.house-rules>div {
  display:grid;
  grid-template-columns:35px 1fr;
  padding:23px 0;
  border-bottom:1px solid var(--line)
}
.house-rules span {
  font-size:.875rem;
  color:var(--tone-11);
  grid-row:span 2;
  padding-top:5px
}
.house-rules p {
  font-size:1.35rem;
  margin:0;
  line-height:1.4
}
.house-rules small {
  color:var(--tone-12);
  font-size:.95rem;
  margin-top:7px
}
.model-routing {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}
.model-lane {
  border-top:2px solid var(--tone-9);
  padding:16px 0
}
.model-lane span {
  font-size:.875rem;
  color:var(--tone-12);
  letter-spacing:.04em
}
.model-lane strong {
  font-weight:600;
  font-size:1rem;
  display:block;
  margin:10px 0
}
.model-lane p {
  font-size:.9rem;
  color:var(--tone-12);
  margin:0
}
.model-lane.strong {
  border-color:var(--tone-13)
}
.bottleneck {
  padding:45px 0 15px
}
.me {
  font-family:var(--display);
  font-size:clamp(4.5rem,12vw,6rem);
  line-height:1.2;
  letter-spacing:-.035em
}
.me span {
  color:var(--blue)
}
.human-gates {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px
}
.human-gates div {
  font-size:.875rem;
  border:1px solid color-mix(in srgb,var(--tone-11) 53.333%,transparent);
  padding:12px 15px;
  border-radius:4px
}
.bottleneck>p {
  font-size:1.3rem;
  color:var(--tone-13);
  margin-top:25px
}
.glossary {
  margin-top:60px;
  padding-top:40px;
  border-top:1px solid var(--line)
}
.glossary h3 {
  font-family:var(--display);
  font-size:1.55rem;
  margin-bottom:18px
}
.glossary-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 25px
}
.glossary summary {
  padding:12px 0;
  font-size:.95rem;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.glossary summary:after {
  content:'+';
  color:var(--tone-12)
}
.glossary details[open] summary:after {
  content:'−'
}
.glossary p {
  font-size:1rem;
  color:var(--tone-13)
}
.chapter-nav a:hover {
  color:var(--tone-14)
}
.chapter-nav a.active {
  position:relative
}
.chapter-nav a.active:before {
  content:'';
  position:absolute;
  left:-15px;
  top:18px;
  width:3px;
  height:15px;
  background:var(--blue)
}
@media(max-width:1000px) {
  .duration {
    position:static;
    display:block;
    margin-top:8px
  }
  .production-path {
    grid-template-columns:repeat(3,1fr)
  }
  .production-step:after {
    display:none
  }
  .state-rail {
    flex-direction:column;
    gap:6px
  }
  .model-routing {
    gap:10px
  }
  .db-nodes {
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:720px) {
  .notes-body {
    padding:0 0 12px 0
  }
  .slide-notes summary {
    font-size:.95rem;
    gap:10px
  }
  .notes-label {
    font-size:.875rem
  }
  .packet-grid>div {
    padding:16px
  }
  .packet-grid h4 {
    font-size:1rem
  }
  .packet-grid p {
    font-size:.9rem
  }
  .repo-chats {
    grid-template-columns:1fr 1fr;
    padding-bottom:0;
    gap:8px;
    margin-bottom:15px
  }
  .repo-chats button:after {
    display:none
  }
  .repo-rail {
    display:block
  }
  .repo-rail span {
    display:block;
    margin-top:5px
  }
  .afk-stages {
    gap:5px
  }
  .afk-step {
    font-size:.875rem
  }
  .run-lanes {
    gap:6px
  }
  .run-lanes>div {
    padding:12px 8px
  }
  .run-lanes strong {
    font-size:.875rem
  }
  .run-message {
    min-height:130px
  }
  .run-controls {
    gap:7px
  }
  .run-controls .outline-button {
    padding:10px 12px
  }
  .production-path {
    grid-template-columns:repeat(3,1fr);
    gap:8px
  }
  .production-step {
    font-size:.875rem
  }
  .production-rules {
    grid-template-columns:1fr;
    gap:22px
  }
  .incident-quota {
    padding:22px
  }
  .quota-numbers strong {
    font-size:2.4rem
  }
  .quota-numbers span {
    font-size:.875rem
  }
  .quota-numbers>div+div {
    padding-left:15px
  }
  .scar-flow>div {
    padding:17px
  }
  .destinations {
    grid-template-columns:1fr;
    gap:18px
  }
  .model-routing {
    grid-template-columns:1fr;
    gap:0
  }
  .model-lane {
    padding:15px 0
  }
  .model-lane p {
    font-size:.95rem
  }
  .human-gates {
    display:grid;
    grid-template-columns:1fr
  }
  .glossary-grid {
    grid-template-columns:1fr
  }
  .flow-svg text {
    font-size:1.0625rem
  }
  .flow-svg .small,.flow-svg .label {
    font-size:0.875rem
  }
  .shape-diagram {
    min-height:200px
  }
  .chapter-nav a.active:before {
    left:-8px
  }
}
.shape-diagram {
  overflow:auto
}
.outline-button:disabled {
  opacity:.45;
  cursor:default
}
.sources {
  scroll-margin-top:24px
}
@media(max-width:720px) {
  .shape-diagram:focus-visible {
    outline:2px solid var(--tone-13);
    outline-offset:5px
  }
  .tag {
    display:none
  }
}
.hero {
  gap:30px 5%;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)
}
h1,h2,h3 {
  overflow-wrap:break-word
}
.hero-copy,.hero-system,.chapter-content {
  min-width:0
}
.system-node {
  overflow-wrap:break-word
}
.segmented {
  width:fit-content;
  flex-wrap:wrap
}
@media(max-width:720px) {
  .hero {
    grid-template-columns:minmax(0,1fr)
  }
  header {
    height:auto;
    min-height:70px;
    gap:15px;
    flex-wrap:wrap;
    padding-top:15px;
    padding-bottom:15px
  }
  .brand {
    min-width:0
  }
  .source-links a {
    flex-wrap:wrap
  }
  .edition {
    display:none
  }
  .run-lanes {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
body {
  overflow-wrap:break-word
}
.system-map,.packet-grid,.production-rules,.quota-numbers,.destinations,.glossary-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.production-path {
  grid-template-columns:repeat(5,minmax(0,1fr))
}
.afk-step {
  min-width:0
}
.system-node,.production-step {
  min-width:0
}
.panel-head {
  flex-wrap:wrap
}
.human-boundary {
  flex-wrap:wrap
}
@media(max-width:1000px) {
  .production-path {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(max-width:720px) {
  .production-rules,.destinations,.glossary-grid {
    grid-template-columns:minmax(0,1fr)
  }
  .production-path {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .repo-chats {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .chapter-nav nav {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .source-links .pdf-label {
    margin-left:0
  }
}
/* Shared control, type, and navigation refinements. */
button, summary, .brand, header nav>a, footer>a  {
  min-height:44px
}
.brand, header nav>a, footer>a  {
  display:flex;
  align-items:center
}
button:focus-visible,a:focus-visible,summary:focus-visible,.shape-diagram:focus-visible  {
  outline:2px solid var(--focus);
  outline-offset:4px
}
button:active:not(:disabled),.primary:active  {
  transform:translateY(1px)
}
button[aria-pressed="true"] strong,button[aria-pressed="true"]>span:last-child  {
  text-decoration:underline;
  text-underline-offset:4px
}
.system-node,.repo-chats button,.production-step,.incident-options button,.outline-button  {
  border-color:var(--control-border)
}
.blue-button  {
  border-color:var(--tone-13);
  background:var(--action)
}
.blue-button:hover  {
  background:var(--tone-8)
}
.segmented  {
  border-color:var(--control-border)
}
.segmented button  {
  min-height:44px;
  color:var(--tone-13)
}
.segmented button[aria-pressed="true"]  {
  font-weight:600
}
.chapter-nav a  {
  min-height:44px
}
.chapter-nav a.active  {
  font-weight:600
}
.chapter-nav a.active span  {
  color:var(--blue)
}
.interaction-hint  {
  font-size:.875rem;
  color:var(--tone-13);
  margin:18px 0 0
}
.diagram-top  {
  gap:16px;
  flex-wrap:wrap;
  font-size:.75rem;
  letter-spacing:.04em
}
.system-map  {
  padding:16px 0 24px
}
.system-node  {
  display:flex;
  align-items:baseline;
  gap:8px;
  min-height:60px
}
.system-node span  {
  margin-right:0
}
.system-node strong  {
  font-size:.875rem
}
.chapter-context-link  {
  display:flex;
  align-items:center;
  min-height:44px;
  margin-top:12px;
  color:var(--tone-13);
  font-size:.875rem;
  text-decoration:underline;
  text-underline-offset:4px
}
.chapter-meta,.hero-bottom,.edition,.notes-label,.mini-label,.packet-grid span,.slide-number,.pdf-label  {
  font-size:.75rem;
  letter-spacing:.04em
}
.chapter-meta  {
  margin-bottom:24px;
  gap:16px;
  flex-wrap:wrap
}
.section-context  {
  font-size:.875rem;
  color:var(--muted);
  margin:8px 0 0
}
.boundary-icon  {
  flex-shrink:0
}
.mobile-chapter-menu,.mobile-flow,.mobile-db-join  {
  display:none
}
.production-path  {
  padding:0;
  list-style:none
}
.production-item  {
  min-width:0
}
.production-step  {
  width:100%;
  font-size:.875rem;
  min-height:92px;
  padding:12px 8px
}
.production-step small  {
  font-size:.75rem;
  color:var(--tone-13)
}
.production-note h4  {
  font-size:1rem
}
.afk-step  {
  font-size:.875rem;
  color:var(--tone-13);
  text-align:left;
  display:flex;
  gap:8px
}
.afk-step>span  {
  font-size:.75rem;
  flex-shrink:0;
  padding-top:2px
}
.afk-step.current  {
  font-weight:600;
  border-top-width:4px;
  padding-top:10px
}
.afk-step.complete  {
  color:var(--tone-13)
}
.run-lanes span,.state-rail,.rail-label  {
  font-size:.875rem;
  letter-spacing:.02em
}
.duration,.quota-numbers span,.review-strip>span,.blocked-label  {
  font-size:.75rem
}
.quota-numbers>div+div strong  {
  color:var(--blue)
}
.flow-svg .small,.flow-svg .label  {
  fill:var(--tone-13)
}
@media(max-width:1000px)  {
  .production-item .production-step:after  {
    display:none
  }
}
@media(max-width:720px)  {
  header  {
    position:sticky;
    padding:12px 6%;
    gap:8px;
    align-items:center
  }
  header>nav  {
    gap:12px;
    margin-left:auto;
    align-items:center;
    font-size:.875rem
  }
  header>nav>a[href="#chapters"]  {
    display:none
  }
  header>nav>a[href="#sources"]  {
    font-size:.875rem
  }
  .mobile-chapter-menu  {
    display:block;
    position:relative
  }
  .mobile-chapter-menu summary  {
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border:1px solid var(--control-border);
    border-radius:4px;
    font-size:.875rem;
    background:var(--tone-2)
  }
  .mobile-chapter-menu summary:after  {
    content:'';
    width:6px;
    height:6px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
    margin-top:-4px
  }
  .mobile-chapter-menu[open] summary:after  {
    transform:rotate(225deg);
    margin-top:4px
  }
  #mobile-chapter-links  {
    position:fixed;
    left:6vw;
    right:6vw;
    top:calc(var(--header-height) + 8px);
    width:auto;
    max-height:calc(100svh - var(--header-height) - 24px);
    overflow:auto;
    display:block;
    padding:8px 16px;
    border:1px solid var(--control-border);
    border-radius:6px;
    background:var(--tone-2)
  }
  #mobile-chapter-links a  {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
    border-bottom:1px solid var(--line);
    color:var(--tone-14);
    font-size:.875rem
  }
  #mobile-chapter-links a:last-child  {
    border-bottom:0
  }
  #mobile-chapter-links a span  {
    font-size:.75rem;
    color:var(--tone-13)
  }
  #mobile-chapter-links a.active  {
    font-weight:600;
    color:var(--tone-14);
    text-decoration:underline;
    text-underline-offset:4px
  }
  .hero-system  {
    padding:20px
  }
  .hero-bottom  {
    font-size:.75rem;
    gap:16px
  }
  .hero-bottom span:last-child  {
    max-width:110px
  }
  .system-map  {
    gap:12px 18px
  }
  .system-node  {
    padding:12px 8px;
    gap:6px
  }
  .system-node:nth-child(2n+1):after  {
    right:-19px;
    width:18px
  }
  .system-node span  {
    font-size:.75rem
  }
  .system-node strong  {
    font-size:.875rem
  }
  .map-note  {
    min-height:184px;
    padding:16px
  }
  .interactive-panel  {
    padding:20px
  }
  .production-path  {
    grid-template-columns:minmax(0,1fr);
    gap:0;
    margin-bottom:24px
  }
  .production-item  {
    position:relative;
    padding-bottom:24px
  }
  .production-item:not(:last-child):after  {
    content:'';
    display:block;
    position:absolute;
    width:2px;
    height:24px;
    background:var(--tone-13);
    bottom:0;
    left:26px
  }
  .production-item .production-step:after  {
    display:none
  }
  .production-step  {
    display:flex;
    align-items:center;
    gap:16px;
    text-align:left;
    min-height:56px;
    padding:14px 16px;
    font-size:.875rem
  }
  .production-step small  {
    margin:0;
    min-width:20px;
    font-size:.75rem
  }
  .production-note  {
    margin:12px 0 0;
    padding:12px 0 12px 16px;
    min-height:0
  }
  .production-note p  {
    font-size:1rem
  }
  .mobile-db-join  {
    display:block;
    padding:16px;
    border-left:2px solid var(--tone-13);
    margin:0 0 12px;
    background:var(--tone-3)
  }
  .mobile-db-join strong,.mobile-db-join span  {
    display:block;
    font-size:.875rem
  }
  .mobile-db-join span  {
    color:var(--tone-13);
    margin-top:8px;
    line-height:1.7
  }
  .db-path  {
    display:none
  }
  .afk-stages  {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 12px
  }
  .afk-step:last-child  {
    grid-column:1/-1
  }
  .afk-step  {
    font-size:.875rem
  }
  .run-lanes  {
    grid-template-columns:minmax(0,1fr);
    gap:8px
  }
  .run-lanes>div  {
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center
  }
  .run-lanes span  {
    font-size:.875rem;
    letter-spacing:.02em
  }
  .run-lanes strong  {
    font-size:.875rem;
    margin-top:0;
    text-align:right
  }
  .state-rail,.state-rail span  {
    font-size:.875rem
  }
  .run-message  {
    min-height:0;
    margin-bottom:24px
  }
  .quota-numbers span  {
    font-size:.75rem
  }
  .packet-grid  {
    grid-template-columns:minmax(0,1fr)
  }
  .chapter-meta,.notes-label  {
    font-size:.75rem
  }
}

@media(max-width:1000px) {
  .flow-svg  {
    display:none;
    min-width:0
  }
  .shape-diagram  {
    overflow:visible;
    max-height:none;
    min-height:0;
    padding:0;
    border:0
  }
  .shape-diagram:after  {
    display:none
  }
  .mobile-flow  {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    margin:16px 0 0;
    font-size:.875rem
  }
  .mobile-flow-node  {
    padding:14px 12px;
    min-height:48px;
    text-align:center;
    border:1px solid var(--control-border);
    border-radius:5px;
    background:var(--tone-4);
    font-weight:600
  }
  .mobile-flow-line  {
    height:24px;
    width:2px;
    align-self:center;
    background:var(--tone-13);
    position:relative
  }
  .mobile-flow-line:after  {
    content:'';
    position:absolute;
    bottom:0;
    left:-3px;
    width:6px;
    height:6px;
    border-right:2px solid var(--tone-13);
    border-bottom:2px solid var(--tone-13);
    transform:rotate(45deg)
  }
  .mobile-loop  {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    position:relative
  }
  .mobile-loop .plan  {
    grid-area:1/1
  }
  .mobile-loop .build  {
    grid-area:1/2
  }
  .mobile-loop .verify  {
    grid-area:2/2
  }
  .mobile-loop .fix  {
    grid-area:2/1
  }
  .mobile-loop .plan:after,.mobile-loop .fix:after  {
    content:'';
    position:absolute;
    left:50%;
    width:24px;
    height:2px;
    margin-left:-12px;
    background:var(--tone-13)
  }
  .mobile-loop .plan:after  {
    top:24px
  }
  .mobile-loop .fix:after  {
    bottom:24px
  }
  .mobile-flow-caption  {
    color:var(--tone-13);
    font-size:.875rem;
    margin:16px 0;
    line-height:1.6
  }
  .human-node  {
    background:var(--tone-8);
    border:2px solid var(--tone-13)
  }
  .mobile-shared  {
    padding:14px 0 0;
    border-top:1px solid var(--tone-11);
    margin-top:18px;
    color:var(--tone-13)
  }
  .parallel-label  {
    font-size:.875rem;
    color:var(--tone-13);
    margin:0 0 12px;
    text-align:center
  }
  .mobile-workers  {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    border-left:2px solid var(--tone-13);
    padding-left:16px
  }
}

/* Let text inside flex controls reflow when readers enlarge it. */
.system-node strong {min-width:0;overflow-wrap:anywhere}
.chapter-nav a .chapter-link-label,#mobile-chapter-links a .chapter-link-label {min-width:0;flex:1;font-size:inherit;color:inherit;overflow-wrap:anywhere}
.chapter-index {flex-shrink:0}

/* Lucide: one stroke language for roles, evidence, and protected actions. */
.icon {width:20px;height:20px;flex-shrink:0;color:var(--tone-13);vertical-align:middle;pointer-events:none}
.icon use {pointer-events:none}
.system-node {display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:center;min-height:88px;text-align:left}
.system-node .icon {grid-area:1/1}
.system-node .system-index {grid-area:1/2;text-align:right;margin:0;font-variant-numeric:tabular-nums}
.system-node strong {grid-column:1/-1}
.system-node.active .icon {color:var(--tone-14)}
.segmented button,.incident-options button,.run-controls button {display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background-color 150ms,color 150ms,border-color 150ms,transform 120ms cubic-bezier(0.16,1,0.3,1)}
button:active:not(:disabled),.primary:active {transform:scale(.98)}
button[aria-pressed="true"] .icon {color:var(--tone-14)}
.segmented button>span,.incident-options button>span {text-decoration:none}
.slice-node {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:100px}
.slice-node .icon {width:22px;height:22px}
.horizontal .slice-node .icon {color:var(--tone-13)}
.flow-svg .icon {width:18px;height:18px;color:var(--tone-14)}
.flow-svg text {font-size:0.875rem}
.mobile-flow-node {display:flex;align-items:center;justify-content:center;gap:12px}
.mobile-flow-node>span {min-width:0;overflow-wrap:anywhere}
.mobile-flow-line {transform-origin:top center}
.packet-grid h4 {display:flex;gap:12px;align-items:flex-start}
.packet-grid h4 .icon {margin-top:2px}
.packet-grid h4>span {font:inherit;letter-spacing:inherit;color:inherit;min-width:0}
.repo-rail .repo-name {display:flex;align-items:center;gap:10px;color:inherit;font:inherit}
.afk-step {align-items:flex-start;gap:10px}
.afk-step .afk-stage-icon {width:20px;height:20px;margin-top:2px}
.afk-step>.afk-stage-label {font-size:.875rem;padding-top:0;flex-shrink:1;min-width:0}
.afk-number {font-size:.75rem;font-variant-numeric:tabular-nums}
.afk-step.current .icon {color:var(--tone-14)}
.afk-step.complete .icon {color:var(--tone-13)}
.lane-label {display:flex!important;gap:8px;align-items:center}
.run-lanes .icon {width:18px;height:18px}
.run-lanes .paused .icon {color:var(--tone-13)}
.production-step {display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:start;gap:8px;min-height:112px;text-align:left;padding:14px 12px}
.production-step small {margin:0;font-variant-numeric:tabular-nums}
.production-step>span {grid-column:1/-1;min-width:0}
.db-nodes>span {display:flex;align-items:flex-start;gap:8px}
.db-nodes>span>span {font:inherit;color:inherit;border:0;padding:0}
.mobile-db-join strong {display:flex;gap:10px;align-items:center}
.mobile-db-join strong>span {margin:0;color:inherit;font:inherit}
.quota-numbers strong {font-variant-numeric:tabular-nums}
.quota-chart {margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.quota-chart-row {display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:16px;margin-bottom:18px;font-size:.875rem;color:var(--tone-14)}
.quota-track {height:12px;position:relative;border:1px solid var(--tone-11);border-radius:2px;background:var(--tone-2);overflow:hidden}
.quota-range {position:absolute;top:0;bottom:0;background:var(--tone-14)}
.quota-observed {display:block;height:100%;width:100%;background:var(--tone-13)}
.quota-chart figcaption {font-size:.75rem;color:var(--tone-13);line-height:1.6}
.scar-flow>div {position:relative}
.scar-symbol {float:right;width:24px;height:24px;margin-left:16px}
.scar-flow>div+div:before {content:'';position:absolute;height:26px;width:1px;top:-27px;left:50%;background:var(--tone-13)}
.destinations>div {display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px 10px}
.destinations small {grid-column:2;font-size:.875rem}
.destinations .icon {margin-top:3px}
.house-rules .rule-icon {grid-row:span 2;margin-top:5px}
.model-lane>.icon {display:block;margin-bottom:14px;width:24px;height:24px}
.human-gates div {display:flex;align-items:center;gap:10px}
.pdf-label {display:flex;align-items:center;gap:8px}
.expand-icon {width:18px;height:18px;margin-left:auto;transition:transform 180ms cubic-bezier(0.16,1,0.3,1)}
.slide-notes details[open] .expand-icon {transform:rotate(45deg)}
.glossary summary:after {content:none}
.glossary summary>.icon {width:18px;height:18px;transition:transform 180ms cubic-bezier(0.16,1,0.3,1)}
.glossary details[open] summary>.icon {transform:rotate(180deg)}
::selection {color:var(--tone-14);background:var(--tone-8)}
@media(max-width:1000px) {
 .system-node {min-height:88px}
 .slice-node {gap:8px}
 .db-nodes {gap:16px}
}
@media(max-width:720px) {
 .system-node {padding:12px;gap:8px}
 .system-node .system-index {font-size:.75rem}
 .slice-node {flex-direction:row;min-height:56px;gap:12px}
 .repo-rail .repo-name {margin-top:0}
 .production-step {grid-template-columns:24px 20px minmax(0,1fr);gap:12px;align-items:center;min-height:64px;padding:14px 16px}
 .production-step>span {grid-column:auto}
 .quota-chart-row {grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:20px}
 .quota-track {height:14px}
 .run-lanes>div {gap:16px}
 .run-lanes strong {min-width:0}
 .segmented button {padding:8px 10px}
}
@media(prefers-reduced-motion:reduce) {
 button:active:not(:disabled),.primary:hover,.primary:active {transform:none}
 .expand-icon,.glossary summary>.icon {transition:none}
}

/* A continuous lesson journey: one visible section per source idea. */
.idea {margin:56px 0 0;padding:40px 0 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.idea>h3 {font-family:var(--display);font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.3;letter-spacing:-.025em;text-wrap:balance;margin:0 0 14px}
.idea-source {font-size:.75rem;color:var(--tone-13);margin:0 0 24px}
.idea-explanation {font-size:1.05rem;line-height:1.65;color:var(--tone-14);margin:0 0 24px;max-width:68ch}
.idea-source-copy {font-size:1rem;line-height:1.65;color:var(--tone-13);max-width:68ch;margin:0 0 24px}
.idea h4 {font-size:1.1rem;line-height:1.4;margin:0 0 12px}
.idea .packet-title h4 {font-size:1.2rem}
.idea .interactive-panel {margin:28px 0}
.idea .production-rules {margin:0}
.idea .role-list h4 {margin-bottom:4px}
.idea .bottleneck {padding-top:24px}
.idea-next {display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:44px;padding:20px 0 0;margin-top:24px;color:var(--tone-13);font-size:.875rem;text-decoration:underline;text-underline-offset:4px;line-height:1.5}
.idea-next .next-cue {font-size:.75rem;color:var(--tone-13);text-decoration:none}
.journey-checkpoint {margin:48px 0 0;padding:24px;background:var(--tone-2);border-radius:6px}
.journey-checkpoint h4 {font-size:.875rem;color:var(--tone-14);margin:0 0 12px}
.journey-checkpoint p {font-size:1.1rem;line-height:1.5;margin:0}
.idea-position {border-top:1px solid var(--line);margin-top:24px;padding-top:20px;max-width:220px}
.idea-position>span {display:block;font-size:.75rem;color:var(--tone-13);margin-bottom:10px}
.idea-position strong {font-size:.875rem;font-weight:400;color:var(--tone-14);line-height:1.5;display:block}
.concept-flow {display:flex;align-items:stretch;margin:28px 0 16px}
.concept-step {display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:14px;padding:18px;background:var(--tone-4);border:1px solid var(--tone-11);border-radius:5px;font-size:.875rem;line-height:1.5}
.concept-step .icon {width:24px;height:24px}
.concept-connector {width:24px;height:1px;background:var(--tone-13);align-self:center;flex-shrink:0}
.concept-caption {font-size:.875rem;color:var(--tone-13);line-height:1.6;margin:0}
.autonomy-comparison,.workflow-choice {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:28px 0}
.autonomy-comparison>div,.workflow-choice>div {padding:24px 0;border-top:1px solid var(--tone-11)}
.autonomy-comparison .icon,.workflow-choice .icon {width:28px;height:28px;margin-bottom:18px}
.autonomy-comparison p,.workflow-choice p {color:var(--tone-13);margin-bottom:0;font-size:1rem}
.shape-decisions {margin:28px 0}
.shape-decisions>div {display:grid;grid-template-columns:24px minmax(0,1fr) 90px;gap:16px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.shape-decisions p {margin:0;font-size:1rem;color:var(--tone-14)}
.shape-decisions strong {font-size:.875rem;color:var(--tone-13)}
@media(max-width:1000px) {
 .concept-flow {flex-direction:column}
 .concept-step {flex-direction:row;align-items:center;gap:16px}
 .concept-connector {height:24px;width:1px;align-self:center}
 .autonomy-comparison,.workflow-choice {gap:24px}
}
@media(max-width:720px) {
 .idea {margin-top:40px;padding-top:32px}
 .idea>h3 {font-size:1.5rem}
 .idea-position {display:none}
 .autonomy-comparison,.workflow-choice {grid-template-columns:minmax(0,1fr);gap:12px}
 .shape-decisions>div {grid-template-columns:24px minmax(0,1fr);gap:8px 16px}
 .shape-decisions strong {grid-column:2}
 .journey-checkpoint {padding:20px}
}
.idea-term-help,.journey-framing {font-size:.875rem;line-height:1.65;color:var(--tone-13);max-width:68ch;margin:0 0 24px}

/* Context belongs at the decision, handoff, or evidence boundary it explains. */
.context-transfer,.secret-context,.environment-context,.intent-context,.population-context {margin:32px 0;padding:28px 0;border-top:1px solid var(--line)}
.context-note {font-size:.875rem;line-height:1.65;color:var(--tone-13);margin:18px 0 0;max-width:70ch}
.context-note a {color:var(--tone-13);text-underline-offset:3px}
.transfer-path {display:flex;align-items:center;margin:28px 0}
.transfer-path>div {display:flex;flex:1;min-width:0;gap:12px;align-items:center;font-size:1rem;line-height:1.5}
.transfer-kept {color:var(--tone-14);font-weight:600}
.transfer-connection {height:1px;background:var(--tone-13);flex:0 0 28px;margin:0 18px}
.context-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin:0}
.context-fields dt,.shared-fields dt {font-size:.875rem;font-weight:600;color:var(--tone-14);margin-bottom:6px}
.context-fields dd {font-size:1rem;line-height:1.55;color:var(--tone-13);margin:0;max-width:34ch}
.shared-context {margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.shared-context h5,.secret-context h5,.environment-context h5,.authority h5,.stage-evidence h5 {font-size:1rem;line-height:1.5;margin:0 0 16px;color:var(--tone-14)}
.shared-fields {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0}
.shared-fields dd {margin:0;font-size:.875rem;line-height:1.6;color:var(--tone-13)}
.permission-split {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:28px 0 0}
.permission-split>div {border-top:1px solid var(--tone-11);padding-top:20px}
.permission-split .icon {width:24px;height:24px;margin-bottom:16px}
.permission-split h4 {font-size:1rem}
.permission-split p {font-size:1rem;color:var(--tone-13);line-height:1.65;margin:0}
.permission-owner .icon {color:var(--tone-14)}
.stage-evidence {margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.stage-evidence dl {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0}
.stage-evidence dt {font-size:.875rem;font-weight:600;color:var(--tone-14);margin:0 0 8px}
.stage-evidence dd {font-size:1rem;line-height:1.6;color:var(--tone-13);margin:0}
.secret-zones {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:32px;margin:28px 0 0}
.secret-repo {padding-right:24px;border-right:1px solid var(--tone-11)}
.secret-repo>.icon {width:24px;height:24px;margin:0 0 16px}
.secret-repo p {font-size:1rem;line-height:1.6;color:var(--tone-13);margin:0 0 16px}
.boundary-label {font-size:.875rem;font-weight:600;color:var(--tone-14)}
.runtime-path {list-style:none;margin:0;padding:0}
.runtime-path li {display:flex;align-items:center;gap:12px;font-size:1rem;line-height:1.5;position:relative;margin-top:26px}
.runtime-path li:first-child {margin-top:0}
.runtime-path li+li:before {content:'';position:absolute;height:18px;width:1px;background:var(--tone-13);left:10px;top:-22px}
.environment-fork {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:28px 0 0}
.environment-branch {border-top:1px solid var(--tone-11);padding-top:20px;min-width:0}
.environment-branch>.icon {width:24px;height:24px;margin:0 0 16px}
.environment-branch dl {margin:0}
.environment-branch dl>div {margin-top:18px}
.environment-branch dt {font-size:.875rem;color:var(--tone-13);margin-bottom:6px}
.environment-branch dd {font-size:1rem;line-height:1.6;margin:0;color:var(--tone-14)}
.population-rows {margin:24px 0 0}
.population-rows>div {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;border-top:1px solid var(--line);padding:20px 0}
.population-rows dt {font-size:1rem;line-height:1.6;color:var(--tone-13)}
.population-rows dd {margin:0}
.population-rows strong {display:block;font-size:1.1rem;color:var(--tone-14);font-variant-numeric:tabular-nums;line-height:1.5}
.population-rows dd>span {display:block;font-size:.875rem;color:var(--tone-13);line-height:1.6;margin-top:6px}
.intent-path {list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:28px 0;padding:0;counter-reset:intent}
.intent-path li {counter-increment:intent;position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:10px;font-size:.875rem;line-height:1.5;padding:14px 0;border-top:1px solid var(--tone-11);min-width:0}
.intent-path li:after {content:counter(intent);position:absolute;right:0;top:-12px;padding-left:8px;background:var(--bg);font-size:.75rem;color:var(--tone-13)}
.intent-path .icon {width:20px;height:20px}
.authority-current {display:flex;gap:16px;padding:24px;background:var(--tone-5);border:1px solid var(--tone-13);border-radius:6px;margin:28px 0 0}
.authority-current>.icon {width:24px;height:24px;margin-top:3px}
.authority-current strong {font-size:1.1rem;color:var(--tone-14);line-height:1.5}
.authority-current p {font-size:1rem;line-height:1.6;margin:8px 0 0;color:var(--tone-14)}
.authority-connection {width:1px;height:28px;background:var(--tone-13);margin:0 auto}
.authority-support {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;border-top:1px solid var(--tone-11);padding:24px 0 0}
.authority-support .icon {width:24px;height:24px;margin-bottom:16px}
.authority-support p {font-size:1rem;line-height:1.6;margin:0;color:var(--tone-13)}
.authority .context-note {font-size:.875rem;margin:24px 0 0;max-width:70ch}
@media(max-width:1000px) {
 .transfer-path {flex-direction:column;align-items:stretch}
 .transfer-connection {height:24px;width:1px;flex:none;margin:6px 0 6px 10px}
 .shared-fields {grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
 .intent-path {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px) {
 .context-fields,.permission-split,.secret-zones,.environment-fork,.authority-support,.stage-evidence dl {grid-template-columns:minmax(0,1fr);gap:24px}
 .context-transfer,.secret-context,.environment-context,.intent-context,.population-context {margin:28px 0;padding-top:24px}
 .shared-fields {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .secret-repo {padding:0 0 24px;border-right:0;border-bottom:1px solid var(--tone-11)}
 .population-rows>div {grid-template-columns:minmax(0,1fr);gap:8px}
 .authority-current {padding:20px;gap:12px}
 .authority-support {gap:24px}
}

/* Restrained semantic color: navy remains the field; the existing amber marks protection. */
:root {--context-work:var(--tone-13);--context-evidence:var(--tone-14);--context-protected:var(--tone-13);--context-protected-surface:var(--tone-4)}
@supports(color:oklch(83% .08 76)) {
 :root {--context-work:oklch(77% .105 266);--context-evidence:oklch(91% .04 255);--context-protected:oklch(84% .08 76);--context-protected-surface:oklch(26% .027 76)}
}
.workflow-color-key {display:flex;flex-wrap:wrap;gap:12px 24px;margin:20px 0 0;font-size:.875rem;line-height:1.5}
.workflow-color-key span {border-bottom:1px solid currentColor;padding-bottom:4px}
.key-work,.transfer-path>div>.icon,.shared-fields dt {color:var(--context-work)}
.key-evidence,.transfer-kept>.icon,.authority-current>.icon,.stage-evidence dl>div:first-child dt {color:var(--context-evidence)}
.key-protected,.permission-owner .icon,.permission-owner h4,.human-boundary .icon,.human-gates .icon,.gate-note {color:var(--context-protected)}
.permission-owner {border-top-color:var(--context-protected)!important}
.flow-svg .gate[data-label="Human merge gate"] {fill:var(--context-protected-surface);stroke:var(--context-protected);stroke-width:1.5}
#shape-diagram .graph-mobile .human-node {background:var(--context-protected-surface);border:1px solid var(--context-protected)}
#shape-diagram .graph-mobile .human-node .icon {color:var(--context-protected)}
.production-step.gated {border-color:var(--context-protected)}
.production-step.gated .icon {color:var(--context-protected)}
.production-step.gated[aria-pressed="true"] {background:var(--context-protected-surface);border-color:var(--context-protected)}
.production-note .gate-note {color:var(--context-protected)}
.afk-step.current:last-child {background:var(--context-protected-surface);border-color:var(--context-protected);color:var(--tone-14)}
.afk-step.current:last-child .icon {color:var(--context-protected)}
.secret-repo {border-color:var(--context-work)}
.secret-runtime .icon,.boundary-label {color:var(--context-protected)}
.authority-current {background:var(--tone-5);border-color:var(--context-evidence)}
.authority-support .icon {color:var(--context-work)}

.context-note a {text-decoration:underline}
.flow-svg .node[data-label="Evidence pack"],.flow-svg .node[data-label="Automated checks"] {stroke:var(--context-evidence);fill:var(--tone-4)}
/* A visual first reading path, with deeper source notes available on demand. */
.idea-explanation {font-size:1.125rem;max-width:48ch;line-height:1.6;margin-bottom:32px}
.source-detail {border-top:1px solid var(--line);margin-top:24px;padding:12px 0}
.source-detail summary {cursor:pointer;color:var(--muted);font-size:.875rem;min-height:32px;align-content:center}
.source-detail .idea-source-copy {font-size:1rem;line-height:1.65;margin:16px 0;max-width:65ch}
.inline-skills {display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:28px;font-size:.875rem;color:var(--muted)}
.inline-skills>span {flex-basis:100%;font-size:.875rem}
.inline-skills a {display:inline-flex;align-items:center;gap:7px;padding:6px 0;color:var(--context-work);text-decoration:underline;text-underline-offset:4px}
.inline-skills .icon {width:15px;height:15px}
.test-sandbox {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}
.sandbox-lane {display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--context-work);padding:16px 24px;background:var(--surface)}
.sandbox-lane h4 {display:flex;align-items:center;gap:12px;margin:0 0 8px}
.sandbox-lane>span {color:var(--muted)}
.sandbox-lane>strong {padding-top:12px;border-top:1px solid var(--line);color:var(--context-evidence)}
.sandbox-lane.protected {border-color:var(--context-protected);background:var(--context-protected-surface)}
.sandbox-lane.protected>strong,.sandbox-lane.protected .icon {color:var(--context-protected)}
.destination-check {margin:32px 0}
.destination-stop {display:flex;align-items:center;gap:12px;color:var(--context-protected);padding:16px 20px;background:var(--context-protected-surface);border-top:1px solid var(--context-protected)}
.destination-check .concept-step {min-width:0}
.environment-branch .concept-flow {flex-direction:column;margin:16px 0}
.environment-branch .concept-step {border:0;background:transparent;padding:10px 16px;flex-direction:row;justify-content:flex-start;text-align:left;min-width:0}
.environment-branch .concept-step .icon {width:20px;height:20px}
.environment-branch .concept-connector {width:1px;height:14px;min-height:14px;flex:none;margin-left:10px}
.role-list h4 {color:var(--ink)}
.workflow-node {transform-box:fill-box;transform-origin:center}
.system-map {position:relative;gap:20px 18px}
.system-node {position:relative;z-index:1;background:var(--surface)}
.overview-flow {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.overview-trace {stroke:var(--context-work);stroke-width:2.5;stroke-linejoin:round}
#production-note {view-transition-name:production-evidence}
::view-transition-group(production-evidence) {animation-duration:480ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root),::view-transition-new(root) {animation:none;mix-blend-mode:normal}
::view-transition {pointer-events:none}
.stage-evidence dl {grid-template-columns:1fr 1fr}
.stage-evidence dt {display:flex;align-items:center;gap:8px;color:var(--context-evidence)}
.stage-evidence dt .icon {width:18px;height:18px}
.stage-evidence dd {font-size:1rem}
.skill-starter {margin:36px 0 56px}
.skill-starter h3,.skills-collection-head h3 {font-family:Sohne,sans-serif;font-size:1.25rem;line-height:1.4;margin:0 0 24px}
.skill-starter-path {display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.skill-starter-path a {display:flex;position:relative;flex-direction:column;gap:12px;align-items:flex-start;padding:16px 0;border-top:2px solid var(--context-work)}
.skill-starter-path .icon {width:26px;height:26px;color:var(--context-work)}
.skill-starter-path span {font-weight:600;font-size:1rem}
.skill-starter-path small {font-size:.875rem;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.skill-starter-path a:hover span {color:var(--context-work)}
.skills-collection-head {display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.skills-collection-head h3 {margin-bottom:12px}
.skills-collections {margin-top:32px;border-bottom:1px solid var(--line);padding-bottom:16px}
.skill-collection {border-top:1px solid var(--line)}
.skill-collection summary {display:flex;align-items:center;gap:20px;cursor:pointer;list-style:none;padding:22px 0;min-height:76px}
.skill-collection summary::-webkit-details-marker {display:none}
.skill-collection summary>span {color:var(--context-work);font-size:.875rem}
.skill-collection summary h4 {font-size:1.125rem;font-weight:600;margin:0;flex:1}
.skill-collection summary small {color:var(--muted);font-size:.875rem}
.skill-collection summary .icon {width:18px;height:18px;transition:transform 180ms cubic-bezier(.16,1,.3,1)}
.skill-collection[open] summary .icon {transform:rotate(180deg)}
.skill-entries {display:grid;grid-template-columns:1fr 1fr;gap:0 32px;padding:0 0 24px}
.skill-entry {padding:22px 16px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-height) + 24px);transition:background-color 240ms}
.skill-entry h5 {font-family:Sohne,sans-serif;font-size:1rem;font-weight:600;margin:0 0 8px;line-height:1.5;overflow-wrap:anywhere;color:var(--context-evidence)}
.skill-entry p {font-size:1rem;color:var(--muted);margin:0 0 12px;max-width:40ch}
.skill-meta {font-size:.875rem;color:var(--muted)}
.skill-meta a {color:var(--context-work);text-decoration:underline;text-underline-offset:4px}
.skill-highlight {background:color-mix(in srgb,var(--tone-13) 9.412%,transparent)}
.skills-chapter>.context-note {max-width:65ch}
header nav {gap:24px}
@media(max-width:1000px) {
 .skill-starter-path {grid-template-columns:repeat(3,1fr)}
 .skill-entry {padding-left:0;padding-right:8px}
}
@media(max-width:720px) {
 .test-sandbox,.stage-evidence dl,.skill-entries {grid-template-columns:1fr}
 .skill-starter-path {grid-template-columns:1fr 1fr}
 .skill-starter-path a:last-child {grid-column:1/-1}
 .skills-collection-head {flex-direction:column;gap:0}
 .skill-collection summary {gap:12px}
 .skill-collection summary small {white-space:nowrap}
 .inline-skills a {overflow-wrap:anywhere;max-width:100%}
 .secret-repo {padding-right:16px}
 .test-sandbox {gap:16px}
 .system-map {gap:20px 12px}
 .source-detail {margin-top:20px}
 .idea-explanation {font-size:1rem}
}
@media(prefers-reduced-motion:reduce) {
 ::view-transition-group(production-evidence) {animation-duration:0s}
 .skill-entry,.skill-collection summary .icon {transition:none}
}
/* First-principles opening: one broad route, a selected step, and an immediate path into the story. */
.journey-opening.hero {display:block;min-height:0;padding:52px 5% 32px;background:var(--bg);overflow:hidden}
.opening-heading {max-width:1400px;margin:0 auto}
.opening-kicker {display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:.875rem;letter-spacing:.08em}
.journey-opening h1 {font-family:Sohne,Arial,sans-serif;font-weight:600;font-size:clamp(3.5rem,8.5vw,8.5rem);line-height:1.08;letter-spacing:-.055em;margin:20px 0 16px;text-wrap:balance}
.journey-opening .hero-intro {font-size:1.25rem;line-height:1.55;max-width:56ch;margin:0 0 40px;color:var(--muted)}
.opening-route {max-width:1400px;margin:0 auto;border-top:1px solid var(--line)}
.opening-route-label {display:flex;justify-content:space-between;gap:16px;padding-top:18px;font-size:.875rem;color:var(--muted)}
.journey-opening .system-map {grid-template-columns:repeat(8,minmax(0,1fr));gap:16px;padding:24px 0 20px;border-bottom:1px solid var(--line)}
.journey-opening .system-node {display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;min-height:124px;padding:12px 8px;border:0;border-radius:0;background:var(--bg);font-weight:400;outline:none;color:var(--muted)}
.journey-opening .system-node:after {content:none}
.journey-opening .system-node:hover,.journey-opening .system-node.active {background:var(--bg);border:0;color:var(--ink)}
.journey-opening .system-node.active strong {text-decoration:underline;text-decoration-color:var(--context-work);text-decoration-thickness:2px;text-underline-offset:5px}
.journey-opening .system-node strong {font-size:1rem;font-weight:600;line-height:1.35;min-height:2.7em}
.journey-opening .system-node .system-index {font-size:.875rem;margin:0;color:var(--muted)}
.journey-opening .system-node .dot-svg {width:48px;height:48px;color:var(--context-work)}
.journey-opening .system-node[data-stage="5"] .dot-svg {color:var(--context-protected)}
.journey-opening .system-node[data-stage="6"] .dot-svg {color:var(--context-evidence)}
.journey-opening .system-node:focus-visible {outline:2px solid var(--focus);outline-offset:4px}
.opening-scene {display:flex;gap:32px;align-items:center;min-height:160px;padding:20px 0}
.opening-state {width:112px;flex:none;color:var(--context-work)}
.opening-state .dot-svg {width:112px;height:112px}
.journey-opening .map-note {background:transparent;border:0;border-radius:0;padding:0;min-height:0;flex:1}
.journey-opening .map-note .mini-label {display:block;font-size:.875rem;letter-spacing:.06em;color:var(--context-work)}
.journey-opening .map-note p {font-size:1.25rem;max-width:52ch;line-height:1.5;margin:8px 0 12px;color:var(--ink)}
.journey-opening .chapter-context-link {font-size:.875rem;color:var(--muted)}
.opening-bottom {display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:1400px;margin:8px auto 0;padding-top:24px;border-top:1px solid var(--line)}
.opening-bottom p {display:flex;flex-direction:column;margin:0;font-size:.875rem;color:var(--muted);gap:4px}
.opening-bottom strong {font-weight:600;color:var(--ink)}
.opening-bottom .primary {display:inline-flex;gap:28px;align-items:center}
.dot-svg {display:block;width:32px;height:32px;flex:none;color:var(--context-work);overflow:visible}
.dot-svg .l {animation-play-state:paused!important}
.dot-svg.is-playing .l {animation-play-state:running!important}
.concept-step>.dot-svg {width:40px;height:40px;margin-bottom:12px}
.skill-starter-path .dot-svg {width:40px;height:40px;margin-bottom:2px}
.intent-path .dot-svg {width:32px;height:32px}
.secret-runtime .dot-svg {width:32px;height:32px}
.afk-step .dot-svg {width:32px;height:32px;margin-bottom:10px}
.afk-step.complete .dot-svg {color:var(--context-evidence)}
.afk-step.current:last-child .dot-svg,.run-lanes .paused .dot-svg {color:var(--context-protected)}
.lane-label>.dot-svg {display:inline-block;width:28px;height:28px;vertical-align:middle}
.production-note h4 {display:flex;align-items:center;gap:16px}
.production-note h4>.dot-svg {width:40px;height:40px}
.shape-diagram {overflow:hidden}
@media(max-width:1000px) {
 .journey-opening .system-map {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px}
 .journey-opening .system-node {min-height:100px;gap:6px}
 .journey-opening .system-node strong {min-height:0}
 .journey-opening .system-node .dot-svg {width:40px;height:40px}
}
@media(max-width:720px) {
 .journey-opening.hero {padding:32px 6% 32px}
 .opening-kicker {font-size:.75rem;letter-spacing:.06em}
 .journey-opening h1 {font-size:clamp(3rem,11.4vw,5.25rem);line-height:1.08;letter-spacing:-.04em;margin:24px 0 20px}
 .journey-opening .hero-intro {font-size:1rem;margin-bottom:28px}
 .opening-route-label {font-size:.75rem;align-items:baseline}
 .opening-route-label>span:first-child {max-width:23ch}
 .opening-route-label>span:last-child {white-space:nowrap}
 .journey-opening .system-map {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 12px;padding:20px 0}
 .journey-opening .system-node {padding:4px 0;min-height:104px;gap:6px}
 .journey-opening .system-node strong {font-size:.875rem;line-height:1.4}
 .journey-opening .system-node .system-index {font-size:.75rem}
 .journey-opening .system-node .dot-svg {width:32px;height:32px}
 .opening-scene {gap:20px;min-height:144px;padding:20px 0}
 .opening-state,.opening-state .dot-svg {width:64px;height:64px}
 .journey-opening .map-note p {font-size:1rem;line-height:1.55}
 .journey-opening .map-note .mini-label {font-size:.75rem}
 .opening-bottom {flex-direction:column;align-items:flex-start;gap:24px;margin-top:0}
 .opening-bottom .primary {font-size:1rem}
 .opening-bottom p {font-size:.875rem}
}

h1,h2,h3,h4,h5,h6 {font-weight:600}

.flow-svg .dot-svg {width:28px;height:28px;color:var(--context-work)}
.mobile-flow-node>.dot-svg {width:28px;height:28px;display:inline-block;margin-right:10px}
.graph-mobile .human-node>.dot-svg,.workflow-node:has(rect[data-label="Human merge gate"])>.dot-svg {color:var(--context-protected)}
.flow-svg .dot-svg use {stroke:none}
.journey-opening h1 {letter-spacing:-.04em}
.opening-state[data-stage="5"],.production-note[data-stage="6"] h4>.dot-svg {color:var(--context-protected)}
.opening-state[data-stage="6"],.production-note[data-stage="8"] h4>.dot-svg,.production-note[data-stage="9"] h4>.dot-svg {color:var(--context-evidence)}

/* A chapter is a route; each numbered idea is a distinct stop. */
:root {--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-section:64px;--space-chapter:96px}
.chapter-layout {grid-template-columns:224px minmax(0,1fr);gap:48px;padding:96px 5%}
.chapter-nav {top:calc(var(--header-height) + 32px)}
.chapter-nav nav {margin-top:24px}
.chapter-nav a {padding:12px 8px;gap:16px;border-radius:8px}
.chapter-nav a.active {background:var(--tone-4)}
.aside-note {display:none}
.chapter {padding-bottom:96px;margin-bottom:96px}
.chapter-intro {margin-bottom:32px;max-width:55ch}
.chapter-meta {margin-bottom:24px}
.idea {margin-top:64px;padding-top:48px;border-top:1px solid color-mix(in srgb,var(--tone-11) 50.196%,transparent);scroll-margin-top:calc(var(--header-height) + 24px)}
.idea-heading {display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;align-items:start;margin-bottom:32px}
.idea-number {font-size:3rem;line-height:1.15;letter-spacing:-.03em;font-weight:600;color:var(--context-work);font-variant-numeric:tabular-nums}
.idea-heading h3 {font-size:clamp(1.75rem,2.6vw,2.25rem);line-height:1.2;letter-spacing:-.025em;text-wrap:balance;margin:0 0 16px}
.idea-heading .idea-explanation {font-size:1rem;line-height:1.6;max-width:56ch;margin:0}
#afk .idea-number,#rules .idea-number {color:var(--context-protected)}
#memory .idea-number {color:var(--context-evidence)}
.idea .interactive-panel {padding:32px;margin:32px 0;border-radius:12px;background:var(--tone-2)}
.idea .panel-head {margin-bottom:24px}
.idea .interactive-panel h4 {margin-bottom:16px}
.idea-footer {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.idea-footer .source-detail {margin:0;padding:0;border:0;flex:1 1 200px}
.source-detail summary {display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;list-style:none;color:var(--muted)}
.source-detail summary::-webkit-details-marker {display:none}
.source-detail summary:before {content:'+';font-size:1.25rem;width:16px;text-align:center;color:var(--context-work)}
.source-detail[open] summary:before {content:'−'}
.idea-footer:has(.source-detail[open]) {display:block}
.idea-footer .source-detail[open] {margin-bottom:24px}
.idea-next {display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:4px 24px;align-items:center;min-height:56px;max-width:100%;margin:0;padding:12px 16px;border:1px solid color-mix(in srgb,var(--tone-11) 43.922%,transparent);border-radius:8px;text-decoration:none;background:var(--tone-3);color:var(--ink)}
.idea-next .next-cue {grid-column:1;font-size:.75rem;color:var(--muted);line-height:1.2}
.idea-next .next-title {grid-column:1;font-size:.875rem;line-height:1.4;max-width:34ch}
.idea-next>.icon {grid-column:2;grid-row:1 / 3;width:20px;height:20px;color:var(--context-work);transition:transform 180ms cubic-bezier(.16,1,.3,1)}
.idea-next:hover {background:var(--tone-5);border-color:var(--context-work)}
.idea-next:hover>.icon {transform:translateX(4px)}
.idea-position {max-width:none;margin-top:32px;padding-top:24px}
.idea-position label {display:block;margin-bottom:12px;font-size:.875rem;color:var(--muted)}
.idea-position select {width:100%;min-height:44px;padding:8px;border:1px solid color-mix(in srgb,var(--tone-11) 43.922%,transparent);border-radius:8px;color:var(--ink);background:var(--tone-3);font:inherit;font-size:.875rem}
.visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.inline-skills {gap:8px;margin-top:24px;align-items:center}
.inline-skills>span {flex-basis:auto;margin-right:8px;font-size:.75rem}
.skill-chip,.resource-chip {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--tone-11) 37.647%,transparent);border-radius:24px;font:inherit;font-size:.875rem;line-height:1.4;background:var(--tone-3);color:var(--context-work);text-decoration:none;transition:background-color 150ms,border-color 150ms}
.skill-chip[aria-expanded=true],.skill-chip:hover,.resource-chip:hover {background:var(--tone-8);color:var(--tone-14);border-color:var(--tone-8)}
.skill-preview {flex-basis:100%;margin-top:8px;padding:24px;background:var(--tone-3);border-radius:12px}
.skill-preview[hidden] {display:none}
.skill-preview h5 {font-size:1rem;line-height:1.5;margin:0 0 8px;overflow-wrap:anywhere;color:var(--ink)}
.skill-preview p {font-size:1rem;color:var(--muted);margin:0;max-width:56ch}
.skill-preview-actions,.collection-resources {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.collection-resources {padding:0 24px 24px}
.skills-chapter>.context-note {display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.journey-opening .chapter-context-link {display:inline-flex;min-height:44px;padding:8px 16px;background:var(--tone-3);border-radius:24px;font-size:.875rem;color:var(--context-work);text-decoration:none}
.journey-opening.hero {padding-top:48px}
.journey-opening .system-node {gap:8px;padding:12px 8px}
.journey-opening h1 {font-size:clamp(3.5rem,8.5vw,6rem)}
.opening-route-label {padding-top:16px}
.opening-scene {padding:24px 0}
.opening-bottom {margin-top:8px}
.concept-flow {gap:0;margin:32px 0}
.concept-step {padding:24px;gap:16px;border-radius:12px}
.concept-step>.dot-svg {margin-bottom:0}
.concept-connector {width:32px;position:relative}
.concept-connector:after {content:'';position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--context-work);border-right:1px solid var(--context-work);transform:rotate(45deg)}
.workflow-choice {gap:32px}
.workflow-choice>div {display:flex;flex-direction:column;padding:24px 0;border-top:0}
.route-shape {display:block;width:100%;height:96px;color:var(--context-work);margin:0 0 24px}
.route-shape circle {fill:var(--tone-4);stroke:var(--tone-13)}
.shape-decisions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0}
.shape-decisions>div {display:flex;flex-direction:column;align-items:stretch;padding:0;border:0;gap:8px}
.shape-decisions .route-shape {height:80px;margin-bottom:8px}
.shape-decisions strong {order:-1;font-size:1rem;color:var(--ink)}
.shape-decisions p {font-size:.875rem;line-height:1.5;color:var(--muted)}
.team-diagram {margin:32px 0;display:grid;gap:0}
.team-lead {display:grid;justify-items:center;gap:8px;padding:24px;border:1px solid color-mix(in srgb,var(--tone-11) 50.196%,transparent);border-radius:12px;width:60%;justify-self:center;background:var(--tone-4)}
.team-lead>.icon {width:32px;height:32px;color:var(--context-work)}
.team-lead span,.team-branches span {font-size:.875rem;color:var(--muted)}
.team-branches {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;position:relative;padding-top:32px}
.team-branches:before {content:'';position:absolute;height:16px;top:16px;left:25%;right:25%;border-top:1px solid var(--tone-13);border-left:1px solid var(--tone-13);border-right:1px solid var(--tone-13)}
.team-branches:after {content:'';position:absolute;top:0;left:50%;height:16px;border-left:1px solid var(--tone-13)}
.team-branches>div {display:grid;gap:8px;justify-items:center;text-align:center;padding:24px 16px;border:1px solid color-mix(in srgb,var(--tone-11) 50.196%,transparent);border-radius:12px;background:var(--tone-3)}
.team-board {margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:16px;background:var(--tone-4);border-radius:8px}
.team-board>span {color:var(--muted);font-size:.875rem}
.team-diagram figcaption {margin-top:16px;font-size:.875rem;text-align:center;color:var(--muted)}
.flow-svg .icon,.flow-svg .dot-svg {width:28px;height:28px}
.afk-step.current:last-child {background:rgba(170,153,175,.07);border-color:var(--context-protected)}
@media(max-width:1000px) {
 .chapter-layout {grid-template-columns:minmax(0,1fr);padding:64px 6%;gap:0}
 .idea-heading {grid-template-columns:48px minmax(0,1fr);gap:24px}
 .idea-number {font-size:2.5rem}
 .concept-step {padding:16px;gap:16px}
 .concept-connector {height:24px;width:1px}
 .concept-connector:after {right:-3px;top:auto;bottom:0;transform:rotate(135deg)}
}
@media(max-width:720px) {
 .chapter {padding-bottom:64px;margin-bottom:64px}
 .idea {margin-top:64px;padding-top:32px}
 .idea-heading {grid-template-columns:40px minmax(0,1fr);gap:16px;margin-bottom:24px}
 .idea-number {font-size:2rem}
 .idea-heading h3 {font-size:1.5rem;margin-bottom:12px}
 .idea-heading .idea-explanation {font-size:1rem;line-height:1.6}
 .idea .interactive-panel {padding:24px 16px;margin:24px 0}
 .idea-footer {gap:12px;margin-top:24px;padding-top:16px}
 .idea-next {width:100%;max-width:none}
 .inline-skills {gap:8px}
 .inline-skills>span {flex-basis:100%;margin:0}
 .skill-chip {font-size:.875rem;padding:8px 12px;max-width:100%;overflow-wrap:anywhere}
 .skill-preview {padding:16px}
 .source-detail summary {min-height:44px}
 .team-lead {width:80%;padding:16px}
 .team-branches {gap:16px}
 .team-branches>div {padding:16px 8px}
 .team-board {justify-content:flex-start}
 .shape-decisions {gap:16px;grid-template-columns:minmax(0,1fr)}
 .shape-decisions>div {display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px 16px;align-items:center}
 .shape-decisions .route-shape {grid-column:1;grid-row:1 / 3;height:64px;margin:0}
 .shape-decisions strong,.shape-decisions p {grid-column:2}
 .shape-decisions strong {grid-row:1}
 .workflow-choice .route-shape {height:80px}
 .journey-opening h1 {font-size:clamp(3rem,11.4vw,5.25rem)}
 .journey-opening.hero {padding-top:32px}
 .journey-opening .system-node {gap:8px;padding:8px 0}
}
@media(max-width:380px) {
 .journey-opening .system-map {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
 .journey-opening .system-node {display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px 12px;min-height:88px;padding:8px}
 .journey-opening .system-node .dot-svg {grid-row:1 / 3}
 .journey-opening .system-node .system-index {grid-column:2;font-size:.75rem}
 .journey-opening .system-node strong {grid-column:2}
 .opening-bottom .primary {padding:12px 16px;gap:16px}
}
@media(prefers-reduced-motion:reduce) {.idea-next:hover>.icon {transform:none}}
/* Anchor padding belongs to the document, so idea offsets add only the local gap. */
.idea {scroll-margin-top:24px}
.toolkit-resources {display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 24px}
#idea-12 .segmented {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:max-content;max-width:100%;gap:4px;padding:4px}
#idea-12 .segmented button {display:flex;justify-content:center;gap:8px;white-space:nowrap}
@media(max-width:720px) {#idea-12 .segmented {width:100%}#idea-12 .segmented button {padding:8px 4px;font-size:.875rem;gap:6px}#idea-12 .segmented button .icon {width:18px;height:18px}}
@media(max-width:380px) {#idea-12 .segmented button {flex-direction:column;gap:4px;min-height:64px}}
.chapter-nav a:hover {background:var(--tone-2)}
.chapter-nav a.active {background:var(--tone-4);color:var(--ink);font-weight:600}
.playbook-diagram {display:grid;margin:32px 0;gap:32px}
.playbook-inputs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;position:relative}
.playbook-inputs>div {padding:24px 16px;border-top:1px solid var(--tone-11);display:grid;gap:8px;text-align:center}
.playbook-inputs span,.playbook-output>span {font-size:.875rem;color:var(--muted)}
.playbook-inputs:after {content:'';position:absolute;bottom:-16px;left:25%;right:25%;height:16px;border-left:1px solid var(--tone-13);border-right:1px solid var(--tone-13);border-bottom:1px solid var(--tone-13)}
.playbook-output {justify-self:center;display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 16px;align-items:center;padding:24px 32px;background:var(--tone-4);border:1px solid color-mix(in srgb,var(--tone-11) 50.196%,transparent);border-radius:12px;position:relative}
.playbook-output:before {content:'';position:absolute;top:-16px;left:50%;height:16px;border-left:1px solid var(--tone-13)}
.playbook-output>.icon {grid-row:1 / 3;width:32px;height:32px;color:var(--context-work)}
.playbook-output>span {grid-column:2}
.working-thread {display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;margin:32px 0;gap:32px}
.thread-end {display:grid;justify-items:center;gap:12px;text-align:center;font-size:.875rem}
.thread-end>.icon {width:40px;height:40px;color:var(--context-work)}
.thread-end.result>.icon {color:var(--context-evidence)}
.thread-layers {display:grid;gap:8px;position:relative}
.thread-layers:before,.thread-layers:after {content:'';position:absolute;top:50%;width:32px;border-top:1px solid var(--tone-13)}
.thread-layers:before {left:-32px}.thread-layers:after {right:-32px}
.thread-layers>span {padding:8px 16px;text-align:center;font-size:.875rem;border:1px solid color-mix(in srgb,var(--tone-11) 50.196%,transparent);border-radius:8px;background:var(--tone-3)}
@media(max-width:720px) {
 .playbook-inputs {gap:16px}
 .playbook-inputs>div {padding:16px 8px}
 .playbook-output {padding:16px}
 .working-thread {grid-template-columns:1fr;gap:32px}
 .thread-layers {width:70%;justify-self:center}
 .thread-layers:before,.thread-layers:after {left:50%;width:0;height:32px;border-top:0;border-left:1px solid var(--tone-13)}
 .thread-layers:before {top:-32px}.thread-layers:after {top:100%}
}


/* Focused learning scenes: one idea, one canvas, persistent navigation. */
[hidden] {display:none!important}
html:has(.focused-journey) {scroll-padding-top:0;scroll-behavior:auto}
.focused-journey {height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased}
.focused-journey strong,.focused-journey b {font-weight:600}
.focused-journey main {height:calc(100dvh - var(--header-height));min-height:0;overflow:hidden}
.focused-journey footer {display:none}
.focused-journey header {position:relative;height:72px;padding:0 4%;flex-wrap:nowrap}
.focused-journey header nav>a {display:inline-flex;align-items:center;min-height:44px;font-size:.875rem}
.focused-journey .chapter-layout {height:100%;max-width:1600px;margin:auto;padding:32px 4% 20px;gap:48px;grid-template-columns:216px minmax(0,1fr)}
.focused-journey .chapter-nav {position:relative;top:auto;align-self:stretch;min-height:0;overflow:auto;padding-right:8px}
.focused-journey .chapter-nav nav {margin-top:16px}
.focused-journey .chapter-nav a {gap:12px;min-height:48px;padding:12px;line-height:1.4}
.focused-journey .chapter-nav a:before {content:none}
.focused-journey .chapter-nav .chapter-index {width:20px;flex:none;font-size:.75rem;letter-spacing:0;color:var(--muted)}
.focused-journey .idea-position {margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.focused-journey .chapter-content {min-width:0;min-height:0;height:100%;overflow:hidden}
.focused-journey .chapter {height:100%;padding:0;margin:0;border:0;min-height:0}
.focused-journey[data-view=lesson] .chapter>h2,.focused-journey[data-view=lesson] .chapter>.chapter-meta,.focused-journey[data-view=lesson] .chapter>.chapter-intro {display:none}
.focused-journey .idea {height:100%;margin:0;padding:0;border:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;position:relative}
.focused-journey .idea-heading {grid-template-columns:48px minmax(0,1fr);gap:20px;margin-bottom:24px;max-width:850px}
.focused-journey .idea-number {font-size:2.5rem;line-height:1.2}
.focused-journey .idea-heading h3 {font-size:2rem;line-height:1.2;margin:0 0 12px;letter-spacing:-.025em;text-wrap:pretty}
.focused-journey .idea-heading .idea-explanation {font-size:1rem;line-height:1.6;max-width:60ch;text-wrap:pretty}
.lesson-scene-body {min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 12px 24px 0;scrollbar-width:thin;scrollbar-color:var(--tone-8) transparent}
.lesson-scene-body:focus-visible {outline:1px solid var(--line);outline-offset:-1px}
.focused-journey .idea .interactive-panel {margin:0;padding:24px;border-radius:12px;background:var(--tone-2);border:1px solid color-mix(in srgb,var(--tone-11) 25.098%,transparent)}
.focused-journey .panel-head {margin-bottom:16px}
.focused-journey .interactive-panel h4 {font-size:1rem;line-height:1.5;margin:0}
.focused-journey .concept-flow,.focused-journey .playbook-diagram,.focused-journey .working-thread,.focused-journey .team-diagram,.focused-journey .workflow-choice,.focused-journey .shape-decisions {margin:16px 0 24px}
.focused-journey .concept-step {min-height:128px;justify-content:center}
.focused-journey .concept-step>.dot-svg {width:48px;height:48px}
.focused-journey .lesson-scene-body p {text-wrap:pretty}
.focused-journey .packet-item p,.focused-journey .model-note,.focused-journey .diagram-caption,.focused-journey .context-note,.focused-journey .shared-fields dd,.focused-journey .small-intro {font-size:1rem;line-height:1.6}
.focused-journey .shape-diagram {padding:0;max-width:800px;margin:16px auto 0;min-height:0}
.focused-journey .flow-svg {width:100%;min-width:0;max-height:370px}
.focused-journey .shared-context {margin-top:24px;padding-top:16px}
.focused-journey .shared-fields {gap:12px}
.focused-journey .shared-fields dd {font-size:.875rem}
.focused-journey .segmented {border:0;background:var(--tone-4);padding:4px;gap:4px;border-radius:8px}
.focused-journey .segmented button {min-height:44px;border:0;border-radius:5px;font-size:.875rem;line-height:1.4;box-shadow:none}
.focused-journey .segmented button[aria-pressed=true] {background:var(--action);color:var(--tone-14);box-shadow:none;outline:0}
.focused-journey .segmented button[aria-pressed=true]>span {text-decoration:none}
.lesson-check {margin-top:24px;padding:24px;background:var(--tone-3);border-radius:12px;max-width:850px}
.check-prompt {margin:0 0 16px;font-size:1rem;font-weight:600;line-height:1.5}
.check-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.check-options button {text-align:left;min-height:56px;padding:12px 16px;font-size:.875rem;line-height:1.5;background:var(--tone-4);border:1px solid color-mix(in srgb,var(--tone-11) 43.922%,transparent);border-radius:8px;transition:background 150ms,border-color 150ms}
.check-options button:hover {background:var(--tone-7)}
.check-options button[aria-pressed=true] {background:var(--tone-8);border-color:var(--tone-8);color:var(--tone-14)}
.lesson-check[data-result=correct] button[aria-pressed=true] {background:var(--tone-7);border-color:var(--context-evidence)}
.check-response {font-size:1rem;line-height:1.6;color:var(--muted);margin:0;max-width:64ch}
.check-response:not(:empty) {margin-top:16px}
.lesson-check[data-result=correct] .check-response {color:var(--context-evidence)}
.focused-journey .inline-skills {margin-top:20px}
.focused-journey .lesson-controls,.focused-journey .lesson-controls:has(.source-detail[open]) {display:flex;flex-wrap:nowrap;align-items:center;gap:16px;margin:0;padding:16px 0 0;min-height:64px;border-top:1px solid var(--line);position:relative;z-index:4}
.lesson-previous {display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;color:var(--muted);font-size:.875rem;border-radius:8px;transition:background 150ms}
.lesson-previous:hover {background:var(--tone-3);color:var(--ink)}
.lesson-previous .icon {width:18px;height:18px}
.lesson-position {font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.focused-journey .lesson-controls .source-detail {flex:1;margin:0;padding:0;border:0;min-width:0;position:static}
.focused-journey .lesson-controls .source-detail summary {justify-content:flex-end;padding:8px 12px;font-size:.875rem;white-space:nowrap}
.focused-journey .lesson-controls .source-detail summary:before {content:none}
.lesson-controls .source-detail[open] .notes-body {position:absolute;right:0;bottom:80px;width:min(100%,640px);max-height:min(50dvh,440px);overflow:auto;padding:24px;border:1px solid var(--tone-11);border-radius:12px;background:var(--tone-3);box-shadow:0 16px 48px color-mix(in srgb,var(--tone-0) 60.0%,transparent)}
.lesson-controls .notes-body p {margin:0;font-size:1rem;line-height:1.6}
.focused-journey .idea-next {display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;padding:12px 20px;width:auto;border:0;background:var(--action);color:var(--tone-14);font-size:.875rem;border-radius:8px}
.focused-journey .idea-next>.icon {width:18px;height:18px;color:inherit}
.focused-journey .idea-next:hover {background:var(--tone-8)}
.focused-journey[data-view=skills] .chapter-content,.focused-journey[data-view=glossary] .chapter-content {overflow:auto;padding-right:16px;scrollbar-width:thin;scrollbar-color:var(--tone-8) transparent}
.focused-journey .skills-chapter {height:auto;padding-bottom:32px}
.focused-journey .skills-chapter h2 {font-size:2rem;line-height:1.2;margin:0 0 24px}
.focused-journey .glossary {padding:0;margin:0}
.focused-journey .sources {height:100%;overflow:auto;padding:48px 8%;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-content:center}
.focused-journey .sources h2 {font-size:3rem;line-height:1.15;letter-spacing:-.03em}
.focused-journey .journey-opening.hero {height:100%;min-height:0;overflow:auto;padding:32px 5% 24px;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;align-content:start;gap:16px;max-width:1600px;margin:auto}
.focused-journey .opening-heading {display:grid;grid-template-columns:1.4fr 1fr;gap:0 48px;align-items:end}
.focused-journey .opening-kicker {grid-column:1 / -1;font-size:.75rem;margin:0}
.focused-journey .opening-heading h1 {font-size:clamp(3rem,6.3vw,5.5rem);line-height:1.1;letter-spacing:-.04em;margin:24px 0 8px}
.focused-journey .opening-heading .hero-intro {font-size:1.125rem;line-height:1.6;margin:0 0 8px;max-width:40ch}
.focused-journey .opening-route {display:flex;flex-direction:column;justify-content:center}
.focused-journey .opening-route-label {padding-top:16px;font-size:.75rem}
.focused-journey .journey-opening .system-map {grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;padding:24px 0 16px}
.focused-journey .journey-opening .system-node {min-height:112px;background:transparent;border-radius:8px;padding:12px 8px}
.focused-journey .journey-opening .system-node.active {background:var(--tone-4)}
.focused-journey .journey-opening .system-node.active strong {text-decoration:none}
.focused-journey .journey-opening .system-node:hover {background:var(--tone-3)}
.focused-journey .opening-scene {min-height:128px;padding:24px 0;gap:24px}
.focused-journey .opening-state,.focused-journey .opening-state .dot-svg {width:80px;height:80px}
.focused-journey .journey-opening .map-note p {font-size:1.125rem;margin:8px 0 12px}
.focused-journey .opening-bottom {width:100%;margin:0;padding-top:20px;gap:16px}
.focused-journey .opening-bottom .primary {font-size:1rem;min-height:48px;padding:12px 20px;gap:24px;border-radius:8px}
@media(max-width:1000px) {
 .focused-journey .chapter-layout {grid-template-columns:1fr;padding:24px 5% 16px;gap:0}
 .focused-journey .chapter-nav {display:none}
 .focused-journey header .mobile-chapter-menu {display:block}
 .focused-journey header nav>a[href="#chapters"] {display:none}
 .focused-journey .journey-opening .system-map {grid-template-columns:repeat(4,minmax(0,1fr))}
 .focused-journey .journey-opening .system-node {min-height:88px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:center}
 .focused-journey .journey-opening .system-node>.dot-svg {grid-row:1 / 3;width:40px;height:40px}
 .focused-journey .journey-opening .system-node .system-index,.focused-journey .journey-opening .system-node strong {grid-column:2;min-height:0}
 .focused-journey .journey-opening .system-node strong {font-size:.875rem}
 .mobile-loop {gap:32px;grid-template-rows:repeat(3,minmax(56px,auto));margin-top:8px}
 .mobile-loop .loop-pass {grid-area:3/2;background:var(--tone-8);border-color:var(--tone-8)}
 .mobile-loop .plan:after,.mobile-loop .fix:after {content:none}
 .mobile-loop-wires {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--tone-13)}
 .mobile-loop .mobile-flow-node {position:relative;z-index:1;min-height:56px;padding:12px 8px;gap:8px;font-size:.875rem}
 .mobile-loop .mobile-flow-node>.dot-svg {width:24px;height:24px;margin:0}
 .loop-wire {fill:none;stroke:var(--tone-13);stroke-width:1.5}
 .loop-wire.retry {stroke-dasharray:4 4;stroke:var(--tone-11)}
 .focused-journey .production-path {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 24px}
 .focused-journey .production-step {min-height:56px;padding:8px;display:flex;align-items:center;justify-content:flex-start;gap:8px}
 .focused-journey .production-step>.dot-svg {width:28px;height:28px;margin:0}
 .focused-journey .production-step>span {font-size:.875rem;text-align:left}
 .focused-journey .production-step small {display:none}
 .focused-journey .production-note {margin:0;padding:16px}
 .focused-journey .sources {padding:32px 5%;gap:32px}
}
@media(max-width:720px) {
 .focused-journey header {height:64px;padding:0 16px;gap:8px}
 .focused-journey header .brand {font-size:.875rem;gap:8px;white-space:nowrap}
 .focused-journey header .brand .mark {width:32px;height:28px;font-size:.75rem}
 .focused-journey header nav {margin:0;gap:0}
 .focused-journey header nav>a {display:none}
 .focused-journey header .edition {display:none}
 .focused-journey .mobile-chapter-menu summary {font-size:.75rem;min-height:44px;padding:8px;border:0;background:var(--tone-4);border-radius:8px}
 .focused-journey .mobile-chapter-menu>nav {right:0;left:auto;width:min(90vw,320px);max-height:70dvh;overflow:auto}
 .focused-journey .chapter-layout {padding:20px 16px 12px}
 .focused-journey .idea-heading {grid-template-columns:32px minmax(0,1fr);gap:12px;margin-bottom:16px}
 .focused-journey .idea-number {font-size:1.5rem;line-height:1.2}
 .focused-journey .idea-heading h3 {font-size:1.5rem;margin-bottom:8px}
 .focused-journey .idea-heading .idea-explanation {font-size:1rem;line-height:1.5}
 .lesson-scene-body {padding-right:0;padding-bottom:20px}
 .focused-journey .idea .interactive-panel {padding:16px}
 .focused-journey .concept-flow {margin:8px 0 20px;gap:0}
 .focused-journey .concept-step {display:flex;flex-direction:row;justify-content:flex-start;gap:16px;min-height:64px;padding:12px 16px}
 .focused-journey .concept-step>.dot-svg {width:32px;height:32px}
 .focused-journey .concept-connector {align-self:center;flex:none}
 .focused-journey .lesson-controls,.focused-journey .lesson-controls:has(.source-detail[open]) {gap:8px;padding-top:12px;min-height:60px}
 .lesson-previous {padding:8px;gap:4px;font-size:.75rem}
 .lesson-previous>span {display:none}
 .lesson-position {font-size:.75rem}
 .focused-journey .lesson-controls .source-detail summary {padding:8px 4px;font-size:.75rem}
 .focused-journey .idea-next {min-height:44px;padding:10px 12px;gap:8px;font-size:.875rem;flex:none}
 .lesson-controls .source-detail[open] .notes-body {bottom:72px;padding:16px}
 .lesson-check {padding:16px;margin-top:20px}
 .check-options {grid-template-columns:1fr;gap:8px}
 .check-options button {min-height:48px}
 .focused-journey .shared-fields {grid-template-columns:repeat(2,minmax(0,1fr))}
 .focused-journey .journey-opening.hero {padding:24px 16px 20px;display:flex;flex-direction:column;gap:20px}
 .focused-journey .opening-heading {display:block}
 .focused-journey .opening-kicker {font-size:.625rem;letter-spacing:.04em}
 .focused-journey .opening-heading h1 {font-size:2.5rem;margin:16px 0 12px;white-space:nowrap}
 .focused-journey .opening-heading .hero-intro {font-size:1rem;line-height:1.5;margin:0}
 .focused-journey .opening-route {flex:1;justify-content:flex-start}
 .focused-journey .opening-route-label {font-size:.625rem;padding:0;gap:12px}
 .focused-journey .opening-route-label>span:first-child {max-width:30ch}
 .focused-journey .journey-opening .system-map {grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:16px 0;align-items:stretch}
 .focused-journey .journey-opening .system-node {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72px;padding:8px 4px;gap:6px}
 .focused-journey .journey-opening .system-node strong {display:none}
 .focused-journey .journey-opening .system-node .dot-svg {width:32px;height:32px}
 .focused-journey .journey-opening .system-node .system-index {font-size:.75rem}
 .focused-journey .opening-scene {padding:16px 0 0;gap:12px;min-height:0;align-items:flex-start}
 .focused-journey .opening-state,.focused-journey .opening-state .dot-svg {width:40px;height:40px}
 .focused-journey .journey-opening .map-note p {font-size:1rem;margin:6px 0 8px}
 .focused-journey .journey-opening .map-note .mini-label {font-size:.75rem}
 .focused-journey .journey-opening .chapter-context-link {font-size:.75rem;min-height:44px;padding:8px 12px}
 .focused-journey .opening-bottom {align-items:stretch;gap:12px;padding-top:16px}
 .focused-journey .opening-bottom .primary {justify-content:space-between;font-size:.875rem;min-height:48px;gap:12px;padding:12px 16px}
 .focused-journey .opening-bottom p {font-size:.75rem}
 .focused-journey .sources {grid-template-columns:1fr;align-content:start;padding:24px 16px;gap:32px}
 .focused-journey .sources h2 {font-size:2rem;margin:0 0 24px}
 .focused-journey .sources .source-links>a {flex-wrap:wrap;gap:16px}
 .focused-journey .skills-chapter h2 {font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce) {.focused-journey *, .focused-journey *:before,.focused-journey *:after {scroll-behavior:auto!important}}

.focused-journey .idea-next {flex-direction:row}
.focused-journey header {min-height:72px}
.focused-journey .chapter-nav a {border-bottom:0}
.focused-journey .workflow-color-key {gap:8px}
.focused-journey .workflow-color-key>span {border:0;padding:4px 8px;border-radius:24px;background:var(--tone-4);font-size:.75rem;display:inline-flex;align-items:center;gap:6px}
.focused-journey .workflow-color-key>span:before {content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.focused-journey .shared-context summary {min-height:44px;cursor:pointer;font-size:.875rem;font-weight:600;line-height:1.5;color:var(--ink)}
.focused-journey .shared-context summary:hover {color:var(--context-work)}
.focused-journey .shared-fields {margin-top:16px}
@media(min-width:1001px) {
 #idea-12 .interactive-panel {display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:0 24px;align-items:start}
 #idea-12 .panel-head {grid-column:1 / -1}
 #idea-12 .segmented {grid-column:1;justify-self:start}
 #idea-12 .shape-diagram {grid-column:1;margin:16px 0 0;width:100%}
 #idea-12 .diagram-caption {grid-column:1;margin:16px 0}
 #idea-12 .workflow-color-key {grid-column:1;margin:0}
 #idea-12 .shared-context {grid-column:2;grid-row:2 / 6;margin:0;padding:0 0 0 24px;border-top:0;border-left:1px solid var(--line)}
 #idea-12 .shared-fields {grid-template-columns:1fr;gap:12px}
 #idea-12 .flow-svg {max-height:320px}
}
@media(max-width:720px) {
 .focused-journey header {min-height:64px}
 .focused-journey .shared-context {margin-top:16px;padding-top:8px}
 #shape-diagram:has(.mobile-loop)+#shape-note {display:none}
}

@media(max-width:1000px) {
 .focused-journey .mobile-chapter-menu {position:relative}
 .focused-journey .mobile-chapter-menu summary {display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;background:var(--tone-4);border:0;border-radius:8px;font-size:.875rem;list-style:none;cursor:pointer}
 .focused-journey .mobile-chapter-menu summary::-webkit-details-marker {display:none}
 .focused-journey #mobile-chapter-links {position:fixed;right:4%;left:auto;top:calc(var(--header-height) + 8px);display:block;width:min(90vw,320px);max-height:75dvh;overflow:auto;padding:8px 16px;border:1px solid var(--tone-11);border-radius:12px;background:var(--tone-2);box-shadow:0 16px 40px color-mix(in srgb,var(--tone-0) 60.0%,transparent)}
 .focused-journey #mobile-chapter-links a {display:flex;gap:12px;align-items:center;min-height:48px;padding:8px;font-size:.875rem;border-bottom:1px solid var(--line);text-decoration:none;border-radius:8px}
 .focused-journey #mobile-chapter-links a.active {background:var(--tone-4);text-decoration:none}
}
@media(max-width:720px) {
 .focused-journey .mobile-chapter-menu summary {font-size:.75rem;padding:8px}
 .focused-journey .journey-opening .system-node strong {display:block;font-size:.625rem;line-height:1.35;min-height:2.7em;text-align:center}
 .focused-journey .journey-opening .system-node .system-index {display:none}
 .focused-journey .journey-opening .system-node {min-height:88px;gap:4px}
}
@media(max-width:380px) {.focused-journey .opening-heading h1 {font-size:2.125rem}}

.focused-journey .idea-heading h3:focus {outline:none}
.focused-journey .lesson-scene-body {display:flex;flex-direction:column;justify-content:safe center}
.focused-journey .lesson-scene-body>* {flex:none}
.focused-journey .lesson-scene-body>.concept-flow {min-height:160px}
@media(max-width:720px) {.focused-journey .lesson-scene-body>.concept-flow {min-height:0}}

.lesson-previous {min-width:44px}
@media(min-width:721px) and (max-width:1000px) {.focused-journey .production-path {grid-template-columns:repeat(5,minmax(0,1fr))}.focused-journey .production-step {min-height:96px;flex-direction:column;align-items:flex-start}}

@media(max-width:1000px) {#shape-diagram .mobile-shared {display:none}}

.stage-label-short {display:none}
@media(max-width:720px) {
 .focused-journey .opening-kicker,.focused-journey .opening-route-label {font-size:.75rem}
 .focused-journey .journey-opening .system-node {min-height:80px}
 .focused-journey .journey-opening .system-node strong {font-size:.75rem;min-height:2.7em}
 .stage-label-long {display:none}
 .stage-label-short {display:inline}
}

.focused-journey button[aria-pressed=true] strong,.focused-journey button[aria-pressed=true]>span:last-child {text-decoration:none}
.focused-journey .production-step[aria-pressed=true],.focused-journey .incident-options button[aria-pressed=true],.focused-journey .repo-chats button[aria-pressed=true] {border-color:var(--action);box-shadow:none}
.focused-journey .production-step.gated[aria-pressed=true] {border-color:var(--context-protected-surface)}
.focused-journey button:focus-visible {outline:2px solid var(--focus);outline-offset:3px}
@media(prefers-reduced-motion:no-preference) {.focused-journey button:active:not(:disabled),.focused-journey .primary:active {transform:scale(.96)}}

/* Clear titles, command references, and compact process lanes. */
.focused-journey .idea-heading {display:block;max-width:850px}
.focused-journey .chapter-nav a {gap:0}
.focused-journey .journey-opening .system-node {grid-template-columns:40px minmax(0,1fr)}
.focused-journey .journey-opening .system-node strong {grid-column:2;grid-row:1;align-self:center}
#idea-jump {appearance:none;padding:12px 40px 12px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd7ef' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px;line-height:1.5}
.inline-skills {display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;align-items:start;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--tone-11) 25.098%,transparent)}
.inline-skills>span {padding-top:12px;font-size:.875rem;color:var(--muted)}
.skill-commands {display:flex;flex-wrap:wrap;gap:4px 16px;min-width:0}
.skill-commands .skill-chip {justify-content:space-between;gap:12px;min-height:44px;padding:10px 4px;border:0;border-radius:4px;background:transparent;max-width:100%;text-align:left;text-decoration:none;overflow-wrap:anywhere}
.skill-commands .skill-chip span {min-width:0}
.skill-commands .skill-chip:hover,.skill-commands .skill-chip[aria-expanded=true] {background:var(--tone-5);color:var(--tone-14)}
.skill-commands .command-chevron {width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;transition:transform 180ms ease-out}
.skill-commands .skill-chip[aria-expanded=true] .command-chevron {transform:rotate(180deg)}
.inline-skills .skill-preview {grid-column:1/-1}
.environment-fork {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:760px;margin:24px auto}
.environment-branch {border-top:0;padding:0;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:center}
.environment-branch>.icon {width:24px;height:24px;margin:0;color:var(--context-work)}
.environment-branch h5 {font-size:1.125rem;line-height:1.4;margin:0}
.environment-branch .concept-flow {grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:20px 0 0;min-height:0}
.environment-branch .concept-step {flex:none;min-height:64px;padding:16px;display:flex;flex-direction:row;gap:12px;text-align:left;justify-content:flex-start;border:1px solid color-mix(in srgb,var(--tone-11) 37.647%,transparent);border-radius:8px;background:var(--tone-4)}
.environment-branch .concept-step>.icon {height:24px;width:24px;flex:none}
.environment-branch .blocked-step {background:var(--tone-3)}
.environment-branch .blocked-step>.icon {color:var(--context-risk)}
.environment-branch .concept-connector {position:relative;align-self:center;width:1px;height:24px;min-height:24px;margin:0;background:color-mix(in srgb,var(--tone-11) 43.922%,transparent)}
.environment-branch .concept-connector:after {position:absolute;top:auto;bottom:0;left:-3px;right:auto;width:6px;height:6px;border:0;border-right:1px solid var(--tone-13);border-bottom:1px solid var(--tone-13);transform:rotate(45deg)}
.check-options button {display:flex;align-items:center;gap:12px;text-align:left;transition:background-color 180ms ease-out,border-color 180ms ease-out,transform 100ms ease-out}
.check-options button:active {transform:translateY(1px)}
.answer-mark {width:24px;height:24px;flex:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:var(--tone-12)}
.answer-mark path {opacity:0}
.lesson-check[data-result=correct] button[aria-pressed=true] .answer-mark {color:var(--context-evidence)}
.lesson-check[data-result=correct] button[aria-pressed=true] .answer-mark path {opacity:1}
.check-response:not(:empty) {display:flex;flex-direction:column;gap:4px}
.check-response strong {font-weight:600;color:var(--ink)}
.lesson-check[data-result=correct] .check-response strong {color:var(--context-evidence)}
@media(max-width:720px) {
 .environment-fork {gap:12px;margin:16px 0}
 .environment-branch {grid-template-columns:20px minmax(0,1fr);gap:8px}
 .environment-branch>.icon {width:20px;height:20px}
 .environment-branch h5 {font-size:1rem}
 .environment-branch .concept-step {padding:12px 8px;gap:8px;min-height:72px;font-size:.875rem}
 .environment-branch .concept-step>.icon {width:20px;height:20px}
 .inline-skills {grid-template-columns:1fr;gap:4px}
 .inline-skills>span {padding:0}
 .skill-commands {display:grid;gap:0}
 .skill-commands .skill-chip {padding:10px 8px}
 .focused-journey .journey-opening .system-node {grid-template-columns:28px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce) {.concept-step,.slice-node,.concept-connector:before,.connector:before {animation:none}.command-chevron {transition:none}}


/* One process clock owns connector handoffs. Cards retain stable styling. */
.process-controlled>.concept-step,.process-controlled>.slice-node {position:relative;isolation:isolate;border-radius:8px;border-color:color-mix(in srgb,var(--tone-11) 33.333%,transparent)}
.process-token {position:absolute;left:0;top:calc(50% - 2px);width:8px;height:4px;border-radius:2px;background:var(--tone-13);opacity:0;pointer-events:none}
.environment-branch .concept-connector>.process-token {width:4px;height:8px;left:-1.5px;top:0}
.environment-branch[data-lane=checks] .process-token {background:var(--context-risk)}
.answer-symbol {position:relative;display:inline-flex;width:24px;height:24px;flex:none}
.answer-halo {position:absolute;inset:0;border-radius:50%;border:1px solid var(--context-evidence);opacity:0;pointer-events:none}
.lesson-check[data-result=retry] button[aria-pressed=true] .answer-mark {color:var(--context-risk)}
.lesson-check[data-result=retry] .check-response strong {color:var(--context-risk)}
@media(max-width:1000px) {.concept-flow>.concept-connector>.process-token {width:4px;height:8px;left:-1.5px;top:0}}
@media(max-width:720px) {#slice-diagram>.connector>.process-token {width:4px;height:8px;left:-1.5px;top:0}}

.mobile-flow-node {position:relative;isolation:isolate}

/* Stable process cards; movement belongs to the connections. */
.concept-connector,.connector,.mobile-flow-line {position:relative}
.process-controlled>.concept-step:after,.process-controlled>.slice-node:after,.mobile-flow-node:after {display:none}
.workflow-signal {fill:none;stroke:var(--tone-13);stroke-width:3;stroke-linecap:round;pointer-events:none;opacity:0}
.desktop-workflow {position:relative;display:grid;max-width:860px;margin:16px auto 24px;gap:36px 56px;isolation:isolate}
.desktop-workflow-wires {position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;color:var(--tone-12);pointer-events:none}
.desktop-workflow-wires .wire {fill:none;stroke:var(--tone-11);stroke-width:1.5}
.desktop-workflow-wires .retry {stroke:var(--tone-12);stroke-dasharray:5 5}
.workflow-card {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;min-height:132px;padding:24px;border:1px solid var(--tone-9);border-radius:12px;background:var(--tone-4);min-width:0;font-size:1rem;line-height:1.4}
.workflow-card .dot-svg,.workflow-card>.icon {width:40px;height:40px;flex:none}
.workflow-card.owner-node {border-color:var(--tone-13);background:var(--tone-4)}
.sequence-workflow {grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.loop-workflow {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:120px;max-width:650px}
.loop-workflow .plan {grid-area:1/1}.loop-workflow .build {grid-area:1/2}.loop-workflow .fix {grid-area:2/1}.loop-workflow .verify {grid-area:2/2}.loop-workflow .state {grid-area:3/1;background:var(--tone-3);border-style:dashed}.loop-workflow .finish {grid-area:3/2}
.graph-workflow {grid-template-columns:1fr 1.05fr 1.2fr;padding-top:30px}
.graph-workflow .plan {grid-area:2/1}.graph-workflow .build {grid-area:1/2}.graph-workflow .tester {grid-area:2/2}.graph-workflow .security-reviewer {grid-area:3/2}.graph-workflow .verify {grid-area:1/3}.graph-workflow .state {grid-area:2/3}.graph-workflow .finish {grid-area:3/3}
.workflow-retry-label {position:absolute;top:-12px;left:46%;font-size:.75rem;color:var(--tone-13);background:var(--tone-2);padding:2px 8px}
.mobile-flow-node {gap:12px!important;padding:18px!important;min-height:112px!important}
.mobile-flow-node .dot-svg {width:32px!important;height:32px!important}
.mobile-flow-line>.process-token {width:4px;height:8px;left:-1.5px;top:0}
.route-shape .route-signal {fill:var(--tone-14);stroke:none;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--tone-13) 50.196%,transparent))}
.skill-commands {gap:8px}
.skill-commands .skill-chip {padding:10px 16px;border-radius:8px;gap:14px}
.inline-skills .skill-preview-actions .resource-chip {min-height:44px;padding:10px 16px;gap:8px;border-radius:8px;text-decoration:none;border:1px solid var(--tone-9);line-height:1.4}
.inline-skills .skill-preview-actions .resource-chip:hover {background:var(--tone-7);text-decoration:none}
.owner-decision {margin:24px 0}
.owner-decision-line {display:block;font-size:1rem;letter-spacing:0;color:var(--tone-13);margin-bottom:16px}
.owner-decision>strong {display:block;font-size:clamp(2.5rem,7vw,5rem);line-height:1.05;font-weight:600;letter-spacing:-.04em}
.owner-decision>strong>span {color:var(--tone-13)}
.owner-decision>p {font-size:1.125rem;margin:20px auto!important;max-width:480px;color:var(--tone-14)}
.bottleneck .owner-explanation {font-size:.9375rem;margin-top:24px}
.apply-entry,.apply-back {display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--tone-13)}
.apply-entry {padding:12px 16px;border-radius:8px;background:var(--tone-4)}
.focused-journey .opening-bottom {flex-wrap:wrap;gap:16px}
.apply-experience {height:calc(100dvh - var(--header-height));overflow:auto;max-width:1200px;margin:auto;padding:32px 5% 48px}
.apply-experience[hidden] {display:none}
.apply-heading {margin-bottom:32px}
.apply-heading h2 {font-size:clamp(2.25rem,5vw,4rem);line-height:1.1;letter-spacing:-.035em;margin:16px 0}
.apply-heading h2>span {color:var(--tone-13)}
.apply-heading>p {font-size:1.125rem;max-width:600px;color:var(--tone-13)}
.apply-workspace {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
#apply-form label {display:block;font-size:1.125rem;font-weight:600;margin-bottom:12px}
#apply-project {display:block;width:100%;resize:vertical;min-height:160px;max-height:320px;background:var(--tone-3);color:var(--tone-14);font:inherit;line-height:1.6;border:1px solid var(--tone-9);border-radius:12px;padding:18px}
#apply-project::placeholder {color:var(--tone-13)}
.apply-examples {display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.apply-examples button {border:1px solid var(--tone-8);border-radius:6px;min-height:40px;padding:8px 12px;background:transparent;font-size:.875rem;color:var(--tone-14);text-align:left}
.apply-examples button:hover {background:var(--tone-5)}
.apply-submit {border:0;cursor:pointer;min-height:48px;width:100%;justify-content:space-between}
.apply-submit:disabled {opacity:.7;cursor:wait}
.apply-status {color:var(--tone-13);min-height:1.5em;font-size:.9375rem;margin-top:16px}
.apply-service-note {font-size:.8125rem;color:var(--tone-13);margin-top:8px}
.apply-result {border:1px solid var(--tone-8);border-radius:16px;padding:28px;background:var(--tone-3);min-height:320px}
.apply-empty {display:flex;flex-direction:column;min-height:260px;align-items:center;justify-content:center;color:var(--tone-13)}
.apply-empty>.route-shape {width:240px;max-width:100%;margin:0}
.apply-empty>p {margin:20px 0 0;color:var(--tone-14)}
.apply-result-kicker {font-size:.8125rem;color:var(--tone-13);margin:0 0 8px}
.apply-result h3 {font-size:1.875rem;margin:8px 0 16px;letter-spacing:-.025em}
.apply-result .route-shape {width:260px;max-width:100%;height:auto;margin:8px 0 16px;display:block}
.apply-result>p {font-size:1rem;line-height:1.6;color:var(--tone-14)}
.apply-lesson {border-top:1px solid color-mix(in srgb,var(--tone-11) 31.373%,transparent);margin-top:24px;padding-top:20px}
.apply-lesson h4 {font-size:1.25rem;margin:6px 0 12px}
.apply-lesson p {font-size:.9375rem;line-height:1.6;color:var(--tone-13)}
.apply-lesson .primary {margin-top:12px;padding:10px 16px;min-height:44px;border-radius:8px;font-size:.9375rem}
.apply-result-skills {margin-top:24px;display:grid;gap:12px}
.apply-result-skills a {display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--tone-11) 25.098%,transparent);text-decoration:none;font-size:.9375rem;color:var(--tone-13);overflow-wrap:anywhere}
.apply-result-skills small {display:block;font-size:.875rem;color:var(--tone-13);line-height:1.5;margin-top:6px}
.apply-result-skills .icon {flex:none}
@media(max-width:1000px) {.desktop-workflow {display:none}}
@media(max-width:720px) {
 .apply-experience {padding:20px 5% 40px}.apply-workspace {grid-template-columns:1fr;gap:24px}.apply-heading {margin-bottom:24px}.apply-result {padding:20px}.apply-heading>p {font-size:1rem}.apply-empty {min-height:180px}.apply-result {min-height:220px}
 .skill-commands .skill-chip {padding:10px 14px}.owner-decision>p {font-size:1rem}.owner-decision-line {font-size:.875rem}
}
@media(prefers-reduced-motion:reduce) {.route-signal {display:none}}

@media(max-width:720px) {.mobile-loop .mobile-flow-node {min-height:88px!important;padding:16px 12px!important;gap:10px!important}.mobile-loop .mobile-flow-node>.dot-svg {width:28px!important;height:28px!important}.mobile-loop {gap:32px}}
.apply-submit {display:flex;align-items:center;gap:16px;text-align:left}
.owner-decision>p {margin:20px 0!important;max-width:none}
.workflow-card.evidence-node {border-color:var(--tone-13);background:var(--tone-5);color:var(--tone-14)}
.workflow-card.owner-node>.dot-svg {color:var(--tone-13)}
.apply-examples button {min-height:44px;border-color:var(--tone-11)}
#apply-project {border-color:var(--tone-11)}
.graph-workflow {padding-top:40px}
.workflow-retry-label {top:0;left:44%;font-size:.75rem}
@media(max-width:720px) {.graph-mobile .mobile-flow-node {min-height:88px!important;padding:16px!important}.graph-mobile .mobile-workers {gap:12px}}
.scene-scroll-cue {position:absolute;right:8px;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;background:var(--tone-4);border:1px solid var(--tone-11);border-radius:8px;box-shadow:0 4px 16px color-mix(in srgb,var(--tone-0) 50.196%,transparent);color:var(--tone-14)}
.scene-scroll-cue[hidden] {display:none}
.scene-scroll-cue:hover {background:var(--tone-7)}
.scene-scroll-cue>.icon {width:20px;height:20px}
.apply-lesson .primary,.apply-result>.primary {display:inline-flex;align-items:center;gap:12px;line-height:1.4}
/* Both entry actions share one baseline and one control size. */
.focused-journey .opening-bottom {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}
.opening-actions {display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.focused-journey .opening-actions>.primary,.focused-journey .opening-actions>.apply-entry {display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:12px 20px;line-height:1.5;font-size:1rem;border-radius:8px}
.focused-journey .opening-bottom>p {justify-self:end}
@media(max-width:720px) {
 .focused-journey .opening-bottom {grid-template-columns:minmax(0,1fr);gap:12px}
 .opening-actions {flex-direction:column;align-items:stretch;gap:12px}
 .focused-journey .opening-actions>.primary,.focused-journey .opening-actions>.apply-entry {min-height:48px;padding:12px 16px;font-size:.875rem;gap:12px}
 .focused-journey .opening-bottom>p {justify-self:start}
}

/* Incident-led entry and a single six-chapter backbone. */
.focused-journey :is(h1,h2,h3,h4,h5)[tabindex="-1"]:focus {outline:none!important;box-shadow:none!important}
.focused-journey .journey-opening.hero {display:flex;flex-direction:column;gap:28px;padding:32px 5% 24px;justify-content:center}
.opening-incident {display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:64px}
.opening-story {min-width:0}
.focused-journey .opening-story h1 {font-size:clamp(2.5rem,4.4vw,4.75rem);line-height:1.08;letter-spacing:-.035em;margin:20px 0 24px;white-space:normal}
.opening-story h1>span {color:var(--tone-13)}
.focused-journey .opening-story .hero-intro {font-size:1.125rem;line-height:1.6;max-width:44ch;color:var(--tone-14);margin:0}
.hero-rule {padding:18px 0 0;border-top:1px solid var(--tone-7);margin:24px 0 0;max-width:44ch;font-size:1rem;line-height:1.5;color:var(--tone-14)}
.hero-rule>strong {display:block;font-size:.8125rem;color:var(--tone-13);margin-bottom:6px}
.incident-demo {border:1px solid var(--tone-8);border-radius:16px;background:var(--tone-3);padding:24px;min-width:0}
.incident-demo-heading {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;font-size:.875rem;font-weight:600}
.incident-demo-controls {display:flex;gap:4px;padding:4px;border-radius:8px;background:var(--tone-0)}
.incident-demo-controls button {padding:8px 12px;min-height:40px;border:0;border-radius:5px;font-size:.8125rem;background:transparent;color:var(--tone-14)}
.incident-demo-controls button[aria-pressed=true] {background:var(--tone-8);color:var(--tone-14)}
.incident-screen {border:1px solid var(--tone-8);border-radius:10px;overflow:hidden;background:var(--tone-2)}
.screen-topbar {display:flex;gap:6px;padding:12px;border-bottom:1px solid var(--tone-7)}
.screen-topbar i {width:5px;height:5px;background:var(--tone-11);border-radius:50%}
.screen-content {min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:12px;text-align:center}
.screen-content .icon {width:40px;height:40px;color:var(--tone-11);opacity:.45}
.screen-content strong {font-size:1.375rem;line-height:1.3}
.screen-content>span {font-size:.9375rem;line-height:1.5;color:var(--tone-13)}
.incident-screen.is-repaired .icon {color:var(--tone-14);opacity:1}
.incident-verdict {display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 0;font-size:.9375rem;line-height:1.5}
.incident-check,.incident-verdict.is-repaired>span {color:var(--tone-14)}
#incident-verdict {color:var(--tone-13)}
.story-detail-link {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0 0;border-top:1px solid var(--tone-7);text-decoration:none;color:var(--tone-13);font-size:.875rem;min-height:44px}
.opening-backbone>p {font-size:.8125rem;color:var(--tone-13);margin:0 0 12px}
.focused-journey .opening-chapters.system-map,.opening-chapters {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:0;margin:0;border:0}
.chapter-door {min-height:88px;padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:8px;border:1px solid var(--tone-8);border-radius:8px;text-decoration:none;color:var(--tone-14);background:var(--tone-3);line-height:1.4}
.chapter-door>small {grid-column:1;font-size:.8125rem;color:var(--tone-13)}
.chapter-door>span {grid-column:1;grid-row:2;font-size:.875rem}
.chapter-door>.icon {grid-column:2;grid-row:1;width:16px;height:16px}
.chapter-door:hover {background:var(--tone-4);border-color:var(--tone-12)}
.focused-journey .opening-bottom {display:block;padding-top:20px;border-top:1px solid var(--tone-7)}
.chapter-utilities {border-top:1px solid var(--tone-7);padding-top:12px;margin-top:12px}
.chapter-utilities>a {font-size:.8125rem!important;color:var(--tone-13)}
.focused-journey .lesson-position {font-size:.75rem}
.focused-journey .lesson-check[data-result=retry] button[aria-pressed=true] {background:var(--tone-5);border-color:var(--tone-13);color:var(--tone-14);box-shadow:none}
.lesson-check[data-result=retry] .check-response {color:var(--tone-13)}
.lesson-check[data-result=retry] button[aria-pressed=true] .answer-symbol {color:var(--tone-13);opacity:1}
.lesson-check[data-result=retry] .answer-mark>path {d:path('M8 8L16 16M16 8L8 16')}
.check-options {grid-template-columns:repeat(3,minmax(0,1fr))}
.focused-journey .skill-starter-path {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.focused-journey .skill-starter-path>a {display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid var(--tone-8);border-radius:12px;padding:20px;min-width:0;text-decoration:none;background:var(--tone-3);gap:12px}
.skill-starter-path>a>small {font-size:.8125rem;line-height:1.5;overflow-wrap:anywhere;color:var(--tone-13)}
.skill-starter-path>a>p {font-size:.875rem;line-height:1.5;color:var(--tone-13);margin:0}
#skills-all[hidden] {display:none!important}
#skills-expand {min-height:48px;padding:12px 20px;border:1px solid var(--tone-11);border-radius:8px;background:var(--tone-4);text-decoration:none;color:var(--tone-14);cursor:pointer}
.focused-journey .skills-chapter>.skills-collection-head {margin-top:32px;padding-top:24px;border-top:1px solid var(--tone-7)}
.focused-journey .skills-collection-head h3 {font-size:1.125rem}
/* Avoid carrying a prior idea label onto a utility view. */
.idea-position[hidden] {display:none!important}
@media(max-width:1100px) {.opening-incident {gap:32px}.chapter-door {padding:12px}.focused-journey .skill-starter-path {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px) {
 .focused-journey .journey-opening.hero {justify-content:flex-start;padding:24px 16px;gap:24px}
 .opening-incident {grid-template-columns:1fr;gap:24px}
 .focused-journey .opening-story h1 {font-size:clamp(2rem,8vw,3rem);margin:12px 0 16px}
 .focused-journey .opening-story .hero-intro {font-size:1rem}
 .hero-rule {margin-top:16px;padding-top:16px;font-size:.9375rem}
 .incident-demo {padding:16px}.incident-demo-heading {margin-bottom:16px;gap:12px}
 .screen-content {min-height:150px;padding:16px}.incident-verdict {font-size:.875rem;padding:16px 0}
 .opening-chapters {grid-template-columns:repeat(2,minmax(0,1fr))}
 .chapter-door {min-height:84px}.focused-journey .opening-bottom {padding-top:20px}
 .check-options {grid-template-columns:1fr}
 .focused-journey .skill-starter-path {grid-template-columns:1fr}
 .focused-journey .skill-starter-path>a {display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 16px;padding:16px}
 .skill-starter-path>a>.dot-svg {grid-column:1;grid-row:1/4;width:40px;height:40px;align-self:center}
 .skill-starter-path>a>span,.skill-starter-path>a>small,.skill-starter-path>a>p {grid-column:2}
 .focused-journey .skills-collection-head {gap:16px;align-items:center}
 .focused-journey .skills-collection-head h3 {font-size:1rem}
}
/* Long scenes use a visible scrollbar without an overlay covering the diagram. */
.focused-journey .lesson-scene-body {scrollbar-width:thin;scrollbar-color:var(--tone-12) var(--tone-3)}
@media(max-width:720px) {
 .focused-journey .production-path {display:flex;flex-direction:column;gap:0}
 .focused-journey .production-item {width:100%;padding:0 0 20px;margin:0;position:relative}
 .focused-journey .production-step {width:100%;min-height:64px;padding:12px 16px;gap:16px}
 .focused-journey .production-step small {display:block;position:static;font-size:.875rem;min-width:18px}
 .focused-journey .production-item:not(:last-child):after {content:'';display:block;position:absolute;left:40px;top:auto;bottom:0;width:1px;height:20px;background:var(--tone-12);transform:none}
 .focused-journey .production-item:last-child {padding-bottom:0}
}

/* Supplied palette: deep violet surfaces, muted mauve accents, pale lavender ink. */
:root {--palette-0:var(--tone-0);--palette-1:var(--tone-1);--palette-2:var(--tone-2);--palette-3:var(--tone-3);--palette-4:var(--tone-4);--palette-5:var(--tone-5);--palette-6:var(--tone-6);--palette-7:var(--tone-7);--palette-8:var(--tone-8);--palette-9:var(--tone-9);--palette-10:var(--tone-10);--palette-11:var(--tone-11);--palette-12:var(--tone-12);--palette-13:var(--tone-13);--palette-14:var(--tone-14);--bg:var(--palette-0);--surface:var(--palette-3);--ink:var(--palette-14);--muted:var(--palette-13);--accent:var(--palette-13);--blue:var(--accent);--action:var(--palette-8);--control-border:var(--palette-11);--focus:var(--palette-14);--line:var(--palette-8);--context-work:var(--palette-13);--context-evidence:var(--palette-14);--context-protected:var(--palette-13);--context-protected-surface:var(--palette-7);--context-risk:var(--palette-13)}
body,header {background:var(--bg)}
.focused-journey .primary {background:var(--palette-14);color:var(--palette-0)}
.focused-journey .idea-next,.apply-submit.primary {background:var(--palette-8);color:var(--palette-14)}
.focused-journey .idea-next:hover,.apply-submit.primary:hover {background:var(--palette-9)}
.focused-journey .check-options button,.focused-journey .segmented,.incident-demo-controls {background:var(--palette-5)}
.focused-journey button[aria-pressed=true],.incident-demo-controls button[aria-pressed=true] {background:var(--palette-8);color:var(--palette-14)}
.focused-journey .lesson-check[data-result=correct] button[aria-pressed=true] {background:var(--palette-14);color:var(--palette-0);border-color:var(--palette-14)}
.lesson-check[data-result=correct] button[aria-pressed=true] .answer-mark {color:var(--palette-0)}
.focused-journey .lesson-check[data-result=retry] button[aria-pressed=true] {background:var(--palette-7);color:var(--palette-14);border-color:var(--palette-11)}
.focused-journey .lesson-check[data-result=retry] .answer-mark {color:var(--palette-14)}
/* Flat geometric fields: the light and dark shapes describe roles, boundaries and progress. */
.concept-art {display:block;width:100%;height:auto;overflow:visible;--art-bright:var(--palette-14);--art-mid:var(--palette-10);--art-dark:var(--palette-5);--art-line:var(--palette-13)}
.art-bright {fill:var(--art-bright)}.art-mid {fill:var(--art-mid)}.art-dark {fill:var(--art-dark)}.art-line {stroke:var(--art-line);stroke-width:2;fill:none}
.chapter-art-field {grid-column:1/-1;grid-row:1;display:grid;place-items:center;height:90px;margin:-12px -16px 4px;overflow:hidden;border-radius:7px 7px 0 0;background:var(--palette-7)}
.chapter-art-field>.concept-art {width:144px;height:90px}
.chapter-door {overflow:hidden;grid-template-rows:90px auto auto;min-height:160px;padding-top:12px}
.chapter-door>small {grid-row:2}.chapter-door>span {grid-row:3}.chapter-door>.icon {grid-row:2}
.chapter-door-team .chapter-art-field {background:var(--palette-8)}
.chapter-door-afk .chapter-art-field {background:var(--palette-13)}
.chapter-door-afk .concept-art {--art-bright:var(--palette-5);--art-mid:var(--palette-12);--art-dark:var(--palette-13);--art-line:var(--palette-5)}
.chapter-door-production .chapter-art-field {background:var(--palette-9)}
.chapter-door-memory .chapter-art-field {background:var(--palette-14)}
.chapter-door-memory .concept-art {--art-mid:var(--palette-12);--art-bright:var(--palette-5);--art-line:var(--palette-5)}
.chapter-door-rules .chapter-art-field {background:var(--palette-6)}
.focused-journey .skill-starter-path>a {padding:0 20px 20px;overflow:hidden;gap:12px}
.skill-starter-path>a>.concept-art {width:calc(100% + 40px);height:140px;align-self:center;margin:0 -20px 4px;padding:12px 16px;background:var(--palette-7);flex-shrink:0}
.skill-starter-path>.habit-build>.concept-art {background:var(--palette-9)}
.skill-starter-path>.habit-check>.concept-art {background:var(--palette-13);--art-mid:var(--palette-12);--art-bright:var(--palette-5);--art-line:var(--palette-5)}
.skill-starter-path>.habit-handoff>.concept-art {background:var(--palette-8)}
.skill-starter-path>.habit-memory>.concept-art {background:var(--palette-14);--art-mid:var(--palette-12);--art-bright:var(--palette-5);--art-line:var(--palette-5)}
.screen-content>.incident-concept-art {width:180px;height:112px;margin:0 auto}
.screen-topbar {display:none}.screen-content {padding:16px 24px 24px}.incident-screen {background:var(--palette-5)}
.incident-concept-art .art-lost {transform:translate(45px,0);opacity:.28;transition:transform 600ms cubic-bezier(.16,1,.3,1),opacity 450ms}
.is-repaired .incident-concept-art .art-lost {transform:translate(0,0);opacity:1}
.concept-art :is(.art-piece,.art-orbit,.art-traveler,.art-rise,.art-choice,.art-resolve,.art-complete,.art-check,.art-transfer) {transform-box:fill-box;transform-origin:center;animation-play-state:paused}
.art-orbit {transform-box:view-box!important;transform-origin:80px 56px!important;animation:art-orbit 18s linear infinite}
.art-piece {animation:art-piece 7s cubic-bezier(.65,0,.35,1) infinite}
.art-traveler {animation:art-boundary 7s cubic-bezier(.65,0,.35,1) infinite}
.art-rise {animation:art-rise 7s cubic-bezier(.65,0,.35,1) infinite}
.art-resolve {animation:art-resolve 7s cubic-bezier(.65,0,.35,1) infinite}
.art-complete {animation:art-complete 7s cubic-bezier(.65,0,.35,1) infinite}
.art-transfer {animation:art-transfer 7s cubic-bezier(.65,0,.35,1) infinite}
.art-playing :is(.art-piece,.art-orbit,.art-traveler,.art-rise,.art-resolve,.art-complete,.art-transfer) {animation-play-state:running}
@keyframes art-orbit {to {transform:rotate(360deg)}}
@keyframes art-piece {0%,15%,100% {transform:translate(0,0)}40%,75% {transform:translate(-38px,0)}}
@keyframes art-boundary {0%,12%,100% {transform:translate(0,0)}45%,72% {transform:translate(50px,0)}}
@keyframes art-rise {0%,12%,100% {transform:translate(0,0)}35% {transform:translate(39px,-21px)}55%,75% {transform:translate(78px,-42px)}}
@keyframes art-resolve {0%,12%,100% {transform:translate(10px,0)}45%,75% {transform:translate(-8px,0)}}
@keyframes art-complete {0%,15%,100% {transform:translate(10px,10px)}45%,75% {transform:translate(0,0)}}
@keyframes art-transfer {0%,15%,100% {transform:translate(0,0)}45%,75% {transform:translate(62px,0)}}
@media(max-width:1100px) {.chapter-art-field {margin-left:-12px;margin-right:-12px}.chapter-door {padding:12px}}
@media(max-width:720px) {
 .chapter-art-field {height:84px}.chapter-art-field>.concept-art {height:84px;width:130px}.chapter-door {grid-template-rows:84px auto auto;min-height:156px}
 .focused-journey .skill-starter-path>a {display:grid;grid-template-columns:96px minmax(0,1fr);padding:16px;gap:4px 16px}
 .skill-starter-path>a>.concept-art {grid-column:1;grid-row:1/4;width:96px;height:104px;margin:0;padding:0;border-radius:6px;align-self:center}
 .skill-starter-path>a>span,.skill-starter-path>a>small,.skill-starter-path>a>p {grid-column:2}
 .screen-content>.incident-concept-art {width:170px;height:112px}
}
@media(prefers-reduced-motion:reduce) {.concept-art * {animation:none!important;transition:none!important}}
/* Interactive edges and selected controls remain distinct within the same hue family. */
.chapter-door,.focused-journey .skill-starter-path>a,.incident-demo,#apply-project,.apply-examples button,.check-options button,#idea-jump {border-color:var(--palette-11)}
.focused-journey .segmented button[aria-pressed=true],.incident-demo-controls button[aria-pressed=true] {background:var(--palette-13);color:var(--palette-0)}
.focused-journey .idea-next,.apply-submit.primary {border:1px solid var(--palette-11)}

/* The supplied agents portrait is the identity of the opening. */
.chief-hero-visual {min-width:0;align-self:center}
.chief-portrait {margin:0;overflow:hidden;border-radius:12px;background:var(--palette-5)}
.chief-portrait img {display:block;width:100%;height:auto;aspect-ratio:1800/1008;object-fit:contain}
.hero-incident-disclosure {margin-top:16px;border-bottom:1px solid var(--line)}
.hero-incident-disclosure>summary {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;list-style:none;cursor:pointer;font-size:.9375rem;color:var(--ink)}
.hero-incident-disclosure>summary::-webkit-details-marker {display:none}
.disclosure-sign {position:relative;width:16px;height:16px;flex:none}
.disclosure-sign:before,.disclosure-sign:after {content:'';position:absolute;background:currentColor;border-radius:1px}
.disclosure-sign:before {width:12px;height:2px;left:2px;top:7px}
.disclosure-sign:after {width:2px;height:12px;left:7px;top:2px;transition:transform 180ms ease}
.hero-incident-disclosure[open] .disclosure-sign:after {transform:rotate(90deg)}
.hero-incident-disclosure .incident-demo {margin:4px 0 16px}
@media(min-width:1101px) {.opening-incident {grid-template-columns:1fr 1.15fr;gap:56px}}
@media(max-width:720px) {.chief-portrait {border-radius:8px}.hero-incident-disclosure {margin-top:8px}}
@media(prefers-reduced-motion:reduce) {.disclosure-sign:after {transition:none}}

/* One metaphor per field, no miniature frame inside a frame. */
.chapter-art-field {height:120px}
.chapter-art-field>.concept-art {width:160px;height:112px}
.chapter-door {grid-template-rows:120px auto auto;min-height:190px}
.chapter-door-afk .concept-art {--art-mid:var(--palette-12);--art-bright:var(--palette-5);--art-line:var(--palette-5)}
.chapter-door-memory .concept-art,.skill-starter-path>.habit-memory>.concept-art {--art-mid:var(--palette-12);--art-dark:var(--palette-14);--art-bright:var(--palette-5)}
.skill-starter-path>.habit-check>.concept-art {--art-mid:var(--palette-12);--art-bright:var(--palette-5)}
@keyframes art-resolve {0%,15%,100% {transform:translate(8px,0)}45%,75% {transform:translate(-10px,0)}}
@keyframes art-boundary {0%,15%,100% {transform:translate(0,0)}45%,75% {transform:translate(50px,0)}}
@media(max-width:720px) {.chapter-art-field {height:112px}.chapter-art-field>.concept-art {width:150px;height:106px}.chapter-door {grid-template-rows:112px auto auto;min-height:184px}}

/* Skill categories: a visible toolkit with a direct installation action. */
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skill-category {margin:32px 0 0;padding:28px 0 0;border-top:2px solid var(--control-border)}
.skill-category-heading {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 16px}
.focused-journey .skill-category h4 {font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 12px;font-weight:600;color:var(--ink)}
.skill-category-heading p {font-size:1rem;line-height:1.5;color:var(--muted);margin:0;max-width:45ch}
.category-install-actions {display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.copy-install-prompt {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 20px;border:1px solid var(--control-border);border-radius:8px;background:var(--action);color:var(--ink);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.5;cursor:pointer;transition:background-color 160ms,border-color 160ms}
.copy-install-prompt .icon {width:20px;height:20px;flex:none}
.copy-install-prompt span {min-width:142px;text-align:center}
.copy-install-prompt:hover,.copy-install-prompt.is-copied {background:var(--palette-9);border-color:var(--ink)}
.view-install-prompt {min-height:44px;padding:8px 12px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.875rem;cursor:pointer;border-radius:6px}
.view-install-prompt:hover {color:var(--ink);background:var(--surface)}
.category-source-note {font-size:.875rem;color:var(--muted);margin:0 0 12px;line-height:1.5}
.skill-category .skill-collection {border-top:1px solid var(--line)}
.skill-category .skill-collection summary {justify-content:space-between;min-height:56px;padding:12px 0;font-size:.9375rem}
.skill-category .skill-collection summary>span {font-size:inherit;color:var(--ink)}
.copy-install-prompt:focus-visible,.view-install-prompt:focus-visible,.install-dialog-close:focus-visible,#skill-install-text:focus-visible {outline:2px solid var(--focus);outline-offset:4px}
#skill-install-dialog {box-sizing:border-box;width:min(820px,calc(100% - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:28px;background:var(--surface);color:var(--ink);border:1px solid var(--control-border);border-radius:16px;overflow:auto;font-family:Sohne,sans-serif}
#skill-install-dialog::backdrop {background:rgba(3,0,26,.82)}
.install-dialog-head {display:flex;align-items:center;justify-content:space-between;gap:16px}
#skill-install-dialog h2 {font-size:1.5rem;line-height:1.3;letter-spacing:-.02em;margin:0}
.install-dialog-close {display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;border:1px solid var(--control-border);border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:1.75rem;cursor:pointer;flex:none}
#skill-install-help {font-size:1rem;line-height:1.6;color:var(--muted);margin:16px 0 20px}
#skill-install-text {box-sizing:border-box;width:100%;height:40dvh;min-height:180px;resize:vertical;padding:20px;border:1px solid var(--control-border);border-radius:8px;background:var(--bg);color:var(--ink);font-family:Sohne,sans-serif;font-size:1rem;line-height:1.6}
.install-dialog-footer {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
#skill-install-feedback {font-size:.875rem;line-height:1.5;color:var(--muted);margin:0;max-width:42ch}
@media(max-width:720px){
 .skill-category {margin-top:28px;padding-top:24px}
 .skill-category-heading {display:block;padding-bottom:20px}
 .category-install-actions {align-items:stretch;flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:20px}
 .category-install-actions .copy-install-prompt {flex:1 1 210px;padding-inline:16px}
 .view-install-prompt {flex:0 0 auto;padding-inline:12px}
 #skill-install-dialog {padding:20px;max-height:calc(100dvh - 32px)}
 #skill-install-dialog h2 {font-size:1.25rem}
 #skill-install-text {padding:16px;height:36dvh}
 .install-dialog-footer {align-items:stretch;flex-direction:column;gap:12px}
}
@media(prefers-reduced-motion:reduce){.copy-install-prompt {transition:none}}

/* Portable skills expose the complete package beside their existing description. */
.skill-downloads {display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px}
.skill-download-button {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid var(--control-border);border-radius:8px;background:var(--action);color:var(--ink);font-size:.875rem;line-height:1.5;font-weight:600;text-decoration:none}
.skill-download-button .icon {width:18px;height:18px;flex:none}
.skill-download-button:hover {background:var(--palette-9);border-color:var(--ink);text-decoration:none}
.skill-install-guide {display:inline-flex;align-items:center;min-height:44px;padding:8px 0;color:var(--muted);font-size:.875rem;line-height:1.5;text-decoration:none}
.skill-install-guide:hover {color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.skill-download-button:focus-visible,.skill-install-guide:focus-visible {outline:2px solid var(--focus);outline-offset:4px}

/* Define the role first, then explain the guide's actual contents. */
.focused-journey .journey-opening.hero {display:block;padding:44px 5% 40px;max-width:1720px}
.opening-definition {grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:64px;align-items:center}
.focused-journey .opening-definition .opening-kicker {font-size:.875rem;line-height:1.5;letter-spacing:0;margin:0 0 16px;color:var(--muted)}
.focused-journey .opening-definition h1 {font-size:clamp(2.75rem,4.8vw,5rem);line-height:1.06;letter-spacing:-.04em;margin:0 0 24px;max-width:12ch}
.focused-journey .opening-definition .hero-intro {font-size:1.25rem;line-height:1.55;max-width:39ch;margin:0;color:var(--ink)}
.hero-explanation {font-size:1.0625rem;line-height:1.65;max-width:45ch;margin:20px 0 0;color:var(--muted)}
.hero-author-note {font-size:1rem;line-height:1.6;margin:20px 0 0;color:var(--muted)}
.opening-definition .opening-actions {margin-top:28px;gap:12px;flex-direction:row;align-items:center}
.focused-journey .opening-definition .opening-actions>a {font-size:1rem;line-height:1.5;min-height:48px;padding:12px 20px;gap:20px;white-space:nowrap}
.landing-contents {margin-top:56px;padding-top:32px;border-top:1px solid var(--control-border)}
.landing-contents h2,.landing-chapter-heading h2 {font-size:1.5rem;line-height:1.3;letter-spacing:-.02em;margin:0 0 24px;color:var(--ink)}
.landing-resource-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.landing-resource-grid>a {display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:0 0 16px;min-height:128px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.landing-resource-grid h3 {font-size:1rem;line-height:1.45;font-weight:600;margin:0 0 12px;color:var(--ink)}
.landing-resource-grid p {font-size:.9375rem;line-height:1.6;color:var(--muted);margin:0}
.landing-resource-grid .icon {width:18px;height:18px;margin-top:3px;flex:none;color:var(--muted)}
.landing-resource-grid>a:hover {border-bottom-color:var(--ink)}
.landing-resource-grid>a:hover .icon {color:var(--ink)}
.landing-resource-grid>a:focus-visible {outline:2px solid var(--focus);outline-offset:6px}
.journey-opening .opening-backbone {margin-top:48px}
.landing-chapter-heading {display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:24px}
.landing-chapter-heading h2 {margin:0}
.landing-chapter-heading p {font-size:.9375rem;line-height:1.5;color:var(--muted);margin:0}
.landing-example {margin-top:40px}
.landing-example .hero-incident-disclosure {margin:0;border-top:1px solid var(--line)}
.landing-example .hero-incident-disclosure>summary {min-height:60px;font-size:1rem}
.landing-example-context {font-size:1rem;line-height:1.6;color:var(--muted);max-width:65ch;margin:16px 0 24px}
.landing-example .incident-demo {max-width:760px}
@media(max-width:1100px){
 .opening-definition {gap:32px;grid-template-columns:1fr 1fr}
 .focused-journey .opening-definition h1 {font-size:clamp(2.5rem,5.2vw,4rem)}
 .focused-journey .opening-definition .hero-intro {font-size:1.125rem}
 .hero-explanation {font-size:1rem}
 .landing-resource-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
 .landing-resource-grid>a {min-height:112px}
}
@media(max-width:720px){
 .focused-journey .journey-opening.hero {padding:28px 16px 24px}
 .opening-definition {grid-template-columns:1fr;gap:28px}
 .focused-journey .opening-definition .opening-kicker {font-size:.8125rem;margin-bottom:12px}
 .focused-journey .opening-definition h1 {font-size:clamp(2.5rem,10.5vw,3.75rem);margin-bottom:20px;max-width:none}
 .focused-journey .opening-definition .hero-intro {font-size:1.125rem;line-height:1.55}
 .hero-explanation {font-size:1rem;margin-top:16px}
 .hero-author-note {font-size:.9375rem;margin-top:16px}
 .opening-definition .opening-actions {margin-top:24px;align-items:stretch}
 .focused-journey .opening-definition .opening-actions>a {font-size:.875rem;padding:12px 16px;gap:12px;flex:1;justify-content:space-between}
 .landing-contents {margin-top:32px;padding-top:24px}
 .landing-contents h2,.landing-chapter-heading h2 {font-size:1.25rem}
 .landing-resource-grid {grid-template-columns:1fr;gap:20px}
 .landing-resource-grid>a {min-height:96px;padding-bottom:20px}
 .landing-resource-grid h3 {margin-bottom:8px}
 .landing-resource-grid p {font-size:.9375rem;max-width:36ch}
 .journey-opening .opening-backbone {margin-top:32px}
 .landing-chapter-heading {display:block;margin-bottom:20px}
 .landing-chapter-heading p {margin-top:10px;font-size:.9375rem}
 .landing-example {margin-top:28px}
}
@media(max-width:360px){.opening-definition .opening-actions {flex-direction:column}}