/* Developer Marketplace: Wolf's layout, hand-written (no Tailwind CDN). Fonts: system stack, zero downloads. */
:root{color-scheme:dark;--z950:#11141a;--z900:#1a1e26;--z800:#20242d;--z700:#282d37;--z500:#a8acb5;--zph:#8f949e;--z400:#a8acb5;--z300:#e6e8ec;--z100:#e6e8ec;--v600:#9a97e8;--v500:#9a97e8;--v400:#9a97e8;--v300:#9a97e8}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:#11141a;color:var(--z100);font:16px/1.5 var(--du-font-display);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
a{color:inherit}
::selection{background:rgba(79,70,229,0.55);color:#e6e8ec}
.mx{max-width:80rem;margin:0 auto;padding-left:16px;padding-right:16px}
@media(min-width:640px){.mx{padding-left:24px;padding-right:24px}}
.z{position:relative;z-index:10}
/* Globe background (fixed, behind everything) */
.du-globe-bg{position:fixed;inset:0;z-index:0;overflow:hidden;touch-action:pan-y;background:#11141a}
.du-globe-bg::before{content:"";position:absolute;inset:0;transition:opacity 1.1s ease;background:url("/assets/globe/fallback-mobile.webp?v=2") center 70%/cover no-repeat}
@media(min-width:800px){.du-globe-bg::before{background-image:url("/assets/globe/fallback.webp?v=2");background-position:center}}
.du-globe-bg.is-ready::before{opacity:0}
.du-globe-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
.du-globe-bg.is-ready .du-globe-canvas{opacity:1}
.du-globe-bg.is-fallback .du-globe-canvas,.du-globe-bg.is-lite .du-globe-canvas{display:none}
.du-globe-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(17,20,26,0.78) 0%,rgba(17,20,26,0.25) 60%,rgba(17,20,26,0.1) 100%),linear-gradient(180deg,rgba(17,20,26,0.35) 0%,transparent 30%,rgba(17,20,26,0.55) 100%)}
@media(max-width:799px){.du-globe-vignette{background:linear-gradient(180deg,rgba(17,20,26,0.55) 0%,rgba(17,20,26,0.35) 45%,rgba(17,20,26,0.7) 100%)}}
/* Subtle spotlight + orbs (desktop pointer only) */
#spotlight{pointer-events:none;position:fixed;inset:0;z-index:1;background:transparent}
.orbs{pointer-events:none;position:fixed;inset:0;overflow:hidden;z-index:1}
.orb{position:absolute;border-radius:9999px;filter:blur(80px);opacity:.35;animation:float 20s ease-in-out infinite}
.orb.a{background:#4f46e5;width:24rem;height:24rem;top:-8rem;left:-8rem}
.orb.b{background:#4f46e5;width:20rem;height:20rem;top:33%;right:-5rem;animation-delay:-7s}
.orb.c{background:#4f46e5;width:18rem;height:18rem;bottom:0;left:25%;animation-delay:-14s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-60px) scale(1.1)}66%{transform:translate(-30px,40px) scale(.9)}}
@media (hover:none){#spotlight{display:none}}
/* Nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(32,36,45,0.6);background:rgba(17,20,26,0.7);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
@media(min-width:640px){.nav-in{padding-top:14px;padding-bottom:14px}}
.du-logo{display:inline-flex;align-items:center;line-height:0}.du-logo img{height:34px;width:auto;display:block}.du-logo-icon{display:none!important}
@media(max-width:560px){.du-logo-full{display:none!important}.du-logo-icon{display:block!important}}
.nav-links{display:none;align-items:center;gap:32px;font-size:14px}
.nav-links a{text-decoration:none;color:var(--z400);transition:color .2s}.nav-links a:hover,.nav-links a[aria-current]{color:#e6e8ec}.nav-links a[aria-current]{font-weight:500}
.nav-ctas{display:none;align-items:center;gap:12px}
@media(min-width:768px){.nav-links{display:flex}}
@media(min-width:640px){.nav-ctas{display:flex}}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;border-radius:999px;padding:0 16px;font:500 14px/1 inherit;font-family:inherit;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s,border-color .2s;color:var(--z100)}
.pill-o{border:1px solid var(--z700);background:transparent}.pill-o:hover{background:var(--z800)}
.pill-v{border:1px solid transparent;background:var(--du-accent-fill,#4f46e5);color:#e6e8ec !important}.pill-v:hover{background:#4f46e5;box-shadow: none}
.pill:focus-visible,.icon-btn:focus-visible,.search:focus-visible,.sel:focus-visible,summary:focus-visible{outline:2px solid var(--du-accent);outline-offset:3px}
.pill svg{width:16px;height:16px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer}.icon-btn:hover{background:var(--z800)}
.icon-btn svg{width:24px;height:24px}
.menu-btn{display:inline-flex}@media(min-width:768px){.menu-btn{display:none}}
.nav-right{display:flex;align-items:center;gap:8px}
#mobile-menu{position:fixed;top:0;bottom:0;right:0;z-index:60;width:18rem;background:#11141a;border-left:1px solid var(--z800);padding:24px;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);visibility:hidden}
#mobile-menu.open{transform:none;visibility:visible}
.mm-head{display:flex;justify-content:flex-end;margin-bottom:24px}
.mm-links{display:flex;flex-direction:column;gap:20px;font-size:18px}
.mm-links a{text-decoration:none;color:var(--z300)}.mm-links a[aria-current]{color:#e6e8ec;font-weight:500}
.mm-links hr{border:0;border-top:1px solid var(--z800);width:100%;margin:0}
.mm-links .pill{min-height:48px;font-size:14px}
#overlay{position:fixed;inset:0;z-index:55;background:rgba(17,20,26,0.6)}#overlay[hidden]{display:none}
@media (prefers-reduced-motion:reduce){#mobile-menu{transition:none}}
/* Hero */
.hero{padding-top:10px;padding-bottom:32px}@media(min-width:640px){.hero{padding-top:24px;padding-bottom:40px}}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--v400);margin-bottom:16px}
.dot{width:6px;height:6px;border-radius:9999px;background:var(--du-accent-fill,#4f46e5);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{50%{opacity:.5}}
.hero h1{margin:0!important;font-size:36px;font-weight:700;letter-spacing:-.025em;line-height:1.15;text-shadow: none}
@media(min-width:640px){.hero h1{font-size:48px}}@media(min-width:768px){.hero h1{font-size:60px}}
.hero h1 br{display:inline}@media(min-width:640px){.hero h1 br{display:none}}
.hero .lede{margin:16px 0 0;max-width:42rem;font-size:16px;color:var(--z400);text-shadow: none}@media(min-width:640px){.hero .lede{font-size:18px}}
/* Search */
.filters{padding-bottom:32px}
.frow{display:flex;flex-direction:column;gap:12px}@media(min-width:640px){.frow{flex-direction:row;align-items:center}}
.sbox{position:relative;flex:1}
.search,.sel{width:100%;border-radius:16px;border:1px solid var(--z800);background:rgba(26,30,38,0.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:14px 48px 14px 20px;font:14px/1.4 inherit;font-family:inherit;color:var(--z100);transition:border-color .2s,box-shadow .2s}
.search::placeholder{color:var(--zph)}.search:focus,.sel:focus{border-color:var(--du-accent-fill,#4f46e5);outline:none;box-shadow: 0 0 0 1px var(--v500)}
.search::-webkit-search-cancel-button{filter:invert(.6)}
.sbox svg{position:absolute;right:16px;top:14px;width:20px;height:20px;color:var(--z500);pointer-events:none}
.sel{width:auto;padding-right:20px;cursor:pointer}@media(max-width:639px){.sel{width:100%}}
.count{margin:12px 2px 0;font-size:13px;color:var(--z500)}
/* Grid + cards */
.grid{display:grid;gap:20px;grid-template-columns:1fr}@media(min-width:640px){.grid{gap:24px;grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
main.z{padding-bottom:64px}@media(min-width:640px){main.z{padding-bottom:80px}}
.card{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(32,36,45,0.8);background:rgba(26,30,38,0.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform-style:preserve-3d;transition:transform .15s ease-out,border-color .2s;display:flex;flex-direction:column}
.card:hover,.card:focus-within{border-color:rgba(230,232,236,0.29);box-shadow: 0 0 0 1px rgba(79,70,229,0.35)}
.card{transition:transform .15s ease-out,border-color .2s,box-shadow .3s}
.card-inner{transition:transform .15s ease-out;display:flex;flex-direction:column;flex:1}
.card:hover .card-inner{transform:translateZ(20px)}
.reveal{opacity:0;transform:translateY(24px);animation:reveal .7s ease forwards}
@keyframes reveal{to{opacity:1;transform:none}}
.card.out{animation:out .22s ease forwards}
@keyframes out{to{opacity:0;transform:scale(.96)}}
.media{position:relative;height:144px;overflow:hidden;background:#161a21;display:block}@media(min-width:640px){.media{height:160px}}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card:hover .media img,.card:hover .media video{transform:scale(1.04)}
.media.grad{display:flex;align-items:center;justify-content:center}
.media.grad::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.1)}
.media.grad span{position:relative;z-index:1;font-size:32px;font-weight:700;color:#e6e8ec}
.body{padding:16px;display:flex;flex-direction:column;flex:1}@media(min-width:640px){.body{padding:20px}}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.top h3{margin:0;font-size:16px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}@media(min-width:640px){.top h3{font-size:18px}}
.top h3 a{text-decoration:none}.top h3 a:hover{color:var(--v300)}
.maker{margin:2px 0 0;font-size:14px;color:var(--z500)}.maker a{color:var(--z400);text-decoration:none}.maker a:hover{color:#e6e8ec}
.badge{flex-shrink:0;border-radius:999px;background:rgba(79,70,229,0.15);padding:2px 10px;font-size:12px;font-weight:500;color:var(--v300);white-space:nowrap}
.badge.stage{background:rgba(79,70,229,0.12);color:#9a97e8}
.badges{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.badge.label{background:rgba(79,70,229,0.12);color:#9a97e8;max-width:12rem;overflow:hidden;text-overflow:ellipsis}
.desc{margin:10px 0 0;font-size:14px;color:var(--z400);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.foot-row{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-size:14px;font-weight:500;color:var(--z300);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acts{display:flex;gap:8px;flex-shrink:0}
.acts .pill{min-height:32px;padding:0 13px;font-size:12px}@media(hover:none){.acts .pill{min-height:40px}}
.empty{padding:80px 0;text-align:center;color:var(--z500)}.empty a{color:var(--v300)}
/* CTA */
.cta-sec{border-top:1px solid rgba(32,36,45,0.6);background:rgba(17,20,26,0.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cta-in{padding-top:64px;padding-bottom:64px;text-align:center}@media(min-width:640px){.cta-in{padding-top:80px;padding-bottom:80px}}
.cta-in h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.025em}@media(min-width:640px){.cta-in h2{font-size:36px}}
.cta-in p{margin:12px auto 0;max-width:36rem;color:var(--z400)}
.cta-in .pill{margin-top:24px;min-height:48px;padding:0 32px}.cta-in .pill-v:hover{transform:scale(1.05)}
.cta-in .sub{margin-top:14px;font-size:14px}.cta-in .sub a{color:var(--v300)}
/* FAQ */
.faq{max-width:48rem;padding-top:64px;padding-bottom:64px}
.faq h2{margin:0 0 24px;font-size:24px;font-weight:700}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:16px;border:1px solid var(--z800);background:rgba(26,30,38,0.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px 20px}
.faq summary{display:flex;cursor:pointer;list-style:none;align-items:center;justify-content:space-between;gap:12px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{color:var(--z500);transition:transform .2s;font-size:12px}
.faq details[open] summary span{transform:rotate(180deg)}
.faq p{margin:12px 0 0;font-size:14px;color:var(--z400)}.faq p a{color:var(--v300)}
.faq code{font-size:12.5px;background:var(--z800);padding:1px 5px;border-radius:5px}
/* Footer (site footer) */
.site-foot{border-top:1px solid var(--z800);background:rgba(17,20,26,0.72);padding:32px 0;text-align:center;font-size:14px;color:var(--z500)}
.site-foot p{margin:0 0 10px}.site-foot a{color:var(--z300);text-decoration:none}.site-foot a:hover{color:#e6e8ec}
.site-foot .support{display:inline-block;padding:6px 13px;border:1px solid rgba(230,232,236,0.27);border-radius:999px}
.site-foot .credits{font-size:12px;color:#8f949e;margin-top:14px}.site-foot .credits a{color:inherit;text-decoration:underline}
/* Toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:70;transform:translate(-50%,16px);opacity:0;pointer-events:none;padding:10px 16px;border-radius:999px;background:#20242d;border:1px solid rgba(230,232,236,0.24);font-size:14px;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.reveal,.card.out,.orb,.dot{animation:none!important;opacity:1;transform:none}.card,.card-inner,.media img{transition:none!important}.card:hover .card-inner,.card:hover .media img{transform:none}}

/* v2: a11y + structure */
:focus-visible{outline:2px solid var(--du-accent);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:#e6e8ec;color:#11141a;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
ul.grid{list-style:none;margin:0;padding:0}
.nav-links .cta-wrap{display:contents}
.tt{min-width:0}
.faq h3{margin:0;font-size:16px}
.faq-q{all:unset;box-sizing:border-box;display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;gap:12px;font-weight:500;line-height:1.4}
.faq-q:focus-visible{outline:2px solid var(--du-accent);outline-offset:6px;border-radius:6px}
.faq-q span{color:var(--z500);transition:transform .2s;font-size:12px}
.faq-q[aria-expanded="true"] span{transform:rotate(180deg)}
.faq-item{border-radius:16px;border:1px solid var(--z800);background:rgba(26,30,38,0.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px 20px}
.faq-a[hidden]{display:none}
.faq-a p{animation:reveal .3s ease}
.media{display:block}
@media (prefers-reduced-motion:reduce){.orbs,#spotlight{display:none}.faq-a p{animation:none}*{scroll-behavior:auto!important}}
search{display:block}.eyebrow{margin-top:0}#main:focus{outline:none}
.search:focus-visible,.sel:focus-visible{outline:2px solid var(--du-accent);outline-offset:2px}
/* AA contrast over the globe: soft scrim behind hero text, brighter secondary text */
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset:-10px 0 -20px -60px;background:transparent;pointer-events:none}
@media(min-width:800px){.hero::before{right:35%}}
.hero .lede{color:var(--z300)}.eyebrow{color:var(--v300)}
.filters{isolation:isolate}.count{color:var(--z300);display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(17,20,26,0.7)}
/* Perf: orbs as radial gradients (same soft look as Wolf's blur(80px), no filter raster cost) */
.orb{filter:none;background:none !important;width:40rem!important;height:40rem!important}
.orb.a{top:-16rem;left:-16rem;background:transparent !important}
.orb.b{right:-13rem;background:transparent !important}
.orb.c{bottom:-8rem;left:15%;background:transparent !important}
@media(max-width:799px){.card,.faq-item,.faq details,.search,.sel,.cta-sec{-webkit-backdrop-filter:none;backdrop-filter:none}.card{background:rgba(26,30,38,0.86)}.faq-item{background:rgba(26,30,38,0.86)}.search,.sel{background:#1a1e26}}

.card .maker a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Whole card is a link: the title link is stretched over the card; inner links/buttons sit above it. */
.card{position:relative}
.card .top h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.card .maker a,.card .acts a,.card .acts button,.card .badges a{position:relative;z-index:2}
.card{cursor:pointer}
.card .top h3 a:focus-visible{outline:none}
.card:has(.top h3 a:focus-visible){outline:2px solid var(--v300,#9a97e8);outline-offset:3px}