@import url('/static/fonts.css');

:root{color-scheme:dark;--bg:#090a0b;--panel:rgba(255,255,255,.035);--line:rgba(255,255,255,.10);--line-hi:rgba(255,255,255,.19);--text:#f3f3f4;--muted:#96969e;--faint:#62626b;--white:#ececee;--radius:20px;--font:'Manrope',Inter,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',Consolas,monospace}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.025' filter='url(%23n)'/%3E%3C/svg%3E");z-index:20;opacity:.43}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.42}
button{color:inherit}
h1,h2,h3,h4,p{margin:0}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:5px}
input:focus,textarea:focus,select:focus{outline:none;border-color:#7e7e87!important;box-shadow:0 0 0 3px #ffffff08}
::selection{background:#ffffff30;color:#fff}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:750;font-size:21px;letter-spacing:0}
.logo-mark{width:35px;height:35px;position:relative;display:inline-block;filter:drop-shadow(0 2px 8px #ffffff18)}
.logo-mark:before,.logo-mark:after{content:'';position:absolute;width:9px;height:25px;background:linear-gradient(160deg,#fff,#8d8d92);transform:skew(-29deg);border-radius:2px;top:3px;left:7px}
.logo-mark:after{left:20px;top:8px;height:22px;background:linear-gradient(160deg,#d1d1d5,#626269)}
.logo small{font-family:var(--mono);font-size:9px;color:#aaa;letter-spacing:.5px;font-weight:400;border:1px solid var(--line);padding:2px 5px;border-radius:4px;margin-left:2px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:#a2a2ac;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:11px 19px;border:1px solid var(--line-hi);border-radius:9px;background:rgba(255,255,255,.035);color:#eaeaec;font-size:12px;font-weight:650;line-height:1.4;transition:background .2s,border-color .2s,transform .2s}
.btn:hover:not(:disabled){background:#ffffff0e;border-color:#ffffff3c;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(#fbfbfc,#d9d9df);border-color:#fff9;color:#111214;box-shadow:0 0 20px #ffffff06,inset 0 -2px 0 #0000000c}
.btn.primary:hover:not(:disabled){background:#fff;box-shadow:0 0 24px #ffffff15}
.btn.subtle{border-color:transparent;background:transparent;color:var(--muted)}
.btn.small{min-height:34px;padding:8px 12px;font-size:11px}
.btn.wide{width:100%}
.btn.big{min-height:48px;padding:13px 23px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:8px;width:34px;height:34px;color:var(--muted)}
.icon-btn:hover{background:#ffffff08;color:#fff;border-color:var(--line)}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.052),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 #ffffff04;backdrop-filter:blur(24px)}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#ffffff04;padding:5px 10px;border-radius:30px;font-family:var(--mono);font-size:10px;white-space:nowrap}
.status-dot{width:5px;height:5px;border-radius:50%;background:#8a8a94;box-shadow:0 0 0 3px #ffffff06;display:inline-block}
.status-dot.online{background:#ececee;box-shadow:0 0 8px #ffffff66}
.status-dot.checking{animation:pulse 1.6s infinite}
.divider{height:1px;background:var(--line)}
.container{max-width:1240px;margin:auto;padding:0 40px}
.landing{overflow:hidden;position:relative;background:radial-gradient(ellipse 45% 25% at 78% 10%,#fff9 0%,transparent 1%,#ffffff06 8%,transparent 100%)}
.topnav{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff09}
.nav-links{display:flex;align-items:center;gap:32px;color:var(--muted);font-size:12px}
.nav-links a:hover{color:#fff}
.nav-actions{display:flex;gap:12px;align-items:center}
.hero{min-height:625px;display:grid;grid-template-columns:1.03fr 1fr;align-items:center;gap:10px;padding-top:36px;padding-bottom:25px}
.hero-content{position:relative;z-index:2;padding-bottom:18px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.8px;color:#c4c4cc;padding:7px 10px 7px 8px;border:1px solid #ffffff13;border-radius:6px;background:linear-gradient(90deg,#ffffff08,#ffffff02);margin-bottom:27px}
.hero-badge span{display:inline-block;background:#d8d8dc;color:#171719;padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:9px;letter-spacing:.7px}
.hero h1{font-size:clamp(44px,5.7vw,72px);line-height:1.09;font-weight:600;letter-spacing:-4px;margin-left:-3px}
.hero h1 .dim{background:linear-gradient(110deg,#cacacf,#66666e);background-clip:text;-webkit-text-fill-color:transparent}
.hero-copy{font-size:14px;line-height:1.9;color:var(--muted);max-width:392px;margin-top:24px}
.hero-buttons{display:flex;gap:12px;margin-top:31px}
.hero-footnote{display:flex;align-items:center;gap:15px;color:#71717a;font-size:10px;margin-top:23px}
.hero-footnote span{display:flex;align-items:center;gap:5px}
.hero-footnote .icon{width:12px;height:12px}
.hero-art{position:relative;height:480px;isolation:isolate;margin-left:-5px}
.art-grid{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse,#000 20%,transparent 72%)}
.orbital{position:absolute;left:50%;top:46%;width:440px;height:440px;transform:translate(-50%,-50%);border:1px solid #ffffff08;border-radius:50%;box-shadow:0 0 70px #ffffff02,inset 0 0 60px #ffffff02}
.orbital:before{content:'';position:absolute;inset:44px;border:1px dashed #ffffff12;border-radius:50%;transform:rotate(-25deg)}
.orbital:after{content:'';position:absolute;left:22px;top:114px;width:5px;height:5px;border-radius:50%;background:#a9a9af;box-shadow:0 0 14px #ffffff66}
.sphere{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-18deg);width:272px;height:272px;border-radius:50%;background:radial-gradient(ellipse at 33% 18%,#797a8055,transparent 40%),radial-gradient(ellipse at 50% 100%,#000,transparent 65%),linear-gradient(135deg,#34353b,#101114 40%,#292a3055 70%,#090a0d);border:1px solid #ffffff30;box-shadow:inset 7px 9px 15px #ffffff14,inset -10px -10px 25px #000,0 35px 90px #000,0 0 80px #ffffff03;overflow:hidden;display:grid;place-items:center}
.sphere:before{content:'';position:absolute;inset:-25%;background:repeating-linear-gradient(90deg,transparent 0px,transparent 14px,#fff1 15px,#0005 16px,transparent 17px);transform:rotate(18deg);mask-image:radial-gradient(ellipse,#0008,transparent 70%)}
.sphere:after{content:'';position:absolute;inset:10px;border:1px solid #ffffff05;border-radius:50%;box-shadow:inset 0 10px 20px #ffffff03}
.sphere .logo-mark{transform:scale(3.9) rotate(18deg);opacity:.85;filter:drop-shadow(0 15px 8px #000b)}
.model-float{position:absolute;left:22px;top:68px;width:187px;padding:15px 16px;border-radius:13px;transform:rotate(-5deg);background:linear-gradient(140deg,#33333870,#17171bbd);backdrop-filter:blur(20px);box-shadow:0 16px 45px #0005;z-index:3}
.model-float .tiny-label{font-size:9px;color:#93939e;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.model-float strong{font-size:15px;letter-spacing:-.4px;font-weight:550}
.model-float p{font-family:var(--mono);font-size:9px;margin-top:5px;color:#868690}
.price-float{position:absolute;top:263px;right:0;padding:18px 20px;width:174px;transform:rotate(6deg);z-index:2;background:linear-gradient(120deg,#2c2d33ae,#141518e6);border-radius:14px;box-shadow:0 12px 40px #0005}
.price-float .eyebrow{font-size:8px;letter-spacing:1px}
.price-float strong{display:block;font-size:37px;line-height:1.3;font-weight:500;letter-spacing:-2px}
.price-float small{font-size:10px;color:#90909a}
.mini-stream{position:absolute;bottom:10px;left:60px;right:62px;padding:13px 16px;border-radius:10px;background:linear-gradient(110deg,#1b1c208e,#111216d9);z-index:4;font-family:var(--mono);font-size:9px}
.mini-stream-head{display:flex;align-items:center;justify-content:space-between;color:#82828c;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #ffffff09}
.mini-stream-code{color:#b9b9c1;display:flex;align-items:center;gap:7px}
.mini-stream-code .muted{color:#656570}
.cursor{display:inline-block;width:5px;height:12px;background:#a8a8ae;animation:pulse 2s infinite}
.orbit-label{position:absolute;top:38px;right:39px;font-size:8px;color:#5a5a64;letter-spacing:1.5px;font-family:var(--mono);writing-mode:vertical-rl}
.compat-strip{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 0;color:#9797a0;gap:20px}
.compat-strip>span{font-size:10px;max-width:155px;line-height:1.6;color:#60606a}
.compat-list{display:flex;align-items:center;gap:52px;font-size:17px;font-weight:550;letter-spacing:-.7px}
.compat-list span{display:flex;align-items:center;gap:8px}
.compat-list .mono{font-size:14px;letter-spacing:-.5px}
.compat-list .icon{opacity:.7}
.section{padding-top:90px;padding-bottom:12px}
.section-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:29px}
.section h2{font-size:31px;font-weight:500;letter-spacing:-1.2px;line-height:1.3;margin-top:12px}
.section-intro>p{color:var(--muted);font-size:12px;max-width:285px;line-height:1.8}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature{padding:25px 25px 28px;position:relative;overflow:hidden}
.feature-no{position:absolute;right:22px;top:23px;font-family:var(--mono);font-size:10px;color:#4e4e57}
.feature-icon{width:40px;height:40px;background:linear-gradient(135deg,#ffffff0e,#ffffff03);border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;color:#c2c2cc;margin-bottom:24px}
.feature h3{font-size:15px;font-weight:550;letter-spacing:-.25px;margin-bottom:9px}
.feature p{color:#85858f;font-size:11px;line-height:1.9;max-width:270px}
.pricing-panel{display:grid;grid-template-columns:1.08fr 1fr;position:relative;overflow:hidden}
.pricing-panel:before{content:'';position:absolute;left:0;right:30%;top:-140px;height:220px;background:#fff;filter:blur(130px);opacity:.04;pointer-events:none}
.pricing-main{padding:32px 34px;border-right:1px solid var(--line)}
.model-heading{display:flex;align-items:center;gap:13px}
.model-avatar{width:45px;height:45px;display:grid;place-items:center;background:linear-gradient(135deg,#ffffff12,#ffffff02);border:1px solid #ffffff18;border-radius:12px}
.model-avatar .icon{width:24px;height:24px}
.model-heading h3{font-weight:550;font-size:17px;letter-spacing:-.5px}
.model-heading p{font-size:11px;color:var(--muted)}
.model-heading .pill{margin-left:auto;font-size:8px}
.price-line{display:flex;align-items:baseline;gap:10px;margin-top:30px}
.price-line strong{font-size:55px;font-weight:500;letter-spacing:-3px;line-height:1.2}
.price-line span{color:var(--muted);font-size:12px}
.price-breakdown{display:flex;gap:25px;margin:17px 0 27px;color:#9696a0;font-size:10px}
.price-breakdown span{display:flex;align-items:center;gap:5px}
.price-breakdown .icon{width:13px;height:13px}
.calculator{padding:32px 34px;background:#00000018;display:flex;flex-direction:column}
.calculator h3{font-size:14px;font-weight:550}
.calculator p{color:var(--muted);font-size:11px;margin-top:6px}
.range-caption{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:29px}
.range-caption strong{font-family:var(--mono);font-size:12px;font-weight:400}
input[type=range]{accent-color:#dedee4;width:100%;margin:20px 0 8px;cursor:pointer}
.range-labels{display:flex;justify-content:space-between;color:#64646e;font-size:9px;font-family:var(--mono)}
.estimate{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}
.estimate span{font-size:11px;color:var(--muted)}
.estimate strong{font-size:27px;font-weight:500;letter-spacing:-1px}
.code-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center;padding-top:85px}
.code-section h2{font-size:30px;font-weight:500;line-height:1.4;letter-spacing:-1px;margin:10px 0 17px}
.code-section p{font-size:12px;line-height:1.9;color:var(--muted);max-width:330px;margin-bottom:23px}
.code-box{background:#0e0f12;border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:9px 15px;border-bottom:1px solid var(--line);color:#93939d;font-family:var(--mono);font-size:10px;background:#ffffff02}
.window-dots{display:flex;gap:4px}
.window-dots i{width:6px;height:6px;background:#ffffff24;border-radius:50%}
.code-box pre{margin:0;padding:24px;font-family:var(--mono);font-size:10px;line-height:2;color:#bcbcc5;overflow:auto;tab-size:4}
.code-box code{font-family:inherit}
.code-box .code-comment{color:#595965}
.faq-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;padding-top:90px;padding-bottom:85px}
.faq-section h2{font-size:30px;font-weight:500;letter-spacing:-1px;margin-top:12px}
.faq-list details{padding:17px 0;border-bottom:1px solid var(--line)}
.faq-list details:first-child{padding-top:0}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-size:12px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';color:#888;font-family:var(--mono)}
.faq-list details[open] summary:after{content:'−'}
.faq-list details p{font-size:11px;line-height:1.9;color:var(--muted);margin-top:13px;max-width:450px}
.landing-footer{padding:25px 0 33px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.landing-footer .logo{font-size:15px}
.landing-footer .logo-mark{transform:scale(.8);margin-right:-5px}
.landing-footer p{font-size:10px;color:#64646e}
.landing-footer .footer-links{display:flex;gap:25px;color:#868690;font-size:10px}


.app-shell{min-height:100vh;background:radial-gradient(ellipse 55% 30% at 75% 0,#ffffff04,transparent)}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:224px;padding:29px 18px 20px;border-right:1px solid var(--line);background:#0c0d0ee8;display:flex;flex-direction:column;z-index:15}
.sidebar .logo{margin-left:9px;font-size:20px}
.workspace-label{font-size:9px;font-family:var(--mono);letter-spacing:1.8px;color:#5f5f6b;padding:38px 13px 11px}
.side-nav{display:grid;gap:5px}
.side-nav a{display:flex;gap:12px;align-items:center;padding:11px 13px;font-size:12px;color:#93939e;border:1px solid transparent;border-radius:8px}
.side-nav a.active{background:linear-gradient(100deg,#ffffff0c,#ffffff05);border-color:#ffffff0d;color:#f2f2f5}
.side-nav a:hover{background:#ffffff05;color:#fff}
.side-nav .icon{width:17px;height:17px}
.side-nav .nav-tag{font-family:var(--mono);font-size:8px;letter-spacing:.5px;margin-left:auto;color:#73737f;border:1px solid #ffffff13;border-radius:4px;padding:0 4px}
.sidebar-bottom{margin-top:auto}
.side-promo{margin:25px 4px 20px;padding:16px 14px;border-radius:11px;background:linear-gradient(135deg,#ffffff06,#ffffff01);border:1px solid #ffffff0c}
.side-promo .icon{width:18px;height:18px;margin-bottom:9px;color:#b1b1be}
.side-promo strong{display:block;font-size:11px;font-weight:500}
.side-promo p{font-size:10px;line-height:1.8;color:#6f6f7a;margin:5px 0 12px}
.side-promo .btn{font-size:10px;min-height:30px;padding:6px 10px;width:100%}
.sidebar-status{font-size:9px;color:#7e7e88;display:flex;align-items:center;gap:8px;padding:0 14px}
.app-main{margin-left:224px}
.app-topbar{height:79px;padding:0 39px;border-bottom:1px solid #ffffff0b;display:flex;justify-content:space-between;align-items:center;gap:14px}
.breadcrumb{font-size:11px;color:#62626e;display:flex;align-items:center;gap:13px}
.breadcrumb span:last-child{color:#c6c6cf}
.user-menu{display:flex;align-items:center;gap:13px}
.user-email{font-size:10px;color:#92929d;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#ffffff18,#ffffff04);border:1px solid #ffffff14;display:grid;place-items:center;font-size:10px}
.mobile-toggle{display:none}
.app-content{max-width:1380px;padding:36px 39px 45px;margin:auto}
.page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}
.page-header h1{font-size:29px;letter-spacing:-1px;line-height:1.3;font-weight:550}
.page-header p{font-size:11px;color:#868691;margin-top:9px}
.page-header .header-actions{display:flex;gap:9px;align-items:center}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:22px}
.metric{padding:21px 22px;min-height:143px;position:relative}
.metric-top{display:flex;align-items:center;justify-content:space-between;color:#898995;font-size:10px;margin-bottom:15px}
.metric-top .icon{width:15px;height:15px;color:#6a6a75}
.metric-value{font-size:29px;line-height:1.25;letter-spacing:-1px;font-weight:500}
.metric-foot{margin-top:9px;font-size:9px;color:#666672}
.metric:first-child{background:radial-gradient(ellipse at 0 0,#ffffff09,transparent),linear-gradient(135deg,#ffffff06,#ffffff02);border-color:#ffffff22}
.dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:22px}
.panel{padding:23px 24px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
.panel-head h2{font-size:13px;font-weight:550}
.panel-head p{font-size:10px;color:var(--muted);margin-top:4px}
.panel-head .pill{font-size:8px;color:#8e8e99}
.chart{height:162px;display:flex;align-items:stretch;position:relative;padding-top:15px;gap:12px}
.chart-grid{position:absolute;inset:0 0 23px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.chart-grid i{border-top:1px dashed #ffffff09;width:100%}
.chart-bar{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-end;z-index:1;gap:10px;min-width:0}
.bar-track{height:125px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.bar-fill{max-width:35px;width:65%;min-height:2px;background:linear-gradient(#b6b6bf,#4e4e5999);border-radius:4px 4px 0 0;border:1px solid #ffffff13}
.chart-bar label{font-family:var(--mono);font-size:8px;color:#656571}
.chart-empty{position:absolute;inset:0 0 25px;display:grid;place-items:center;font-size:10px;color:#6d6d78;pointer-events:none}
.quickstart{background:radial-gradient(ellipse at 90% 0,#ffffff07,transparent),var(--panel)}
.quickstart p{font-size:11px;line-height:1.9;color:#8b8b96;margin-bottom:17px}
.base-url{display:flex;align-items:center;justify-content:space-between;padding:5px 5px 5px 11px;background:#0003;border:1px solid var(--line);border-radius:8px;gap:8px}
.base-url code{font-family:var(--mono);font-size:9px;color:#c2c2cd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quickstart .btn{margin-top:16px;font-size:10px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;white-space:nowrap}
th{text-align:left;padding:12px 15px;font-size:9px;font-weight:400;color:#747480;border-top:1px solid #ffffff0b;border-bottom:1px solid #ffffff0b}
td{padding:16px 15px;border-bottom:1px solid #ffffff07;font-size:10px;color:#aaaab5}
tr:last-child td{border-bottom:0}
td:first-child,th:first-child{padding-left:0}
td:last-child,th:last-child{text-align:right;padding-right:0}
.empty-state{padding:43px 20px;text-align:center}
.empty-state .empty-icon{width:42px;height:42px;margin:0 auto 14px;display:grid;place-items:center;background:#ffffff04;border:1px solid var(--line);border-radius:12px;color:#8a8a96}
.empty-state h3{font-size:13px;font-weight:500;margin-bottom:6px}
.empty-state p{font-size:11px;color:#797985;max-width:330px;margin:0 auto 18px;line-height:1.8}
.empty-state .btn{font-size:10px}
.status-label{font-family:var(--mono);font-size:8px;color:#c2c2cc;display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border:1px solid #ffffff0f;border-radius:5px;background:#ffffff03}
.status-label.pending{color:#888893;border-style:dashed}
.notice{display:flex;align-items:flex-start;gap:10px;padding:15px 17px;border:1px solid #ffffff12;background:#ffffff03;border-radius:10px;font-size:11px;color:#8e8e9a;line-height:1.8;margin:20px 0}
.notice .icon{width:16px;height:16px;margin-top:3px}
.notice strong{color:#bcbcc7;font-weight:500}
.keys-panel{padding-bottom:7px}
.table-key-name{display:flex;align-items:center;gap:9px;color:#dddde4}
.table-key-name .icon{width:15px;height:15px;color:#777783}
.danger-btn{color:#a4a4af}
.revoked{opacity:.45}
.balance-panel{display:flex;justify-content:space-between;align-items:center;padding:30px;margin-bottom:22px;background:radial-gradient(ellipse at 10% 0,#ffffff0a,transparent),var(--panel)}
.balance-panel .eyebrow{font-size:9px;letter-spacing:1px}
.balance-big{font-size:48px;line-height:1.4;letter-spacing:-2px;font-weight:500;margin-top:6px}
.balance-panel p{color:#7e7e8b;font-size:10px;margin-top:4px}
.billing-columns{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.payment-method{display:flex;gap:13px;align-items:center;padding:15px 0}
.payment-method .payment-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid #ffffff14;background:#ffffff07;border-radius:10px;font-size:20px}
.payment-method strong{font-size:12px;font-weight:500}
.payment-method p{font-size:10px;color:#7c7c89;margin-top:3px}
.payment-method .pill{margin-left:auto;font-size:8px}
.billing-note{font-size:11px;line-height:1.9;color:#7d7d88;padding-top:17px;border-top:1px solid var(--line)}
.locked{max-width:650px;margin:70px auto;padding:60px 40px;text-align:center}
.locked .empty-icon{width:58px;height:58px;margin:0 auto 22px;display:grid;place-items:center;background:#ffffff06;border:1px solid var(--line);border-radius:16px}
.locked h1{font-size:27px;font-weight:500;letter-spacing:-.8px}
.locked p{font-size:12px;line-height:1.9;color:var(--muted);max-width:350px;margin:15px auto 25px}
.app-footer{display:flex;justify-content:space-between;gap:20px;margin-top:28px;font-size:9px;color:#565662}
.playground-layout{display:grid;grid-template-columns:1fr 259px;gap:18px;height:calc(100vh - 238px);min-height:460px}
.chat-panel{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.chat-toolbar{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line);font-size:11px;gap:10px}
.chat-toolbar>span{display:flex;gap:8px;align-items:center}
.chat-toolbar .icon{width:15px;height:15px}
.chat-toolbar .pill{font-size:8px}
.chat-messages{flex:1;overflow:auto;min-height:180px;scroll-behavior:smooth;padding:22px;overscroll-behavior:contain}
.chat-welcome{height:100%;min-height:215px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.chat-welcome .welcome-orb{width:64px;height:64px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#ffffff12,#ffffff02);box-shadow:inset 0 1px 0 #ffffff15,0 0 60px #ffffff04;border:1px solid #ffffff12;border-radius:50%;margin-bottom:20px}
.chat-welcome .icon{width:28px;height:28px;color:#bdbdc8}
.chat-welcome h2{font-size:19px;font-weight:500;letter-spacing:-.7px}
.chat-welcome p{font-size:11px;color:#7e7e8b;max-width:290px;margin-top:9px;line-height:1.8}
.suggestions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:25px}
.suggestions button{font-size:10px;color:#9898a5;background:#ffffff02;border:1px solid #ffffff0e;padding:8px 11px;border-radius:7px}
.suggestions button:hover{background:#ffffff08;color:#fff}
.composer{padding:13px 16px 11px;border-top:1px solid #ffffff09;background:#ffffff02}
.composer-inner{position:relative;display:flex;align-items:flex-end;gap:10px;padding:12px;background:#08090b88;border:1px solid #ffffff13;border-radius:12px}
.composer textarea{width:100%;min-height:40px;max-height:150px;resize:none;background:none;border:none!important;box-shadow:none!important;color:#dddde6;font-size:11px;line-height:1.8;padding:3px 0}
.composer textarea::placeholder{color:#60606e}
.send-btn{width:33px;height:33px;min-height:33px;padding:0;border-radius:8px;flex-shrink:0}
.composer-foot{display:flex;justify-content:space-between;gap:12px;color:#5c5c69;font-size:8px;margin-top:9px;padding:0 3px}
.settings-panel{padding:22px 19px;height:max-content}
.settings-panel h2{font-size:12px;font-weight:500;margin-bottom:25px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#9393a0}
.field input,.field select,.field textarea{color:#dddde6;background:#0003;border:1px solid #ffffff14;border-radius:8px;padding:10px 12px;width:100%;font-size:11px;min-width:0}
.field textarea{resize:vertical;min-height:115px;line-height:1.8}
.field input[type=range]{padding:0;margin:4px 0;border:none;box-shadow:none}
.field small{font-size:9px;color:#626270}
.settings-price{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:17px;border-top:1px solid var(--line);font-size:9px;color:#797986}
.settings-price strong{color:#c6c6d0;font-size:11px;font-weight:500}
.message{display:flex;gap:13px;margin-bottom:25px}
.message-avatar{width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;background:#ffffff07;border:1px solid #ffffff0e;border-radius:8px;font-size:9px;color:#aaaab6}
.message-avatar .icon{width:15px;height:15px}
.message-body{min-width:0;flex:1}
.message-label{font-size:9px;color:#747481;display:flex;gap:10px;align-items:center;margin:4px 0 8px}
.message-label strong{font-weight:500;color:#bebeca}
.message-text{font-size:12px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;color:#bcbcc8;font-family:var(--font)}
.message.error .message-text{color:#e4e4e9;border-left:2px solid #747480;padding-left:12px}
.stream-dots:after{content:'●';font-size:9px;animation:pulse 1s infinite;margin-left:4px}
.chat-usage{font-family:var(--mono);font-size:8px;color:#63636f;margin-top:8px}
.docs-layout{display:grid;grid-template-columns:1fr 250px;gap:26px}
.doc-content{min-width:0}
.doc-content .panel{margin-bottom:20px}
.doc-content h2{font-size:17px;font-weight:500;letter-spacing:-.4px;margin-bottom:12px}
.doc-content p{font-size:12px;color:var(--muted);line-height:1.9;margin-bottom:18px}
.doc-content .code-box{margin-top:17px}
.doc-content code.inline{font-family:var(--mono);font-size:10px;padding:2px 5px;border-radius:4px;background:#ffffff08;color:#cdcdD7}
.doc-content th,.doc-content td{white-space:normal}
.docs-toc{padding:22px;height:max-content;position:sticky;top:20px}
.docs-toc h3{font-size:10px;color:#70707c;text-transform:uppercase;font-weight:400;letter-spacing:1px;margin-bottom:15px}
.docs-toc a{display:block;color:#9d9daa;font-size:11px;padding:9px 0}
.docs-toc a:hover{color:#fff}
.doc-step{font-family:var(--mono);font-size:10px;color:#70707e;margin-right:10px}


dialog{color:var(--text);background:linear-gradient(140deg,#202125f5,#111216fb);border:1px solid #ffffff24;border-radius:20px;padding:30px;width:440px;max-width:calc(100vw - 30px);box-shadow:0 30px 100px #0009, inset 0 1px 0 #ffffff09;backdrop-filter:blur(35px);max-height:90vh;overflow:auto}
dialog::backdrop{background:#050609b3;backdrop-filter:blur(9px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}
.modal-head h2{font-size:20px;font-weight:550;letter-spacing:-.5px}
.modal-head .icon-btn{margin-right:-9px}
.modal-intro{color:#8f8f9c;font-size:11px;line-height:1.8;margin:-8px 0 23px}
.auth-switch{text-align:center;color:#787886;font-size:11px;margin-top:23px}
.auth-switch button{background:none;border:0;padding:0;color:#ceced9;font-size:11px;text-decoration:underline;text-underline-offset:4px}
.form-error{font-size:11px;color:#e2e2e8;line-height:1.7;margin-bottom:15px;display:none;border-left:2px solid #777783;padding:0 10px}
.form-error.visible{display:block}
.auth-fineprint{font-size:9px;color:#626270;text-align:center;line-height:1.7;margin-top:15px}
.secret-key{display:flex;align-items:center;gap:10px;background:#0003;border:1px dashed #ffffff24;border-radius:10px;padding:12px;margin:20px 0}
.secret-key code{font-size:11px;font-family:var(--mono);overflow-wrap:anywhere;min-width:0;flex:1;color:#d4d4df}
.amount-choices{display:flex;gap:8px;margin-bottom:20px}
.amount-choices button{flex:1;padding:8px;background:#ffffff04;border:1px solid #ffffff13;border-radius:7px;font-size:11px}
.amount-choices button.selected{border-color:#c3c3ce;background:#ffffff0d}
.invoice-link{margin:18px 0 0}
.invoice-summary{padding:15px;background:#ffffff04;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;color:#9999a6;font-size:11px}
.invoice-summary strong{font-size:22px;font-weight:500;color:#eee;letter-spacing:-.5px}
#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#27282feF;border:1px solid #ffffff20;color:#eee;padding:12px 20px;border-radius:10px;font-size:12px;box-shadow:0 8px 35px #0009;transition:.2s;z-index:100;max-width:90vw;text-align:center;backdrop-filter:blur(20px)}
#toast.visible{opacity:1;transform:translate(-50%,0)}
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#777;font-size:12px}
.loader{display:inline-block;width:20px;height:20px;border:1.5px solid #ffffff20;border-top-color:#ddd;border-radius:50%;animation:spin 1s linear infinite}
.loading-inline{padding:70px;text-align:center;color:#777;font-size:12px}
.empty-page-error{padding:35px;border:1px solid var(--line);border-radius:16px;color:#aaa}
.pager{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.pager span{font-size:10px;color:#888;align-self:center}
@keyframes spin{to{transform:rotate(360deg)}
}
@keyframes pulse{0%,100%{opacity:.35}
50%{opacity:1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.chat-messages{scroll-behavior:auto}
}

@media(min-width:1500px){.hero{min-height:660px}
.hero-art{transform:scale(1.05)}
.container{max-width:1300px}
.hero h1{font-size:78px}
.hero-copy{font-size:15px;max-width:430px}
.app-content{padding-top:42px}
.metrics{gap:18px}
.dashboard-grid{gap:24px}
}

@media(max-width:1150px){.container{padding:0 28px}
.compat-list{gap:28px}
.hero h1{font-size:58px}
.hero-art{transform:scale(.86);transform-origin:center right;margin-left:-60px}
.hero-copy{max-width:330px}
.sidebar{width:197px;padding-left:12px;padding-right:12px}
.app-main{margin-left:197px}
.app-content{padding:28px 25px}
.app-topbar{padding:0 25px}
.metric{padding:18px 16px}
.metric-value{font-size:25px}
.metric-top{font-size:9px}
.dashboard-grid{grid-template-columns:1.2fr 1fr}
.playground-layout{grid-template-columns:1fr 225px}
.code-section,.faq-section{gap:35px}
.billing-columns{grid-template-columns:1fr}
.docs-layout{grid-template-columns:1fr}
.docs-toc{display:none}
}

@media(max-width:900px){.nav-links{gap:20px}
.topnav .btn.subtle{display:none}
.hero h1{font-size:49px;letter-spacing:-2.5px}
.hero-art{transform:scale(.72);margin-left:-105px;transform-origin:70% center}
.hero{min-height:550px;grid-template-columns:1.1fr .9fr}
.hero-copy{font-size:12px;max-width:315px}
.hero-buttons{gap:8px}
.hero-buttons .btn{font-size:10px;padding:12px 15px}
.hero-footnote{gap:10px;font-size:8px}
.compat-strip>span{max-width:120px;font-size:9px}
.compat-list{gap:20px;font-size:14px}
.compat-list .mono{font-size:12px}
.feature{padding:21px}
.feature p{font-size:10px}
.section h2{font-size:27px}
.pricing-main,.calculator{padding:25px}
.model-heading .pill{display:none}
.price-breakdown{flex-direction:column;gap:5px}
.code-box pre{font-size:9px;padding:20px}
.metrics{grid-template-columns:repeat(2,1fr)}
.dashboard-grid{grid-template-columns:1fr}
.page-header h1{font-size:25px}
.page-header .header-actions{gap:6px}
.page-header .btn{font-size:10px;padding:10px 12px}
.playground-layout{grid-template-columns:1fr;height:auto}
.chat-panel{height:570px}
.settings-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.settings-panel h2{grid-column:1/-1}
.settings-price{margin-top:0;grid-column:1/-1}
.settings-panel .field{margin-bottom:15px}
.app-footer{font-size:8px}
.sidebar .logo small{display:none}
.landing-footer .footer-links{gap:12px}
}

@media(max-width:650px){.container{padding:0 22px}
.topnav{height:77px}
.topnav .logo{font-size:18px}
.topnav .logo small{display:none}
.nav-links{display:none}
.nav-actions .btn{min-height:36px;font-size:10px;padding:9px 13px}
.hero{display:flex;flex-direction:column;gap:0;padding-top:40px;min-height:0;align-items:stretch}
.hero-content{padding:0;max-width:440px}
.hero h1{font-size:clamp(42px,14vw,55px);letter-spacing:-3px}
.hero-badge{font-size:8px;margin-bottom:22px}
.hero-copy{max-width:350px;font-size:13px;margin-top:21px}
.hero-buttons .btn{font-size:11px;padding:13px 17px}
.hero-footnote{font-size:9px;margin-top:18px}
.hero-art{height:430px;transform:scale(.88);transform-origin:center center;margin:-13px -23px -25px;max-width:430px;align-self:center;width:calc(100% + 30px)}
.orbital{width:370px;height:370px}
.sphere{width:245px;height:245px}
.model-float{left:10px;top:55px;width:163px}
.model-float strong{font-size:13px}
.price-float{top:225px;right:3px;width:154px}
.price-float strong{font-size:32px}
.mini-stream{left:29px;right:34px;bottom:14px;font-size:8px}
.orbit-label{right:28px}
.compat-strip{flex-direction:column;gap:18px;padding:24px 0}
.compat-strip>span{max-width:none;font-size:9px}
.compat-list{width:100%;justify-content:space-between;gap:10px;font-size:13px}
.compat-list .mono{font-size:10px}
.compat-list .icon{width:14px;height:14px}
.section{padding-top:59px}
.section-intro{display:block;margin-bottom:23px}
.section h2{font-size:28px}
.section-intro>p{margin-top:15px;font-size:11px;max-width:340px}
.feature-grid{grid-template-columns:1fr}
.feature{padding:24px;display:grid;grid-template-columns:40px 1fr;gap:0 18px}
.feature-icon{grid-row:1/3;margin:3px 0 0}
.feature h3{font-size:14px;margin-bottom:8px}
.feature p{font-size:11px;max-width:300px}
.feature-no{display:none}
.pricing-panel{grid-template-columns:1fr}
.pricing-main{border-right:0;border-bottom:1px solid var(--line);padding:27px}
.price-breakdown{flex-direction:row;gap:15px;font-size:9px}
.calculator{padding:26px;min-height:280px}
.estimate{margin-top:24px}
.code-section,.faq-section{grid-template-columns:1fr;gap:26px;padding-top:60px}
.code-section h2,.faq-section h2{font-size:28px}
.code-section p{max-width:100%}
.code-box pre{font-size:9px;padding:19px}
.faq-section{padding-bottom:48px}
.landing-footer{flex-wrap:wrap;padding:24px 0}
.landing-footer p{width:100%;order:3;font-size:9px}
.landing-footer .footer-links{font-size:9px}
.sidebar{transform:translateX(-100%);transition:transform .2s;width:224px;background:#0e0f12;box-shadow:30px 0 100px #0006}
.sidebar.open{transform:translateX(0)}
.app-main{margin-left:0}
.app-topbar{height:64px;padding:0 20px}
.mobile-toggle{display:flex}
.breadcrumb{font-size:10px;gap:9px;margin-right:auto}
.breadcrumb>span:first-child,.breadcrumb .crumb-slash{display:none}
.user-email{display:none}
.user-menu{gap:6px}
.app-content{padding:26px 20px}
.page-header{align-items:flex-start;gap:14px;margin-bottom:24px}
.page-header h1{font-size:25px}
.page-header p{font-size:10px;max-width:210px;line-height:1.8}
.page-header .header-actions>.pill{display:none}
.page-header .btn{font-size:10px;padding:9px 11px;min-height:35px;gap:6px}
.page-header .btn .icon{width:14px;height:14px}
.metrics{gap:10px;margin-bottom:16px}
.metric{padding:16px;min-height:129px;border-radius:14px}
.metric-value{font-size:26px}
.metric-top{font-size:9px;gap:6px}
.metric-top .icon{width:13px;height:13px}
.metric-foot{font-size:8px}
.panel{padding:20px;border-radius:15px}
.panel-head{gap:10px}
.panel-head h2{font-size:12px}
.dashboard-grid{gap:16px;margin-bottom:16px}
.table-wrap{margin:0 -5px}
th,td{font-size:9px;padding:13px 12px}
.empty-state{padding:32px 10px}
.app-footer{flex-direction:column;gap:6px}
.balance-panel{padding:23px;flex-wrap:wrap;gap:25px}
.balance-big{font-size:43px}
.balance-panel>.btn{width:100%}
.billing-columns{gap:16px}
.payment-method{gap:10px}
.payment-method .pill{font-size:7px}
.locked{margin:25px 0;padding:45px 23px}
.locked h1{font-size:24px}
.locked p{font-size:11px}
.playground-layout{min-height:0;gap:16px}
.chat-panel{height:calc(100dvh - 218px);min-height:470px;border-radius:15px}
.chat-toolbar{padding:11px 15px;font-size:10px}
.chat-messages{padding:20px 16px}
.chat-welcome h2{font-size:19px}
.suggestions{gap:7px}
.suggestions button{font-size:9px}
.composer{padding:10px}
.composer-foot{font-size:7px}
.settings-panel{padding:20px}
.settings-panel .field label{font-size:9px}
.message{gap:10px}
.message-text{font-size:11px}
.settings-panel .field:has(textarea){grid-column:1/-1}
.docs-layout{display:block}
.doc-content .panel{padding:21px 18px}
.doc-content h2{font-size:16px}
.doc-content p{font-size:11px}
.doc-content .code-box pre{font-size:8px}
.notice{font-size:10px;padding:13px}
.modal-head h2{font-size:19px}
dialog{padding:26px}
.app-topbar .btn{font-size:10px;min-height:33px;padding:8px 12px}
}


/* Live CheapKeyAI catalog */
.catalog-summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 26px;margin-bottom:24px}
.catalog-summary p{font-size:12px;color:#a5a5b1;margin-top:10px}
.catalog-summary>span{font-size:9px;color:#777783;white-space:nowrap}
.catalog-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:15px}
.catalog-filters .field{margin-bottom:16px}
.catalog-result-head{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:#777784;margin:5px 0 18px}
.model-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.catalog-card{padding:22px;min-width:0;border-radius:15px;display:flex;flex-direction:column;transition:border-color .2s}
.catalog-card:hover{border-color:#ffffff28}
.catalog-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:22px}
.catalog-card .pill{font-size:9px}
.model-type{font-size:9px;color:#72727e}
.catalog-card h2{font-size:16px;line-height:1.5;letter-spacing:-.3px;font-weight:550;overflow-wrap:anywhere}
.catalog-card>code{font-size:9px;font-family:var(--mono);color:#6e6e7c;margin-top:7px;overflow-wrap:anywhere}
.catalog-card-price{display:flex;flex-direction:column;gap:8px;margin:22px 0;color:#8e8e9c;font-size:10px;flex:1;justify-content:flex-end}
.catalog-card-price>span{display:flex;align-items:center;justify-content:space-between;gap:10px}
.catalog-card-price strong{font-size:15px;font-weight:500;color:#dcdce5;font-family:var(--mono);letter-spacing:-.5px}
.catalog-card-bottom{padding-top:16px;border-top:1px solid #ffffff0a;display:flex;flex-direction:column;gap:13px}
.catalog-card-bottom .btn{align-self:flex-start;font-size:9px}
.model-availability{font-size:8px;color:#747481}
.chat-model-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-toolbar>span:first-child{min-width:0}
.chat-toolbar>span:last-child{white-space:nowrap}
.settings-price{gap:14px;align-items:flex-start}
.settings-price strong{text-align:right;line-height:1.8;font-size:10px;max-width:160px}
.astra-output{font-size:11px;color:#a5a5b0;margin-top:10px}
.inline-link{text-decoration:underline;text-underline-offset:4px;color:#e0e0e9}
.model-search input{font-size:12px}

@media(max-width:1150px){.model-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.catalog-card{padding:20px}
.catalog-summary{flex-direction:column;align-items:flex-start;gap:13px}
.chat-model-name{max-width:155px}
}

@media(max-width:650px){.catalog-filters{grid-template-columns:1fr 1fr;gap:0 12px}
.model-search{grid-column:1/-1}
.model-cards{grid-template-columns:1fr}
.catalog-card{padding:22px}
.catalog-card-bottom{flex-direction:row;align-items:center;justify-content:space-between}
.catalog-result-head{font-size:8px;align-items:center}
.catalog-result-head span:last-child{max-width:180px;text-align:right}
.catalog-summary{padding:21px}
.catalog-summary p{font-size:11px}
.chat-toolbar>span:last-child{display:none}
.chat-model-name{max-width:165px}
.settings-panel .field:has(#model-select){grid-column:1/-1}
.catalog-card-price strong{font-size:17px}
}