/* The search on handeware.com's home (2026-10-31; since 2026-11-01 the home is ONLY the search, like Google, and
   Today is at /#today). Three views, body[data-sx] = home | today | results, set by the inline script at the top of
   <body>. Every class starts with sx-. Nordic, from store.css's tokens: light paper, white surfaces with a
   hairline, one blue, system type. */
:root{--sx-paper:var(--s-paper,#f7f5f1);--sx-surf:var(--s-surf,#fff);--sx-ink:var(--s-ink,#121417);--sx-ink2:var(--s-ink2,#2e3642);--sx-muted:var(--s-muted,#5b626c);
  --sx-line:var(--s-line,#e3e5e8);--sx-soft:var(--s-soft,#eff1f4);--sx-blue:var(--s-blue,#2e66d1);--sx-blue-hover:var(--s-blue-hover,#2253b4);--sx-blue-soft:var(--s-blue-soft,#e8effc);
  --sx-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif}
/* /#today is the whole page now: the browser's jump to the fragment must leave it at the top */
#today{scroll-margin-top:400px}
.sx-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sx-hero [hidden],.sx-results[hidden],.sx-results [hidden]{display:none!important}

/* the hero: Google-simple, our look */
.sx-hero{display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(28px,7vh,72px) 0 clamp(8px,3vh,28px);text-align:center;scroll-margin-top:84px}
.sx-brand{display:inline-flex;align-items:center;gap:14px;margin:0;font:800 clamp(40px,6vw,60px)/1.05 var(--sx-sans);letter-spacing:-.02em;color:var(--sx-blue)}
.sx-mark{display:inline-block;width:.95em;height:.95em;flex:none;background:var(--sx-blue);-webkit-mask:url(/mark-bloom.png) center/contain no-repeat;mask:url(/mark-bloom.png) center/contain no-repeat}
.sx-form{display:flex;align-items:center;gap:8px;width:100%;max-width:720px;min-width:0;background:var(--sx-surf);border:1.5px solid var(--sx-line);border-radius:16px;padding:5px 5px 5px 16px}
.sx-form:focus-within{border-color:var(--sx-blue);box-shadow:0 0 0 4px var(--sx-blue-soft)}
.sx-glass{width:20px;height:20px;flex:none;color:var(--sx-muted)}
.sx-form input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:19px;color:var(--sx-ink);min-height:46px;padding:0 4px;-webkit-appearance:none;appearance:none}
.sx-go{flex:none;min-height:46px;padding:0 22px;border:0;border-radius:12px;background:var(--sx-blue);color:#fff;font:800 16px/1 var(--sx-sans);cursor:pointer}
.sx-go:hover{background:var(--sx-blue-hover)}
.sx-line{margin:0;color:var(--sx-muted);font-size:15px;line-height:1.45;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px}
.sx-line a{color:var(--sx-blue);font-weight:600}
.sx-line a:hover{text-decoration:underline}
.sx-connect{min-height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--sx-surf);box-shadow:inset 0 0 0 1.5px var(--sx-line);color:var(--sx-ink);font:700 14px/1 var(--sx-sans);cursor:pointer}
.sx-connect:hover{box-shadow:inset 0 0 0 1.5px var(--sx-blue);color:var(--sx-blue)}
.sx-err{color:#a1361f}

/* the home on every view: the header is the logo and the apps menu (the grid, top right), no search frame (the home's own box and
   verticals are the frame); on a computer it stays at the top while the results scroll (every other page's header scrolls away) */
@media (min-width:761px){body[data-sx] .ah{position:sticky;top:0}}

/* the plain home: the logo, the box, the subtitle and the grid button, centred in the first screen like Google's
   (a little above the middle); the footer is below the fold. Everything else stays in the page, hidden. */
body[data-sx="home"] .s-main>:not(.sx-hero){display:none!important}
body[data-sx="home"] .wallbg,body[data-sx="home"] .sx-connect{display:none}
body[data-sx="home"] .ah{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom:0}
body[data-sx="home"] .ah-brand{display:none}
body[data-sx="home"] .ah-bar{justify-content:flex-end}
body[data-sx="home"] .s-main{min-height:100vh;min-height:100svh;justify-content:center;padding-top:0;padding-bottom:0}
body[data-sx="home"] .sx-hero{padding:0 0 8vh}

/* Today (/#today): the box stays, small, at the top (the header has no box of its own); no logo, no subtitle, no Connect */
body[data-sx="today"] .sx-hero{align-items:flex-start;text-align:left;padding:4px 0 0;gap:12px}
body[data-sx="today"] .sx-brand,body[data-sx="today"] .sx-line,body[data-sx="today"] .sx-connect{display:none}

/* with a query: the hero becomes the bar, Today steps aside */
body[data-sx="results"] .sx-hero{align-items:flex-start;text-align:left;padding:4px 0 0;gap:12px}
body[data-sx="results"] .sx-brand{display:none}
body[data-sx="results"] .sx-form{max-width:720px}
body[data-sx="results"] .sx-line{justify-content:flex-start}
body[data-sx="results"] .s-main>:not(.sx-hero):not(.sx-results){display:none!important}
body[data-sx="results"] .wallbg{display:none}
body[data-sx="results"] .s-main{gap:16px}

.sx-results{display:flex;flex-direction:column;gap:14px;min-width:0}
.sx-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;border-bottom:1px solid var(--sx-line)}
.sx-verts{display:flex;gap:4px}
.sx-vert{min-height:44px;padding:0 14px;border:0;background:transparent;color:var(--sx-ink2);font:700 16px/1 var(--sx-sans);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.sx-vert:hover{color:var(--sx-ink)}
.sx-vert[aria-pressed="true"]{color:var(--sx-blue);border-bottom-color:var(--sx-blue)}
.sx-layouts{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0}
.sx-lay{min-height:34px;padding:0 12px;border-radius:999px;border:0;background:transparent;color:var(--sx-ink2);font:700 14px/1 var(--sx-sans);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--sx-line)}
.sx-lay:hover{background:var(--sx-soft)}
.sx-lay[aria-pressed="true"]{background:var(--sx-ink);color:#fff;box-shadow:none}
.sx-meta{margin:0;color:var(--sx-muted);font-size:14px;min-height:20px}
.sx-body{display:flex;align-items:flex-start;gap:32px;min-width:0}
.sx-out{max-width:720px;display:flex;flex-direction:column;gap:22px;min-width:0;font-size:17px;line-height:1.45}
.sx-body .sx-out{flex:1 1 0}
body[data-sx-layout="cards"] .sx-out,body[data-sx-layout="compact"] .sx-out{max-width:1000px}
.sx-out a{text-decoration:none}
.sx-note{margin:0;padding:12px 16px;border-radius:12px;background:var(--sx-blue-soft);color:var(--sx-ink2);font-size:16px}
.sx-empty,.sx-wait{margin:0;color:var(--sx-muted)}
.sx-group{margin:6px 0 -6px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted)}

/* Classic */
.sx-list{display:flex;flex-direction:column;gap:26px;margin:0;padding:0}
.sx-url{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:14px;color:var(--sx-muted);line-height:1.4;min-width:0}
.sx-site{color:var(--sx-ink2);font-weight:600}
.sx-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.sx-kind{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--sx-blue);background:var(--sx-blue-soft);border-radius:6px;padding:1px 6px}
.sx-asof{font-size:13px}
.sx-title{margin:3px 0 4px;font-size:20px;line-height:1.3;font-weight:650}
.sx-title a{color:var(--sx-blue)}
.sx-title a:hover{text-decoration:underline}
.sx-title a,.sx-title span{display:inline-block;min-height:28px}
.sx-snip{margin:0;color:var(--sx-ink2);font-size:16px;line-height:1.5;overflow-wrap:anywhere}

