PageSourceSearch

https://suprswitch.xyz/

html suprswitch.xyz collected 2026-10-02 02:11:10 UTC 52,426 bytes, 270 lines download raw bytes

1<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="/blackBg128.png" type="image/png"><link rel="canonical" href="https://suprswitch.xyz/"><meta name="robots" content="index, follow, max-image-preview:large"><meta name="theme-color" content="#000000"><title>suprswitch — switch google accounts with a keystroke</title><meta name="description" content="stop clicking the avatar. hold a key, press a number, and you're in your other google account — same tab, no menu, under a second. a free, private extension for chrome &#38; chromium browsers."><meta property="og:type" content="website"><meta property="og:url" content="https://suprswitch.xyz/"><meta property="og:title" content="suprswitch — switch google accounts with a keystroke"><meta property="og:description" content="stop clicking the avatar. hold a key, press a number, and you're in your other google account — same tab, no menu, under a second. a free, private extension for chrome &#38; chromium browsers."><meta property="og:image" content="https://suprswitch.xyz/banner.webp"><meta property="og:image:type" content="image/webp"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt" content="suprswitch — switch google accounts with a keystroke"><meta property="og:site_name" content="suprswitch"><meta property="og:locale" content="en_US"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="suprswitch — switch google accounts with a keystroke"><meta name="twitter:description" content="stop clicking the avatar. hold a key, press a number, and you're in your other google account — same tab, no menu, under a second. a free, private extension for chrome &#38; chromium browsers."><meta name="twitter:image" content="https://suprswitch.xyz/banner.webp"><meta name="twitter:image:alt" content="suprswitch — switch google accounts with a keystroke"><link rel="preload" href="/fonts/DepartureMono-Regular.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/inter-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://suprswitch.xyz/#organization","name":"suprswitch","url":"https://suprswitch.xyz","logo":{"@type":"ImageObject","url":"https://suprswitch.xyz/blackBg128.png"},"founder":{"@type":"Person","name":"Hamza"},"sameAs":["https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg","https://addons.mozilla.org/firefox/addon/suprswitch-account-switcher/"]},{"@type":["SoftwareApplication","WebApplication"],"@id":"https://suprswitch.xyz/#software","name":"suprswitch","description":"stop clicking the avatar. hold a key, press a number, and you're in your other google account — same tab, no menu, under a second. a free, private extension for chrome & chromium browsers.","applicationCategory":"BrowserApplication","operatingSystem":"Chrome, ChromeOS, Windows, macOS, Linux","browserRequirements":"Requires Google Chrome or a Chromium-based browser","url":"https://suprswitch.xyz","image":"https://suprswitch.xyz/banner.webp","installUrl":"https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg","downloadUrl":"https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg","featureList":["Switch Google accounts with a keyboard shortcut (Alt/Option, Control, or Shift + 0–9)","On-screen account switcher — cycle through your accounts by name and photo, app-switcher style","Works across every google.com app — Gmail, Drive, Docs, Sheets, Calendar, Meet, Gemini, and more","Switches the account in the current tab in under a second — no avatar menu, no new tab","Set a default account so typed or bookmarked Google links always open the right one","Configurable modifier key and starting account number","Private by design — the extension has no tracking or analytics; account names and photos are read on-device and never sent anywhere","Free, with no sign-up"],"isAccessibleForFree":true,"publisher":{"@id":"https://suprswitch.xyz/#organization"},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}},{"@type":"FAQPage","@id":"https://suprswitch.xyz/#faq","mainEntity":[{"@type":"Question","name":"does it cost anything?","acceptedA
1nswer":{"@type":"Answer","text":"no — it's free, with no account and no sign-up."}},{"@type":"Question","name":"is my data safe?","acceptedAnswer":{"@type":"Answer","text":"yes. the extension reads your account names and photos on your device and sends them nowhere — it has no tracking or analytics at all. (this website uses a cookieless, privacy-friendly analytics tool — no cookies, no personal data about you.)"}},{"@type":"Question","name":"which key do i press?","acceptedAnswer":{"@type":"Answer","text":"your pick — alt/option, control or shift — then a number 0–9. change it anytime in the popup."}},{"@type":"Question","name":"can i pick an account from a list?","acceptedAnswer":{"@type":"Answer","text":"yes. hold your shortcut key and tap the backtick ` (the key above tab) to pop up a switcher, then cycle through your accounts — hold, tap, release — like your os app switcher. or just press a number to jump."}},{"@type":"Question","name":"does it work in every google app?","acceptedAnswer":{"@type":"Answer","text":"if it lives on google.com, yes. it switches the account in the url, so new google apps work without an update."}},{"@type":"Question","name":"which browsers does it work in?","acceptedA
1nswer":{"@type":"Answer","text":"chrome and chromium browsers (edge, brave, opera, arc, vivaldi, comet) from the chrome web store, and firefox and firefox-based browsers (zen, librewolf, waterfox) from firefox add-ons. the install button picks the right store for your browser."}},{"@type":"Question","name":"how is it different from chrome's avatar menu?","acceptedAnswer":{"@type":"Answer","text":"the avatar menu takes several clicks and opens a new tab. suprswitch jumps to the account in the same tab, from the keyboard, in under a second."}}]}]}</script>
1<!-- Analytics -->
1<script defer src="https://assets.onedollarstats.com/stonks.js"></script>
1<script>
2      // UTM cleanup. OneDollarStats captures UTM params only on the first
3      // pageview of a session and tags every later event in that session from
4      // them — so once that pageview has fired, the params have done their job.
5      // A few seconds later we strip them from the URL for a clean address bar,
6      // clean shares, and a clean canonical, WITHOUT a reload: replaceState
7      // fires no new pageview, so it can't create a duplicate hit or re-trigger
8      // capture. We wait until stonks.js has loaded (window.stonks) before
9      // clearing, so a slow connection can't wipe the params before the pageview
10      // that reads them; if analytics never loads there's nothing to capture, so
11      // we clean up anyway after a short cap.
12      (function () {
13        try {
14          var hasUtm = function () {
15            var has = false;
16            new URL(window.location.href).searchParams.forEach(function (_, k) {
17              if (k.toLowerCase().indexOf("utm_") === 0) has = true;
18            });
19            return has;
20          };
21          if (!hasUtm()) return;
22
23          function strip() {
24            var u = new URL(window.location.href);
25            var keys = [];
26            u.searchParams.forEach(function (_, k) {
27              if (k.toLowerCase().indexOf("utm_") === 0) keys.push(k);
28            });
29            for (var i = 0; i < keys.length; i++) u.searchParams.delete(keys[i]);
30            var qs = u.searchParams.toString();
31            history.replaceState(
32              history.state,
33              "",
34              u.pathname + (qs ? "?" + qs : "") + u.hash,
35            );
36          }
37
38          // ~3.5s after load, once analytics is present. Poll a few more seconds
39          // if it's still loading, then give up waiting and clean up regardless.
40          var waited = 0;
41          function tick() {
42            if (window.stonks || waited >= 24) strip();
43            else {
44              waited++;
45              setTimeout(tick, 250);
46            }
47          }
48          setTimeout(tick, 3500);
49        } catch (e) {}
50      })();
51    </script>
51<script>
52      // Apply the saved theme before first paint (no flash). Default: follow OS.
53      (function () {
54        try {
55          var t = localStorage.getItem("theme") || "system";
56          var dark =
57            t === "dark" ||
58            (t === "system" &&
59              matchMedia("(prefers-color-scheme: dark)").matches);
60          document.documentElement.classList.toggle("dark", dark);
61        } catch (e) {}
62      })();
63    </script>
63<script>
64      // Flag macOS before first paint so ModKey can show "option" not "alt".
65      (function () {
66        try {
67          var p =
68            (navigator.userAgentData && navigator.userAgentData.platform) ||
69            navigator.platform ||
70            navigator.userAgent ||
71            "";
72          if (/mac/i.test(p)) document.documentElement.classList.add("is-mac");
73        } catch (e) {}
74      })();
75    </script>
75<script>
76      // The demo (a React island) broadcasts whichever modifier the visitor
77      // picks; mirror it into every <ModKey> on the page.
78      window.addEventListener("suprswitch:mod", function (e) {
79        // Persist the pick so a late-hydrating island (the switcher demo, below
80        // the fold) can replay it on mount and match the rest of the page.
81        window.__ssMod = e.detail;
82        var els = document.querySelectorAll(".mod-pick");
83        for (var i = 0; i < els.length; i++) els[i].textContent = e.detail;
84        document.documentElement.classList.add("mod-picked");
85      });
86    </script>
86<link rel="stylesheet" href="/_astro/index.CqTripge.css">
86<script type="module" src="/_astro/page.DSgOZ_si.js"></script>
vendor: 1 bytes, line 86
86
87<script>
88            const style = document.createElement('style');
89            style.textContent = `html.lenis,
90html.lenis body {
91  height: auto;
92}
93
94.lenis.lenis-smooth {
95  scroll-behavior: auto !important;
96}
97
98.lenis.lenis-smooth [data-lenis-prevent] {
99  overscroll-behavior: contain;
100}
101
102.lenis.lenis-stopped {
103  overflow: hidden;
104}
105
106.lenis.lenis-scrolling iframe {
107  pointer-events: none;
108}`;
109            document.head.appendChild(style);
110          </script>
110</head> <body class="min-h-dvh bg-bg font-sans text-fg-strong antialiased">  <header class="sticky top-0 z-50 border-b border-border bg-bg/70 backdrop-blur"> <nav class="mx-auto flex h-16 max-w-6xl items-center justify-between px-5 sm:px-8"> <a href="/" class="group flex items-center gap-2"> <img alt="suprswitch" class="size-6 transition-transform duration-500 group-hover:rotate-180" height="24px" loading="eager" src="/iconWhite256.png" title="suprswitch" width="24px"> <span class="font-sans text-lg text-fg">suprswitch</span> </a> <!-- The store link + browser name default to Chrome (SSG) and are tailored to the
111visitor's browser client-side by the script in Layout.astro (data-cta hooks). --><a href="https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg" data-cta data-cta-firefox="https://addons.mozilla.org/firefox/addon/suprswitch-account-switcher/" data-s-event="Install Click" data-s-event-props="location=nav" target="_blank" rel="noopener" class="inline-flex items-center justify-center rounded-lg bg-accent px-5 py-2.5 font-sans text-sm font-medium text-accent-fg transition-all hover:scale-[1.02] hover:opacity-90 active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg px-4 py-2"> <span data-cta-label>+ add to chrome</span> </a> </nav> </header> <main> <section class="mx-auto max-w-6xl px-5 pt-14 pb-20 sm:px-8 sm:pt-20 sm:pb-28"> <div class="mx-auto flex max-w-3xl flex-col items-center text-center"> <p class="font-sans text-xs tracking-wider text-fg-muted">
112free · chrome, firefox & more · zero data leaves your device
113</p> <h1 class="mt-5 font-human text-4xl leading-[1.05] font-semibold tracking-tight text-fg sm:text-6xl">
114stop clicking the avatar to switch google accounts.
115</h1> <p class="mt-6 max-w-xl font-human text-lg text-fg-muted sm:text-xl">
116hold <span class="text-fg-strong"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span>, press a number, and
117      you're in
118      your other account — same tab, no menu, under a second.
119</p> <div class="mt-8 flex flex-col items-center gap-3"> <!-- The store link + browser name default to Chrome (SSG) and are tailored to the
120visitor's browser client-side by the script in Layout.astro (data-cta hooks). --><a href="https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg" data-cta data-cta-firefox="https://addons.mozilla.org/firefox/addon/suprswitch-account-switcher/" data-s-event="Install Click" data-s-event-props="location=hero" target="_blank" rel="noopener" class="inline-flex items-center justify-center rounded-lg bg-accent px-5 py-2.5 font-sans text-sm font-medium text-accent-fg transition-all hover:scale-[1.02] hover:opacity-90 active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg px-6 py-3 text-base"> <span data-cta-label>+ add to chrome</span> </a> <span class="font-sans text-xs text-fg-muted">
121no sign-up · works in every google app
122</span> </div> </div> <div class="mt-14 flex flex-col items-center sm:mt-16"> <p class="mb-5 flex flex-wrap items-center justify-center gap-2 font-sans text-sm text-fg-muted"> <span>↓ go on — press</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-7 px-2 text-xs"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-7 text-xs">1</span> <span>right now</span> </p> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
122<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script>
122<script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
122<astro-island uid="10BfNO" prefix="r2" component-url="/_astro/InteractiveDemo.B9hWLUJL.js" component-export="default" renderer-url="/_astro/client.Bz692-Ao.js" props="{}" ssr client="load" opts="{&quot;name&quot;:&quot;InteractiveDemo&quot;,&quot;value&quot;:true}" await-children><div class="w-full max-w-xl overflow-hidden rounded-xl border border-border-strong bg-surface font-sans shadow-[0_24px_60px_-20px_#000000]"><div class="flex h-10 items-center gap-3 border-b border-border-strong bg-surface-2/80 px-3"><div class="flex items-center gap-1.5"><span class="size-2.5 rounded-full bg-surface-4"></span><span class="size-2.5 rounded-full bg-surface-4"></span><span class="size-2.5 rounded-full bg-surface-4"></span></div><div class="flex h-6 flex-1 items-center gap-2 truncate rounded-md border border-border-strong bg-bg/50 px-2 text-xs text-fg-muted"><span class="text-fg-faint">⌁</span><span class="truncate">mail.google.com/mail/u/<span class="text-fg">0</span>/</span></div><span class="grid size-6 shrink-0 place-items-center rounded bg-surface-3 text-xs text-fg-strong">M</span></div><div class="flex items-center gap-4 px-5 pt-5 sm:px-6"><span class="grid size-14 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-lg text-fg transition-all duration-300">JL</span><div class="min-w-0 flex-1"><p class="text-[11px] tracking-wider text-fg-muted uppercase">signed in as</p><p class="truncate font-human text-lg leading-tight text-fg">Jordan Lee</p><p class="truncate text-xs text-fg-muted">[email protected]</p></div><span class="shrink-0 self-start rounded-full border border-border-strong-2 px-2 py-0.5 text-[11px] text-fg-muted">work</span></div><hr class="mx-5 my-5 border-border-strong sm:mx-6"/><div class="px-5 pb-5 sm:px-6"><p class="mb-3 text-[11px] tracking-wider text-fg-muted uppercase">press to switch<span class="ml-0.5 inline-block w-1.5 animate-blink text-fg-subtle">▌</span></p><div class="flex flex-nowrap items-center gap-1.5 overflow-x-auto py-1 [scrollbar-width:none] [&amp;::-webkit-scrollbar]:hidden"><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] h-9 shrink-0 px-2.5 text-[11px]">control</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-accent bg-accent text-accent-fg shadow-[inset_0_1px_0_0_#ffffffcc,0_1px_0_0_#71717a,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 h-9 shrink-0 px-2.5 text-[11px]">alt</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] h-9 shrink-0 px-2.5 text-[11px]">shift</button><span class="shrink-0 px-0.5 text-fg-faint">+</span><button type="button" class="select-none rounded-lg border font-sans leading-none border-accent bg-accent text-accent-fg shadow-[inset_0_1px_0_0_#ffffffcc,0_1px_0_0_#71717a,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 size-9 shrink-0 text-sm" aria-label="account 0: work">0</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-
122px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] size-9 shrink-0 text-sm" aria-label="account 1: personal">1</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] size-9 shrink-0 text-sm" aria-label="account 2: side project">2</button><button type="button" class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] outline-none transition-[transform,box-shadow,background-color,color] duration-100 focus-visible:outline focus-visible:outline-fg focus-visible:outline-offset-2 hover:bg-surface-4 hover:text-fg active:translate-y-px active:shadow-[inset_0_1px_0_0_#ffffff1f,0_1px_2px_0_#0000008c] size-9 shrink-0 text-sm" aria-label="account 3: client">3</button></div><p class="mt-4 text-[11px] text-fg-muted">↑ this demo obeys your keyboard — hold<!-- --> <span class="text-fg-muted">alt</span> and press a number.</p></div></div><!--astro:end--></astro-island> <div class="mt-5 flex flex-col items-center gap-1 text-fg-subtle"> <svg viewBox="0 0 48 56" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="h-11 w-9 animate-[arrow-bob_1.8s_ease-in-out_infinite]" aria-hidden="true"> <path d="M24 53 C 11 41, 13 22, 25 7"></path> <path d="M15 16 L 25 5 L 35 15"></path> </svg> <p class="font-sans text-xs text-fg-muted italic">give it a try</p> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-6xl px-5 py-20 sm:px-8 sm:py-28"> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase">
123the avatar dance
124</p> <h2 class="mt-4 max-w-2xl font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-4xl">
125four clicks and a new tab. every single switch.
126</h2> <p class="mt-4 max-w-xl font-human text-lg text-fg-muted">
127you do it more than you think — and never noticed the tax.
128</p> <div class="mt-10 grid gap-4 sm:grid-cols-2"> <div class="rounded-xl border border-border-strong bg-surface p-6 transition-colors duration-200 hover:border-border-strong-2"> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase">
129the old way
130</p> <ol class="mt-4 space-y-2 font-sans text-sm text-fg-muted"> <li>1 · click your avatar</li> <li>2 · wait for the menu</li> <li>3 · hunt for the account</li> <li>4 · click it</li> <li>5 · wait for a new tab</li> <li class="text-fg-muted">…lose your place</li> </ol> <p class="mt-5 font-human text-sm text-fg-muted">
131~4 clicks · a new tab · every time
132</p> </div> <div class="rounded-xl border border-border-strong-2 bg-surface-2 p-6 transition-colors duration-200 hover:border-border-strong-2"> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase">
133suprswitch
134</p> <div class="mt-4 flex flex-wrap items-center gap-2"> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-9 px-3 text-sm"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-9 text-sm">1</span> <span class="ml-1 text-fg-faint">→</span> <span class="font-human text-sm text-fg">you're there.</span> </div> <p class="mt-5 font-human text-sm text-fg-muted">
135two keys · same tab · under a second
136</p> <p class="mt-12 font-sans text-xs text-fg-muted">
137now do it 20 times a day. that adds up.
138</p> </div> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-6xl px-5 py-20 sm:px-8 sm:py-28"> <div class="grid items-center gap-12 sm:grid-cols-2 sm:gap-16"> <div> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase">
139learn it once
140</p> <h2 class="mt-4 font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-4xl">
141then never think about it again.
142</h2> <p class="mt-4 max-w-md font-human text-lg text-fg-muted">
143your fingers pick it up in an afternoon, and switching stops being a
144          task. one modifier, one number — that's the whole thing.
145</p> </div> <div class="flex flex-col gap-3"> <div class="flex items-center gap-3 rounded-xl border border-border-strong bg-surface px-5 py-4 transition-colors duration-200 hover:border-border-strong-2"> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-9 px-3 text-sm"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-9 text-sm">1</span> <span class="ml-2 text-fg-faint">→</span> <span class="font-human text-base text-fg">work</span> </div><div class="flex items-center gap-3 rounded-xl border border-border-strong bg-surface px-5 py-4 transition-colors duration-200 hover:border-border-strong-2"> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-9 px-3 text-sm"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-9 text-sm">2</span> <span class="ml-2 text-fg-faint">→</span> <span class="font-human text-base text-fg">personal</span> </div><div class="flex items-center gap-3 rounded-xl border border-border-strong bg-surface px-5 py-4 transition-colors duration-200 hover:border-border-strong-2"> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] h-9 px-3 text-sm"><span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span></span> <span class="text-fg-faint">+</span> <span class="inline-flex items-center justify-center select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] size-9 text-sm">3</span> <span class="ml-2 text-fg-faint">→</span> <span class="font-human text-base text-fg">the side project</span> </div> </div> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-6xl px-5 py-20 sm:px-8 sm:py-28"> <div class="grid items-center gap-12 sm:grid-cols-2 sm:gap-16"> <div> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase">
146switch by who, not what
147</p> <h2 class="mt-4 font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-4xl">
148you don't have a <span class="font-sans text-fg-subtle">/u/2</span>.
149          you have a life.
150</h2> <p class="mt-4 max-w-md font-human text-lg text-fg-muted">
151every other switcher makes you memorize indexes. suprswitch reads each
152          account's name and photo from google — on your device — and shows you
153<span class="text-fg-strong">people</span>.
154</p> <p class="mt-4 max-w-md font-human text-lg text-fg-muted">
155pop the switcher with your shortcut key and backtick (`), then cycle
156          through your accounts like your os app switcher — hold, tap, release.
157<span class="text-fg-strong">try it →</span> </p> </div> 
157<script>(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event("astro:visible"));})();</script>
157<astro-island uid="Z2gRKXx" prefix="r3" component-url="/_astro/SwitcherDemo.W8j_NsFn.js" component-export="default" renderer-url="/_astro/client.Bz692-Ao.js" props="{}" ssr client="visible" opts="{&quot;name&quot;:&quot;SwitcherDemo&quot;,&quot;value&quot;:true}" await-children><div class="w-full overflow-hidden rounded-xl border bg-surface p-2 transition-colors border-border-strong"><div class="flex items-center justify-between px-3 py-2.5"><span class="font-sans text-[10px] tracking-widest text-fg-subtle uppercase">switch account</span><div class="flex items-center gap-1"><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center h-5 px-1.5 text-[9px]">alt</span><span class="font-sans text-[10px] text-fg-faint">+</span><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-5 text-[9px]">`</span></div></div><button type="button" aria-pressed="true" class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors bg-surface-3"><span class="grid size-9 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-xs text-fg">JL</span><div class="min-w-0 flex-1"><p class="truncate font-human text-sm text-fg">work</p><p class="truncate font-sans text-xs text-fg-muted">[email protected]</p></div><span class="size-1.5 shrink-0 rounded-full bg-accent"></span><span class="select-none rounded-lg border font-sans leading-none border-accent bg-accent text-accent-fg shadow-[inset_0_1px_0_0_#ffffffcc,0_1px_0_0_#71717a,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-7 text-xs">0</span></button><button type="button" aria-pressed="false" class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors hover:bg-surface-2"><span class="grid size-9 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-xs text-fg">JL</span><div class="min-w-0 flex-1"><p class="truncate font-human text-sm text-fg">personal</p><p class="truncate font-sans text-xs text-fg-muted">[email protected]</p></div><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-7 text-xs">1</span></button><button type="button" aria-pressed="false" class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors hover:bg-surface-2"><span class="grid size-9 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-xs text-fg">JI</span><div class="min-w-0 flex-1"><p class="truncate font-human text-sm text-fg">side project</p><p class="truncate font-sans text-xs text-fg-muted">[email protected]</p></div><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-7 text-xs">2</span></button><button type="button" aria-pressed="false" class="flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors hover:bg-surface-2"><span class="grid size-9 shrink-0 place-items-center rounded-full border border-border-strong-2 bg-surface-3 font-human text-xs text-fg">JL</span><div class="min-w-0 flex-1"><p class="truncate font-human text-sm text-fg">client</p><p class="truncate font-sans text-xs text-fg-muted">[email protected]</p></div><span class="select-none rounded-lg border font-sans leading-none border-black/50 bg-surface-3 text-fg-strong shadow-[inset_0_1px_0_0_#ffffff24,0_1px_0_0_#000000,0_2px_4px_0_#0000008c] inline-flex items-center justify-center size-7 text-xs">3</span></button><p class="px-3 pt-2.5 pb-1 font-sans text-[11px] text-fg-faint">hold <span class="text-fg-muted">alt</span>, tap ` to cycle · release to switch</p></div><!--astro:end--></astro-island> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-6xl px-5 py-20 sm:px-8 sm:py-28"> <div class="grid gap-4 sm:grid-cols-2"> <div class="rounded-xl border border-border-strong bg-surface p-6 transition duration-200 hover:-translate-y-0.5 hover:border-border-strong-2 hover:bg-surface-2"> <h3 class="font-sans text-base text-fg">every google app, automatically</h3> <p class="mt-3 font-human text-[15px] leading-relaxed text-fg-muted"> gmail, drive, docs, calendar, meet, gemini, messages, maps… it switches the account right in the page&#39;s url, so even apps it&#39;s never seen just work. nothing to maintain. </p> </div><div class="rounded-xl border border-border-strong bg-surface p-6 transition duration-200 hover:-translate-y-0.5 hover:border-border-strong-2 hover:bg-surface-2"> <h3 class="font-sans text-base text-fg">always the right account</h3> <p class="mt-3 font-human text-[15px] leading-relaxed text-fg-muted"> set a default, and every google link opens the account you actually meant. no more “ugh, wrong account” the moment a page loads. </p> </div><div class="rounded-xl border border-border-strong bg-surface p-6 transition duration-200 hover:-translate-y-0.5 hover:border-border-strong-2 hover:bg-surface-2"> <h3 class="font-sans text-base text-fg">private, full stop</h3> <p class="mt-3 font-human text-[15px] leading-relaxed text-fg-muted"> no account, no sign-up, no ad networks. your account names and photos are read locally and sent nowhere — the extension tracks nothing and phones home to no one. </p> </div><div class="rounded-xl border border-border-strong bg-surface p-6 transition duration-200 hover:-translate-y-0.5 hover:border-border-strong-2 hover:bg-surface-2"> <h3 class="font-sans text-base text-fg">one second, same tab</h3> <p class="mt-3 font-human text-[15px] leading-relaxed text-fg-muted"> it switches the tab you&#39;re already on. no fresh window, no lost draft, no waiting for a page you didn&#39;t want. </p> </div> </div> <div class="mt-12 text-center"> <p class="font-sans text-xs tracking-wider text-fg-muted uppercase">
158works everywhere you're signed in
159</p> <div class="mt-5 flex flex-wrap justify-center gap-2"> <span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> gmail </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> drive </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> docs </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> sheets </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> slides </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> calendar </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> meet </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> gemini </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> messages </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> maps </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> keep </span><span class="rounded-full border border-border-strong bg-surface px-3 py-1 font-sans text-sm text-fg-muted transition-colors duration-200 hover:border-border-strong-2 hover:text-fg-strong"> photos </span> </div> <p class="mt-5 font-sans text-xs text-fg-muted">
160if it's a google.com app, it works — no per-app setup.
161</p> </div> </div> </section> <section class="border-t border-border"> <div class="reveal mx-auto max-w-3xl px-5 py-20 sm:px-8 sm:py-28"> <h2 class="font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-4xl">
162questions, answered.
163</h2> <div class="mt-8 divide-y divide-border border-y border-border">
163 <details class="group" data-faq-q="does it cost anything?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> does it cost anything? <span class="text-fg-faint transition-transform group-open:rotate-45">
164+
165</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> no — it&#39;s free, with no account and no sign-up. </p> </details><details class="group" data-faq-q="is my data safe?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> is my data safe? <span class="text-fg-faint transition-transform group-open:rotate-45">
166+
167</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> yes. the extension reads your account names and photos on your device and sends them nowhere — it has no tracking or analytics at all. (this website uses a cookieless, privacy-friendly analytics tool — no cookies, no personal data about you.) </p> </details><details class="group" data-faq-q="which key do i press?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> which key do i press? <span class="text-fg-faint transition-transform group-open:rotate-45">
168+
169</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> your pick — alt/option, control or shift — then a number 0–9. change it anytime in the popup. </p> </details><details class="group" data-faq-q="can i pick an account from a list?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> can i pick an account from a list? <span class="text-fg-faint transition-transform group-open:rotate-45">
170+
171</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> yes. hold your shortcut key and tap the backtick ` (the key above tab) to pop up a switcher, then cycle through your accounts — hold, tap, release — like your os app switcher. or just press a number to jump. </p> </details><details class="group" data-faq-q="does it work in every google app?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> does it work in every google app? <span class="text-fg-faint transition-transform group-open:rotate-45">
172+
173</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> if it lives on google.com, yes. it switches the account in the url, so new google apps work without an update. </p> </details><details class="group" data-faq-q="which browsers does it work in?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> which browsers does it work in? <span class="text-fg-faint transition-transform group-open:rotate-45">
174+
175</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted">
175 chrome and chromium browsers (edge, brave, opera, arc, vivaldi, comet) from the chrome web store, and firefox and firefox-based browsers (zen, librewolf, waterfox) from firefox add-ons. the install button picks the right store for your browser. </p> </details><details class="group" data-faq-q="how is it different from chrome's avatar menu?"> <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-5 font-sans text-base text-fg-strong transition-colors hover:text-fg"> how is it different from chrome&#39;s avatar menu? <span class="text-fg-faint transition-transform group-open:rotate-45">
176+
177</span> </summary> <p class="pb-5 font-human text-[15px] leading-relaxed text-fg-muted"> the avatar menu takes several clicks and opens a new tab. suprswitch jumps to the account in the same tab, from the keyboard, in under a second. </p> </details> </div> </div> </section> 
177<script type="module">for(const e of document.querySelectorAll("[data-faq-q]"))e.addEventListener("toggle",()=>{e.open&&window.stonks?.event("FAQ Opened",{question:e.dataset.faqQ??""})});</script>
177 <section class="border-t border-border"> <div class="reveal mx-auto flex max-w-3xl flex-col items-center px-5 py-24 text-center sm:px-8 sm:py-32"> <h2 class="font-human text-3xl leading-tight font-semibold tracking-tight text-fg sm:text-5xl">
178the avatar menu had a good run.
179</h2> <p class="mt-5 max-w-md font-human text-lg text-fg-muted">
180install it, hold a key, press a number — that's the entire onboarding.
181</p> <div class="mt-8 flex flex-col items-center gap-3"> <!-- The store link + browser name default to Chrome (SSG) and are tailored to the
182visitor's browser client-side by the script in Layout.astro (data-cta hooks). --><a href="https://chromewebstore.google.com/detail/suprswitch-account-switch/mmnnelfhickmgpdienobikocjopndjeg" data-cta data-cta-firefox="https://addons.mozilla.org/firefox/addon/suprswitch-account-switcher/" data-s-event="Install Click" data-s-event-props="location=cta" target="_blank" rel="noopener" class="inline-flex items-center justify-center rounded-lg bg-accent px-5 py-2.5 font-sans text-sm font-medium text-accent-fg transition-all hover:scale-[1.02] hover:opacity-90 active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg px-6 py-3 text-base"> <span data-cta-label>+ add to chrome</span> </a> <span class="font-sans text-xs text-fg-muted">
183then press <span class="mod-win">alt</span><span class="mod-mac">option</span><span class="mod-pick"></span> + a number on any google page
184</span> </div> </div> </section> </main> <footer class="border-t border-border"> <div class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-5 py-8 sm:flex-row sm:px-8"> <div class="flex items-center gap-2"> <img src="/iconWhite256.png" alt="suprswitch" class="size-5" width="20px" height="20px" title="suprswitch" loading="lazy"> <span class="font-sans text-sm text-fg">suprswitch</span> <span class="font-sans text-sm text-fg-muted">
185· a tiny tool by
186<a href="https://emaitchess.com/?utm_source=suprswitch&utm_medium=referral&utm_campaign=product-credit" target="_blank" rel="noopener" class="text-fg-muted underline underline-offset-2 hover:text-fg">emaitchess</a> </span> </div> <div class="flex items-center gap-5 font-sans text-sm text-fg-muted"> <a href="mailto:[email protected]" class="hover:text-fg">help &amp; feedback</a> <a href="/privacy" class="hover:text-fg">privacy</a> <span class="text-fg-muted">© 2026</span> <div class="flex items-center gap-1" role="group" aria-label="theme"> <button type="button" data-theme-option="system" aria-pressed="true" class="rounded-md border border-border px-2 py-1 font-sans text-[11px] lowercase text-fg-muted transition-colors hover:text-fg aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-accent-fg"> system </button><button type="button" data-theme-option="light" aria-pressed="false" class="rounded-md border border-border px-2 py-1 font-sans text-[11px] lowercase text-fg-muted transition-colors hover:text-fg aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-accent-fg"> light </button><button type="button" data-theme-option="dark" aria-pressed="false" class="rounded-md border border-border px-2 py-1 font-sans text-[11px] lowercase text-fg-muted transition-colors hover:text-fg aria-pressed:border-accent aria-pressed:bg-accent aria-pressed:text-accent-fg"> dark </button> </div> </div> </div> </footer>  
186<script>
187      // Tailor every install CTA (the [data-cta] links) to the visitor's browser.
188      // The engine decides the store link — Firefox-family → its AMO URL (the
189      // link's data-cta-firefox), otherwise the default Chrome Web Store href
190      // (every Chromium browser installs from it). The name is best-effort: many
191      // forks (Zen, Arc, Comet, Atlas) ship a stock UA and can't be named, so they
192      // fall back to "firefox" / "chrome".
193      (function () {
194        var ua = navigator.userAgent;
195        var brands =
196          (navigator.userAgentData && navigator.userAgentData.brands) || [];
197        var has = function (n) {
198          return brands.some(function (b) {
199            return b.brand.toLowerCase().indexOf(n) !== -1;
200          });
201        };
202        var name = "chrome";
203        var firefox = false;
204        if (/firefox/i.test(ua) && !/seamonkey/i.test(ua)) {
205          firefox = true;
206          name = /librewolf/i.test(ua)
207            ? "librewolf"
208            : /waterfox/i.test(ua)
209              ? "waterfox"
210              : "firefox";
211        } else if (/edg\//i.test(ua) || has("edge")) name = "edge";
212        else if (/opr\//i.test(ua) || has("opera")) name = "opera";
213        else if (/vivaldi/i.test(ua)) name = "vivaldi";
214        else if (/samsungbrowser/i.test(ua)) name = "samsung internet";
215        else if (has("brave") || "brave" in navigator) name = "brave";
216        else {
217          for (var i = 0; i < brands.length; i++) {
218            var b = brands[i].brand;
219            if (/chromium|not.a.brand|google chrome/i.test(b)) continue;
220            name = b.toLowerCase();
221            break;
222          }
223        }
224        var ctas = document.querySelectorAll("[data-cta]");
225        for (var j = 0; j < ctas.length; j++) {
226          if (firefox) {
227            var ff = ctas[j].getAttribute("data-cta-firefox");
228            if (ff) ctas[j].setAttribute("href", ff);
229          }
230          var label = ctas[j].querySelector("[data-cta-label]");
231          if (label) label.textContent = "+ add to " + name;
232        }
233      })();
234    </script>
234 
234<script>
235      // Footer theme toggle (system / light / dark). Persists to localStorage,
236      // applies .dark, marks the active option, and follows the OS while on system.
237      (function () {
238        var mq = matchMedia("(prefers-color-scheme: dark)");
239        function get() {
240          try {
241            return localStorage.getItem("theme") || "system";
242          } catch (e) {
243            return "system";
244          }
245        }
246        function apply(t) {
247          var dark = t === "dark" || (t === "system" && mq.matches);
248          document.documentElement.classList.toggle("dark", dark);
249          document.querySelectorAll("[data-theme-option]").forEach(function (b) {
250            b.setAttribute(
251              "aria-pressed",
252              b.getAttribute("data-theme-option") === t ? "true" : "false",
253            );
254          });
255        }
256        document.querySelectorAll("[data-theme-option]").forEach(function (b) {
257          b.addEventListener("click", function () {
258            var t = b.getAttribute("data-theme-option");
259            try {
260              localStorage.setItem("theme", t);
261            } catch (e) {}
262            apply(t);
263          });
264        });
265        mq.addEventListener("change", function () {
266          if (get() === "system") apply("system");
267        });
268        apply(get());
269      })();
270    </script>
270 </body> </html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.