/* Infinity by GroupChatOn — infinity.groupchaton.com
   Deep-space design: dark first (a light mode too), glass panels, one colour per tool category.
   Type: Geist Mono (logo, headings, numbers, code) · Geist (text, menus, buttons, forms): see the coding theme at the end
   Designed & Developed by Nivesh Sahayak (https://www.niveshsahayak.in/). All rights reserved: see LICENSE. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap');

/* ===================== tokens ===================== */
:root{
  --head:'Geist Mono',ui-monospace,Consolas,monospace;
  --ui:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,Consolas,monospace;
  --header-h:64px;
  --radius:18px;
  /* deep space (default) */
  --bg:#05060F;
  --bg-2:#0A0C1E;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --surface-solid:#0E1126;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --ink:#ECEEFF;
  --ink-soft:#BCC1E6;
  --muted:#8A90B8;
  --accent:#8B7CFF;
  --accent-2:#22D3EE;
  --accent-3:#F472B6;
  --accent-soft:rgba(139,124,255,.16);
  --accent-ink:#0B0920;
  --grad:linear-gradient(120deg,#8B7CFF 0%,#22D3EE 55%,#F472B6 100%);
  --glow:0 0 0 1px rgba(139,124,255,.35),0 10px 40px -10px rgba(139,124,255,.55);
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
  --blur:saturate(160%) blur(16px);
  --ok:#4ADE80;--err:#FF6B8A;
  color-scheme:dark;
}
html[data-theme='light']{
  --bg:#F5F6FF;
  --bg-2:#ECEEFF;
  --surface:rgba(255,255,255,.72);
  --surface-2:rgba(255,255,255,.95);
  --surface-solid:#FFFFFF;
  --line:rgba(40,36,110,.11);
  --line-strong:rgba(40,36,110,.22);
  --ink:#141433;
  --ink-soft:#3D3F6B;
  --muted:#6A6E96;
  --accent:#5B45F0;
  --accent-2:#0891B2;
  --accent-3:#DB2777;
  --accent-soft:rgba(91,69,240,.10);
  --accent-ink:#FFFFFF;
  --grad:linear-gradient(120deg,#5B45F0 0%,#0891B2 55%,#DB2777 100%);
  --glow:0 0 0 1px rgba(91,69,240,.25),0 12px 34px -12px rgba(91,69,240,.45);
  --shadow:0 18px 50px -24px rgba(30,25,90,.35);
  --ok:#15803D;--err:#DC2647;
  color-scheme:light;
}

/* ===================== base ===================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 16.5px/1.65 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* nebula + stars behind everything */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -10%,rgba(139,124,255,.22),transparent 60%),
    radial-gradient(800px 520px at 100% 0%,rgba(34,211,238,.14),transparent 60%),
    radial-gradient(700px 600px at 70% 110%,rgba(244,114,182,.12),transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 140px 80px,#cfd3ff,transparent),
    radial-gradient(1.5px 1.5px at 260px 160px,#fff,transparent),radial-gradient(1px 1px at 330px 40px,#a5f3fc,transparent),
    radial-gradient(1px 1px at 90px 220px,#fff,transparent),radial-gradient(1.2px 1.2px at 380px 260px,#f9a8d4,transparent);
  background-size:420px 300px;animation:infDrift 120s linear infinite}
html[data-theme='light'] body::after{opacity:0}
html[data-theme='light'] body::before{background:
    radial-gradient(900px 600px at 10% -10%,rgba(91,69,240,.12),transparent 60%),
    radial-gradient(800px 520px at 100% 0%,rgba(8,145,178,.10),transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
@keyframes infDrift{to{background-position:420px 300px}}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:var(--accent-2);text-decoration-thickness:1px;text-underline-offset:3px}
html[data-theme='light'] a{color:var(--accent)}
a:hover{color:var(--ink)}
img,svg,video,canvas{max-width:100%}
h1,h2,h3,h4,h5,h6{font-family:var(--head);color:var(--ink);letter-spacing:-.02em;line-height:1.2}
code,kbd,pre,samp{font-family:var(--mono)}
button,input,select,textarea,optgroup{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:6px}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:var(--surface-solid);color:var(--ink);padding:8px 14px;border-radius:10px}
.skip-link:focus{left:8px}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}

/* ===================== header ===================== */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h);background:rgba(5,6,15,.62);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--line);transition:transform .3s ease}
html[data-theme='light'] .site-header{background:rgba(245,246,255,.75)}
.site-header.is-hidden{transform:translateY(-100%)}
.nav-wrap{display:flex;align-items:center;gap:18px;height:100%}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none;margin-right:auto}
.brand-mark{width:36px;height:36px;flex:none;color:#000}   /* the GroupChatOn mark; its outline follows the theme */
html[data-theme='dark'] .brand-mark{color:#fff}
.brand-name{display:flex;flex-direction:column;line-height:1}
.brand-name b{font:800 19px/1 var(--head);letter-spacing:.16em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-name small{font:600 10.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:8px 12px;border-radius:999px;color:var(--ink-soft);font:600 14.5px/1 var(--ui);text-decoration:none;white-space:nowrap}
.nav a:hover,.nav a[aria-current='page']{color:var(--ink);background:var(--surface-2)}
.nav-actions{display:flex;align-items:center;gap:6px}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none}
.icon-btn:hover{border-color:var(--line-strong);background:var(--surface-2)}
.kbar-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 12px;min-width:230px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:500 14px/1 var(--ui);cursor:pointer}
.kbar-btn:hover{border-color:var(--accent);color:var(--ink);box-shadow:var(--glow)}
.kbar-btn span{flex:1;text-align:left}
kbd,.kbar-btn kbd{font:600 11.5px/1 var(--mono);padding:4px 6px;border-radius:6px;border:1px solid var(--line-strong);color:var(--ink-soft);background:var(--surface-2)}
.menu-toggle{display:none}
@media (max-width:1060px){
  .kbar-btn{min-width:0;width:40px;padding:0;justify-content:center}
  .kbar-btn span,.kbar-btn kbd{display:none}
}
@media (max-width:900px){
  .menu-toggle{display:inline-grid}
  .nav{position:fixed;top:var(--header-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px 16px 18px;background:var(--surface-solid);border-bottom:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s ease}
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:12px 14px;font-size:16px}
}

/* ===================== home ===================== */
.inf-hero{position:relative;padding:72px 0 30px;text-align:center}
.inf-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font:600 13px/1 var(--ui)}
.inf-hero .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
.inf-hero h1{margin:22px auto 14px;max-width:880px;font:800 clamp(36px,6.4vw,72px)/1.04 var(--head);letter-spacing:-.04em}
.inf-hero h1 .grad{background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:infShine 8s ease-in-out infinite alternate}
@keyframes infShine{to{background-position:100% 0}}
.inf-hero p{max-width:640px;margin:0 auto;color:var(--ink-soft);font-size:18px}
.inf-hero .kbar-hero{margin:30px auto 0;max-width:620px;width:100%;height:58px;min-width:0;padding:0 14px 0 18px;font-size:16px;border-radius:16px;background:var(--surface-2);box-shadow:var(--glow)}
.inf-hero .kbar-hero span{display:block}
.inf-hero .kbar-hero kbd{display:inline-block}
.inf-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;margin:22px 0 0;padding:0;list-style:none;color:var(--muted);font:600 14px/1.4 var(--ui)}
.inf-stats b{color:var(--ink);font-family:var(--mono)}
.home-sec{margin:34px auto}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px}
.section-head h2{margin:0;font-size:24px}
.section-head a{font-weight:700;text-decoration:none}

