:root{--bg:#fff;--fg:#101418;--muted:#55606b;--line:#e2e6ea;--card:#f7f8f9;--accent:#0f766e;--accent-ink:#fff;--code-bg:#101418;--code-fg:#e8eef2;--focus:#0f766e;--b1:#0f766e;--b2:#0b5a52;--bedge:#063f39;--btxt:#fff;--a1:#5eead4;--a2:#2dd4bf;--a3:#0ea5e9;--aedge:#0369a1;--atxt:#062a26;--s1:#ffffff;--s2:#e8edf0;--sedge:#b9c4cb;--stxt:#101418;--p1:#d7e0e5;--p2:#bfcdd4;--pedge:#9fb0ba;--card-sh:0 2px 6px rgba(16,20,24,.06),0 16px 32px rgba(16,20,24,.07);--card-sh-h:0 6px 12px rgba(16,20,24,.08),0 24px 44px rgba(16,20,24,.13);--ban1:#eefaf7;--ban2:#e3f2fb}
[data-theme="dark"]{--bg:#101418;--fg:#eef1f3;--muted:#aab4bc;--line:#2a3238;--card:#171d22;--accent:#2dd4bf;--accent-ink:#062a26;--code-bg:#0a0e11;--code-fg:#e8eef2;--focus:#2dd4bf;--b1:#5eead4;--b2:#2dd4bf;--bedge:#0b5a52;--btxt:#052e2b;--a1:#7dd3fc;--a2:#38bdf8;--a3:#0ea5e9;--aedge:#075985;--atxt:#062a26;--s1:#2b353c;--s2:#1c242a;--sedge:#05090c;--stxt:#eef1f3;--p1:#131a1f;--p2:#0d1216;--pedge:#000000;--card-sh:0 2px 6px rgba(0,0,0,.35),0 16px 32px rgba(0,0,0,.35);--card-sh-h:0 6px 12px rgba(0,0,0,.4),0 24px 44px rgba(0,0,0,.5);--ban1:#14332e;--ban2:#122a3a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);line-height:1.65}
a{color:var(--accent)}a:hover{text-decoration-thickness:2px}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;background:var(--accent);color:var(--accent-ink);padding:8px 12px;z-index:100}.skip:focus{position:absolute;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;left:12px;top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10}
.nav{display:flex;align-items:center;gap:16px;min-height:60px;flex-wrap:wrap;padding:8px 0}.logo{font-weight:800;letter-spacing:.04em;text-decoration:none;color:var(--fg);font-size:19px}.logo span{color:var(--accent)}
.nav nav{margin-left:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.nav a.navlink{text-decoration:none;color:var(--fg);font-weight:600}.nav a.navlink:hover{color:var(--accent)}
.lang{display:flex;gap:6px;align-items:center;font-weight:700}.lang a{text-decoration:none;color:var(--muted);padding:5px 9px;border-radius:999px;min-height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center}.lang a.active{background:var(--fg);color:var(--bg)}.theme-btn{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 10px;cursor:pointer;font-weight:700;min-height:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--b1),var(--b2));color:var(--btxt)!important;text-decoration:none;padding:11px 18px;border:1px solid rgba(0,0,0,.12);border-radius:12px;font-weight:700;min-height:44px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 var(--bedge),0 10px 20px rgba(3,32,28,.22);transition:transform .18s ease,box-shadow .18s ease}.btn.secondary{background:linear-gradient(180deg,var(--s1),var(--s2));color:var(--stxt)!important;border:1px solid rgba(0,0,0,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 var(--sedge),0 10px 18px rgba(16,20,24,.14)}.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 var(--bedge),0 16px 28px rgba(3,32,28,.24)}.btn.secondary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 var(--sedge),0 16px 26px rgba(16,20,24,.16)}.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 var(--bedge),0 4px 8px rgba(3,32,28,.2)}.btn.secondary:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 var(--sedge),0 4px 8px rgba(16,20,24,.14)}
.hero{padding:44px 0 20px;position:relative;isolation:isolate}.hero::before{content:"";position:absolute;inset:-12px 0;z-index:-1;background:radial-gradient(520px 260px at 15% 0%,rgba(45,212,191,.22),transparent 70%),radial-gradient(560px 280px at 85% 10%,rgba(56,189,248,.20),transparent 70%),radial-gradient(480px 240px at 50% 100%,rgba(45,212,191,.12),transparent 70%);opacity:.18;animation:aurora-drift 20s ease-in-out infinite}@keyframes aurora-drift{0%,100%{transform:translate(0,0) scale(1);opacity:.18}50%{transform:translate(24px,-10px) scale(1.08);opacity:.25}}.kinetic [data-kinetic]{display:inline-block;font-size:1.4em;font-weight:800;text-shadow:0 2px 0 var(--bg),0 10px 24px rgba(45,212,191,.35);transition:transform .16s ease,opacity .16s ease}.kinetic [data-kinetic].kinetic-flip{transform:perspective(600px) rotateX(90deg);opacity:0}.js-reveal main section:not(.hero){opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}.js-reveal main section:not(.hero).in-view{opacity:1;transform:none}.eyebrow{font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);font-size:13px}.hero h1{font-size:42px;line-height:1.1;margin:12px 0 12px;letter-spacing:-.02em}.hero p.lead{font-size:19px;color:var(--muted);max-width:760px}.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.terminal{background:var(--code-bg);color:var(--code-fg);border-radius:12px;padding:16px;overflow:auto;margin-top:20px}.terminal pre{margin:0;white-space:pre-wrap;word-break:break-word}.terminal .out{color:#9fc5a8}.terminal .err{color:#f0a3a3}.terminal .warn{color:#f2c97d}.term-label{font-size:13px;color:var(--muted);margin:0 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--card-sh)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
h2{font-size:28px;line-height:1.25;margin:36px 0 12px}h3{margin:0 0 8px}p{margin:0 0 12px}.muted{color:var(--muted)}.small{font-size:14px}
pre{background:var(--code-bg);color:var(--code-fg);padding:14px;border-radius:12px;overflow:auto;font-size:14px;line-height:1.5}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}pre code{background:none}
.copyrow{display:flex;gap:10px;align-items:flex-start}.copyrow pre{flex:1;min-width:0}.grid>*,.grid3>*,.copyrow>*{min-width:0}.copybtn{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;padding:9px 12px;cursor:pointer;font-weight:700;min-height:40px;min-width:70px}
table{width:100%;border-collapse:collapse;font-size:15px}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line)}th{background:var(--card)}
footer{border-top:1px solid var(--line);margin-top:48px;padding:24px 0 36px;color:var(--muted);font-size:14px}.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer-links a{display:inline-block;padding:2px 0}.nav a.navlink{padding:2px 0}input[type="checkbox"]{width:24px;height:24px;flex:none;accent-color:var(--accent)}.term-form input{min-height:40px}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.07);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;background:linear-gradient(180deg,var(--s1),var(--s2));color:var(--stxt);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 var(--sedge),0 5px 10px rgba(16,20,24,.1)}
.chooser{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.chooser a{border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-decoration:none;color:var(--fg);font-weight:700;background:var(--card);min-height:44px;display:inline-flex;align-items:center}
.filter{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font-size:16px}
.docs{display:grid;grid-template-columns:220px 1fr;gap:24px}.docs nav{position:sticky;top:80px;align-self:start}.docs nav a{display:block;padding:6px 0;text-decoration:none;color:var(--fg)}
@media(max-width:760px){.hero h1{font-size:33px}.grid,.grid3,.docs{grid-template-columns:1fr}.docs nav{position:static}.nav nav{display:flex}}
@media(prefers-reduced-motion:reduce){[data-three]{display:none!important}.diorama-static{display:block!important}[data-diorama-try]{display:none!important}.play-stages li{transform:none!important}.flow-line{display:none}.hero::before{animation:none!important}}


.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.kinetic{font-weight:700}.kinetic button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:4px 10px;cursor:pointer;font-weight:700}
.diorama-wrap{position:relative}.diorama-static{display:block;width:100%;height:auto;aspect-ratio:900/200;margin-top:18px;border:1px solid var(--line);border-radius:12px;background:var(--card)}[data-three]{width:100%;height:200px;display:none;margin-top:18px;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}[data-three] canvas{width:100%!important;height:100%!important;display:block}.diorama-wrap.three-on [data-three]{display:block}.diorama-wrap.three-on .diorama-static{display:none}.three-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.diorama-wrap.three-loaded [data-three-pause],.diorama-wrap.three-loaded [data-three-reset]{display:inline-block}[data-diorama-try],[data-three-pause],[data-three-reset]{display:none;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:700;min-height:40px}.three-labels{display:flex;gap:8px;justify-content:space-between;list-style:none;margin:8px 0 0;padding:0;font-weight:700;font-size:14px;color:var(--muted)}.three-labels li{flex:1;text-align:center}
.terminal-reactive .term-head{display:flex;gap:6px;align-items:center;padding-bottom:10px}.dot{width:11px;height:11px;border-radius:50%;background:#e05555;display:inline-block}.dot:nth-child(2){background:#e8b53a}.dot:nth-child(3){background:#3fae5a}.term-title{margin-left:8px;font-size:13px;color:#aab4bc}
.term-files,.term-chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.term-files button,.term-chips button{border:1px solid #2a3238;background:#171d22;color:#eef1f3;border-radius:999px;padding:6px 12px;cursor:pointer;font-weight:600;min-height:36px}.term-files button:hover,.term-chips button:hover{border-color:#2dd4bf}
.term-out pre{white-space:pre-wrap;word-break:break-word}.term-form{display:flex;gap:8px;align-items:center;margin-top:12px}.term-form input{flex:1;background:#0a0e11;color:#eef1f3;border:1px solid #2a3238;border-radius:8px;padding:10px 12px;font-family:inherit;font-size:15px}.term-form button{border:1px solid #2a3238;background:#2dd4bf;color:#062a26;border-radius:8px;padding:10px 14px;font-weight:800;cursor:pointer;min-height:40px}.term-progress{height:8px;background:#171d22;border-radius:999px;margin-top:12px;overflow:hidden}.term-progress-bar{height:100%;background:#2dd4bf;transition:width .3s}.term-note{color:#aab4bc;font-size:13px;margin-top:10px}
.playground{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--card);perspective:900px}.play-stack,.play-toggles,.play-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.play-stack button{border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:700;min-height:40px}.play-stack button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}.play-toggles label{display:inline-flex;gap:6px;align-items:center;font-weight:600}.play-stages{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.play-stages li{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg);display:flex;flex-direction:column;gap:8px;min-height:90px;transform:perspective(800px) rotateX(4deg);box-shadow:0 6px 14px rgba(0,0,0,.08);transition:transform .3s ease,box-shadow .3s ease}.play-stages li.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 14px 28px rgba(15,118,110,.25);transform:perspective(800px) rotateX(0deg) translateY(-4px) translateZ(12px)}.play-stages li.is-done{border-color:#2dd4bf;transform:perspective(800px) rotateX(2deg);box-shadow:0 10px 20px rgba(45,212,191,.18)}.flow-line{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin:12px 0}.flow-line i{display:block;height:100%;width:33%;background:linear-gradient(90deg,transparent,#2dd4bf,transparent);animation:flowmove 2.4s linear infinite}@keyframes flowmove{from{transform:translateX(-100%)}to{transform:translateX(300%)}}@keyframes play-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}.play-stages.shake{animation:play-shake .35s ease}.stage-btns{display:flex;gap:6px}.stage-btns button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:8px;padding:4px 10px;cursor:pointer;min-height:32px}.stage-state{font-size:13px;font-weight:700;color:var(--muted)}.play-out p{margin:10px 0}.play-out .terminal{margin-top:10px}
.compare{margin-top:20px}.compare input{width:100%}.compare input[type="range"]{min-height:28px}.compare-panels{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-after{opacity:.55}
[data-tilt]{transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d;will-change:transform;position:relative}[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none}[data-tilt]:hover::after{opacity:1}[data-tilt]:hover{box-shadow:0 16px 32px rgba(0,0,0,.14)}
@media(max-width:760px){.play-stages{grid-template-columns:1fr 1fr}.compare-panels{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){[data-tilt]{transition:none!important;transform:none!important}.term-progress-bar{transition:none!important}*{scroll-behavior:auto!important}}

.terminal :focus-visible{outline-color:#2dd4bf}

@media(max-width:759px){.diorama-wrap.three-on:not(.three-force) [data-three]{display:none}.diorama-wrap.three-on:not(.three-force) .diorama-static{display:block}.diorama-wrap.three-force [data-three]{display:block}.diorama-wrap.three-force .diorama-static{display:none}[data-diorama-try]{display:inline-block}.diorama-wrap.three-loaded [data-diorama-try]{display:none}.diorama-note{display:none}[data-three]{height:180px}}

/* Trendy cues — selective: glass on ONE hero terminal, gradient on ONE primary CTA */
.glass-hero{background:var(--code-bg);background:rgba(16,20,24,0.72);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,0.14);box-shadow:0 12px 32px rgba(0,0,0,0.18)}
.btn.btn-accent{background:linear-gradient(180deg,var(--a1),var(--a2) 55%,var(--a3));color:var(--atxt)!important;border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 var(--aedge),0 10px 20px rgba(3,60,90,.25)}.btn.btn-accent:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 0 var(--aedge),0 16px 28px rgba(3,60,90,.28)}.btn.btn-accent:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 var(--aedge),0 4px 8px rgba(3,60,90,.22)}

/* Catalog (DeepInfra-style) — 2026-10-21 */
.hero-catalog{text-align:center}.hero-catalog p.lead{margin-left:auto;margin-right:auto}.hero-catalog .cta{justify-content:center}
.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:18px 0 4px}
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:8px 0 4px}
.ticker-track{display:flex;width:max-content;animation:tickerscroll 45s linear infinite}
.ticker-set{display:flex}
.ticker-set span{margin:2px 6px;padding:4px 14px;font-weight:700;white-space:nowrap;color:var(--stxt);font-size:14px;background:linear-gradient(180deg,var(--s1),var(--s2));border:1px solid rgba(0,0,0,.06);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 var(--sedge),0 4px 8px rgba(16,20,24,.08)}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes tickerscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.catalog-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0 20px}
.filter-btns{display:flex;gap:8px;flex-wrap:wrap}
.filter-btns button{border:1px solid rgba(0,0,0,.08);background:linear-gradient(180deg,var(--s1),var(--s2));color:var(--stxt);border-radius:999px;padding:8px 16px;cursor:pointer;font-weight:700;min-height:40px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 0 var(--sedge),0 7px 14px rgba(16,20,24,.12);transition:transform .18s ease,box-shadow .18s ease}
.filter-btns button:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 var(--sedge),0 10px 18px rgba(16,20,24,.14)}
.filter-btns button:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 var(--sedge),0 3px 6px rgba(16,20,24,.12)}
.filter-btns button[aria-pressed="true"]{background:linear-gradient(180deg,var(--p1),var(--p2));color:var(--fg);box-shadow:inset 0 2px 6px rgba(0,0,0,.28),0 1px 0 var(--pedge);transform:translateY(1px)}
.filter-btns button[aria-pressed="true"]::before{content:"✓ "}
.catalog-controls input[type="search"]{flex:1;min-width:180px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font-size:16px;min-height:44px}
.catalog-count{margin:0}
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-card{display:flex;flex-direction:column}
.tool-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px}
.tool-meta .tag{font-size:13px;font-weight:700;color:var(--muted)}
.tool-meta .price{font-weight:800;color:var(--accent)}
.tool-card h3 a{color:var(--fg);text-decoration:none}
.tool-card h3 a:hover{color:var(--accent);text-decoration:underline}
.tool-desc{flex:1}
.tool-links{margin-top:auto;font-weight:600}
.deploy-banner{margin-top:8px}
@media(max-width:900px){.catalog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.catalog-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;width:auto;flex-wrap:wrap}.ticker-set{flex-wrap:wrap}.ticker-set.ticker-dup{display:none}.ticker{overflow:visible}}

