/* Fonts are loaded from each page (not @import) so styles.css can paint immediately on first visit — @import blocked the whole sheet. */ :root { --bg: #050506; --bg2: #0a0a0c; --panel: #111114; --panel2: #16161a; --panel3: #1c1c22; --border: rgba(255, 255, 255, 0.07); --border2: rgba(255, 255, 255, 0.12); --text: #f4f4f5; --muted: #a1a1aa; --faint: #71717a; --accent: #7c9cff; --accent-2: #a78bfa; --accent-dim: rgba(124, 156, 255, 0.14); --accent-glow: rgba(124, 156, 255, 0.22); --ok: #34d399; --ok-dim: rgba(52, 211, 153, 0.12); --warn: #fbbf24; --err: #f87171; --radius: 18px; --radius-sm: 12px; --radius-lg: 24px; --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, ui-monospace, monospace; --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55); /* Site shell width */ --site-max: min(1140px, calc(100vw - 2rem)); } * { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: dark; background: var(--bg); } html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; } /* Soft SPA: playground shell parked off-screen while visiting Status/Docs/… (display:none / [hidden] can pause media — keep in layout tree, just off-view) */ #spa-pg-keep.spa-pg-keep { position: fixed !important; left: -10000px !important; top: 0 !important; width: 100vw !important; height: 100vh !important; max-width: 100vw !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; z-index: -1 !important; visibility: hidden !important; } body.spa-navigating { cursor: progress; } /* Hide playground shell until playground.css has applied (SPA hop FOUC) */ body.spa-pg-css-pending .pg, body.spa-pg-css-pending .lightbox, body.spa-pg-css-pending .pop-scrim { opacity: 0 !important; pointer-events: none !important; } /* Ambient mesh background (site pages only — playground has its own shell) */ body:not(.pg-body)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 10% -10%, rgba(124, 156, 255, 0.14), transparent 55%), radial-gradient(ellipse 60% 40% at 90% 0%, rgba(167, 139, 250, 0.1), transparent 50%), radial-gradient(ellipse 50% 35% at 50% 100%, rgba(52, 211, 153, 0.05), transparent 55%), var(--bg); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } .wrap { max-width: var(--site-max, 1140px); margin: 0 auto; padding: 0 1.5rem 5rem; } /* ── nav ──────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(5, 5, 6, 0.72); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-bottom: 1px solid var(--border); } .nav-inner { max-width: var(--site-max, 1140px); margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; width: 100%; box-sizing: border-box; } .brand-cluster { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 0.7rem; color: var(--text); text-decoration: none !important; transition: opacity 0.15s; } .brand:hover { opacity: 0.92; } .online-badge { display: inline-flex; align-items: baseline; gap: 0.28rem; padding: 0.32rem 0.58rem 0.32rem 0.48rem; border-radius: 999px; border: 1px solid rgba(52, 211, 153, 0.18); background: rgba(52, 211, 153, 0.07); color: #86efac; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; line-height: 1.15; user-select: none; font-family: inherit; } .online-dot { width: 5px; height: 5px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.55); animation: online-pulse 1.8s ease infinite; flex-shrink: 0; align-self: center; margin-right: 0.06rem; } .online-count { font-variant-numeric: tabular-nums; font-weight: 500; font-size: inherit; color: inherit; letter-spacing: inherit; } .online-label { font-weight: 500; font-size: inherit; color: inherit; opacity: 0.78; letter-spacing: inherit; } @keyframes online-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .brand-mark { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: transparent; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 16px rgba(0, 0, 0, 0.35); } .brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-text strong { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.03em; } .brand-text span { font-size: 0.68rem; color: var(--faint); font-weight: 500; letter-spacing: 0.02em; } .nav-links { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; min-width: 0; padding: 0.2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); } .nav-links a { color: var(--muted); padding: 0.42rem 0.95rem; border-radius: 999px; font-size: 0.86rem; font-weight: 550; text-decoration: none !important; transition: color 0.14s, background 0.14s, box-shadow 0.14s; white-space: nowrap; } .nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); } .nav-links a.active { color: #0a0a0c; background: #fff; box-shadow: 0 2px 12px rgba(255, 255, 255, 0.12); font-weight: 650; } /* Mobile nav — compact brand + scrollable links, no horizontal page overflow */ @media (max-width: 700px) { .nav { max-width: 100vw; /* keep overflow visible so nav tooltips aren't clipped */ overflow: visible; } .nav-inner { padding: 0.5rem 0.55rem; padding-left: max(0.55rem, env(safe-area-inset-left, 0px)); padding-right: max(0.55rem, env(safe-area-inset-right, 0px)); gap: 0.35rem; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; } .brand-cluster { gap: 0.45rem; } .brand { flex-shrink: 0; min-width: 0; } .brand-mark { width: 28px; height: 28px; } .brand-mark img { width: 100%; height: 100%; } .brand-text span { display: none; } .brand-text strong { font-size: 0.8rem; } .online-label { display: none; } .online-badge { padding: 0.24rem 0.42rem; gap: 0.3rem; font-size: 0.68rem; } .nav-links { flex: 1 1 auto; justify-content: flex-end; gap: 0.08rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0; /* no mask — was making links look “half gone” */ mask-image: none; -webkit-mask-image: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { padding: 0.34rem 0.5rem; font-size: 0.74rem; flex-shrink: 0; } } @media (max-width: 420px) { .brand-text { display: none; } .online-badge { padding: 0.22rem 0.38rem; } .nav-links a { padding: 0.32rem 0.42rem; font-size: 0.72rem; } } /* ── live badge ───────────────────────────────────────────────── */ .live-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; color: var(--ok); margin-bottom: 0.85rem; } .live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 1.8s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ── page header ──────────────────────────────────────────────── */ .page-head { padding: 2.75rem 0 1.75rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .page-head h1 { font-size: clamp(2.1rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 0.7rem; background: linear-gradient(180deg, #fff 30%, #a1a1aa 140%); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-head .lead { color: var(--muted); font-size: 1rem; max-width: 32rem; line-height: 1.6; } .mini-stats { display: flex; gap: 0.55rem; flex-wrap: wrap; } .mini-stat { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 0.75rem 1.05rem; min-width: 96px; box-shadow: var(--shadow-sm); } .mini-stat .k { font-size: 0.65rem; font-weight: 650; letter-spacing: 0.07em; color: var(--faint); text-transform: uppercase; } .mini-stat .v { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.02em; margin-top: 0.15rem; font-variant-numeric: tabular-nums; } /* ── metric cards ─────────────────────────────────────────────── */ .metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; } @media (max-width: 900px) { .metric-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .metric-row { grid-template-columns: 1fr; } } .metric { background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%), var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.3rem; box-shadow: var(--shadow-sm); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .metric:hover { border-color: var(--border2); box-shadow: var(--shadow-md); transform: translateY(-1px); } .metric .k { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; } .metric .v { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.35rem; font-variant-numeric: tabular-nums; line-height: 1.1; } .metric .v.ok { color: var(--ok); } .metric .v.accent { color: var(--accent); } .metric .sub { margin-top: 0.4rem; font-size: 0.78rem; color: var(--faint); } /* ── panels ───────────────────────────────────────────────────── */ .panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%), var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem; min-width: 0; overflow: hidden; box-shadow: var(--shadow-sm); } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; min-width: 0; } .panel-head h2 { font-size: 0.95rem; font-weight: 650; letter-spacing: -0.01em; flex: 1 1 auto; min-width: 0; } .panel-head .hint { font-size: 0.75rem; color: var(--faint); white-space: nowrap; flex: 0 0 auto; } .grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.85fr); gap: 0.85rem; margin-bottom: 1rem; min-width: 0; } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } } /* ── Volume · 24h + By product ─────────────────────────────────── */ .status-charts { align-items: start; } .status-charts .panel-volume, .status-charts .panel-products { overflow: visible; } .status-charts .panel-head { margin-bottom: 0.9rem; } .status-charts .panel-head h2 { font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); } .status-charts .panel-head .hint { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); } .vol-box { position: relative; width: 100%; height: 152px; } .vol-bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 152px; box-sizing: border-box; padding: 4px 0 0; } .vol-col { flex: 1 1 0; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; appearance: none; -webkit-appearance: none; } .vol-col:focus-visible { outline: 2px solid rgba(59, 158, 255, 0.5); outline-offset: 1px; border-radius: 4px; } .vol-col-bar { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: #3b9eff; min-height: 0; pointer-events: none; transition: background 0.12s; } .vol-col:hover .vol-col-bar, .vol-col:focus-visible .vol-col-bar { background: #6bb6ff; } .vol-col.is-empty .vol-col-bar { background: rgba(59, 158, 255, 0.16); height: 3px !important; } .vol-col.is-empty:hover .vol-col-bar { background: rgba(59, 158, 255, 0.32); } .vol-tip { position: absolute; z-index: 40; left: 0; top: 0; padding: 0.4rem 0.6rem; border-radius: 8px; background: #16171c; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); color: #fafafa; font-size: 0.8rem; font-weight: 650; line-height: 1.3; text-align: center; white-space: nowrap; pointer-events: none; } .vol-tip strong { font-weight: 650; } .vol-tip[hidden] { display: none !important; } .vol-tip .vol-tip-sub { display: block; margin-top: 0.1rem; font-size: 0.7rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); } /* By product — name | track | count */ .product-list { display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 0.15rem 0; } .product-row { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) 2.75rem; gap: 0.7rem; align-items: center; min-width: 0; } .product-name { font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-count { font-variant-numeric: tabular-nums; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); text-align: right; } .product-track { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 99px; overflow: hidden; min-width: 0; } .product-fill { height: 100%; border-radius: 99px; background: #3b9eff; min-width: 0; max-width: 100%; transition: width 0.35s ease; } .product-row.is-zero .product-name, .product-row.is-zero .product-count { color: rgba(255, 255, 255, 0.28); } .product-row.is-zero .product-fill { width: 0 !important; } /* ── models table ─────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); } table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } th, td { text-align: left; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); } th { color: var(--faint); font-weight: 650; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; background: rgba(255, 255, 255, 0.02); } tr:last-child td { border-bottom: none; } tr:hover td { background: rgba(255, 255, 255, 0.015); } .mono { font-family: var(--mono); font-size: 0.8rem; } .model-chip { display: inline-block; font-family: var(--mono); font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text); } .num { font-variant-numeric: tabular-nums; } .ok-text { color: var(--ok); font-weight: 600; } .err-text { color: var(--err); font-weight: 600; } .faint { color: var(--faint); } /* ── recent traffic ───────────────────────────────────────────── */ .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.72rem; font-weight: 650; font-family: var(--mono); } .badge-2xx { background: var(--ok-dim); color: var(--ok); } .badge-4xx { background: rgba(234, 179, 8, 0.12); color: var(--warn); } .badge-5xx { background: rgba(239, 68, 68, 0.12); color: var(--err); } .badge-other { background: rgba(161, 161, 161, 0.12); color: var(--muted); } /* ── shared page bits ─────────────────────────────────────────── */ .section { margin-top: 1.5rem; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .section-head h2 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.02em; } .section-head p { color: var(--faint); font-size: 0.85rem; } .card { background: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, transparent 50%), var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.4rem; box-shadow: var(--shadow-sm); transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; } a.card:hover, .card.model-card:hover { border-color: rgba(124, 156, 255, 0.28); transform: translateY(-3px); box-shadow: var(--shadow-md), 0 0 0 1px rgba(124, 156, 255, 0.08); text-decoration: none !important; } .card h3 { font-size: 1.05rem; margin-bottom: 0.45rem; letter-spacing: -0.02em; font-weight: 700; } .card p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; } .card .meta { margin-top: 0.95rem; font-size: 0.76rem; color: var(--faint); font-family: var(--mono); } .grid { display: grid; gap: 0.9rem; } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .hero { padding: 3.75rem 0 2rem; position: relative; } .hero h1 { font-size: clamp(2.15rem, 4.5vw, 3.25rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; margin-bottom: 1rem; } .hero h1 span { display: block; margin-top: 0.15em; background: linear-gradient(90deg, #a1a1aa, #7c9cff 50%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .hero p.lead { color: var(--muted); font-size: 1.1rem; max-width: 36rem; margin-bottom: 1.75rem; line-height: 1.65; } .actions { display: flex; flex-wrap: wrap; gap: 0.7rem; } .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.72rem 1.25rem; border-radius: 999px; font-size: 0.92rem; font-weight: 650; border: 1px solid transparent; cursor: pointer; text-decoration: none !important; transition: transform 0.12s, background 0.12s, box-shadow 0.15s, border-color 0.12s; } .btn:active { transform: scale(0.98); } .btn-primary { background: #fff; color: #0a0a0c; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.12); } .btn-primary:hover { background: #f4f4f5; box-shadow: 0 6px 28px rgba(255, 255, 255, 0.18); } .btn-ghost { background: rgba(255, 255, 255, 0.03); border-color: var(--border2); color: var(--text); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } .stat { background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), transparent 50%), var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.05rem 1.15rem; box-shadow: var(--shadow-sm); } .stat .label { font-size: 0.7rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 650; } .stat .value { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 0.2rem; font-variant-numeric: tabular-nums; } .model-card { display: flex; gap: 1rem; align-items: flex-start; } .model-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.9rem; } .btn-sm { padding: 0.45rem 0.9rem; font-size: 0.8rem; font-weight: 650; } .model-logo-wrap { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(145deg, #222228, #141418); border: 1px solid var(--border2); flex-shrink: 0; overflow: hidden; position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .model-logo { width: 100%; height: 100%; padding: 6px; object-fit: contain; display: block; background: transparent; } .model-logo.dark-bg { background: #1a1a1a; } .model-logo-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; color: var(--muted); background: #1a1a1a; } .tag { display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.45rem; border-radius: 5px; background: rgba(59, 130, 246, 0.12); color: #93c5fd; margin-right: 0.3rem; margin-top: 0.35rem; } .tag.free { background: var(--ok-dim); color: var(--ok); } .tag.paid { background: rgba(234, 179, 8, 0.12); color: var(--warn); } /* ── docs shell ───────────────────────────────────────────────── */ body.docs-page { overflow-x: hidden; } .docs-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 2rem; min-height: calc(100vh - 61px); max-width: var(--site-max, 1140px); width: 100%; margin: 0 auto; padding: 0 1.5rem 3rem; box-sizing: border-box; } @media (max-width: 900px) { .docs-shell { grid-template-columns: 1fr; gap: 0; padding: 0 1.25rem 2.5rem; } .docs-sidebar { position: static !important; height: auto !important; border-right: none; border-bottom: 1px solid var(--border); max-height: none; } } .docs-sidebar { position: sticky; top: 61px; height: calc(100vh - 61px); overflow-y: auto; border-right: 1px solid var(--border); background: rgba(5, 5, 8, 0.85); backdrop-filter: blur(12px); padding: 1.35rem 0.75rem 2rem; margin-left: -0.25rem; scrollbar-width: thin; scrollbar-color: #333 transparent; } .docs-sidebar .group { margin-bottom: 1.35rem; } .docs-sidebar .group-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; padding: 0 0.65rem 0.45rem; } .docs-sidebar a { display: block; color: var(--muted); padding: 0.4rem 0.65rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; text-decoration: none !important; transition: color 0.1s, background 0.1s; } .docs-sidebar a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); } .docs-sidebar a.active { color: #fff; background: linear-gradient(90deg, rgba(124, 156, 255, 0.18), rgba(124, 156, 255, 0.06)); box-shadow: inset 2px 0 0 var(--accent); } .docs-main { min-width: 0; padding: 2rem 0 4rem; max-width: 52rem; position: relative; } .docs-main::before { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 280px; background: radial-gradient(ellipse at 80% 0%, rgba(34, 197, 94, 0.08), transparent 70%); pointer-events: none; } @media (max-width: 900px) { .docs-main { padding: 1.5rem 0 3rem; max-width: none; } } .docs-eyebrow { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; margin-bottom: 0.85rem; } .docs-title { font-size: clamp(2.1rem, 4vw, 2.85rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 0.75rem; } .docs-lead { color: var(--muted); font-size: 1.05rem; max-width: 34rem; line-height: 1.55; margin-bottom: 1.5rem; } .docs-tabs { display: inline-flex; gap: 0.25rem; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem; margin-bottom: 1rem; } .docs-tabs button { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.04em; padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; } .docs-tabs button.active { background: linear-gradient(135deg, #7c9cff, #6366f1); color: #fff; box-shadow: 0 2px 12px rgba(124, 156, 255, 0.35); } .base-url-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 1rem; } .base-url-box { display: inline-flex; align-items: center; gap: 0.65rem; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 0.45rem 0.55rem 0.45rem 0.9rem; font-size: 0.85rem; } .base-url-box .label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; } .base-url-box code { font-family: var(--mono); font-size: 0.82rem; color: var(--text); background: none; padding: 0; } .base-url-box .copy-btn { border: none; background: rgba(255, 255, 255, 0.06); color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; } .base-url-box .copy-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); } .base-url-box .copy-btn.ok { color: var(--ok); } .docs-quicklinks { display: flex; flex-wrap: wrap; gap: 0.85rem 1.1rem; margin-bottom: 0.85rem; font-size: 0.9rem; font-weight: 500; } .docs-quicklinks a { text-decoration: none; } .docs-quicklinks a:hover { text-decoration: underline; } .chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .chip { display: inline-block; font-size: 0.78rem; font-weight: 500; color: var(--muted); background: var(--panel); border: 1px solid var(--border); padding: 0.35rem 0.75rem; border-radius: 999px; } .docs-section { margin-bottom: 2.75rem; scroll-margin-top: 5rem; } .docs-section > h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.5rem; } .docs-section > h2 .hash { color: var(--faint); font-weight: 500; font-size: 1rem; } .docs-section > h3 { font-size: 1rem; font-weight: 650; margin: 1.5rem 0 0.55rem; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; } .docs-section p, .docs-section li { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.55rem; line-height: 1.6; } .docs-section ul { padding-left: 1.2rem; margin-bottom: 0.85rem; } .docs-section code, .inline-code { font-family: var(--mono); font-size: 0.82em; background: rgba(255, 255, 255, 0.06); padding: 0.12rem 0.4rem; border-radius: 5px; color: #d4d4d4; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1.25rem 0; } @media (max-width: 700px) { .feature-grid { grid-template-columns: 1fr; } } .feature-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.15rem; } .feature-card .icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); display: grid; place-items: center; margin-bottom: 0.75rem; color: var(--muted); font-size: 0.95rem; } .feature-card h3 { font-size: 0.95rem; font-weight: 650; margin: 0 0 0.35rem !important; color: var(--text); } .feature-card p { font-size: 0.85rem !important; margin: 0 !important; color: var(--muted); line-height: 1.5; } .feature-card code { font-size: 0.78em; } .callout { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.88rem; color: var(--muted); margin: 1rem 0; display: flex; gap: 0.65rem; align-items: flex-start; } .callout .tag-mini { flex-shrink: 0; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; color: #93c5fd; background: rgba(59, 130, 246, 0.12); padding: 0.15rem 0.4rem; border-radius: 4px; margin-top: 0.1rem; } .callout strong { color: var(--text); } .endpoint-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.15rem 1.25rem; margin: 1rem 0 1.5rem; } .endpoint-card .ep-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.65rem; } .endpoint-card .ep-path { font-family: var(--mono); font-size: 0.9rem; font-weight: 600; color: var(--text); } .endpoint-card p { margin-bottom: 0.5rem; } .param-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.75rem 0 1rem; } .param-table th, .param-table td { text-align: left; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--border); vertical-align: top; } .param-table th { color: var(--faint); font-size: 0.68rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; } .param-table td:first-child { font-family: var(--mono); font-size: 0.8rem; color: #93c5fd; white-space: nowrap; } .param-table .req { color: var(--warn); font-size: 0.7rem; font-weight: 650; } pre { background: #0a0a0a; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; overflow-x: auto; margin: 0.75rem 0 1.25rem; font-family: var(--mono); font-size: 0.8rem; line-height: 1.55; color: #c8c8c8; } .method { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 5px; letter-spacing: 0.02em; } .method.get { background: rgba(34, 197, 94, 0.12); color: var(--ok); } .method.post { background: rgba(59, 130, 246, 0.15); color: #93c5fd; } .notice { background: rgba(59, 130, 246, 0.06); border: 1px solid rgba(59, 130, 246, 0.18); border-radius: 12px; padding: 0.85rem 1rem; font-size: 0.88rem; color: var(--muted); margin: 1rem 0; } .notice strong { color: var(--text); } /* legacy docs layout (unused on new page) */ .docs-layout { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; margin-top: 1rem; } .docs-toc a { display: block; color: var(--muted); padding: 0.3rem 0; text-decoration: none; } .docs-body h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; letter-spacing: -0.02em; } .docs-body h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; } .docs-body p, .docs-body li { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.5rem; } .docs-body ul { padding-left: 1.2rem; margin-bottom: 0.75rem; } .empty { color: var(--faint); font-size: 0.9rem; padding: 1.5rem; text-align: center; } .pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--ok); background: var(--ok-dim); border: 1px solid rgba(52, 211, 153, 0.28); padding: 0.28rem 0.7rem; border-radius: 999px; font-weight: 600; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.6s ease infinite; } .bar-list { display: flex; flex-direction: column; gap: 0.65rem; } .bar-row { display: grid; grid-template-columns: minmax(100px, 1fr) 3fr auto; gap: 0.65rem; align-items: center; font-size: 0.85rem; } .bar-row .name { color: var(--muted); font-family: var(--mono); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { height: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 99px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6366f1, #7c9cff 55%, #a78bfa); min-width: 2px; } /* ── site polish extras ───────────────────────────────────────── */ .footer { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--faint); letter-spacing: 0.01em; text-align: center; } pre, code.inline-code, .inline-code { font-family: var(--mono); } pre { background: #0c0c10; border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; overflow-x: auto; font-size: 0.8rem; line-height: 1.55; color: #e4e4e7; margin: 0.65rem 0 0.85rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } code.inline-code, .inline-code { font-size: 0.82em; padding: 0.12em 0.4em; border-radius: 6px; background: rgba(124, 156, 255, 0.1); color: #c7d2fe; border: 1px solid rgba(124, 156, 255, 0.15); } /* Models search field */ .models-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.35rem; } .models-search { flex: 1; min-width: 200px; max-width: 380px; padding: 0.7rem 1.15rem; border-radius: 999px; border: 1px solid var(--border2); background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; font-size: 0.92rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .models-search::placeholder { color: var(--faint); } .models-search:focus { border-color: rgba(124, 156, 255, 0.45); background: rgba(124, 156, 255, 0.06); box-shadow: 0 0 0 3px rgba(124, 156, 255, 0.12); } .feature-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 0.85rem; background: var(--accent-dim); border: 1px solid rgba(124, 156, 255, 0.2); color: var(--accent); } .feature-icon svg { width: 20px; height: 20px; } .home-service { margin-top: 0.5rem; padding: 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(135deg, rgba(124, 156, 255, 0.06), rgba(167, 139, 250, 0.04)), var(--panel); box-shadow: var(--shadow-sm); } @media (prefers-reduced-motion: reduce) { .card, .metric, a.card, .btn { transition: none; } a.card:hover, .card.model-card:hover, .metric:hover { transform: none; } } .bar-row .count { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; min-width: 2.5rem; text-align: right; }