/* ===================== tool hub (kit.js) ===================== */
.thub{display:flex;flex-direction:column;gap:14px}
.thub-search{width:100%;height:52px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 16px var(--ui);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.thub-search::placeholder{color:var(--muted)}
.thub-search:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)}
.thub-cats{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.thub-chip{--cc:var(--accent);display:inline-flex;align-items:center;gap:8px;flex:none;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font:700 14px/1 var(--ui);cursor:pointer;transition:.15s}
.thub-chip em{font:600 12px/1 var(--mono);font-style:normal;color:var(--muted)}
.thub-chip:hover{border-color:var(--cc);color:var(--ink)}
.thub-chip[aria-selected='true']{border-color:var(--cc);color:var(--ink);background:color-mix(in srgb,var(--cc) 16%,transparent);box-shadow:0 0 0 1px var(--cc),0 8px 26px -10px var(--cc)}
.thub-count{margin:0;color:var(--muted);font:600 13px var(--mono)}
.thub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.thub-card{--cc:var(--accent);position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;overflow:hidden;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);transition:transform .18s ease,border-color .18s,box-shadow .18s}
.thub-card::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--cc),transparent);opacity:.7}
.thub-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cc) 60%,transparent);box-shadow:0 14px 40px -16px var(--cc);color:var(--ink)}
.thub-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;font-size:22px;background:color-mix(in srgb,var(--cc) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cc) 40%,transparent)}
.thub-card b{display:flex;align-items:center;gap:8px;font:700 15.5px/1.3 var(--head);letter-spacing:-.01em}
.thub-card small{display:block;margin-top:4px;color:var(--muted);font-size:13.5px;line-height:1.45}
.thub-new{font:700 10px/1 var(--mono);font-style:normal;letter-spacing:.06em;padding:3px 6px;border-radius:6px;color:var(--accent-ink);background:var(--grad)}
.trelated{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.trelated h2{margin:0 0 14px;font-size:22px}
.trelated-all{margin:16px 0 0;font-weight:700}

/* ===================== lists (labels, search) ===================== */
.page-wrap{padding:30px 20px 60px}
.reading{max-width:860px;margin:0 auto}
.list-title{margin:6px 0 18px;font-size:clamp(26px,4vw,38px)}
.post-list{display:grid;gap:10px}
.post-row{padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.post-row h3{margin:0;font-size:17px}
.post-row h3 a{color:var(--ink);text-decoration:none}
.post-row h3 a:hover{color:var(--accent-2)}
.row-meta:empty{display:none}
.blog-pager{display:flex;justify-content:space-between;gap:10px;margin:22px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);font:700 15px/1 var(--ui);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--ink)}
.btn-sm{min-height:38px;padding:0 14px;font-size:14px}
.btn-primary{border:0;background:var(--grad);color:#fff;box-shadow:var(--glow)}
html[data-theme='light'] .btn-primary{color:#fff}
.btn-primary:hover{filter:brightness(1.08);color:#fff}
.btn:disabled{opacity:.6;cursor:wait}
.pager-older{margin-left:auto}

/* ===================== a tool post / a page ===================== */
article.post{max-width:900px;margin:0 auto}
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:600 13.5px var(--ui);color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb a+a::before{content:'/';margin-right:6px;color:var(--line-strong)}
.post-title{margin:12px 0 10px;font-size:clamp(30px,4.6vw,46px);letter-spacing:-.035em}
.post-body{font-size:17px;color:var(--ink-soft)}
.post-body>.gco-page>*:first-child,.post-body>*:first-child{margin-top:0}
.post-body p,.post-body li{color:var(--ink-soft)}
.post-body b,.post-body strong{color:var(--ink)}
.post-body h2{margin:2em 0 .6em;font-size:24px}
.post-body h3{margin:1.6em 0 .5em;font-size:19px}
.post-body ul,.post-body ol{padding-left:1.3em}
.post-body li{margin:.35em 0}
.post-body li::marker{color:var(--accent)}
.post-body code{font-size:.9em;padding:2px 6px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line)}
.post-body pre{padding:16px;border-radius:14px;background:var(--surface-solid);border:1px solid var(--line);overflow:auto}
.post-body img{height:auto;border-radius:12px}
.post-body table{width:100%;border-collapse:collapse;font-size:15px}
.post-body th,.post-body td{padding:9px 12px;border:1px solid var(--line);text-align:left}
.post-body th{background:var(--surface-2);color:var(--ink)}
.post-body details{margin:10px 0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.post-body summary{cursor:pointer;padding:14px 46px 14px 18px;font:700 16px/1.4 var(--head);color:var(--ink);list-style:none;position:relative}
.post-body summary::-webkit-details-marker{display:none}
.post-body summary::after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);font:500 22px/1 var(--mono);color:var(--accent)}
.post-body details[open] summary::after{content:'−'}
.post-body details>p{margin:0;padding:0 18px 16px}
.page-lead{font-size:19px;line-height:1.6;color:var(--ink)!important;margin:0 0 22px}
.updated{font:600 13px var(--mono);color:var(--muted)!important}
.post-labels{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0}
.post-labels a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font:700 13px var(--ui);text-decoration:none}
.post-labels a:hover{border-color:var(--accent);color:var(--ink)}
/* the tool itself: a glowing glass console */
.gco-tool-mount{margin:8px 0 28px}
.tool-app{position:relative;padding:22px;border-radius:22px;border:1px solid var(--line-strong);background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow)}
.tool-app::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.tool-app textarea,.tool-app input[type='text'],.tool-app input[type='number'],.tool-app input[type='url'],.tool-app input[type='search'],.tool-app input[type='email'],.tool-app input[type='tel'],.tool-app input[type='date'],.tool-app input[type='time'],.tool-app input[type='datetime-local'],.tool-app select{background:var(--surface-solid)!important;color:var(--ink)!important;border-color:var(--line-strong)!important}
.tool-app textarea{font-family:var(--ui)}
.tool-app .tmono,.tool-app textarea.tmono{font-family:var(--mono)!important;font-size:14px}
@media (max-width:640px){.tool-app{padding:16px;border-radius:18px}.page-wrap{padding:22px 16px 50px}.container{padding:0 16px}}

