:root {
  color-scheme: light;
  --paper: #ebe8de;
  --paper-deep: #dedacf;
  --sheet: #f5f2e9;
  --ink: #191916;
  --ink-soft: #302f2a;
  --muted: #69665e;
  --rule: #918d82;
  --rule-soft: #c4c0b5;
  --accent: #7b2d24;
  --accent-dark: #5f211b;
  --success: #315d36;
  --warning: #8a5a0b;
  --danger: #8b211c;
  --focus: #174b91;
  --max-width: 1180px;
  font-family: Verdana, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  min-width: 320px;
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body,
button,
input { font: inherit; }

button,
input { color: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { border: 0; }

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.topbar {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 10px max(20px, calc((100vw - var(--max-width)) / 2));
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  font: 700 12px/1 "Courier New", monospace;
  letter-spacing: .08em;
}

.brand-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}

.brand-copy b {
  font-family: Arial, sans-serif;
  font-size: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.brand-copy small {
  color: var(--muted);
  font: 400 10px/1.2 "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.local-badge,
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 400 11px/1.3 "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.local-badge i {
  width: 7px;
  height: 7px;
  background: var(--success);
}

.back-link {
  min-height: 30px;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
}

main {
  width: min(calc(100% - 40px), var(--max-width));
  margin: 0 auto;
  padding-bottom: 84px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, .65fr);
  gap: clamp(48px, 8vw, 110px);
  align-items: end;
  padding: 68px 0 80px;
}

.hero-copy { min-width: 0; }

.eyebrow,
.micro-label {
  margin: 0;
  color: var(--accent);
  font: 400 11px/1.4 "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.eyebrow { margin-bottom: 17px; }
.eyebrow > span { color: var(--ink); }

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.12;
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(44px, 6.3vw, 76px);
  letter-spacing: -.035em;
}

h1 em {
  color: var(--accent);
  font-style: normal;
}

.lede {
  max-width: 720px;
  margin: 27px 0 0;
  color: #3c3a34;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.52;
}

.promise-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 720px;
  margin-top: 34px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.promise-list span {
  min-width: 0;
  padding: 10px 12px 10px 0;
  color: var(--muted);
  font: 400 10px/1.4 "Courier New", monospace;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.promise-list span + span {
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}

.system-card {
  min-width: 0;
  padding: 24px;
  color: #f0eee7;
  background: #252520;
}

.system-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #646159;
}

.system-card .micro-label { color: #c98e83; }

.system-card-head h2 {
  margin: 7px 0 0;
  font-size: 25px;
}

.pulse {
  width: 9px;
  height: 9px;
  margin-top: 7px;
  background: #7c9b62;
}

.layer-list {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.layer-list li {
  display: grid;
  grid-template-columns: minmax(102px, .72fr) minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #4e4c45;
}

.layer-list li:last-child { border-bottom: 0; }

.layer-list b {
  color: #d9d6cd;
  font: 700 9px/1.35 "Courier New", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.layer-list span {
  min-width: 0;
  color: #bbb7ac;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.runtime-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  margin-top: 17px;
  padding: 12px 13px;
  border: 1px solid #646159;
  background: #2d2d28;
}

.status-light {
  width: 9px;
  height: 9px;
  border: 1px solid #aaa69d;
  background: #77736b;
}

.runtime-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.runtime-copy b {
  overflow: hidden;
  color: #f3f0e7;
  font-size: 12px;
  text-overflow: ellipsis;
}

.runtime-copy small {
  color: #b9b5aa;
  font-size: 10px;
  line-height: 1.45;
}

.loader {
  width: 15px;
  height: 15px;
  border: 1px solid #77736b;
  border-top-color: #eee9dd;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.runtime-banner.ok { border-color: #6d8569; }
.runtime-banner.ok .status-light { border-color: #9fbd83; background: #688553; }
.runtime-banner.warn { border-color: #8b7044; }
.runtime-banner.warn .status-light { border-color: #d2a75d; background: #c28e35; }
.runtime-banner.fail { border-color: #9b514a; }
.runtime-banner.fail .status-light { border-color: #d68177; background: #a43f37; }
.runtime-banner:not(.loading) .loader { display: none; }

/* Agent guide: scenarios and dialogue */
.site-nav { display: flex; gap: 14px; font: 400 10px/1.3 "Courier New", monospace; text-transform: uppercase; letter-spacing: .04em; }
.site-nav a { color: var(--muted); text-decoration: none; }
.meeting-section, .cases-section, .start-section, .resources-section { padding: 60px 0; border-top: 1px solid var(--ink); }
.section-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--accent); font: 400 10px/1.4 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.section-kicker i { width: 54px; height: 1px; background: currentColor; }.section-kicker span { color: var(--ink); }
.guide-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr); gap: 52px; align-items: end; margin-bottom: 32px; }
.guide-intro h2, .capability-section h2, .security-section h2, .resources-section h2 { margin: 0; font-size: clamp(34px, 4.5vw, 55px); letter-spacing: -.025em; }
.guide-intro p, .capability-section > div > p { margin: 0; color: var(--muted); font-size: 14px; }
.dialogue-card { max-width: 920px; padding: clamp(20px, 4vw, 38px); border: 1px solid var(--ink); background: var(--sheet); }
.dialogue-label { margin-bottom: 22px; color: var(--accent); font: 400 10px/1.4 "Courier New", monospace; letter-spacing: .07em; }
.message { max-width: 780px; margin-top: 14px; padding: 16px 18px; border-left: 3px solid var(--accent); background: var(--paper-deep); }
.message.agent { margin-left: auto; border-color: #2f6945; background: #f4f8ed; color: #172319; box-shadow: inset 0 0 0 1px rgba(47, 105, 69, .18); }.message.agent b { color: #245436; }.message.agent p { color: #172319; font-weight: 500; }.message b { display: block; margin-bottom: 5px; font: 400 10px/1.3 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }.message p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.46; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.case-card { display: flex; min-width: 0; flex-direction: column; min-height: 340px; padding: 22px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: rgba(255,255,255,.1); }
.case-card > span { color: var(--accent); font: 400 10px/1.4 "Courier New", monospace; letter-spacing: .07em; }.case-card h3 { margin: 30px 0 12px; font-size: 27px; }.case-card p { margin: 0; color: var(--ink-soft); }.case-card blockquote { margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); color: var(--muted); font: italic 14px/1.5 Georgia, "Times New Roman", serif; }
.capability-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1fr); gap: clamp(40px, 9vw, 120px); padding: 70px 0; color: #f0eee7; background: #252520; box-shadow: 0 0 0 100vmax #252520; clip-path: inset(0 -100vmax); }
.capability-section .eyebrow { color: #c98e83; }.capability-section .eyebrow span { color: #f0eee7; }.capability-section > div > p { margin-top: 20px; color: #c5c1b7; }.capability-list { margin: 0; padding: 0; border-top: 1px solid #646159; list-style: none; }.capability-list li { display: grid; grid-template-columns: minmax(140px, .7fr) 1fr; gap: 15px; padding: 15px 0; border-bottom: 1px solid #646159; }.capability-list b { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; }.capability-list span { color: #b9b5aa; font-size: 12px; }
.start-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }.start-steps li { min-width: 0; padding: 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }.start-steps li:first-child { border-left: 1px solid var(--rule); }.start-steps > li > span { color: var(--accent); font: 400 10px/1 "Courier New", monospace; }.start-steps h3 { margin: 30px 0 10px; font-size: 24px; }.start-steps p { margin: 0; color: var(--muted); font-size: 12px; }
.security-section { display: grid; grid-template-columns: minmax(0, .78fr) minmax(360px, 1fr); gap: clamp(40px, 8vw, 105px); padding: 70px 0; border-top: 1px solid var(--ink); }.security-list { border-top: 1px solid var(--ink); }.security-list p { display: grid; grid-template-columns: 160px 1fr; gap: 20px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--rule); }.security-list b { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; }.security-list span { color: var(--muted); font-size: 12px; }
.resource-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 25px; border: 1px solid var(--ink); }.resource-links > div { display: grid; align-content: start; min-width: 0; gap: 9px; min-height: 138px; padding: 18px; }.resource-links > div + div { border-left: 1px solid var(--ink); }.resource-links b { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; overflow-wrap: anywhere; }.resource-links span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px max(20px, calc((100vw - var(--max-width)) / 2)); border-top: 1px solid var(--ink); color: var(--muted); font: 400 10px/1.4 "Courier New", monospace; text-transform: uppercase; letter-spacing: .05em; }.sticky-agent-cta { position: fixed; z-index: 5; right: 22px; bottom: 20px; display: grid; grid-template-columns: 1fr auto; gap: 1px 18px; min-width: 205px; padding: 11px 13px; color: var(--paper); background: var(--accent); box-shadow: 3px 3px 0 var(--ink); text-decoration: none; }.sticky-agent-cta span { font: 400 9px/1 "Courier New", monospace; text-transform: uppercase; opacity: .75; }.sticky-agent-cta b { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; }.sticky-agent-cta i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; font-style: normal; }
@media (max-width: 800px) { .topbar { align-items: flex-start; }.topbar-actions { justify-content: flex-end; }.local-badge { display: none; }.site-nav { flex-wrap: wrap; justify-content: flex-end; gap: 7px 11px; }.guide-intro, .capability-section, .security-section { grid-template-columns: 1fr; gap: 22px; }.case-grid { grid-template-columns: 1fr 1fr; }.start-steps { grid-template-columns: 1fr 1fr; }.start-steps li:first-child { border-left: 0; }.resource-links { grid-template-columns: 1fr; }.resource-links > div + div { border-top: 1px solid var(--ink); border-left: 0; }.footer { padding-bottom: 84px; } }
@media (max-width: 540px) { main { width: min(calc(100% - 28px), var(--max-width)); }.brand-copy small { display: none; }.hero { grid-template-columns: 1fr; gap: 32px; padding: 44px 0 52px; }.promise-list { grid-template-columns: 1fr; }.promise-list span + span { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }.case-grid, .start-steps { grid-template-columns: 1fr; }.case-card { min-height: 0; }.message { padding: 14px; }.message p { font-size: 16px; }.layer-list li { grid-template-columns: 1fr; gap: 4px; }.capability-list li, .security-list p { grid-template-columns: 1fr; gap: 5px; }.meeting-section, .cases-section, .start-section, .resources-section { padding: 44px 0; }.sticky-agent-cta { right: 14px; bottom: 14px; }.footer { display: grid; } }

@keyframes spin { to { transform: rotate(360deg); } }

.system-facts {
  display: grid;
  margin-top: 12px;
}

.system-facts > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #535149;
}

.system-facts > div:last-child { border-bottom: 0; }
.system-facts span { color: #a9a59b; font-size: 10px; }

.system-facts b {
  color: #e2dfd6;
  font: 400 9px/1.5 "Courier New", monospace;
  text-align: right;
}

.boot-message {
  margin-bottom: 42px;
  padding: 14px 16px;
  border: 1px solid var(--warning);
  color: #5d3c08;
  background: #efe2c4;
}

.workspace-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 23px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}

.workspace-heading .eyebrow { margin-bottom: 10px; }

.workspace-heading h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 45px);
}

