:root {
  --paper: #f2eee5;
  --paper-light: #f8f6f0;
  --paper-deep: #e5dfd1;
  --ink: #17201d;
  --ink-soft: #34403a;
  --muted: #69736b;
  --line: #c9c3b6;
  --line-dark: #9b988d;
  --green: #76b900;
  --green-deep: #467300;
  --green-wash: #eaf1d9;
  --red: #a44c3d;
  --amber: #9a6917;
  --black: #101613;
  --mono: "Cascadia Mono", "SFMono-Regular", "Roboto Mono", Consolas, monospace;
  --sans: "Trebuchet MS", "Segoe UI", sans-serif;
  --display: Georgia, "Times New Roman", serif;
  --shadow: 0 16px 40px rgba(31, 38, 31, 0.09);
  --focus: 0 0 0 3px rgba(118, 185, 0, 0.38);
}

* { box-sizing: border-box; }

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

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background: radial-gradient(circle at 8% 2%, rgba(118, 185, 0, 0.12), transparent 25rem), radial-gradient(circle at 90% 20%, rgba(156, 136, 83, 0.12), transparent 30rem);
  pointer-events: none;
}

.paper-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.3;
  background-image: linear-gradient(rgba(23, 32, 29, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 32, 29, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  pointer-events: none;
}

a { color: inherit; }

button, input, select, textarea { font: inherit; }

button, select, input, textarea { border: 1px solid var(--line-dark); border-radius: 3px; }

button { min-height: 42px; padding: 0 16px; border-color: var(--ink); background: var(--ink); color: var(--paper-light); cursor: pointer; font-weight: 700; transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease; }

button:hover:not(:disabled) { transform: translateY(-1px); background: var(--green-deep); border-color: var(--green-deep); }

button:active:not(:disabled) { transform: translateY(0); }

button:disabled { cursor: not-allowed; background: var(--paper-deep); border-color: var(--line); color: var(--muted); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus); }

input, select, textarea { width: 100%; padding: 10px 11px; background: rgba(255, 255, 255, 0.6); color: var(--ink); }

textarea { min-height: 44px; resize: vertical; }

select { appearance: auto; }

code, pre { font-family: var(--mono); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.masthead, .console-layout, .site-footer { width: min(1500px, calc(100% - 56px)); margin-inline: auto; }

.masthead { min-height: 122px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); }

.wordmark { display: flex; align-items: center; gap: 15px; }

.wordmark-mark { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--green-deep); background: var(--green); color: var(--black); font-size: 29px; line-height: 1; }

.eyebrow { margin: 0; color: var(--green-deep); font: 700 10px/1.2 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; }

.wordmark h1 { margin: 4px 0 0; font: 700 clamp(25px, 3vw, 37px)/0.98 var(--display); letter-spacing: -0.035em; }

.policy-line { display: flex; align-items: center; gap: 9px; max-width: 310px; color: var(--ink-soft); font-size: 12px; }

.policy-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(118, 185, 0, 0.16); }

.docs-link { padding: 8px 0; border-bottom: 1px solid var(--ink); color: var(--ink); font-size: 12px; text-decoration: none; white-space: nowrap; }

.docs-link:hover { color: var(--green-deep); border-color: var(--green-deep); }

.console-layout { display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); gap: 34px; padding: 34px 0 58px; }

.security-rail { display: grid; align-content: start; gap: 14px; }

.lock-panel, .session-panel, .route-panel, .catalogue-panel, .workspace-panel, .api-status-card, .endpoint-card, .tool-card { border: 1px solid var(--line); background: rgba(248, 246, 240, 0.87); box-shadow: var(--shadow); }

.lock-panel { border-color: var(--ink); background: var(--black); color: var(--paper-light); box-shadow: 8px 8px 0 rgba(118, 185, 0, 0.55); }

.lock-panel, .session-panel, .route-panel, .catalogue-panel { padding: 18px; }

.section-kicker, .attention-top, .pulse-row, .token-box, .lock-heading, .panel-heading, .workbench-heading, .tool-header, .endpoint-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.section-kicker { color: var(--muted); font: 700 10px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }

