:root { color-scheme: dark; --black:#050505; --ink:#0d0d0d; --paper:#fff; --soft:#bdbdbd; --line:#2a2a2a; --line-bright:#555; --panel:#101010; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--black); color:var(--paper); line-height:1.45; } button,input,textarea { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.topbar { width:min(1240px,calc(100vw - 40px)); min-height:76px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }.brand { display:inline-flex; align-items:center; gap:10px; width:max-content; font-size:17px; }.brand b { color:var(--soft); font-weight:500; }.brandLogo { width:36px; height:36px; object-fit:cover; filter:grayscale(1) contrast(1.8) brightness(1.2); mix-blend-mode:screen; }.topnav { display:flex; gap:26px; color:var(--soft); font-size:14px; }.topnav a:hover { color:var(--paper); }
.walletButton { justify-self:end; min-height:38px; padding:0 14px; border:1px solid var(--line-bright); border-radius:4px; background:transparent; color:var(--paper); font-size:13px; font-weight:650; }.walletButton:hover,.textButton:hover,.quietButton:hover { border-color:var(--paper); } main { width:min(1240px,calc(100vw - 40px)); margin:0 auto; }
.hero { min-height:450px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr); gap:60px; align-items:center; border-bottom:1px solid var(--line); }.heroCopy { padding:56px 0; }.kicker { margin:0 0 10px; color:var(--soft); font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { max-width:670px; margin-bottom:18px; font-size:clamp(42px,6vw,74px); line-height:.98; font-weight:700; letter-spacing:0; } h2 { margin-bottom:0; font-size:clamp(24px,3vw,34px); line-height:1.1; } h3 { font-size:20px; line-height:1.2; }.heroText { max-width:620px; margin-bottom:28px; color:var(--soft); font-size:17px; }.heroActions,.previewActions,.copyRow { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.primaryButton,.quietButton,.textButton { min-height:42px; padding:0 15px; border-radius:4px; font-size:14px; font-weight:700; }.primaryButton { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--paper); background:var(--paper); color:var(--black); }.primaryButton:hover { border-color:#d8d8d8; background:#d8d8d8; }.quietButton { border:1px solid var(--line-bright); background:transparent; color:var(--paper); }.textButton { border:1px solid transparent; background:transparent; color:var(--soft); padding-inline:7px; }.wideButton { width:100%; }
.heroMetrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:570px; margin:42px 0 0; border-top:1px solid var(--line); }.heroMetrics div { padding:14px 10px 0 0; } dt { color:var(--soft); font-size:11px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; } dd { margin:3px 0 0; overflow-wrap:anywhere; }.heroMetrics dd,.accountStats dd { font-weight:650; }.heroMark { position:relative; display:grid; place-items:center; min-height:350px; overflow:hidden; border:1px solid var(--line); background:var(--ink); }.heroMark::before,.heroMark::after { position:absolute; content:""; width:1px; height:100%; background:var(--line); }.heroMark::before { left:25%; }.heroMark::after { right:25%; }.heroMark img { position:relative; z-index:1; width:min(280px,62%); aspect-ratio:1; object-fit:cover; filter:grayscale(1) contrast(1.85) brightness(1.2); mix-blend-mode:screen; }.heroMark p { position:absolute; z-index:1; bottom:18px; margin:0; color:var(--soft); font-size:12px; }
.accountBar { display:grid; grid-template-columns:minmax(190px,.8fr) 2fr auto; gap:26px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }.accountBar .kicker { margin-bottom:4px; }.accountBar strong { font-size:16px; }.accountStats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; }
.workspaceSection,.creditsSection,.apiSection,.explorerSection { padding:76px 0; border-bottom:1px solid var(--line); }.sectionHeading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }.sectionHeading>p { max-width:430px; margin-bottom:3px; color:var(--soft); text-align:right; font-size:14px; }.workspaceGrid,.creditGrid,.apiGrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.85fr); gap:22px; }.createForm,.receiptPreview,.billingForm,.paymentPanel,.codePanel { border:1px solid var(--line); background:var(--ink); }.createForm,.billingForm { display:grid; gap:18px; padding:26px; } label,.packFieldset { display:grid; gap:8px; color:var(--paper); font-size:13px; font-weight:650; } input,textarea { width:100%; border:1px solid var(--line-bright); border-radius:4px; background:#080808; color:var(--paper); padding:12px; outline:none; } textarea { resize:vertical; min-height:102px; } input:focus,textarea:focus { border-color:var(--paper); box-shadow:0 0 0 3px rgba(255,255,255,.12); }.fieldGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.dropzone { min-height:148px; place-content:center; justify-items:start; padding:22px; border:1px dashed var(--line-bright); background:#090909; cursor:pointer; }.dropzone:hover { border-color:var(--paper); }.dropzone strong { font-size:16px; }.dropzone small { color:var(--soft); font-weight:400; }.dropzone input { max-width:100%; padding:0; border:0; background:transparent; color:var(--soft); }.fileBadge { padding:3px 6px; border:1px solid var(--line-bright); color:var(--soft); font-size:10px; letter-spacing:.07em; }.receiptPreview,.paymentPanel { padding:26px; }.previewTopline { display:flex; justify-content:space-between; gap:12px; align-items:center; }.previewTopline .kicker { margin-bottom:0; }.statusPill { border:1px solid var(--line-bright); padding:4px 8px; border-radius:999px; color:var(--soft); font-size:11px; font-weight:700; }.muted { color:var(--soft); }.receiptDetails,.paymentDetails { display:grid; gap:14px; margin:24px 0; }.receiptDetails div,.paymentDetails div { min-width:0; padding-bottom:12px; border-bottom:1px solid var(--line); }.receiptDetails dd,.paymentDetails dd { font-size:13px; }.receiptDetails dd { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }.previewActions { margin-top:26px; }.previewActions .textButton { margin-left:auto; }
.packFieldset { padding:0; border:0; }.packFieldset legend { margin-bottom:10px; }.packOptions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.packOption { position:relative; display:block; cursor:pointer; }.packOption input { position:absolute; opacity:0; pointer-events:none; }.packOption span { display:grid; gap:2px; min-height:92px; padding:14px; border:1px solid var(--line-bright); background:#090909; }.packOption b { font-size:22px; }.packOption small { color:var(--soft); font-weight:500; }.packOption input:checked+span { border-color:var(--paper); background:#171717; }.packOption input:focus-visible+span { box-shadow:0 0 0 3px rgba(255,255,255,.12); }.paymentPanel[hidden],.apiKeyPanel[hidden] { display:none; }.paymentConfirmForm { display:grid; gap:14px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }.apiKeyPanel { display:grid; grid-template-columns:minmax(170px,.55fr) 1fr auto; gap:18px; align-items:center; margin-top:22px; padding:18px 22px; border:1px solid var(--line-bright); background:#101010; }.apiKeyPanel .kicker { margin-bottom:4px; }.apiKeyPanel code { overflow:auto; color:var(--paper); font-size:13px; white-space:nowrap; }
.endpointList { display:grid; gap:1px; border:1px solid var(--line); background:var(--line); }.endpoint { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:10px; min-height:58px; padding:0 14px; border:0; background:var(--ink); color:var(--paper); text-align:left; }.endpoint:hover,.endpoint.active { background:#1a1a1a; }.endpoint span { color:var(--soft); font-size:11px; font-weight:750; }.endpoint code,.endpoint small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.endpoint small { color:var(--soft); font-size:11px; }.codePanel { min-width:0; }.codeHeader { display:flex; align-items:center; justify-content:space-between; min-height:50px; padding:0 16px; border-bottom:1px solid var(--line); font-size:14px; font-weight:650; }.codeHeader .textButton { min-height:32px; } pre { max-height:330px; margin:0; padding:18px; overflow:auto; color:#e7e7e7; background:#090909; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; word-break:break-word; }
.receiptList { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.receiptCard { width:100%; min-width:0; padding:18px; border:1px solid var(--line); background:var(--ink); color:var(--paper); text-align:left; }.receiptCard:hover,.receiptCard.selected { border-color:var(--paper); background:#151515; }.receiptCard h3 { margin-bottom:9px; font-size:16px; }.receiptCard p { margin-bottom:14px; color:var(--soft); font-size:12px; }.receiptCard code { display:block; color:var(--soft); font-size:11px; overflow-wrap:anywhere; }.emptyState { grid-column:1/-1; margin:0; padding:24px 0; color:var(--soft); } footer { display:flex; justify-content:space-between; gap:20px; width:min(1240px,calc(100vw - 40px)); margin:0 auto; padding:24px 0 48px; color:var(--soft); font-size:12px; }.toast { position:fixed; z-index:10; right:18px; bottom:18px; max-width:min(450px,calc(100vw - 36px)); padding:13px 15px; border:1px solid var(--line-bright); background:var(--paper); color:var(--black); font-size:13px; font-weight:650; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .18s ease,transform .18s ease; }.toast[data-visible="true"] { opacity:1; transform:translateY(0); } button:disabled { cursor:not-allowed; opacity:.45; }
@media (max-width:860px) { .topbar { grid-template-columns:1fr auto; }.topnav { display:none; }.hero,.workspaceGrid,.creditGrid,.apiGrid { grid-template-columns:1fr; gap:22px; }.hero { min-height:0; padding:34px 0 48px; }.heroCopy { padding:0; }.heroMark { min-height:300px; }.accountBar { grid-template-columns:1fr auto; }.accountStats { grid-column:1/-1; order:3; }.receiptList { grid-template-columns:repeat(2,minmax(0,1fr)); }.sectionHeading { align-items:start; flex-direction:column; gap:10px; }.sectionHeading>p { text-align:left; }.apiKeyPanel { grid-template-columns:1fr; }.apiKeyPanel code { max-width:100%; }.packOptions { grid-template-columns:1fr; }.packOption span { min-height:72px; grid-template-columns:60px 1fr; align-items:center; }.packOption small { grid-column:2; } }
@media (max-width:560px) { .topbar,main,footer { width:min(100% - 28px,1240px); }.walletButton { padding-inline:10px; }.heroMetrics,.accountStats,.fieldGrid,.receiptList { grid-template-columns:1fr; }.heroMetrics { gap:8px; }.heroMetrics div { padding-top:8px; border-top:1px solid var(--line); }.accountBar { grid-template-columns:1fr; gap:15px; }.accountBar .textButton { justify-self:start; }.workspaceSection,.creditsSection,.apiSection,.explorerSection { padding:54px 0; }.createForm,.receiptPreview,.billingForm,.paymentPanel { padding:19px; }.endpoint { grid-template-columns:43px 1fr; }.endpoint small { display:none; }.previewActions .textButton { margin-left:0; } footer { flex-direction:column; } }