/* Grok Bot Shelf. X styling: Lights out dark by default, X light via data-theme. */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --blue:#1d9bf0; --blue-h:#1a8cd8;
  --btn-blue:#1270c4; --btn-blue-h:#0f5fa8; /* white text on these passes 4.5:1 */
    --bg:#000; --text:#e7e9ea; --text2:#71767b; --line:#2f3336; --line2:#536471; --hover:#16181c; --field:#202327;
    --menu:#16181c; --mark:rgba(29,155,240,.28);
    --pill:#eff3f4; --pill-ink:#0f1419; --pill-h:#d7dbdc;
    --head:rgba(0,0,0,.65);
}
html[data-theme="light"]{
  --bg:#fff; --text:#0f1419; --text2:#536471; --line:#eff3f4; --line2:#cfd9de; --hover:#f7f9f9; --field:#eff3f4;
  --menu:#fff; --blue:#1d9bf0; --blue-h:#1a8cd8; --mark:rgba(29,155,240,.18);
  --pill:#0f1419; --pill-ink:#fff; --pill-h:#272c30;
  --head:rgba(255,255,255,.85);
}
:root{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html,body{background:var(--bg);overscroll-behavior-y:auto}
html.theme-switching,html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:ease}
*,*::before,*::after{box-sizing:border-box}
/* Clear the sticky .dock (search row + filter row + safe area); --dock-h is measured in app.js */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--dock-h,calc(106px + env(safe-area-inset-top))) + 12px)}
/* While jumping to #add, render every card so content-visibility estimates don't shorten the page */
html.jumping .card{content-visibility:visible}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.4 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
:focus-visible{outline:none}
:where(a,button,select,.card):focus-visible{box-shadow:0 0 0 2px var(--blue)}

