/* Explore v4: goal search, browse, category, skill, creator and compare pages.
   Tokens mirror edge-2.css so Explore sits in the same sky as landing and pricing. */
@font-face{font-family:Inter;src:url('/assets/edge-inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url('/assets/pixelify-sans.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:"Edge Pixel";src:url('/assets/edge-pixel.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
:root{color-scheme:light;--ink:#101114;--ink-2:#3f4a60;--muted:#5d6678;--faint:#687284;--line:#e3e8f1;--card-line:#dbe5f4;--paper:#fff;--card:#ffffffee;--blue:#154cff;--blue-ink:#154cff;--blue-hover:#083adf;--wash:#ecf3ff;--wash-2:#e2ebfb;--soft:#f5f8fd;--sky-top:#d6e6ff;--green:#15803d;--green-bg:#e3f6ea;--amber:#a15c00;--black:#0b0d12;--black-hover:#262c39;--shadow:0 10px 30px #1d3f8012;--shadow-lg:0 24px 70px #1b3a7a26;--sk:#e8eef8;--world:.95}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--ink:#ecedee;--ink-2:#c3c9d6;--muted:#a3aab8;--faint:#8b93a3;--line:#262d3a;--card-line:#2e384a;--paper:#161b24;--card:#161b24ee;--blue-ink:#8aa6ff;--wash:#1a2438;--wash-2:#243150;--soft:#11151c;--sky-top:#121b2b;--green:#5fd08a;--green-bg:#133222;--amber:#f0b35b;--black:#f1f3f8;--black-hover:#d9dee9;--shadow:0 10px 30px #0004;--shadow-lg:0 24px 70px #0007;--sk:#222a38;--world:.18}}
:root[data-theme=dark]{color-scheme:dark;--ink:#ecedee;--ink-2:#c3c9d6;--muted:#a3aab8;--faint:#8b93a3;--line:#262d3a;--card-line:#2e384a;--paper:#161b24;--card:#161b24ee;--blue-ink:#8aa6ff;--wash:#1a2438;--wash-2:#243150;--soft:#11151c;--sky-top:#121b2b;--green:#5fd08a;--green-bg:#133222;--amber:#f0b35b;--black:#f1f3f8;--black-hover:#d9dee9;--shadow:0 10px 30px #0004;--shadow-lg:0 24px 70px #0007;--sk:#222a38;--world:.18}
*{box-sizing:border-box}
html{background:var(--soft)}
body{margin:0;color:var(--ink);font:15px/1.55 Inter,"Edge Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(var(--sky-top),var(--soft) 620px,var(--soft));position:relative;min-height:100vh;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--blue-ink);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.skip{position:absolute;top:-80px;left:12px;z-index:50;background:var(--paper);padding:10px 14px;border-radius:8px}.skip:focus{top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.i{width:18px;height:18px;flex-shrink:0;vertical-align:middle}
.verified{color:var(--blue);width:15px;height:15px}

/* sky */
.sky{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sky .world{position:absolute;inset:0;opacity:var(--world);background:url('/explore/sky-top.svg') center top/1440px 900px no-repeat,url('/explore/sky-bottom.svg') center bottom/1440px 380px no-repeat}
.sky .perch{position:absolute;bottom:250px;left:calc(50% + 634px);width:44px;height:44px;opacity:var(--world)}
.sky .perch svg{width:100%;height:100%}
#edge-header,main,#edge-footer{position:relative}
#edge-footer{--ch-foot-head:var(--muted)!important}
main{max-width:1200px;margin:0 auto;padding:18px 32px 110px;min-height:70vh}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:10px;border:1px solid transparent;padding:11px 20px;font-weight:600;font-size:15px;line-height:1.3;white-space:nowrap;text-decoration:none!important;transition:background .15s,border-color .15s}
.btn .i{width:18px;height:18px}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--blue-hover)}
.btn-line{background:var(--paper);color:var(--blue-ink);border-color:var(--blue-ink)}.btn-line:hover{background:var(--wash)}
.btn-black{background:var(--black);color:var(--paper)}.btn-black:hover{background:var(--black-hover)}
.btn-quiet{background:transparent;color:var(--blue-ink);padding-inline:8px}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;background:var(--soft);border:1px solid var(--line);font-size:13px;color:var(--ink-2);white-space:nowrap}
.chip .i{width:15px;height:15px}
.chip.ok{color:var(--ink-2)}.chip.ok .i{color:var(--green)}
.chip.fit{color:var(--blue-ink);background:var(--wash);border-color:transparent}.chip.fit .i{color:var(--blue-ink)}
.chip.partial{background:var(--wash-2);border-color:transparent;color:var(--muted)}
.chip.warn{color:var(--amber)}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--wash);color:var(--blue-ink);font-size:13px;font-weight:500;white-space:nowrap}
.pill.solid{background:var(--blue);color:#fff}
.ghost-chip{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 17px;border-radius:10px;background:var(--card);border:1px solid var(--card-line);font-size:14px;color:var(--ink-2);box-shadow:0 2px 8px #1d3f8008}
.ghost-chip:hover{border-color:var(--blue-ink);color:var(--blue-ink)}

/* hero */
.hero{text-align:center;padding:62px 0 34px}
.hero h1,.page-title{margin:0;font-size:76px;line-height:1.02;letter-spacing:-.055em;font-weight:750}
.pixel{display:block;font-family:"Pixelify Sans","Edge Pixel",monospace;font-weight:700;color:var(--blue-ink);letter-spacing:-.02em;line-height:1.08}
.hero .pixel,.compare-hero .pixel{font-family:"Pixelify Sans","Edge Pixel",monospace;font-weight:700;letter-spacing:.005em}
.hero .pixel{font-size:78px;margin-top:2px;line-height:1.05}
.hero .lede{font-size:20px;color:var(--muted);margin:14px 0 0}
/* Live index size just above the search box; the line keeps its height while it loads.
   The negative bottom margin pulls the box up to 16px below it (hero padding-bottom plus
   .goal margin-top). The hero is hidden during a search, so results are unaffected. */
.hero .catalog-count{min-height:1.5em;margin:22px 0 -54px;font-size:15px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:700px){.hero .catalog-count{margin:10px 0 -14px;font-size:14px}}
.goal{max-width:960px;margin:36px auto 0;display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--card-line);border-radius:16px;padding:9px 9px 9px 24px;box-shadow:var(--shadow)}
.goal:focus-within{border-color:var(--blue-ink);box-shadow:0 0 0 4px #154cff1a,var(--shadow)}
.goal>.i{width:24px;height:24px;color:var(--ink-2)}
.goal input,.goal textarea{flex:1;min-width:0;border:0;background:transparent;font-size:20px;padding:12px 4px;outline:none;resize:none}
.goal input::placeholder,.goal textarea::placeholder{color:var(--faint)}
.go{display:grid;place-items:center;width:56px;height:56px;border-radius:11px;background:var(--blue);color:#fff;border:0;flex-shrink:0}
.go:hover{background:var(--blue-hover)}.go .i{width:24px;height:24px}
.go .spin{display:none}
[aria-busy=true] .go{background:var(--wash)}[aria-busy=true] .go .i{display:none}[aria-busy=true] .go .spin{display:block}
.spin{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,var(--blue) 2.4px,transparent 2.8px) 0 0/10px 10px;-webkit-mask:radial-gradient(circle,transparent 8px,#000 8.5px 15px,transparent 15.5px);mask:radial-gradient(circle,transparent 8px,#000 8.5px 15px,transparent 15.5px);animation:rot 1.2s steps(8) infinite}
.examples{max-width:1150px;margin:22px auto 0;display:flex;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.examples .ghost-chip{flex:0 1 auto}
.examples .label{display:none}
@keyframes rot{to{transform:rotate(360deg)}}

/* sections */
.section{margin-top:62px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-head h2{margin:0;font-size:32px;letter-spacing:-.04em;line-height:1.2;font-weight:750;display:flex;align-items:center;gap:14px}
.section-head h2 small{font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted)}
.view-all{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500}
.view-all .i{width:18px}

/* category tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px 18px;background:var(--card);border:1px solid var(--card-line);border-radius:14px;color:var(--ink);box-shadow:0 2px 10px #1d3f8008;text-decoration:none!important;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--blue-ink);transform:translateY(-2px)}
.tile>.i{width:36px;height:36px;color:var(--blue-ink);stroke-width:1.7}
.tile strong{font-size:17px;font-weight:650}
.tile .stack{display:flex;gap:6px;min-height:34px}
.tile .av{width:34px;height:34px}

/* avatars and creator marks */
.av{position:relative;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;flex-shrink:0;overflow:hidden}
.av-sm{width:36px;height:36px}.av-lg{width:56px;height:56px}.av-xl{width:112px;height:112px}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--paper)}
.mark{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;font-weight:700;letter-spacing:-.02em}
.mark-anthropic{background:#ecd9bd;color:#191512;font:800 calc(var(--s,48px)*.4)/1 Georgia,"Times New Roman",serif;letter-spacing:-.08em}
.mark-vercel{background:#000;color:#fff}.mark-vercel svg{width:52%;height:52%;margin-top:-6%}
.mark-mono{background:#000;color:#fff;font-size:calc(var(--s,48px)*.36)}
.mark-edge{background:transparent}.mark-edge svg{width:88%;height:88%}
.mark-plain{background:var(--wash-2);color:var(--blue-ink);font-size:calc(var(--s,48px)*.34)}
.mark-plain .i{width:56%;height:56%}
.mark-credit{background:var(--paper);border:1px solid var(--line, rgba(0,0,0,.08))}.mark-credit svg{width:62%;height:62%}.mark-credit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av{--s:48px}.av-sm{--s:36px}.av-lg{--s:56px}.av-xl{--s:112px}.tile .av{--s:34px}
:root[data-theme=dark] .mark-vercel,:root[data-theme=dark] .mark-mono{box-shadow:inset 0 0 0 1px #ffffff30}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .mark-vercel,:root:not([data-theme=light]) .mark-mono{box-shadow:inset 0 0 0 1px #ffffff30}}

/* skill cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:18px 18px 14px;box-shadow:0 2px 10px #1d3f8008;min-width:0;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,opacity .2s}
.skill-card:hover,.skill-card.hovered{border-color:var(--blue-ink);box-shadow:0 0 0 1px var(--blue-ink),var(--shadow)}
.card-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.card-head{display:flex;align-items:center;gap:13px;min-width:0}
.who{min-width:0;flex:1}
.who h3 a{color:inherit}
.who h3{margin:0;font-size:15px;font-weight:650;line-height:1.3;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who p{margin:2px 0 0;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-out{position:absolute;top:12px;right:12px;width:16px;height:16px;color:var(--ink-2)}
.card-desc{margin:14px 0 14px;font-size:14.5px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:43px}
.card-meta{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);white-space:nowrap}
.card-meta span{display:inline-flex;align-items:center;gap:5px}
.card-meta .i{width:14px;height:14px}
.card-meta .sep{width:1px;height:14px;background:var(--line)}
.meta-signal b{color:var(--ink);font-weight:650}
.rank{position:absolute;top:10px;right:36px;font-size:12px;color:var(--faint)}
.card.dim{opacity:.62}
body.quick-open .skill-card:not(.hovered){opacity:.45}
.skel{pointer-events:none}
.sk{display:block;background:var(--sk);border-radius:8px;animation:pulse 1.4s ease-in-out infinite}
.sk-av{width:48px;height:48px;border-radius:50%}.sk-l1{height:14px;width:60%;margin-bottom:8px}.sk-l2{height:11px;width:36%}.sk-t1{height:12px;margin:18px 0 9px}.sk-t2{height:12px;width:72%}.sk-row{display:flex;gap:10px;margin-top:18px}.sk-c{height:24px;width:74px}
@keyframes pulse{50%{opacity:.55}}

/* quick view */
.quick{position:absolute;z-index:40;width:430px;background:var(--paper);border:1px solid var(--card-line);border-radius:18px;padding:24px;box-shadow:var(--shadow-lg);animation:pop .16s ease-out}
.quick:before{content:'';position:absolute;left:-9px;top:88px;width:16px;height:16px;background:var(--paper);border-left:1px solid var(--card-line);border-bottom:1px solid var(--card-line);transform:rotate(45deg)}
.quick.from-left:before{left:auto;right:-9px;transform:rotate(-135deg)}
.quick .who h3{font-size:19px}.quick .who p{font-size:14px}
.q-close{position:absolute;top:14px;right:14px;border:0;background:none;color:var(--muted);padding:4px}
.q-desc{font-size:15.5px;line-height:1.55;color:var(--ink);margin:18px 0}
.q-stats{display:flex;gap:26px;padding:16px 0;border-block:1px solid var(--line)}
.q-stat{display:flex;flex-direction:column}.q-stat strong{font-size:22px;letter-spacing:-.03em;line-height:1.2}.q-stat span{font-size:13px;color:var(--muted)}
.q-signal{display:grid;grid-template-columns:auto 36px;column-gap:14px;align-items:center}.q-signal svg{grid-row:1/3;grid-column:2;width:36px;height:36px}
.q-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
@keyframes pop{from{opacity:0;transform:translateY(4px)}}

/* results */
.results-wrap{margin-top:8px}
.results-grid{display:grid;grid-template-columns:244px minmax(0,1fr);column-gap:22px;margin-top:26px;align-items:start}
/* Refine sits above the results column, so Filters starts level with the "Ranked by" row. */
.results-grid>.refine{grid-column:2}
.results-grid>.filters{grid-column:1;grid-row:2;margin-top:14px}
.results-grid>.col{grid-column:2;grid-row:2}
.results-grid>.col>.ranked:first-child{margin-top:14px}
.filters{background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:22px 20px;position:sticky;top:18px}
.filters-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.filters h2{margin:0;font-size:20px;letter-spacing:-.02em}
.filters .reset{border:0;background:none;color:var(--blue-ink);font-size:14px;padding:0}
.f-group{padding:16px 0;border-top:1px solid var(--line)}.f-group:first-of-type{border-top:0;padding-top:4px}
.f-group h3{margin:0 0 10px;font-size:15px;font-weight:550}
.switch{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px}
.switch input{appearance:none;width:44px;height:26px;border-radius:99px;background:var(--wash-2);position:relative;cursor:pointer;margin:0;transition:background .15s}
.switch input:before{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}
.switch input:checked{background:var(--blue)}.switch input:checked:before{transform:translateX(18px)}
.checks{display:grid;gap:9px}
.checks label{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2)}
.checks input{width:18px;height:18px;accent-color:var(--blue);margin:0}
input[type=range]{width:100%;accent-color:var(--blue)}
.range-scale{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.select{width:100%;height:44px;border-radius:10px;border:1px solid var(--card-line);background:var(--paper);padding:0 12px;font-size:15px}
.refine{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:8px 12px;width:max-content;max-width:100%}
.refine>span{font-size:15px;color:var(--ink-2);margin-right:4px}
.refine button{height:34px;padding:0 15px;border-radius:99px;border:1px solid var(--card-line);background:var(--soft);font-size:14px;color:var(--ink-2)}
.refine button:hover{border-color:var(--blue-ink);color:var(--blue-ink)}
.ranked{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 2px 10px;font-size:16px;color:var(--ink-2)}
.ranked>span{display:flex;align-items:center;gap:10px}
.ranked .mascot-svg{width:28px;height:28px}
.ranked b{font-weight:600;color:var(--ink)}
.good-fit{color:var(--ink);font-size:16px}
.top{background:var(--card);border:1px solid var(--card-line);border-radius:18px;padding:20px 22px 16px;box-shadow:var(--shadow)}
.top-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px}
.top .av{width:72px;height:72px;--s:72px;box-shadow:0 0 0 1px var(--card-line)}
.top h2{margin:2px 0 0;font-size:26px;letter-spacing:-.03em;line-height:1.2;overflow-wrap:anywhere}
.top h2 a{color:inherit}
.top .by{margin:2px 0 4px;color:var(--muted);font-size:15px}
.top .desc{margin:0 0 12px;font-size:16px;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.top-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.why{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px;padding:14px 16px 14px 18px;background:var(--wash);border-radius:12px}
.why h3{margin:0;font-size:15px;color:var(--blue-ink);font-weight:600}
.why p{margin:3px 0 0;font-size:15px;color:var(--ink-2)}
.why .acts{display:flex;gap:10px}
.alts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.alt{padding:16px 16px 14px}
.alt .card-desc{margin:12px 0;font-size:15px;color:var(--ink);-webkit-line-clamp:2;min-height:0}
.alt .chips{gap:6px}.alt .chip{height:28px;font-size:12.5px;padding:0 9px}
.alt.selected-pick{border-color:var(--blue-ink);box-shadow:0 0 0 1px var(--blue-ink)}
.alt .who h3{font-size:15px}
.see-bench{display:flex;justify-content:center;align-items:center;gap:8px;margin:26px auto 0;background:none;border:0;color:var(--blue-ink);font-size:16px;font-weight:500}
.benchmark{margin-top:18px;background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:24px}
.benchmark h2{margin:0;font-size:22px;letter-spacing:-.02em}
.benchmark p{color:var(--muted);margin:6px 0 0}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px}
.comparison h3{font-size:15px;margin:10px 0}
.comparison ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.comparison li{padding:10px 12px;background:var(--wash);border-radius:10px;font-size:14px;overflow-wrap:anywhere}
.comparison small{display:block;color:var(--muted)}
.empty-filter{padding:28px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--card-line);border-radius:16px}
.mobile-setup{display:none}
.provenance{font-size:13px;color:var(--muted);text-align:center;margin:10px 0 0}
.preview-controls{max-width:960px;margin:12px auto 0;font-size:13px;color:var(--muted);text-align:center}
.status{text-align:center;color:var(--muted);margin:18px auto 0;max-width:720px}
.status:empty{display:none}

/* loading and empty */
.loading{margin-top:22px;text-align:center}
.thinking{display:inline-flex;align-items:center;gap:12px;font-size:16px;color:var(--ink-2)}
.thinking .mascot-svg{width:56px;height:56px;animation:bob 1.2s ease-in-out infinite}
.thinking .dots{display:inline-flex;gap:5px}.thinking .dots i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:blink 1.2s infinite}.thinking .dots i:nth-child(2){animation-delay:.2s}.thinking .dots i:nth-child(3){animation-delay:.4s}
.steps{display:flex;justify-content:center;margin:26px auto 30px;max-width:640px;list-style:none;padding:0}
.steps li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:16px;color:var(--muted)}
.steps li:before{content:'';position:absolute;top:15px;left:calc(-50% + 22px);right:calc(50% + 22px);height:2px;background:var(--line)}
.steps li:first-child:before{display:none}
.steps .dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--faint);background:var(--paper);display:grid;place-items:center}
.steps .spin{display:none}
.steps li.on{color:var(--blue-ink);font-weight:500}.steps li.on .dot{border:0;background:none}.steps li.on .spin{display:block}
.steps li.done{color:var(--ink-2)}.steps li.done .dot{border-color:var(--blue);background:var(--blue);color:#fff}.steps li.done .dot:after{content:'';width:8px;height:13px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg)}
.loading .cards{grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.loading .card{padding:22px 24px;min-height:220px}
.empty{text-align:center;margin-top:34px}
.empty .mascot-wrap{position:relative;display:inline-block;width:60px;height:60px}
.empty .mascot-svg{width:60px;height:60px}
.empty .mascot-wrap:before{content:'';position:absolute;left:-14px;top:-14px;width:22px;height:22px;background:linear-gradient(135deg,transparent 45%,var(--blue) 45% 55%,transparent 55%) 0 0/8px 8px no-repeat,linear-gradient(90deg,var(--blue),var(--blue)) 12px 0/3px 9px no-repeat,linear-gradient(90deg,var(--blue),var(--blue)) 0 12px/9px 3px no-repeat}
.empty h2{margin:10px 0 4px;font-size:36px;letter-spacing:-.045em}
.empty>p{margin:0;color:var(--muted);font-size:17px}
.empty .acts{display:flex;justify-content:center;gap:18px;margin:22px 0 22px}
.empty .acts .btn{min-width:190px;padding-block:13px;font-size:17px}
.empty .cards{grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.partial-card{padding:22px 24px;opacity:.82}
.partial-card .card-desc{color:var(--muted);font-size:16px}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes blink{50%{opacity:.25}}

/* browse */
.page-head{padding:44px 0 28px}
.page-title{font-size:80px}
.page-head .pixel{font-size:42px;margin-top:4px}
.crumbs{display:flex;gap:8px;font-size:15px;color:var(--muted);margin-top:26px}
.crumbs a{color:var(--blue-ink)}.crumbs span[aria-hidden]{color:var(--faint)}
.toolbar{display:flex;gap:14px;align-items:center}
.search-box{flex:1;display:flex;align-items:center;gap:12px;height:54px;padding:0 18px;background:var(--paper);border:1px solid var(--card-line);border-radius:12px}
.search-box:focus-within{border-color:var(--blue-ink)}
.search-box .i{color:var(--ink-2)}
.search-box input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px}
.search-box input::placeholder{color:var(--faint)}
.sort{position:relative}
.sort select{appearance:none;height:54px;min-width:210px;padding:0 44px 0 18px;border-radius:12px;border:1px solid var(--card-line);background:var(--paper);font-size:16px;cursor:pointer}
.sort .i{position:absolute;right:16px;top:18px;pointer-events:none;color:var(--ink-2)}
.views{display:flex;padding:4px;gap:2px;background:var(--paper);border:1px solid var(--card-line);border-radius:12px;height:54px}
.views button{width:52px;border:0;border-radius:9px;background:none;color:var(--ink-2);display:grid;place-items:center}
.views button[aria-pressed=true]{background:var(--wash);color:var(--blue-ink)}
.views .i{width:22px;height:22px}
.tabs{display:flex;gap:6px;margin-top:22px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs a,.tabs button{padding:10px 16px 12px;font-size:16px;color:var(--ink-2);border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none!important}
.tabs [aria-current=page],.tabs [aria-selected=true]{color:var(--blue-ink);border-bottom-color:var(--blue-ink);font-weight:550}
.row-section{margin-top:44px}
.row-section .section-head h2{font-size:34px}
.arrows{display:flex;align-items:center;gap:10px}
.arrows button{width:40px;height:40px;border-radius:50%;border:1px solid var(--card-line);background:var(--paper);color:var(--ink-2);display:grid;place-items:center}
.arrows button:disabled{opacity:.4;cursor:default}
.more{display:flex;flex-direction:column;align-items:center;gap:4px;margin:46px auto 0;border:0;background:none;color:var(--ink-2);font-size:16px}
.more:before{content:'';width:300px;height:1px;background:linear-gradient(90deg,transparent,var(--card-line) 20% 40%,transparent 40% 60%,var(--card-line) 60% 80%,transparent);margin-bottom:-14px}
.note{font-size:13px;color:var(--muted)}

/* list view */
.table-wrap{margin-top:26px;background:var(--card);border:1px solid var(--card-line);border-radius:16px;overflow:hidden}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{text-align:left;font-weight:500;color:var(--ink-2);padding:16px 14px;border-bottom:1px solid var(--line);font-size:15px}
.table td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--soft)}
.table .num{width:56px;text-align:center;color:var(--ink-2)}
.t-skill{display:flex;align-items:center;gap:12px;min-width:0}
.t-skill .av{width:40px;height:40px;--s:40px}
.t-skill a{color:var(--ink);font-weight:600;display:block}
.t-skill small{display:block;color:var(--muted);font-size:13px}
.t-desc{color:var(--ink-2);max-width:330px}
.cat-chip{display:inline-block;padding:4px 10px;border-radius:7px;background:var(--wash);color:var(--ink-2);font-size:12.5px;white-space:nowrap}
.bar{display:flex;align-items:center;gap:12px;font-weight:600;min-width:150px}
.bar i{flex:1;height:8px;border-radius:99px;background:var(--wash-2);overflow:hidden}
.bar i b{display:block;height:100%;background:var(--blue);border-radius:99px}
.use{height:36px;padding:0 18px;border-radius:9px;border:1px solid var(--blue-ink);background:var(--paper);color:var(--blue-ink);font-weight:600;font-size:14px}
.use:hover{background:var(--wash)}
.pager-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.pager{display:flex;align-items:center;gap:8px}
.pager button{min-width:38px;height:38px;border-radius:9px;border:1px solid var(--card-line);background:var(--paper);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;font-size:14px}
.pager button[aria-current=page]{background:var(--blue);border-color:var(--blue);color:#fff}
.pager button:disabled{opacity:.45;cursor:default}
.pager .gap{color:var(--faint);padding:0 4px}

/* category page */
.cat-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;margin-top:26px;align-items:start}
.cat-layout .filters{padding:20px 18px}
.subtabs{margin-top:20px}

/* skill page */
.skill-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:start;margin-top:22px}
.skill-hero .av{width:86px;height:86px;--s:86px;border-radius:18px;box-shadow:0 0 0 1px var(--card-line),var(--shadow);background:var(--paper)}
.skill-hero .av .mark{border-radius:18px}
.skill-hero h1{margin:0;font-size:52px;letter-spacing:-.05em;line-height:1.05;overflow-wrap:anywhere}
.skill-hero .by{margin:4px 0 6px;color:var(--muted);font-size:17px}
.skill-hero .desc{margin:0 0 14px;color:var(--ink-2);font-size:17px;max-width:720px}
.skill-hero .chips .chip{height:36px;font-size:15px;padding:0 14px;background:var(--paper);border-color:var(--card-line)}
.skill-hero .acts{display:flex;gap:12px;padding-top:30px}
.skill-grid{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:14px;margin-top:22px;align-items:start}
.panel{background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:26px 30px}
.panel h2{margin:0 0 14px;font-size:22px;letter-spacing:-.03em}
.panel+.panel{margin-top:14px}
.side .panel{padding:20px}
.side .panel h2{font-size:20px}
.overview h2.big{font-size:44px;line-height:1.08;letter-spacing:-.05em;margin:0 0 26px}
.overview .pixel{font-size:40px}
.overview p.full{font-size:16px;color:var(--ink-2);margin:0 0 20px}
.overview h3{font-size:20px;margin:26px 0 12px;letter-spacing:-.02em;padding-top:22px;border-top:1px solid var(--line)}
.prompt-box{position:relative;background:var(--wash);border:1px solid var(--card-line);border-radius:12px;padding:16px 18px;font-size:15px;white-space:pre-wrap;color:var(--ink);overflow-wrap:anywhere}
.prompt-box .btn{margin-top:12px}
.md{font-size:14px;line-height:1.65;color:var(--ink-2);max-height:620px;overflow:auto;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:18px 20px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.similar a{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--card-line);border-radius:12px;color:var(--ink);background:var(--paper);text-decoration:none!important}
.similar a+a{margin-top:10px}
.similar a:hover{border-color:var(--blue-ink)}
.similar .av{width:36px;height:36px;--s:36px}
.similar .who h3{font-size:14.5px}.similar .who p{font-size:13px}
.similar .i{color:var(--blue-ink)}
.source-list{display:grid;gap:10px;margin:0;font-size:15px}
.source-list div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.source-list div:last-child{border-bottom:0}
.source-list dt{color:var(--muted)}.source-list dd{margin:0;font-weight:550;text-align:right;overflow-wrap:anywhere}

/* creator page */
.creator-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;align-items:center;padding:20px 0 32px;border-bottom:1px solid var(--card-line)}
.creator-head h1{margin:0;font-size:64px;letter-spacing:-.05em;line-height:1.02;overflow-wrap:anywhere}
.creator-head .pixel{font-size:32px;margin-top:4px}
.creator-head .gh{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:16px;color:var(--ink-2)}
.creator-head .gh .i:first-child{width:24px;height:24px}
.totals{display:flex;gap:0}
.totals div{padding:0 26px;border-left:1px solid var(--card-line)}
.totals strong{display:block;font-size:40px;letter-spacing:-.04em;line-height:1.1}
.totals span{font-size:14px;color:var(--muted)}
.cards.big .card{padding:22px 22px 16px}
.cards.big .card-desc{font-size:16.5px;min-height:50px}
.cards.big .who h3{font-size:16px}

/* compare */
.compare-hero{text-align:center;padding:44px 0 22px}
.compare-hero h1{margin:0;font-size:60px;letter-spacing:-.05em;line-height:1.05}
.compare-hero .pixel{font-size:58px}
.compare-hero .lede{font-size:20px;color:var(--muted);margin:10px 0 0}
.compare-query{display:flex;align-items:center;gap:22px;max-width:810px;margin:24px auto 0;padding-left:130px}
.compare-query .search-box{height:54px}
.compare-query .search-box span{font-size:18px}
.ctable{margin-top:22px;display:grid;grid-template-columns:210px repeat(var(--n),minmax(0,1fr));background:var(--card);border:1px solid var(--card-line);border-radius:18px;position:relative}
.ctable>div{padding:16px 22px;border-bottom:1px solid var(--line);min-width:0;display:flex;flex-direction:column;justify-content:center}
.ctable>.lab{font-weight:600;font-size:16px}
.ctable>.col-head{padding:20px 22px 18px}
.ctable .last{border-bottom:0}
.ctable .pick{background:linear-gradient(var(--wash),transparent 260px),var(--wash);box-shadow:inset 1.5px 0 0 var(--blue),inset -1.5px 0 0 var(--blue)}
.ctable .pick.col-head{box-shadow:inset 1.5px 0 0 var(--blue),inset -1.5px 0 0 var(--blue),inset 0 1.5px 0 var(--blue);border-radius:16px 16px 0 0;background:var(--wash)}
.ctable .pick.last{box-shadow:inset 1.5px 0 0 var(--blue),inset -1.5px 0 0 var(--blue),inset 0 -1.5px 0 var(--blue);border-radius:0 0 16px 16px}
.ctable>.col-head{position:relative}
.ctable .edge-pill{position:absolute;top:-14px;left:50%;transform:translateX(-50%)}
.ctable .card-head .who h3{font-size:17px}.ctable .card-head .who p{font-size:15px}
.ctable .val{font-size:17px;font-weight:600}
.ctable .val small{display:block;font-weight:400;font-size:14px;color:var(--muted)}
.ctable .txt{font-size:16px;color:var(--ink-2)}
.cfoot{text-align:center;margin-top:18px;font-size:13px;color:var(--muted)}
.back{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:14px;font-size:17px;font-weight:500}

.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:var(--black);color:var(--paper);padding:11px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:60}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* tablet */
@media(max-width:1100px){
  .cards,.alts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .results-grid,.cat-layout{grid-template-columns:minmax(0,1fr)}
  .filters{position:static}
  .results-grid>.refine,.results-grid>.filters,.results-grid>.col{grid-column:1;grid-row:auto}
  .results-grid>.filters{margin-top:14px}
  .skill-grid{grid-template-columns:minmax(0,1fr)}
  .table .t-desc,.table .col-cat{display:none}
}
/* mobile */
@media(max-width:700px){
  main{padding:8px 18px 110px}
  .sky .world{background-size:900px auto,900px auto;background-position:center top,center bottom}
  .sky .perch{display:none}
  .hero{padding:26px 0 8px}
  .hero h1,.page-title{font-size:44px;letter-spacing:-.05em}
  .hero .pixel{font-size:46px;line-height:1.02;margin-top:8px}
  .hero .lede{font-size:17px;margin-top:14px}
  .goal{margin-top:22px;flex-wrap:wrap;align-items:flex-end;padding:12px 12px 12px 20px;min-height:120px;border-radius:18px}
  .goal>.i{display:none}
  .goal textarea,.goal input{font-size:17px;flex-basis:100%;padding:4px 0}
  .goal .go{margin-left:auto}
  .examples{display:grid;grid-template-columns:1fr 1fr;gap:10px;justify-content:stretch;margin-top:18px}
  .examples .label{display:block;grid-column:1/-1;font-size:15px;color:var(--ink-2);margin-bottom:-4px}
  .examples .ghost-chip{height:42px;padding:0 8px;font-size:14px;border-radius:12px}
  .examples .extra{display:none}
  .section{margin-top:40px}
  .section-head h2{font-size:28px}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}
  .tile{flex-direction:row;justify-content:flex-start;gap:14px;padding:18px;border-radius:12px}
  .tile>.i{width:30px;height:30px}
  .tile strong{font-size:17px;font-weight:550}
  .tile .stack{display:none}
  .home-rows{display:none}
  .mobile-perch{display:flex!important}
  .cards,.cards.three,.alts,.loading .cards,.empty .cards{grid-template-columns:1fr}
  .page-head{padding:24px 0 18px}
  .page-head .pixel{font-size:26px}
  .toolbar{flex-wrap:wrap}
  .search-box{flex-basis:100%}
  .sort{flex:1}.sort select{min-width:0;width:100%}
  .row-section .section-head h2{font-size:26px}
  .arrows button{width:34px;height:34px}
  .table th.col-inst,.table td.col-inst,.table .col-bar,.table .num{display:none}
  .creator-head{grid-template-columns:auto 1fr}
  .creator-head .av-xl{width:72px;height:72px;--s:72px}
  .creator-head h1{font-size:38px}.creator-head .pixel{font-size:20px}
  .totals{grid-column:1/-1}.totals div:first-child{border-left:0;padding-left:0}
  .skill-hero{grid-template-columns:auto 1fr}
  .skill-hero h1{font-size:34px}.skill-hero .av{width:64px;height:64px;--s:64px}
  .skill-hero .acts{grid-column:1/-1;padding-top:0}
  .panel{padding:20px}
  .overview h2.big{font-size:32px}.overview .pixel{font-size:28px}
  .compare-hero h1{font-size:38px}.compare-hero .pixel{font-size:36px}
  .compare-query{padding-left:0;flex-wrap:wrap}
  .ctable{grid-template-columns:repeat(var(--n),minmax(200px,1fr));overflow-x:auto}
  .ctable>.lab{display:none}
  /* results on phones */
  .in-search .mobile-back{display:flex!important}
  .in-search .goal{min-height:0;flex-wrap:nowrap;align-items:center;top:8px;margin-top:10px;padding:5px 5px 5px 14px;border-radius:14px}
  .in-search .goal>.i{display:block;width:20px}
  .in-search .goal textarea{flex-basis:auto;height:26px;padding:0 2px;overflow:hidden;white-space:pre;overflow-x:hidden}
  .in-search .goal .go{width:44px;height:44px}
  .refine,.filters{display:none!important}
  .results-grid{margin-top:14px}
  .ranked .good-fit{display:none}
  .ranked{flex-wrap:wrap}
  .ranked-side{margin-left:auto}
  .top{padding:18px}
  .top-main{grid-template-columns:auto 1fr;gap:14px}
  .top .av{width:58px;height:58px;--s:58px}
  .top h2{font-size:21px}
  .top-side{position:absolute;right:16px;top:16px}
  .top{position:relative}
  .top .who-block{display:contents}
  .top-main{row-gap:2px;align-items:center}
  .top .av{grid-row:span 2}
  .top .name-line{padding-right:84px;align-self:end;flex-wrap:wrap;gap:2px 10px}
  .top .name-line .fit-score{height:26px;font-size:13px}
  .top .fit-score:after{left:0;transform:none}
  .top .by{align-self:start;margin:0}
  .top .desc,.top .chips{grid-column:1/-1}
  .top .desc{margin-top:10px}
  .why .acts .btn{min-width:0;font-size:14px;gap:6px;padding-inline:8px}
  .ranked{font-size:14px}
  .table-wrap{overflow-x:auto}
  .creator-head>div{min-width:0}
  .skill-hero>div{min-width:0}
  .tile strong{font-size:16px}
  .top .desc{grid-column:1/-1}
  .top .chips{grid-column:1/-1}
  .why{flex-direction:column;align-items:stretch;gap:12px}
  .why .acts{display:grid;grid-template-columns:1fr 1fr}
  .why .acts .btn{padding-inline:10px}
  .alt{padding:18px}
  .alt .card-head .av{width:58px;height:58px;--s:58px}
  .alt .who h3{font-size:21px}
  .alt .who p{font-size:15px}
  .alt .card-desc{font-size:16px}
  .alt .chip{height:34px;font-size:14px;padding:0 12px}
  .alt .chip.ok{display:none}
  .alt .fit-score.sm{height:28px;font-size:13px}
  .ctable .fitrow .bar{min-width:0}
  .mobile-setup{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 18px calc(12px + env(safe-area-inset-bottom));background:var(--soft);border-top:1px solid var(--line)}
  .mobile-setup::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px;background:linear-gradient(transparent,var(--soft));pointer-events:none}
  /* Room for the fixed bar (78px plus the safe area) so the last card and the footer scroll clear of it. */
  body.has-results main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  body.has-results{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .mobile-setup .btn{width:100%;height:56px;font-size:18px;border-radius:12px}
  body:not(.has-results) .mobile-setup{display:none}
  .steps li{font-size:13px}
  .empty h2{font-size:28px}
  .empty .acts{flex-direction:column;align-items:center;gap:10px}
  .quick{display:none}
}
.mobile-back{display:none;align-items:center;gap:10px;font-size:18px;font-weight:500;margin:12px 0 0}
.mobile-perch{display:none;flex-direction:column;align-items:center;margin-top:34px}
.mobile-perch .mascot-svg{width:64px;height:64px;margin-bottom:-6px;position:relative;z-index:1}
.mobile-perch .isle{width:210px;height:74px;background:url('/explore/sky-bottom.svg') -1300px -170px/1440px 380px no-repeat}
.mobile-perch .chips{margin-top:-40px;position:relative}
.mobile-perch .chip{background:var(--paper)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.mob-only{display:none}
@media(max-width:700px){.desk-only{display:none}.mob-only{display:inline}}
body:not(.has-results) .hero .lede{display:none}
@media(max-width:700px){body:not(.has-results) .hero .lede{display:block}}
.col,.who-block{min-width:0}
@media(max-width:700px){.pager-row{flex-direction:column;align-items:flex-start;gap:12px}.pager{flex-wrap:wrap}.pager button{padding:0 10px}.section-head{flex-wrap:wrap}.section-head .search-box{flex:1 1 100%!important}.overview .acts-row{flex-wrap:wrap}}


/* skill page: audit */
.audit-card .audit-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.audit-card .audit-head h2{margin:0}
.audit-pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:99px;font-size:13px;font-weight:600;background:var(--soft);color:var(--ink-2);border:1px solid var(--line)}
.audit-pill.pass{background:var(--green-bg);color:var(--green);border-color:transparent}
.audit-pill.warn,.audit-pill.fail{background:var(--wash);color:var(--amber);border-color:transparent}
.audit-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.audit-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;background:var(--paper)}
.audit-list li+li{border-top:1px solid var(--line)}
.audit-list .i{width:22px;height:22px;color:var(--ink-2)}
.audit-list strong{display:block;font-size:14px;font-weight:600}
.audit-list small{display:block;font-size:13px;color:var(--muted)}
.audit-status{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
.audit-status .dot{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff}
.audit-status .dot svg{width:12px;height:12px}
.audit-status.pass .dot{background:#16a34a}
.audit-status.warn .dot{background:#d97706}
.audit-status.fail .dot{background:#dc2626}
.audit-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;border:0;background:none;padding:0;color:var(--blue-ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.audit-more .i{width:16px;height:16px}
.audit-note{font-size:13px;color:var(--muted);margin:12px 0 0}

/* search mode: hero steps aside, the goal bar goes compact and sticks under the nav */
.in-search .hero,.in-search .examples{display:none}
.in-search .goal{position:sticky;top:12px;z-index:25;margin-top:14px;padding:5px 5px 5px 18px;border-radius:14px;gap:10px;background:var(--paper)}
.in-search .goal>.i{width:20px;height:20px}
.in-search .goal textarea{font-size:17px;padding:8px 2px;height:40px}
.in-search .go{width:44px;height:44px;border-radius:10px}
.in-search .go .i{width:20px;height:20px}
.in-search .go .spin{transform:scale(.8)}
/* Before explore.js runs on a ?q= visit, the page already shows the results skeleton. */
.in-search:not(.ready) #home{display:none}
.in-search:not(.ready) #loading{display:block!important}

/* Fit score */
.name-line{display:flex;align-items:center;gap:12px;min-width:0}
.name-line h2{min-width:0}
.fit-score{position:relative;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:99px;font-size:14px;color:var(--ink-2);background:var(--soft);border:1px solid var(--card-line);white-space:nowrap;cursor:help;flex-shrink:0;z-index:2}
.fit-score b{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.fit-score.hi{background:var(--wash);border-color:transparent;color:var(--blue-ink)}.fit-score.hi b{color:var(--blue-ink)}
.fit-score.mid b{color:var(--ink)}
.fit-score.lo{color:var(--muted)}.fit-score.lo b{color:var(--muted)}
.fit-score.sm{height:26px;padding:0 9px;font-size:12.5px}.fit-score.sm b{font-size:13.5px}
.fit-score:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:220px;padding:7px 10px;border-radius:8px;background:var(--black);color:var(--paper);font-size:12.5px;font-weight:500;line-height:1.35;white-space:normal;text-align:center;pointer-events:none;display:none;animation:pop .15s ease-out}
.fit-score:hover:after,.fit-score:focus-visible:after{display:block}
.fit-score.sm:after{left:auto;right:0;transform:none}
.alt-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.alt.has-fit .who{margin-top:12px;flex:none}
.alt.has-fit .card-desc{margin-top:8px}
.card-head .fit-score{align-self:flex-start}

/* compare controls */
.ranked-side{display:flex;align-items:center;gap:14px;flex-shrink:0}
.compare-ctl{display:flex;align-items:center;gap:10px;min-height:34px}
.compare-ctl .btn-sm{height:34px}
.picked-stack{display:flex}
.picked-stack .av{width:28px;height:28px;--s:28px;box-shadow:0 0 0 2px var(--soft)}
.picked-stack .av+.av{margin-left:-7px}
.compare-ctl .clear{border:0;background:none;padding:0 4px;color:var(--muted);font-size:14px}
.compare-ctl .clear:hover{color:var(--blue-ink)}
.cmp-link{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px 0 7px;border:1px solid transparent;border-radius:8px;background:none;color:var(--blue-ink);font-size:14px;font-weight:500}
.cmp-link .i{width:16px;height:16px}
.cmp-link:hover{background:var(--wash)}
.cmp-link[aria-pressed=true]{background:var(--wash);border-color:var(--blue-ink)}
.cmp-link:disabled{color:var(--faint);cursor:not-allowed;background:none}
.alt .cmp-link{align-self:flex-start;margin:10px 0 0 -7px}
.top-side .cmp-link{margin-right:-8px}

/* skeletons: each box matches the element it stands in for */
.sk-line{height:12px;margin:6px 0}
.sk-sub{height:10px;margin-top:6px}
.sk-gap{margin-top:12px}
.sk-pill{height:30px;border-radius:99px}
.sk-cmp{margin-top:14px;height:24px}
.sk-field{height:44px;border-radius:10px;margin-top:8px}
.sk-h1{height:46px;margin:4px 0 12px;border-radius:10px}
.sk-h2{height:26px;margin:4px 0 8px}
.sk-h3{height:16px;margin:4px 0 14px}
.sk-by{height:14px;margin:0 0 12px}
.sk-desc{height:16px;margin:4px 0 16px}
.sk-chip{height:36px;border-radius:8px}
.sk-btn{height:44px;border-radius:10px}
.sk-av-sm{width:36px;height:36px}.sk-av-lg{width:72px;height:72px}.sk-av-xl{width:86px;height:86px;border-radius:18px}
.sk-lead{height:16px;margin:6px 0 10px}
.sk-prompt{height:38px;border-radius:99px;flex-shrink:1;min-width:0}
.sk-ico{height:20px;border-radius:6px}
.sk-val{height:18px;margin:2px 0}
.sk-bar{height:8px;border-radius:99px}
.sk-space{display:block;height:14px}
.loading{text-align:left;margin-top:0}
.loading .results-grid .refine{min-height:52px}
.loading .ranked-side .sk{height:34px}
.loading .top .sk-row,.loading .alt .sk-row{margin-top:14px}
.sk-why{display:block}
.tabs.skel .tab-sk{padding:10px 16px 12px;font-size:16px;color:var(--faint)}
.sim-sk{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--card-line);border-radius:12px;background:var(--paper)}
.sim-sk+.sim-sk{margin-top:10px}
.source-list .sk{margin:4px 0}
.audit-list li .sk-pill{height:22px}
.audit-card.skel .audit-head .sk-pill{height:28px}
.md-skel{max-height:none}
#hero-chips{min-height:36px}
#hero-desc:empty{display:none}

/* skill page: What it does */
.wid-lead{margin:0;font-size:19px;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.wid-more{margin:12px 0 0;font-size:16px;color:var(--ink-2)}
.wid-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;margin-top:22px}
.wid-grid.one{grid-template-columns:1fr}
.overview .wid h3{font-size:16px;margin:0 0 10px;padding:0;border:0;letter-spacing:-.01em}
.wid-examples{margin-top:22px}
ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
ul.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.5}
ul.ticks .i{width:18px;height:18px;margin-top:2px;color:var(--green)}
.prompt-chips{display:flex;flex-wrap:wrap;gap:8px}
.prompt-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 14px;border-radius:99px;border:1px solid var(--card-line);background:var(--paper);color:var(--ink);font-size:14.5px;text-align:left;max-width:100%}
.prompt-chip .i{width:15px;height:15px;color:var(--blue-ink)}
.prompt-chip span{overflow-wrap:anywhere}
.prompt-chip:hover{border-color:var(--blue-ink);color:var(--blue-ink)}
.wid-source{margin:20px 0 0;font-size:13px;color:var(--muted)}
.wid-source .i{width:13px;height:13px}
.overview h3.take{font-size:20px;margin:26px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.acts-row{display:flex;gap:10px;margin-top:12px}
.standalone-option{margin-top:18px;border-top:1px solid var(--card-line);padding-top:14px;color:var(--muted)}.standalone-option summary{cursor:pointer;font-size:14px}.standalone-option p{font-size:13px;line-height:1.5}.standalone-option .btn{margin-top:6px}
.md-link{margin:10px 0 0}

/* compare page */
.cmp-query{display:flex;align-items:center;justify-content:center;gap:10px;max-width:810px;margin:22px auto 0;font-size:16px;color:var(--ink-2);text-align:center;flex-wrap:wrap}
.cmp-query q{color:var(--ink);font-weight:600;quotes:'“' '”'}
.cmp-query .btn{margin-left:4px}
.ctable .fitrow .val{display:flex;align-items:baseline;gap:4px;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ctable .fitrow .val small{display:inline;font-size:14px;letter-spacing:0}
.ctable .fitrow .bar{min-width:0;margin:8px 0 8px}
.ctable .fitrow .bar i{height:8px}
.ctable .fitrow .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.ctable .fitrow .meta .chip{height:26px;font-size:12.5px;padding:0 9px}
.ctable>div.hl{background:var(--soft)}
.ctable .acts{display:grid;gap:8px}
.ctable .acts .btn{width:100%}
.ctable .rank-line{font-size:14px;color:var(--muted);font-weight:400}
.cmp-mobile{display:none}
.cmp-query.skel{height:38px;margin-top:22px}.cmp-query.skel .sk{height:16px;margin:0 auto}
@media(max-width:700px){
  .cmp-query{font-size:15px}
  .ctable{display:none!important}
  .cmp-mobile{display:grid;gap:14px;margin-top:20px}
  .cmp-card{background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:18px}
  .cmp-card.pick{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
  .cmp-card .pill{margin-bottom:10px}
  .cmp-card dl{margin:14px 0 0;display:grid;gap:0}
  .cmp-card dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
  .cmp-card dt{color:var(--muted)}.cmp-card dd{margin:0;text-align:right;font-weight:550}
  .cmp-card .fitrow{padding:12px 0 2px}
  .cmp-card .fitrow .val{display:flex;align-items:baseline;gap:4px;font-size:22px;font-weight:650}
  .cmp-card .fitrow .val small{font-size:13px;font-weight:400;color:var(--muted)}
  .cmp-card .fitrow .bar{min-width:0;margin:6px 0}
  .cmp-card .fitrow .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
  .cmp-card dl div.stack{flex-direction:column;gap:6px}
  .cmp-card dl div.stack dd{text-align:left;font-weight:400}
  .cmp-card .txt{font-size:14.5px;color:var(--ink-2)}
  .cmp-card .val small{font-size:13px;font-weight:400;color:var(--muted);margin-left:4px}
  .cmp-card .bar{min-width:0;margin-top:6px}
  .cmp-card .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .cmp-card .acts .btn{padding-inline:8px;font-size:14px}
  .wid-grid{grid-template-columns:1fr}
  .wid-lead{font-size:17px}
  .compare-ctl .btn-sm{padding-inline:10px}
}
.top.skel{overflow:hidden}
.top.skel .top-main>div{min-width:0}
.ctable .last .sk-btn+.sk-btn{margin-top:8px}
@media(max-width:700px){.top.skel .top-side{display:none}.top.skel .top-main>div{grid-column:2}}
/* explore.js autosize() gives the phone goal box at least 56px; start there so the page does not jump when it runs. */
@media(max-width:700px){html:not(.in-search) .goal textarea{min-height:56px}}

/* site-polish-1005: hover/tap tooltips for installs and Edge signal, the signal breakdown,
   the pinned SKILL.md note and a designed fallback when no SKILL.md can be shown. */
.tip{position:relative;cursor:help;z-index:2;border-radius:6px;outline-offset:2px}
.tip:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:260px;padding:8px 11px;border-radius:9px;background:var(--black);color:var(--paper);font-size:12.5px;font-weight:500;line-height:1.4;letter-spacing:0;white-space:normal;text-align:left;pointer-events:none;display:none;animation:pop .15s ease-out;z-index:20}
.tip:hover:after,.tip:focus:after,.tip:focus-visible:after{display:block}
.source-list .tip:after,.col-inst .tip:after,.col-bar .tip:after{left:auto;right:0;transform:none}
.card .tip,.skill-card .tip{display:inline-flex;align-items:center;gap:5px}
.source-list dd small{color:var(--muted);font-weight:500}
.dd-sub{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}
.source-list .signal-row{flex-wrap:wrap}
.source-list .info{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:4px;border-radius:50%;border:1px solid var(--line);font-size:11px;font-weight:650;color:var(--muted);text-decoration:none;vertical-align:1px}
.source-list .info:hover{color:var(--blue-ink);border-color:currentColor}
.signal-parts{flex-basis:100%;list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.signal-parts li{display:grid;grid-template-columns:1fr 70px 34px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.signal-parts li small{opacity:.8}
.signal-parts i{display:block;height:6px;border-radius:9px;background:var(--soft);overflow:hidden}
.signal-parts b{display:block;height:100%;border-radius:9px;background:var(--blue,#154cff)}
.signal-parts em{font-style:normal;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink-2)}
.md-pin{margin:0 0 10px}.md-pin code{font-size:12px;padding:1px 5px;border-radius:5px;background:var(--soft)}
.md-missing{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:14px;background:var(--soft);border:1px solid var(--line)}
.md-missing-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--wash);color:var(--blue-ink)}
.md-missing-ico .i{width:20px;height:20px}
.md-missing h3{margin:2px 0 6px;font-size:16px}
.md-missing p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.5;max-width:56ch}
.md-missing .acts-row{display:flex;flex-wrap:wrap;gap:8px}