: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; } }

/* Personal agent onboarding and gradual customization. */
.training-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:28px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.training-grid article { min-width:0; min-height:275px; padding:26px 24px 26px 0; }
.training-grid article + article { padding-left:24px; border-left:1px solid var(--rule); }
.training-grid span,.agent-growth span,.personal-agent-note > span { color:var(--accent); font-size:10px; font-weight:750; letter-spacing:.09em; }
.training-grid h3 { margin:42px 0 13px; font-size:21px; line-height:1.18; }
.training-grid p,.agent-growth p,.personal-agent-note p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.agent-growth { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:20px; align-items:center; margin-bottom:28px; padding:24px; border:1px solid #30414e; border-radius:16px; background:#101923; }
.agent-growth > div { min-width:0; }
.agent-growth b { display:block; margin:11px 0 7px; font-size:17px; line-height:1.25; }
.agent-growth > i { color:#6e8190; font-size:22px; font-style:normal; }
.meeting-section .dialogue-card { margin-bottom:16px; }
.personal-agent-note { display:grid; grid-template-columns:170px minmax(240px,.72fr) 1fr; gap:28px; align-items:start; padding:28px; border:1px solid #49616d; border-radius:16px; background:linear-gradient(145deg,#14232d,#101923); }
.personal-agent-note h3 { margin:0; font-size:25px; line-height:1.15; }
.personal-agent-note p { font-size:14px; }
@media (max-width:900px) { .training-grid { grid-template-columns:1fr 1fr; }.training-grid article:nth-child(3) { border-left:0; }.training-grid article:nth-child(n+3) { border-top:1px solid var(--rule); }.agent-growth { grid-template-columns:1fr; }.agent-growth > i { transform:rotate(90deg); text-align:center; }.personal-agent-note { grid-template-columns:1fr; gap:10px; } }
@media (max-width:760px) { .training-grid { grid-template-columns:1fr; }.training-grid article,.training-grid article + article { min-height:0; padding:24px 0; border-left:0; }.training-grid article + article { border-top:1px solid var(--rule); }.training-grid h3 { margin-top:24px; }.agent-growth { padding:20px; }.personal-agent-note { padding:22px; } }

@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; }
.project-site-section { padding:94px 0; border-top:1px solid var(--rule); }
.project-site-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.62fr); gap:clamp(42px,8vw,105px); align-items:end; padding:28px 0 46px; }
.project-site-intro h2 { max-width:760px; margin:0 0 22px; font-size:clamp(36px,5vw,62px); line-height:1.04; }
.project-site-intro > div > p:last-child { max-width:720px; margin:0; color:#aebdca; font-size:17px; line-height:1.7; }
.project-site-label { display:inline-flex; margin:0 0 16px; padding:6px 9px; border:1px solid #365160; border-radius:99px; color:#91eee5; background:#101923; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.project-access-card { padding:24px; border:1px solid #3d5967; border-radius:20px; background:linear-gradient(145deg,#142733,#101923); }
.project-access-card > span { color:#8faeff; font-size:10px; font-weight:700; letter-spacing:.1em; }
.project-access-card > b { display:block; margin:18px 0 9px; font-size:23px; }
.project-access-card > p { margin:0; color:#aebdca; font-size:13px; line-height:1.65; }
.project-access-card > div { display:flex; align-items:center; gap:9px; margin-top:21px; padding-top:16px; border-top:1px solid #365160; color:#91eee5; font-size:11px; font-weight:700; }
.project-access-card i { width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 12px #66d9a188; }
.project-example-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.project-example-grid article { display:flex; min-width:0; min-height:410px; flex-direction:column; padding:28px 28px 28px 0; }
.project-example-grid article + article { padding-left:28px; border-left:1px solid var(--rule); }
.project-example-grid article > span { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.07em; }
.project-example-grid h3 { margin:46px 0 14px; font-size:25px; line-height:1.15; }
.project-example-grid p { margin:0; color:#aebdca; font-size:14px; line-height:1.65; }
.project-example-grid blockquote { margin:auto 0 0; padding-top:18px; border-top:1px solid var(--rule); color:#cbd7df; font-size:14px; font-style:normal; line-height:1.6; }
.project-site-footer { display:grid; grid-template-columns:minmax(240px,.55fr) 1fr; gap:36px; align-items:center; padding:24px 0 0; }
.project-site-footer b { font-size:18px; }
.project-site-footer span { color:var(--muted); line-height:1.65; }
@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; } }
@media (max-width:900px) { .project-site-intro { grid-template-columns:1fr; gap:30px; }.project-access-card { max-width:520px; }.project-example-grid { grid-template-columns:1fr; }.project-example-grid article,.project-example-grid article + article { min-height:0; padding:28px 0; border-left:0; }.project-example-grid h3 { margin-top:24px; }.project-example-grid blockquote { margin-top:25px; }.project-site-footer { grid-template-columns:1fr; gap:7px; } }
@media (max-width:760px) { .project-site-section { padding:64px 0; }.project-site-intro { padding-bottom:34px; }.project-site-intro > div > p:last-child { font-size:15px; }.project-access-card { padding:20px; } }

/* Protected Agent Factory dashboard. */
.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;
}
.dashboard-page .profile-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-page .profile-tabs input:checked + span { color: #f2f6fa; }
.dashboard-page .empty small { color: #b4c0cc; }
.dashboard-page .section-note { margin: 10px 0 0; line-height: 1.5; }
.dashboard-page .user-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .dashboard-page .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .dashboard-page .topbar-actions {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: space-between;
    gap: 8px;
    margin-left: 0;
  }
  .dashboard-page .topbar-actions > * { min-width: 0; }
  .dashboard-page .topbar-actions a,
  .dashboard-page .topbar-actions button,
  .dashboard-page .user-chip { font-size: 12px; }
  .dashboard-page .hero h1 {
    font-size: clamp(32px, 10.2vw, 44px);
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Presentation-derived work and team-pilot sections. */
.work-section,.pilot-section { padding:94px 0; border-top:1px solid var(--rule); }
.work-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.65fr); gap:clamp(42px,8vw,105px); align-items:end; padding:28px 0 46px; }
.work-intro h2,.pilot-intro h2 { max-width:780px; margin:0; font-size:clamp(36px,4.8vw,60px); line-height:1.06; }
.work-intro > p,.pilot-intro > p { margin:0; color:#aebdca; font-size:17px; line-height:1.7; }
.work-label { display:inline-flex; margin:0 0 16px; padding:6px 9px; border:1px solid #365160; border-radius:99px; color:#91eee5; background:#101923; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.benefit-grid article { min-width:0; min-height:230px; padding:27px 28px 27px 0; }
.benefit-grid article + article { padding-left:28px; border-left:1px solid var(--rule); }
.benefit-grid span,.role-heading > span,.role-grid article > span,.interaction-flow span,.pilot-steps span,.pilot-metrics span { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.08em; }
.benefit-grid h3 { margin:43px 0 12px; font-size:27px; }
.benefit-grid p,.role-heading p,.role-grid li,.interaction-flow p,.pilot-steps p,.pilot-metrics p { margin:0; color:var(--muted); line-height:1.65; }
.human-first { margin:0; padding:22px 0; border-bottom:1px solid var(--rule); color:#dce6ed; font-size:18px; font-weight:650; text-align:center; }
.role-heading { display:grid; grid-template-columns:170px minmax(240px,.7fr) 1fr; gap:28px; align-items:start; padding:64px 0 28px; }
.role-heading h3 { margin:0; font-size:30px; line-height:1.15; }
.role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.role-grid article { min-width:0; padding:24px; border:1px solid #30414e; border-radius:16px; background:#101923; }
.role-grid h4 { margin:28px 0 16px; font-size:21px; }
.role-grid ul { display:grid; gap:9px; margin:0; padding:0 0 0 18px; }
.role-grid li { padding-left:3px; font-size:13px; }
.interaction-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:48px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.interaction-flow > div { min-width:0; padding:25px 28px 28px 0; }
.interaction-flow > div + div { padding-left:28px; border-left:1px solid var(--rule); }
.interaction-flow b { display:block; margin:32px 0 10px; font-size:17px; }
.interaction-flow p { font-size:13px; }
.pilot-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.6fr); gap:clamp(42px,8vw,105px); align-items:end; padding:28px 0 46px; }
.pilot-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); list-style:none; }
.pilot-steps li { min-width:0; min-height:245px; padding:26px 24px 26px 0; }
.pilot-steps li + li { padding-left:24px; border-left:1px solid var(--rule); }
.pilot-steps b { display:block; margin:44px 0 12px; font-size:22px; }
.pilot-steps p { font-size:13px; }
.pilot-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:38px 0 0; }
.pilot-metrics > div { min-width:0; padding:18px; border:1px solid #30414e; border-radius:13px; background:#101923; }
.pilot-metrics p { margin-top:10px; font-size:12px; }
.pilot-result { max-width:840px; margin:28px 0 0; color:#dce6ed; font-size:18px; font-weight:650; line-height:1.55; }
@media (max-width:900px) { .work-intro,.pilot-intro { grid-template-columns:1fr; gap:26px; }.role-heading { grid-template-columns:1fr; gap:10px; }.role-grid,.interaction-flow { grid-template-columns:1fr; }.role-grid article { min-height:0; }.interaction-flow > div,.interaction-flow > div + div { padding:24px 0; border-left:0; }.interaction-flow > div + div { border-top:1px solid var(--rule); }.interaction-flow b { margin-top:22px; }.pilot-steps,.pilot-metrics { grid-template-columns:1fr 1fr; }.pilot-steps li:nth-child(3) { border-left:0; }.pilot-steps li:nth-child(n+3) { border-top:1px solid var(--rule); } }
@media (max-width:760px) { .work-section,.pilot-section { padding:64px 0; }.work-intro > p,.pilot-intro > p { font-size:15px; }.benefit-grid { grid-template-columns:1fr; }.benefit-grid article,.benefit-grid article + article { min-height:0; padding:24px 0; border-left:0; }.benefit-grid article + article { border-top:1px solid var(--rule); }.benefit-grid h3 { margin-top:24px; }.role-heading { padding-top:48px; }.pilot-steps,.pilot-metrics { grid-template-columns:1fr; }.pilot-steps li,.pilot-steps li + li { min-height:0; padding:24px 0; border-left:0; }.pilot-steps li + li { border-top:1px solid var(--rule); }.pilot-steps b { margin-top:22px; }.pilot-metrics { padding-top:28px; } }

/* Agent risk notice and user responsibility. */
.risks-section { padding:94px 0; border-top:1px solid var(--rule); }
.risks-intro { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(280px,.62fr); gap:clamp(42px,8vw,105px); align-items:end; padding:28px 0 46px; }
.risks-intro h2 { max-width:760px; margin:0; font-size:clamp(36px,4.8vw,60px); line-height:1.06; }
.risks-intro > p { margin:0; color:#c9b9a6; font-size:17px; line-height:1.7; }
.risks-label { display:inline-flex; margin:0 0 16px; padding:6px 9px; border:1px solid #68483e; border-radius:99px; color:#ffb49e; background:#1c1516; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.risk-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.risk-grid article { min-width:0; min-height:270px; padding:24px; border:1px solid #553b39; border-radius:16px; background:linear-gradient(145deg,#211719,#12151b); }
.risk-grid article > span { color:#f09780; font-size:10px; font-weight:750; letter-spacing:.08em; }
.risk-grid h3 { margin:38px 0 12px; font-size:22px; line-height:1.15; }
.risk-grid p { margin:0; color:#b9aaa5; font-size:13px; line-height:1.65; }
.risk-rules { display:grid; grid-template-columns:minmax(220px,.5fr) 1.5fr; gap:32px; margin-top:28px; padding:28px; border:1px solid #493d38; border-radius:16px; background:#12171d; }
.risk-rules h3 { margin:0; font-size:22px; }
.risk-rules ol { display:grid; gap:18px; margin:0; padding:0; list-style:none; counter-reset:risk-rule; }
.risk-rules li { display:grid; grid-template-columns:minmax(155px,.42fr) 1fr; gap:18px; counter-increment:risk-rule; }
.risk-rules b { color:#f0d1c6; }
.risk-rules span { color:var(--muted); line-height:1.55; }
.risk-disclaimer { margin-top:16px; padding:26px 28px; border:1px solid #8a584d; border-left:4px solid #ed7e7e; border-radius:14px; background:#25191a; }
.risk-disclaimer > span { color:#ffac98; font-size:11px; font-weight:750; letter-spacing:.1em; }
.risk-disclaimer p { max-width:980px; margin:13px 0 0; color:#e5d8d4; font-size:14px; line-height:1.65; }
.risk-sources { margin:18px 0 0; color:#7f8b96; font-size:11px; line-height:1.6; }
.risk-sources a { color:#a6c4d3; text-decoration-color:#49616d; text-underline-offset:3px; }
.risk-sources a:hover { color:#dcebf2; }
@media (max-width:900px) { .risks-intro { grid-template-columns:1fr; gap:26px; }.risk-grid { grid-template-columns:1fr 1fr; }.risk-rules { grid-template-columns:1fr; }.risk-rules li { grid-template-columns:minmax(155px,.42fr) 1fr; } }
@media (max-width:760px) { .risks-section { padding:64px 0; }.risks-intro > p { font-size:15px; }.risk-grid { grid-template-columns:1fr; }.risk-grid article { min-height:0; }.risk-grid h3 { margin-top:26px; }.risk-rules { padding:22px; }.risk-rules li { grid-template-columns:1fr; gap:6px; }.risk-disclaimer { padding:22px 20px; }.risk-disclaimer p { font-size:13px; } }

/* Basic chat commands and session recovery guide. */
.commands-section { padding:94px 0; border-top:1px solid var(--rule); }
.commands-intro { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.65fr); gap:clamp(42px,8vw,105px); align-items:end; padding:28px 0 46px; }
.commands-intro h2 { max-width:720px; margin:0; font-size:clamp(36px,4.8vw,60px); line-height:1.06; }
.commands-intro > p { margin:0; color:#aebdca; font-size:17px; line-height:1.7; }
.commands-label { display:inline-flex; margin:0 0 16px; padding:6px 9px; border:1px solid #365160; border-radius:99px; color:#91eee5; background:#101923; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.command-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.command-card { min-width:0; min-height:250px; padding:24px; border:1px solid #30414e; border-radius:16px; background:#101923; }
.command-card.primary-command { border-color:#426471; background:linear-gradient(145deg,#142733,#101923); }
.command-card code,.command-difference code { display:inline-flex; padding:6px 9px; border:1px solid #365160; border-radius:7px; color:#91eee5; background:#0d151e; font-size:14px; font-weight:700; }
.command-card h3 { margin:28px 0 12px; font-size:22px; line-height:1.15; }
.command-card p { margin:0; color:#aebdca; font-size:14px; line-height:1.65; }
.command-card > span { display:block; margin-top:17px; padding-top:15px; border-top:1px solid var(--rule); color:#8faeff; font-size:12px; line-height:1.55; }
.command-difference { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; margin-top:28px; padding:24px; border:1px solid #30414e; border-radius:16px; background:#0d151e; }
.command-difference > div { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; align-items:center; }
.command-difference b { font-size:16px; }
.command-difference span { grid-column:1 / -1; color:var(--muted); font-size:13px; line-height:1.55; }
.command-difference > i { color:#8faeff; font-size:30px; font-style:normal; }
@media (max-width:900px) { .commands-intro { grid-template-columns:1fr; gap:26px; }.command-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) { .commands-section { padding:64px 0; }.commands-intro > p { font-size:15px; }.command-grid { grid-template-columns:1fr; }.command-card { min-height:0; }.command-difference { grid-template-columns:1fr; gap:18px; }.command-difference > i { transform:rotate(90deg); text-align:center; } }

/* Page contents and section anchors. */
.contents-section { padding:78px 0 94px; border-top:1px solid var(--rule); scroll-margin-top:86px; }
.contents-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.62fr); gap:clamp(42px,8vw,105px); align-items:end; padding:28px 0 38px; }
.contents-heading h2 { max-width:720px; margin:0; font-size:clamp(36px,4.8vw,60px); line-height:1.06; }
.contents-heading p { margin:0; color:#aebdca; font-size:16px; line-height:1.7; }
.contents-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0; padding:1px; border:1px solid var(--rule); border-radius:18px; overflow:hidden; background:var(--rule); list-style:none; }
.contents-grid li { min-width:0; background:#101923; }
.contents-grid a { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:6px 14px; min-height:112px; padding:22px; color:var(--ink); background:linear-gradient(145deg,rgba(20,39,51,.42),rgba(16,25,35,.92)); text-decoration:none; transition:background-color .28s ease,box-shadow .28s ease,transform .28s ease; }
.contents-grid a::after { content:'↘'; grid-row:1 / 3; grid-column:3; align-self:center; color:#526575; font-size:18px; transition:color .25s ease,transform .25s ease; }
.contents-grid a:hover,.contents-grid a.is-active { z-index:1; background:#172733; box-shadow:inset 3px 0 0 var(--accent); }
.contents-grid a:hover::after,.contents-grid a.is-active::after { color:var(--accent); transform:translate(2px,2px); }
.contents-grid span { grid-row:1 / 3; align-self:start; color:#8faeff; font-size:11px; font-weight:750; letter-spacing:.08em; }
.contents-grid b { min-width:0; font-size:17px; line-height:1.25; }
.contents-grid small { min-width:0; color:var(--muted); font-size:12px; line-height:1.45; }
@media (max-width:900px) { .contents-heading { grid-template-columns:1fr; gap:20px; }.contents-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .contents-section { padding:58px 0 64px; }.contents-grid { grid-template-columns:1fr; }.contents-grid a { min-height:94px; padding:19px; } }

/* Motion layer — progressive reveals inspired by the MicKedi portfolio. */
.page-progress { position:fixed; z-index:80; top:0; right:0; left:0; height:2px; background:linear-gradient(90deg,#60dbd0,#8faeff 68%,#d998ff); box-shadow:0 0 14px rgba(96,219,208,.72); transform:scaleX(0); transform-origin:left center; pointer-events:none; }
body::before { content:''; position:fixed; z-index:-1; inset:0; background-image:linear-gradient(rgba(143,174,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(143,174,255,.025) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,#000,transparent 92%); pointer-events:none; }
.topbar { box-shadow:0 14px 45px rgba(0,0,0,calc(.03 + var(--scroll-progress,0) * .22)); transition:box-shadow .35s ease,border-color .35s ease; }
.site-nav a { position:relative; padding:8px 0; transition:color .25s ease; }
.site-nav a::after { content:''; position:absolute; right:0; bottom:2px; left:0; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right center; transition:transform .32s cubic-bezier(.22,.72,.18,1); }
.site-nav a:hover::after,.site-nav a.is-active::after { transform:scaleX(1); transform-origin:left center; }
.site-nav a.is-active { color:#e7fffc; }
.hero { position:relative; overflow:hidden; isolation:isolate; }
.hero::before,.hero::after { content:''; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.hero::before { width:clamp(260px,36vw,520px); height:clamp(260px,36vw,520px); top:5%; right:-8%; background:radial-gradient(circle,rgba(96,219,208,.13),transparent 68%); }
.hero::after { width:clamp(220px,30vw,430px); height:clamp(220px,30vw,430px); bottom:0; left:-17%; background:radial-gradient(circle,rgba(143,174,255,.11),transparent 70%); }
.system-card { --tilt-x:0deg; --tilt-y:0deg; --glow-x:50%; --glow-y:30%; position:relative; overflow:hidden; transform-style:preserve-3d; transition:transform .42s cubic-bezier(.22,.72,.18,1),border-color .35s ease,box-shadow .35s ease; }
.system-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(130,246,236,.13),transparent 38%); opacity:.75; pointer-events:none; }
.system-card.is-revealed { transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
.system-card:hover { border-color:rgba(121,238,228,.56); box-shadow:0 34px 84px rgba(0,0,0,.46),0 0 38px rgba(96,219,208,.06); }
main > section,main > nav { scroll-margin-top:86px; }
.motion-ready [data-motion-reveal] { opacity:0; filter:blur(7px); transform:translate3d(0,30px,0) scale(.99); transition:opacity .74s var(--reveal-delay,0ms) cubic-bezier(.22,.72,.18,1),transform .78s var(--reveal-delay,0ms) cubic-bezier(.22,.72,.18,1),filter .68s var(--reveal-delay,0ms) ease; will-change:opacity,transform,filter; }
.motion-ready [data-motion-reveal="card"] { transform:translate3d(28px,22px,0) scale(.965); }
.motion-ready [data-motion-reveal].is-revealed { opacity:1; filter:none; transform:none; will-change:auto; }
.section-kicker i { transform:scaleX(.35); transform-origin:left center; transition:transform .9s .22s cubic-bezier(.22,.72,.18,1); }
.section-kicker.is-revealed i { transform:scaleX(1); }
.training-grid > article,.benefit-grid > article,.role-grid > article,.case-grid > article,.project-example-grid > article,.pilot-steps > li,.pilot-metrics > div,.risk-grid > article,.resource-links > div,.command-grid > article,.contents-grid > li { transition-property:transform,border-color,background-color,box-shadow; transition-duration:.3s; transition-timing-function:ease; }
.training-grid > article:hover,.benefit-grid > article:hover,.role-grid > article:hover,.case-grid > article:hover,.project-example-grid > article:hover,.pilot-steps > li:hover,.pilot-metrics > div:hover,.risk-grid > article:hover,.resource-links > div:hover,.command-grid > article:hover { z-index:1; border-color:rgba(121,238,228,.44); background-color:rgba(24,39,51,.9); box-shadow:0 18px 46px rgba(0,0,0,.22); transform:translateY(-5px); }
.sticky-agent-cta { animation:cta-breathe 4.8s 1.8s ease-in-out infinite; }
@keyframes cta-breathe { 0%,100% { box-shadow:0 14px 35px #0008,0 0 0 rgba(96,219,208,0); } 50% { box-shadow:0 18px 44px #0009,0 0 24px rgba(96,219,208,.18); } }
@media (max-width:920px) { .site-nav a.is-active { color:var(--accent); } .hero::before { right:-30%; } }
@media (hover:none) { .training-grid > article:hover,.benefit-grid > article:hover,.role-grid > article:hover,.case-grid > article:hover,.project-example-grid > article:hover,.pilot-steps > li:hover,.pilot-metrics > div:hover,.risk-grid > article:hover,.resource-links > div:hover,.command-grid > article:hover { transform:none; box-shadow:none; } }
@media (prefers-reduced-motion:reduce) { .motion-ready [data-motion-reveal] { opacity:1 !important; filter:none !important; transform:none !important; } .sticky-agent-cta { animation:none !important; } .page-progress { transition:none !important; } .system-card { transform:none !important; } }

/* Responsive integrity audit: keep editorial grids inside narrow viewports. */
.hero > *,
.guide-intro > *,
.contents-heading > *,
.project-site-intro > *,
.work-intro > *,
.pilot-intro > *,
.risks-intro > *,
.commands-intro > *,
.role-heading > *,
.security-section > *,
.prompt-section > *,
.project-site-footer > *,
.start-steps li > *,
.layer-list li > * {
  min-width: 0;
}

.layer-list b,
.start-steps h3,
.start-steps p,
.work-intro h2,
.project-site-intro h2,
.pilot-intro h2,
.risks-intro h2,
.commands-intro h2 {
  overflow-wrap: anywhere;
}

.start-steps li {
  grid-template-columns: 96px minmax(0, 1fr);
}

@media (max-width: 760px) {
  main {
    width: min(calc(100% - 28px), var(--max-width));
  }

  .start-steps li {
    grid-template-columns: 55px minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: clamp(40px, 13vw, 48px);
  }

  .guide-intro h2,
  .capability-section h2,
  .security-section h2,
  .contents-heading h2,
  .project-site-intro h2,
  .work-intro h2,
  .pilot-intro h2,
  .risks-intro h2,
  .commands-intro h2 {
    font-size: clamp(29px, 9.5vw, 38px);
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .section-kicker {
    flex-wrap: wrap;
  }

  .section-kicker i {
    flex: 0 0 42px;
  }

  .project-access-card,
  .personal-agent-note,
  .risk-rules,
  .risk-disclaimer,
  .command-difference {
    padding-inline: 18px;
  }
}

/* Authentication and invitation management */
.text-button,
.auth-tab,
.auth-submit,
.issued-token button { cursor: pointer; }

.text-button {
  padding: 0;
  color: var(--muted);
  background: transparent;
  font: 400 11px/1.3 "Courier New", monospace;
  text-transform: uppercase;
}

.account-menu,
.guest-auth {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  border-left: 1px solid var(--rule);
  font: 400 10px/1.3 "Courier New", monospace;
  text-transform: uppercase;
}
.account-menu a,
.guest-auth a { color: var(--accent); }
.guest-auth-primary {
  padding: 8px 10px;
  color: var(--sheet) !important;
  background: var(--ink);
  text-decoration: none;
}

.auth-page,
.admin-page { background: var(--paper); }

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(48px, 9vw, 130px);
  align-items: center;
  min-height: 100vh;
  padding-top: 56px;
  padding-bottom: 56px;
}

.auth-brand {
  display: inline-block;
  margin-bottom: 62px;
  font: 700 18px/1 Arial, sans-serif;
  letter-spacing: .12em;
  text-decoration: none;
}
.auth-intro h1,
.admin-heading h1 { margin: 0; }
.auth-intro .lede,
.admin-heading .lede { max-width: 650px; }

.auth-card,
.token-panel {
  border: 1px solid var(--ink);
  background: var(--sheet);
  box-shadow: 12px 12px 0 var(--paper-deep);
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ink); }
.auth-tab { padding: 15px; color: var(--muted); background: transparent; font: 700 11px/1 "Courier New", monospace; text-transform: uppercase; }
.auth-tab + .auth-tab { border-left: 1px solid var(--ink); }
.auth-tab.is-active { color: var(--sheet); background: var(--ink); }
.auth-form { display: grid; gap: 19px; padding: 30px; }
.auth-form > div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--rule); }
.auth-form h2 { margin-bottom: 16px; font-size: 30px; }
.auth-form > div span { color: var(--accent); font: 400 10px/1 "Courier New", monospace; }
.auth-form label,
.token-form label { display: grid; gap: 7px; color: var(--muted); font: 400 10px/1.3 "Courier New", monospace; text-transform: uppercase; }
.auth-form input,
.token-form input,
.token-form select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 15px/1.3 Verdana, Arial, sans-serif;
}
.channel-choice { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--rule); }
.channel-choice legend { padding: 0 6px; color: var(--muted); font: 700 10px/1.3 "Courier New", monospace; text-transform: uppercase; }
.channel-choice label { display: flex; grid-template-columns: none; align-items: center; gap: 8px; text-transform: none; }
.channel-choice input { width: auto; min-height: auto; }
.channel-choice b { color: var(--accent); font-size: 9px; text-transform: uppercase; }
.profile-panel { display: grid; gap: 8px; margin-bottom: 24px; }
.profile-panel p { margin: 0; overflow-wrap: anywhere; }
.auth-submit {
  min-height: 48px;
  padding: 12px 16px;
  color: var(--sheet);
  background: var(--accent);
  font: 700 11px/1 "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.auth-submit:hover { background: var(--accent-dark); }
.auth-message { min-height: 24px; margin: 0; padding: 0 30px 22px; color: var(--danger); font: 400 11px/1.5 "Courier New", monospace; }
.auth-message[data-kind="success"] { color: var(--success); }
.auth-message[data-kind="busy"] { color: var(--warning); }

.admin-shell { display: grid; gap: 24px; padding-top: 64px; }
.admin-heading { max-width: 850px; padding-bottom: 28px; }
.admin-page .panel,
.token-panel { min-width: 0; padding: 28px; }
.admin-page .panel h2,
.token-panel h2 { margin: 0 0 22px; font-size: clamp(24px, 3vw, 34px); }
.admin-page #agent-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.admin-page #agent-form .button { grid-column: 1 / -1; justify-self: start; }
.admin-page .field select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #31414e;
  border-radius: 0;
  color: var(--ink);
  background: #0d141c;
  font: 400 15px/1.3 Verdana, Arial, sans-serif;
}
.admin-page .instance-list article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.admin-page .instance-list h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.admin-page .instance-list p { margin: 0 0 10px; color: var(--muted); overflow-wrap: anywhere; }
.admin-page .instance-list b { display: block; margin-bottom: 6px; }
.token-panel { max-width: none; }
.token-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 16px; align-items: end; }
.issued-token { display: grid; gap: 10px; margin-top: 24px; padding: 18px; border: 1px solid var(--accent); background: var(--paper); }
.issued-token span { color: var(--accent); font: 700 10px/1 "Courier New", monospace; }
.issued-token code { overflow-wrap: anywhere; font-size: 14px; }
.issued-token button { justify-self: start; padding: 8px 10px; color: var(--paper); background: var(--ink); }
.token-history { padding-top: 56px; }
.token-list { display: grid; max-width: none; border-top: 1px solid var(--ink); }
.token-list article { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.token-list article b { color: var(--success); font: 700 11px/1.4 "Courier New", monospace; text-transform: uppercase; }
.token-list article[data-status="used"] b,
.token-list article[data-status="expired"] b,
.token-list article[data-status="revoked"] b { color: var(--muted); }
.token-list article span { min-width: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.token-list article .button { min-width: 120px; margin-top: 0; }
.token-list article .button:disabled { border-color: var(--rule); color: var(--muted); background: transparent; cursor: default; opacity: .8; }

@media (max-width: 900px) {
  .account-menu,
  .guest-auth { width: 100%; justify-content: flex-end; border-left: 0; }
  .auth-shell { grid-template-columns: 1fr; align-content: center; }
  .auth-brand { margin-bottom: 34px; }
}

@media (max-width: 760px) {
  .admin-page .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }
  .admin-page .topbar-actions {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  .admin-shell { width: min(calc(100% - 24px), var(--max-width)); gap: 16px; padding-top: 28px; }
  .admin-heading { padding-bottom: 10px; }
  .admin-heading h1 { font-size: clamp(32px, 10vw, 46px); overflow-wrap: anywhere; }
  .admin-page .panel,
  .admin-page .token-panel { padding: 18px 14px; }
  .admin-page #agent-form { grid-template-columns: 1fr; }
  .admin-page #agent-form .button { width: 100%; min-height: 46px; justify-self: stretch; }
  .admin-page .instance-list article { padding: 14px; }
  .admin-page .instance-actions { display: grid; grid-template-columns: 1fr; }
  .admin-page .instance-actions .button { width: 100%; min-height: 44px; margin-top: 0; font-size: 10px; }
  .admin-page .token-form { grid-template-columns: 1fr; }
  .admin-page .token-form .auth-submit { width: 100%; }
  .admin-page .issued-token { padding: 14px; }
  .admin-page .token-list article { grid-template-columns: 1fr; align-items: stretch; gap: 8px; }
  .admin-page .token-list article .button { width: 100%; min-height: 44px; }
  .admin-page .auth-message { padding-right: 0; padding-left: 0; }
}

@media (max-width: 560px) {
  .auth-shell { width: min(calc(100% - 28px), var(--max-width)); padding-top: 28px; }
  .auth-card { box-shadow: 7px 7px 0 var(--paper-deep); }
  .auth-form { padding: 22px; }
  .token-form { grid-template-columns: 1fr; }
  .token-list article { grid-template-columns: 1fr; gap: 5px; }
}