.lock-panel .section-kicker { color: #a8b49f; }

.lock-heading { justify-content: flex-start; align-items: flex-start; margin-top: 20px; }

.lock-glyph { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid var(--green); color: var(--green); font: 700 24px/1 var(--display); }

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

h2 { font: 700 27px/1.07 var(--display); letter-spacing: -0.025em; }

.lock-heading h2 { margin: 0; font-size: 21px; }

.lock-heading p { margin: 5px 0 0; color: #a8b49f; font-size: 12px; }

.status-pill { display: inline-flex; min-height: 23px; align-items: center; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font: 700 10px/1 var(--mono); letter-spacing: 0.07em; white-space: nowrap; }

.status-pill.ok { color: var(--green); background: rgba(118, 185, 0, 0.1); }

.status-pill.pending { color: var(--amber); background: rgba(154, 105, 23, 0.08); }

.lock-panel .status-pill.pending { color: #e3be66; background: transparent; }

.status-pill.offline { color: var(--red); background: rgba(164, 76, 61, 0.09); }

.lock-panel .status-pill.offline { color: #df8c7f; background: transparent; }

.attention-panel { min-height: 148px; margin: 18px 0; padding: 14px; display: grid; align-content: space-between; gap: 16px; border: 1px dashed #829b63; background: repeating-linear-gradient(135deg, rgba(118, 185, 0, 0.11) 0, rgba(118, 185, 0, 0.11) 2px, transparent 2px, transparent 9px); }

.attention-top { color: #b4c4a2; font: 700 10px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

.attention-top span:last-child { color: var(--green); }

.attention-panel strong { color: var(--green); font: 700 clamp(31px, 4vw, 44px)/0.9 var(--display); letter-spacing: -0.05em; }

.attention-panel p { max-width: 250px; margin: 0; color: #c8d1c1; font-size: 12px; }

.ad-slot { display: block; min-height: 72px; margin-top: 4px; color: #c8d1c1; text-align: center; }

.lock-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

.lock-facts div { padding: 8px; border-top: 1px solid #35423a; }

.lock-facts span, .lock-facts strong { display: block; }

.lock-facts span { color: #8d9c8c; font: 10px/1.2 var(--mono); text-transform: uppercase; }

.lock-facts strong { margin-top: 4px; color: var(--paper-light); font-size: 12px; }

.lock-facts strong.good { color: var(--green); }

.lock-facts strong.bad { color: #df8c7f; }

.pulse-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid #35423a; color: #b4c4a2; font: 11px/1.3 var(--mono); }

.pulse-row > span:nth-child(2) { min-width: 0; flex: 1; }

.pulse-sequence { color: var(--green); }

.pulse-indicator { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #798178; }

.pulse-indicator.live { background: var(--green); box-shadow: 0 0 0 4px rgba(118, 185, 0, 0.17); }

.lock-note { margin: 15px 0 0; color: #8d9c8c; font-size: 11px; }

.session-panel, .route-panel, .catalogue-panel { box-shadow: none; }

.session-panel h2, .route-panel h2, .catalogue-panel h2 { margin: 11px 0 4px; font-size: 21px; }

.muted { color: var(--muted); font-size: 12px; }

.lock-panel .muted { color: #8d9c8c; }

.quiet-button { min-height: 26px; padding: 0 8px; border-color: var(--line); background: transparent; color: var(--ink-soft); font: 700 10px/1 var(--mono); text-transform: uppercase; }

.quiet-button:hover:not(:disabled) { border-color: var(--green-deep); background: var(--green-wash); color: var(--green-deep); }

.token-box { margin-top: 14px; padding: 6px 6px 6px 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.58); }

.token-box code { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.copy-button { min-height: 29px; padding: 0 9px; border-color: var(--line-dark); background: var(--paper-light); color: var(--ink); font: 700 10px/1 var(--mono); }

.copy-button:hover:not(:disabled) { background: var(--green-wash); color: var(--green-deep); }

.session-panel > .muted:last-child { margin: 12px 0 0; }

.route-list { display: grid; gap: 0; margin-top: 14px; }

.route-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); }

.route-row strong, .route-row span, .route-row em { display: block; }

.route-row strong { font-size: 13px; }

.route-row span, .route-row em { color: var(--muted); font: 10px/1.4 var(--mono); overflow-wrap: anywhere; }

.route-row em { margin-top: 3px; font-style: normal; }

.route-row .status-pill { align-self: start; }

.catalogue-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 15px 0 9px; }

.catalogue-stats div { padding: 9px 7px; border-top: 2px solid var(--green); background: rgba(118, 185, 0, 0.07); }

.catalogue-stats strong, .catalogue-stats span { display: block; }

.catalogue-stats strong { font: 700 22px/1 var(--display); }

.catalogue-stats span { margin-top: 4px; color: var(--muted); font: 9px/1.2 var(--mono); text-transform: uppercase; }

.snapshot-list { display: grid; gap: 5px; margin-top: 10px; }

.snapshot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font: 10px/1.3 var(--mono); }

.snapshot-row span { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.snapshot-row strong { color: var(--green-deep); font-size: 10px; text-transform: uppercase; }

.snapshot-row.offline strong { color: var(--red); }

.workbench { min-width: 0; }

.workbench-heading { align-items: flex-end; margin-bottom: 26px; }

.workbench-heading h2 { max-width: 670px; margin: 8px 0 8px; font-size: clamp(34px, 5vw, 58px); line-height: 0.99; }

.lede { max-width: 710px; margin: 0; color: var(--ink-soft); font-size: 15px; }

.route-stamp { min-width: 175px; padding: 12px; border: 1px solid var(--line-dark); background: rgba(248, 246, 240, 0.7); text-align: right; }

.route-stamp span { display: block; }

.route-stamp span:first-child { color: var(--green-deep); font: 700 18px/1 var(--display); }

.stamp-line { margin-top: 8px; color: var(--muted); font: 9px/1.2 var(--mono); letter-spacing: 0.08em; }

.capability-tabs { display: flex; gap: 0; margin-bottom: 12px; border-bottom: 1px solid var(--ink); overflow-x: auto; }

.tab { min-width: 116px; min-height: 46px; display: flex; align-items: center; gap: 9px; justify-content: flex-start; border-width: 1px 1px 0 0; border-color: var(--line); border-radius: 0; background: transparent; color: var(--muted); font: 700 14px/1 var(--sans); }

.tab:first-child { border-left-width: 1px; }

.tab span { color: var(--green-deep); font: 10px/1 var(--mono); }

.tab.active { position: relative; background: var(--ink); border-color: var(--ink); color: var(--paper-light); }

.tab.active span { color: var(--green); }

.toast { min-height: 35px; margin-bottom: 12px; padding: 8px 11px; border-left: 3px solid var(--line-dark); background: rgba(255, 255, 255, 0.44); color: var(--muted); font: 11px/1.35 var(--mono); }

.toast[data-tone="ok"] { border-color: var(--green); color: var(--green-deep); }

.toast[data-tone="warn"] { border-color: var(--red); color: var(--red); }

.workspace-panel { min-height: 620px; padding: clamp(18px, 3vw, 31px); box-shadow: var(--shadow); }

.workspace-panel[hidden] { display: none; }

.workspace-panel.active { display: grid; align-content: start; gap: 22px; }

.panel-heading { align-items: flex-start; padding-bottom: 17px; border-bottom: 1px solid var(--line); }

.panel-heading h2 { margin: 6px 0 5px; font-size: clamp(29px, 4vw, 42px); }

.panel-heading .muted { margin: 0; }

.chat-controls { display: grid; grid-template-columns: minmax(190px, 1fr) 150px 150px; gap: 10px; }

.field { display: block; min-width: 0; }

.field > span { display: block; margin-bottom: 6px; color: var(--muted); font: 700 10px/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }

.messages { min-height: 245px; max-height: min(48vh, 500px); overflow-y: auto; padding: 2px 7px 2px 0; display: grid; align-content: start; gap: 11px; }

.empty-message { padding: 21px; border: 1px dashed var(--line-dark); color: var(--muted); font-size: 13px; }

.message { width: min(760px, 89%); padding: 13px 15px; border-left: 3px solid var(--line-dark); background: var(--paper-light); }

.message.user { justify-self: end; border-color: var(--green); background: var(--green-wash); }

.message.assistant { justify-self: start; }

.message.pending { border-color: var(--amber); }

.message.error { border-color: var(--red); }

.role { display: block; margin-bottom: 5px; color: var(--green-deep); font: 700 10px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

.message-body { white-space: pre-wrap; overflow-wrap: anywhere; }

.message-meta { margin-top: 8px; color: var(--muted); font: 10px/1.3 var(--mono); }

.composer { display: grid; grid-template-columns: minmax(0, 1fr) 156px; gap: 10px; align-items: stretch; }

.composer textarea { min-height: 68px; }

.composer button { min-height: 68px; }

.generation-form { display: grid; grid-template-columns: minmax(0, 1fr) 215px; gap: 12px; align-items: end; }

.generation-form button { grid-column: 2; }

.media-result { min-height: 370px; display: grid; place-items: center; border: 1px dashed var(--line-dark); background: repeating-linear-gradient(45deg, rgba(118, 185, 0, 0.04) 0, rgba(118, 185, 0, 0.04) 2px, transparent 2px, transparent 10px); color: var(--muted); text-align: center; overflow: hidden; }

.media-result img { width: 100%; max-height: 600px; object-fit: contain; }

.speech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.tool-card { display: grid; align-content: start; gap: 14px; padding: 19px; box-shadow: none; }

.tool-card h3 { margin: 6px 0 0; font: 700 27px/1.05 var(--display); }

.file-drop { min-height: 126px; display: grid; place-items: center; padding: 14px; border: 1px dashed var(--line-dark); background: var(--paper-light); color: var(--muted); text-align: center; cursor: pointer; }

.file-drop:hover { border-color: var(--green-deep); color: var(--green-deep); }

.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }

output { min-height: 82px; padding: 11px; border: 1px solid var(--line); background: var(--paper-light); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }

audio { width: 100%; }

.dual-status { display: flex; gap: 7px; flex-wrap: wrap; }

.api-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }

.api-status-card { min-height: 77px; display: grid; align-content: center; gap: 6px; padding: 11px; box-shadow: none; }

.api-status-card span { color: var(--muted); font: 700 9px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

.api-status-card strong { font: 700 17px/1 var(--display); }

.api-examples { display: grid; gap: 12px; }

.endpoint-card { overflow: hidden; box-shadow: none; }

.endpoint-head { align-items: flex-start; padding: 12px; border-bottom: 1px solid var(--line); background: rgba(229, 223, 209, 0.45); }

.endpoint-head strong, .endpoint-head span { display: block; }

.endpoint-head strong { font-size: 13px; }

.endpoint-head span { margin-top: 4px; color: var(--muted); font: 11px/1.4 var(--mono); overflow-wrap: anywhere; }

.endpoint-head button { min-height: 29px; padding: 0 9px; border-color: var(--line-dark); background: var(--paper-light); color: var(--ink); font: 700 10px/1 var(--mono); }

.endpoint-head button:hover:not(:disabled) { background: var(--green-wash); color: var(--green-deep); }

pre { max-height: 220px; margin: 0; padding: 14px; overflow: auto; background: var(--black); color: #d6e4ca; font-size: 11px; line-height: 1.6; white-space: pre-wrap; }

.hidden { display: none !important; }

.site-footer { display: flex; justify-content: space-between; gap: 14px; padding: 17px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font: 10px/1.3 var(--mono); }

@media (max-width: 1080px) {
  .masthead, .console-layout, .site-footer { width: min(100% - 34px, 900px); }
  .masthead { grid-template-columns: 1fr auto; gap: 18px; }
  .policy-line { grid-column: 1 / -1; grid-row: 2; max-width: none; padding-bottom: 12px; }
  .docs-link { grid-column: 2; grid-row: 1; }
  .console-layout { grid-template-columns: 1fr; gap: 22px; }
  .security-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .lock-panel { grid-column: 1 / -1; }
  .catalogue-panel { grid-column: 1 / -1; }
  .workspace-panel { min-height: auto; }
}

@media (max-width: 700px) {
  .masthead, .console-layout, .site-footer { width: calc(100% - 24px); }
  .masthead { min-height: 145px; grid-template-columns: minmax(0, 1fr) auto; }
  .wordmark h1 { font-size: 25px; }
  .wordmark-mark { width: 37px; height: 37px; font-size: 23px; }
  .docs-link { font-size: 10px; }
  .console-layout { padding-top: 22px; }
  .security-rail { grid-template-columns: 1fr; }
  .lock-panel, .catalogue-panel { grid-column: auto; }
  .workbench-heading { display: block; margin-bottom: 18px; }
  .workbench-heading h2 { font-size: 39px; }
  .lede { font-size: 14px; }
  .route-stamp { width: 100%; margin-top: 18px; text-align: left; }
  .capability-tabs { margin-inline: -1px; }
  .tab { min-width: 92px; padding-inline: 11px; font-size: 12px; }
  .workspace-panel { padding: 17px 13px; }
  .panel-heading { display: block; }
  .panel-heading > .status-pill, .dual-status { margin-top: 12px; }
  .chat-controls, .generation-form, .speech-grid, .composer { grid-template-columns: 1fr; }
  .generation-form button { grid-column: auto; }
  .composer button { min-height: 48px; }
  .messages { max-height: 52vh; }
  .message { width: 100%; }
  .api-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { display: grid; }
}

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