:root {
  color-scheme:dark;
  --canvas:#11151b;
  --rail:#0d1116;
  --surface:#171c24;
  --raised:#1d2430;
  --editor:#0d1116;
  --line:#29313d;
  --line-soft:#1f2630;
  --line-strong:#3a4554;
  --ink:#e7ecf3;
  --body:#d5dce6;
  --muted:#a3afbf;
  --faint:#8c98a9;
  --blue:#8bbcff;
  --blue-strong:#b5d4ff;
  --blue-soft:#22334b;
  --blue-line:#3f5f8c;
  --on-accent:#0e1a2b;
  --green:#8dd4ae;
  --green-soft:#1b3128;
  --amber:#e8be79;
  --amber-soft:#221d15;
  --amber-line:#4a3f2b;
  --red:#f1a1a4;
  --red-soft:#3a2228;
  --red-line:#6b3a42;
  --sans:Inter,"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink);
  background:var(--canvas);
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--canvas);
}
button,input,textarea,select {
  font:inherit;
  color:inherit;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:default;
  opacity:.5;
}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:2px;
}
input:focus-visible,textarea:focus-visible {
  outline:none;
}
input::placeholder,textarea::placeholder {
  color:var(--faint);
  opacity:1;
}
[hidden] {
  display:none!important;
}
h1,h2,h3,h4,p {
  margin:0;
}
a {
  color:var(--blue);
  text-decoration:none;
}
a:hover {
  color:var(--blue-strong);
}
code,pre,textarea.json-editor {
  font-family:var(--mono);
}
pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

/* Brand */
.goals-logo {
  display:block;
  height:auto;
  flex-shrink:0;
  filter:invert(1);
  opacity:.92;
}
.brand,.brand-mark {
  display:flex;
  align-items:center;
  gap:12px;
}
.brand {
  border:0;
  background:transparent;
  padding:8px 12px;
  border-radius:8px;
  color:var(--ink);
}
.ai-chip {
  font-size:12px;
  font-weight:650;
  line-height:1;
  color:var(--on-accent);
  background:var(--blue);
  border-radius:5px;
  padding:4px 7px;
}

