*{box-sizing:border-box}
:root{color-scheme:light;--ink:#19243d;--muted:#52617a;--line:rgba(173,189,218,.45);--ease:cubic-bezier(.22,1,.36,1)}
body{margin:0;min-height:100vh;isolation:isolate;background:#f3f6fc;color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 10% 10%,#d8e3ffb3,transparent 43%),radial-gradient(ellipse at 95% 26%,#ffe4d3a3,transparent 40%),radial-gradient(ellipse at 45% 85%,#dcddfa80,transparent 48%)}
header,main{max-width:1168px;margin-inline:auto}
header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:19px 26px;width:calc(100% - 48px);border:1px solid #ffffffc9;border-radius:22px;background:linear-gradient(115deg,#ffffffad,#ffffff66);box-shadow:inset 0 1px 0 white,0 8px 30px #22365e05;backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%)}
.brand{font-size:25px;letter-spacing:-1px;font-weight:750;text-decoration:none;color:var(--ink)}.brand span{color:#3155f4}
.back{display:inline-flex;align-items:center;white-space:nowrap;padding:10px 15px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;background:#ffffff5c;transition:background .25s,border-color .25s}.back:hover{background:#ffffffba;border-color:#9aafe5;color:#3155f4}
main{padding:64px 24px 80px}
h1{font-size:clamp(34px,4.5vw,52px);letter-spacing:-.045em;line-height:1.14;margin:0 0 17px;font-weight:650;text-align:center;text-wrap:balance}
.intro{max-width:620px;margin:0 auto 38px;text-align:center;font-size:16px;line-height:1.7;color:var(--muted);text-wrap:balance}
.toolbar{position:relative;padding:22px;border:1px solid #ffffffd9;border-radius:24px;background:linear-gradient(130deg,#ffffffb8,#ffffff70);box-shadow:inset 0 1px 0 white,0 12px 36px #20325806;backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);margin-bottom:26px}
.search{display:flex;gap:13px;align-items:center;min-height:54px;padding:0 18px;border:1px solid #bfcde57a;border-radius:15px;background:#ffffff9c;box-shadow:inset 0 1px 3px #273c6410,0 1px 0 #ffffffba;transition:background .25s,border-color .25s,box-shadow .25s}
.search svg{width:20px;height:20px;color:#657593;flex:none}
input{display:block;width:100%;min-width:0;font:400 15px/1.5 Inter,system-ui,sans-serif;border:0;padding:15px 0;color:var(--ink);background:transparent;outline:none}input::placeholder{color:#71809a}
.search:focus-within{border-color:#6e8ced;background:#ffffffd9;box-shadow:0 0 0 3px #5478f71f,inset 0 1px 0 white}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.filters button{flex:none;font:500 12px/1.4 Inter,system-ui,sans-serif;cursor:pointer;border:1px solid #ccd7ea7a;border-radius:999px;background:#ffffff52;color:#485a76;padding:10px 14px;box-shadow:inset 0 1px 0 #ffffffb3;transition:background .25s,border-color .25s,box-shadow .25s,color .25s}
.filters button:hover{background:#ffffffa6;border-color:#a5b9ea}.filters button[aria-pressed=true]{background:linear-gradient(135deg,#4266f5,#2949e6);color:white;border-color:#4669ed;box-shadow:inset 0 1px 0 #ffffff40,0 4px 12px #3155f425}
button:focus-visible,a:focus-visible{outline:3px solid #5478f7;outline-offset:4px}
.results{display:flex;justify-content:space-between;margin:0 4px 18px;color:#5c6b83;font-size:12px;letter-spacing:.01em}
.grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0;margin:0}.grid li{min-width:0;--tint:#dce7ff}.grid li:nth-child(3n+2){--tint:#ebe2fa}.grid li:nth-child(3n){--tint:#ffe9db}
.grid a{display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;min-height:234px;height:100%;padding:26px;border:1px solid #ffffffd4;border-radius:23px;background:linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.34));box-shadow:inset 0 1px 0 white,inset 0 -1px 0 #c9d6eb38,0 8px 28px #20325806;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);color:inherit;text-decoration:none;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.grid a:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 95% 0,var(--tint),transparent 72%),linear-gradient(135deg,#ffffff8c,#ffffff38);opacity:.2;transition:opacity .55s var(--ease);pointer-events:none}
.grid a:after{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,white,transparent);pointer-events:none}
.grid a:hover,.grid a:focus-visible{transform:translateY(-3px);border-color:#afc0ec9c;box-shadow:inset 0 1px 0 white,0 14px 34px #3155f40d}.grid a:hover:before,.grid a:focus-visible:before{opacity:.78}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.logo{width:49px;height:49px;display:grid;place-items:center;border:1px solid #ffffffeb;border-radius:15px;background:linear-gradient(145deg,#ffffffed,#ffffff99);box-shadow:inset 0 1px 0 white,0 3px 10px #243b6508;transition:box-shadow .35s,transform .35s var(--ease)}
.grid a:hover .logo{transform:translateY(-1px);box-shadow:inset 0 1px 0 white,0 5px 14px #3155f410}
.logo img{width:29px;height:29px;object-fit:contain}.monogram{color:#536caa;font-size:15px;font-weight:650}
.out{display:grid;place-items:center;width:28px;height:28px;color:#7e8da8;font-size:19px;transition:color .3s,transform .35s var(--ease)}.grid a:hover .out{color:#3155f4;transform:translate(2px,-2px)}
.grid h2{margin:0 0 9px;font-size:18px;line-height:1.35;font-weight:650;letter-spacing:-.02em}.grid p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 24px;max-width:34ch}
.category{align-self:flex-start;font-size:10px;font-weight:500;line-height:1.4;color:#536785;margin-top:auto;padding:6px 9px;background:#ffffff5c;border:1px solid #ffffff8c;border-radius:7px;box-shadow:inset 0 1px 0 #ffffff80}
.empty{padding:48px 24px;text-align:center;color:var(--muted)}
.status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#18243deb;color:white;padding:13px 21px;border:1px solid #ffffff38;border-radius:14px;font-size:14px;box-shadow:0 8px 28px #18243d25;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:20}.status:empty,[hidden]{display:none!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header,.toolbar,.grid a{background:#f9fbff}}
@media(min-width:1500px){header,main{max-width:1248px}.grid a{min-height:244px}}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid a{padding:24px}.filters{gap:7px}.filters button{padding:9px 12px}}
@media(max-width:600px){header{margin-top:14px;width:calc(100% - 28px);padding:15px 17px;border-radius:18px;gap:10px}.brand{font-size:22px}.back{font-size:11px;padding:8px 11px}main{padding:42px 18px 56px}h1{font-size:34px;letter-spacing:-.04em}.intro{font-size:14px;line-height:1.7;margin-bottom:28px}.toolbar{padding:15px;border-radius:20px;margin-bottom:22px}.search{min-height:50px;padding-inline:13px;border-radius:12px}input{font-size:16px;padding:13px 0}.filters{flex-wrap:nowrap;overflow-x:auto;padding:0 0 6px;margin-top:14px;scrollbar-width:thin;scrollbar-color:#b5c5e7 transparent}.filters button{font-size:11px;padding:9px 12px}.grid{gap:13px}.grid a{padding:21px;min-height:232px;border-radius:20px}.grid h2{font-size:17px}.grid p{font-size:13px}.logo{width:45px;height:45px;border-radius:13px}.logo img{width:27px;height:27px}.card-top{margin-bottom:19px}.results{margin-bottom:14px}}
@media(max-width:430px){.grid{grid-template-columns:1fr;gap:14px}.grid a{min-height:216px;padding:23px}.grid p{max-width:none;margin-bottom:20px}.card-top{margin-bottom:18px}.grid h2{font-size:18px}.grid p{font-size:14px}}
h1 .title-accent{background:linear-gradient(110deg,#2548df,#577cf5);-webkit-background-clip:text;background-clip:text;color:transparent}
.toolbar{box-shadow:inset 0 1px 0 white,inset 0 -1px 0 #c9d6eb38,0 14px 42px #20325808}
.grid li{--card-accent:#3b5dd7;--card-halo:#dce7ff}
.grid li[data-category="Research"]{--card-accent:#167586;--card-halo:#cfedf0}
.grid li[data-category="Coding"],.grid li[data-category="Developer platforms"]{--card-accent:#6750b9;--card-halo:#e5def9}
.grid li[data-category="Images & design"]{--card-accent:#a8467a;--card-halo:#f7ddeb}
.grid li[data-category="Video"]{--card-accent:#91602c;--card-halo:#fae9d3}
.grid li[data-category="Audio & music"]{--card-accent:#8d497f;--card-halo:#eddbf1}
.grid li[data-category="Automation & agents"]{--card-accent:#26775d;--card-halo:#d9eee5}
.grid a{transition:transform .5s var(--ease),border-color .45s,box-shadow .5s;background:linear-gradient(140deg,#ffffffb8,#ffffff70);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #c9d6eb38,0 8px 28px #20325806}
.grid a:before{background:radial-gradient(ellipse at var(--pointer-x,80%) var(--pointer-y,10%),color-mix(in srgb,var(--card-halo) 75%,transparent),transparent 78%),linear-gradient(125deg,#ffffffb3,color-mix(in srgb,var(--card-halo) 40%,#ffffff80));opacity:.12;transition:opacity .6s var(--ease)}
.grid a:after{inset:0;left:0;right:0;height:auto;border-radius:inherit;background:linear-gradient(120deg,transparent 10%,#ffffff70 34%,#ffffff12 55%,transparent 76%);opacity:0;transition:opacity .6s ease;pointer-events:none;z-index:-1}
.grid a:is(:hover,:focus-visible){border-color:color-mix(in srgb,var(--card-accent) 34%,#fff);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff90,0 15px 35px color-mix(in srgb,var(--card-accent) 10%,transparent),0 3px 10px #20325805}
.grid a:is(:hover,:focus-visible):before{opacity:1}.grid a:is(:hover,:focus-visible):after{opacity:1}
.grid h2{transition:color .4s}.grid a:is(:hover,:focus-visible) h2{color:var(--card-accent)}
.grid .logo{transition:transform .5s var(--ease),background .4s,border-color .4s,box-shadow .4s}
.grid a:is(:hover,:focus-visible) .logo{background:linear-gradient(140deg,#fff,#ffffffb3);border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 6px 16px color-mix(in srgb,var(--card-accent) 12%,transparent);transform:translateY(-2px) scale(1.055)}
.grid .out{border-radius:50%;transition:transform .5s var(--ease),background .4s,color .4s}
.grid a:is(:hover,:focus-visible) .out{background:#ffffffa6;color:var(--card-accent);transform:translate(2px,-2px)}
.grid .category{transition:background .4s,border-color .4s,color .4s}
.grid a:is(:hover,:focus-visible) .category{color:var(--card-accent);background:#ffffff8c;border-color:#ffffffd9}
@media(hover:hover) and (pointer:fine){.grid a:hover{transform:translateY(-5px)}}
@media(hover:none){.grid a:hover,.grid a:hover .logo,.grid a:hover .out{transform:none}.grid a:active{background:#ffffffd9}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.grid a:hover,.grid a:focus-visible,.grid a:is(:hover,:focus-visible) .logo,.grid a:is(:hover,:focus-visible) .out{transform:none}}

@media(max-width:600px){
 header{width:calc(100% - 24px);padding:13px 15px;margin-top:12px;gap:10px}
 .brand{font-size:22px}.back{min-height:42px;padding:10px 12px}
 main{padding-top:36px}h1{font-size:clamp(30px,8vw,38px);line-height:1.15}
 .toolbar{padding:14px}.search{min-height:52px}
 .filters{gap:7px;margin-top:13px;padding-bottom:6px}.filters button{min-height:44px;padding:11px 13px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .grid a{padding:18px 15px;min-height:224px;border-radius:19px}
 .grid .card-top{margin-bottom:19px}.grid .logo{width:42px;height:42px;border-radius:12px}.grid .logo img{width:26px;height:26px}
 .grid h2{font-size:16px;line-height:1.4;overflow-wrap:anywhere}
 .grid p{font-size:12px;line-height:1.65;margin-bottom:19px}
 .grid .category{font-size:9px;padding:5px 7px;max-width:100%}
 .guide-main .guide-layout{gap:17px}
 .guide-main .guide-actions{display:grid;grid-template-columns:1fr;gap:10px}
 .guide-main .guide-button{width:100%;min-height:49px;font-size:14px}
 .guide-main .prompt-text{min-height:320px;line-height:1.75}
 .guide-main .guide-sources summary{min-height:44px;display:flex;align-items:center}
 .guide-main .guide-related .grid{grid-template-columns:1fr}
}
@media(max-width:359px){.grid{grid-template-columns:1fr}.grid a{min-height:210px;padding:23px}.grid h2{font-size:18px}.grid p{font-size:14px}}