/* The Classic list, "googly" (owner, 2026-11-02): the structure of a results page in our own look. A round 28 px icon beside a two-line head (the site's
   name; a small breadcrumb of where the link goes), then the title (regular weight, our blue, a darker blue once visited), then the snippet (grey, up to
   three lines, the query's words in bold). 28 px between results, a column of at most 650 px, left-aligned under the box. Cards and Compact are as they were. */
.sx-list{gap:28px}
.sx-head{display:flex;align-items:center;gap:12px;min-width:0}
.sx-head-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.sx-ic{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--sx-soft);font:600 14px/1 var(--sx-sans);overflow:hidden}
.sx-ic-hw{background:var(--sx-blue-soft)}
.sx-ic-hw i{display:block;width:16px;height:16px;background:var(--sx-blue);-webkit-mask:url(/mark-bloom.png) center/contain no-repeat;mask:url(/mark-bloom.png) center/contain no-repeat}
.sx-head .sx-url{font-size:14px;line-height:1.3;color:var(--sx-ink)}
.sx-head .sx-site{color:var(--sx-ink);font-weight:500}
.sx-crumb{font-size:12.5px;line-height:1.3;color:var(--sx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sx-list .sx-title,.sx-list .sx-w .sx-title{margin:8px 0 4px;font-size:20px;line-height:1.3;font-weight:400}
.sx-list .sx-snip,.sx-list .sx-w .sx-snip{font-size:15px;line-height:1.55;color:var(--sx-muted);white-space:normal;text-overflow:clip;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.sx-list .sx-snip b{font-weight:700;color:var(--sx-ink2)}
.sx-list .sx-r,.sx-list .sx-w{min-width:0}
body[data-sx-layout="classic"] .sx-out,body[data-sx-layout="answer"] .sx-out{max-width:650px}

/* Answer first and Chat: the answer, as written */
.sx-ans{background:var(--sx-surf);border:1px solid var(--sx-line);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.sx-ans-label{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted)}
.sx-ans-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:17px;line-height:1.55;color:var(--sx-ink);min-height:1.55em}
.sx-ans.sx-streaming .sx-ans-text::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--sx-blue);border-radius:2px;animation:sx-blink 1s steps(2) infinite}
@keyframes sx-blink{50%{opacity:0}}
.sx-ans-note{margin:0;color:var(--sx-muted);font-size:15px}
.sx-ans-note:empty{display:none}
.sx-src{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;counter-reset:sxsrc}
.sx-src li{counter-increment:sxsrc;font-size:14px}
.sx-src li a,.sx-src li span{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;background:var(--sx-soft);color:var(--sx-ink2);font-weight:600}
.sx-src li a::before,.sx-src li span::before{content:counter(sxsrc);font-size:12px;font-weight:800;color:var(--sx-blue)}
.sx-src li a:hover{background:var(--sx-blue-soft)}

