/* Tools + Learn (crawler 2). Builds on style.css tokens. */
.nav{display:flex;gap:4px;margin-left:auto;margin-right:12px}
.nav a{font:600 14px var(--f);padding:8px 14px;border-radius:999px;color:var(--mute)}
.nav a:hover{color:var(--ink);background:var(--bg2)}.nav a[aria-current=page]{color:var(--bg);background:var(--ink)}
.search-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.sort select{font:inherit;font-size:15px;height:100%;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
.controls .row .lbl{width:60px}
.tools{list-style:none;padding:0;margin:8px 0 56px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(16px,2vw,24px)}
.tool{--c:var(--cyan);position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.tool::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 30%,var(--magenta)))}
.tool:hover{transform:translateY(-3px);box-shadow:0 18px 50px -20px color-mix(in srgb,var(--c) 70%,transparent)}
.k-open-source{--c:var(--lime)}.k-paid{--c:var(--coral)}
.tool[hidden],.tut[hidden]{display:none}
.tool-top{display:flex;gap:14px;align-items:center}
.tool h3{font:800 22px/1.1 var(--d);letter-spacing:-.02em;margin:2px 0}
.rank{margin:0;font-size:12px;color:var(--mute);letter-spacing:.02em}.kind{color:var(--c);font-weight:600}
[data-theme=light] .kind{filter:brightness(.7) saturate(1.4)}
.cat{margin:0;font-size:13px;color:var(--mute)}
.desc{margin:0;font-size:14px;color:var(--mute);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ring{--s:0;flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
 background:radial-gradient(closest-side,var(--bg2) 76%,transparent 78%),conic-gradient(var(--c,var(--cyan)) calc(var(--s)*1%),var(--line) 0)}
.ring b{font:800 19px var(--d)}.ring.sm{width:48px;height:48px;--c:var(--violet)}.ring.sm b{font-size:16px}
.stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.stats li{display:flex;gap:5px;align-items:baseline;font-size:13px;padding:5px 10px;border-radius:10px;background:color-mix(in srgb,var(--c) 10%,transparent);border:1px solid color-mix(in srgb,var(--c) 22%,transparent)}
.stats span{color:var(--c)}[data-theme=light] .stats span{filter:brightness(.7)}.stats small{color:var(--mute);font-size:11px}
details{border-top:1px dashed var(--line);padding-top:10px}
summary{cursor:pointer;font:600 13px var(--f);color:var(--ink);list-style:none;display:flex;align-items:center;gap:8px}
summary::-webkit-details-marker{display:none}summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--line);font-size:14px;transition:.2s}
details[open] summary::before{content:"−";background:var(--c,var(--violet));color:#000}
.bar-row{display:grid;grid-template-columns:96px 1fr 52px;align-items:center;gap:10px;font-size:12px;color:var(--mute);margin-top:9px}
.meter{display:block;height:8px;border-radius:9px;background:var(--line);overflow:hidden}.meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--c,var(--violet)),var(--gold))}
.meter.na{background:repeating-linear-gradient(45deg,var(--line) 0 4px,transparent 4px 8px)}.bar-row em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.why{font-size:13px;margin:10px 0 4px}.cov{font-size:12px;color:var(--mute);margin:0}.cov a{color:var(--cyan)}
.price{font-size:12px;color:var(--mute);margin:0}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.lk{font:600 12px var(--f);padding:6px 12px;border-radius:999px;border:1px solid var(--line)}.lk:hover{border-color:var(--c)}
.disc{margin:0 0 56px}.disc h2,.method h2{font:800 clamp(26px,3vw,38px) var(--d);letter-spacing:-.02em;margin:0 0 6px}.lede.sm{font-size:15px}
.disc ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.disc a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);height:100%}
.disc a:hover{border-color:var(--violet)}.disc b{font-size:14px;word-break:break-word}.disc span{font-size:12px;color:var(--gold)}[data-theme=light] .disc span{color:#a16207}.disc small{grid-column:1/-1;color:var(--mute);font-size:12px}
.method{margin:0 0 64px;padding:clamp(20px,3vw,36px);border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 12%,var(--bg2)),var(--bg2) 60%)}
.formula{font:500 clamp(13px,1.3vw,16px)/1.6 ui-monospace,Menlo,monospace;padding:14px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--line);overflow-x:auto}
.method dl{display:grid;grid-template-columns:120px 1fr;gap:10px 18px;font-size:15px}.method dt{font-weight:600;color:var(--cyan)}[data-theme=light] .method dt{color:#0e7490}.method dd{margin:0;color:var(--mute)}
.note{font-size:13px;color:var(--mute)}
.tuts{list-style:none;padding:0;margin:8px 0 56px;display:grid;gap:12px;counter-reset:none}
.tut{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:start;padding:18px 20px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--line);transition:border-color .2s}
.tut:hover{border-color:var(--violet)}
.num{font:800 30px/1 var(--d);background:linear-gradient(160deg,var(--magenta),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.tut h3{font:600 18px/1.3 var(--f);margin:6px 0 4px}.tut h3 a:hover{text-decoration:underline;text-decoration-color:var(--magenta);text-underline-offset:4px}
.tut .tags{margin:8px 0}.tut details{margin-top:8px}
.src{font:700 10px var(--f);text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:999px;margin-right:6px;color:#000}
.s-hacker-news{background:#ff8c42}.s-dev{background:var(--lime)}.s-github{background:var(--cyan)}
.t-wan{--c:#2dd4bf}.t-comfyui{--c:var(--lime)}.t-seedance{--c:#f472b6}.t-ltx{--c:var(--gold)}.t-elevenlabs{--c:var(--blue)}
@media (max-width:700px){.nav a{padding:6px 10px;font-size:13px}.tut{grid-template-columns:1fr auto}.num{display:none}.method dl{grid-template-columns:1fr}.search-row{grid-template-columns:1fr}.sort select{padding:12px 16px;width:100%}}
.mark{white-space:nowrap}
@media (max-width:480px){.mark{font-size:18px}.nav{margin-right:6px;gap:0}.nav a{padding:6px 8px}}