.workspace-heading > p {
  max-width: 370px;
  margin: 0;
  color: var(--muted);
  font: 400 11px/1.5 "Courier New", monospace;
  text-align: right;
}

.grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(320px, .72fr);
  gap: 22px;
  align-items: start;
}

.panel {
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, .12);
}

.configurator,
.fleet-panel { padding: clamp(22px, 3vw, 34px); }

.fleet-panel {
  position: sticky;
  top: 18px;
  background: var(--paper-deep);
}

.section-heading {
  display: flex;
  align-items: start;
  gap: 15px;
  padding-bottom: 23px;
  border-bottom: 1px solid var(--ink);
}

.section-heading .step {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  font: 400 11px/1 "Courier New", monospace;
}

.section-heading h2 {
  margin: 5px 0 3px;
  font-size: 28px;
}

.section-heading p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.form-section {
  min-width: 0;
  margin: 0;
  padding: 31px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
}

.form-section.no-divider { border-bottom: 0; }

.form-section legend {
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.25;
}

.form-section legend span {
  display: inline-block;
  min-width: 25px;
  margin-right: 9px;
  color: var(--accent);
  font: 400 11px/1 "Courier New", monospace;
  vertical-align: middle;
}

.section-note {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 11px;
}

.field-grid,
.choice-grid {
  display: grid;
  gap: 14px;
}