/* Buttons */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.primary {
  background:var(--blue);
  color:var(--on-accent);
}
.primary:hover:not(:disabled) {
  background:var(--blue-strong);
  color:var(--on-accent);
}
.secondary {
  background:var(--raised);
  border-color:var(--line-strong);
  color:var(--ink);
}
.secondary:hover:not(:disabled) {
  border-color:var(--muted);
}
.ghost,.outline {
  background:transparent;
  border-color:var(--line);
  color:var(--muted);
  font-weight:500;
}
.outline {
  color:var(--ink);
  border-color:var(--line-strong);
  font-weight:600;
}
.ghost:hover:not(:disabled),.outline:hover {
  color:var(--ink);
  border-color:var(--blue-line);
}
.danger {
  background:var(--red);
  color:#2a1114;
}
.text-button {
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  border-radius:8px;
  min-height:32px;
  padding:0 10px;
  font-size:13px;
  font-weight:500;
}
.text-button:hover:not(:disabled) {
  color:var(--ink);
  border-color:var(--line-strong);
}
.icon-button {
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--body);
}
.icon-button:hover {
  background:var(--surface);
}
.chip {
  min-height:38px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--body);
  font-size:13px;
  font-weight:500;
}
.chip:hover {
  border-color:var(--blue-line);
  color:var(--ink);
}
.chip[aria-pressed=true] {
  background:var(--blue-soft);
  border-color:var(--blue-line);
  color:var(--ink);
}
.pill {
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:2px 10px;
}
.section-label {
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
}
.helper {
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.notice {
  padding:12px 32px;
  background:var(--amber-soft);
  border-bottom:1px solid var(--amber-line);
  color:#ebd8b5;
  font-size:13px;
  line-height:1.6;
}
.callout {
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
  font-size:14px;
  line-height:1.6;
  color:var(--body);
}

/* Sign-in */
.sign-in {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
}
.sign-in-card {
  width:min(400px,100%);
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:36px 32px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}
.sign-in-card h1 {
  font-size:28px;
  font-weight:650;
  letter-spacing:-.01em;
  margin-top:10px;
}
.sign-in-card .button {
  align-self:flex-start;
}
.signed-out .notice {
  position:fixed;
  inset:auto 16px 16px;
  border:1px solid var(--amber-line);
  border-radius:12px;
}

/* Shell */
.mobile-bar,.nav-scrim {
  display:none;
}
.workspace {
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  min-height:100vh;
}
.sidebar {
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  background:var(--rail);
  border-right:1px solid var(--line-soft);
  padding:22px 14px 18px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.portal-nav {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nav-link {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 12px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:500;
  text-align:left;
}
.nav-link:hover {
  background:var(--surface);
  color:var(--ink);
}
.nav-link[aria-current=true] {
  background:var(--raised);
  color:var(--ink);
}
.console-tools {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
  flex-shrink:0;
}
.sidebar-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
}
.sidebar-heading h2 {
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
}
.count {
  color:var(--muted);
  background:var(--surface);
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
}
.search input {
  width:100%;
  min-height:38px;
  background:var(--surface);
  border:1px solid var(--line);
  padding:0 12px;
  border-radius:9px;
  font-size:13px;
}
.search input:focus {
  border-color:var(--blue-line);
}
.connector-group {
  margin-bottom:6px;
}
.connector-group > summary {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--body);
  cursor:pointer;
  list-style:none;
}
.connector-group > summary::-webkit-details-marker {
  display:none;
}
.connector-group > summary:hover {
  background:var(--surface);
}
.connector-group > summary::before {
  content:"";
  flex:none;
  width:0;
  height:0;
  border-left:4px solid currentColor;
  border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;
  transition:transform 120ms ease;
}
.connector-group[open] > summary::before {
  transform:rotate(90deg);
}
.connector-group > summary > span {
  margin-left:auto;
  font-size:11px;
  font-weight:500;
  color:var(--faint);
}
.operation-link {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:34px;
  padding:0 12px 0 26px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  text-align:left;
}
.operation-link:hover {
  background:var(--surface);
  color:var(--ink);
}
.operation-link[aria-current=true] {
  background:var(--blue-soft);
  color:var(--ink);
}
.operation-marker {
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--line-strong);
}
.operation-marker.write {
  background:var(--amber);
}
.sidebar-empty {
  padding:0 12px;
  font-size:13px;
  color:var(--muted);
}
.account {
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  padding:16px 12px 0;
  border-top:1px solid var(--line-soft);
  font-size:13px;
  color:var(--muted);
}
.connection-state {
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 0 100%;
}
.connection-state:before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--faint);
}
.connection-state.connected:before {
  background:var(--green);
}
.host {
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  color:var(--faint);
}
.account .button {
  min-height:34px;
  padding:0 12px;
  font-size:13px;
}
main {
  min-width:0;
}