/* Hero: title and add link */
.hero{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;column-gap:16px;row-gap:6px;padding-top:max(28px,env(safe-area-inset-top));padding-bottom:20px}
.affil{flex:1 0 100%;margin:0;font-size:12px;font-weight:400;letter-spacing:0;color:var(--text2);line-height:1.35}
h1{display:flex;align-items:center;gap:12px;margin:0;white-space:nowrap;min-width:0;font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
/* Shelf mark: three bars, static. Color follows the title. */
.mark{display:block;flex:none;width:36px;height:36px;color:var(--text)}
.hero-actions{display:flex;align-items:center;gap:8px;flex:none}
.theme-btn{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border-radius:9999px;border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;transition:background .2s}
.theme-btn:hover{background:var(--hover)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .sun{display:none}
html[data-theme="light"] .theme-btn .sun{display:block}
html[data-theme="light"] .theme-btn .moon{display:none}

/* Sticky header with search, the only translucent surface */
.dock{position:sticky;top:0;z-index:20;padding:max(8px,env(safe-area-inset-top)) 0 8px;background:var(--head);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.dock{background:var(--bg)}}
.capsule{display:flex;align-items:center;height:44px;border-radius:9999px;background:var(--field);border:1px solid transparent;padding:0 4px 0 16px;transition:border-color .15s,background .15s}
.capsule:focus-within{background:var(--bg);border-color:var(--blue)}
.capsule:focus-within .i-search{stroke:var(--blue)}
.i-search{width:18px;height:18px;flex:none;fill:none;stroke:var(--text2);stroke-width:2.2;stroke-linecap:round}
#q{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--text);font:inherit;font-size:15px;padding:0 12px;outline:none}
#q::placeholder{color:var(--text2)}
#q::-webkit-search-cancel-button{-webkit-appearance:none}
.hint{font:500 12px/1 var(--font);color:var(--text2);border:1px solid var(--line);border-radius:6px;padding:4px 6px;margin-right:8px}
@media (hover:none){.hint{display:none}}
.divider{width:1px;height:20px;background:var(--line);flex:none}
.sortwrap{position:relative;flex:none}
#sort{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--text);font:700 14px var(--font);height:36px;padding:0 30px 0 12px;border-radius:9999px;cursor:pointer}
#sort:hover{background:var(--hover)}
#sort option{background:#fff;color:#111}
.sortwrap svg{position:absolute;right:10px;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:var(--text2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* Filters: creator + category dropdowns in the dock */
.filterbar{display:flex;gap:8px;margin-top:8px}
.selwrap{position:relative;flex:1 1 0;min-width:0}
.selwrap select{appearance:none;-webkit-appearance:none;width:100%;height:36px;border:1px solid transparent;border-radius:9999px;background:var(--field);color:var(--text);font:700 14px var(--font);padding:0 32px 0 14px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:border-color .15s,background .15s}
.selwrap select:hover{background:var(--hover)}
.selwrap select:focus-visible{outline:none;border-color:var(--blue);background:var(--bg)}
.selwrap select.on{border-color:var(--line2)}
.selwrap select option,.selwrap select optgroup{background:#fff;color:#111;font-weight:400} /* Android native pickers ignore dark option colors; keep options dark-on-white */
.selwrap svg{position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:var(--text2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
@media (min-width:700px){.selwrap{flex:0 1 260px}}
.status{display:flex;align-items:center;gap:12px;min-height:36px;margin:8px 0 4px}
.count{margin:0;font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums}
/* Reset keeps its space while hidden (visibility, not display) so showing it never moves anything */
.reset{visibility:hidden;min-height:36px;border:0;background:none;color:var(--blue);font:700 13px var(--font);padding:6px 12px;border-radius:9999px;cursor:pointer}
.reset.on{visibility:visible}
.reset:hover{background:var(--mark)}
html[data-theme="light"] .reset{color:var(--btn-blue)}
.count:focus{outline:none}
.fb-link{margin-left:auto;padding:6px 4px;font-size:13px;color:var(--text2);text-decoration:none;border-radius:6px}
.fb-link:hover{color:var(--blue);text-decoration:underline}
@media (max-width:699px){.status{min-height:44px;gap:4px}.reset{min-height:44px;min-width:44px}.fb-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}}

/* Groups and cards */
.group{margin:16px 0 36px}
.group .more{display:flex;width:fit-content;height:44px;margin:14px auto 0;padding:0 22px}
.ghead{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.ghead img{width:40px;height:40px;border-radius:50%;flex:none}
.ghead h2{display:flex;align-items:baseline;gap:5px;margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;min-width:0;white-space:nowrap}
.ghead h2 .nm,.ghead h2 .handle{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ghead h2 .handle{flex:0 1000 auto}
.ghead h2 .gn{flex:none}
.ghead .handle,.ghead .gn{font-size:15px;font-weight:400;color:var(--text2);text-decoration:none}
.ghead .handle:hover{text-decoration:underline}
.ghead .plink{flex:none;width:auto;min-width:34px;padding:0 8px;gap:6px;grid-auto-flow:column}
.ghead .plink .ok{display:none;font-size:13px;font-weight:600;color:var(--blue)}
.ghead .plink.done svg{display:none}.ghead .plink.done .ok{display:inline}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.flat{margin-top:16px;margin-bottom:36px}
.card{display:flex;flex-direction:column;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--bg);outline:none;transition:background .2s;content-visibility:auto;contain-intrinsic-size:auto 200px}
.card:hover{background:var(--hover)}
.card.active,.card:focus-visible{box-shadow:0 0 0 2px var(--blue)}
.card.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,40%{background:var(--mark);box-shadow:0 0 0 2px var(--blue)}}
.head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.icon{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:22px;line-height:1;border:1px solid var(--line)}
.card h3{margin:0;font-size:15px;font-weight:700;line-height:1.3}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.sub{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden}
.sub img{width:16px;height:16px;border-radius:50%;flex:none}
.desc{margin:0 0 14px;font-size:15px;line-height:1.4;color:var(--text);flex:1}
mark{background:var(--mark);color:inherit;border-radius:3px}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tools{display:flex;gap:2px;margin-left:-8px}
.ib{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9999px;border:0;background:none;color:var(--text2);cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.ib:hover{background:var(--mark);color:var(--blue)}
.ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ib svg.fill{fill:currentColor;stroke:none;width:15px;height:15px}
.get,.btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border:0;border-radius:9999px;background:var(--pill);color:var(--pill-ink);font:700 14px var(--font);text-decoration:none;cursor:pointer;transition:background .15s}
.get:hover,.btn:hover{background:var(--pill-h)}

/* Empty, add, toast */
.empty{text-align:center;padding:48px 16px;margin:16px 0 36px;border:1px solid var(--line);border-radius:16px}
.empty-t{margin:0 0 4px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.empty-s{margin:0 0 16px;color:var(--text2)}
/* Hold the results area open until the first render so #add starts below the fold (no layout shift) */
#results[aria-busy="true"]{min-height:100vh}
.add{scroll-margin-top:8px;border:1px solid var(--line);border-radius:16px;padding:20px;margin:8px 0 max(48px,env(safe-area-inset-bottom));max-width:640px}
.add h2{margin:0 0 6px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.add p{margin:0 0 16px;color:var(--text2);line-height:1.45;overflow-wrap:anywhere}
.add p a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.btn.post{background:var(--btn-blue);color:#fff;height:36px}
.hero-actions .btn{height:36px}
.btn.ghost{background:transparent;color:var(--text2);border:1px solid var(--line2);font-weight:600}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn.post:hover{background:var(--btn-blue-h)}
.btn.post svg{width:14px;height:14px;fill:currentColor}
.add .btn{height:36px}
.add-shelfer{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 14px;color:var(--text2);font-size:14px;line-height:1.45}
.add-shelfer .btn{flex:none}
.add-shelfer span{flex:1 1 260px;min-width:0;text-wrap:balance}
@media (max-width:640px){.add-shelfer{flex-direction:column;align-items:flex-start;gap:10px}.add-shelfer span{flex:none}}
.sub-form label:not(:first-child){margin-top:6px}
.sub-form .row{margin-top:4px}
.add .fine{margin:16px 0 0;font-size:13px;color:var(--text2)}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:50;padding:12px 16px;border-radius:4px;background:var(--blue);color:#fff;font-size:15px;
  box-shadow:0 0 15px rgba(101,119,134,.2),0 0 3px 1px rgba(101,119,134,.15);transform:translate(-50%,16px);opacity:0;transition:transform .2s,opacity .2s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast{width:max-content;max-width:min(520px,calc(100vw - 32px));text-align:center}
@media (max-width:640px){.grid{grid-template-columns:1fr}.hero{column-gap:10px}.hero h1{font-size:26px;gap:9px}.hero .mark{width:34px;height:34px}}
/* Phones: keep title + actions on one row (title left, actions right) instead of wrapping the actions under the title */
@media (max-width:480px){.hero{column-gap:8px}.hero-actions{gap:6px}.hero-actions .btn{height:32px;padding:0 10px;font-size:13px}.hero-actions .theme-btn{width:32px;height:32px}}
@media (max-width:400px){.add-top .opt{display:none}}
@media (max-width:380px){.hero{column-gap:6px}.hero h1{font-size:24px;gap:8px}.hero .mark{width:31px;height:31px}.hero-actions{gap:4px}.hero-actions .btn{padding:0 9px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Site footer */
/* Static catalog in the homepage HTML. Closed by default so the card grid stays the shelf.
   Links remain in the DOM (crawlers do not need JavaScript, and app.js does not replace this node). */
.crawl{margin:28px 0 12px}
.crawl summary{cursor:pointer;color:var(--text2);font-size:13px;font-weight:700}
.crawl summary:hover{color:var(--text)}
.crawl-h{margin:14px 0 0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2)}
.crawl nav{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.crawl a{font-size:13px;color:var(--text2);text-decoration:none}
.crawl a:hover{color:var(--blue);text-decoration:underline}
.site-foot{padding:8px 0 max(32px,env(safe-area-inset-bottom));border-top:1px solid var(--line);margin-top:8px}
.site-foot p{margin:0;font-size:12px;line-height:1.4;color:var(--text2);text-align:center}
.site-foot p.by{margin-top:4px}
.site-foot a{color:var(--text2);text-decoration:none}
.site-foot a:hover{color:var(--blue);text-decoration:underline}

/* From the builders strip: a quiet panel, founder handles with an obvious "All N bots" pill */
.builders{margin:16px 0 36px;padding:18px 18px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(29,155,240,.045)}
.bhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 16px}
.bhead h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.bsub{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0;font-size:15px;color:var(--text2)}
.bsub .who{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.bsub .who img{width:24px;height:24px;border-radius:50%;flex:none}
.bsub a{text-decoration:none}
.bsub a.h{color:var(--text);font-weight:700}
.bsub a.h:hover{color:var(--blue);text-decoration:underline}
.bsub a.all{display:inline-block;padding:5px 12px;font-size:13px;font-weight:700;color:#fff;background:var(--btn-blue);border:1px solid var(--btn-blue);border-radius:999px;line-height:1.3}
.bsub a.all:hover{background:var(--btn-blue-h);border-color:var(--btn-blue-h);text-decoration:none}
.bsub a.all:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:640px){.builders{padding:14px 12px 16px;border-radius:14px}.bhead h2{font-size:19px}.builders .grid>:nth-child(n+4){display:none}}

/* Top voted strip: sits under the builders panel, outlined (no tint) and a step smaller so builders stay primary */
.topvotes{margin:0 0 36px;padding:14px 16px 16px;border:1px solid var(--line);border-radius:16px}
.builders+.topvotes{margin-top:-20px}
.thead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:0 0 10px}
.thead h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.thead .tall{font-size:14px;font-weight:600;color:var(--blue);text-decoration:none}
.thead .tall:hover{text-decoration:underline}
.tlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}
.tlist a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;color:var(--text);text-decoration:none;min-width:0}
.tlist a:hover{background:var(--hover)}
.tlist .rk{flex:none;width:18px;font-size:13px;font-weight:800;color:var(--text2);text-align:center;font-variant-numeric:tabular-nums}
.tlist .em{flex:none;font-size:20px;line-height:1}
.tlist .nm{flex:1;min-width:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlist .nm small{display:block;font-size:12px;font-weight:500;color:var(--text2);overflow:hidden;text-overflow:ellipsis}
.tlist .sc{flex:none;display:inline-flex;align-items:center;gap:2px;padding:3px 9px 3px 6px;border-radius:999px;font-size:13px;font-weight:800;color:var(--blue);background:var(--mark);font-variant-numeric:tabular-nums}
.tlist .sc svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.tlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tlist{grid-template-columns:1fr}.topvotes{padding:12px 10px 12px;border-radius:14px}}

/* Up / down votes: quiet arrows and a net score */
.foot-row{flex-wrap:wrap;row-gap:6px}
.vote{display:inline-flex;align-items:center;margin-right:2px}
.vote .vb{width:30px;height:34px}
.vote .vb svg{width:17px;height:17px;stroke-width:2}
.vote .vn{min-width:18px;padding:0 1px;font-size:13px;font-weight:600;color:var(--text2);text-align:center;font-variant-numeric:tabular-nums}
.vote .up[aria-pressed="true"]{color:var(--blue)}
.vote .dn[aria-pressed="true"]{color:#f4212e}
.vote .dn:hover{background:rgba(244,33,46,.12);color:#f4212e}

/* Add to Bot app: small icon on desktop, full-width primary on phones (html.mobile set in <head>) */
.gets{display:flex;align-items:center;gap:4px;margin-left:auto}
.foot-row{flex-wrap:wrap;row-gap:8px}
.card .app{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9999px;color:var(--text2);text-decoration:none;transition:background .15s,color .15s}
.card .app:hover{background:var(--mark);color:var(--blue)}
.card .app svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card .app .t{display:none}
html.mobile .card .gets{width:100%;margin-left:0}
html.mobile .card .app{flex:1;display:inline-flex;justify-content:center;gap:6px;width:auto;background:var(--btn-blue);color:#fff;font:700 14px var(--font)}
html.mobile .card .app .t{display:inline}
html.mobile .card .app:hover{background:var(--btn-blue-h);color:#fff}
html.mobile .card .gets .get{background:transparent;color:var(--text);border:1px solid var(--line2);padding:0 14px}
.app.big,.bp-actions .app{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line2);border-radius:9999px;color:var(--text);font:700 15px var(--font);text-decoration:none}
.bp-actions .app:hover{background:var(--hover)}
html.mobile .bp-actions .app{background:var(--btn-blue);border-color:var(--btn-blue);color:#fff}

/* Badges: agency + works with */
.badges{display:flex;flex-wrap:wrap;gap:4px;margin:-6px 0 12px}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:9999px;border:1px solid var(--line);color:var(--text2);font:600 12px/1 var(--font);white-space:nowrap}
.badge.ag-acts{border-color:rgba(249,24,128,.45);color:#f91880}
.badge.ag-drafts{border-color:rgba(255,212,0,.45);color:#d4a500}
.badge.ag-reads{border-color:rgba(0,186,124,.45);color:#00ba7c}
.sub .bm{display:inline-flex;align-items:center;gap:3px}
.sub .bm svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}

/* Extra filters */
.filterbar{align-items:center}
.chip{flex:none;height:36px;padding:0 14px;border:1px solid transparent;border-radius:9999px;background:var(--field);color:var(--text);font:700 14px var(--font);cursor:pointer;white-space:nowrap}
.chip:hover{background:var(--hover)}
.chip[aria-pressed="true"]{border-color:var(--blue);color:var(--blue)}
@media (max-width:699px){.filterbar{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:-16px;margin-right:-16px;padding:0 16px}.filterbar::-webkit-scrollbar{display:none}.selwrap{flex:0 0 auto;min-width:140px;max-width:180px}
  .filterbar .selwrap select,.filterbar .chip{height:44px}.filterbar::after{content:"";flex:0 0 32px}}
/* Phones: the filter row scrolls sideways, so a right-edge fade and arrow show there is more (hidden at the end) */
.fb-more{display:none}
@media (max-width:699px){
  .dock .wrap{position:relative}
  .fb-more{display:grid;place-items:center end;position:absolute;right:0;bottom:0;width:64px;height:44px;padding:0 10px 0 0;border:0;background:linear-gradient(to right,transparent,var(--bg) 60%);color:var(--text);cursor:pointer;transition:opacity .15s}
  .fb-more svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .dock.fb-end .fb-more{opacity:0;pointer-events:none}
}
@media (min-width:700px){.selwrap.sm{flex:0 1 180px}}
.meta-note{margin:4px 0 0;font-size:12px;color:var(--text2)}

/* Submit form */
.sub-form{display:grid;gap:10px;margin:0 0 16px}
.sub-form label{font-size:13px;font-weight:700;color:var(--text)}
.sub-form input,.sub-form textarea{width:100%;box-sizing:border-box;height:40px;border:1px solid var(--line2);border-radius:10px;background:var(--bg);color:var(--text);font:400 15px var(--font);padding:0 12px}
.sub-form textarea{height:64px;padding:10px 12px;resize:vertical}
.sub-form input:focus,.sub-form textarea:focus{outline:none;border-color:var(--blue)}
.sub-form .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sub-msg{margin:0;font-size:14px;color:var(--text2)}
.sub-msg.ok{color:#00ba7c}.sub-msg.err{color:#f4212e}
/* "Already on the shelf" line under the template link: its height is reserved so nothing below moves when it fills */
/* With no message (or only the screen-reader text for the check) the line is out of the grid: no row, no gap,
   the form looks exactly as before. It takes space only while it shows a message. */
.sub-form .sub-dupe{position:absolute;margin:0;font-size:14px;line-height:20px;color:var(--text2)}
.sub-form .sub-dupe.dupe-hit,.sub-form .sub-dupe.dupe-sent,.sub-form .sub-dupe.dupe-hint{position:static;margin-top:-4px}
.sub-form .sub-dupe a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.sub-form .sub-dupe.dupe-hit{color:var(--text)}
/* Green check inside the template field: a valid template link that is not on the shelf yet (the text is in #sub-dupe for screen readers) */
.sub-bot-wrap{position:relative}
.sub-form .sub-bot-wrap input{padding-right:38px}
.sub-ok{position:absolute;right:12px;top:50%;margin-top:-9px;fill:#00ba7c;visibility:hidden;pointer-events:none}
.sub-ok.on{visibility:visible}
html[data-theme="light"] .sub-ok{fill:#00805a}
.or{margin:4px 0 12px!important;font-size:13px}

/* Per-bot page */
.home{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text);text-decoration:none}
.bp{max-width:720px}
.bp-card{border:1px solid var(--line);border-radius:16px;padding:20px;margin:8px 0 24px}
.bp-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.icon.big{width:56px;height:56px;font-size:30px;border-radius:14px}
.bp h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.bp .sub{flex-wrap:wrap;white-space:normal}
.bp .sub a{color:var(--text2);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.bp .sub a:hover{text-decoration:underline}
.bp-desc{margin:0 0 16px;font-size:17px;line-height:1.45}
.bp .badges{margin:0 0 16px}
.bp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.bp-actions .get,.bp-actions .app{height:40px;padding:0 18px;font-size:15px}
/* Bot page vote: outlined pill next to the get buttons, same arrows and colors as the cards */
.bp-actions .bp-vote{display:inline-flex;align-items:center;height:40px;padding:0 3px;margin:0;border:1px solid var(--line2);border-radius:9999px}
.bp-vote .vb{width:34px;height:34px}
.bp-vote .vn{min-width:22px;font-size:15px;font-weight:700;color:var(--text)}
html.mobile .bp-actions{flex-direction:column}
html.mobile .bp-actions .app{order:-1;justify-content:center}
html.mobile .bp-actions .get{justify-content:center;background:transparent;color:var(--text);border:1px solid var(--line2)}
.bp-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font-size:14px}
.bp-links a{color:var(--blue);text-decoration:none}
.bp-links a:hover{text-decoration:underline}
.bp .fine{margin:14px 0 0;font-size:12px;color:var(--text2)}
.bp-more h2{font-size:17px;margin:0 0 10px}
.bp-more ul{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.bp-more a{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.bp-more a:hover{background:var(--hover)}

/* Bot page: under the hood, similar bots, featured badge. Creator pages reuse .bp-card and .bp-more */
.bp-panel,.bp-embed{border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:0 0 24px}
.bp-panel h2,.bp-embed h2{font-size:17px;margin:0 0 10px}
.bp-panel dl{margin:0}
.bp-panel dl>div{display:grid;grid-template-columns:180px 1fr;gap:4px 16px;padding:10px 0;border-top:1px solid var(--line)}
.bp-panel dt{font-size:14px;font-weight:700}
.bp-panel dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:14px;line-height:1.4}
.bp-panel .nl{color:var(--text2)}
@media (max-width:560px){.bp-panel dl>div{grid-template-columns:1fr}}
.bp-more a small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-list a small{white-space:normal}
.cp-av{flex:none;width:56px;height:56px;border-radius:50%;border:1px solid var(--line)}
.bp-embed .fine{margin:0 0 12px}
.em-prev{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.em-prev img{max-width:100%;height:auto}
.snip{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;overflow:hidden}
.snip-h{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 2px 12px;background:var(--hover);font-size:13px;font-weight:700;color:var(--text)}
.snip pre{margin:0;padding:10px 12px;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-all;color:var(--text)}
.bp-embed code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.bp-panel .src{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:9999px;background:var(--field);color:var(--text2);font:600 11px/1 var(--font);white-space:nowrap}
.bp-panel dd ul{list-style:none;margin:0;padding:0}

.card{cursor:pointer}

/* A-Z rail: fixed to the right edge under the dock (app.js sets top to the dock's real bottom), jumps to the first
   creator group per letter. Letters shrink to fit short screens; touch scrubbing maps finger height to letters. */
.rail{position:fixed;z-index:15;right:max(4px,env(safe-area-inset-right));top:calc(var(--dock-h,110px) + 10px);bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;width:26px;pointer-events:none}
.rail[hidden]{display:none}
.rail button{pointer-events:auto;flex:0 1 22px;min-height:0;max-height:24px;width:26px;padding:0;border:0;border-radius:9999px;background:none;color:var(--text2);font:700 11px/1 var(--font);cursor:pointer;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}
.rail button:hover{background:var(--mark);color:var(--blue)}
.rail button.on{background:var(--mark);color:var(--blue)}
.rail button:focus-visible{box-shadow:0 0 0 2px var(--blue)}
.ghead h2:focus{outline:none}
/* Letter bubble while scrubbing on touch (iOS Contacts-style) */
.rail-pop{position:fixed;z-index:16;right:calc(max(0px,env(safe-area-inset-right)) + 44px);width:56px;height:56px;margin-top:-28px;display:grid;place-items:center;border-radius:16px;background:var(--blue);color:#fff;font:800 28px/1 var(--font);box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:none}
.rail-pop[hidden]{display:none}
/* Wide screens: the rail sits in the empty margin beside the 1120px column */
@media (min-width:1200px){.rail{right:max(12px,calc((100vw - 1120px) / 2 - 44px))}}
/* Narrower screens: a thin strip on the edge; give the main column (and footer) extra right padding so cards never sit under it */
@media (max-width:1199px){html.has-rail main.wrap,html.has-rail .site-foot{padding-right:max(30px,calc(env(safe-area-inset-right) + 28px))}}
/* Phones: the visible letters stay in a 20px strip, but each button is 30px wide (reaching into the card's empty edge
   padding, never its controls) so thumbs land; the whole strip scrubs */
@media (max-width:640px){
  .rail{width:30px;right:max(0px,env(safe-area-inset-right))}
  .rail button{width:30px;padding:0 2px 0 8px;font-size:11px;touch-action:none}
  html.has-rail main.wrap,html.has-rail .site-foot{padding-right:max(24px,calc(env(safe-area-inset-right) + 22px))}
  .grid{grid-template-columns:minmax(0,1fr)}.card .ttl{min-width:0}
}
/* 500px and under: 44px tap targets for the card "Add to Bot app" link, the crawl list links and the A-Z rail. Rail
   letters spread down the strip (up to 44px each; about 26px when two dozen letters have to fit) and a ::before
   reaches 14px left so each one takes a 44px-wide tap; the highlight stays a small circle behind the letter. The column
   gets 4px more right padding so that reach never lands on card controls. */
@media (max-width:500px){
  .card .app{min-width:44px;min-height:44px}
  .crawl nav{gap:0 14px}
  .crawl a{display:inline-flex;align-items:center;min-height:44px}
  .rail button{position:relative;flex:1 1 0;max-height:44px}
  .rail button::before{content:"";position:absolute;top:0;bottom:0;left:-14px;right:0}
  .rail button:hover,.rail button.on{background:radial-gradient(circle 11px at calc(100% - 12px) 50%,var(--mark) 10.5px,transparent 11px)}
  html.has-rail main.wrap,html.has-rail .site-foot{padding-right:max(28px,calc(env(safe-area-inset-right) + 26px))}
}

/* Light mode: darker blue for text links and badge colors so they pass 4.5:1 on white */
html[data-theme="light"] :is(.clear,.thead .tall,.bp-links a,.add p a,.ghead .plink .ok,.crawl a:hover,.site-foot a:hover,.chip[aria-pressed="true"],.vote .up[aria-pressed="true"]){color:var(--btn-blue)}
/* The score badge sits on the tinted --mark fill and Copy on the grey snippet header: --btn-blue is just under 4.5:1 there */
html[data-theme="light"] :is(.tlist .sc,.snip .snip-h .clear){color:var(--btn-blue-h)}
html[data-theme="light"] .badge.ag-acts{border-color:rgba(196,16,95,.45);color:#c4105f}
html[data-theme="light"] .badge.ag-drafts{border-color:rgba(138,106,0,.45);color:#8a6a00}
html[data-theme="light"] .badge.ag-reads{border-color:rgba(0,128,90,.45);color:#00805a}
html[data-theme="light"] .sub-msg.ok{color:#00805a}

/* Card byline: long creator names truncate instead of pushing the row */
.sub>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sub>.dot,.sub>.bm{flex:none;overflow:visible}

/* Phones (html.mobile): ~40-44px tap targets */
html.mobile .ib,html.mobile .card .app{width:40px;height:40px}
html.mobile .card .app{width:auto;height:44px}
html.mobile .card .gets .get{height:44px}
html.mobile .vote .vb{width:36px;height:40px}
html.mobile .ghead .plink{min-width:40px}
html.mobile .clear{min-height:40px;padding:10px 12px}
html.mobile .tools{margin-left:-10px}
/* Bot page vote pill: full width, centered under the get buttons */
html.mobile .bp-actions .bp-vote{align-self:stretch;justify-content:center;height:44px;gap:8px}
html.mobile .bp-vote .vb{width:44px;height:40px}

/* Similar / More from tiles fill their grid cell so a row lines up */
.bp-more li{display:flex}
.bp-more li>a{flex:1;min-width:0}
/* Bot page title wraps on narrow phones instead of running off the card */
.bp h1{white-space:normal;overflow-wrap:anywhere}
.bp-head>div{min-width:0}
/* 320px phones: keep "Add to Bot app" / "Get this bot" on one line */
html.mobile .card .app,html.mobile .card .gets .get{white-space:nowrap}
@media (max-width:360px){html.mobile .card .gets .get{padding:0 10px;font-size:13px}html.mobile .card .app{gap:4px;font-size:13px;padding:0 8px}html.mobile .card .app svg{width:16px;height:16px}}

/* Shelfer first-visit sheet (public/shelfer-sheet.js). Liquid Glass: frosted, translucent, a rim highlight and soft depth.
   Bottom sheet on phones, centered card from 640px. Colors here are the sheet's own so it reads the same over any card. */
html.ss-lock,html.ss-lock body{overflow:hidden}
.ss{--ss-ink:#f5f7f8;--ss-ink2:rgba(235,240,243,.72);--ss-ink3:rgba(235,240,243,.52);--ss-glass:rgba(24,27,32,.5);--ss-hair:rgba(255,255,255,.1);--ss-rim:rgba(255,255,255,.5);--ss-well:rgba(255,255,255,.045);--ss-scrim:rgba(0,0,0,.46);--ss-eye:#8fd0ff;
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;font-family:var(--font);color:var(--ss-ink);-webkit-tap-highlight-color:transparent}
html[data-theme="light"] .ss{--ss-ink:#0f1419;--ss-ink2:rgba(15,20,25,.7);--ss-ink3:rgba(15,20,25,.5);--ss-glass:rgba(255,255,255,.56);--ss-hair:rgba(15,20,25,.08);--ss-rim:rgba(255,255,255,.95);--ss-well:rgba(255,255,255,.5);--ss-scrim:rgba(15,20,25,.2);--ss-eye:#0f6cbd}
.ss-scrim{position:absolute;inset:0;background:var(--ss-scrim);-webkit-backdrop-filter:blur(4px) saturate(115%);backdrop-filter:blur(4px) saturate(115%);opacity:0;transition:opacity .45s ease}
/* Soft color behind the glass so the frost has something to bend */
.ss-aura{position:absolute;left:50%;bottom:0;width:min(720px,140vw);height:min(560px,90vh);transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .8s ease .05s;filter:blur(48px)}
.ss-aura i{position:absolute;border-radius:50%}
.ss-aura i:nth-child(1){width:48%;height:52%;left:6%;top:30%;background:radial-gradient(closest-side,rgba(29,155,240,.55),transparent)}
.ss-aura i:nth-child(2){width:44%;height:48%;right:8%;top:18%;background:radial-gradient(closest-side,rgba(124,92,255,.42),transparent)}
.ss-aura i:nth-child(3){width:40%;height:40%;left:34%;top:55%;background:radial-gradient(closest-side,rgba(0,186,124,.26),transparent)}
html[data-theme="light"] .ss-aura{opacity:0}
html[data-theme="light"] .ss.in .ss-aura{opacity:.7}
.ss-sheet{position:relative;width:100%;max-width:460px;max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;outline:none;
  padding:8px 22px calc(18px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 42%),var(--ss-glass);
  -webkit-backdrop-filter:blur(32px) saturate(185%);backdrop-filter:blur(32px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 -1px 0 rgba(255,255,255,.04),0 -24px 70px -24px rgba(0,0,0,.65);
  transform:translateY(104%);transition:transform .56s cubic-bezier(.2,.9,.22,1)}
html[data-theme="light"] .ss-sheet{box-shadow:inset 0 1px 0 #fff,0 -20px 60px -24px rgba(15,20,25,.28)}
/* Specular sheen across the top, and a rim that catches light on the top-left and bottom-right edges */
.ss-sheet::before,.ss-sheet::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1}
.ss-sheet::before{background:radial-gradient(120% 70% at 18% -8%,rgba(255,255,255,.17),transparent 58%),radial-gradient(90% 50% at 100% 110%,rgba(29,155,240,.1),transparent 60%)}
.ss-sheet::after{padding:1px;background:linear-gradient(150deg,var(--ss-rim),rgba(255,255,255,.08) 28%,rgba(255,255,255,0) 60%,rgba(255,255,255,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ss.in .ss-scrim,.ss.in .ss-aura{opacity:1}
.ss.in .ss-sheet{transform:none}
.ss.out .ss-scrim,.ss.out .ss-aura{opacity:0;transition-duration:.3s}
.ss.out .ss-sheet{transform:translateY(104%);transition:transform .34s cubic-bezier(.4,0,1,1)}
.ss-sheet.drag{transition:none}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.ss-sheet{background:#16181c}html[data-theme="light"] .ss-sheet{background:#fff}}
.ss-grab{width:38px;height:5px;margin:0 auto 14px;border-radius:9px;background:var(--ss-ink3);opacity:.6}
.ss-x{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--ss-ink2);cursor:pointer;border-radius:50%}
.ss-x::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--ss-well);box-shadow:inset 0 0 0 1px var(--ss-hair),inset 0 1px 0 rgba(255,255,255,.12);transition:background .15s}
.ss-x:hover::before{background:var(--ss-hair)}
.ss-x:hover{color:var(--ss-ink)}
.ss-x svg{position:relative;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ss-top{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.ss-tile{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:15px;color:#fff;
  background:linear-gradient(155deg,#43b0f7 0%,#1677c9 55%,#0e5aa0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.18),0 10px 26px -8px rgba(29,155,240,.6)}
.ss-tile svg{width:26px;height:26px;fill:currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.ss-eye{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px 6px 10px;border-radius:999px;font:700 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ss-eye);background:var(--ss-well);box-shadow:inset 0 0 0 1px var(--ss-hair)}
.ss-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(29,155,240,.18)}
.ss h2{margin:0 0 10px;font:800 clamp(27px,7.4vw,32px)/1.08 var(--font);letter-spacing:-.035em;color:var(--ss-ink);text-wrap:balance}
.ss h2 span{color:var(--ss-ink2)}
.ss-lede{margin:0 0 18px;font-size:15.5px;line-height:1.5;color:var(--ss-ink2);text-wrap:pretty}
.ss-steps{list-style:none;margin:0 0 20px;padding:4px 0;border-radius:18px;background:var(--ss-well);box-shadow:inset 0 0 0 1px var(--ss-hair),inset 0 1px 0 rgba(255,255,255,.06)}
.ss-steps li{display:flex;align-items:center;gap:14px;padding:11px 14px;counter-increment:ss}
.ss-steps li+li{border-top:1px solid var(--ss-hair)}
.ss-steps svg{flex:none;width:34px;height:34px;padding:8px;border-radius:11px;fill:none;stroke:var(--ss-eye);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;background:rgba(29,155,240,.12);box-shadow:inset 0 0 0 1px rgba(29,155,240,.18)}
.ss-steps div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ss-steps b{font-size:15px;font-weight:700;color:var(--ss-ink);letter-spacing:-.01em}
.ss-steps span{font-size:13px;color:var(--ss-ink3);line-height:1.35}
.ss-actions{display:flex;flex-direction:column;gap:6px}
.ss-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:999px;text-decoration:none;color:#fff;font:700 16px var(--font);letter-spacing:-.01em;
  background:linear-gradient(180deg,#1a7fd1,#1166b3);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.2),0 10px 28px -10px rgba(29,155,240,.75);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.ss-cta:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.2),0 14px 32px -10px rgba(29,155,240,.85)}
.ss-cta:active{transform:scale(.985)}
.ss-cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ss-later{height:46px;border:0;border-radius:999px;background:none;color:var(--ss-ink2);font:600 15px var(--font);cursor:pointer;transition:background .15s,color .15s}
.ss-later:hover{background:var(--ss-well);color:var(--ss-ink)}
.ss :is(.ss-cta,.ss-later,.ss-x,.ss-fine a):focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--blue)}
.ss .ss-x:focus-visible{box-shadow:none}.ss .ss-x:focus-visible::before{box-shadow:0 0 0 2px var(--blue)}
.ss-fine{margin:8px 0 0;text-align:center;font-size:12px;color:var(--ss-ink3)}
.ss-fine a{color:inherit;text-decoration:none;border-radius:4px}
.ss-fine a:hover{color:var(--ss-ink);text-decoration:underline}
@media (min-width:640px){
  .ss{align-items:center;padding:24px}
  .ss-sheet{padding:30px 32px 24px;border-radius:30px;transform:translateY(18px) scale(.97);opacity:0;transition:transform .6s cubic-bezier(.2,.9,.22,1.02),opacity .4s ease;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 100px -30px rgba(0,0,0,.75),0 12px 32px -12px rgba(0,0,0,.5)}
  html[data-theme="light"] .ss-sheet{box-shadow:inset 0 1px 0 #fff,0 40px 90px -30px rgba(15,20,25,.32),0 10px 28px -14px rgba(15,20,25,.2)}
  .ss.in .ss-sheet{opacity:1}
  .ss.out .ss-sheet{transform:translateY(10px) scale(.98);opacity:0;transition:transform .28s ease,opacity .22s ease}
  .ss-aura{top:50%;bottom:auto;transform:translate(-50%,-50%)}
  .ss-grab{display:none}
  .ss-x{top:16px;right:16px}
  .ss-top{margin-top:0}
  .ss h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .ss-sheet,.ss.out .ss-sheet{transform:none!important;transition:opacity .18s linear!important;opacity:0}
  .ss.in .ss-sheet{opacity:1}
  .ss-scrim,.ss-aura{transition:opacity .18s linear!important}
  .ss-cta{transition:none}
}

/* Jump to top (public/shelf-up.js): button bottom-right, fades in after ~150px of scroll. Class is .gbs-up, not
   .to-top / .back-to-top, because iOS content blockers (EasyList/Fanboy Annoyances) hide those names site-wide.
   shelf-up.js sets bottom/right/opacity/visibility inline from visualViewport; the values here are the fallback.
   z-index 17 sits above the A-Z rail (15) and its letter bubble (16), below the toast (50) and shelfer sheet (60). */
.gbs-up{position:fixed;z-index:17;right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border-radius:9999px;border:1px solid var(--line2);background:var(--head);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text2);cursor:pointer;box-shadow:none;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s,visibility 0s .2s,background .2s;-webkit-tap-highlight-color:transparent}
.gbs-up.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .2s,transform .2s,visibility 0s,background .2s}
.gbs-up.show:not(:hover):not(:active):not(:focus-visible){border-color:var(--line)}
.gbs-up.show:not(:hover):not(:active):not(:focus-visible) svg{opacity:.65}
.gbs-up:hover,.gbs-up:active{background:var(--hover);color:var(--text)}
.gbs-up:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--blue)}
.gbs-up svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:opacity .2s;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="light"] .gbs-up{box-shadow:0 2px 10px rgba(15,20,25,.08)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.gbs-up{background:var(--bg)}}
/* Wide screens: the rail sits in the margin right above the button, so end it higher */
@media (min-width:1200px){html.has-rail .rail{bottom:max(68px,calc(env(safe-area-inset-bottom) + 62px))}}
/* Phones/tablets: solid fill (no backdrop-filter, which WebKit can drop on fixed layers), blue ring + blue arrow so
   it reads over cards; lifted well above iOS Safari's floating URL bar, left of the A-Z letter strip. */
@media (max-width:1199px){
  .gbs-up{bottom:calc(120px + env(safe-area-inset-bottom));width:38px;height:38px}
  html.has-rail .gbs-up{right:calc(max(0px,env(safe-area-inset-right)) + 44px)}
}