/* ===================== pages from GitHub: shimmer, then fade in ===================== */
[data-gco-page].is-loading{position:relative;min-height:320px;overflow:hidden}
[data-gco-page].is-loading>*{visibility:hidden}
[data-gco-page].is-loading::before{content:'';position:absolute;inset:0;background:
  linear-gradient(var(--surface-2),var(--surface-2)) 0 0/70% 22px no-repeat,
  linear-gradient(var(--surface-2),var(--surface-2)) 0 46px/100% 14px no-repeat,
  linear-gradient(var(--surface-2),var(--surface-2)) 0 72px/92% 14px no-repeat,
  linear-gradient(var(--surface-2),var(--surface-2)) 0 98px/84% 14px no-repeat,
  linear-gradient(var(--surface-2),var(--surface-2)) 0 150px/45% 20px no-repeat,
  linear-gradient(var(--surface-2),var(--surface-2)) 0 190px/100% 14px no-repeat,
  linear-gradient(var(--surface-2),var(--surface-2)) 0 216px/88% 14px no-repeat;border-radius:8px}
[data-gco-page].is-loading::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(139,124,255,.18) 50%,transparent 70%);transform:translateX(-100%);animation:infShimmer 1.3s ease-in-out infinite}
@keyframes infShimmer{to{transform:translateX(100%)}}
[data-gco-page].is-loaded>*{animation:infUp .5s ease both}
[data-gco-page].is-loaded>*:nth-child(2){animation-delay:.06s}
[data-gco-page].is-loaded>*:nth-child(3){animation-delay:.12s}
[data-gco-page].is-loaded>*:nth-child(4){animation-delay:.18s}
[data-gco-page].is-loaded>*:nth-child(n+5){animation-delay:.24s}
@keyframes infUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ===================== forms (Ask for a tool) + sheets ===================== */
.fb-form{display:grid;gap:14px}
.fb-field{display:grid;gap:6px}
.fb-field>span{font:700 14px var(--ui);color:var(--ink)}
.fb-field input,.fb-field textarea,.fb-field select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface-solid);color:var(--ink);font:500 16px var(--ui)}
.fb-field input:focus,.fb-field textarea:focus,.fb-field select:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)}
.fb-field small{color:var(--muted);font-size:13px}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.fb-row{grid-template-columns:1fr}}
.fb-note{margin:0;color:var(--muted)!important;font-size:13.5px}
.fb-send{justify-self:start}
.fb-status{margin:0;font-weight:700;min-height:1.4em}
.fb-status.is-error{color:var(--err)!important}
.fb-status.is-ok{color:var(--ok)!important}
[data-tool-request],[data-help-request]{max-width:620px;padding:22px;border-radius:22px;border:1px solid var(--line-strong);background:var(--surface)}
.sheet-backdrop{position:fixed;inset:0;z-index:80;background:rgba(2,3,10,.6);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s}
.sheet-backdrop.is-open{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:81;left:50%;top:50%;width:min(560px,calc(100% - 24px));max-height:calc(100vh - 40px);overflow:auto;transform:translate(-50%,-46%);opacity:0;pointer-events:none;border-radius:22px;border:1px solid var(--line-strong);background:var(--surface-solid);box-shadow:var(--shadow);transition:.22s ease}
.sheet.is-open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.sheet-head h2{margin:0;font-size:20px}
.sheet-body{padding:18px}

