dxcomplete 0.1.0

package/website/styles.css

@@ -0,0 +1,1169 @@
+:root {
+  color-scheme: light;
+  --bg: #f6f7f9;
+  --surface: #ffffff;
+  --surface-strong: #eef3f4;
+  --ink: #20242b;
+  --muted: #626b76;
+  --line: #d7dce2;
+  --accent: #1e7f75;
+  --accent-strong: #145f58;
+  --amber: #b46212;
+  --blue: #365fa8;
+  --shadow: 0 18px 50px rgb(25 32 44 / 8%);
+  --radius: 8px;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--ink);
+  line-height: 1.6;
+}
+
+a {
+  color: inherit;
+}
+
+.skip-link {
+  position: fixed;
+  left: 1rem;
+  top: 1rem;
+  z-index: 20;
+  transform: translateY(-150%);
+  background: var(--ink);
+  color: white;
+  padding: 0.6rem 0.8rem;
+  border-radius: 4px;
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  min-height: 72px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1.5rem;
+  border-bottom: 1px solid rgb(215 220 226 / 84%);
+  background: rgb(246 247 249 / 92%);
+  padding: 0 32px;
+  backdrop-filter: blur(16px);
+}
+
+.topbar__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  min-width: 0;
+}
+
+.topbar__brand strong {
+  display: block;
+  font-size: 1rem;
+  line-height: 1.2;
+}
+
+.topbar__brand small {
+  display: block;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.brand-mark {
+  display: inline-grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--accent-strong);
+  font-size: 0.83rem;
+  font-weight: 800;
+  box-shadow: 0 8px 22px rgb(25 32 44 / 7%);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 290px minmax(0, 1fr);
+  gap: 0;
+  min-height: calc(100vh - 72px);
+}
+
+.sidebar {
+  position: sticky;
+  top: 72px;
+  height: calc(100vh - 72px);
+  border-right: 1px solid var(--line);
+  padding: 32px 24px;
+  overflow: auto;
+}
+
+.sidebar__eyebrow,
+.section-kicker {
+  color: var(--accent-strong);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.sidebar nav {
+  display: grid;
+  gap: 0.25rem;
+  margin-top: 1rem;
+}
+
+.nav-link {
+  border-left: 3px solid transparent;
+  color: var(--muted);
+  font-size: 0.92rem;
+  font-weight: 650;
+  padding: 0.5rem 0.7rem;
+  text-decoration: none;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.nav-link:hover,
+.nav-link:focus,
+.nav-link.is-active {
+  border-color: var(--accent);
+  background: rgb(255 255 255 / 72%);
+  color: var(--ink);
+  transform: translateX(2px);
+}
+
+.content {
+  max-width: 1040px;
+  width: 100%;
+  padding: 56px 56px 88px;
+}
+
+.doc-section {
+  border-bottom: 1px solid var(--line);
+  padding: 40px 0 56px;
+}
+
+.doc-section:first-child {
+  padding-top: 0;
+}
+
+.doc-section--last {
+  border-bottom: 0;
+}
+
+h1,
+h2 {
+  max-width: 900px;
+  margin: 0;
+  color: var(--ink);
+  line-height: 1.08;
+}
+
+h1 {
+  font-size: clamp(2.15rem, 3.2vw, 3.6rem);
+  font-weight: 760;
+}
+
+h2 {
+  font-size: clamp(2rem, 3.4vw, 3.25rem);
+  font-weight: 740;
+}
+
+.section-heading {
+  margin-top: 2rem;
+  font-size: clamp(1.35rem, 2vw, 1.7rem);
+  line-height: 1.2;
+}
+
+p {
+  max-width: 780px;
+  margin: 1.15rem 0 0;
+  color: var(--muted);
+  font-size: 1.02rem;
+}
+
+.lede {
+  color: #3f4854;
+  font-size: clamp(1.1rem, 2vw, 1.38rem);
+}
+
+.principles {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 2rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.phase-map {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 2rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.decision-grid,
+.stage-grid,
+.workflow-groups {
+  display: grid;
+  gap: 1px;
+  margin-top: 1.8rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.decision-grid,
+.stage-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.workflow-groups {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.decision-grid div,
+.stage-grid div,
+.workflow-groups div,
+.mode-grid div {
+  background: var(--surface);
+  padding: 1.25rem;
+}
+
+.decision-grid span,
+.stage-grid span,
+.workflow-groups span {
+  display: block;
+  color: var(--accent-strong);
+  font-size: 0.76rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.decision-grid strong,
+.stage-grid strong,
+.mode-grid strong {
+  display: block;
+  color: var(--ink);
+  font-size: 1rem;
+  font-weight: 780;
+  margin-top: 0.2rem;
+}
+
+.decision-grid p,
+.stage-grid p,
+.mode-grid p {
+  margin-top: 0.45rem;
+  font-size: 0.92rem;
+}
+
+.mode-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 1rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+}
+
+.workflow-groups ul {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0.75rem 0 0;
+  padding-left: 1.1rem;
+}
+
+.workflow-groups li {
+  color: #34404b;
+  font-weight: 650;
+}
+
+.outcome-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 1.6rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.outcome-grid section {
+  background: var(--surface);
+  padding: 1.25rem;
+}
+
+.outcome-grid span,
+.outcome-compare span {
+  display: block;
+  color: var(--accent-strong);
+  font-size: 0.75rem;
+  font-weight: 820;
+  text-transform: uppercase;
+}
+
+.outcome-grid h3 {
+  margin: 0.25rem 0 0;
+  color: var(--ink);
+  font-size: 1.12rem;
+  line-height: 1.2;
+}
+
+.outcome-grid p,
+.outcome-compare p,
+.outcome-list p {
+  margin-top: 0.45rem;
+  font-size: 0.94rem;
+}
+
+.outcome-compare {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 1.6rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.outcome-compare div,
+.outcome-list div {
+  background: var(--surface);
+  padding: 1.25rem;
+}
+
+.outcome-compare strong,
+.outcome-list strong {
+  display: block;
+  color: var(--ink);
+  font-size: 1rem;
+  font-weight: 780;
+  margin-top: 0.2rem;
+}
+
+.outcome-list {
+  display: grid;
+  gap: 1px;
+  margin-top: 1.6rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.flow-diagram {
+  display: grid;
+  grid-template-columns:
+    minmax(88px, 1fr) auto minmax(88px, 1fr) auto minmax(88px, 1fr) auto
+    minmax(88px, 1fr) auto minmax(88px, 1fr) auto minmax(88px, 1fr) auto minmax(88px, 1fr);
+  align-items: stretch;
+  gap: 0.45rem;
+  margin-top: 2rem;
+}
+
+.flow-node {
+  display: grid;
+  min-height: 92px;
+  align-content: center;
+  gap: 0.3rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  padding: 1rem;
+}
+
+.flow-node span,
+.flow-detail-grid span,
+.record-groups section > span {
+  color: var(--accent-strong);
+  font-size: 0.75rem;
+  font-weight: 820;
+  text-transform: uppercase;
+}
+
+.flow-node strong,
+.flow-detail-grid strong {
+  color: var(--ink);
+  font-size: 1rem;
+  font-weight: 780;
+}
+
+.flow-arrow {
+  display: grid;
+  place-items: center;
+  color: var(--accent-strong);
+  font-size: 1.4rem;
+  font-weight: 720;
+}
+
+.flow-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 1.4rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.flow-detail-grid > div {
+  background: var(--surface);
+  padding: 1.2rem;
+}
+
+.flow-detail-grid p {
+  margin-top: 0.45rem;
+  font-size: 0.94rem;
+}
+
+.flow-detail-grid ul {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0.75rem 0 0;
+  padding-left: 1.1rem;
+}
+
+.flow-detail-grid li {
+  color: #34404b;
+  font-size: 0.92rem;
+  font-weight: 630;
+}
+
+.phase-index {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 1.6rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.phase-index a {
+  display: grid;
+  align-content: start;
+  min-height: 150px;
+  background: var(--surface);
+  color: inherit;
+  padding: 1.25rem;
+  text-decoration: none;
+  transition:
+    background 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.phase-index a:hover,
+.phase-index a:focus {
+  background: #f8fbfb;
+  color: var(--accent-strong);
+  transform: translateY(-1px);
+}
+
+.phase-index span {
+  color: var(--accent-strong);
+  font-size: 0.75rem;
+  font-weight: 820;
+}
+
+.phase-index strong {
+  color: var(--ink);
+  font-size: 1.15rem;
+  font-weight: 780;
+  margin-top: 0.25rem;
+}
+
+.phase-index p {
+  margin-top: 0.45rem;
+  font-size: 0.94rem;
+}
+
+.lane-workflow {
+  display: grid;
+  gap: 1px;
+  margin-top: 1.8rem;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.lane-workflow--three {
+  grid-template-columns: repeat(3, minmax(190px, 1fr));
+}
+
+.lane-workflow--two {
+  grid-template-columns: repeat(2, minmax(220px, 1fr));
+}
+
+.lane-workflow--four {
+  grid-template-columns: repeat(4, minmax(185px, 1fr));
+}
+
+.lane-workflow--five {
+  grid-template-columns: repeat(5, minmax(165px, 1fr));
+}
+
+.lane-head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #edf4f3;
+  color: var(--accent-strong);
+  font-size: 0.78rem;
+  font-weight: 820;
+  padding: 0.75rem 0.9rem;
+  text-transform: uppercase;
+}
+
+.lane-cell {
+  min-height: 92px;
+  background: var(--surface);
+  padding: 0.75rem;
+}
+
+.work-step {
+  min-height: 68px;
+  border: 1px solid rgb(30 127 117 / 28%);
+  border-radius: 8px;
+  background: #f7fbfa;
+  color: #2d3b3c;
+  display: grid;
+  align-content: center;
+  font-size: 0.9rem;
+  font-weight: 680;
+  line-height: 1.35;
+  padding: 0.75rem;
+}
+
+.work-step--choice {
+  border-color: rgb(180 98 18 / 36%);
+  background: #fff8ef;
+  color: #5d3f1d;
+}
+
+.phase-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 1.6rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.phase-summary section {
+  background: var(--surface);
+  padding: 1.25rem;
+}
+
+.phase-summary h2 {
+  font-size: 1.15rem;
+  line-height: 1.2;
+}
+
+.phase-summary ul {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0.8rem 0 0;
+  padding-left: 1.1rem;
+}
+
+.phase-summary li {
+  color: #34404b;
+  font-size: 0.94rem;
+  font-weight: 630;
+}
+
+.phase-summary p {
+  margin-top: 0.8rem;
+  font-size: 0.94rem;
+}
+
+.phase-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.4rem;
+}
+
+.phase-nav a {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 0.94rem;
+  font-weight: 760;
+  padding: 0.7rem 0.9rem;
+  text-decoration: none;
+  transition:
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.phase-nav a:hover,
+.phase-nav a:focus {
+  border-color: var(--accent);
+  color: var(--accent-strong);
+  transform: translateY(-1px);
+}
+
+.record-groups {
+  display: grid;
+  gap: 1.25rem;
+  margin-top: 1.8rem;
+}
+
+.record-groups section {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  padding: 1.25rem;
+}
+
+.record-groups h2 {
+  margin-top: 0.2rem;
+  font-size: 1.28rem;
+  line-height: 1.2;
+}
+
+.record-list {
+  display: grid;
+  gap: 1px;
+  margin-top: 1rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+}
+
+.record-item {
+  background: var(--surface);
+}
+
+.record-item summary {
+  display: grid;
+  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr) auto;
+  gap: 1rem;
+  align-items: center;
+  min-height: 66px;
+  cursor: pointer;
+  list-style: none;
+  padding: 0.95rem 1rem;
+}
+
+.record-item summary::-webkit-details-marker {
+  display: none;
+}
+
+.record-item summary::after {
+  content: "+";
+  display: inline-grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #f7f9fa;
+  color: var(--accent-strong);
+  font-weight: 820;
+}
+
+.record-item[open] summary::after {
+  content: "-";
+  background: var(--accent);
+  color: white;
+}
+
+.record-item summary:hover,
+.record-item summary:focus {
+  background: #f8fbfb;
+  outline: none;
+}
+
+.record-name {
+  color: var(--ink);
+  font-weight: 780;
+}
+
+.record-summary {
+  color: var(--muted);
+}
+
+.record-fields {
+  display: grid;
+  gap: 1px;
+  border-top: 1px solid var(--line);
+  background: var(--line);
+}
+
+.record-item:not([open]) .record-fields {
+  display: none;
+}
+
+.record-fields div {
+  display: grid;
+  grid-template-columns: minmax(145px, 0.24fr) auto minmax(0, 1fr);
+  gap: 0.8rem;
+  align-items: start;
+  background: #fbfcfd;
+  padding: 0.82rem 1rem;
+}
+
+.record-fields span {
+  color: var(--ink);
+  font-size: 0.92rem;
+  font-weight: 760;
+}
+
+.record-fields b {
+  min-width: 76px;
+  border: 1px solid rgb(30 127 117 / 22%);
+  border-radius: 999px;
+  background: #eef6f4;
+  color: var(--accent-strong);
+  font-size: 0.72rem;
+  font-weight: 780;
+  line-height: 1.4;
+  padding: 0.1rem 0.45rem;
+  text-align: center;
+}
+
+.record-fields p {
+  margin: 0;
+  font-size: 0.9rem;
+}
+
+.record-groups dl {
+  display: grid;
+  gap: 1px;
+  margin: 1rem 0 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+}
+
+.record-groups dl div {
+  display: grid;
+  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
+  gap: 1rem;
+  background: var(--surface);
+  padding: 0.95rem 1rem;
+}
+
+.record-groups dt {
+  color: var(--ink);
+  font-weight: 780;
+}
+
+.record-groups dd {
+  margin: 0;
+  color: var(--muted);
+}
+
+.principles div,
+.phase-map div,
+.charter-field,
+.system-flow div {
+  background: var(--surface);
+  padding: 1.25rem;
+}
+
+.principles span,
+.phase-map span {
+  display: block;
+  color: var(--amber);
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.principles strong,
+.phase-map strong,
+.charter-field span,
+.system-flow strong {
+  display: block;
+  color: var(--ink);
+  font-size: 1rem;
+  font-weight: 780;
+}
+
+.principles p,
+.phase-map p,
+.charter-field p,
+.system-flow p {
+  margin-top: 0.45rem;
+  font-size: 0.92rem;
+}
+
+.next-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.8rem;
+}
+
+.next-links a {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 0.94rem;
+  font-weight: 760;
+  padding: 0.7rem 0.9rem;
+  text-decoration: none;
+  transition:
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.next-links a:hover,
+.next-links a:focus {
+  border-color: var(--accent);
+  color: var(--accent-strong);
+  transform: translateY(-1px);
+}
+
+.charter-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 1.6rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+}
+
+.note {
+  max-width: 780px;
+  margin-top: 1.4rem;
+  border-left: 4px solid var(--accent);
+  background: var(--surface-strong);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  color: #39424d;
+  padding: 1rem 1.15rem;
+}
+
+.note strong {
+  color: var(--accent-strong);
+}
+
+.role-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+  margin-top: 1.5rem;
+}
+
+.role-list button {
+  min-height: 40px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 700;
+  padding: 0.45rem 0.75rem;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.role-list button:hover,
+.role-list button:focus,
+.role-list button.is-selected {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: white;
+  transform: translateY(-1px);
+}
+
+.detail-panel {
+  min-height: 82px;
+  border-left: 4px solid var(--blue);
+  background: var(--surface);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  box-shadow: var(--shadow);
+  color: #35404c;
+  padding: 1rem 1.1rem;
+}
+
+.object-columns {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 1.4rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+}
+
+.object-columns ul {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0;
+  background: var(--surface);
+  list-style: none;
+  padding: 1.15rem;
+}
+
+.object-columns li {
+  color: #2f3741;
+  font-weight: 680;
+}
+
+.system-flow {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  margin-top: 1.6rem;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+}
+
+.system-flow span {
+  display: block;
+  color: var(--blue);
+  font-size: 0.82rem;
+  font-weight: 760;
+  margin-top: 0.25rem;
+}
+
+.az-index {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-top: 1.5rem;
+}
+
+.az-index a,
+.az-index span {
+  display: inline-grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 0.9rem;
+  font-weight: 780;
+  text-decoration: none;
+}
+
+.az-index a:hover,
+.az-index a:focus {
+  border-color: var(--accent);
+  color: var(--accent-strong);
+}
+
+.az-index span {
+  background: #eef0f2;
+  color: #9aa2ad;
+  cursor: not-allowed;
+}
+
+.glossary-alpha {
+  display: grid;
+  gap: 2rem;
+  margin-top: 2.2rem;
+}
+
+.glossary-letter {
+  scroll-margin-top: 92px;
+}
+
+.glossary-letter h2 {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--accent-strong);
+  font-size: 1.25rem;
+  font-weight: 820;
+}
+
+.glossary-list {
+  display: grid;
+  gap: 1px;
+  margin: 1rem 0 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--line);
+}
+
+.glossary-list div {
+  display: grid;
+  grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr);
+  gap: 1rem;
+  background: var(--surface);
+  padding: 1rem 1.15rem;
+}
+
+.glossary-list dt {
+  color: var(--ink);
+  font-weight: 780;
+}
+
+.glossary-list dt span {
+  display: inline-block;
+  margin-left: 0.5rem;
+  border: 1px solid rgb(30 127 117 / 24%);
+  border-radius: 999px;
+  background: #eef6f4;
+  color: var(--accent-strong);
+  font-size: 0.72rem;
+  font-weight: 760;
+  line-height: 1.4;
+  padding: 0.1rem 0.45rem;
+  vertical-align: 0.08rem;
+}
+
+.glossary-list dd {
+  margin: 0;
+  color: var(--muted);
+}
+
+.glossary-list code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.9em;
+}
+
+@media (max-width: 900px) {
+  .topbar {
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 18px 20px;
+  }
+
+  .layout {
+    display: block;
+  }
+
+  .sidebar {
+    position: static;
+    height: auto;
+    border-bottom: 1px solid var(--line);
+    border-right: 0;
+    padding: 18px 20px;
+  }
+
+  .sidebar nav {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .content {
+    padding: 34px 20px 64px;
+  }
+
+  .principles,
+  .phase-map,
+  .flow-diagram,
+  .flow-detail-grid,
+  .phase-index,
+  .phase-summary,
+  .outcome-grid,
+  .outcome-compare,
+  .system-flow,
+  .decision-grid,
+  .stage-grid,
+  .workflow-groups,
+  .mode-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .flow-diagram {
+    gap: 0.6rem;
+  }
+
+  .flow-arrow {
+    transform: rotate(90deg);
+  }
+
+  .charter-grid,
+  .object-columns,
+  .record-groups dl div,
+  .record-item summary,
+  .record-fields div,
+  .glossary-list div {
+    grid-template-columns: 1fr;
+  }
+
+}
+
+@media (max-width: 520px) {
+  .sidebar nav {
+    grid-template-columns: 1fr;
+  }
+
+  h1 {
+    font-size: 2.25rem;
+  }
+
+  h2 {
+    font-size: 1.85rem;
+  }
+}