PageSourceSearch

https://getnerdbuddy.com/

html getnerdbuddy.com collected 2026-10-02 01:30:08 UTC 45,251 bytes, 1,836 lines download raw bytes

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>NerdBuddy AI Math Solver | Chrome Homework Helper</title>
7    <meta name="description" content="NerdBuddy is an AI math solver for Chrome that helps solve problems from webpages, worksheets, and PDFs with clear steps or quick final answers.">
8    <meta name="keywords" content="NerdBuddy, AI math solver, Chrome homework helper, step-by-step math solver, screenshot math solver, browser extension, AI tutor">
9    <meta name="robots" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1">
10    <meta name="googlebot" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1">
11    <meta name="author" content="PG">
12    <meta name="creator" content="PG">
13    <meta name="publisher" content="ExtensioHub">
14    <meta name="application-name" content="NerdBuddy">
15    <meta name="apple-mobile-web-app-title" content="NerdBuddy">
16    <meta name="referrer" content="strict-origin-when-cross-origin">
17    <meta name="format-detection" content="telephone=no">
18    <meta name="theme-color" content="#f6f8fb">
19    <meta name="color-scheme" content="light">
20    <link rel="canonical" href="https://getnerdbuddy.com/">
21    <link rel="alternate" hreflang="en" href="https://getnerdbuddy.com/">
22    <link rel="alternate" hreflang="x-default" href="https://getnerdbuddy.com/">
23    <link rel="preload" as="image" href="logo-nerdbuddy-animated.png">
24    <link rel="icon" type="image/png" href="logo-nerdbuddy.png">
25    <link rel="apple-touch-icon" href="logo-nerdbuddy.png">
26    <meta property="og:type" content="website">
27    <meta property="og:locale" content="en_US">
28    <meta property="og:site_name" content="NerdBuddy">
29    <meta property="og:url" content="https://getnerdbuddy.com/">
30    <meta property="og:title" content="NerdBuddy AI Math Solver | Chrome Homework Helper">
31    <meta property="og:description" content="Solve math directly in Chrome: select a problem on a page, worksheet, or PDF and get clear steps or a quick final answer in the side panel.">
32    <meta property="og:image" content="https://getnerdbuddy.com/og-image.png">
33    <meta property="og:image:type" content="image/png">
34    <meta property="og:image:width" content="1200">
35    <meta property="og:image:height" content="630">
36    <meta property="og:image:alt" content="NerdBuddy AI math solver preview">
37    <meta name="twitter:card" content="summary_large_image">
38    <meta name="twitter:title" content="NerdBuddy AI Math Solver | Chrome Homework Helper">
39    <meta name="twitter:description" content="Solve math in Chrome with clear step-by-step help or quick final answers from selected problem areas.">
40    <meta name="twitter:image" content="https://getnerdbuddy.com/og-image.png">
41    <meta name="twitter:image:alt" content="NerdBuddy AI math solver preview">
42    <link rel="preconnect" href="https://fonts.googleapis.com">
43    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
44    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap">
45    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" referrerpolicy="no-referrer">
46    
46<script
47      defer
48      data-website-id="dfid_E14RrWTtxnhMP3IPZIh14"
49      data-domain="getnerdbuddy.com"
50      src="https://datafa.st/js/script.js">
51    </script>
51
52    <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 52-53
52
53    <script async src="https://www.googletagmanager.com/gtag/js?id=
53G-HKNVGTEJZY
vendor: 16 bytes, lines 53-54
53"></script>
54    
54<script>
55      
vendor: 146 bytes, lines 55-59
55window.dataLayer = window.dataLayer || [];
56      function gtag(){dataLayer.push(arguments);}
57      gtag('js', new Date());
58
59      gtag('config', '
59G-HKNVGTEJZY
vendor: 8 bytes, lines 59-60
59');
60    
60</script>
60
61    
61<script type="application/ld+json">
62      {
63        "@context": "https://schema.org",
64        "@graph": [
65          {
66            "@type": "Organization",
67            "@id": "https://getnerdbuddy.com/#organization",
68            "name": "NerdBuddy",
69            "url": "https://getnerdbuddy.com/",
70            "logo": {
71              "@type": "ImageObject",
72              "url": "https://getnerdbuddy.com/og-image.png"
73            }
74          },
75          {
76            "@type": "WebSite",
77            "@id": "https://getnerdbuddy.com/#website",
78            "url": "https://getnerdbuddy.com/",
79            "name": "ExtensioHub",
80            "publisher": {
81              "@id": "https://getnerdbuddy.com/#organization"
82            },
83            "inLanguage": "en"
84          },
85          {
86            "@type": "WebPage",
87            "@id": "https://getnerdbuddy.com/#webpage",
88            "url": "https://getnerdbuddy.com/",
89            "name": "NerdBuddy AI Math Solver | Chrome Homework Helper",
90            "description": "NerdBuddy is an AI math solver for Chrome that helps solve problems from webpages, worksheets, and PDFs with clear steps or quick final answers.",
91            "keywords": "AI math solver, Chrome homework helper, step-by-step math solver, screenshot math solver, browser extension, AI tutor",
92            "isPartOf": {
93              "@id": "https://getnerdbuddy.com/#website"
94            },
95            "about": {
96              "@id": "https://getnerdbuddy.com/#software"
97            },
98            "primaryImageOfPage": {
99              "@type": "ImageObject",
100              "url": "https://getnerdbuddy.com/logo-nerdbuddy.png"
101            },
102            "breadcrumb": {
103              "@id": "https://getnerdbuddy.com/#breadcrumb"
104            },
105            "inLanguage": "en"
106          },
107          {
108            "@type": "BreadcrumbList",
109            "@id": "https://getnerdbuddy.com/#breadcrumb",
110            "itemListElement": [
111              {
112                "@type": "ListItem",
113                "position": 1,
114                "name": "NerdBuddy",
115                "item": "https://getnerdbuddy.com/"
116              }
117            ]
118          },
119          {
120            "@type": "SoftwareApplication",
121            "@id": "https://getnerdbuddy.com/#software",
122            "name": "NerdBuddy",
123            "alternateName": "NerdBuddy AI Math Solver",
124            "url": "https://getnerdbuddy.com/",
125            "applicationCategory": "BrowserApplication",
126            "operatingSystem": "Windows, macOS, Linux, ChromeOS",
127            "browserRequirements": "Requires Google Chrome 116 or a compatible Chromium browser.",
128            "description": "AI math solver Chrome extension for selecting visible math problems from webpages, worksheets, and PDFs and turning them into step-by-step explanations or concise final answers.",
129            "image": "https://getnerdbuddy.com/logo-nerdbuddy.png",
130            "featureList": [
131              "Select visible math problems from webpages, worksheets, and PDFs",
132              "Chrome side panel workflow with Select Area and optional Shift+S shortcut",
133              "Step-by-step explanation mode or short final-answer mode",
134              "Faster solving mode for all users and optional Deep Check for extra reading and verification",
135              "Answer language support for 15 languages",
136              "Google sign-in, usage counters, and solve-limit reset information",
137              "Copy final answers, share solution images, and report answer issues",
138              "Anonymous starter allowance, signed-in allowance, and usage counter information"
139            ],
140            "publisher": {
141              "@id": "https://getnerdbuddy.com/#organization"
142            },
143            "offers": {
144              "@type": "Offer",
145              "name": "NerdBuddy Chrome extension",
146              "price": "0",
147              "priceCurrency": "USD",
148              "availability": "https://schema.org/InStock"
149            }
150          }
151        ]
152      }
153    </script>
153
154    <style>
155:root {
156  --canvas: #f6f8fb;
157  --paper: #ffffff;
158  --paper-soft: #eef7f3;
159  --ink: #111827;
160  --ink-soft: #263241;
161  --muted: #5f6f82;
162  --line: #d8e2ee;
163  --line-strong: #b9c8d8;
164  --blue: #2855d9;
165  --blue-deep: #17337f;
166  --green: #0d9b72;
167  --green-soft: #dff7ed;
168  --amber: #c47714;
169  --amber-soft: #fff1d5;
170  --rose: #be3557;
171  --rose-soft: #ffe4eb;
172  --violet: #6952c9;
173  --cyan: #1689a4;
174  --shadow: 0 24px 70px rgba(17, 24, 39, 0.14);
175  --shadow-soft: 0 14px 36px rgba(17, 24, 39, 0.09);
176  --radius: 8px;
177  --font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
178  --max: 1180px;
179}
180
181* {
182  box-sizing: border-box;
183}
184
185html {
186  scroll-behavior: smooth;
187}
188
189body {
190  display: flex;
191  min-height: 100vh;
192  flex-direction: column;
193  margin: 0;
194  color: var(--ink);
195  background: var(--canvas);
196  font-family: var(--font);
197  font-size: 16px;
198  line-height: 1.55;
199  letter-spacing: 0;
200  text-rendering: optimizeLegibility;
201  -webkit-font-smoothing: antialiased;
202}
203
204body > main {
205  flex: 1 0 auto;
206}
207
208img {
209  display: block;
210  max-width: 100%;
211}
212
213a {
214  color: inherit;
215  text-decoration: none;
216}
217
218button,
219input,
220select {
221  font: inherit;
222}
223
224button {
225  border: 0;
226  cursor: pointer;
227}
228
229h1,
230h2,
231h3,
232p {
233  margin: 0;
234}
235
236h1,
237h2,
238h3 {
239  font-weight: 850;
240  line-height: 1.04;
241  letter-spacing: 0;
242}
243
244ul {
245  margin: 0;
246  padding: 0;
247  list-style: none;
248}
249
250.visually-hidden {
251  position: absolute;
252  width: 1px;
253  height: 1px;
254  padding: 0;
255  margin: -1px;
256  overflow: hidden;
257  clip: rect(0, 0, 0, 0);
258  white-space: nowrap;
259  border: 0;
260}
261
262.container {
263  width: min(var(--max), calc(100% - 48px));
264  margin: 0 auto;
265}
266
267.button {
268  display: inline-flex;
269  min-height: 48px;
270  align-items: center;
271  justify-content: center;
272  gap: 10px;
273  border: 1px solid transparent;
274  border-radius: var(--radius);
275  padding: 12px 18px;
276  font-size: 0.95rem;
277  font-weight: 850;
278  line-height: 1.1;
279  text-align: center;
280  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
281}
282
283.button-icon-img {
284  width: 21px;
285  height: 21px;
286  flex: 0 0 auto;
287  display: block;
288}
289
290.button:hover {
291  transform: translateY(-1px);
292}
293
294.button-primary {
295  color: #ffffff;
296  background: var(--blue);
297  box-shadow: 0 12px 26px rgba(40, 85, 217, 0.28);
298}
299
300.button-primary:hover {
301  background: var(--blue-deep);
302}
303
304.button-secondary {
305  color: var(--ink);
306  background: #ffffff;
307  border-color: var(--line-strong);
308  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
309}
310
311.button-secondary:hover {
312  border-color: var(--blue);
313}
314
315.button-quiet {
316  color: var(--blue-deep);
317  background: #e8eefc;
318  border-color: #cdd9ff;
319}
320
321.hero {
322  position: relative;
323  min-height: calc(100svh - 92px);
324  overflow: hidden;
325  isolation: isolate;
326  border-bottom: 1px solid var(--line);
327  background:
328    linear-gradient(90deg, rgba(246, 248, 251, 0.97) 0%, rgba(246, 248, 251, 0.91) 52%, rgba(246, 248, 251, 0.68) 100%),
329    linear-gradient(135deg, #f6f8fb 0%, #eef7f3 38%, #eef2ff 72%, #fff4de 100%);
330  background-repeat: no-repeat;
331  background-position: center, center;
332  background-size: cover, cover;
333}
334
335.hero::before {
336  content: "";
337  position: absolute;
338  inset: 0;
339  z-index: -2;
340  opacity: 0.45;
341  background-image:
342    linear-gradient(rgba(40, 85, 217, 0.12) 1px, transparent 1px),
343    linear-gradient(90deg, rgba(40, 85, 217, 0.1) 1px, transparent 1px);
344  background-size: 44px 44px;
345  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.66) 52%, transparent 95%);
346}
347
348.hero::after {
349  content: "";
350  position: absolute;
351  right: 0;
352  bottom: 0;
353  left: 0;
354  height: 92px;
355  z-index: -1;
356  background: linear-gradient(0deg, rgba(246, 248, 251, 1), rgba(246, 248, 251, 0));
357}
358
359.hero-inner {
360  position: relative;
361  min-height: calc(100svh - 92px);
362  display: flex;
363  align-items: center;
364  justify-content: center;
365  padding: 72px 0 86px;
366}
367
368.hero-inner::before,
369.hero-inner::after {
370  position: absolute;
371  z-index: 1;
372  color: rgba(23, 51, 127, 0.19);
373  font-family: "Segoe Print", "Comic Sans MS", cursive;
374  font-size: clamp(1.05rem, 2vw, 1.46rem);
375  line-height: 1.9;
376  letter-spacing: 0;
377  white-space: pre;
378  pointer-events: none;
379  user-select: none;
380}
381
382.hero-inner::before {
383  content: "3x - 8 = 19\A f(x) = x^2 + 2x\A 7/8 - 1/4 = ?\A y = mx + b";
384  top: clamp(80px, 14vh, 148px);
385  left: clamp(8px, 5vw, 84px);
386  transform: rotate(-7deg);
387}
388
389.hero-inner::after {
390  content: "sqrt(81) = 9\A a^2 + b^2 = c^2\A 5(x - 2) = 30\A lim x->0 sin(x)/x";
391  right: clamp(8px, 5vw, 84px);
392  bottom: clamp(70px, 12vh, 130px);
393  text-align: right;
394  transform: rotate(6deg);
395}
396
397.hero-sketch {
398  position: absolute;
399  z-index: 1;
400  color: rgba(23, 51, 127, 0.19);
401  font-family: "Segoe Print", "Comic Sans MS", cursive;
402  font-size: clamp(0.95rem, 1.6vw, 1.22rem);
403  line-height: 1.8;
404  white-space: pre;
405  pointer-events: none;
406  user-select: none;
407}
408
409.hero-sketch-top {
410  top: clamp(170px, 25vh, 240px);
411  right: clamp(120px, 16vw, 240px);
412  transform: rotate(-4deg);
413}
414
415.hero-sketch-bottom {
416  bottom: clamp(46px, 9vh, 120px);
417  left: clamp(115px, 14vw, 220px);
418  transform: rotate(5deg);
419}
420
421.hero-copy {
422  position: relative;
423  z-index: 3;
424  width: min(680px, 100%);
425  text-align: center;
426}
427
428.hero-logo {
429  width: clamp(132px, 15vw, 196px);
430  height: clamp(132px, 15vw, 196px);
431  object-fit: contain;
432  margin: 0 auto 22px;
433  opacity: 1;
434  filter: drop-shadow(0 12px 22px rgba(17, 24, 39, 0.12));
435}
436
437.hero h1 {
438  margin: 0 auto;
439  color: var(--ink);
440  font-size: 4.45rem;
441  max-width: 10ch;
442}
443
444.hero-lead {
445  position: relative;
446  margin: 24px auto 0;
447  max-width: 58ch;
448  padding: 20px 24px;
449  color: var(--ink-soft);
450  font-size: 1.22rem;
451  line-height: 1.56;
452  font-weight: 550;
453}
454
455.hero-lead::before {
456  content: "";
457  position: absolute;
458  inset: 0;
459  border: 1px dashed rgba(40, 85, 217, 0.32);
460  pointer-events: none;
461}
462
463.hero-lead::after {
464  content: "";
465  position: absolute;
466  inset: -1px;
467  pointer-events: none;
468  background:
469    linear-gradient(var(--blue), var(--blue)) left top / 38px 3px no-repeat,
470    linear-gradient(var(--blue), var(--blue)) left top / 3px 38px no-repeat,
471    linear-gradient(var(--blue), var(--blue)) right top / 38px 3px no-repeat,
472    linear-gradient(var(--blue), var(--blue)) right top / 3px 38px no-repeat,
473    linear-gradient(var(--blue), var(--blue)) left bottom / 38px 3px no-repeat,
474    linear-gradient(var(--blue), var(--blue)) left bottom / 3px 38px no-repeat,
475    linear-gradient(var(--blue), var(--blue)) right bottom / 38px 3px no-repeat,
476    linear-gradient(var(--blue), var(--blue)) right bottom / 3px 38px no-repeat;
477}
478
479.hero-actions {
480  display: flex;
481  flex-wrap: wrap;
482  justify-content: center;
483  gap: 12px;
484  margin-top: 30px;
485}
486
487.hero .hero-actions .button {
488  font-weight: 650;
489}
490
491.hero .hero-actions .button-primary {
492  color: #ffffff;
493  background: linear-gradient(135deg, #2f6eea 0%, #1e4fc5 100%);
494  border-color: #2f6eea;
495  box-shadow: none;
496}
497
498.hero .hero-actions .button-primary:hover {
499  background: linear-gradient(135deg, #3b7cf0 0%, #173f9d 100%);
500  border-color: #3b7cf0;
501}
502
503.hero .hero-actions .button-secondary {
504  box-shadow: none;
505}
506
507.chrome-button-logo {
508  width: 24px;
509  height: 24px;
510  padding: 2px;
511  border-radius: 999px;
512  background: #ffffff;
513  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
514}
515
516.hero-stats {
517  display: flex;
518  flex-wrap: wrap;
519  justify-content: center;
520  gap: 34px;
521  margin-top: 58px;
522}
523
524.hero-stat {
525  display: grid;
526  gap: 4px;
527  animation: heroStatIn 0.62s ease forwards;
528  animation-delay: var(--stat-delay, 0s);
529}
530
531.hero-stat-num {
532  display: flex;
533  align-items: center;
534  justify-content: center;
535  gap: 7px;
536  color: var(--ink);
537  font-size: 2.05rem;
538  font-weight: 500;
539  line-height: 1;
540}
541
542.hero-stat-num i {
543  color: var(--blue);
544  font-size: 1.05rem;
545}
546
547.hero-stat-label {
548  color: var(--muted);
549  font-size: 0.78rem;
550  font-weight: 500;
551  line-height: 1.25;
552  text-align: center;
553  text-transform: uppercase;
554}
555
556.counter {
557  display: inline-block;
558  min-width: 1.35em;
559  text-align: right;
560}
561
562.solve-demo {
563  overflow: hidden;
564  border-bottom: 1px solid var(--line);
565  padding: 76px 0;
566  background:
567    linear-gradient(135deg, rgba(223, 247, 237, 0.84), rgba(232, 238, 252, 0.72)),
568    #f8fbff;
569}
570
571.solve-demo-intro {
572  display: grid;
573  gap: 14px;
574  max-width: var(--max);
575  margin: 0 auto 34px;
576  text-align: center;
577}
578
579.solve-demo-kicker {
580  color: var(--blue);
581  font-size: 0.82rem;
582  font-weight: 900;
583  text-transform: uppercase;
584}
585
586.solve-demo-steps {
587  display: grid;
588  grid-template-columns: repeat(3, minmax(0, 1fr));
589  width: 100%;
590  gap: 14px;
591  margin: 0;
592  padding: 0 0 4px;
593  color: var(--ink);
594  font-size: 1.55rem;
595  font-weight: 850;
596  line-height: 1.15;
597  list-style: none;
598}
599
600.solve-demo-steps li {
601  display: inline-flex;
602  align-items: center;
603  justify-content: center;
604  gap: 8px;
605  white-space: nowrap;
606}
607
608.solve-demo-steps b {
609  display: inline-grid;
610  width: 30px;
611  height: 30px;
612  flex: 0 0 auto;
613  place-items: center;
614  border-radius: var(--radius);
615  color: var(--ink);
616  background: #ffffff;
617  border: 1px solid #cdd9ff;
618  color: var(--blue-deep);
619  font-size: 0.92rem;
620  font-weight: 900;
621}
622
623.solve-demo-grid {
624  display: grid;
625  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
626  gap: 26px;
627  align-items: stretch;
628}
629
630.problem-stage {
631  position: relative;
632  min-height: 0;
633  height: 100%;
634  border: 1px solid var(--line);
635  border-radius: var(--radius);
636  padding: 28px;
637  background: #ffffff;
638  box-shadow: var(--shadow-soft);
639}
640
641.problem-sheet {
642  position: relative;
643  overflow: hidden;
644  min-height: 0;
645  height: 100%;
646  border: 1px solid #dfe7f1;
647  border-radius: var(--radius);
648  padding: 28px;
649  display: flex;
650  flex-direction: column;
651  background:
652    linear-gradient(rgba(40, 85, 217, 0.055) 1px, transparent 1px) padding-box,
653    linear-gradient(90deg, rgba(40, 85, 217, 0.055) 1px, transparent 1px) padding-box,
654    linear-gradient(#ffffff, #ffffff) padding-box,
655    linear-gradient(180deg, #eef4ff, #ffffff) border-box;
656  background-size: 22px 22px, 22px 22px, auto, auto;
657}
658
659.sheet-label {
660  display: inline-flex;
661  border: 1px solid #d8e2ee;
662  border-radius: var(--radius);
663  padding: 6px 9px;
664  color: var(--muted);
665  background: #f8fbff;
666  font-size: 0.78rem;
667  font-weight: 800;
668}
669
670.math-problem {
671  position: relative;
672  z-index: 1;
673  width: min(100%, 430px);
674  margin-top: 46px;
675  border: 1px solid #d8e2ee;
676  border-radius: var(--radius);
677  padding: 22px;
678  background: #ffffff;
679}
680
681.math-problem p {
682  color: var(--muted);
683  font-size: 0.94rem;
684  font-weight: 750;
685}
686
687.math-problem strong {
688  display: block;
689  margin-top: 10px;
690  color: var(--ink);
691  font-family: "Segoe UI Mono", Consolas, monospace;
692  font-size: 1.42rem;
693  line-height: 1.35;
694}
695
696.math-problem > span {
697  display: block;
698  margin-top: 12px;
699  color: var(--ink-soft);
700  font-size: 0.95rem;
701}
702
703.selection-outline {
704  position: absolute;
705  z-index: 3;
706  inset: -1px;
707  border: 2px solid var(--blue);
708  border-radius: var(--radius);
709  box-shadow: 0 0 0 999px rgba(17, 24, 39, 0.08), 0 14px 34px rgba(40, 85, 217, 0.22);
710  transform-origin: left top;
711  animation: selectArea 6.2s ease-in-out infinite;
712}
713
714.selection-outline::before,
715.selection-outline::after {
716  content: "";
717  position: absolute;
718  background: #ffffff;
719  border: 2px solid var(--blue);
720  border-radius: 4px;
721  width: 12px;
722  height: 12px;
723}
724
725.selection-outline::before {
726  top: -7px;
727  left: -7px;
728}
729
730.selection-outline::after {
731  right: -7px;
732  bottom: -7px;
733}
734
735.selection-scan {
736  display: block;
737  position: absolute;
738  top: 0;
739  bottom: 0;
740  left: 0;
741  margin: 0;
742  width: 34%;
743  border-radius: calc(var(--radius) - 2px);
744  background: linear-gradient(90deg, rgba(40, 85, 217, 0), rgba(40, 85, 217, 0.18), rgba(40, 85, 217, 0));
745  animation: scanSelection 6.2s ease-in-out infinite;
746}
747
748.solution-demo {
749  border: 1px solid #d8e2ee;
750  border-radius: var(--radius);
751  overflow: hidden;
752  background: #ffffff;
753  box-shadow: var(--shadow-soft);
754  opacity: 1;
755  visibility: visible;
756  transform: none;
757  height: 100%;
758}
759
760.solution-demo-head {
761  display: flex;
762  align-items: center;
763  justify-content: space-between;
764  gap: 14px;
765  border-bottom: 1px solid #d8e2ee;
766  padding: 16px 18px;
767  background: #ffffff;
768}
769
770.solution-demo-head strong {
771  color: var(--ink);
772  font-size: 1rem;
773}
774
775.solution-steps {
776  display: grid;
777  gap: 12px;
778  padding: 18px;
779}
780
781.solution-step {
782  display: grid;
783  grid-template-columns: 34px 1fr;
784  gap: 12px;
785  align-items: start;
786  border: 1px solid #d8e2ee;
787  border-radius: var(--radius);
788  padding: 12px;
789  background: #ffffff;
790  opacity: 0;
791  visibility: hidden;
792  transform: translateY(10px);
793  animation: stepRevealOne 6.2s ease-in-out infinite;
794}
795
796.solution-step:nth-child(1) {
797  animation-name: stepRevealOne;
798}
799
800.solution-step:nth-child(2) {
801  animation-name: stepRevealTwo;
802}
803
804.solution-step:nth-child(3) {
805  animation-name: stepRevealThree;
806}
807
808.solution-step b {
809  display: grid;
810  width: 34px;
811  height: 34px;
812  place-items: center;
813  border-radius: var(--radius);
814  color: #ffffff;
815  background: var(--blue);
816  font-size: 0.84rem;
817}
818
819.solution-step strong {
820  display: block;
821  color: var(--ink);
822  font-size: 0.95rem;
823}
824
825.solution-step span {
826  display: block;
827  margin-top: 3px;
828  color: var(--muted);
829  font-size: 0.9rem;
830  line-height: 1.42;
831}
832
833.demo-answer {
834  border: 1px solid #bdebdc;
835  border-radius: var(--radius);
836  margin: 0 18px 18px;
837  padding: 14px 16px;
838  color: #073f31;
839  background: var(--green-soft);
840  opacity: 0;
841  visibility: hidden;
842  transform: translateY(10px);
843  animation: answerReveal 6.2s ease-in-out infinite;
844}
845
846.demo-answer span {
847  display: block;
848  font-size: 0.78rem;
849  font-weight: 850;
850}
851
852.demo-answer strong {
853  display: block;
854  margin-top: 3px;
855  font-size: 1.7rem;
856  line-height: 1.05;
857}
858
859@keyframes selectArea {
860  0%,
861  14% {
862    opacity: 0;
863    transform: translate(-16px, -14px) scale(0.22);
864  }
865  26% {
866    opacity: 1;
867    transform: translate(0, 0) scale(1);
868  }
869  88% {
870    opacity: 1;
871    transform: translate(0, 0) scale(1);
872  }
873  100% {
874    opacity: 0;
875    transform: translate(0, 0) scale(1);
876  }
877}
878
879@keyframes scanSelection {
880  0%,
881  26% {
882    opacity: 0;
883    transform: translateX(-20%);
884  }
885  36% {
886    opacity: 1;
887  }
888  52% {
889    opacity: 0;
890    transform: translateX(230%);
891  }
892  100% {
893    opacity: 0;
894    transform: translateX(230%);
895  }
896}
897
898@keyframes stepRevealOne {
899  0%,
900  38% {
901    opacity: 0;
902    visibility: hidden;
903    transform: translateY(10px);
904  }
905  39% {
906    opacity: 1;
907    visibility: visible;
908    transform: translateY(10px);
909  }
910  48%,
911  92% {
912    opacity: 1;
913    visibility: visible;
914    transform: translateY(0);
915  }
916  100% {
917    opacity: 0;
918    visibility: hidden;
919    transform: translateX(calc(100% + 28px));
920  }
921}
922
923@keyframes stepRevealTwo {
924  0%,
925  42% {
926    opacity: 0;
927    visibility: hidden;
928    transform: translateY(10px);
929  }
930  43% {
931    opacity: 1;
932    visibility: visible;
933    transform: translateY(10px);
934  }
935  52%,
936  92% {
937    opacity: 1;
938    visibility: visible;
939    transform: translateY(0);
940  }
941  100% {
942    opacity: 0;
943    visibility: hidden;
944    transform: translateX(calc(100% + 28px));
945  }
946}
947
948@keyframes stepRevealThree {
949  0%,
950  46% {
951    opacity: 0;
952    visibility: hidden;
953    transform: translateY(10px);
954  }
955  47% {
956    opacity: 1;
957    visibility: visible;
958    transform: translateY(10px);
959  }
960  56%,
961  92% {
962    opacity: 1;
963    visibility: visible;
964    transform: translateY(0);
965  }
966  100% {
967    opacity: 0;
968    visibility: hidden;
969    transform: translateX(calc(100% + 28px));
970  }
971}
972
973@keyframes answerReveal {
974  0%,
975  52% {
976    opacity: 0;
977    visibility: hidden;
978    transform: translateY(10px);
979  }
980  53% {
981    opacity: 1;
982    visibility: visible;
983    transform: translateY(10px);
984  }
985  62%,
986  92% {
987    opacity: 1;
988    visibility: visible;
989    transform: translateY(0);
990  }
991  100% {
992    opacity: 0;
993    visibility: hidden;
994    transform: translateX(calc(100% + 28px));
995  }
996}
997
998@keyframes heroStatIn {
999  from {
1000    opacity: 0;
1001    transform: translateY(12px);
1002  }
1003  to {
1004    opacity: 1;
1005    transform: translateY(0);
1006  }
1007}
1008
1009.section {
1010  padding: 88px 0;
1011}
1012
1013.section-tight {
1014  padding: 66px 0;
1015}
1016
1017.section-white {
1018  background: var(--paper);
1019}
1020
1021.section-green {
1022  background: linear-gradient(180deg, #eef7f3 0%, #f6f8fb 100%);
1023}
1024
1025.section-head {
1026  display: grid;
1027  gap: 14px;
1028  max-width: 760px;
1029  margin-bottom: 34px;
1030}
1031
1032.section-head.center {
1033  margin-right: auto;
1034  margin-left: auto;
1035  text-align: center;
1036}
1037
1038.section-kicker {
1039  color: var(--blue);
1040  font-size: 0.82rem;
1041  font-weight: 900;
1042  text-transform: uppercase;
1043}
1044
1045.section h2 {
1046  color: var(--ink);
1047  font-size: 2.65rem;
1048}
1049
1050.section-head p {
1051  color: var(--muted);
1052  font-size: 1.05rem;
1053  line-height: 1.62;
1054}
1055
1056.feature-grid {
1057  display: grid;
1058  grid-template-columns: repeat(3, 1fr);
1059  gap: 16px;
1060}
1061
1062.feature-card,
1063.faq-item {
1064  border: 1px solid var(--line);
1065  border-radius: var(--radius);
1066  background: var(--paper);
1067  box-shadow: var(--shadow-soft);
1068}
1069
1070.feature-card {
1071  display: grid;
1072  gap: 16px;
1073  min-height: 254px;
1074  padding: 22px;
1075}
1076
1077.icon-box {
1078  display: grid;
1079  width: 46px;
1080  height: 46px;
1081  place-items: center;
1082  border-radius: var(--radius);
1083  color: #ffffff;
1084  background: var(--blue);
1085  font-size: 1.04rem;
1086}
1087
1088.icon-box.green {
1089  background: var(--green);
1090}
1091
1092.icon-box.amber {
1093  background: var(--amber);
1094}
1095
1096.icon-box.rose {
1097  background: var(--rose);
1098}
1099
1100.icon-box.violet {
1101  background: var(--violet);
1102}
1103
1104.icon-box.cyan {
1105  background: var(--cyan);
1106}
1107
1108.feature-card h3,
1109.faq-question {
1110  color: var(--ink);
1111  font-size: 1.2rem;
1112}
1113
1114.feature-card p,
1115.faq-item p {
1116  color: var(--muted);
1117  line-height: 1.58;
1118}
1119
1120.download-cta {
1121  position: relative;
1122  overflow: hidden;
1123  border: 1px solid rgba(40, 85, 217, 0.16);
1124  border-radius: var(--radius);
1125  padding: clamp(26px, 5vw, 44px);
1126  background:
1127    linear-gradient(135deg, rgba(232, 238, 252, 0.94), rgba(223, 247, 237, 0.84)),
1128    var(--paper);
1129  box-shadow: var(--shadow-soft);
1130}
1131
1132.download-cta::before,
1133.download-cta::after {
1134  position: absolute;
1135  z-index: 0;
1136  color: rgba(23, 51, 127, 0.2);
1137  font-family: "Segoe Print", "Comic Sans MS", cursive;
1138  font-size: clamp(1.05rem, 2vw, 1.45rem);
1139  line-height: 1.9;
1140  letter-spacing: 0;
1141  white-space: pre;
1142  pointer-events: none;
1143  user-select: none;
1144}
1145
1146.download-cta::before {
1147  content: "2x + 7 = 21\A y = 3x - 4\A f(x) = x^2 - 5x\A 12 / 3 + 8 = ?";
1148  top: 18px;
1149  left: 24px;
1150  transform: rotate(-6deg);
1151}
1152
1153.download-cta::after {
1154  content: "a^2 + b^2 = c^2\A 3/4 + 5/6 = ?\A log(100) = 2\A x/5 = 9";
1155  right: 24px;
1156  bottom: 16px;
1157  text-align: right;
1158  transform: rotate(5deg);
1159}
1160
1161.download-cta-inner {
1162  position: relative;
1163  z-index: 1;
1164  display: grid;
1165  grid-template-columns: minmax(0, 1fr);
1166  gap: 28px;
1167  align-items: center;
1168}
1169
1170.download-cta-copy {
1171  display: grid;
1172  gap: 12px;
1173  justify-items: center;
1174  text-align: center;
1175}
1176
1177.download-cta-copy,
1178.download-cta-actions {
1179  margin-inline: auto;
1180}
1181
1182.download-cta p {
1183  max-width: 640px;
1184  color: var(--muted);
1185  font-size: 1.05rem;
1186  line-height: 1.62;
1187}
1188
1189.download-cta-actions {
1190  display: flex;
1191  flex-wrap: wrap;
1192  gap: 12px;
1193  justify-content: center;
1194}
1195
1196.download-cta-actions .button {
1197  box-shadow: none;
1198}
1199
1200.faq-list {
1201  display: grid;
1202  max-width: 900px;
1203  gap: 12px;
1204  margin: 0 auto;
1205}
1206
1207.faq-item {
1208  overflow: hidden;
1209  padding: 0;
1210  box-shadow: 0 10px 34px rgba(17, 24, 39, 0.05);
1211}
1212
1213.faq-item summary {
1214  display: flex;
1215  align-items: center;
1216  justify-content: space-between;
1217  gap: 18px;
1218  min-height: 68px;
1219  padding: 20px 22px;
1220  cursor: pointer;
1221  list-style: none;
1222}
1223
1224.faq-item summary::-webkit-details-marker {
1225  display: none;
1226}
1227
1228.faq-item summary::after {
1229  content: "+";
1230  display: grid;
1231  width: 30px;
1232  height: 30px;
1233  flex: 0 0 auto;
1234  place-items: center;
1235  border: 1px solid #cdd9ff;
1236  border-radius: var(--radius);
1237  color: var(--blue-deep);
1238  background: #edf2ff;
1239  font-size: 1.15rem;
1240  font-weight: 850;
1241  line-height: 1;
1242}
1243
1244.faq-item[open] summary {
1245  border-bottom: 1px solid var(--line);
1246  background: #f8fbff;
1247}
1248
1249.faq-item[open] summary::after {
1250  content: "-";
1251  color: #073f31;
1252  background: var(--green-soft);
1253  border-color: #bdebdc;
1254}
1255
1256.faq-question {
1257  font-size: 1.18rem;
1258  letter-spacing: 0;
1259}
1260
1261.faq-item p {
1262  padding: 18px 22px 20px;
1263}
1264
1265.footer {
1266  border-top: 1px solid var(--line);
1267  margin-top: auto;
1268  padding: 34px 0;
1269  background: #ffffff;
1270}
1271
1272.footer-inner {
1273  display: flex;
1274  align-items: center;
1275  justify-content: space-between;
1276  gap: 18px;
1277  color: var(--muted);
1278  font-size: 0.92rem;
1279}
1280
1281.footer-links {
1282  display: flex;
1283  flex-wrap: wrap;
1284  gap: 14px;
1285}
1286
1287.footer a {
1288  color: var(--ink-soft);
1289  font-weight: 400;
1290}
1291
1292.footer a:hover {
1293  color: var(--blue);
1294}
1295
1296@media (max-width: 960px) {
1297  .container {
1298    width: min(var(--max), calc(100% - 34px));
1299  }
1300
1301  .hero,
1302  .hero-inner {
1303    min-height: auto;
1304  }
1305
1306  .hero-inner {
1307    padding: 62px 0 74px;
1308  }
1309
1310  .hero h1 {
1311    font-size: 3.4rem;
1312  }
1313
1314  .hero-copy {
1315    max-width: 620px;
1316  }
1317
1318  .hero-inner::before {
1319    left: 8px;
1320    opacity: 0.58;
1321  }
1322
1323  .hero-inner::after {
1324    right: 8px;
1325    opacity: 0.5;
1326  }
1327
1328  .hero-sketch-top {
1329    top: 140px;
1330    right: 34px;
1331    opacity: 0.5;
1332  }
1333
1334  .hero-sketch-bottom {
1335    bottom: 118px;
1336    left: 34px;
1337    opacity: 0.45;
1338  }
1339
1340  .solve-demo-grid {
1341    grid-template-columns: 1fr;
1342  }
1343
1344  .problem-stage {
1345    height: auto;
1346    min-height: 390px;
1347  }
1348
1349  .solution-demo {
1350    height: auto;
1351    transform: none;
1352  }
1353
1354  .feature-grid {
1355    grid-template-columns: 1fr 1fr;
1356  }
1357}
1358
1359@media (max-width: 720px) {
1360  body {
1361    font-size: 15px;
1362  }
1363
1364  .container {
1365    width: min(var(--max), calc(100% - 24px));
1366  }
1367
1368  .button {
1369    width: 100%;
1370    min-height: 46px;
1371    padding: 11px 14px;
1372  }
1373
1374  .hero::before {
1375    mask-image: none;
1376  }
1377
1378  .hero-inner {
1379    padding: 48px 0 64px;
1380  }
1381
1382  .hero-inner::before {
1383    top: 28px;
1384    left: 10px;
1385    opacity: 0.38;
1386  }
1387
1388  .hero-inner::after {
1389    display: none;
1390  }
1391
1392  .hero-sketch {
1393    display: none;
1394  }
1395
1396  .hero h1 {
1397    max-width: 8ch;
1398    font-size: 2.75rem;
1399  }
1400
1401  .hero-lead {
1402    font-size: 1.05rem;
1403  }
1404
1405  .hero-actions {
1406    width: 100%;
1407  }
1408
1409  .hero-stats {
1410    width: 100%;
1411  }
1412
1413  .hero-stat {
1414    width: auto;
1415  }
1416
1417  .download-cta-inner {
1418    grid-template-columns: 1fr;
1419  }
1420
1421  .download-cta-actions {
1422    justify-content: center;
1423  }
1424
1425  .download-cta::before {
1426    top: 14px;
1427    left: 14px;
1428    opacity: 0.65;
1429  }
1430
1431  .download-cta::after {
1432    display: none;
1433  }
1434
1435  .solve-demo {
1436    padding: 54px 0;
1437  }
1438
1439  .solve-demo-intro {
1440    margin-bottom: 24px;
1441  }
1442
1443  .solve-demo-steps {
1444    grid-template-columns: 1fr;
1445    align-items: center;
1446    font-size: 1.28rem;
1447    gap: 10px;
1448  }
1449
1450  .solve-demo-steps li {
1451    justify-content: center;
1452  }
1453
1454  .problem-stage {
1455    min-height: 340px;
1456    padding: 16px;
1457  }
1458
1459  .problem-sheet {
1460    min-height: 306px;
1461    padding: 18px;
1462  }
1463
1464  .math-problem {
1465    margin-top: 34px;
1466    padding: 16px;
1467  }
1468
1469  .math-problem strong {
1470    font-size: 1.08rem;
1471  }
1472
1473  .solution-demo-head {
1474    align-items: flex-start;
1475    flex-direction: column;
1476  }
1477
1478  .solution-step {
1479    grid-template-columns: 30px 1fr;
1480    padding: 10px;
1481  }
1482
1483  .solution-step b {
1484    width: 30px;
1485    height: 30px;
1486  }
1487
1488  .section,
1489  .section-tight {
1490    padding: 58px 0;
1491  }
1492
1493  .section h2 {
1494    font-size: 2rem;
1495  }
1496
1497  .feature-grid {
1498    grid-template-columns: 1fr;
1499  }
1500
1501  .feature-card {
1502    min-height: 0;
1503  }
1504
1505  .footer-inner {
1506    align-items: flex-start;
1507    flex-direction: column;
1508  }
1509}
1510
1511@media (max-width: 420px) {
1512  .hero h1 {
1513    font-size: 2.35rem;
1514  }
1515
1516  .faq-item summary {
1517    padding: 18px;
1518  }
1519
1520  .faq-item p {
1521    padding: 16px 18px 18px;
1522  }
1523}
1524
1525@media (prefers-reduced-motion: reduce) {
1526  *,
1527  *::before,
1528  *::after {
1529    scroll-behavior: auto !important;
1530    transition-duration: 0.01ms !important;
1531    animation-duration: 0.01ms !important;
1532    animation-iteration-count: 1 !important;
1533  }
1534
1535  .selection-outline,
1536  .hero-stat,
1537  .solution-demo,
1538  .solution-step,
1539  .demo-answer {
1540    animation: none !important;
1541    opacity: 1 !important;
1542    visibility: visible !important;
1543    transform: none !important;
1544  }
1545
1546  .selection-scan {
1547    animation: none !important;
1548    opacity: 0 !important;
1549  }
1550}
1551    </style>
1552  </head>
1553  <body>
1554    <a class="visually-hidden" href="#main">Skip to content</a>
1555
1556    <main id="main">
1557      <section class="hero" id="top" aria-label="NerdBuddy hero">
1558        <div class="container hero-inner">
1559          <span class="hero-sketch hero-sketch-top" aria-hidden="true">48 / 6 = 8
156015 + 27 = 42</span>
1561          <span class="hero-sketch hero-sketch-bottom" aria-hidden="true">9 x 7 = 63
1562144 - 58 = 86</span>
1563          <div class="hero-copy">
1564            <img class="hero-logo" src="logo-nerdbuddy-animated.png" alt="NerdBuddy logo" width="196" height="196">
1565            <h1>NerdBuddy</h1>
1566            <p class="hero-lead">
1567              Get AI math help right where you study. Select a problem on a webpage, worksheet, or PDF and NerdBuddy gives clear steps or a quick answer.
1568            </p>
1569            <div class="hero-actions">
1570              <a class="button button-primary" href="https://chromewebstore.google.com/detail/nerdbuddy-ai-math-solver/nooedkmlpmccnphfngjhcfembllhanjj" target="_blank" rel="noopener noreferrer">
1571                <img class="button-icon-img chrome-button-logo" src="google-chrome-logo.svg" alt="" aria-hidden="true" width="24" height="24">
1572                <span>Add to Chrome</span>
1573              </a>
1574              <a class="button button-secondary" href="#workflow">
1575                <i class="fa-solid fa-play" aria-hidden="true"></i>
1576                <span>See workflow</span>
1577              </a>
1578            </div>
1579            <div class="hero-stats" aria-label="NerdBuddy language support">
1580              <div class="hero-stat" style="--stat-delay: 0.12s">
1581                <span class="hero-stat-num"><span class="counter" data-target="51">0</span><i class="fa-solid fa-globe" aria-hidden="true"></i></span>
1582                <span class="hero-stat-label">interface languages</span>
1583              </div>
1584              <div class="hero-stat" style="--stat-delay: 0.24s">
1585                <span class="hero-stat-num"><span class="counter" data-target="15">0</span><i class="fa-solid fa-language" aria-hidden="true"></i></span>
1586                <span class="hero-stat-label">answer languages</span>
1587              </div>
1588            </div>
1589          </div>
1590        </div>
1591      </section>
1592
1593      <section class="solve-demo" id="workflow" aria-label="Animated NerdBuddy solve demo" data-fast-scroll="viewed_workflow" data-fast-scroll-threshold="0.35">
1594        <div class="container solve-demo-intro">
1595          <span class="solve-demo-kicker">Live workflow</span>
1596          <ol class="solve-demo-steps" aria-label="NerdBuddy workflow steps">
1597            <li><b>1.</b> Open NerdBuddy</li>
1598            <li><b>2.</b> Select the problem</li>
1599            <li><b>3.</b> Get the answer</li>
1600          </ol>
1601        </div>
1602
1603        <div class="container solve-demo-grid">
1604          <div class="problem-stage">
1605            <div class="problem-sheet">
1606              <span class="sheet-label">Algebra worksheet</span>
1607              <div class="math-problem">
1608                <p>Problem 12</p>
1609                <strong>2(3x + 5) - 4 = 26</strong>
1610                <span>Solve for x and show the method.</span>
1611                <div class="selection-outline" aria-hidden="true">
1612                  <span class="selection-scan"></span>
1613                </div>
1614              </div>
1615            </div>
1616          </div>
1617
1618          <aside class="solution-demo" aria-label="Step by step solution">
1619            <div class="solution-demo-head">
1620              <strong>NerdBuddy solution</strong>
1621            </div>
1622            <div class="solution-steps">
1623              <div class="solution-step">
1624                <b>1</b>
1625                <div>
1626                  <strong>Distribute the 2</strong>
1627                  <span>2(3x + 5) becomes 6x + 10.</span>
1628                </div>
1629              </div>
1630              <div class="solution-step">
1631                <b>2</b>
1632                <div>
1633                  <strong>Combine constants</strong>
1634                  <span>6x + 10 - 4 = 26 becomes 6x + 6 = 26.</span>
1635                </div>
1636              </div>
1637              <div class="solution-step">
1638                <b>3</b>
1639                <div>
1640                  <strong>Isolate x</strong>
1641                  <span>Subtract 6, then divide both sides by 6.</span>
1642                </div>
1643              </div>
1644            </div>
1645            <div class="demo-answer">
1646              <span>Final answer</span>
1647              <strong>x = 10/3</strong>
1648            </div>
1649          </aside>
1650        </div>
1651      </section>
1652
1653      <section class="section section-white" id="features" data-fast-scroll="viewed_features" data-fast-scroll-threshold="0.2">
1654        <div class="container">
1655          <div class="section-head">
1656            <span class="section-kicker">Core product</span>
1657            <h2>What NerdBuddy actually does inside Chrome.</h2>
1658            <p>NerdBuddy is a side-panel extension for selecting a visible math task, sending that crop to the solver, and keeping the answer workflow inside the browser.</p>
1659          </div>
1660
1661          <div class="feature-grid">
1662            <article class="feature-card">
1663              <span class="icon-box"><i class="fa-solid fa-crop-simple" aria-hidden="true"></i></span>
1664              <div>
1665                <h3>Select Area capture</h3>
1666                <p>Click Select Area, mark the exact problem on the active tab, and send only that screenshot crop to the solver.</p>
1667              </div>
1668            </article>
1669
1670            <article class="feature-card">
1671              <span class="icon-box green"><i class="fa-solid fa-list-ol" aria-hidden="true"></i></span>
1672              <div>
1673                <h3>Two answer styles</h3>
1674                <p>Step by step mode shows the method and final answer. Short answer mode returns only the final result.</p>
1675              </div>
1676            </article>
1677
1678            <article class="feature-card">
1679              <span class="icon-box amber"><i class="fa-solid fa-brain" aria-hidden="true"></i></span>
1680              <div>
1681                <h3>Faster or Deep Check</h3>
1682                <p>Faster mode is available to everyone. Deep Check is Premium-only and adds extra problem reading plus answer verification.</p>
1683              </div>
1684            </article>
1685
1686            <article class="feature-card">
1687              <span class="icon-box rose"><i class="fa-solid fa-square-root-variable" aria-hidden="true"></i></span>
1688              <div>
1689                <h3>Webpage, worksheet, and PDF selection</h3>
1690                <p>Use Select Area on supported webpages, worksheets, and PDFs opened in Chrome. For PDF content, NerdBuddy captures the visible page area so you can crop the exact problem.</p>
1691              </div>
1692            </article>
1693
1694            <article class="feature-card">
1695              <span class="icon-box violet"><i class="fa-solid fa-language" aria-hidden="true"></i></span>
1696              <div>
1697                <h3>15 answer languages</h3>
1698                <p>Answers can be generated in English, Polish, German, Spanish, French, Portuguese, Chinese, Hindi, Arabic, Russian, Japanese, Korean, Italian, Turkish, or Indonesian.</p>
1699              </div>
1700            </article>
1701
1702            <article class="feature-card">
1703              <span class="icon-box cyan"><i class="fa-solid fa-user-check" aria-hidden="true"></i></span>
1704              <div>
1705                <h3>Useful answer actions</h3>
1706                <p>Users can copy the final answer, share a solution image, report an issue, switch light or dark mode, and track remaining solves after sign-in.</p>
1707              </div>
1708            </article>
1709          </div>
1710        </div>
1711      </section>
1712
1713      <section class="section section-green" id="download" data-fast-scroll="viewed_download_cta" data-fast-scroll-threshold="0.4">
1714        <div class="container">
1715          <div class="download-cta">
1716            <div class="download-cta-inner">
1717              <div class="download-cta-copy">
1718                <span class="section-kicker">Get NerdBuddy</span>
1719                <h2>Add the math side panel to Chrome.</h2>
1720                <p>Install NerdBuddy, open the side panel, select a visible problem area, and keep the solution workflow inside your browser.</p>
1721              </div>
1722              <div class="download-cta-actions">
1723                <a class="button button-primary" href="https://chromewebstore.google.com/detail/nerdbuddy-ai-math-solver/nooedkmlpmccnphfngjhcfembllhanjj" target="_blank" rel="noopener noreferrer">
1724                  <img class="button-icon-img chrome-button-logo" src="google-chrome-logo.svg" alt="" aria-hidden="true" width="24" height="24">
1725                  <span>Add to Chrome</span>
1726                </a>
1727              </div>
1728            </div>
1729          </div>
1730        </div>
1731      </section>
1732
1733      <section class="section section-white" id="faq" data-fast-scroll="viewed_faq" data-fast-scroll-threshold="0.25">
1734        <div class="container">
1735          <div class="section-head center">
1736            <span class="section-kicker">FAQ</span>
1737            <h2>Clear answers before you install.</h2>
1738            <p>These answers match the current NerdBuddy Chrome extension behavior and server-side solve limits.</p>
1739          </div>
1740
1741          <div class="faq-list">
1742            <details class="faq-item">
1743              <summary><span class="faq-question">What does NerdBuddy send to the solver?</span></summary>
1744              <p>NerdBuddy sends the selected screenshot crop, not the full page. For PDFs, it captures the visible page area and lets the user crop the problem.</p>
1745            </details>
1746
1747            <details class="faq-item">
1748              <summary><span class="faq-question">Does it work on every Chrome page?</span></summary>
1749              <p>It is designed for supported webpages, worksheets, learning platforms, and PDFs opened in Chrome. Chrome blocks extensions on protected internal pages, so Select Area may be unavailable there.</p>
1750            </details>
1751
1752            <details class="faq-item">
1753              <summary><span class="faq-question">What is Deep Check?</span></summary>
1754              <p>Deep Check is the Premium solving mode. It adds extra problem reading and answer verification for harder screenshots; non-Premium accounts fall back to Faster mode.</p>
1755            </details>
1756
1757            <details class="faq-item">
1758              <summary><span class="faq-question">How do the solve limits work?</span></summary>
1759              <p>Anonymous installs get a small starter allowance. After Google sign-in, the extension shows the current account limit, remaining solves, and reset timing when available.</p>
1760            </details>
1761
1762            <details class="faq-item">
1763              <summary><span class="faq-question">Which languages can answers use?</span></summary>
1764              <p>The current extension supports English, Polish, German, Spanish, French, Portuguese, Chinese, Hindi, Arabic, Russian, Japanese, Korean, Italian, Turkish, and Indonesian.</p>
1765            </details>
1766
1767          </div>
1768        </div>
1769      </section>
1770
1771    </main>
1772
1773    <footer class="footer">
1774      <div class="container footer-inner">
1775        <div>
1776          <span>&copy; 2026 NerdBuddy.</span>
1777        </div>
1778        <div class="footer-links" aria-label="Footer links">
1779          <a href="privacy.html">Privacy</a>
1780          <a href="terms.html">Terms</a>
1781          <a href="contact.html">Contact</a>
1782        </div>
1783      </div>
1784    </footer>
1785    
1785<script>
1786      (function(){
1787        const counters = document.querySelectorAll(".counter[data-target]");
1788        if (!counters.length) return;
1789
1790        const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
1791
1792        function finish(counter) {
1793          const target = Number(counter.dataset.target || 0);
1794          counter.textContent = Number.isInteger(target) ? String(target) : target.toFixed(1);
1795        }
1796
1797        function animate(counter) {
1798          if (counter.dataset.counted === "true") return;
1799          counter.dataset.counted = "true";
1800
1801          const target = Number(counter.dataset.target || 0);
1802          if (!Number.isFinite(target) || prefersReducedMotion) {
1803            finish(counter);
1804            return;
1805          }
1806
1807          const start = performance.now();
1808          const duration = 1300;
1809          const hasDecimal = target % 1 !== 0;
1810
1811          function tick() {
1812            const now = performance.now();
1813            const progress = Math.min((now - start) / duration, 1);
1814            const eased = 1 - Math.pow(1 - progress, 3);
1815            const value = target * eased;
1816            counter.textContent = hasDecimal ? value.toFixed(1) : String(Math.floor(value));
1817            if (progress < 1) {
1818              window.setTimeout(tick, 16);
1819            } else {
1820              finish(counter);
1821            }
1822          }
1823
1824          tick();
1825        }
1826
1827        function runCounters() {
1828          counters.forEach(animate);
1829        }
1830
1831        window.setTimeout(runCounters, 0);
1832        window.addEventListener("load", runCounters, { once: true });
1833      })();
1834    </script>
1834
1835  </body>
1836</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.