@font-face {
  font-family: "Neue Montreal";
  src: url("/NeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-base);
  font-synthesis: none;
  color: #191a1c;
  background: #f3f3f1;
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
  --quiet: var(--gf-quiet);
  --line: var(--gf-line);
  --surface: var(--gf-surface);
  --code: var(--gf-selected);
  --focus: var(--gf-focus);
  --nav-height: 64px;
  --sidebar-width: 208px;
  --sidebar-rail-width: 64px;
  --text-small: var(--gf-text-small);
  --text-base: var(--gf-text-base);
  --text-title: var(--gf-text-title);
  --radius: var(--gf-control-radius);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-size: var(--text-base); line-height: 1.5; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; font-size: var(--text-base); font-weight: 400; line-height: 1.5; color: inherit; }
h1, h2, h3, strong, b { font-weight: 400; }
h1 { margin: 0; font-size: var(--text-title); letter-spacing: -.025em; line-height: 1.2; overflow-wrap: anywhere; }
h2, h3 { margin: 0; font-size: var(--text-base); letter-spacing: -.015em; }
p { line-height: 1.55; }
a { color: inherit; text-underline-offset: .2em; }
button { cursor: pointer; padding: .5rem .85rem; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); min-height: 36px; font-size: var(--text-base); }
button:hover { background: var(--code); }
button:disabled { cursor: default; color: var(--quiet); }
.primary { background: #191a1c; color: #f3f3f1; border-color: #191a1c; }
.primary:hover { background: #3a3d42; }
.primary:disabled { background: var(--code); border-color: var(--line); color: var(--quiet); }
.text-button { border: 0; }
:focus:not(:focus-visible) { outline: 0; }
:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }
/* Headings and main take focus only programmatically, to move screen readers. */
[tabindex="-1"]:focus { outline: 0; }
input, textarea, select { width: 100%; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; }
textarea, pre, code, .endpoint { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--text-small); }
.inline-code { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); line-height: 1.5; overflow-wrap: anywhere; }
.code-list { display: flex; flex-wrap: wrap; gap: 6px; max-width: 28rem; white-space: normal; }
.environment-list { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.environment-summary { display: flex; align-items: center; gap: 8px; }
textarea { resize: vertical; min-height: 10rem; line-height: 1.65; background: var(--code); border: 0; }
label { display: block; margin-bottom: 8px; font-size: var(--text-base); }
small, .subtitle, .eyebrow { color: var(--quiet); font-size: var(--text-small); }
.masthead { position: sticky; top: 0; z-index: 4; height: var(--nav-height); display: flex; align-items: center; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--line); background: #f3f3f1; }
.brand { display: flex; flex: none; text-decoration: none; }
.brand img { flex: none; }
.breadcrumb { display: flex; align-items: center; gap: 16px; font-size: var(--text-base); min-width: 0; }
.breadcrumb a { text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb a:hover { text-decoration: underline; }
#crumb { display: flex; align-items: center; gap: 16px; min-width: 0; }
.breadcrumb-separator { color: #90918c; }
#scope-label, #deployment-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile { margin-left: auto; position: relative; flex: none; }
.profile-button { white-space: nowrap; }
.profile-button.gf-button { display: flex; align-items: center; gap: 12px; padding-right: 10px; }
.profile-menu { position: absolute; z-index: 2; top: 44px; right: 0; width: 148px; padding: var(--gf-menu-inset); border: 1px solid var(--line); border-radius: var(--radius); background: #f3f3f1; box-shadow: 0 4px 16px rgb(25 26 28 / .08); }
.profile-menu button { border: 0; width: 100%; text-align: left; }
.icon { width: var(--gf-icon-size); height: var(--gf-icon-size); flex: none; }
.icon-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; color: var(--quiet); }
.workspace-layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar-collapsed { --sidebar-width: var(--sidebar-rail-width); }
.sidebar { position: sticky; top: var(--nav-height); height: calc(100dvh - var(--nav-height)); display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 24px 12px 12px; background: #f3f3f1; overflow-x: hidden; overflow-y: auto; }
.sidebar-backdrop { display: none; }
.sidebar-links { display: flex; flex-direction: column; flex: 1; min-height: 460px; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 10px; margin-bottom: 12px; }
.sidebar-brand { white-space: nowrap; }
.sidebar-collapsed .sidebar-heading { padding-left: 0; }
.sidebar-collapsed .sidebar-brand { display: none; }
.sidebar-collapsed .sidebar-heading, .sidebar-collapsed .sidebar-links a, .sidebar-collapsed .documentation { justify-content: center; }
.sidebar-collapsed .sidebar-links a, .sidebar-collapsed .documentation { gap: 0; }
.sidebar-collapsed .nav-label { display: none; }
.sidebar-collapsed .nav-section { visibility: hidden; }
.sidebar-links a, .documentation { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 8px 10px; border-radius: var(--radius); text-decoration: none; font-size: var(--text-base); }
.sidebar-links a:hover, .documentation:hover { background: var(--surface); }
.sidebar-links a[aria-current="page"] { background: #e6e6e2; }
.nav-section { margin: auto 10px 8px; padding-top: 28px; color: var(--quiet); font-size: var(--text-small); }
.documentation { margin-top: auto; color: var(--quiet); }
.shell { grid-column: 2; min-width: 0; padding: 24px 32px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(100%); white-space: nowrap; }
.connection-error { margin: 0 0 20px; border-bottom: 1px solid var(--line); padding-bottom: 12px; font-size: var(--text-small); color: #b42318; }
main { min-width: 0; }
.heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-title { min-width: 0; padding-top: 2px; }
.page-title .badge { margin-top: 10px; }
.badge { display: inline-flex; padding: 3px 8px; border-radius: var(--radius); font-size: var(--text-small); line-height: 1.4; white-space: nowrap; color: #191a1c; }
.badge.ready { background: #dceee2; }
.badge.failed { background: #f9e0dd; }
.badge.empty-status, .badge.pending { background: #e3e3df; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.toolbar input { max-width: 280px; padding: 8px 10px; height: 36px; font-size: var(--text-base); }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; }
th { font-weight: 400; color: var(--quiet); font-size: var(--text-small); border-bottom: 1px solid var(--line); padding: 10px 20px 10px 0; white-space: nowrap; }
td { height: 48px; padding: 10px 20px 10px 0; border-bottom: 1px solid var(--line); font-size: var(--text-base); white-space: nowrap; }
td:first-child { width: 25%; }
td:last-child, th:last-child { padding-right: 0; }
td a { display: inline-block; padding: 4px 0; text-decoration: none; }
td a:hover { text-decoration: underline; }
.placeholder-message { color: var(--quiet); font-size: var(--text-base); }
.empty { border-bottom: 1px solid var(--line); padding: 2rem 0; }
.notice { padding: 1.25rem 0; color: var(--quiet); font-size: var(--text-small); max-width: 65rem; line-height: 1.6; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); margin: 24px 0; }
.metric { padding: 16px 20px 16px 0; }
.metric label { color: var(--quiet); }
.metric strong { display: block; font-size: var(--text-title); letter-spacing: -.02em; margin: .5rem 0; }
.tabs { display: flex; gap: 8px; padding: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; scroll-padding: 4px; }
.tab { border: 0; border-radius: 0; padding: 10px 12px; color: var(--quiet); white-space: nowrap; scroll-margin: 4px; }
.tab[aria-selected="true"] { color: #191a1c; box-shadow: inset 0 -2px #191a1c; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
.metadata { margin-bottom: 2.5rem; }
dl { margin: 0; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--line); line-height: 1.5; font-size: var(--text-base); }
dt { color: var(--quiet); }
dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.endpoint { padding: 0 0 1.2rem; overflow-wrap: anywhere; line-height: 1.5; }
.request-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.5rem; }
.response-label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; font-size: var(--text-small); }
pre { margin: 0; padding: 1rem; background: var(--code); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; border: 0; border-radius: 0; }
.response { max-height: 26rem; overflow: auto; min-height: 5rem; }
.code-editor { position: relative; background: var(--code); border-radius: var(--radius); overflow: hidden; }
.code-editor .code-highlight, .code-editor .code-input { padding: .8rem; margin: 0; border: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; tab-size: 2; scrollbar-width: none; }
.code-highlight { position: absolute; inset: 0; overflow: auto; pointer-events: none; }
.code-editor .code-input { position: relative; display: block; background: transparent; color: transparent; caret-color: #191a1c; }
.code-input::placeholder { color: var(--quiet); }
.code-input::selection { background: rgb(25 26 28 / .15); }
.code-editor:focus-within { outline: 1px solid var(--focus); outline-offset: 2px; }
.code-input:focus-visible { outline: 0; }
.syntax-key { color: #695681; }
.syntax-string { color: #38664d; }
.syntax-number { color: #875020; }
.syntax-boolean, .syntax-null { color: #315c85; }
.syntax-punctuation { color: var(--quiet); }
.alert { border-block: 1px solid #191a1c; padding: 1rem 0; margin-bottom: 1.5rem; line-height: 1.5; }
.alert p { margin: .5rem 0 0; color: var(--quiet); max-width: 65rem; font-size: var(--text-base); }
.form-error { font-size: var(--text-base); }
.form-error:empty { display: none; }
.scope-form { display: flex; align-items: flex-end; gap: 16px; margin: 24px 0; }
.scope-form > div { max-width: 280px; flex: 1; }
.management-action { max-width: 52rem; margin-top: 32px; border-top: 1px solid var(--line); padding-top: 24px; }
.management-action h2 { margin-bottom: 20px; }
.management-action input, .management-action select { margin-bottom: 20px; }
.management-action .gf-select { margin-bottom: 20px; }
.management-action .response { margin-top: 16px; }
.heading-actions, .dialog-actions { display: flex; gap: 12px; }
.dialog-actions { margin-top: 20px; }
.environment-field { width: 240px; max-width: 70%; }
.environment-field label { margin-bottom: 8px; }
.section-title, .detail-grid h2 { margin-bottom: 20px; }
.revision-action { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.revision-action > div { min-width: 160px; }
.digest { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.permission-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin-bottom: 24px; }
.permission-options legend { margin-bottom: 12px; font-size: var(--text-base); color: var(--quiet); }
.permission-options label { display: flex; align-items: center; gap: 8px; margin: 0; overflow-wrap: anywhere; }
.permission-options input { width: auto; margin: 0; }
#access-state, #action-state { min-height: 22px; }
#management-state { color: var(--quiet); font-size: var(--text-small); }
dialog { padding: 32px; width: min(40rem, calc(100% - 32px)); max-height: calc(100% - 32px); border: 1px solid var(--line); border-radius: var(--radius); background: #f3f3f1; color: #191a1c; }
dialog::backdrop { background: rgb(25 26 28 / .3); }
dialog p { margin: 0; color: var(--quiet); }
.dialog-stack { display: grid; gap: 24px; min-width: 0; }
.dialog-title { margin: 0; font-size: var(--text-title); line-height: 1.2; letter-spacing: -.025em; }
.dialog-intro { display: grid; gap: 12px; }
.dialog-stack .dialog-actions { margin-top: 0; flex-wrap: wrap; }
.form-field { display: grid; gap: 8px; min-width: 0; }
.form-field label { margin: 0; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialog-heading button { border: 0; }
.eyebrow { margin-top: 0; }
.sign-in { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; }
.sign-in::backdrop { background: #f3f3f1; }
.sign-in-page { display: grid; grid-template-rows: auto 1fr; min-height: 100%; }
.sign-in-header { display: flex; justify-content: center; align-items: baseline; gap: 28px; padding: 44px 24px 0; }
.sign-in-title { font-size: var(--text-base); line-height: 1.5; letter-spacing: -.015em; }
.sign-in-main { display: grid; align-content: center; gap: 48px; width: min(400px, calc(100% - 68px)); margin: 0 auto; padding: 40px 0 120px; }
.sign-in-actions { display: grid; gap: 16px; text-align: center; }
.sign-in-actions .form-field { text-align: left; }
.sign-in-providers { display: grid; gap: 12px; }
.sign-in-provider { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: var(--radius); background: #191a1c; color: #f3f3f1; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sign-in-provider[hidden] { display: none; }

.sign-in-provider:hover { background: #3a3d42; }
.sign-in-provider:focus-visible { outline-offset: 3px; }
.provider-mark { width: 22px; height: 22px; flex: none; }
.sign-in-actions .text-button { justify-self: center; }
.sign-in-buttons { display: grid; gap: 12px; }
.sign-in-buttons button { min-height: 44px; }
.onboarding-dialog { width: min(36rem, calc(100% - 32px)); }
.onboarding-section { display: grid; gap: 12px; min-width: 0; }
.choice-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.choice { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.choice-name { min-width: 0; overflow-wrap: anywhere; }
.choice-detail { color: var(--quiet); white-space: nowrap; }
.workspace-settings { margin-top: 40px; }
.workspace-settings > h2, .workspace-section > h2 { margin-bottom: 16px; }
.workspace-section { margin-top: 40px; }
.workspace-section .section-heading { align-items: flex-end; margin-bottom: 16px; }
.request-filter { width: 160px; }
.dns-record { margin-top: 24px; max-width: 52rem; }
.dns-record h3 { margin-bottom: 8px; }
.management-action h3 { margin-bottom: 20px; }
.action-state { min-height: 22px; }
#invitation-copy-state:empty, #invitation-notice:empty { display: none; }
.skip-link { position: fixed; top: -10rem; padding: 1rem; background: #f3f3f1; z-index: 5; }
.skip-link:focus { top: .5rem; left: .5rem; }
@media (max-width: 799px) {
  :root { --nav-height: 56px; }
  .masthead { padding: 0 16px; gap: 16px; }
  .workspace-layout { grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr); }
  #console:not(.sidebar-collapsed) .sidebar { position: fixed; top: var(--nav-height); bottom: 0; left: 0; width: var(--sidebar-width); z-index: 3; }
  #console:not(.sidebar-collapsed) .sidebar-backdrop { display: block; position: fixed; inset: var(--nav-height) 0 0; z-index: 2; background: rgb(25 26 28 / .18); }
  .shell { padding: 24px 20px; }
  .heading { gap: 16px; }
  .breadcrumb, #crumb { gap: 10px; }
  .table-wrap, .tabs { scrollbar-width: none; }
  .table-wrap::-webkit-scrollbar, .tabs::-webkit-scrollbar { height: 0; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
  .metric { padding: 1rem .5rem 1rem 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .metric:last-child { grid-column: 1 / -1; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .playground { grid-row: 1; }
  .permission-options { grid-template-columns: minmax(0, 1fr); }
  .kv { gap: 1rem; }
  .request-actions { flex-wrap: wrap; }
  dialog { padding: 20px; }
  .choice { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 0; }
  .choice-detail { grid-column: 1; grid-row: 2; }
  .choice > :last-child { grid-column: 2; grid-row: 1 / span 2; }
}
@media (forced-colors: active) {
  .code-highlight { display: none; }
  .code-editor .code-input { color: CanvasText; }
}