:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: rgba(13, 16, 22, 0.82);
  --surface-2: rgba(255, 255, 255, 0.055);
  --surface-3: rgba(255, 255, 255, 0.095);
  --text: #f8fafc;
  --muted: #c3cad5;
  --subtle: #98a2b1;
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.30);
  --accent: #ffffff;
  --accent-dark: #181818;
  --warning: #f6c85f;
  --danger: #ff7770;
  --info: #83b8ff;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 26px 90px rgba(0, 0, 0, 0.48);
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 9% 4%, rgba(255, 255, 255, 0.10), transparent 28rem),
    radial-gradient(circle at 92% 20%, rgba(132, 155, 196, 0.10), transparent 30rem),
    radial-gradient(circle at 52% 100%, rgba(255, 255, 255, 0.055), transparent 34rem),
    var(--bg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  pointer-events: none;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
::selection { color: #000; background: #fff; }

:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 8px;
  color: #000;
  background: var(--accent);
  font-weight: 700;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-shell { min-height: 100vh; min-height: 100dvh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 12px clamp(16px, 3vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(5, 7, 11, 0.86);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.brand-mark img { width: 31px; height: 31px; object-fit: contain; }
.brand > span:last-child { display: grid; gap: 1px; }
.brand strong { font-size: 15px; letter-spacing: -.01em; }
.brand small { color: var(--subtle); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1 1 auto; }
.desktop-nav a, .mobile-nav a { position: relative; padding: 10px 12px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 500; transition: color 180ms ease, background 180ms ease; }
.desktop-nav a:hover, .desktop-nav a.is-active, .mobile-nav a:hover, .mobile-nav a.is-active { color: #fff; background: rgba(255,255,255,.07); }
.desktop-nav a.is-active::after { position: absolute; right: 12px; bottom: 5px; left: 12px; height: 1px; background: var(--accent); content: ""; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu-button { position: relative; display: none; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.menu-button span { position: absolute; left: 13px; width: 18px; height: 1.5px; border-radius: 2px; background: #fff; transition: transform 180ms ease, opacity 180ms ease; }
.menu-button span:nth-child(1) { top: 16px; }
.menu-button span:nth-child(2) { top: 22px; }
.menu-button span:nth-child(3) { top: 28px; }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav { position: fixed; top: 72px; right: 12px; left: 12px; z-index: 35; display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: rgba(11, 15, 23, .98); box-shadow: var(--shadow); }

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.button.primary { color: #031109; background: var(--accent); border-color: var(--accent); box-shadow: 0 10px 32px rgba(72,229,139,.18); }
.button.primary:hover { background: #70eca4; border-color: #70eca4; }
.button.secondary { color: #fff; background: var(--surface-2); border-color: var(--border-strong); }
.button.secondary:hover, .button.ghost:hover { background: var(--surface-3); border-color: #526077; }
.button.ghost { color: var(--muted); background: transparent; border-color: var(--border); }
.button.danger { color: #fff; background: rgba(255,119,112,.12); border-color: rgba(255,119,112,.35); }
.button.wide { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.button.is-loading { cursor: wait; opacity: .7; }

main { width: min(100% - 32px, 1240px); min-height: calc(100vh - 160px); margin: 0 auto; }
.page-view { padding: clamp(44px, 7vw, 92px) 0 72px; animation: page-in 240ms ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: clamp(40px, 7vw, 96px); min-height: min(680px, calc(100vh - 104px)); padding: 48px 0; }
.hero-copy h1 { max-width: 760px; margin: 16px 0 22px; font-size: clamp(48px, 7.5vw, 96px); font-weight: 600; letter-spacing: -.065em; line-height: .96; text-wrap: balance; }
.hero-lead { max-width: 680px; margin: 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.58; }
.eyebrow { color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.hero-copy > .eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.hero-copy > .eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(72,229,139,.1); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.availability-note { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 14px rgba(246,200,95,.46); }
.status-dot.ready { background: var(--accent); box-shadow: 0 0 14px rgba(72,229,139,.48); }

.console-preview { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(11,15,23,.92); box-shadow: var(--shadow); }
.console-bar { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.console-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #4f5b6d; }
.console-bar > span:first-child { background: var(--danger); }
.console-bar > span:nth-child(2) { background: var(--warning); }
.console-bar > span:nth-child(3) { background: var(--accent); }
.console-bar strong { margin-left: auto; color: var(--subtle); font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; }
.console-preview pre { min-height: 330px; margin: 0; padding: clamp(24px, 4vw, 42px); overflow: auto; color: #e7edf7; font: 500 13px/1.85 var(--mono); }
.code-muted { color: #6f7c91; }.code-accent { color: var(--info); }.code-good { color: var(--accent); }

.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--radius); background: rgba(11,15,23,.78); }
.trust-strip > div { display: grid; gap: 5px; padding: 22px 24px; }
.trust-strip > div + div { border-left: 1px solid var(--border); }
.trust-strip strong { font-size: 14px; }.trust-strip span { color: var(--subtle); font-size: 13px; line-height: 1.45; }
.home-section { padding-top: 96px; }
.section-heading { margin-bottom: 28px; }.section-heading h2, .page-heading h1 { margin: 8px 0 0; font-size: clamp(34px, 4vw, 54px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps-grid article, .support-grid article { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.steps-grid article > span { color: var(--accent); font: 500 12px var(--mono); }
.steps-grid h3, .support-grid h2 { margin: 32px 0 8px; font-size: 19px; }.steps-grid p, .support-grid p { margin: 0; color: var(--muted); line-height: 1.6; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 36px; }
.page-heading p { max-width: 720px; margin: 14px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.page-heading code { color: #dfe7f4; font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere; }
.compact-heading { margin-bottom: 28px; }
.configuration-badge { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface); font-family: var(--mono); font-size: 11px; }
.configuration-badge.ready { color: var(--accent); border-color: rgba(72,229,139,.3); background: rgba(72,229,139,.06); }

.checkout-alert, .form-status:not(:empty) { padding: 13px 15px; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); background: var(--surface); font-size: 14px; line-height: 1.5; }
.checkout-alert { margin-bottom: 18px; }
.checkout-alert.is-error, .form-status.is-error { color: #ffaaa6; border-color: rgba(255,119,112,.34); background: rgba(255,119,112,.08); }
.checkout-alert.is-success, .form-status.is-success { color: #a5f5c5; border-color: rgba(72,229,139,.3); background: rgba(72,229,139,.07); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 22px; }
.configurator { display: grid; gap: 16px; }
.configurator fieldset { min-width: 0; margin: 0; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.configurator legend { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 600; }
.configurator legend span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #06130b; background: var(--accent); font: 600 11px var(--mono); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice-card, .package-card { position: relative; display: grid; gap: 8px; min-height: 108px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); background: var(--surface-2); cursor: pointer; transition: border-color 180ms ease, background 180ms ease; }
.choice-card:hover, .package-card:hover { border-color: var(--border-strong); }
.choice-card:has(input:checked), .package-card:has(input:checked) { color: #fff; border-color: var(--accent); background: rgba(72,229,139,.07); }
.choice-card input, .package-card input { position: absolute; top: 14px; right: 14px; accent-color: var(--accent); }
.choice-card strong, .package-card strong { max-width: calc(100% - 28px); font-size: 15px; }.choice-card small, .package-card small { color: var(--subtle); line-height: 1.45; }
.package-card .price { margin-top: auto; color: #fff; font: 600 16px var(--mono); }
.package-card .bonus { color: var(--accent); font: 500 11px var(--mono); }
.field { display: grid; gap: 8px; margin-top: 16px; color: #d9e1ed; font-size: 14px; font-weight: 500; }
.field small { color: var(--subtle); font-weight: 400; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: #fff; background: #080b11; transition: border-color 180ms ease, box-shadow 180ms ease; }
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #657187; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(72,229,139,.12); }
.order-summary { position: sticky; top: 92px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 16px 50px rgba(0,0,0,.2); }
.order-summary h2 { margin: 8px 0 22px; font-size: 22px; }.order-summary dl { margin: 0; }.order-summary dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); }.order-summary dt { color: var(--muted); }.order-summary dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 13px; }.order-summary .summary-price { margin-top: 8px; padding-top: 18px; border-bottom: 0; }.summary-price dt, .summary-price dd { color: #fff; font-size: 18px; font-weight: 600; }.order-summary > p { margin: 18px 0 0; color: var(--subtle); font-size: 12px; line-height: 1.55; }

.key-check-form { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.key-check-form > label { display: block; margin-bottom: 8px; font-weight: 600; }.key-check-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }.key-check-form small { display: block; margin-top: 10px; color: var(--subtle); }
.form-status { min-height: 0; margin: 14px 0 0; }.usage-panel { display: grid; gap: 16px; margin-top: 20px; }
.metric-grid, .account-metrics, .admin-stats, .readiness-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric-card, .account-metric, .admin-stat, .readiness-card { padding: 19px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.metric-card span, .account-metric span, .admin-stat span, .readiness-card span { display: block; color: var(--subtle); font-size: 12px; }.metric-card strong, .account-metric strong, .admin-stat strong { display: block; margin-top: 12px; font: 600 clamp(18px, 2.2vw, 28px) var(--mono); overflow-wrap: anywhere; }.metric-card small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.data-panel, .admin-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.panel-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.panel-title h2, .admin-card h2 { margin: 6px 0 0; font-size: 22px; }.panel-title > span { color: var(--subtle); font-size: 12px; }.panel-copy { color: var(--muted); line-height: 1.6; }
.model-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }.model-chip-list span { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; color: #c9d3e2; background: var(--surface-2); font: 500 11px var(--mono); }
.usage-panel { width: min(100%, 1100px); margin-right: auto; margin-left: auto; }
.checker-identity { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.checker-identity > div { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.checker-identity strong { font-size: 17px; }
.checker-identity code { color: var(--muted); font: 13px var(--mono); }
.checker-identity small { width: 100%; color: var(--subtle); font-size: 12px; }
.usage-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.usage-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.usage-card-heading h2 { margin: 0; color: var(--muted); font-size: 15px; font-weight: 500; }
.usage-card-heading strong { font: 600 18px var(--mono); font-variant-numeric: tabular-nums; }
.quota-track { height: 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.11); box-shadow: inset 0 2px 5px rgba(0,0,0,.34); }
.quota-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fff, #cbd4df); box-shadow: 0 0 18px rgba(255,255,255,.24); transition: width 500ms cubic-bezier(.22,1,.36,1); }
.quota-card p { margin: 12px 0 0; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.breakdown-bar { display: flex; height: 11px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.breakdown-bar span { display: block; width: 0; height: 100%; transition: width 500ms cubic-bezier(.22,1,.36,1); }
.breakdown-bar .input, .breakdown-legend i.input { background: #f8fafc; }
.breakdown-bar .output, .breakdown-legend i.output { background: #76dbc5; }
.breakdown-bar .cache, .breakdown-legend i.cache { background: #9386e8; }
.breakdown-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.breakdown-legend > div { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.breakdown-legend i { width: 10px; height: 10px; border-radius: 50%; }
.breakdown-legend strong { justify-self: end; color: #fff; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.checker-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.checker-metrics .metric-card { min-height: 116px; }
.checker-metrics .metric-card span { font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.checker-metrics .metric-card strong { margin-top: 18px; font-size: clamp(19px, 2.1vw, 27px); font-variant-numeric: tabular-nums; }
.key-details-card { padding-top: 19px; padding-bottom: 19px; }
.key-detail-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin: 0; }
.key-detail-grid div { min-width: 0; }
.key-detail-grid dt { color: var(--subtle); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.key-detail-grid dd { margin: 5px 0 0; overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.checker-models span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-table { min-width: 760px; }
.usage-table td:not(:first-child), .usage-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.usage-table td:first-child { max-width: 240px; }
.usage-table code { display: block; overflow: hidden; color: #eef3fa; text-overflow: ellipsis; }
.usage-table .usage-failure { color: var(--danger); }
.usage-table-wrap:focus-visible { outline: 3px solid rgba(255,255,255,.8); outline-offset: 3px; }
.request-history-list { display: grid; gap: 10px; }
.request-history-item { padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(0,0,0,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.055); }
.request-history-head, .request-history-head > div, .request-history-meta, .request-token-grid { display: flex; align-items: center; }
.request-history-head { justify-content: space-between; gap: 14px; }
.request-history-head > div { min-width: 0; gap: 9px; }
.request-history-head strong { overflow: hidden; font: 500 13px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.request-history-head > div > span { flex: 0 0 auto; padding: 3px 7px; border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.06); font-size: 11px; text-transform: capitalize; }
.request-history-meta { justify-content: space-between; gap: 12px; margin-top: 9px; color: var(--subtle); font-size: 12px; }
.request-token-grid { flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); color: var(--subtle); font-size: 12px; }
.request-token-grid strong { margin-left: 4px; color: #fff; font: 500 12px var(--mono); }
.server-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.server-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }.server-card h3 { margin: 6px 0 16px; font-size: 19px; }.server-card .model-chip-list { margin-top: 10px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.guide-card { min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }.guide-card h2 { margin: 8px 0; font-size: 23px; }.guide-card p, .guide-card li { color: var(--muted); line-height: 1.6; }.guide-type { color: var(--accent); font: 600 10px var(--mono); letter-spacing: .12em; }.guide-card pre { margin: 18px 0; padding: 16px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; color: #dce6f4; background: #070a0f; font: 12px/1.65 var(--mono); }.copy-button { min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface-2); font-size: 12px; }

.docs-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: clamp(30px, 5vw, 72px); }
.docs-sidebar { position: sticky; top: 96px; }
.docs-nav { display: grid; gap: 4px; padding-left: 14px; border-left: 1px solid var(--border); }
.docs-nav button { min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 14px; text-align: left; }
.docs-nav button:hover, .docs-nav button:focus-visible { color: #fff; background: var(--surface-2); }
.docs-content { min-width: 0; }
.docs-section { padding: 0 0 58px; scroll-margin-top: 100px; }
.docs-section + .docs-section { padding-top: 56px; border-top: 1px solid var(--border); }
.docs-section h2 { margin: 8px 0 22px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.035em; }
.docs-section h3 { margin: 30px 0 10px; font-size: 17px; }
.docs-section p, .docs-section li { max-width: 740px; color: var(--muted); line-height: 1.65; }
.docs-section pre { max-width: 100%; margin: 12px 0 0; padding: 18px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; color: #e1e9f5; background: #070a0f; font: 12px/1.7 var(--mono); }
.endpoint-pair, .doc-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.endpoint-pair > div { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.endpoint-pair span { display: block; margin-bottom: 10px; color: var(--subtle); font-size: 12px; }
.endpoint-pair code { display: block; overflow-wrap: anywhere; color: #fff; font: 500 13px var(--mono); }
.api-table td { white-space: normal; }
.api-table code { color: #e6edf7; }
.method { display: inline-flex; min-width: 48px; justify-content: center; padding: 5px 7px; border-radius: 7px; font: 600 10px var(--mono); }
.method.get { color: var(--info); background: rgba(131,184,255,.1); }
.method.post { color: var(--accent); background: rgba(72,229,139,.1); }
.doc-code-grid h3 { margin-top: 0; }
.doc-disclosure { border-top: 1px solid var(--border); }
.doc-disclosure:last-of-type { border-bottom: 1px solid var(--border); }
.doc-disclosure summary { min-height: 56px; padding: 16px 4px; color: #eef3fa; font-weight: 600; cursor: pointer; }
.doc-disclosure > div { padding: 0 4px 20px; }
.doc-disclosure .copy-button { margin-top: 10px; }

.auth-gate { padding: 48px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius); text-align: center; background: rgba(11,15,23,.7); }.auth-gate h2 { margin: 0 0 8px; }.auth-gate p { margin: 0 0 20px; color: var(--muted); }.account-grid, .admin-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }.link-code { margin-top: 16px; padding: 18px; border: 1px solid rgba(72,229,139,.3); border-radius: 12px; color: var(--accent); background: rgba(72,229,139,.06); font: 600 28px var(--mono); letter-spacing: .16em; text-align: center; }.table-wrap { max-width: 100%; overflow-x: auto; }.table-wrap table { width: 100%; border-collapse: collapse; white-space: nowrap; }.table-wrap th { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--subtle); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; }.table-wrap td { padding: 13px 12px; border-bottom: 1px solid rgba(255,255,255,.06); color: #cdd6e4; font-size: 13px; }.table-wrap td code { font: 12px var(--mono); }.table-wrap tbody tr:last-child td { border-bottom: 0; }.status-pill { display: inline-flex; padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font: 500 10px var(--mono); text-transform: uppercase; }.status-pill.good { color: var(--accent); border-color: rgba(72,229,139,.3); }.status-pill.warn { color: var(--warning); border-color: rgba(246,200,95,.3); }.status-pill.bad { color: var(--danger); border-color: rgba(255,119,112,.3); }.reveal-box { display: flex; align-items: center; gap: 8px; }.reveal-value { max-width: 420px; overflow: hidden; font-family: var(--mono); font-size: 11px; text-overflow: ellipsis; }.wallet-balance { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }.wallet-balance > div { min-width: 180px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }.wallet-balance strong { display: block; margin-top: 8px; font: 600 24px var(--mono); }.transaction-list, .compact-list, .audit-list { display: grid; gap: 8px; }.transaction-row, .compact-row, .audit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }.transaction-row:last-child, .compact-row:last-child, .audit-row:last-child { border-bottom: 0; }.transaction-row span, .compact-row span, .audit-row span { color: var(--muted); font-size: 13px; }.transaction-row strong { font: 600 13px var(--mono); }
.compact-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.compact-actions .copy-button { min-height: 34px; padding: 0 10px; }

.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.support-grid h2 { margin-top: 0; }

.admin-view { width: min(100%, 1160px); margin: 0 auto; }.admin-stats, .readiness-grid { margin-bottom: 14px; }.readiness-card strong { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; }.readiness-card strong::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--danger); content: ""; }.readiness-card.ready strong::before { background: var(--accent); }.admin-card { align-self: start; }.admin-card > p { color: var(--muted); line-height: 1.55; }.toggle-list { display: grid; gap: 10px; margin: 18px 0; }.toggle-list label, .checkbox-line { display: flex; align-items: center; gap: 10px; color: #dbe3ee; font-size: 14px; }.toggle-list input, .checkbox-line input { width: 18px; min-height: 18px; accent-color: var(--accent); }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }.preview-box { margin: 18px 0; padding: 13px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }.admin-order-list { display: grid; gap: 10px; }.admin-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }.admin-order h3 { margin: 0 0 6px; font-size: 15px; }.admin-order p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }.admin-order-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.admin-order-actions .button { min-height: 38px; padding: 0 12px; font-size: 12px; }.deliver-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }.audit-row { align-items: flex-start; }.audit-row strong { font-size: 13px; }.audit-row code { color: var(--subtle); font: 10px var(--mono); }

.empty-state { padding: 28px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.02); text-align: center; line-height: 1.55; }.empty-state.compact { padding: 18px; }.skeleton { min-height: 52px; border-radius: 11px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 220% 100%; animation: shimmer 1.2s linear infinite; }.skeleton.tall { min-height: 110px; } @keyframes shimmer { to { background-position: -220% 0; } }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; width: min(360px, calc(100% - 36px)); }.toast { padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 12px; color: #fff; background: var(--surface-2); box-shadow: var(--shadow); animation: toast-in 180ms ease both; }.toast.error { border-color: rgba(255,119,112,.45); }.toast.success { border-color: rgba(72,229,139,.4); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100% - 32px, 1240px); margin: 0 auto; padding: 30px 0 42px; border-top: 1px solid var(--border); }.footer > div { display: grid; gap: 4px; }.footer strong { font-size: 14px; }.footer span { color: var(--subtle); font-size: 12px; }.footer nav { display: flex; flex-wrap: wrap; gap: 18px; }.footer a { color: var(--muted); font-size: 13px; }.footer a:hover { color: #fff; }

@media (max-width: 1080px) {
  .desktop-nav { display: none; }.menu-button { display: block; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; padding: 72px 0; }.console-preview { width: min(100%, 720px); }
  .checkout-layout { grid-template-columns: 1fr; }.order-summary { position: static; }
  .metric-grid, .account-metrics, .admin-stats, .readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }.trust-strip > div:nth-child(3) { border-top: 1px solid var(--border); border-left: 0; }.trust-strip > div:nth-child(4) { border-top: 1px solid var(--border); }
}

@media (max-width: 760px) {
  .topbar { min-height: 68px; padding: 10px 16px; }.brand > span:last-child { display: none; }.mobile-nav { top: 68px; }
  .sign-in-link { display: none; } main { width: min(100% - 24px, 1240px); }.page-view { padding: 42px 0 56px; }
  .hero-grid { gap: 36px; padding: 54px 0; }.hero-copy h1 { font-size: clamp(44px, 15vw, 70px); }.hero-lead { font-size: 17px; }.hero-actions { display: grid; }.hero-actions .button { width: 100%; }
  .trust-strip, .steps-grid, .guide-grid, .support-grid, .server-catalog, .account-grid, .admin-columns { grid-template-columns: 1fr; }.trust-strip > div + div { border-top: 1px solid var(--border); border-left: 0; }.home-section { padding-top: 64px; }
  .page-heading { display: grid; align-items: start; margin-bottom: 28px; }.page-heading h1 { font-size: 38px; }.configuration-badge { justify-self: start; }
  .choice-grid, .package-grid { grid-template-columns: 1fr; }.key-check-form > div { grid-template-columns: minmax(0, 1fr) auto; }.key-check-form #check-key-button { grid-column: 1 / -1; }
  .docs-layout { grid-template-columns: 1fr; }.docs-sidebar { position: static; }.docs-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0 18px; border-bottom: 1px solid var(--border); border-left: 0; }.docs-nav button { background: var(--surface); text-align: center; }.endpoint-pair, .doc-code-grid { grid-template-columns: 1fr; }.docs-section { padding-bottom: 44px; }.docs-section + .docs-section { padding-top: 42px; }
  .form-grid { grid-template-columns: 1fr; }.admin-order { grid-template-columns: 1fr; }.admin-order-actions { justify-content: flex-start; }.deliver-form { grid-template-columns: 1fr; }
  .compact-row { align-items: flex-start; }.compact-actions { flex-wrap: wrap; }
  .footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 440px) {
  .metric-grid, .account-metrics, .admin-stats, .readiness-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 46px; }.console-preview pre { min-height: 280px; padding: 20px; font-size: 11px; }.configurator fieldset, .data-panel, .admin-card, .guide-card { padding: 18px; }
}

.auth-shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 920px; margin: 0 auto; }
.auth-card { display: grid; align-content: start; gap: 16px; padding: clamp(22px, 4vw, 34px); border: 1px solid var(--border); border-radius: 24px; background: rgba(8,9,12,.82); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.auth-card h2 { margin: 0 0 4px; }
.setup-secret { overflow-wrap: anywhere; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #050506; color: var(--muted); font: 12px/1.6 var(--mono); }
.support-form, .support-history { margin-top: 18px; }
.admin-ticket { align-items: end; flex-wrap: wrap; }
.admin-ticket > div { min-width: min(220px, 100%); flex: 1; }
.admin-ticket select, .admin-ticket input { min-height: 38px; border: 1px solid var(--border); border-radius: 10px; background: #06070a; color: var(--text); padding: 8px 10px; }
.admin-ticket input { min-width: min(260px, 100%); flex: 1; }

@media (max-width: 720px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-card { padding: 20px; border-radius: 20px; }
  .admin-ticket { align-items: stretch; flex-direction: column; }
  .admin-ticket select, .admin-ticket input { width: 100%; }
}

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

/* Cinematic marketplace landing */
.liquid-glass,
.liquid-glass-strong {
  position: relative;
  overflow: hidden;
  border: none;
  background: rgba(255,255,255,.01);
  background-blend-mode: luminosity;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.liquid-glass::before,
.liquid-glass-strong::before {
  position: absolute;
  inset: 0;
  padding: 1.4px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  content: "";
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass-strong {
  box-shadow: 4px 4px 4px rgba(0,0,0,.05), inset 0 1px 1px rgba(255,255,255,.15);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
.liquid-glass-strong::before {
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.5) 100%);
}

body.is-home { background: #000; }
body.is-home::before { display: none; }
.is-home :focus-visible { outline-color: rgba(255,255,255,.95); }
.is-home main { width: 100%; min-height: 0; }
.is-home .home-view { padding: 0; animation: none; }
.is-home .footer { display: none; }
.is-home .topbar {
  position: fixed;
  top: 16px;
  right: clamp(18px, 4vw, 64px);
  left: clamp(18px, 4vw, 64px);
  z-index: 70;
  justify-content: space-between;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.is-home .brand { z-index: 1; }
.is-home .brand > span:last-child { display: none; }
.is-home .brand-mark {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.15), 0 12px 36px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
}
.is-home .brand-mark img { width: 34px; height: 34px; }
.is-home .desktop-nav {
  position: absolute;
  left: 50%;
  display: flex;
  width: max-content;
  max-width: calc(100vw - 250px);
  flex: none;
  gap: 1px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}
.is-home .desktop-nav a { min-height: 36px; padding: 8px 12px; border-radius: 999px; color: rgba(255,255,255,.8); font-family: var(--sans); font-size: 14px; }
.is-home .desktop-nav a:hover,
.is-home .desktop-nav a.is-active { color: #fff; background: rgba(255,255,255,.12); }
.is-home .desktop-nav a.is-active::after { display: none; }
.is-home .header-actions { z-index: 1; }
.is-home .sign-in-link {
  min-height: 44px;
  padding: 0 19px;
  border: 0;
  border-radius: 999px;
  color: #000;
  background: #fff;
  font-family: var(--sans);
  font-weight: 600;
}
.is-home .sign-in-link:hover { color: #000; background: rgba(255,255,255,.88); }

.cinematic-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: #fff;
  background: #000;
  font-family: var(--sans);
}
.cinematic-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.cinematic-video-hero {
  top: 0;
  left: 50%;
  width: 120%;
  height: 120%;
  object-position: top center;
  transform: translateX(-50%);
}
.cinematic-layer { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }
.cinematic-hero-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px clamp(18px, 4vw, 64px) 26px;
}
.cinematic-hero-content {
  display: flex;
  width: min(100%, 880px);
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 0 20px;
  text-align: center;
}
.cinematic-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 13px 5px 5px;
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  white-space: nowrap;
}
.cinematic-badge span { padding: 5px 10px; border-radius: 999px; color: #000; background: #fff; font-size: 12px; font-weight: 600; }
.cinematic-badge strong { font-weight: 400; }
.cinematic-title {
  max-width: 850px;
  margin: 18px 0 0;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(4rem, 7.6vw, 6.15rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .92;
  text-shadow: 0 3px 26px rgba(0,0,0,.26);
  text-wrap: balance;
}
.blur-text { display: flex; flex-wrap: wrap; justify-content: center; row-gap: .1em; }
.blur-word { display: inline-block; margin-right: .28em; }
.cinematic-lead { max-width: 680px; margin: 24px 0 0; color: #fff; font-size: clamp(16px, 1.45vw, 18px); font-weight: 300; line-height: 1.45; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.cinematic-actions { display: flex; align-items: center; gap: 24px; margin-top: 25px; }
.cinematic-primary,
.cinematic-secondary { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 500; }
.cinematic-primary { padding: 0 20px; }
.cinematic-secondary { padding: 0 4px; border-bottom: 1px solid transparent; border-radius: 0; }
.cinematic-primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.cinematic-primary:hover { background: rgba(255,255,255,.08); }
.cinematic-secondary:hover { border-bottom-color: rgba(255,255,255,.7); }
.cinematic-stats { display: flex; align-items: stretch; gap: 12px; margin-top: 28px; }
.cinematic-stat { display: flex; width: min(230px, 42vw); min-height: 92px; align-items: flex-start; gap: 16px; padding: 17px 18px; border-radius: 20px; text-align: left; }
.cinematic-stat > svg { width: 28px; height: 28px; flex: 0 0 28px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.cinematic-stat div { align-self: flex-end; }
.cinematic-stat strong { display: block; font-family: var(--sans); font-size: 22px; font-style: normal; font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.cinematic-stat span { display: block; margin-top: 6px; color: rgba(255,255,255,.88); font-size: 12px; font-weight: 300; }
.hero-status { display: inline-flex; min-height: 34px; align-items: center; gap: 9px; margin-top: 14px; padding: 7px 13px; border-radius: 999px; color: rgba(255,255,255,.9); font-size: 13px; }
.hero-status .status-dot { background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.58); }
.hero-status .status-dot.ready { background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.74); }
.cinematic-partners { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.cinematic-partners > span { padding: 7px 14px; border-radius: 999px; font-size: 12px; }
.cinematic-partners > div { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 5vw, 64px); }
.cinematic-partners strong { font-family: var(--sans); font-size: clamp(17px, 1.9vw, 21px); font-style: normal; font-weight: 500; letter-spacing: -.02em; }

.capabilities-layer { display: flex; flex-direction: column; padding: 104px clamp(24px, 5vw, 80px) 40px; }
.capabilities-header { margin-bottom: auto; }
.capabilities-header > span { color: rgba(255,255,255,.82); font-size: 14px; }
.capabilities-header h2 { margin: 22px 0 0; font-family: var(--sans); font-size: clamp(3.8rem, 7vw, 5.7rem); font-style: normal; font-weight: 600; letter-spacing: -.055em; line-height: .9; }
.capabilities-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 54px; }
.capability-card { display: flex; min-height: 360px; flex-direction: column; padding: 24px; border-radius: 20px; }
.capability-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.capability-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 12px; }
.capability-icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.capability-tags { display: flex; max-width: 72%; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.capability-tags span { padding: 6px 10px; border-radius: 999px; color: rgba(255,255,255,.92); font-size: 11px; white-space: nowrap; }
.capability-copy { margin-top: auto; padding-top: 34px; }
.capability-copy h3 { margin: 0; font-family: var(--sans); font-size: clamp(1.75rem, 2.5vw, 2.2rem); font-style: normal; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.capability-copy p { max-width: 34ch; margin: 14px 0 0; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 300; line-height: 1.45; }

.motion-ready .cinematic-reveal { opacity: 0; filter: blur(10px); transform: translateY(20px); }
.motion-ready .cinematic-reveal.is-visible { animation: cinematic-reveal .7s ease-out var(--d, 0s) forwards; }
@keyframes cinematic-reveal { to { opacity: 1; filter: blur(0); transform: translateY(0); } }

.video-motion-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}
.video-motion-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.video-motion-toggle .play-symbol { display: none; }
.video-motion-toggle[aria-pressed="true"] .pause-symbol { display: none; }
.video-motion-toggle[aria-pressed="true"] .play-symbol { display: block; }

@media (max-width: 900px) {
  .is-home .desktop-nav { display: none; }
  .is-home .menu-button { display: block; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.06); backdrop-filter: blur(10px); }
  .is-home .mobile-nav { top: 76px; right: 18px; left: 18px; z-index: 65; padding: 14px; border-color: rgba(255,255,255,.25); border-radius: 22px; background: rgba(0,0,0,.76); backdrop-filter: blur(18px); }
  .is-home .mobile-nav a { min-height: 46px; color: rgba(255,255,255,.82); font-family: var(--sans); }
  .is-home .mobile-nav a.is-active { color: #fff; background: rgba(255,255,255,.12); }
  .capabilities-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 300px; }
  .cinematic-capabilities { min-height: auto; }
}

@media (max-width: 640px) {
  .is-home .topbar { right: 16px; left: 16px; }
  .is-home .sign-in-link { display: none; }
  .cinematic-hero-layer { padding: 88px 16px 22px; }
  .cinematic-hero-content { justify-content: center; padding: 16px 0; }
  .cinematic-badge { max-width: 100%; font-size: 12px; }
  .cinematic-title { margin-top: 20px; font-size: clamp(3.15rem, 16vw, 4.7rem); letter-spacing: -2.7px; line-height: .86; }
  .cinematic-lead { max-width: 34ch; margin-top: 20px; font-size: 16px; }
  .cinematic-actions { width: min(100%, 360px); flex-direction: column; gap: 10px; margin-top: 22px; }
  .cinematic-primary { width: 100%; }
  .cinematic-secondary { min-height: 40px; }
  .cinematic-stats { width: min(100%, 430px); gap: 8px; margin-top: 20px; }
  .cinematic-stat { width: 50%; min-height: 84px; gap: 9px; padding: 14px; }
  .cinematic-stat > svg { width: 23px; height: 23px; flex-basis: 23px; }
  .cinematic-stat strong { font-size: 20px; }
  .cinematic-partners { gap: 10px; }
  .cinematic-partners > div { gap: 9px 22px; }
  .cinematic-partners strong { font-size: 21px; }
  .capabilities-layer { padding: 94px 16px 28px; }
  .capabilities-header h2 { font-size: 4.2rem; }
  .capabilities-grid { gap: 14px; margin-top: 40px; }
  .capability-card { min-height: 285px; padding: 20px; }
  .capability-tags { max-width: 76%; }
  .video-motion-toggle { right: 14px; bottom: 14px; }
}

@media (max-height: 760px) and (min-width: 641px) {
  .cinematic-hero-layer { padding-top: 80px; }
  .cinematic-hero-content { padding: 12px 0; }
  .cinematic-title { font-size: clamp(3.5rem, 7vw, 5rem); }
  .cinematic-lead { margin-top: 18px; }
  .cinematic-actions { margin-top: 18px; }
  .cinematic-stats { margin-top: 18px; }
  .cinematic-stat { min-height: 80px; }
  .cinematic-partners { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .cinematic-reveal { opacity: 1; filter: none; transform: none; }
  .video-motion-toggle { display: none; }
}

/* Unified cinematic glass system for the marketplace and console */
body:not(.is-home) .topbar {
  top: 12px;
  width: min(calc(100% - 24px), 1280px);
  min-height: 64px;
  margin: 12px auto 0;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 55px rgba(0,0,0,.42);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}
body:not(.is-home) .brand-mark {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(0,0,0,.38);
}
body:not(.is-home) .brand-mark img { width: 32px; height: 32px; }
body:not(.is-home) .brand small { color: #aeb7c5; }
body:not(.is-home) .desktop-nav a { border-radius: 999px; color: #c8cfda; }
body:not(.is-home) .desktop-nav a:hover,
body:not(.is-home) .desktop-nav a.is-active { color: #fff; background: rgba(255,255,255,.09); }
body:not(.is-home) .desktop-nav a.is-active::after { right: 16px; left: 16px; background: #fff; }

.button { border-radius: 999px; }
.button.primary {
  color: #000;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 10px 34px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.button.primary:hover { color: #000; background: #e9edf3; border-color: #e9edf3; }
.button.secondary,
.button.ghost {
  color: #f5f7fa;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.button.secondary:hover,
.button.ghost:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.36); }

body:not(.is-home) .page-view { font-family: var(--sans); }
.page-heading h1,
.section-heading h2 {
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.08;
}
.page-heading p { color: #c3cad5; font-size: 16px; line-height: 1.65; }
.eyebrow { color: #aeb7c5; font-family: var(--sans); font-size: 12px; letter-spacing: .1em; }

.configurator fieldset,
.order-summary,
.key-check-form,
.checker-identity,
.usage-card,
.data-panel,
.admin-card,
.server-card,
.guide-card,
.support-grid article,
.auth-gate,
.metric-card,
.account-metric,
.admin-stat,
.readiness-card {
  border-color: rgba(255,255,255,.15);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 24px 64px rgba(0,0,0,.3);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}
.choice-card,
.package-card,
.endpoint-pair > div,
.wallet-balance > div,
.admin-order,
.empty-state {
  border-color: rgba(255,255,255,.14);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.choice-card,
.package-card { transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.choice-card:hover,
.package-card:hover { border-color: rgba(255,255,255,.36); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 36px rgba(0,0,0,.24); transform: translateY(-2px); }
.choice-card:has(input:checked),
.package-card:has(input:checked) { color: #fff; border-color: #fff; background: rgba(255,255,255,.11); }
.choice-card input,
.package-card input,
.toggle-list input,
.checkbox-line input { accent-color: #fff; }
.package-card .bonus,
.steps-grid article > span { color: #fff; }

.configurator legend span { color: #000; background: #fff; }
.configuration-badge { color: #c8cfda; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.045); font-size: 12px; }
.configuration-badge.ready { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.09); }
.checkout-alert,
.form-status:not(:empty) { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04); font-size: 14px; }

input,
select,
textarea {
  min-height: 48px;
  border-color: rgba(255,255,255,.18);
  border-radius: 13px;
  color: #fff;
  background: rgba(0,0,0,.58);
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
input::placeholder,
textarea::placeholder { color: #7f8998; }
input:focus,
select:focus,
textarea:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.08); }
.field { color: #edf1f6; font-size: 15px; }
.field small,
.key-check-form small { color: #aab3c0; font-size: 13px; }

.docs-nav { border-left-color: rgba(255,255,255,.18); }
.docs-nav button { color: #b8c0cd; font-size: 15px; }
.docs-nav button:hover,
.docs-nav button:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.docs-section + .docs-section { border-top-color: rgba(255,255,255,.13); }
.docs-section h2,
.docs-section h3 { color: #fff; font-family: var(--sans); }
.docs-section p,
.docs-section li,
.guide-card p,
.guide-card li,
.panel-copy { color: #c3cad5; }
.docs-section pre,
.guide-card pre { border-color: rgba(255,255,255,.16); background: rgba(0,0,0,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.method.post { color: #fff; background: rgba(255,255,255,.1); }
.model-chip-list span { color: #dfe5ed; background: rgba(255,255,255,.055); font-size: 12px; }

.table-wrap th { color: #aeb7c5; font-size: 12px; }
.table-wrap td { color: #d8dee7; font-size: 14px; }
.table-wrap tbody tr { transition: background 160ms ease; }
.table-wrap tbody tr:hover { background: rgba(255,255,255,.035); }
.status-pill.good { color: #fff; border-color: rgba(255,255,255,.34); }
.link-code { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.07); }
.readiness-card.ready strong::before { background: #fff; }
.toast { background: rgba(16,19,25,.94); backdrop-filter: blur(18px); }
.toast.success { border-color: rgba(255,255,255,.4); }
.footer { border-top-color: rgba(255,255,255,.14); }
body:not(.is-home) .footer {
  margin-bottom: 20px;
  padding: 20px 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 48px rgba(0,0,0,.26);
  backdrop-filter: blur(16px);
}
.status-pill { font-size: 11px; }

@media (max-width: 760px) {
  body:not(.is-home) .topbar {
    top: 10px;
    width: calc(100% - 20px);
    min-height: 62px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 22px;
  }
  body:not(.is-home) .mobile-nav {
    top: 82px;
    right: 10px;
    left: 10px;
    border-color: rgba(255,255,255,.2);
    border-radius: 20px;
    background: rgba(5,7,11,.94);
    backdrop-filter: blur(22px);
  }
  .page-heading h1 { font-size: clamp(34px, 10vw, 42px); }
  .page-heading p { font-size: 16px; }
  .table-wrap th { font-size: 12px; }
  .table-wrap td { font-size: 14px; }
  .cinematic-title { letter-spacing: -.045em; line-height: .94; }
  .capabilities-header h2 { letter-spacing: -.045em; line-height: .94; }
}

@media (max-width: 760px) {
  .usage-panel { gap: 12px; margin-top: 16px; }
  .checker-identity, .usage-card, .available-models-panel, #model-usage-panel, #request-history-panel { padding: 18px; }
  .checker-identity { align-items: flex-start; }
  .checker-identity > div { gap: 5px 10px; }
  .checker-identity small { font-size: 12px; }
  .checker-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .checker-metrics .metric-card { min-height: 104px; padding: 16px; }
  .checker-metrics .metric-card strong { margin-top: 15px; font-size: clamp(17px, 5.5vw, 23px); }
  .key-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .key-detail-grid > div:last-child { grid-column: 1 / -1; }
  .breakdown-legend { gap: 10px; }
  .breakdown-legend > div { grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-content: start; }
  .breakdown-legend strong { grid-column: 1 / -1; justify-self: start; padding-left: 16px; }
  .panel-title { align-items: flex-start; }
  .panel-title > span { white-space: nowrap; }
  .request-token-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 440px) {
  .checker-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checker-metrics .metric-card { min-height: 96px; padding: 14px; }
  .checker-metrics .metric-card span { font-size: 10px; }
  .checker-metrics .metric-card strong { font-size: 17px; overflow-wrap: anywhere; }
  .checker-identity code { width: 100%; }
  .usage-card-heading { margin-bottom: 13px; }
  .quota-card p { font-size: 13px; }
  .breakdown-legend { grid-template-columns: 1fr; }
  .breakdown-legend > div { grid-template-columns: auto auto minmax(0, 1fr); }
  .breakdown-legend strong { grid-column: auto; justify-self: end; padding-left: 0; }
  .request-history-head { align-items: flex-start; }
  .request-history-head > div { align-items: flex-start; flex-direction: column; }
}

/* Performance and responsive hardening */
html,
body { max-width: 100%; overflow-x: clip; }

.page-view { animation: page-in-lite 150ms ease both; }
@keyframes page-in-lite { from { opacity: 0; } to { opacity: 1; } }

.table-wrap {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.quota-track span,
.breakdown-bar span { transition: width 220ms ease-out; }

.liquid-glass-strong {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.is-home .brand-mark,
.is-home .desktop-nav { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.cinematic-video { transition: opacity 180ms ease; }
.cinematic-video-hero { width: 108%; height: 108%; }
.blur-text { display: block; }

.motion-ready .cinematic-reveal,
.motion-ready [data-blur-text] { opacity: 0; filter: none; transform: translateY(8px); }
.motion-ready .cinematic-reveal.is-visible,
.motion-ready [data-blur-text].is-visible { animation: cinematic-reveal-lite .34s cubic-bezier(.22,1,.36,1) 40ms forwards; }
@keyframes cinematic-reveal-lite { to { opacity: 1; transform: none; } }

.video-motion-toggle {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
}

body:not(.is-home) .topbar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 34px rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.configurator fieldset,
.order-summary,
.key-check-form,
.checker-identity,
.usage-card,
.data-panel,
.admin-card,
.server-card,
.guide-card,
.support-grid article,
.auth-gate,
.metric-card,
.account-metric,
.admin-stat,
.readiness-card {
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.032));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 12px 32px rgba(0,0,0,.26);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.choice-card,
.package-card { transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.choice-card:hover,
.package-card:hover { border-color: rgba(255,255,255,.36); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.2); transform: none; }

.toast { background: rgba(16,19,25,.97); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body:not(.is-home) .footer { backdrop-filter: none; -webkit-backdrop-filter: none; }

.usage-panel > .data-panel {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

.usage-panel > *,
.checker-metrics > *,
.key-detail-grid > *,
.request-history-item,
.request-history-head > div { min-width: 0; }

.key-check-form,
.checker-identity,
.usage-card,
.data-panel { padding: clamp(16px, 2.8vw, 22px); }

.checker-models span,
.request-history-head strong,
.key-detail-grid dd { overflow-wrap: anywhere; }

@media (max-width: 1080px) {
  .is-home .desktop-nav { display: none; }
  .is-home .menu-button {
    display: block;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .is-home .mobile-nav {
    top: 76px;
    right: 18px;
    left: 18px;
    z-index: 65;
    padding: 14px;
    border-color: rgba(255,255,255,.25);
    border-radius: 22px;
    background: rgba(0,0,0,.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .is-home .mobile-nav a { min-height: 46px; color: rgba(255,255,255,.86); }
  .is-home .mobile-nav a.is-active { color: #fff; background: rgba(255,255,255,.12); }
}

@media (max-width: 960px) and (min-width: 761px) {
  .key-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body:not(.is-home) .mobile-nav { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .panel-title { flex-direction: column; gap: 8px; }
  .panel-title > span { white-space: normal; }

  .usage-table-wrap { overflow: visible; }
  .usage-table { display: block; width: 100%; min-width: 0; white-space: normal; }
  .usage-table thead { display: none; }
  .usage-table tbody { display: grid; gap: 10px; }
  .usage-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(0,0,0,.24);
  }
  .usage-table td,
  .usage-table td:not(:first-child) {
    display: grid;
    min-width: 0;
    gap: 3px;
    padding: 7px 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .usage-table td::before {
    color: var(--subtle);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .usage-table td:first-child { grid-column: 1 / -1; max-width: none; }
  .usage-table code { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
  .liquid-glass,
  .liquid-glass-strong { background: rgba(10,10,12,.46); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cinematic-video-hero { left: 0; width: 100%; height: 100%; transform: none; }
  .video-motion-toggle {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  .checker-identity { flex-direction: column; gap: 10px; }
  .request-history-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
}

@media (max-width: 440px) {
  .key-check-form > div { grid-template-columns: minmax(0, 1fr) auto; }
  .key-check-form #check-key-button { grid-column: 1 / -1; width: 100%; }
  .request-history-head { flex-direction: column; }
  .request-history-head > .status-pill { align-self: flex-start; }
}

@media (max-width: 360px) {
  main { width: min(100% - 16px, 1240px); }
  .key-check-form,
  .checker-identity,
  .usage-card,
  .data-panel { padding: 14px; }
  .checker-metrics { grid-template-columns: 1fr; }
  .key-detail-grid { grid-template-columns: 1fr; }
  .key-detail-grid > div:last-child { grid-column: auto; }
  .breakdown-legend > div { grid-template-columns: auto minmax(0, 1fr); }
  .breakdown-legend strong { grid-column: 1 / -1; justify-self: start; padding-left: 16px; }
  .usage-table tr { grid-template-columns: 1fr; }
  .usage-table td:first-child { grid-column: auto; }
}

@media (hover: none) {
  .choice-card:hover,
  .package-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .cinematic-reveal,
  .motion-ready [data-blur-text] { opacity: 1; transform: none; }
}