/* Cards */
.sx-kc{background:var(--sx-surf);border:1px solid var(--sx-line);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.sx-kc-title{margin:0;font-size:26px;letter-spacing:-.01em;line-height:1.2}
.sx-kc-title a,.sx-kc-title span{color:var(--sx-ink)}
.sx-kc-sum{margin:0;color:var(--sx-ink2);font-size:16.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.sx-kc-facts{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px;border-top:1px solid var(--sx-line);padding-top:12px}
.sx-kc-facts dt{font-size:13px;font-weight:700;color:var(--sx-muted);text-transform:uppercase;letter-spacing:.04em}
.sx-kc-facts dd{margin:2px 0 0;font-size:16px;color:var(--sx-ink);overflow-wrap:anywhere}
.sx-kc-asof{display:block;font-size:12.5px;color:var(--sx-muted)}
.sx-kc-links{display:flex;flex-wrap:wrap;gap:6px}
.sx-kc-link{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--sx-blue-soft);color:var(--sx-blue);font-weight:700;font-size:15px}
.sx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.sx-rc{background:var(--sx-surf);border:1px solid var(--sx-line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sx-rc .sx-title{font-size:18px}
.sx-rc .sx-snip{font-size:15px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Chat */
.sx-chat{display:flex;flex-direction:column;gap:14px}
.sx-turn{display:flex}
.sx-turn.sx-me{justify-content:flex-end}
.sx-bubble{margin:0;max-width:80%;padding:10px 16px;border-radius:18px 18px 4px 18px;background:var(--sx-ink);color:#fff;white-space:pre-wrap;overflow-wrap:anywhere}
.sx-turn.sx-them .sx-ans{max-width:92%;border-radius:18px 18px 18px 4px}
.sx-chat-form{display:flex;gap:8px;position:sticky;bottom:12px;background:var(--sx-surf);border:1.5px solid var(--sx-line);border-radius:16px;padding:5px 5px 5px 16px}
.sx-chat-form:focus-within{border-color:var(--sx-blue)}
.sx-chat-q{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;min-height:44px}

/* Compact */
.sx-compact{list-style:none;margin:0;padding:0;border-top:1px solid var(--sx-line)}
.sx-cr{border-bottom:1px solid var(--sx-line)}
.sx-cr-a{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,3fr);gap:14px;align-items:center;min-height:40px;padding:4px 8px;color:var(--sx-ink);font-size:15px}
.sx-cr-a:hover{background:var(--sx-soft)}
.sx-cr-a[aria-current="true"],.sx-cr-a:focus-visible{background:var(--sx-blue-soft);outline:none;box-shadow:inset 3px 0 0 var(--sx-blue)}
.sx-cr-t{font-weight:700;color:var(--sx-blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-cr-s{color:var(--sx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.sx-cr-n{color:var(--sx-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.sx-cr-hint{margin:0;color:var(--sx-muted);font-size:13px}

/* From the web (stage 2): its own section ABOVE everything of ours, never mixed into our list; ours follow under "On Handeware".
   One-line descriptions; the official site on a line of its own. */
.sx-web{display:flex;flex-direction:column;gap:14px;min-width:0}
.sx-ours-h{margin:10px 0 -4px;padding-top:18px;border-top:1px solid var(--sx-line);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted)}
.sx-web-sec{display:flex;flex-direction:column;gap:14px;min-width:0}
.sx-web-h{margin:0;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted)}
.sx-w{display:flex;flex-direction:column;gap:2px;min-width:0}
.sx-w .sx-title{font-size:19px}
.sx-w .sx-snip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15.5px}
.sx-w.sx-rc .sx-snip{white-space:nowrap;display:block;-webkit-line-clamp:unset}
.sx-wsite{margin:0;font-size:14px;color:var(--sx-muted)}
.sx-wsite a{color:var(--sx-blue);font-weight:600}
.sx-wsite a:hover{text-decoration:underline}
.sx-web-credit{margin:0;font-size:12.5px;line-height:1.4;color:var(--sx-muted)}

/* How deep this search went: a right column on a computer, above the results on a phone. Text wears the page's ink,
   never the bar's colour; every bar has its label and its value as words. */
.sx-depth{flex:0 0 300px;width:300px;position:sticky;top:84px;box-sizing:border-box;background:var(--sx-surf);border:1px solid var(--sx-line);border-radius:16px;padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.4;color:var(--sx-ink2)}
.sx-depth[hidden]{display:none}
.sx-d-h{margin:0;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted)}
.sx-d-sum{margin:0;font-size:15px;line-height:1.45;color:var(--sx-ink2)}
.sx-d-rows{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.sx-d-row{display:flex;flex-direction:column;gap:4px}
.sx-d-t{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 10px}
.sx-d-name{font-weight:700;color:var(--sx-ink)}
.sx-d-val{color:var(--sx-ink2);text-align:right}
.sx-d-track{position:relative;height:10px}
.sx-d-g{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--sx-line)}
.sx-d-bar{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:#7f8998}
.sx-d-me .sx-d-bar{background:var(--sx-blue)}
.sx-d-axis{position:relative;height:22px;margin-top:-4px}
.sx-d-tick{position:absolute;top:0;width:1px;height:5px;margin-left:-.5px;background:#c3c8cf}
.sx-d-tl{position:absolute;top:7px;transform:translateX(-50%);font-size:12px;line-height:1.2;color:var(--sx-muted);white-space:nowrap}
.sx-d-cap,.sx-d-src{margin:0;font-size:12.5px;line-height:1.4;color:var(--sx-muted)}
.sx-d-cap{margin-top:-2px}

/* The eBay row ("Ads · eBay", hwDeals.search in deals.js): under the card, or under the first result */
.deals.sx-ebay{margin:0;padding:12px 14px;border:1px solid var(--sx-line);border-radius:14px;background:var(--sx-surf);display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.35}
.deals.sx-ebay[hidden]{display:none}
.sx-ebay-label{margin:0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted)}
.sx-ebay .dsr{display:flex;flex-direction:column;gap:6px;min-width:0}
.sx-ebay .dsl{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 14px 6px 6px;border-radius:12px;background:var(--sx-soft);color:var(--sx-ink);font-weight:700;font-size:17px;text-decoration:none}
.sx-ebay .dsl:hover,.sx-ebay .dsl:focus-visible{background:var(--sx-blue-soft)}
.sx-ebay .dst{flex:1;min-width:0;overflow-wrap:anywhere}
.sx-ebay .dsg{flex:none;color:var(--sx-blue);font-size:24px;line-height:1}
.sx-ebay small{margin:2px 0 0}
.sx-cards>.sx-ebay{grid-column:1/-1}
.sx-cr-ad{padding:10px 0;list-style:none}

@media (max-width:900px){
  .sx-body{flex-direction:column;gap:14px}
  .sx-body .sx-out{flex:none;width:100%}
  .sx-depth{position:static;flex:none;width:100%}      /* after everything else on a phone (owner, 2026-11-02) */
}
@media (max-width:760px){
  /* a card at the top of a phone's results (the web section comes first): tighter, so the first web result starts in the first screen */
  .sx-kc{padding:14px 16px;gap:8px;border-radius:16px}
  .sx-kc-title{font-size:22px}
  .sx-kc-sum{font-size:15.5px;line-height:1.45}
  .sx-kc-facts{gap:6px 14px;padding-top:8px}
  .sx-kc-facts dd{font-size:15px}
  .sx-kc-link{min-height:34px;padding:0 12px;font-size:14px}
}
@media (max-width:760px){
  .sx-depth{padding:12px 14px 10px;gap:8px}
  .sx-d-sum{font-size:14px}
  .sx-d-rows{gap:7px}
}
@media (max-width:760px){
  .sx-hero{padding-top:20px;gap:18px}
  .sx-brand{font-size:40px}
  .sx-go{padding:0 16px}
  .sx-bar{flex-direction:column;align-items:stretch;gap:4px}
  .sx-verts{overflow-x:auto}
  .sx-layouts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .sx-layouts::-webkit-scrollbar{display:none}
  .sx-lay{flex:none}
  .sx-title{font-size:19px}
  .sx-cr-a{grid-template-columns:minmax(0,1fr);gap:0;padding:8px}
  .sx-cr-s{display:none}
  .sx-bubble{max-width:90%}
  .sx-turn.sx-them .sx-ans{max-width:100%}
}
@media (prefers-reduced-motion:reduce){.sx-ans.sx-streaming .sx-ans-text::after{animation:none}}

/* Our apps under the box on the plain home: big icons, the name under each, the whole tile a link (owner, 2026-11-02: "icon forward, jumbo"). */
.sx-apps{display:none;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:18px}
body[data-sx="home"] .sx-apps{display:flex}
.sx-apps a{display:flex;flex-direction:column;align-items:center;gap:10px;width:120px;color:var(--sx-ink);font-weight:700;font-size:15px;text-align:center;text-decoration:none;line-height:1.25}
.sx-apps img{width:112px;height:112px;border-radius:26px;box-shadow:0 2px 10px rgba(18,20,23,.14);background:#fff}
.sx-apps a:hover img,.sx-apps a:focus-visible img{transform:translateY(-2px);box-shadow:0 6px 18px rgba(18,20,23,.18)}
@media (max-width:600px){.sx-apps{gap:14px 10px;margin-top:12px}.sx-apps a{width:76px;font-size:12.5px;gap:7px}.sx-apps img{width:72px;height:72px;border-radius:17px}}

/* The web section's status while the reader works: a line and a moving bar; still for visitors who ask for less motion. */
.sx-web-wait{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sx-web-msg{margin:0;color:var(--sx-muted);font-size:14.5px}
.sx-web-bar{position:relative;height:4px;max-width:420px;border-radius:2px;background:var(--sx-soft);overflow:hidden}
.sx-web-bar span{position:absolute;top:0;bottom:0;width:35%;border-radius:2px;background:var(--sx-blue);animation:sx-web-run 1.1s ease-in-out infinite}
@keyframes sx-web-run{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.sx-web-bar span{animation:none;left:0;width:100%;opacity:.45}}


/* ======================================================================================================================================
   THE GOOGLE-LIKE LOOK (owner, 2026-11-02: "make search results look more googly", "the cream bg in search needs to go, match googles color and
   layout", "also the cream from the main home also, follow google home"). The home and the results only (body[data-sx] = home | results; the
   store's pages and Today keep their cream). The STRUCTURE of Google's pages in our own look: our logo, our font, our blue on the buttons.
   ====================================================================================================================================== */
body:is([data-sx="home"],[data-sx="results"]){--sx-paper:#fff;--sx-surf:#fff;--sx-ink:#202124;--sx-ink2:#4d5156;--sx-muted:#4d5156;--sx-line:#ebebeb;--sx-soft:#f1f3f4;
  --sx-link:#1a0dab;--sx-visited:#681da8;--sx-blue-soft:#e8f0fe;--sx-box-line:#dfe1e5;--sx-bar:#f2f2f2;--sx-btn:#f8f9fa;--sx-box:#fff;background:#fff;color:#202124}
@media (prefers-color-scheme:dark){
  body:is([data-sx="home"],[data-sx="results"]){--sx-paper:#1f1f1f;--sx-surf:#1f1f1f;--sx-ink:#e8eaed;--sx-ink2:#bdc1c6;--sx-muted:#bdc1c6;--sx-line:#3c4043;--sx-soft:#303134;
    --sx-link:#99c3ff;--sx-visited:#c58af9;--sx-blue-soft:#2b3a55;--sx-box-line:#5f6368;--sx-bar:#171717;--sx-btn:#303134;--sx-box:#303134;background:#1f1f1f;color:#e8eaed}
}
body:is([data-sx="home"],[data-sx="results"]) .ah{background:var(--sx-paper)}
body[data-sx="results"] .ah{border-bottom:1px solid var(--sx-line)}
body:is([data-sx="home"],[data-sx="results"]) .hw-apps summary{color:var(--sx-ink2)}
body:is([data-sx="home"],[data-sx="results"]) .hw-apps summary:hover,body:is([data-sx="home"],[data-sx="results"]) .hw-apps[open] summary{background:var(--sx-soft)}
body:is([data-sx="home"],[data-sx="results"]) .af{background:var(--sx-paper);border-top-color:var(--sx-line)}
body:is([data-sx="home"],[data-sx="results"]) .af-col a,body:is([data-sx="home"],[data-sx="results"]) .langs a{color:var(--sx-ink2)}
body:is([data-sx="home"],[data-sx="results"]) .af-col b,body:is([data-sx="home"],[data-sx="results"]) .af-note,body:is([data-sx="home"],[data-sx="results"]) .af-about p,body:is([data-sx="home"],[data-sx="results"]) .langs{color:var(--sx-muted)}
body:is([data-sx="home"],[data-sx="results"]) .sx-ebay{background:var(--sx-surf);border-color:var(--sx-line)}
body:is([data-sx="home"],[data-sx="results"]) .sx-ebay a.dsl{background:var(--sx-soft);color:var(--sx-ink)}

/* the box: white (dark: #303134), pill-shaped, a 1 px hairline, a soft shadow on hover and focus; the × inside it */
body:is([data-sx="home"],[data-sx="results"]) .sx-form{background:var(--sx-box);border:1px solid var(--sx-box-line);border-radius:999px;padding:3px 6px 3px 18px;max-width:584px;transition:box-shadow .15s}
body:is([data-sx="home"],[data-sx="results"]) .sx-form:hover,body:is([data-sx="home"],[data-sx="results"]) .sx-form:focus-within{box-shadow:0 1px 6px rgba(32,33,36,.28);border-color:var(--sx-box-line)}
body:is([data-sx="home"],[data-sx="results"]) .sx-form input{font-size:16px;min-height:40px}
body:is([data-sx="home"],[data-sx="results"]) .sx-go{border-radius:999px;min-height:38px;padding:0 18px}
.sx-clear{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--sx-muted);font:400 24px/1 var(--sx-sans);cursor:pointer}
.sx-clear:hover{background:var(--sx-soft)}
.sx-clear[hidden]{display:none}

/* titles, snippets and the rest of a result, in Google's colours */
body:is([data-sx="home"],[data-sx="results"]) .sx-title a{color:var(--sx-link)}
body:is([data-sx="home"],[data-sx="results"]) .sx-title a:visited{color:var(--sx-visited)}
body:is([data-sx="home"],[data-sx="results"]) .sx-list .sx-snip b{color:inherit}
body:is([data-sx="home"],[data-sx="results"]) .sx-vert{color:var(--sx-ink2);font-weight:500}
body:is([data-sx="home"],[data-sx="results"]) .sx-vert[aria-pressed="true"]{color:var(--sx-ink);border-bottom-color:var(--sx-ink)}
body:is([data-sx="home"],[data-sx="results"]) .sx-meta{color:var(--sx-muted)}
body:is([data-sx="home"],[data-sx="results"]) .sx-lay[aria-pressed="true"]{background:var(--sx-ink);color:var(--sx-paper)}
.sx-list .sx-title a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-list .sx-title,.sx-list .sx-w .sx-title{min-width:0}
.sx-head{position:relative}
.sx-sect{color:var(--sx-muted);margin-left:-2px}
.sx-head .sx-kind{display:none}
.sx-more{flex:none;margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--sx-muted);font:600 20px/1 var(--sx-sans);cursor:pointer}
.sx-more:hover,.sx-more[aria-expanded="true"]{background:var(--sx-soft)}
.sx-pop{position:absolute;right:0;top:36px;z-index:30;width:min(300px,calc(100vw - 32px));box-sizing:border-box;background:var(--sx-surf);border:1px solid var(--sx-line);border-radius:14px;box-shadow:0 8px 28px rgba(32,33,36,.2);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.sx-pop-h{margin:0;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted)}
.sx-pop-p{margin:0;font-size:15px;color:var(--sx-ink)}
.sx-pop-copy{align-self:flex-start;min-height:36px;padding:0 14px;border:1px solid var(--sx-box-line);border-radius:999px;background:var(--sx-surf);color:var(--sx-link);font:600 14px/1 var(--sx-sans);cursor:pointer}
.sx-pop-copy:hover{background:var(--sx-soft)}
.sx-stats{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--sx-muted)}
.sx-stats a{color:var(--sx-link)}
.sx-sitelinks{list-style:none;margin:10px 0 0 40px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.sx-sitelinks li{min-width:0;display:flex;flex-direction:column;gap:1px}
.sx-sitelinks .sx-sitelink{font-size:16px;line-height:1.3;color:var(--sx-link)}
.sx-sitelinks .sx-sitelink:hover{text-decoration:underline}
.sx-sl-d{font-size:13px;line-height:1.3;color:var(--sx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-row{display:flex;gap:16px;align-items:flex-start;min-width:0}
.sx-thumb{flex:none;width:120px;height:80px;border-radius:10px;overflow:hidden;background:var(--sx-soft)}
.sx-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sx-row .sx-snip{flex:1;min-width:0;margin:0}
.sx-more-hw{align-self:flex-start;margin:-8px 0 0;padding:8px 0;border:0;background:transparent;color:var(--sx-link);font:600 15px/1 var(--sx-sans);cursor:pointer}
.sx-more-hw:hover{text-decoration:underline}
@media (max-width:600px){.sx-sitelinks{grid-template-columns:1fr;margin-left:0}}

/* the header on the results: the share button; on the home: the small text links */
.sx-share,.sx-toplink,.sx-share-note,.sx-home-go{display:none}
body[data-sx="results"] .sx-share{display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--sx-ink2);cursor:pointer}
body[data-sx="results"] .sx-share:hover{background:var(--sx-soft)}
.sx-share svg{width:22px;height:22px}
body[data-sx="results"] .sx-share-note:not([hidden]){display:inline-block;font-size:13px;color:var(--sx-muted);white-space:nowrap}
body[data-sx="home"] .sx-toplink{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;font-size:14px;color:var(--sx-ink);text-decoration:none;flex:none}
body[data-sx="home"] .sx-toplink:hover{text-decoration:underline}
body[data-sx="home"] .ah-bar .hw-apps{margin-left:0}
body[data-sx="results"] .ah-bar{gap:0 8px}

/* THE HOME: our logo, "Surf the web", the pill box, a light Search button, our apps; a pinned footer bar */
body[data-sx="home"] .sx-hero{gap:0}
body[data-sx="home"] .sx-brand{order:1;margin-bottom:8px}
body[data-sx="home"] .sx-line{order:2;margin-bottom:24px;justify-content:center}
body[data-sx="home"] .sx-form{order:3;width:100%;max-width:584px}
body[data-sx="home"] .sx-form .sx-go{display:none}
body[data-sx="home"] .sx-acts{order:4;display:flex;justify-content:center;gap:12px;margin-top:26px}
body[data-sx="home"] .sx-home-go{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border:1px solid var(--sx-btn);border-radius:4px;background:var(--sx-btn);color:var(--sx-ink2);font:14px/1 var(--sx-sans);cursor:pointer}
body[data-sx="home"] .sx-home-go:hover{border-color:#dadce0;box-shadow:0 1px 1px rgba(0,0,0,.1)}
body[data-sx="home"] .sx-apps{order:5;margin-top:44px}
body[data-sx="home"] .s-main{padding-bottom:110px}
body[data-sx="home"] .af{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--sx-bar);border-top:1px solid var(--sx-line)}
body[data-sx="home"] .af-in{max-width:none;padding:0 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 18px;min-height:46px;font-size:14px}
body[data-sx="home"] .af-about,body[data-sx="home"] .af-col b,body[data-sx="home"] .af-col:nth-child(3),body[data-sx="home"] .af-col:nth-child(4){display:none}
body[data-sx="home"] .af-col{flex-direction:row;gap:0 16px}
body[data-sx="home"] .af-col a:not([href$="/games/"]):not([href$="/apps/"]):not([href$="/privacy.html"]):not([href$="/terms.html"]){display:none}
body[data-sx="home"] .af-note{grid-column:auto;order:2;font-size:12.5px}
body[data-sx="home"] .af-col:nth-child(2){order:1}
body[data-sx="home"] .af-col:nth-child(5){order:3}
body[data-sx="home"] .langs{max-width:none;padding:0 24px 6px;font-size:13px;text-align:center}

/* THE RESULTS. Narrower than 1100 px: the box under the header (pinned), the card on top, one column, the depth panel last. */
body[data-sx="results"] .sx-bar{border-bottom:1px solid var(--sx-line)}
body[data-sx="results"] .sx-cardcol:empty{display:none}
body[data-sx="results"] .sx-body{flex-direction:column;gap:14px}
body[data-sx="results"] .sx-body .sx-out,body[data-sx="results"] .sx-cardcol{flex:none;width:100%}
body[data-sx="results"] .sx-depth{position:static;flex:none;width:100%}
@media (max-width:1099px){
  body[data-sx="results"] .sx-hero{position:sticky;top:64px;z-index:40;background:var(--sx-paper);padding:8px 0;gap:0}
  body[data-sx="results"] .sx-line-home,body[data-sx="results"] .sx-acts{display:none}
}
@media (max-width:760px){
  body[data-sx="results"] .sx-hero{top:0}
  body[data-sx="results"] .s-main{padding-top:0}
}
/* 1100 px and wider: the logo, the box, the share button and the apps grid are one pinned bar; the tabs and the count line sit under the box; the
   results are a column of at most 652 px; the knowledge card is a right column; the eBay row and the depth panel stay in the left column. */
@media (min-width:1100px){
  body[data-sx="results"] .ah-bar{max-width:none;padding:8px 24px}
  body[data-sx="results"] .ah-brand{width:148px;flex:none;margin-right:14px}
  body[data-sx="results"] .ah-bar .sx-form{flex:1 1 auto;width:auto;max-width:690px;margin:0}
  body[data-sx="results"] .ah-bar .hw-apps{margin-left:0}
  body[data-sx="results"] .ah-bar .sx-share{margin-left:auto}
  body[data-sx="results"] .s-main{max-width:none;padding-top:6px}
  body[data-sx="results"] .sx-hero{padding:0;min-height:0}
  body[data-sx="results"] .sx-results{margin-left:170px}
  body[data-sx="results"] .sx-bar{margin-left:0}
  body[data-sx="results"] .sx-meta,body[data-sx="results"] .sx-body{margin-left:16px}
  body[data-sx="results"]:is([data-sx-layout="classic"],[data-sx-layout="answer"]) .sx-body{display:grid;grid-template-columns:minmax(0,652px) clamp(300px,26vw,370px);column-gap:56px;grid-template-areas:"out card" "depth .";align-items:start}
  body[data-sx="results"]:is([data-sx-layout="classic"],[data-sx-layout="answer"]) .sx-out{grid-area:out;max-width:652px}
  body[data-sx="results"]:is([data-sx-layout="classic"],[data-sx-layout="answer"]) .sx-cardcol{grid-area:card;position:sticky;top:84px;width:auto}
  body[data-sx="results"]:is([data-sx-layout="classic"],[data-sx-layout="answer"]) .sx-depth{grid-area:depth;width:auto;max-width:652px}
}

/* corrections after the first look */
.sx-form input[type="search"]::-webkit-search-cancel-button,.sx-form input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.sx-head .sx-asof{display:none}
body[data-sx="results"] .sx-share{margin-left:auto}
body[data-sx="results"] .sx-line-home{display:none}
body[data-sx="results"] .sx-hero{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:4px 0 0}
@media (min-width:1100px){body[data-sx="results"] .sx-hero{margin-left:170px;padding:2px 0 0}body[data-sx="results"] .ah-bar .sx-share{margin-left:auto}}
