AEGISLAYER/runtime-state-visualizer

1:root {2  --bg: #f4f5ef;3  --surface: rgba(255, 255, 255, 0.9);4  --surface-strong: #fbfbf7;5  --ink: #17221c;6  --muted: #445149;7  --line: #cfd6cb;8  --brand: #18543d;9  --brand-strong: #103c2b;10  --signal: #bd7b22;11  --signal-strong: #865410;12  --focus: #0f6fd6;13  --shadow: 0 20px 50px rgba(17, 26, 19, 0.12);14  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;15  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;16  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;17}18 19* {20  box-sizing: border-box;21}22 23html {24  scroll-behavior: smooth;25}26 27body {28  margin: 0;29  color: var(--ink);30  background:31    radial-gradient(circle at top left, rgba(188, 222, 199, 0.65), transparent 32%),32    radial-gradient(circle at right 15%, rgba(241, 213, 172, 0.45), transparent 28%),33    linear-gradient(180deg, #f7f8f2 0%, #eef1ea 100%);34  font-family: var(--sans);35}36 37a {38  color: var(--brand-strong);39}40 41a:focus,42button:focus,43select:focus,44input:focus {45  outline: 3px solid var(--focus);46  outline-offset: 3px;47}48 49.skip-link {50  position: absolute;51  left: -9999px;52  top: 0;53}54 55.skip-link:focus {56  left: 1rem;57  top: 1rem;58  z-index: 100;59  padding: 0.75rem 1rem;60  border-radius: 999px;61  background: #ffffff;62}63 64.hero {65  position: relative;66  overflow: hidden;67  padding: 4rem 1.25rem 3rem;68  background: linear-gradient(135deg, #102b21, #20563e 50%, #87632c 100%);69  color: #f6f8f1;70}71 72.hero-backdrop {73  position: absolute;74  inset: 0;75  background:76    linear-gradient(75deg, rgba(255, 255, 255, 0.05), transparent 45%),77    repeating-linear-gradient(135deg, transparent, transparent 18px, rgba(255, 255, 255, 0.04) 18px, rgba(255, 255, 255, 0.04) 19px);78}79 80.hero-inner {81  position: relative;82  max-width: 1120px;83  margin: 0 auto;84}85 86.eyebrow {87  margin: 0 0 0.5rem;88  text-transform: uppercase;89  letter-spacing: 0.12em;90  font-size: 0.78rem;91  font-weight: 700;92}93 94h1,95h2,96h3 {97  font-family: var(--serif);98}99 100h1 {101  max-width: 14ch;102  margin: 0;103  font-size: clamp(2.4rem, 5vw, 4.6rem);104  line-height: 0.95;105}106 107.lede {108  max-width: 68ch;109  font-size: 1.05rem;110  line-height: 1.7;111}112 113.disclaimer {114  max-width: 72ch;115  padding-left: 1rem;116  border-left: 4px solid rgba(255, 222, 168, 0.95);117}118 119.action-row,120.card-actions,121.footer-links,122.bullet-list,123.space-nav,124.summary-grid,125.space-grid,126.section-body {127  display: flex;128  flex-wrap: wrap;129  gap: 1rem;130}131 132.button {133  display: inline-flex;134  align-items: center;135  justify-content: center;136  min-height: 44px;137  padding: 0.8rem 1.1rem;138  border-radius: 999px;139  border: 1px solid transparent;140  text-decoration: none;141  font-weight: 700;142}143 144.button.primary {145  background: #fff0;146  color: #f8fbf7;147  border-color: rgba(255, 255, 255, 0.55);148}149 150.button.secondary {151  background: #f5f7f2;152  color: var(--brand-strong);153}154 155.button.ghost {156  background: transparent;157  border-color: rgba(255, 255, 255, 0.35);158  color: #f8fbf7;159}160 161.page-shell {162  display: grid;163  grid-template-columns: 1fr;164  gap: 1rem;165  max-width: 1200px;166  margin: -1.75rem auto 0;167  padding: 0 1rem 2rem;168}169 170.panel {171  border: 1px solid var(--line);172  border-radius: 24px;173  background: var(--surface);174  box-shadow: var(--shadow);175}176 177.sidebar,178.summary-panel,179.section-panel {180  padding: 1.25rem;181}182 183.space-nav,184.bullet-list {185  list-style: none;186  padding: 0;187  margin: 0;188}189 190.space-nav a,191.sidebar-block a {192  display: block;193  padding: 0.7rem 0.8rem;194  border-radius: 16px;195  text-decoration: none;196}197 198.space-nav a[aria-current="page"] {199  background: #e8eee8;200  font-weight: 700;201}202 203.sidebar-block {204  display: grid;205  gap: 0.4rem;206  margin-top: 1.5rem;207}208 209.content {210  display: grid;211  gap: 1rem;212}213 214.summary-grid > article,215.space-card,216.data-card,217.interactive-card {218  flex: 1 1 220px;219  min-width: 0;220  padding: 1rem;221  border-radius: 18px;222  background: var(--surface-strong);223  border: 1px solid var(--line);224}225 226.space-card h3,227.data-card h3,228.interactive-card h3 {229  margin-top: 0;230}231 232.space-emoji {233  margin: 0;234  font-size: 1.6rem;235}236 237.section-header {238  margin-bottom: 1rem;239}240 241.section-body {242  align-items: stretch;243}244 245.interactive-region {246  display: grid;247  gap: 1rem;248  width: 100%;249}250 251.selector-row {252  display: grid;253  gap: 0.5rem;254}255 256label,257select,258input,259textarea {260  font: inherit;261}262 263select {264  width: 100%;265  min-height: 44px;266  padding: 0.75rem;267  border: 1px solid var(--line);268  border-radius: 14px;269  background: #ffffff;270}271 272.tag-row,273.timeline,274.definition-list {275  display: flex;276  flex-wrap: wrap;277  gap: 0.5rem;278}279 280.tag,281.pill {282  display: inline-flex;283  align-items: center;284  min-height: 36px;285  padding: 0.35rem 0.75rem;286  border-radius: 999px;287  border: 1px solid #d7ddd2;288  background: #eef4ee;289  font-size: 0.92rem;290}291 292.code-block {293  margin: 0;294  padding: 1rem;295  border-radius: 18px;296  background: #12251a;297  color: #d9efe0;298  font-family: var(--mono);299  overflow-x: auto;300}301 302.footer {303  display: flex;304  flex-wrap: wrap;305  justify-content: space-between;306  gap: 1rem;307  max-width: 1200px;308  margin: 0 auto;309  padding: 0 1rem 2rem;310}311 312@media (min-width: 960px) {313  .page-shell {314    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);315  }316 317  .sidebar {318    position: sticky;319    top: 1rem;320    align-self: start;321  }322}323 324@media (prefers-reduced-motion: reduce) {325  html {326    scroll-behavior: auto;327  }328 329  *,330  *::before,331  *::after {332    animation: none !important;333    transition: none !important;334  }335}336