/* 3D visual upgrade — buttons, isometric icons, card depth (2026-10-21) */
.tool-head{display:flex;align-items:center;gap:10px;margin:0 0 8px}.tool-head h3{margin:0}
.icon3d{width:32px;height:32px;flex:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.18))}
.icon-mini{width:15px;height:15px;flex:none}
.ghbtn{display:inline-flex;align-items:center;background:linear-gradient(180deg,var(--b1),var(--b2));color:var(--btxt)!important;text-decoration:none;font-weight:700;padding:8px 14px;border:1px solid rgba(0,0,0,.12);border-radius:999px;min-height:40px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 var(--bedge),0 7px 14px rgba(3,32,28,.2);transition:transform .18s ease,box-shadow .18s ease}
.ghbtn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 var(--bedge),0 10px 18px rgba(3,32,28,.22)}
.ghbtn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 var(--bedge),0 3px 6px rgba(3,32,28,.18)}
.tool-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.deploy-banner{background:linear-gradient(160deg,var(--ban1),var(--ban2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--card-sh)}
@media(hover:hover) and (pointer:fine){.tool-card{transition:transform .18s ease,box-shadow .18s ease}.tool-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--card-sh-h)}.icon3d{transition:transform .18s ease}.tool-card:hover .icon3d{transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.btn,.ghbtn,.filter-btns button,.tool-card,.icon3d{transition:none!important}.btn:hover,.btn:active,.ghbtn:hover,.ghbtn:active,.filter-btns button:hover,.tool-card:hover{transform:none!important}}