/* Grok Bot Skills and Plugins hub + starter packs (preview). Uses only the site's v6 variables. */
.gh-page .gh-hero{padding-bottom:36px}
.gh-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;max-width:900px}
.gh-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:16.5px;font-weight:650;border:1.5px solid color-mix(in srgb,var(--c,var(--blue)) 40%,transparent);box-shadow:0 1px 0 rgba(10,11,13,.04);transition:transform .15s var(--ease),background .15s}
.gh-chip svg{width:18px;height:18px;color:var(--c,var(--blue))}
.gh-chip:hover{transform:translateY(-2px);background:var(--ct,#fff)}
.gh-hero .trust{margin-top:20px}
/* how it works */
.gh-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:28px}
.gh-mini{background:#fff;border-radius:20px;padding:22px 24px;box-shadow:0 0 0 1px var(--line)}
.gh-mini b{display:block;font-size:19px;color:var(--ink);margin-bottom:8px}
.gh-mini p{margin:0;font-size:17px;line-height:1.5;color:var(--text)}
.gh-steps-box{background:#fff;border-radius:22px;padding:26px 28px;box-shadow:0 0 0 1px var(--line);max-width:900px}
.gh-steps-box h3{margin:0 0 14px;font-size:22px;color:var(--ink)}
.gh-steps{margin:0;padding:0;list-style:none;counter-reset:gs;display:grid;gap:10px}
.gh-steps li{counter-increment:gs;position:relative;padding-left:40px;font-size:17px;line-height:1.5;color:var(--text)}
.gh-steps li::before{content:counter(gs);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;background:var(--ct,var(--blue-t));color:var(--c,var(--blue-d));font-weight:750;font-size:15px;display:grid;place-items:center}
.gh-steps b{color:var(--ink)}
.gh-or{margin:18px 0 10px;font-size:17px;line-height:1.5}
.gh-fine{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--mute)}
.gh-fine a,.gh-src a,.gh-dir a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.gh-legend{margin-top:26px;max-width:900px}
.gh-legend p{margin:0 0 10px;font-size:16.5px;line-height:1.55;color:var(--text)}
.gh-legend .gh-tier{margin-right:8px}
/* tier badges */
.gh-tier{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:700;border:1.5px solid transparent;white-space:nowrap}
.gh-tier-docs{background:#E6F5EC;color:#105E32;border-color:#9ED3B3}
.gh-tier-list{background:#EAF0FF;color:#0E3FC4;border-color:#B5C8FA}
.gh-tier-built{background:#F1EBFF;color:#5530B5;border-color:#CBB9F5}
/* groups */
.gh-gic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--ct);color:var(--c);margin-right:12px;vertical-align:middle}
.gh-gic svg{width:24px;height:24px}
.gh-count{display:inline-block;margin-left:6px;padding:2px 12px;border-radius:999px;background:var(--ct);color:var(--c);font-size:17px;font-weight:700;vertical-align:middle}
.gh-group .sec-head h2{display:flex;align-items:center;flex-wrap:wrap}
.gh-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch}
@media (min-width:1000px){.gh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gh-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:24px 26px 22px 34px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.gh-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.gh-card:target{box-shadow:0 0 0 3px var(--c)}
.gh-card-top{display:flex;align-items:center;gap:16px}
.gh-tile{flex:none;width:56px;height:56px;border-radius:16px;background:var(--ct);color:var(--c);display:grid;place-items:center}
.gh-tile svg{width:28px;height:28px}
.gh-tile-lg{width:72px;height:72px;border-radius:20px}.gh-tile-lg svg{width:36px;height:36px}
.gh-name{margin:0 0 6px;font-size:23px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.gh-line{margin:0;font-size:18.5px;line-height:1.45;color:var(--ink)}
.gh-who,.gh-note{margin:0;font-size:16.5px;line-height:1.5;color:var(--text)}
.gh-who b,.gh-note b,.gh-src b,.gh-dir b{color:var(--ink)}
.gh-how{background:var(--gray);border-radius:16px;padding:16px 18px}
.gh-h{margin:0 0 10px;font-size:15px;font-weight:750;letter-spacing:.02em;text-transform:uppercase;color:var(--mute)}
.gh-how .gh-steps li{font-size:16.5px}
.gh-src,.gh-dir{margin:0;font-size:15px;line-height:1.6;color:var(--mute)}
.gh-src a+a::before{content:"";}
.gh-src a{margin-right:12px;display:inline-block}
/* copy box */
.gh-say{display:flex;align-items:center;gap:12px;margin-top:14px;padding:8px 8px 8px 16px;border-radius:14px;background:#0B1B33;color:#fff}
.gh-say code{flex:1;min-width:0;font:600 15.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff;background:none;padding:0;word-break:break-word}
.gh-copybtn{flex:none;min-height:40px;padding:0 18px;border:0;border-radius:10px;background:#fff;color:var(--ink);font:700 15px/1 inherit;font-family:inherit;cursor:pointer;transition:background .15s}
.gh-copybtn:hover{background:#E3EBFF}
.gh-copybtn.is-done{background:#9ED3B3;color:#0B3A1F}
.gh-say-big{align-items:flex-start;padding:20px 20px 20px 24px;flex-direction:column;gap:16px;max-width:900px;border-radius:20px}
.gh-say-big pre{margin:0;width:100%;white-space:pre-wrap;word-break:break-word;font:500 16.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff}
.gh-say-big .gh-copybtn{min-height:48px;padding:0 24px;font-size:16.5px}
/* notes */
.gh-warn{padding:18px 22px;border-radius:18px;background:#FFF3D1;border:1.5px solid #EBCB78;color:#4A2C00;font-size:17px;line-height:1.55;max-width:900px}
.gh-warn b{color:#4A2C00}
.gh-warn .gh-fine{display:block;margin-top:8px;color:#7A4700}
.gh-left{margin:22px 0 0;padding-left:22px;max-width:900px;font-size:17px;line-height:1.55;color:var(--text)}
.gh-left li{margin:0 0 8px}
.gh-checks{margin:18px 0 22px}
/* starter pack */
.gh-feature{display:flex;gap:24px;align-items:flex-start;padding:28px 30px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--line);max-width:960px;position:relative;overflow:hidden}
.gh-feature::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.gh-bul{margin:14px 0 0;padding-left:22px;font-size:17.5px;line-height:1.55;color:var(--text);max-width:760px}
.gh-bul li{margin:0 0 8px}
.gh-tight{margin-top:20px}
.gh-hours{margin:16px 0 0;padding:12px 16px;border-radius:12px;background:var(--gray);font-size:16.5px;color:var(--ink)}
.gh-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:18px 0 0}
.gh-links a:not(.pill){font-weight:600;text-decoration:underline;text-underline-offset:2px}
.gh-needs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gh-need a{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;height:100%;padding:18px 22px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink);transition:transform .15s var(--ease),box-shadow .15s}
.gh-need a:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--blue),0 10px 24px rgba(10,11,13,.07)}
.gh-need b{font-size:19px}.gh-need span{grid-column:1;font-size:16px;line-height:1.45;color:var(--text)}
.gh-need i{grid-row:1 / span 2;grid-column:2;font-style:normal;font-size:22px;color:var(--blue)}
.gh-need em{margin-left:8px;font-style:normal;font-size:13px;font-weight:700;color:var(--mute);padding:2px 8px;border-radius:999px;background:var(--gray)}
.gh-bigsteps{margin:0;padding:0;list-style:none;counter-reset:bs;display:grid;gap:14px;max-width:900px}
.gh-bigsteps li{counter-increment:bs;position:relative;padding:18px 22px 18px 76px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:17.5px;line-height:1.55;color:var(--text)}
.gh-bigsteps li::before{content:counter(bs);position:absolute;left:20px;top:16px;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-weight:750;font-size:18px;display:grid;place-items:center}
.gh-bigsteps b{color:var(--ink)}
.gh-sheet{margin-top:28px;max-width:900px}
.gh-cols{display:flex;flex-wrap:wrap;gap:0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.gh-cols span{flex:1 1 120px;padding:12px 14px;background:#E6F5EC;color:#105E32;font-weight:700;font-size:16px;border-right:1px solid #fff}
.gh-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.gh-two h2{font-size:30px;margin:0}
.gh-links2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:1000px}
.gh-link{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink);transition:transform .15s var(--ease),box-shadow .15s}
.gh-link:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--blue)}
.gh-link b{font-size:19px}.gh-link span{font-size:16px;line-height:1.45;color:var(--text)}
.gh-page .lib-unofficial{margin:0}
@media (max-width:999px){.gh-three{grid-template-columns:1fr}.gh-two{grid-template-columns:1fr;gap:28px}}
@media (max-width:720px){
 .gh-needs{grid-template-columns:1fr}
 .gh-card{padding:20px 18px 18px 24px}
 .gh-name{font-size:21px}
 .gh-feature{flex-direction:column;padding:22px 20px 22px 24px;gap:16px}
 .gh-bigsteps li{padding:16px 16px 16px 62px}
 .gh-bigsteps li::before{left:14px;top:14px;width:34px;height:34px;font-size:16px}
 .gh-say{flex-direction:column;align-items:stretch;padding:12px}
 .gh-say .gh-copybtn{width:100%}
 .gh-steps-box{padding:20px 18px}
 .gh-gic{width:38px;height:38px;margin-right:10px}
 .gh-jump{gap:8px;justify-content:flex-start}
 .gh-chip{font-size:15.5px;min-height:42px}
 .gh-two h2{font-size:26px}
}
.gh-chip{text-decoration:none}
.gh-howgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.gh-howgrid .gh-steps-box,.gh-howgrid .gh-legend{max-width:none;margin:0}
.gh-legend{background:#fff;border-radius:22px;padding:24px 26px;box-shadow:0 0 0 1px var(--line)}
@media (max-width:999px){.gh-howgrid{grid-template-columns:1fr}}
.gh-hero .hero-text{align-items:flex-start;text-align:left}
.gh-hero .gh-jump{justify-content:flex-start}
/* ---- explainer + prompt library ---- */
.gh-ph{background:#FFE9A8;color:#5a3d00;border-radius:6px;padding:0 4px;font-weight:700}
.gh-say-big .gh-ph{background:rgba(255,214,102,.22);color:#FFD666}
.gh-mini .gh-ph{font-size:inherit}
.gh-pgrid{align-items:start}
.gh-pcard .gh-say-big{max-width:none}
.gh-pcard .gh-say-big pre{font-size:15px;line-height:1.6}
.gh-twocopy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px;align-items:start}
.gh-twocopy .gh-say-big{max-width:none;margin-top:8px}
.gh-twocopy .gh-say-big pre{font-size:15px}
.gh-quote{background:#fff;border-radius:20px;padding:22px 26px;box-shadow:0 0 0 1px var(--line);max-width:900px;margin-bottom:22px}
.gh-quote blockquote{margin:6px 0 10px;padding-left:16px;border-left:4px solid var(--blue);font-size:18px;line-height:1.55;color:var(--ink)}
.gh-rows{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px;max-width:900px}
.gh-rows li{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:6px 18px;align-items:start;background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 0 0 1px var(--line)}
.gh-rows b{font-size:17px;color:var(--ink)}
.gh-rowtext{font-size:16px;line-height:1.5;color:var(--text)}
.gh-tag{white-space:nowrap;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}
.gh-tag-said{background:#e3f4e8;color:#14532d}.gh-tag-open{background:#e6edff;color:#1d3fa8}.gh-tag-guess{background:#fff0d6;color:#7a4a00}.gh-tag-ours{background:#efe6ff;color:#4b2a9a}
.gh-faqgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gh-q{background:#fff;border-radius:18px;padding:20px 22px;box-shadow:0 0 0 1px var(--line)}
.gh-q h3{font-size:19px;margin:0 0 8px;color:var(--ink)}
.gh-q p{margin:0;font-size:16.5px;line-height:1.55;color:var(--text)}
@media (max-width:860px){.gh-twocopy,.gh-faqgrid{grid-template-columns:1fr}
 .gh-rows li{grid-template-columns:1fr}.gh-tag{justify-self:start}}