/* Pages */
.page {
  max-width:1120px;
  margin:0 auto;
  padding:56px 48px 72px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.page.narrow {
  max-width:880px;
}
.page-header {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.page-header h1,.ask-start h1 {
  font-size:34px;
  font-weight:650;
  letter-spacing:-.015em;
  line-height:1.15;
}
.lede {
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  max-width:660px;
}
.panel {
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.panel h2 {
  font-size:16px;
  font-weight:600;
}
.panel p,.plain-list {
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
}
.plain-list {
  margin:0;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.endpoints {
  margin:4px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.endpoints > div {
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:12px;
  padding-top:10px;
  border-top:1px solid var(--line-soft);
}
.endpoints dt {
  font-size:13px;
  font-weight:600;
}
.endpoints dd {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.endpoints code {
  font-size:13px;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.endpoints span {
  font-size:12px;
  color:var(--faint);
}
.link-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  font-size:14px;
}
.missing-id {
  color:var(--blue);
  font-size:13px;
  overflow-wrap:anywhere;
}

/* Ask AI */
.ask {
  max-width:808px;
  margin:0 auto;
  min-height:100vh;
  padding:96px 24px 48px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.ask.conversing {
  padding-top:0;
  padding-bottom:0;
  gap:0;
}
.ask-start {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ask-start h1 {
  font-size:44px;
  letter-spacing:-.02em;
  line-height:1.1;
}
.ask-start h1:focus {
  outline:none;
}
.ask-start .lede {
  font-size:16px;
}
.ask-routes {
  display:flex;
  flex-direction:column;
  gap:36px;
}
.prompt-examples {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.routes {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.route-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.tile {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  text-align:left;
}
.tile:hover {
  border-color:var(--line-strong);
}
.tile strong {
  font-weight:600;
}
.tile span {
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.chat-header {
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 0;
  background:var(--canvas);
  border-bottom:1px solid var(--line-soft);
}
.chat-title {
  font-size:16px;
  font-weight:600;
}
.chat-transcript {
  display:flex;
  flex-direction:column;
  gap:36px;
}
.ask.conversing .chat-transcript {
  flex:1;
  padding:36px 0 28px;
}
.chat-turn,.chat-pending {
  scroll-margin:96px 0 160px;
}
.chat-turn.question {
  display:flex;
  justify-content:flex-end;
}
.bubble {
  max-width:min(560px,85%);
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:18px 18px 4px 18px;
  padding:13px 18px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.chat-turn.answer {
  display:flex;
  gap:16px;
}
.avatar {
  flex:0 0 32px;
  height:32px;
  border-radius:9px;
  background:var(--blue);
  color:var(--on-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
}
.answer-content {
  flex:1;
  min-width:0;
  padding-top:4px;
}
.chat-pending {
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--muted);
  font-size:14px;
}
.dots {
  display:flex;
  gap:5px;
}
.dots span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue);
  animation:pulse 1.2s infinite ease-in-out;
}
.dots span:nth-child(2) {
  animation-delay:.15s;
}
.dots span:nth-child(3) {
  animation-delay:.3s;
}
@keyframes pulse {
  0%,80%,100% { opacity:.25; }
  40% { opacity:1; }
}
.markdown {
  color:var(--body);
  line-height:1.7;
  overflow-wrap:anywhere;
}
.markdown > * + * {
  margin-top:14px;
}
.markdown h3,.markdown h4 {
  margin-top:26px;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
}
.markdown h4 {
  font-size:15px;
}
.markdown strong {
  color:var(--ink);
  font-weight:600;
}
.markdown ol,.markdown ul {
  margin-bottom:0;
  padding-left:22px;
}
.markdown li + li {
  margin-top:8px;
}
.markdown li::marker {
  color:var(--faint);
}
.markdown code,.resource-steps code {
  font-size:.86em;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 6px;
  color:var(--ink);
}
.markdown blockquote {
  margin-left:0;
  margin-right:0;
  border:1px solid var(--amber-line);
  background:var(--amber-soft);
  border-radius:12px;
  padding:14px 16px;
  color:#ebd8b5;
  font-size:14px;
}
.code-block {
  margin:0;
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--editor);
}
.code-block figcaption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 8px 6px 16px;
  border-bottom:1px solid var(--line-soft);
  font-size:12px;
  color:var(--faint);
}
.code-block pre {
  padding:16px;
  overflow-x:auto;
  white-space:pre;
  overflow-wrap:normal;
  font-size:13px;
  line-height:1.75;
  color:var(--body);
}
.guide-reference {
  border:0;
  padding:0;
  background:transparent;
  color:var(--blue);
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:var(--blue-line);
  text-underline-offset:3px;
}
.guide-reference:hover {
  color:var(--blue-strong);
}
.answer-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.answer-sources {
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.source-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.source-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--ink);
  text-align:left;
}
.source-card:hover {
  border-color:var(--line-strong);
}
.source-card strong {
  font-size:14px;
  font-weight:600;
}
.source-card span:last-child {
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.composer {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ask.conversing .composer {
  position:sticky;
  bottom:0;
  z-index:2;
  padding:12px 0 24px;
  background:var(--canvas);
}
.composer-box {
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:18px;
  padding:14px 12px 12px 20px;
  transition:border-color .12s;
}
.composer-box:focus-within {
  border-color:var(--blue-line);
}
.composer textarea {
  width:100%;
  min-height:56px;
  max-height:280px;
  resize:none;
  border:0;
  background:transparent;
  font-size:16px;
  line-height:1.6;
}
.ask.conversing .composer textarea {
  min-height:28px;
  height:52px;
}
.composer-bar {
  display:flex;
  align-items:center;
  gap:10px;
}
.composer-status {
  margin-right:auto;
  font-size:12px;
  color:var(--faint);
}
.send-button {
  flex:0 0 44px;
  height:44px;
  border:0;
  border-radius:12px;
  background:var(--blue);
  color:var(--on-accent);
  display:flex;
  align-items:center;
  justify-content:center;
}
.send-button:hover:not(:disabled) {
  background:var(--blue-strong);
}
.composer-note {
  font-size:12px;
  line-height:1.5;
  color:var(--faint);
}

/* Explore */
.filters {
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px;
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:#141920;
}
.filter-row {
  display:flex;
  align-items:baseline;
  gap:14px;
}
.filter-label {
  flex:0 0 84px;
  font-size:13px;
  color:var(--faint);
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.filters .chip {
  min-height:34px;
  background:transparent;
  color:var(--muted);
}
.filters .chip[aria-pressed=true] {
  background:var(--blue-soft);
  color:var(--ink);
}
.results-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:40px;
}
.results-count {
  font-size:13px;
  color:var(--muted);
}
.components {
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.system-map-frame {
  min-width:0;
  margin:0 0 8px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  overflow-x:auto;
}
.system-map {
  display:block;
  width:100%;
  min-width:860px;
  height:auto;
}
.system-map .node {
  fill:var(--raised);
  stroke:var(--line-strong);
}
.system-map .hub {
  fill:var(--blue-soft);
  stroke:var(--blue-line);
}
.system-map .node-title {
  fill:var(--ink);
  font-size:13px;
  font-weight:600;
  text-anchor:middle;
}
.system-map .node-sub {
  fill:var(--body);
  font-size:12px;
  text-anchor:middle;
}
.system-map .chip-text {
  fill:var(--body);
  font-size:13px;
  text-anchor:middle;
}
.system-map .map-label {
  fill:var(--muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.system-map .map-note {
  fill:var(--muted);
  font-size:12px;
}
.system-map .edge {
  fill:none;
  stroke:var(--blue);
  stroke-width:1.5;
}
.system-map .handoff {
  stroke:var(--amber);
  stroke-dasharray:4 3;
}
.system-map .arrow-head {
  fill:var(--blue);
}
.system-map .handoff-head {
  fill:var(--amber);
}
.system-map .map-link {
  cursor:pointer;
}
.system-map .hit {
  fill:transparent;
}
.system-map .map-link:hover .node,.system-map .map-link:focus-visible .node {
  stroke:var(--blue);
}
.system-map .map-link:hover .hub,.system-map .map-link:focus-visible .hub {
  stroke:var(--blue-strong);
}
.system-map .map-link:hover text,.system-map .map-link:focus-visible text {
  text-decoration:underline;
}
.system-map .map-link:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.system-map .sub-link {
  fill:var(--blue);
}
.system-map .node-sub.anchor-end {
  text-anchor:end;
}
.system-map .node-sub.anchor-start {
  text-anchor:start;
}
.resource-card.component-card .resource-toggle::after {
  content:"Details";
}
.resource-card.component-card[open] .resource-toggle::after {
  content:"Hide details";
}
.resource-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.resource-card {
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  overflow-wrap:anywhere;
}
.resource-card[open] {
  grid-column:1/-1;
  scroll-margin-top:24px;
  border-color:var(--blue-line);
}
.resource-summary {
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px;
  cursor:pointer;
  list-style:none;
  border-radius:16px;
}
.resource-summary::-webkit-details-marker {
  display:none;
}
.resource-type {
  font-size:12px;
  font-weight:600;
  color:var(--blue);
}
.resource-type.type-connector {
  color:var(--green);
}
.resource-type.type-hosting,.resource-type.type-model-api {
  color:var(--amber);
}
.resource-type.type-component {
  color:var(--blue-strong);
}
.resource-title {
  font-size:16px;
  font-weight:600;
  line-height:1.35;
}
.resource-card[open] .resource-summary {
  height:auto;
}
.resource-card[open] .resource-title {
  font-size:22px;
}
.resource-intro {
  flex:1;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}
.resource-toggle {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
  font-size:12px;
  color:var(--faint);
}
.resource-toggle::after {
  content:"Show steps";
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px 10px;
}
.resource-card[open] .resource-toggle::after {
  content:"Hide steps";
}
.resource-steps {
  list-style:none;
  counter-reset:step;
  margin:0;
  padding:0 22px;
}
.resource-steps li {
  counter-increment:step;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:14px;
  padding:14px 0;
  border-top:1px solid #222a35;
  font-size:14px;
  line-height:1.65;
  color:var(--body);
}
.resource-steps li::before {
  content:counter(step);
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.resource-owner {
  padding:12px 22px 0;
  font-size:13px;
  color:var(--faint);
}
.resource-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  padding:16px 22px 22px;
  font-size:14px;
}
.text-link {
  color:var(--blue);
}

/* Access */
.provider-list {
  margin:0;
  padding:0;
  list-style:none;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
}
.provider-list li {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px;
}
.provider-list li + li {
  border-top:1px solid #222a35;
}
.provider-text {
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.provider-name {
  display:flex;
  align-items:center;
  gap:10px;
}
.provider-name h2 {
  font-size:16px;
  font-weight:600;
}
.provider-text p {
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
}

/* Linked accounts */
.provider-list li.highlighted {
  background:var(--blue-soft);
  box-shadow:inset 3px 0 0 var(--blue);
}
.provider-text .state-linked {
  color:var(--green);
}
.provider-text .state-broken {
  color:var(--amber);
}
.account-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Operation console */
.operation {
  padding:32px 36px 48px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.operation-heading {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.eyebrow {
  font-size:13px;
  color:var(--faint);
}
.title-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.title-row h1 {
  font-size:26px;
  font-weight:650;
  letter-spacing:-.01em;
}
.operation-meta {
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-size:13px;
  color:var(--faint);
}
.operation-meta code {
  color:var(--muted);
}
.badge {
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:600;
  color:var(--green);
  background:var(--green-soft);
  border-radius:999px;
  padding:3px 10px;
  white-space:nowrap;
}
.badge.mutation {
  color:var(--amber);
  background:var(--amber-soft);
}
.badge.error {
  color:var(--red);
  background:var(--red-soft);
}
.panes {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
.pane {
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  padding:16px 18px 18px;
  min-width:0;
}
.pane-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:32px;
  margin-bottom:14px;
}
.pane-heading h2 {
  font-size:14px;
  font-weight:600;
}
.pane-actions,.response-meta {
  display:flex;
  align-items:center;
  gap:6px;
}
.response-meta {
  gap:10px;
  font-size:12.5px;
  color:var(--faint);
}
.json-editor {
  display:block;
  width:100%;
  min-height:220px;
  resize:vertical;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:var(--editor);
  color:var(--body);
  padding:16px;
  font-size:13px;
  line-height:1.75;
  tab-size:2;
}
.json-editor:focus {
  border-color:var(--blue-line);
}
.input-error {
  font-size:13px;
  line-height:1.5;
  color:var(--red);
  margin-top:10px;
}
.link-status {
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  margin-top:10px;
  overflow-wrap:anywhere;
}
.link-error {
  border:1px solid var(--red-line);
  background:var(--red-soft);
  color:var(--red);
  border-radius:12px;
  padding:12px 16px;
  margin-bottom:14px;
  font-size:13px;
  line-height:1.6;
}
.link-error-title {
  font-weight:600;
}
.link-error ul {
  margin:6px 0;
  padding-left:18px;
  overflow-wrap:anywhere;
}
.link-error-help {
  color:var(--ink);
}
.run-bar {
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px 0 6px;
}
.run-bar > span {
  font-size:12.5px;
  color:var(--faint);
  margin-right:auto;
}
.reference {
  border-top:1px solid var(--line-soft);
  margin-top:12px;
  padding-top:14px;
}
.reference summary {
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
}
.reference summary span {
  font-weight:500;
  letter-spacing:0;
  margin-left:4px;
}
.field {
  display:grid;
  grid-template-columns:minmax(120px,30%) minmax(0,1fr);
  gap:4px 14px;
  padding:10px 0;
  border-top:1px solid var(--line-soft);
}
.field:first-child {
  border-top:0;
  margin-top:6px;
}
.field-header {
  grid-row:span 2;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
}
.field-header code {
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.field-type {
  color:var(--faint);
}
.required {
  color:var(--amber);
  font-size:11.5px;
}
.field p {
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.field-default {
  grid-column:2;
  font-size:12px;
  color:var(--faint);
}
.schema {
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin-top:12px;
  max-height:350px;
  overflow:auto;
}
.response-empty {
  text-align:center;
  padding:64px 10px;
  color:var(--blue);
}
.response-empty h3 {
  margin-top:14px;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}
.response-empty p {
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}
.response-body {
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:var(--editor);
  padding:16px;
  font-size:13px;
  line-height:1.75;
  color:var(--body);
  max-height:70vh;
  overflow:auto;
}
.json-key {
  color:var(--blue);
}
.json-string {
  color:var(--green);
}
.json-number,.json-literal {
  color:var(--amber);
}
.json-punctuation {
  color:var(--faint);
}
.response-note {
  background:var(--blue-soft);
  padding:12px 14px;
  border-radius:10px;
  font-size:13px;
  line-height:1.6;
  margin-bottom:14px;
}
.response-note.error {
  background:var(--red-soft);
  color:var(--red);
}
dialog {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  width:min(560px,calc(100vw - 32px));
  padding:0;
  box-shadow:0 18px 80px #00000066;
  color:var(--ink);
}
dialog::backdrop {
  background:#080c12b3;
}
.dialog-content {
  padding:28px;
}
.dialog-content h2 {
  font-size:22px;
  font-weight:650;
  margin:14px 0;
}
.dialog-content p {
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
  margin:12px 0;
}
.dialog-content .schema {
  background:var(--editor);
  border-radius:10px;
  padding:14px;
}
.dialog-content .mutation-link-note {
  color:var(--amber);
}
.dialog-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:24px;
}

/* Artifacts */
.artifact-group {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:32px;
}
.artifact-list {
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.artifact-open-row {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  text-align:left;
}
.artifact-open-row:hover {
  border-color:var(--line-strong);
}
.artifact-open-row strong {
  font-weight:600;
}
.artifact-row-meta {
  font-size:13px;
  color:var(--muted);
}
.viewing-artifact .sidebar,
.viewing-artifact .mobile-bar {
  display:none;
}
.viewing-artifact .workspace {
  display:block;
}
.artifact-viewer {
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  background:var(--canvas);
}
.artifact-bar {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:6px 12px 6px 6px;
  border-bottom:1px solid var(--line-soft);
  background:var(--rail);
}
.artifact-heading {
  flex:1;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.artifact-heading h1 {
  font-size:15px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.artifact-heading h1:focus {
  outline:none;
}
.artifact-meta {
  font-size:12.5px;
  color:var(--faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.artifact-actions {
  display:flex;
  align-items:center;
  gap:6px;
}
.artifact-actions a.text-button {
  display:inline-flex;
  align-items:center;
  color:var(--muted);
}
.artifact-actions .button {
  min-height:34px;
  padding:0 12px;
  font-size:13px;
}
.artifact-status {
  padding:10px 16px;
  font-size:13px;
  color:#ebd8b5;
  background:var(--amber-soft);
  border-bottom:1px solid var(--amber-line);
}
.artifact-frame-box {
  flex:1;
  min-height:0;
  background:#fff;
}
.artifact-frame-box iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}
.share-list {
  margin:16px 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.share-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14px;
  overflow-wrap:anywhere;
}
.share-row > button {
  flex:none;
  white-space:nowrap;
}
.share-row-label {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.share-row-detail {
  font-size:12px;
  color:var(--muted);
}
.share-person {
  margin:16px 0;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
}
.share-person .section-label {
  margin-top:0;
}
.share-person-fields {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto auto;
  align-items:end;
  gap:8px;
}
.share-field {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:var(--muted);
}
.share-field input,
.share-field select {
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
  font-size:14px;
  color:inherit;
  background:transparent;
}
.share-roles {
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
}
@media(max-width:640px) {
  .share-person-fields {
    grid-template-columns:1fr 1fr;
  }
  .share-field-email,
  #share-person-add {
    grid-column:1 / -1;
  }
}
.share-everyone {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:16px 0;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
}
.share-everyone:has(input:checked) {
  border-color:var(--blue-line);
}
.share-everyone:has(input:focus-visible) {
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.share-everyone input {
  width:18px;
  height:18px;
  margin:2px 0 0;
  accent-color:var(--blue);
  flex:none;
}
.share-everyone > span {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:14px;
}
.share-everyone > span > span {
  font-size:13px;
  color:var(--muted);
}
.share-everyone > span > .share-everyone-terms {
  color:var(--ink);
  font-weight:600;
}
@media(max-width:900px) {
  .artifact-meta,
  #artifact-open {
    display:none;
  }
  .artifact-bar {
    flex-wrap:wrap;
  }
  .artifact-actions {
    gap:2px;
  }
}
@media(max-width:1180px) {
  .panes {
    grid-template-columns:minmax(0,1fr);
  }
  .resource-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:900px) {
  .mobile-bar {
    position:sticky;
    top:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px;
    background:var(--canvas);
    border-bottom:1px solid var(--line-soft);
  }
  .mobile-bar-end {
    width:44px;
  }
  .workspace {
    display:block;
  }
  .sidebar {
    position:fixed;
    z-index:10;
    inset:0 auto 0 0;
    width:min(300px,85vw);
    transform:translateX(-100%);
    transition:transform .18s ease;
    box-shadow:0 0 60px #0009;
  }
  .sidebar {
    visibility:hidden;
    transition:transform .18s ease,visibility 0s linear .18s;
  }
  .nav-open .sidebar {
    transform:none;
    visibility:visible;
    transition:transform .18s ease;
  }
  .nav-scrim {
    display:block;
    position:fixed;
    inset:0;
    z-index:9;
    border:0;
    padding:0;
    background:#080c12b3;
    cursor:default;
  }
  .ask {
    min-height:calc(100vh - 61px);
    padding:48px 16px 32px;
  }
  .ask.conversing {
    padding:0 16px;
  }
  .ask-start h1 {
    font-size:32px;
  }
  .chat-header {
    top:61px;
  }
  .chat-turn,.chat-pending {
    scroll-margin-top:156px;
  }
  .route-grid,.source-grid,.resource-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .page {
    padding:32px 16px 48px;
  }
  .page-header h1 {
    font-size:28px;
  }
  .filter-row {
    flex-direction:column;
    gap:8px;
  }
  .filter-label {
    flex:none;
  }
  .operation {
    padding:24px 16px 40px;
  }
  .field {
    grid-template-columns:minmax(0,1fr);
  }
  .field-header {
    grid-row:auto;
  }
  .field-default {
    grid-column:1;
  }
  .endpoints > div {
    grid-template-columns:minmax(0,1fr);
    gap:4px;
  }
  .notice {
    padding:12px 16px;
  }
  .provider-list li {
    padding:18px 16px;
  }
  .account-actions {
    width:100%;
  }
  .account-actions .button {
    flex:1 1 0;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    animation:none!important;
  }
}

.goalable-handoff {
  margin-top:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--editor);
}
.goalable-prompt {
  margin:8px 0 12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--body);
}