.field-grid.two,
.choice-grid.two,
.two-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.field > span {
  color: var(--ink-soft);
  font: 400 10px/1.35 "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.field > small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid #77736a;
  border-radius: 0;
  outline: 0;
  color: var(--ink);
  background: var(--sheet);
  font-size: 12px;
}

.field input::placeholder { color: #918d84; }

.field input:focus {
  border-color: var(--focus);
  box-shadow: inset 3px 0 0 var(--focus);
}

.choice {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  cursor: pointer;
}

.choice:hover { border-color: var(--ink); }

.choice:has(input:checked) {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-indicator {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border: 1px solid var(--rule);
  background: transparent;
}

.choice input:checked + .choice-indicator {
  border-color: #d8d3c7;
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--ink);
}

.choice-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.choice-copy b {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
}

.choice-copy b i {
  color: var(--accent);
  font: 400 8px/1.3 "Courier New", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.choice:has(input:checked) .choice-copy b i { color: #d89b90; }

.choice-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.choice:has(input:checked) .choice-copy small { color: #c5c1b7; }

.profile-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.profile-tabs label {
  position: relative;
  min-width: 0;
  margin-left: -1px;
  cursor: pointer;
}

.profile-tabs label:first-child { margin-left: 0; }

.profile-tabs input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.profile-tabs label > span {
  display: grid;
  min-height: 62px;
  align-content: center;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  text-align: center;
}

.profile-tabs b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 400;
}

.profile-tabs small { color: var(--muted); font-size: 8px; }

.profile-tabs input:checked + span {
  position: relative;
  z-index: 1;
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.profile-tabs input:checked + span small { color: #c4c0b5; }
.profile-tabs input:disabled + span { opacity: .38; cursor: not-allowed; }

.resource-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 15px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.metric {
  display: grid;
  gap: 2px;
  padding: 13px 10px;
  text-align: center;
}

.metric + .metric { border-left: 1px solid var(--rule); }

.metric b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 400;
}

.metric small {
  color: var(--muted);
  font: 400 8px/1.2 "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.advanced-resources { margin-top: 15px; }

.info-note {
  display: grid;
  grid-template-columns: 125px 1fr;
  gap: 17px;
  margin-top: 17px;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.info-note b {
  color: var(--accent);
  font: 400 10px/1.45 "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.info-note span { color: var(--muted); font-size: 10px; line-height: 1.55; }

.provider-list {
  display: grid;
  border-top: 1px solid var(--rule);
}

.provider {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

.provider:hover { background: rgba(255, 255, 255, .2); }

.provider input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.checkmark {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--sheet);
}

.provider input:checked + .checkmark { background: var(--accent); }

.provider input:checked + .checkmark::after {
  width: 6px;
  height: 6px;
  background: var(--sheet);
  content: "";
}

.provider > span:nth-child(3) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.provider b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 400;
}

.provider small { color: var(--muted); font-size: 9px; }

.provider > i {
  color: var(--accent);
  font: 400 8px/1.3 "Courier New", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.credential {
  margin: 0 0 14px 28px;
  padding: 13px;
  border-left: 3px solid var(--accent);
  background: var(--paper-deep);
}

.credential.two-fields {
  display: grid;
  gap: 12px;
}

.toggle {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.toggle > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-track {
  position: relative;
  width: 38px;
  height: 20px;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
}

.toggle-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--muted);
  transition: translate .12s linear;
}

.toggle input:checked + .toggle-track { background: var(--ink); }
.toggle input:checked + .toggle-track i { translate: 18px 0; background: #d7d2c5; }

.toggle > span:last-child { display: grid; gap: 2px; }
.toggle b { font-size: 11px; }
.toggle small { color: var(--muted); font-size: 9px; }
#telegram-real { margin-top: 18px; }

.alert {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--danger);
  font-size: 11px;
}

.alert.error { color: var(--danger); background: #ead3cf; }

.submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}

.submit-row > div { display: grid; gap: 3px; }
.submit-row b { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 400; }
.submit-row span { color: var(--muted); font-size: 9px; }

.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font: 700 10px/1.2 Verdana, Arial, sans-serif;
  cursor: pointer;
}

.button:hover { color: var(--paper); background: var(--ink); }

.button:disabled {
  cursor: wait;
  opacity: .5;
}

.button.primary {
  min-height: 46px;
  padding-inline: 18px;
  border-color: var(--accent);
  color: var(--paper);
  background: var(--accent);
}

.button.primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.button.primary i { font: 400 17px/1 Georgia, serif; }
.button.secondary { border-color: var(--rule); }
.button.danger { border-color: var(--danger); color: var(--paper); background: var(--danger); }
.button.wide { width: 100%; }
.button.compact { min-height: 36px; margin-top: 12px; }

.fleet-heading { margin-bottom: 18px; }

.capacity {
  display: grid;
  gap: 10px;
  margin-bottom: 23px;
}

.capacity-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.capacity-title b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 400;
}

.capacity-title span {
  color: var(--muted);
  font: 400 8px/1.3 "Courier New", monospace;
}

.capacity-row {
  display: grid;
  grid-template-columns: 34px 1fr 78px;
  align-items: center;
  gap: 9px;
  font: 400 8px/1.3 "Courier New", monospace;
}

.capacity-row > span { color: var(--muted); }
.capacity-row > b { font-weight: 400; text-align: right; }

.capacity-row progress {
  width: 100%;
  height: 8px;
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.capacity-row progress::-webkit-progress-bar { background: var(--sheet); }
.capacity-row progress::-webkit-progress-value { background: var(--accent); }
.capacity-row progress::-moz-progress-bar { background: var(--accent); }

.fleet-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  color: var(--muted);
  font: 400 9px/1.3 "Courier New", monospace;
  letter-spacing: .08em;
}

.fleet-divider i { flex: 1; height: 1px; background: var(--rule); }
.instance-list { display: grid; gap: 11px; }

.empty {
  display: grid;
  min-height: 176px;
  place-items: center;
  margin: 0;
  padding: 25px 14px;
  border: 1px dashed var(--rule);
  color: var(--muted);
  background: rgba(255, 255, 255, .16);
  text-align: center;
}

.empty > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: 9px;
  border: 1px solid var(--ink);
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 23px;
}

.empty b { color: var(--ink); font-family: Georgia, serif; font-size: 16px; font-weight: 400; }
.empty small { max-width: 190px; margin-top: 3px; font-size: 9px; line-height: 1.45; }

.instance-card {
  padding: 14px;
  border: 1px solid var(--ink);
  background: var(--sheet);
}

.instance-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.instance-head h3 { margin: 0; font-size: 19px; }

.instance-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font: 400 9px/1.4 "Courier New", monospace;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  color: var(--muted);
  background: var(--paper);
  font: 400 8px/1.2 "Courier New", monospace;
  text-transform: uppercase;
}

.state::before { width: 6px; height: 6px; background: currentColor; content: ""; }
.state.running { color: var(--success); }
.state.failed,
.state.purge_failed { color: var(--danger); }

.instance-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 13px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.instance-meta span {
  padding: 5px 7px;
  color: var(--muted);
  font: 400 8px/1.3 "Courier New", monospace;
}

.instance-meta span + span { border-left: 1px solid var(--rule-soft); }

.instance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.instance-actions .button { min-height: 32px; padding: 6px 9px; font-size: 8px; }
.instance-actions .purge { margin-left: auto; border-color: var(--danger); color: var(--danger); }
.instance-actions .purge:hover { color: var(--paper); background: var(--danger); }

.footer {
  display: flex;
  width: min(calc(100% - 40px), var(--max-width));
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  border-top: 1px solid var(--ink);
  color: var(--muted);
  font: 400 10px/1.5 "Courier New", monospace;
}

.toast {
  position: fixed;
  z-index: 50;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  max-width: min(420px, calc(100vw - 36px));
  padding: 13px 15px;
  border: 1px solid var(--ink);
  color: var(--paper);
  background: var(--success);
  font-size: 11px;
}

.toast.danger { background: var(--danger); }

dialog {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
}

dialog::backdrop { background: rgba(25, 25, 22, .72); }
.dialog-card { padding: 28px; }

.danger-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-bottom: 16px;
  color: var(--paper);
  background: var(--danger);
  font-family: "Courier New", monospace;
  font-size: 18px;
}

.danger-label {
  margin: 0;
  color: var(--danger);
  font: 400 10px/1.3 "Courier New", monospace;
  letter-spacing: .1em;
}

.dialog-card h2 { margin: 8px 0 0; font-size: 29px; }

.dialog-card > p:not(.danger-label) {
  margin: 14px 0 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

code { color: var(--accent); font-family: "Courier New", monospace; }

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; gap: 42px; }
  .system-card { max-width: 620px; }
  .grid-layout { grid-template-columns: 1fr; }
  .fleet-panel { position: static; }
}

