:root {
  color-scheme: light;
  --page: #f6f8fb; --panel: #ffffff; --surface: #eef2f6;
  --text: #17212f; --muted: #526174; --action: #175cd3; --action-hover: #1247a5; --on-action: #ffffff;
  --divider: #d6dee8; --control-border: #7a8899; --selection: #dce9ff; --focus: #175cd3;
  --success: #216e43; --warning: #765100; --danger: #b12a3c; --information: #234f82;
  --sans: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif; --mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  --feedback: 110ms; --productive: cubic-bezier(.2, 0, .38, .9); --row-padding: 16px; --specimen-padding: 24px; --cell-padding: 16px;
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  color: var(--text); background: var(--page);
}
:root[data-density='compact'] { --row-padding: 12px; --specimen-padding: 16px; --cell-padding: 12px; }
:root[data-appearance='dark'] {
  color-scheme: dark;
  --page: #0c121c; --panel: #141e2c; --surface: #1c2a3d;
  --text: #e9eff7; --muted: #aab9cc; --action: #88b7ff; --action-hover: #a6c9ff; --on-action: #102443;
  --divider: #33445b; --control-border: #7789a3; --selection: #26456d; --focus: #b9d2ff;
  --success: #94d3a2; --warning: #f2cd84; --danger: #ffb2bd; --information: #aacdff;
}
@media (prefers-color-scheme: dark) {
  :root[data-appearance='system'] {
    color-scheme: dark;
    --page: #0c121c; --panel: #141e2c; --surface: #1c2a3d;
    --text: #e9eff7; --muted: #aab9cc; --action: #88b7ff; --action-hover: #a6c9ff; --on-action: #102443;
    --divider: #33445b; --control-border: #7789a3; --selection: #26456d; --focus: #b9d2ff;
    --success: #94d3a2; --warning: #f2cd84; --danger: #ffb2bd; --information: #aacdff;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.015em; font-weight: 600; }
h2 { font-size: clamp(1.625rem, 2.2vw, 2rem); letter-spacing: -.025em; font-weight: 600; }
h3 { font-size: 1.125rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: .875rem; font-weight: 600; }
p { text-wrap: pretty; }
code, .technical { font-family: var(--mono); font-size: .8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
a { color: var(--action); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--action-hover); }
button, input, select { font: inherit; }
button, select, summary, input[type='checkbox'] { cursor: pointer; }
button { color: inherit; }
button:disabled, select:disabled, input:disabled { cursor: default; }
button:disabled, select:disabled, input:disabled { color: var(--muted); background: var(--surface); border-color: var(--control-border); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h5[tabindex='-1']:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { color: var(--text); background: var(--selection); }
.container { width: min(1440px, calc(100% - 64px)); margin-inline: auto; }
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; border-block-end: 1px solid var(--divider); }
.atlas-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; min-height: 44px; }
.atlas-mark { width: 30px; height: 30px; flex: 0 0 30px; fill: var(--action); }
.meta, .support { color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.meta span { margin-inline: 6px; }
.eyebrow, .small-label { font-size: .75rem; font-weight: 600; line-height: 1.5; color: var(--muted); }
.eyebrow { letter-spacing: .06em; text-transform: uppercase; }
.small-label { letter-spacing: .025em; }
.preview-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 64px; padding-block: 48px; align-items: start; }
.intro-copy .eyebrow { margin-block-end: 12px; }
.intro-description { max-width: 55ch; color: var(--muted); margin-block: 20px 24px; }
.action-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--control-border); border-radius: 4px; font-size: .875rem; line-height: 1.4; font-weight: 600; text-align: center; text-decoration: none; background: var(--panel); color: var(--text); transition: background-color var(--feedback) var(--productive), border-color var(--feedback) var(--productive), color var(--feedback) var(--productive); }
.button.primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
.button.primary:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-hover); color: var(--on-action); }
.button.secondary:hover:not(:disabled) { background: var(--surface); border-color: var(--text); color: var(--text); }
.button.danger-button { color: var(--danger); border-color: var(--danger); }
.button.danger-button:hover:not(:disabled) { background: var(--surface); }
.button:disabled { color: var(--muted); background: var(--surface); border-color: var(--control-border); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 600; }
.preview-settings { padding: 20px; border: 1px solid var(--divider); border-radius: 4px; background: var(--panel); }
.preview-settings > .small-label { margin-block-end: 14px; }
.settings-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: .875rem; font-weight: 600; }
input[type='text'], input[type='search'], select { width: 100%; min-height: 44px; min-width: 0; padding: 10px 12px; color: var(--text); background: var(--panel); border: 1px solid var(--control-border); border-radius: 4px; }
select { padding-inline-end: 28px; }
input::placeholder { color: var(--muted); opacity: 1; }
.checkbox-label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .8125rem; cursor: pointer; }
.checkbox-label input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--action); }
.preview-settings .checkbox-label { margin-block-start: 10px; }
.preview-settings .support + .support { margin-block-start: 6px; }
.section-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; padding-block: 14px; border-block: 1px solid var(--divider); }
.section-nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font-size: .875rem; font-weight: 600; }
.section-nav a:hover { color: var(--action); }
.section-nav a:last-child { margin-inline-start: auto; }
.nav-number { font-family: var(--mono); color: var(--muted); font-size: .75rem; }
.section-block { padding-block: 40px; scroll-margin-block-start: 24px; }
.section-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-block-end: 20px; }
.section-heading .eyebrow { margin-block-end: 10px; }
.simulation-label { color: var(--muted); font-size: .75rem; line-height: 1.5; text-align: end; }
.workspace-introduction { max-width: 90ch; margin-block-end: 24px; color: var(--muted); }
.workspace-shell { border: 1px solid var(--divider); border-radius: 4px; background: var(--panel); overflow: clip; }
.workspace-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding: 20px 24px; border-block-end: 1px solid var(--divider); }
.workspace-top h3 { margin-block-start: 4px; }
.connection-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.connection-label { color: var(--muted); font-size: .8125rem; }
.connection-note { border-block-end: 1px solid var(--divider); background: var(--surface); color: var(--text); padding: 16px 24px; font-size: .875rem; }
.workspace-grid { display: grid; grid-template-columns: 180px minmax(280px, 1fr) minmax(350px, 1.15fr); }
.context-pane { padding: 24px 16px; background: var(--surface); border-inline-end: 1px solid var(--divider); min-width: 0; }
.context-pane h4 { margin-block: 8px 10px; }
.context-description { font-size: .875rem; color: var(--muted); }
.context-list { display: grid; gap: 16px; padding-block: 24px; }
dt { color: var(--muted); font-size: .75rem; }
dd { margin: 4px 0 0; font-size: .875rem; overflow-wrap: anywhere; }
.context-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: .8125rem; font-weight: 600; }
.architecture-note { margin-block-start: 20px; border-block-start: 1px solid var(--divider); padding-block-start: 10px; }
summary { min-height: 44px; padding-block: 10px; font-size: .875rem; font-weight: 600; color: var(--text); }
.architecture-note summary { font-size: .8125rem; }
.architecture-note p { font-size: .8125rem; margin-block: 8px 12px; }
.queue-pane { min-width: 0; border-inline-end: 1px solid var(--divider); }
.pane-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 64px; padding: 14px 20px; border-block-end: 1px solid var(--divider); }
.run-filters { padding: 16px 20px; border-block-end: 1px solid var(--divider); display: grid; gap: 12px; }
.filter-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.filter-line .field { flex: 1 1 150px; }
.filter-line .button { flex: 0 1 auto; }
.run-list { list-style: none; padding: 0; }
.run-row { padding: var(--row-padding) 20px; border-block-end: 1px solid var(--divider); border-inline-start: 3px solid transparent; transition: background-color var(--feedback) var(--productive), border-color var(--feedback) var(--productive); }
.run-row[data-selected='true'] { background: var(--selection); border-inline-start-color: var(--action); }
.run-row h5 { margin-block: 10px 6px; }
.run-topline, .run-footline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.run-context { font-size: .8125rem; color: var(--muted); }
.run-footline { margin-block-start: 4px; }
.inspect-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 2px; border: 0; background: transparent; color: var(--action); text-decoration: underline; text-underline-offset: .2em; font-size: .8125rem; font-weight: 600; }
.inspect-link:hover:not(:disabled) { color: var(--action-hover); }
.inspect-link:disabled { color: var(--muted); background: transparent; }
.inspect-link[aria-current='true'] { text-decoration-thickness: 2px; }
.queue-note { padding: 16px 20px; }
.empty-state { padding: 32px 20px; border-block-end: 1px solid var(--divider); }
.empty-state p { margin-block-start: 10px; color: var(--muted); font-size: .875rem; }
.detail-pane { min-width: 0; }
.detail-pane-heading { padding-block: 10px; }
.run-detail { padding: 24px; }
.run-detail + .run-detail { border-block-start: 1px solid var(--divider); }
.run-detail > .small-label { margin-block-end: 10px; }
.run-detail h5 { font-size: 1.375rem; letter-spacing: -.02em; margin-block-end: 14px; }
.detail-description { color: var(--muted); }
.state-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding-block: 24px; }
.evidence-note { padding: 16px; background: var(--surface); border-radius: 4px; }
.evidence-note p + p { margin-block-start: 8px; }
.run-detail h6 { margin-block: 24px 12px; }
.event-list { list-style: none; padding: 0; display: grid; gap: 16px; }
.event-list li { display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); gap: 12px; }
.event-list time, .event-step { font-family: var(--mono); font-size: .75rem; line-height: 1.75; color: var(--muted); font-variant-numeric: tabular-nums; }
.event-list strong { font-size: .8125rem; font-weight: 600; }
.event-list p { margin-block-start: 4px; font-size: .8125rem; color: var(--muted); }
.command-section { border-block-start: 1px solid var(--divider); margin-block-start: 24px; }
.command-section .action-group { margin-block-start: 16px; }
.detail-disclosure { margin-block-start: 16px; }
.detail-disclosure p { padding-block: 8px; }
.no-script { padding: 16px 24px; border-block-start: 1px solid var(--divider); background: var(--surface); font-size: .875rem; }
.workspace-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 24px 0; }
.principle-index { font-family: var(--mono); font-size: .75rem; color: var(--action); }
.workspace-principles h3 { font-size: 1rem; margin-block: 8px; }
.workspace-principles p { font-size: .875rem; color: var(--muted); }
.specimen { border-block-start: 1px solid var(--divider); }
.specimen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.specimen-card { background: var(--panel); border: 1px solid var(--divider); border-radius: 4px; padding: var(--specimen-padding); min-width: 0; }
.specimen-card h3 { margin-block: 8px 16px; }
.specimen-card p + p { margin-block-start: 12px; }
.type-display { font-size: 2.75rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; margin-block-end: 20px; }
.specimen-card .action-group { margin-block: 16px 8px; }
.specimen-card .checkbox-label { margin-block-end: 16px; }
.note { background: var(--surface); border-radius: 4px; padding: 16px; font-size: .875rem; }
.note strong { font-weight: 600; }
.note p { margin-block-start: 6px; }
.status { font-size: .8125rem; font-weight: 600; }
.status.success { color: var(--success); }
.status.warning { color: var(--warning); }
.status.danger { color: var(--danger); }
.status.information { color: var(--information); }
.status-list { list-style: none; padding: 0; display: grid; gap: 0; margin-block: 0 16px; }
.status-list li { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-block: 12px; border-block-end: 1px solid var(--divider); font-size: .8125rem; }
.status-list li > span:last-child { color: var(--muted); }
.data-specimen { margin-block-start: 32px; }
.data-specimen .section-heading { margin-block-end: 16px; }
.table-region { max-width: 100%; overflow-x: auto; border: 1px solid var(--divider); border-radius: 4px; background: var(--panel); }
table { width: 100%; min-width: 620px; border-collapse: collapse; text-align: start; font-size: .875rem; }
caption { padding: 16px; text-align: start; color: var(--muted); font-size: .8125rem; }
thead { background: var(--surface); }
th, td { padding: var(--cell-padding) 16px; border-block-start: 1px solid var(--divider); line-height: 1.5; }
th { font-weight: 600; }
th[scope='row'] { font-weight: 500; }
.number-cell { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.preview-footer { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, 1fr); gap: 64px; padding-block: 40px 48px; border-block-start: 1px solid var(--divider); }
.preview-footer h2 { margin-block: 12px 20px; }
.preview-footer p { max-width: 68ch; }
.preview-footer .support { margin-block-start: 16px; }
.preview-footer nav { display: grid; align-content: start; }
.preview-footer nav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; font-size: .875rem; }
.skip-link { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 5; padding: 12px 16px; color: var(--on-action); background: var(--action); border-radius: 4px; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.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; }
@media (max-width: 1120px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .context-pane { grid-column: 1 / -1; border-inline-end: 0; border-block-end: 1px solid var(--divider); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 32px; padding: 20px; }
  .context-pane > .small-label, .context-pane h4, .context-description { grid-column: 1; }
  .context-pane h4 { margin: 0; }
  .context-list { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 0; }
  .context-link { display: none; }
  .architecture-note { grid-column: 1 / -1; margin-block-start: 8px; }
  .workspace-principles { gap: 20px; }
}
@media (max-width: 820px) {
  .container { width: calc(100% - 40px); }
  .preview-header { align-items: start; flex-direction: column; gap: 8px; }
  .preview-intro { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; }
  .preview-settings { max-width: 560px; }
  .workspace-grid { grid-template-columns: 1fr; }
  .queue-pane { border-inline-end: 0; border-block-end: 1px solid var(--divider); }
  .context-pane { grid-template-columns: 1fr; }
  .context-list { grid-column: 1; grid-row: auto; margin-block-start: 12px; }
  .workspace-principles, .specimen-grid { grid-template-columns: 1fr; }
  .workspace-principles { gap: 24px; }
  .preview-footer { grid-template-columns: 1fr; gap: 28px; }
  .section-nav { gap: 6px 24px; }
  .section-nav a:last-child { margin-inline-start: 0; }
}
@media (max-width: 480px) {
  .container { width: calc(100% - 32px); }
  .meta { max-width: 29ch; }
  .settings-fields { grid-template-columns: 1fr; }
  .preview-settings { padding: 16px; }
  .section-block { padding-block: 32px; }
  .simulation-label { text-align: start; }
  .workspace-top { padding: 16px; }
  .connection-controls { align-items: start; flex-direction: column; }
  .context-pane, .pane-heading, .run-filters, .queue-note, .empty-state { padding-inline: 16px; }
  .run-row { padding-inline: 13px 16px; }
  .run-detail { padding: 20px 16px; }
  .state-grid { gap: 16px; }
  .connection-note { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
:root[data-motion='off'] *, :root[data-motion='off'] *::before, :root[data-motion='off'] *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
@media (forced-colors: active) {
  :focus-visible, h5[tabindex='-1']:focus { outline: 3px solid Highlight; }
  .atlas-mark { fill: LinkText; }
  .run-row[data-selected='true'] { border-inline-start-color: Highlight; }
  .button.primary { border-color: ButtonText; }
}