/* ===================== ⌘K command palette (infinity.js) ===================== */
.kbar{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:12vh 12px 12px;background:rgba(2,3,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:infFade .15s ease}
@keyframes infFade{from{opacity:0}}
.kbar-box{width:min(680px,100%);border-radius:20px;border:1px solid var(--line-strong);background:var(--surface-solid);box-shadow:var(--glow),var(--shadow);overflow:hidden;animation:infPop .18s ease}
@keyframes infPop{from{transform:translateY(10px) scale(.98);opacity:0}}
.kbar-top{display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line)}
.kbar-top .i{color:var(--accent)}
.kbar-input{flex:1;height:60px;border:0;background:transparent;color:var(--ink);font:500 18px var(--ui);outline:none}
.kbar-list{max-height:min(56vh,480px);overflow:auto;padding:8px;margin:0;list-style:none}
.kbar-group{padding:10px 10px 4px;font:700 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kbar-item a{--cc:var(--accent);display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none}
.kbar-item .ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;font-size:18px;background:color-mix(in srgb,var(--cc) 18%,transparent)}
.kbar-item b{display:block;font:700 15px/1.3 var(--head)}
.kbar-item small{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.kbar-item .cat{margin-left:auto;flex:none;font:600 12px var(--ui);color:var(--cc)}
.kbar-item[aria-selected='true'] a{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.kbar-empty{padding:26px 16px;text-align:center;color:var(--muted)}
.kbar-foot{display:flex;gap:16px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}

/* ===================== ads + sponsored cards ===================== */
.picks-src,.contact-src,.popular-src,.cf-proxy{display:none!important}
.ad-slot{display:block;width:100%;margin:32px auto;text-align:center;min-height:120px;overflow:hidden;contain:layout;clear:both;font-family:var(--ui);line-height:normal}
.ad-slot::before{content:'Advertisement';display:block;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.75;margin-bottom:8px}
.ad-slot.in-article{min-height:250px}
.ad-slot ins{display:block;max-width:100%;margin:0 auto}
.ad-slot.is-empty,.ad-slot:has(ins[data-ad-status='unfilled']),.no-ads .ad-slot{display:none!important}
.pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:460px;margin:32px auto;padding:36px 20px 20px;border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);color:var(--ink);text-align:center;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.pick::before{content:attr(data-label);position:absolute;top:12px;left:16px;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pick br{display:none}
.pick img{display:block;max-width:100%;height:auto;max-height:240px;margin:0 auto 6px;border-radius:12px}
.pick .pk-ic{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:var(--grad);color:#fff}
.pick .pk-ic svg{width:36px;height:36px}
.pick .pk-title{font:700 18px/1.3 var(--head)}
.pick .pk-line{max-width:360px;color:var(--ink-soft)}
.pick .pk-btn{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0 22px;border-radius:12px;background:var(--grad);color:#fff;font:700 15px var(--ui);text-decoration:none;box-shadow:var(--glow)}
.pick small{color:var(--muted);font-size:12.5px}
.has-anchor .site-footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}

/* ===================== notice bar + toast ===================== */
.notice-bar{background:color-mix(in srgb,var(--accent) 14%,var(--bg));border-bottom:1px solid var(--line)}
.notice-inner{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.notice-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--surface-2);font-size:18px}
.notice-text{flex:1;display:flex;flex-direction:column;font-size:14.5px;color:var(--ink-soft)}
.notice-text b{color:var(--ink)}
.toast{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;max-width:calc(100% - 32px);top:calc(var(--header-h) + 12px);z-index:90;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;border:1px solid var(--line-strong);background:var(--surface-solid);box-shadow:var(--shadow);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.2s}
.toast.is-on{transform:none;opacity:1;pointer-events:auto}

/* ===================== footer ===================== */
.site-footer{margin-top:60px;padding:46px 0 26px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(139,124,255,.06))}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-about p{color:var(--muted);max-width:340px}
.site-footer h4{margin:0 0 12px;font:700 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer ul a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14.5px}
.site-footer ul a:hover{color:var(--ink)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.footer-bottom p{margin:0}
.footer-bottom a{color:var(--ink-soft)}

/* ===================== error page ===================== */
.is-error .page-wrap{text-align:center}

/* ===================== motion + print ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media print{.site-header,.site-footer,.ad-slot,.pick,.trelated,.toast,.notice-bar{display:none!important}body::before,body::after{display:none}}

/* ---------- loading panel until a tool starts (written into every post; kit.js removes it) ---------- */
.tload{display:grid;gap:14px;align-content:center;min-height:240px;padding:24px;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.tload code{font:500 14px/1.4 var(--mono);color:var(--muted);background:none;border:0;padding:0}
.tload code::before{content:'❯ ';color:var(--code,#7EE787)}
.tload code::after{content:'▍';margin-left:2px;color:var(--accent);animation:tloadBlink 1s steps(1) infinite}
.tload-bar{display:block;height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.tload-bar i{display:block;width:38%;height:100%;border-radius:4px;background:var(--grad,var(--accent));animation:tloadMove 1.1s ease-in-out infinite}
.tload-slow{margin:0;font-size:14px;color:var(--ink-soft)}
@keyframes tloadMove{from{transform:translateX(-110%)}to{transform:translateX(280%)}}
@keyframes tloadBlink{50%{opacity:0}}
.gco-tool-mount>.tool-app,.gco-tool-mount>.tapp-frame{animation:toolIn .35s ease both}
@keyframes toolIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.tload-bar i,.tload code::after,.gco-tool-mount>.tool-app{animation:none}}

/* ---------- home: sections, favourites, paging ---------- */
.thub-body{display:grid;gap:30px}
.thub-sec{display:grid;gap:12px;content-visibility:auto;contain-intrinsic-size:auto 260px}
.thub-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.thub-sec-head h2{margin:0;font-size:19px;letter-spacing:-.01em}
.thub-sec-head h2::before{content:'// ';color:var(--muted);font-weight:500}
.thub-more{border:0;background:none;color:var(--accent-2);font:600 14px var(--mono);cursor:pointer;white-space:nowrap;padding:6px 0}
.thub-more:hover{color:var(--ink)}
.thub-tip{margin:-10px 0 0;color:var(--muted);font-size:14px}
.thub-pager{display:flex;justify-content:center;margin:6px 0 0}
.thub-cell{position:relative;display:flex}
.thub-cell>.thub-card{flex:1;padding-right:44px}
.thub-fav{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;opacity:.55;transition:opacity .15s,color .15s,background-color .15s}
.thub-cell:hover .thub-fav,.thub-fav:focus-visible{opacity:1}
.thub-fav:hover{background:var(--surface-2);color:var(--ink)}
.thub-fav[aria-pressed='true']{opacity:1;color:#FBBF24}
@media (hover:none){.thub-fav{opacity:.9}}
.thub-sec .thub-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (max-width:640px){   /* phones: each row swipes sideways, so the page stays short */
  .thub-sec .thub-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .thub-sec .thub-grid::-webkit-scrollbar{display:none}
  .thub-sec .thub-cell{scroll-snap-align:start}
}

/* ===================== coding theme (2026-11-02) =====================
   Type: Geist Mono (logo, headings, numbers, code) · Geist (text, menus, buttons, forms). Used by no other site of ours.
   An editor-dark palette with a dot grid instead of moving stars (lighter on phones), terminal prompts and window controls. */
:root{
  --head:'Geist Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --ui:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --bg:#07090F;--bg-2:#0B0F17;--surface-solid:#0E131D;
  --radius:14px;
  --code:#7EE787;
}
html[data-theme='light']{--bg:#F6F8FA;--bg-2:#EEF1F5;--surface-solid:#FFFFFF;--code:#1A7F37}
body::after{opacity:.5;animation:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px}
html[data-theme='light'] body::after{opacity:1;background-image:radial-gradient(rgba(20,30,60,.08) 1px,transparent 1.2px)}
h1,h2,h3,h4,h5,h6{letter-spacing:-.03em;font-weight:700}
.brand-name b{letter-spacing:.08em}
.inf-hero h1{font-weight:700;letter-spacing:-.05em}
.inf-hero .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.inf-hero .eyebrow::before{content:'$';color:var(--code);font-weight:700}
.inf-hero h1::after{content:'_';color:var(--code);animation:tloadBlink 1.1s steps(1) infinite;margin-left:.04em}
.thub{position:relative}
.thub::before{content:'❯';position:absolute;left:18px;top:14px;z-index:1;font:700 18px/24px var(--mono);color:var(--code);pointer-events:none}
.thub-search{padding-left:44px;font-family:var(--mono);font-size:15px;border-radius:12px}
.thub-chip{border-radius:10px;font-family:var(--mono);font-size:13.5px}
.thub-card{border-radius:12px;transition:transform .15s,border-color .15s,box-shadow .15s}
.thub-card::before{inset:12px auto 12px 0;width:2px;height:auto;background:var(--cc);opacity:.85;border-radius:0 2px 2px 0}
.thub-card b{font-family:var(--ui);font-weight:650;font-size:15.5px;letter-spacing:-.005em}
.thub-ic{border-radius:10px}
.section-head h2::before,.trelated h2::before{content:'// ';color:var(--muted);font-weight:500}
.post-title{letter-spacing:-.045em}
.crumb{font-family:var(--mono);font-size:12.5px}
/* tools sit in an editor-style window */
.gco-tool-mount>.tool-app{padding-top:44px;border-radius:16px;background:
  radial-gradient(circle at 20px 20px,#FF5F57 5px,transparent 5.6px),
  radial-gradient(circle at 38px 20px,#FEBC2E 5px,transparent 5.6px),
  radial-gradient(circle at 56px 20px,#28C840 5px,transparent 5.6px),var(--surface)}
.gco-tool-mount>.tool-app::after{content:'';position:absolute;left:0;right:0;top:40px;height:1px;background:var(--line)}
@media (max-width:640px){.gco-tool-mount>.tool-app{padding-top:42px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}