@media (max-width: 720px) {
  .topbar { min-height: 66px; padding: 9px 16px; }
  .brand-copy { display: grid; gap: 2px; }
  .brand-copy b { font-size: 14px; }
  .local-badge { display: none; }
  .back-link { padding-left: 14px; }
  main { width: min(calc(100% - 28px), var(--max-width)); padding-bottom: 58px; }
  .hero { padding: 49px 0 62px; }
  h1 { font-size: clamp(42px, 11.8vw, 62px); }
  .lede { margin-top: 22px; font-size: 18px; }
  .promise-list { grid-template-columns: 1fr; }
  .promise-list span + span { padding-left: 0; border-top: 1px solid var(--rule); border-left: 0; }
  .system-card { padding: 19px; }
  .workspace-heading { display: block; }
  .workspace-heading > p { margin-top: 12px; text-align: left; }
  .configurator,
  .fleet-panel { padding: 20px 16px; }
  .field-grid.two,
  .field-grid.three,
  .choice-grid.two,
  .two-fields { grid-template-columns: 1fr; }
  .profile-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-tabs label:nth-child(3) { margin-left: 0; margin-top: -1px; }
  .profile-tabs label:nth-child(4) { margin-top: -1px; }
  .info-note { grid-template-columns: 1fr; gap: 5px; }
  .footer { display: grid; width: min(calc(100% - 28px), var(--max-width)); padding: 20px 0; }
}

