/* EveryFrame API platform. One frame for every page: top bar, sidebar, content. */
:root{
  --bg:#F7F6FB;--panel:#FFFFFF;--ink:#17142A;--ink2:#3A3350;--muted:#4A4560;--dim:#5E5A70;
  --line:#E4E1EC;--line2:#EFEDF4;--soft:#CFC8E0;--accent:#8A3FD1;--accent-hover:#7A35BD;--accent-ink:#7A2FC0;--accent-deep:#5B1F96;
  --tint:#F3F0FA;--tint2:#EDE7FA;--code:#17142A;--ok:#16794A;--ok-ring:#BFE0CC;--bad:#A3281E;--bad-ring:#E7C4BF;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --nav-w:236px;--top-h:64px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink)}a:hover{color:var(--accent-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
img,svg{display:block}
code,pre{font-family:var(--mono)}
[hidden],.hidden{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 12px;border-radius:8px;z-index:20}
.skip:focus{left:8px}

/* Top bar */
.top{position:sticky;top:0;z-index:10;height:var(--top-h);background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 20px 0 18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand img{width:28px;height:28px}
.brand b{font-weight:600;font-size:18px;letter-spacing:-.02em}
.tag{font-size:12px;font-weight:600;color:var(--accent-ink);background:var(--tint);border-radius:999px;padding:2px 8px;letter-spacing:.01em}
.spacer{flex:1}
.acct{display:flex;align-items:center;gap:12px}
.balance{display:flex;align-items:baseline;gap:6px;font-size:13.5px;color:var(--dim);white-space:nowrap}
.balance strong{font-size:15px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* Frame */
.shell{display:flex;align-items:stretch;min-height:calc(100vh - var(--top-h));background:linear-gradient(to right,var(--panel) calc(var(--nav-w) - 1px),var(--line) calc(var(--nav-w) - 1px),var(--line) var(--nav-w),transparent var(--nav-w))}
.c-nav{flex:0 0 var(--nav-w);background:var(--panel);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));overflow-y:auto}
.c-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:500;min-height:40px}
.c-nav a:hover{background:var(--bg);color:var(--ink)}
.c-nav a[aria-current="page"]{background:var(--tint2);color:#3A2466}
.c-nav a svg{flex:none;color:var(--dim)}
.c-nav a[aria-current="page"] svg{color:var(--accent)}
.c-nav .group{font-size:12px;font-weight:600;color:var(--dim);padding:14px 12px 6px}
.c-nav .bottom{margin-top:auto;border-top:1px solid var(--line2);padding-top:12px;display:flex;flex-direction:column;gap:2px}
.who{padding:6px 12px 8px;font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who b{display:block;color:var(--ink);font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.linkbtn{all:unset;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--ink2);font-size:14.5px;font-weight:500;cursor:pointer;min-height:22px}
.linkbtn:hover{background:var(--bg)}
.linkbtn:focus-visible{outline:2px solid var(--accent)}
.c-main{flex:1;min-width:0;padding:32px clamp(16px,3.2vw,44px) 64px;display:flex;flex-direction:column;gap:24px}
.page{width:100%;max-width:1180px;display:flex;flex-direction:column;gap:24px}

/* Headings and text */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.page-head > div:first-child{display:flex;flex-direction:column;gap:6px;min-width:0}
h1{margin:0;font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
h2{margin:0;font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.sub{margin:0;font-size:15px;color:var(--muted);max-width:62ch}
.note{margin:0;font-size:13.5px;color:var(--dim)}
.error{margin:0;font-size:14px;color:var(--bad)}
.ok-msg{color:var(--ok);font-weight:500}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--sans);border-radius:10px;padding:11px 16px;min-height:42px;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background-color .15s,border-color .15s}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-ghost{background:var(--panel);color:var(--ink);border-color:var(--soft)}.btn-ghost:hover{border-color:var(--accent);color:var(--ink)}
.btn-quiet{background:none;color:var(--ink2);padding-inline:10px}.btn-quiet:hover{background:var(--tint)}
.btn-danger{background:var(--panel);color:var(--bad);border-color:var(--bad-ring)}.btn-danger:hover{border-color:var(--bad);color:var(--bad)}
.btn-sm{font-size:13.5px;padding:8px 12px;min-height:36px;border-radius:9px}
.btn-lg{font-size:15px;padding:13px 20px;min-height:48px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* Surfaces */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.panel-h{margin:0;padding:18px 20px 4px;font-size:16px;font-weight:600}
.table-box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow-x:auto}
.cols{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.cols > .grow{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px}
.cols > .side-col{flex:1 1 300px;min-width:0;max-width:380px}
.cols > .half{flex:1 1 360px;min-width:0}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{padding:12px 18px;font-weight:500;font-size:12.5px;color:var(--dim);text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;background:#FCFBFE}
td{padding:13px 18px;border-bottom:1px solid var(--line2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#FBFAFD}
.num-col{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.num-col{text-align:right}
.id{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.nowrap{white-space:nowrap}
.cell-sub{font-size:12.5px;color:var(--dim)}
.actions-cell{text-align:right;white-space:nowrap}
.actions-cell .btn + .btn{margin-left:6px}
.table-min-720{min-width:720px}.table-min-980{min-width:980px}.table-min-640{min-width:640px}
.empty{margin:0;padding:28px 20px;color:var(--muted);font-size:14.5px}
.edit-row td{background:var(--bg)!important}
.edit-row form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.edit-row .field{flex:1 1 200px}

/* Forms */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink2)}
.field input,.field select,select.inline{font:400 14.5px var(--sans);color:var(--ink);background:var(--panel);border:1px solid var(--soft);border-radius:10px;padding:9px 12px;min-height:42px;width:100%}
.field input:hover,.field select:hover,select.inline:hover{border-color:#B6ACCD}
select.inline{width:auto;min-height:38px;padding:7px 10px;font-size:13.5px}
.field small{font-weight:400;color:var(--dim);font-size:12.5px}
fieldset{border:none;margin:0;padding:0;display:flex;flex-direction:column}
legend{font-size:13.5px;font-weight:500;color:var(--ink2);padding:0 0 4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:6px 0;cursor:pointer}
.check input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.check small{display:block;color:var(--dim);font-size:12.5px}
.inline-input{display:flex;align-items:center;gap:8px}.inline-input input{flex:1 1 auto;min-width:0}.inline-input span{color:var(--dim);font-weight:400}
.label-inline{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dim)}
.controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}

/* Key created */
.secret{border-color:var(--accent);display:flex;flex-direction:column;gap:12px}
.secret-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.secret-row code{flex:1 1 320px;min-width:0;overflow-x:auto;white-space:nowrap;font-size:13.5px;background:var(--code);color:#F5F3FA;border-radius:10px;padding:12px 14px}

/* Getting started */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line2);border-radius:12px;background:var(--bg)}
.steps .dot{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--panel);border:1px solid var(--soft);color:var(--ink2)}
.steps li.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.steps b{display:block;font-size:14.5px;font-weight:600}
.steps span{font-size:13px;color:var(--dim)}
.steps a{font-size:13.5px;font-weight:500}

/* Stats */
.stats{background:var(--panel);border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stats > div{padding:18px 22px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line2)}
.stats > div:last-child{border-right:none}
.stats span{font-size:13px;color:var(--dim)}.stats small{font-size:12.5px;color:var(--dim)}
.stats strong{font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.3}
.chart{height:170px;display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid var(--soft);margin-top:14px}
.chart div{flex:1 1 0;min-width:3px;background:#D9CCF3;border-radius:3px 3px 0 0}
.chart div:hover{background:var(--accent)}
.chart-axis{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim);margin-top:6px}
.row-between{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);border-color:var(--ok-ring)}.pill.run{color:var(--accent-ink);border-color:#D9CCF3}.pill.bad{color:var(--bad);border-color:var(--bad-ring)}

/* Billing */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.pack{border:1px solid var(--soft);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;cursor:pointer;background:var(--panel)}
.pack:hover{border-color:#B6ACCD}
.pack:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#FCFAFF}
.pack b{display:flex;gap:9px;align-items:center;font-size:16px;font-weight:600}
.pack input{accent-color:var(--accent);width:17px;height:17px;margin:0}
.pack .price{font-size:14.5px;color:var(--ink);font-weight:500}
.pack span{font-size:13px;color:var(--dim)}
.pay-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pay{display:flex;flex-direction:column;gap:12px;border-color:var(--accent)}
.pay dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 16px;align-items:center}
.pay dt{font-size:13px;color:var(--dim)}
.pay dd{margin:0;display:flex;gap:8px;align-items:center;min-width:0}
.pay dd code{font-size:13.5px;overflow-x:auto;white-space:nowrap;background:var(--tint);color:#3A2466;border-radius:8px;padding:8px 10px;min-width:0}

/* Sign in */
.signin{max-width:440px;margin:6vh auto 0;display:flex;flex-direction:column;gap:14px;text-align:left}
.signin .btns{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.signin .btns .btn{justify-content:flex-start;gap:12px}
.signin .btns svg{flex:none}

/* Models */
.seg{display:inline-flex;gap:2px;background:#EDEAF4;border-radius:11px;padding:3px}
.seg button{font:500 13.5px/1 var(--sans);color:var(--ink2);background:transparent;border:none;border-radius:8px;padding:9px 14px;min-height:36px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(23,20,42,.12)}
.seg .count{color:var(--dim);font-weight:400;margin-left:4px}
.cards2{display:flex;flex-wrap:wrap;gap:16px}
.cards2 > div{flex:1 1 380px;min-width:0;border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line)}
.cards2 > div.dark{background:var(--code);color:#F5F3FA;border-color:var(--code)}
.cards2 p{margin:0;font-size:14px;color:var(--muted)}
.cards2 .dark p{color:#CFC8E0}.cards2 .dark code{color:#E2A8FF;font-size:13.5px;overflow-x:auto;white-space:nowrap;padding:4px 0}

/* Docs */
.doc-layout{display:flex;gap:48px;align-items:flex-start;width:100%;max-width:1180px}
.doc{flex:1;min-width:0;max-width:760px;display:flex;flex-direction:column}
.doc > p{margin:8px 0 0;font-size:16px;color:var(--ink2);max-width:62ch}
.step{display:flex;flex-direction:column;gap:12px;padding-top:36px;scroll-margin-top:calc(var(--top-h) + 16px)}
.step h2{font-size:20px;display:flex;gap:12px;align-items:baseline}
.step h2 .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tint2);color:#3A2466;font-size:13.5px;font-weight:600;flex:none;transform:translateY(-2px)}
.step p,.step li{margin:0;color:var(--ink2);max-width:66ch;font-size:15px}
.step .note{font-size:13.5px}
.code{position:relative;background:var(--code);color:#F5F3FA;border-radius:12px;padding:15px 18px;overflow-x:auto}
.code pre{margin:0;font-size:13px;line-height:1.7;white-space:pre}
.code.light{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.k{color:#E2A8FF}.s{color:#F3C98B}.n{color:#8FD9C4}.c{color:#A9A4B8}
.code.light .c{color:var(--dim)}.code.light .k{color:var(--accent-ink)}.code.light .s{color:#8A4A0B}.code.light .n{color:#0E6B55}
.copy{position:absolute;top:8px;right:8px;font:500 12px/1 var(--sans);color:#CFC8E0;background:#2A2638;border:1px solid #3A3350;border-radius:8px;padding:7px 10px;cursor:pointer}
.copy:hover{color:#fff}
code.i{font-family:var(--mono);font-size:.87em;background:var(--tint);color:#3A2466;border-radius:6px;padding:2px 6px}
.endpoint{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-family:var(--mono);font-size:13.5px}
.verb{font-weight:600;font-size:11.5px;border-radius:6px;padding:3px 7px;background:var(--tint2);color:#3A2466;letter-spacing:.02em}
.toc{flex:0 0 210px;position:sticky;top:calc(var(--top-h) + 24px);display:flex;flex-direction:column;gap:1px;max-height:calc(100vh - var(--top-h) - 48px);overflow-y:auto}
.toc b{font-size:12px;font-weight:600;color:var(--dim);padding:12px 0 4px}
.toc b:first-child{padding-top:0}
.toc a{padding:4px 0 4px 10px;color:var(--muted);text-decoration:none;font-size:13.5px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--accent-ink);border-left-color:var(--accent);font-weight:500}

/* Phone and narrow screens */
@media (max-width:1100px){.toc{display:none}}
@media (max-width:780px){
  .top{padding:0 14px;gap:10px}
  .acct .btn{display:none}
  .shell{flex-direction:column;background:none}
  .c-nav{position:static;height:auto;flex:none;flex-direction:row;overflow-x:auto;padding:8px 10px;border-right:none;border-bottom:1px solid var(--line);gap:4px}
  .c-nav a{flex:none;white-space:nowrap;min-height:38px}
  .c-nav .group,.c-nav .bottom{display:none}
  .c-main{padding:22px 16px 48px}
  h1{font-size:24px}
  .pay dl{grid-template-columns:minmax(0,1fr)}
  .stats > div{border-right:none;border-bottom:1px solid var(--line2)}
  .stats > div:last-child{border-bottom:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.start{display:flex;flex-direction:column;gap:14px}
.page-head > .controls{flex:none}
.chart-wrap{position:relative}
.chart-empty{position:absolute;inset:0 0 1px;display:grid;place-items:center;margin:0;font-size:14px;color:var(--dim)}
#key-rows td:first-child b{white-space:nowrap}
a.balance{text-decoration:none}a.balance:hover strong{color:var(--accent-ink)}
@media (max-width:780px){
  .stack-table{min-width:0!important}
  .stack-table thead{display:none}
  .stack-table tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:16px 18px;border-bottom:1px solid var(--line2)}
  .stack-table tbody tr:last-child{border-bottom:none}
  .stack-table td{padding:0;border:none;text-align:left!important;white-space:normal}
  .stack-table td[data-label]::before{content:attr(data-label);display:block;font-size:12px;color:var(--dim);margin-bottom:2px}
  .stack-table td:first-child,.stack-table td.actions-cell,.stack-table .edit-row td{grid-column:1 / -1}
  .stack-table td.actions-cell{display:flex;gap:8px}
  .stack-table td.actions-cell .btn + .btn{margin-left:0}
  .stack-table .edit-row{display:block}
}