@media (max-width: 450px) {
  .brand-copy small { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .back-link { font-size: 9px; }
  .eyebrow { font-size: 9px; }
  h1 { font-size: clamp(39px, 11.7vw, 52px); }
  .system-card-head h2 { font-size: 22px; }
  .runtime-banner { grid-template-columns: auto 1fr; }
  .runtime-banner .loader { display: none; }
  .section-heading .step { width: 38px; height: 38px; }
  .section-heading h2 { font-size: 25px; }
  .form-section { padding: 27px 0; }
  .submit-row { display: grid; }
  .submit-row .button { width: 100%; }
  .provider { grid-template-columns: auto 1fr; }
  .provider > i { display: none; }
  .credential { margin-left: 20px; }
  .dialog-card { padding: 21px; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* AF v0.1 — dark editorial interface, shared visual language with aipreview. */
:root { color-scheme: dark; --paper:#0b1016; --paper-deep:#101823; --sheet:#121c27; --ink:#f2f6fa; --ink-soft:#d8e1e9; --muted:#8f9dab; --rule:#2d3b49; --rule-soft:#22303d; --accent:#60dbd0; --accent-dark:#35b8ad; --success:#66d9a1; --warning:#e5b974; --danger:#ed7e7e; --focus:#8faeff; --max-width:1200px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { background:radial-gradient(circle at 78% 10%,#142634 0,transparent 27rem),var(--paper); font-size:15px; }
.topbar { min-height:76px; border-color:#1d2934; background:rgba(11,16,22,.88); backdrop-filter:blur(16px); position:sticky; top:0; z-index:30; }
.brand-mark { border-radius:50%; width:40px; height:40px; color:#dcfffb; background:radial-gradient(circle at 45% 35%,#92fff5 0 5%,#3cc4d1 20%,#18283b 52%,#0d141c 71%); border:1px solid #63d5de; box-shadow:0 0 18px #52dce755; }
.brand-copy b { font-family:inherit; font-size:14px; letter-spacing:.02em; text-transform:none; }.brand-copy small,.local-badge { color:var(--muted); font-family:inherit; text-transform:none; letter-spacing:0; }
.site-nav { display:flex; gap:24px; margin-left:auto; }.site-nav a { color:#b4c0cc; font-size:13px; text-decoration:none; }.site-nav a:hover { color:var(--accent); }.local-badge { padding-left:20px; border-left:1px solid var(--rule); }
main { width:min(calc(100% - 40px),var(--max-width)); }.hero { min-height:610px; padding:92px 0 96px; gap:clamp(42px,9vw,130px); }.eyebrow,.micro-label { color:var(--accent); font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.12em; }.eyebrow > span { color:#9eb5ff; }
h1,h2,h3 { font-family:inherit; font-weight:650; letter-spacing:-.04em; } h1 { max-width:720px; font-size:clamp(48px,6.3vw,80px); line-height:1.02; } h1 em { color:#8faeff; }.lede { max-width:650px; color:#bac7d1; font-family:inherit; font-size:clamp(18px,1.75vw,21px); line-height:1.65; }.promise-list { border-color:var(--rule); }.promise-list span { color:#9ba9b5; font-family:inherit; font-size:11px; letter-spacing:.04em; }.promise-list span + span { border-color:var(--rule); }
.system-card { border:1px solid #324554; border-radius:32px; color:#edf4f8; background:linear-gradient(145deg,#162733,#121924); box-shadow:0 28px 70px #00000045; }.system-card .micro-label { color:#78ece0; }.system-card-head,.system-facts div,.runtime-banner { border-color:#334552; }.system-card-head h2 { font-size:26px; }.runtime-banner { background:#0d151e; border-radius:12px; }
.guide-section { padding:94px 0; border-top:1px solid var(--rule); }.section-kicker { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.section-kicker span { color:#8faeff; }.section-kicker i { width:55px; height:1px; background:var(--accent); }.guide-intro { display:grid; grid-template-columns:1.05fr .72fr; gap:100px; align-items:end; padding:28px 0 46px; }.guide-intro h2,.security-section h2 { margin:0; font-size:clamp(32px,4vw,52px); line-height:1.08; }.guide-intro p { margin:0; color:#aebdca; font-size:17px; line-height:1.65; }.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }.guide-grid article { min-height:244px; padding:26px 28px 28px 0; }.guide-grid article + article { padding-left:28px; border-left:1px solid var(--rule); }.guide-grid span { color:var(--accent); font-size:12px; font-weight:700; }.guide-grid h3 { margin:53px 0 12px; font-size:22px; }.guide-grid p { color:var(--muted); line-height:1.65; }
.security-section { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,10vw,150px); padding:94px 0; }.security-list { border-top:1px solid var(--rule); }.security-list p { display:grid; gap:7px; margin:0; padding:20px 0; border-bottom:1px solid var(--rule); }.security-list b { font-size:15px; }.security-list span { color:var(--muted); }
.workspace-heading { border-top-color:var(--rule); }.workspace-heading h2 { font-size:clamp(30px,4vw,48px); }.workspace-heading > p { color:var(--muted); }.panel { border-color:#2c3c49; background:#111a24; box-shadow:none; }.form-section { border-color:var(--rule); }.section-heading h2 { font-family:inherit; }.field input { color:var(--ink); background:#0d141c; border-color:#31414e; }.field input:focus { border-color:var(--accent); }.choice,.provider,.profile-tabs span { background:#0e1720; border-color:#31414e; }.choice:has(input:checked),.profile-tabs input:checked + span { border-color:var(--accent); background:#132934; }.info-note,.resource-summary,.capacity { background:#0d151e; border-color:#30414e; }.button.primary { background:linear-gradient(110deg,#56dbcf,#90aafa); color:#071017; }.button.secondary,.button { color:var(--ink); background:#172430; border-color:#334552; }.footer { border-color:var(--rule); color:var(--muted); background:#0a0f15; }
.sticky-agent-cta { position:fixed; right:22px; bottom:24px; z-index:40; display:grid; grid-template-columns:1fr auto; gap:2px 16px; min-width:202px; padding:13px 16px 13px 18px; border:1px solid #79eee4; border-radius:14px; color:#071217; background:linear-gradient(120deg,#55ddd1,#90aafa); box-shadow:0 14px 35px #0008; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }.sticky-agent-cta:hover { color:#071217; transform:translateY(-3px); box-shadow:0 18px 42px #000a; }.sticky-agent-cta span { grid-column:1 / -1; font-size:10px; font-weight:650; opacity:.72; }.sticky-agent-cta b { font-size:15px; }.sticky-agent-cta i { grid-row:2; grid-column:2; align-self:center; font-style:normal; font-size:20px; }
.layer-list { display:grid; gap:0; margin:19px 0 0; padding:0; list-style:none; }
.layer-list li { display:grid; grid-template-columns:78px 1fr; gap:14px; padding:14px 0; border-bottom:1px solid #334552; }
.layer-list li:last-child { border-bottom:0; }
.layer-list b { color:#91eee5; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.layer-list span { color:#b7c4ce; font-size:12px; line-height:1.5; }
.start-section,.resources-section { padding:94px 0; border-top:1px solid var(--rule); }
.start-steps { display:grid; max-width:900px; margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); }
.start-steps li { display:grid; grid-template-columns:96px 1fr; gap:26px; padding:27px 0; border-bottom:1px solid var(--rule); }
.start-steps > li > span { color:#8faeff; font-size:13px; font-weight:700; letter-spacing:.08em; }
.start-steps h3 { margin:0 0 8px; font-size:23px; }
.start-steps p { max-width:680px; margin:0; color:var(--muted); line-height:1.7; }
.start-steps code { padding:2px 5px; border:1px solid #344653; border-radius:4px; color:#91eee5; background:#0d151e; font-size:.9em; }
.prompt-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(48px,9vw,120px); align-items:center; padding:88px 0; border-top:1px solid var(--rule); }
.prompt-section h2 { margin:0 0 16px; font-size:clamp(30px,3.4vw,46px); line-height:1.12; }
.prompt-section > div > p:last-child { margin:0; color:var(--muted); line-height:1.65; }
.prompt-card { padding:28px; border:1px solid #365160; border-radius:18px; background:linear-gradient(145deg,#142733,#101923); }
.prompt-card blockquote { margin:19px 0 0; color:#d4e0e8; font-size:18px; line-height:1.65; }
.resource-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px; }
.resource-links > div { display:grid; align-content:start; min-width:0; gap:8px; min-height:120px; padding:19px; border:1px solid #30414e; border-radius:13px; color:var(--ink); background:#101923; }
.resource-links b { font-size:16px; overflow-wrap:anywhere; }.resource-links span { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
@media (max-width:760px) { .site-nav { display:none; }.topbar-actions { margin-left:auto; }.local-badge { display:none; }.hero { grid-template-columns:1fr; min-height:0; padding:54px 0 62px; }.system-card { max-width:480px; }.guide-section,.security-section { padding:64px 0; }.guide-intro,.security-section { grid-template-columns:1fr; gap:28px; }.guide-grid { grid-template-columns:1fr; }.guide-grid article,.guide-grid article + article { min-height:auto; padding:24px 0; border-left:0; }.guide-grid h3 { margin-top:28px; }.sticky-agent-cta { right:14px; bottom:14px; }.footer { padding-bottom:88px; } }
@media (max-width:760px) { .start-section,.resources-section { padding:64px 0; }.start-steps li { grid-template-columns:55px 1fr; gap:15px; }.prompt-section { grid-template-columns:1fr; gap:28px; padding:64px 0; }.resource-links { grid-template-columns:1fr; }.prompt-card { padding:21px; }.prompt-card blockquote { font-size:16px; } }