Gemini Developer API | Gemma open models | Google AI for Developers

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google AI for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1967d2"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/googledevai/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/touchicon-180-new.png"><link rel="canonical" href="https://ai.google.dev/"><link rel="search" type="application/opensearchdescription+xml" title="Google AI for Developers" href="https://ai.google.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://ai.google.dev/" /><link rel="alternate" hreflang="x-default" href="https://ai.google.dev/" /><title>Gemini Developer API | Gemma open models  |  Google AI for Developers</title> <meta property="og:title" content="Gemini Developer API | Gemma open models  |  Google AI for Developers"><meta name="description" content="Build with Gemini 2.0 Flash, 2.0 Pro, and Gemma using the Gemini API and Google AI Studio."> <meta property="og:description" content="Build with Gemini 2.0 Flash, 2.0 Pro, and Gemma using the Gemini API and Google AI Studio."><meta property="og:url" content="https://ai.google.dev/"><meta property="og:image" content="https://ai.google.dev/static/site-assets/images/share-ai-dev.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Organization", "name": "Google AI for Developers", "logo": "https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/touchicon-180-new.png", "url": "https://ai.google.dev/" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Google AI for Developers", "url": "https://ai.google.dev/", "potentialAction": { "@type": "SearchAction", "target": "https://ai.google.dev/s/results?q={search_term_string}", "query-input": "required name=search_term_string" } } </script> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no, height=device-height" name="viewport"> <meta name="keywords" content="gemini api,google gemini,ai studio, google ai studio, gemini api python, gemini developers"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="googledevai-theme" type="marketing" layout="full" theme="googledevai-theme" appearance layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner" keep-tabs-visible> <div class="devsite-header--inner" data-nosnippet> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="googleAIForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/lockup-dark-theme-new.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/lockup-new.svg" class="devsite-site-logo" alt="Google AI for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-dropdown "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - models" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Models" track-name="models" > Models </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Gemini</li> <li class="devsite-nav-item"> <a href="https://deepmind.google/gemini" track-type="nav" track-metadata-eventdetail="https://deepmind.google/gemini" track-metadata-position="nav - models" track-metadata-module="tertiary nav" track-metadata-module_headline="gemini" tooltip > <div class="devsite-nav-item-title"> About </div> </a> </li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/gemini-api/docs" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/gemini-api/docs" track-metadata-position="nav - models" track-metadata-module="tertiary nav" track-metadata-module_headline="gemini" tooltip > <div class="devsite-nav-item-title"> Docs </div> </a> </li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/api" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/api" track-metadata-position="nav - models" track-metadata-module="tertiary nav" track-metadata-module_headline="gemini" tooltip > <div class="devsite-nav-item-title"> API reference </div> </a> </li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/pricing" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/pricing" track-metadata-position="nav - models" track-metadata-module="tertiary nav" track-metadata-module_headline="gemini" tooltip > <div class="devsite-nav-item-title"> Pricing </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Gemma</li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/gemma" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/gemma" track-metadata-position="nav - models" track-metadata-module="tertiary nav" track-metadata-module_headline="gemma" tooltip > <div class="devsite-nav-item-title"> About </div> </a> </li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/gemma/docs" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/gemma/docs" track-metadata-position="nav - models" track-metadata-module="tertiary nav" track-metadata-module_headline="gemma" tooltip > <div class="devsite-nav-item-title"> Docs </div> </a> </li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/gemma/gemmaverse" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/gemma/gemmaverse" track-metadata-position="nav - models" track-metadata-module="tertiary nav" track-metadata-module_headline="gemma" tooltip > <div class="devsite-nav-item-title"> Gemmaverse </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown devsite-dropdown-full "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - solutions" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Solutions" track-name="solutions" > Solutions </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Build with Gemini</li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/gemini-api/docs" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/gemini-api/docs" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="build with gemini" tooltip > <div class="devsite-nav-item-title"> Gemini API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://aistudio.google.com" track-type="nav" track-metadata-eventdetail="https://aistudio.google.com" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="build with gemini" tooltip > <div class="devsite-nav-item-title"> Google AI Studio </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Customize Gemma open models</li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/gemma" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/gemma" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="customize gemma open models" tooltip > <div class="devsite-nav-item-title"> Gemma open models </div> </a> </li> <li class="devsite-nav-item"> <a href="https://keras.io/keras_3/" track-type="nav" track-metadata-eventdetail="https://keras.io/keras_3/" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="customize gemma open models" tooltip > <div class="devsite-nav-item-title"> Multi-framework with Keras </div> </a> </li> <li class="devsite-nav-item"> <a href="https://colab.sandbox.google.com/github/google/generative-ai-docs/blob/main/site/en/gemma/docs/lora_tuning.ipynb" track-type="nav" track-metadata-eventdetail="https://colab.sandbox.google.com/github/google/generative-ai-docs/blob/main/site/en/gemma/docs/lora_tuning.ipynb" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="customize gemma open models" tooltip > <div class="devsite-nav-item-title"> Fine-tune in Colab </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Run on-device</li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/edge" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/edge" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="run on-device" tooltip > <div class="devsite-nav-item-title"> Google AI Edge </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/ai/gemini-nano" track-type="nav" track-metadata-eventdetail="https://developer.android.com/ai/gemini-nano" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="run on-device" tooltip > <div class="devsite-nav-item-title"> Gemini Nano on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai/built-in" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai/built-in" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="run on-device" tooltip > <div class="devsite-nav-item-title"> Chrome built-in web APIs </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Build responsibly</li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/responsible" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/responsible" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="build responsibly" tooltip > <div class="devsite-nav-item-title"> Responsible GenAI Toolkit </div> </a> </li> <li class="devsite-nav-item"> <a href="https://saif.google" track-type="nav" track-metadata-eventdetail="https://saif.google" track-metadata-position="nav - solutions" track-metadata-module="tertiary nav" track-metadata-module_headline="build responsibly" tooltip > <div class="devsite-nav-item-title"> Secure AI Framework </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - code assistance" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Code assistance" track-name="code assistance" > Code assistance </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.android.com/gemini-in-android" track-type="nav" track-metadata-eventdetail="https://developer.android.com/gemini-in-android" track-metadata-position="nav - code assistance" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Android Studio </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/console/understand-messages" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools/console/understand-messages" track-metadata-position="nav - code assistance" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Chrome DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://colab.google" track-type="nav" track-metadata-eventdetail="https://colab.google" track-metadata-position="nav - code assistance" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Colab </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/generative-ai" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/products/generative-ai" track-metadata-position="nav - code assistance" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Firebase </div> </a> </li> <li class="devsite-nav-item"> <a href="https://cloud.google.com/products/gemini/code-assist" track-type="nav" track-metadata-eventdetail="https://cloud.google.com/products/gemini/code-assist" track-metadata-position="nav - code assistance" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Google Cloud </div> </a> </li> <li class="devsite-nav-item"> <a href="https://plugins.jetbrains.com/plugin/8079-google-cloud-code" track-type="nav" track-metadata-eventdetail="https://plugins.jetbrains.com/plugin/8079-google-cloud-code" track-metadata-position="nav - code assistance" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> JetBrains </div> </a> </li> <li class="devsite-nav-item"> <a href="https://labs.google.com/jules/home" track-type="nav" track-metadata-eventdetail="https://labs.google.com/jules/home" track-metadata-position="nav - code assistance" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Jules </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/idx/guides/code-with-gemini-in-idx" track-type="nav" track-metadata-eventdetail="https://developers.google.com/idx/guides/code-with-gemini-in-idx" track-metadata-position="nav - code assistance" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Project IDX </div> </a> </li> <li class="devsite-nav-item"> <a href="https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode" track-type="nav" track-metadata-eventdetail="https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode" track-metadata-position="nav - code assistance" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> VS Code </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - showcase" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Showcase" track-name="showcase" > Showcase </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://ai.google.dev/showcase" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/showcase" track-metadata-position="nav - showcase" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Gemini Showcase </div> </a> </li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/competition" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/competition" track-metadata-position="nav - showcase" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Gemini API Developer Competition </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > Community </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://discuss.ai.google.dev" track-type="nav" track-metadata-eventdetail="https://discuss.ai.google.dev" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Google AI Forum </div> </a> </li> <li class="devsite-nav-item"> <a href="https://ai.google.dev/gemini-api/docs/gemini-for-research" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/gemini-api/docs/gemini-for-research" track-metadata-position="nav - community" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Gemini for Research </div> </a> </li> </ul> </div> </div> </div> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Google AI for Developers" tenant-name="Google AI for Developers" > <form class="devsite-search-form" action="https://ai.google.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="sq" >Shqip</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="googleAIForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/lockup-dark-theme-new.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/lockup-new.svg" class="devsite-site-logo" alt="Google AI for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Models" track-name="models" > <span class="devsite-nav-text" tooltip > Models </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Models" track-name="models" > <span class="devsite-nav-text" tooltip menu="Models"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Models"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Solutions" track-name="solutions" > <span class="devsite-nav-text" tooltip > Solutions </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Solutions" track-name="solutions" > <span class="devsite-nav-text" tooltip menu="Solutions"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Solutions"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Code assistance" track-name="code assistance" > <span class="devsite-nav-text" tooltip > Code assistance </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Code assistance" track-name="code assistance" > <span class="devsite-nav-text" tooltip menu="Code assistance"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Code assistance"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Showcase" track-name="showcase" > <span class="devsite-nav-text" tooltip > Showcase </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Showcase" track-name="showcase" > <span class="devsite-nav-text" tooltip menu="Showcase"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Showcase"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > <span class="devsite-nav-text" tooltip > Community </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > <span class="devsite-nav-text" tooltip menu="Community"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Community"> </span> </span> </li> </ul> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Models" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Gemini </span> </span> </li> <li class="devsite-nav-item"> <a href="https://deepmind.google/gemini" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/gemini-api/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> </li> <li class="devsite-nav-item"> <a href="/api" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: API reference" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > API reference </span> </a> </li> <li class="devsite-nav-item"> <a href="/pricing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Pricing" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Pricing </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Gemma </span> </span> </li> <li class="devsite-nav-item"> <a href="/gemma" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/gemma/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> </li> <li class="devsite-nav-item"> <a href="/gemma/gemmaverse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemmaverse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemmaverse </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Solutions" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build with Gemini </span> </span> </li> <li class="devsite-nav-item"> <a href="/gemini-api/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemini API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemini API </span> </a> </li> <li class="devsite-nav-item"> <a href="https://aistudio.google.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AI Studio" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AI Studio </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Customize Gemma open models </span> </span> </li> <li class="devsite-nav-item"> <a href="/gemma" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemma open models" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemma open models </span> </a> </li> <li class="devsite-nav-item"> <a href="https://keras.io/keras_3/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Multi-framework with Keras" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Multi-framework with Keras </span> </a> </li> <li class="devsite-nav-item"> <a href="https://colab.sandbox.google.com/github/google/generative-ai-docs/blob/main/site/en/gemma/docs/lora_tuning.ipynb" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Fine-tune in Colab" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Fine-tune in Colab </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Run on-device </span> </span> </li> <li class="devsite-nav-item"> <a href="/edge" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AI Edge" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AI Edge </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/ai/gemini-nano" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemini Nano on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemini Nano on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai/built-in" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome built-in web APIs" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome built-in web APIs </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build responsibly </span> </span> </li> <li class="devsite-nav-item"> <a href="/responsible" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Responsible GenAI Toolkit" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Responsible GenAI Toolkit </span> </a> </li> <li class="devsite-nav-item"> <a href="https://saif.google" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Secure AI Framework" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Secure AI Framework </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Code assistance" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="https://developer.android.com/gemini-in-android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android Studio" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android Studio </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools/console/understand-messages" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="https://colab.google" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Colab" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Colab </span> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/products/generative-ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Firebase" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Firebase </span> </a> </li> <li class="devsite-nav-item"> <a href="https://cloud.google.com/products/gemini/code-assist" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Cloud" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Cloud </span> </a> </li> <li class="devsite-nav-item"> <a href="https://plugins.jetbrains.com/plugin/8079-google-cloud-code" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: JetBrains" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JetBrains </span> </a> </li> <li class="devsite-nav-item"> <a href="https://labs.google.com/jules/home" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Jules" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Jules </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/idx/guides/code-with-gemini-in-idx" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Project IDX" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Project IDX </span> </a> </li> <li class="devsite-nav-item"> <a href="https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: VS Code" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > VS Code </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Showcase" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/showcase" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemini Showcase" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemini Showcase </span> </a> </li> <li class="devsite-nav-item"> <a href="/competition" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemini API Developer Competition" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemini API Developer Competition </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Community" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="https://discuss.ai.google.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AI Forum" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AI Forum </span> </a> </li> <li class="devsite-nav-item"> <a href="/gemini-api/docs/gemini-for-research" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemini for Research" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemini for Research </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /css/style.css */ [theme=googledevai-theme][layout=full] { --devsite-main-content-padding: 40px 0; } @media screen and (max-width: 600px) { [theme=googledevai-theme][layout=full] { --devsite-main-content-padding: 16px 0; --devsite-banner-margin: -16px 0 16px; } } @media screen and (max-width: 840px) { [theme=googledevai-theme][layout=full] { --devsite-main-content-padding: 24px 0; --devsite-banner-margin: -24px 0 16px; } } .gemini-page { font-family: var(--gemini-font-primary); font-size: var(--gemini-font-size-base); background-color: var(--gemini-color-background); color: var(--gemini-color-foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeSpeed; display: block; } .gemini-page * { margin: 0; } .devsite-article .gemini-page h1:first-of-type { display: flex; margin-top: inherit; vertical-align: inherit; } .gemini-page *, .gemini-page *:before, .gemini-page *:after { box-sizing: border-box; } .gemini-page ol, .gemini-page ul, .gemini-page li { /* all: unset; */ list-style: none; padding: 0; } .gemini-page img, .gemini-page picture, .gemini-page video, .gemini-page canvas, .gemini-page svg { max-inline-size: 100%; block-size: auto; } .gemini-page input, .gemini-page button, .gemini-page textarea, .gemini-page select { font: inherit; } /* remove link drag and call-out menu on touch */ .gemini-page a, .gemini-page img { -webkit-touch-callout: none; -webkit-user-drag: none; } /* Hide outline for mouse users. */ .gemini-page :focus:not(:focus-visible) { outline: none; } .gemini-page { --gemini-color-white: rgb(255 255 255); --gemini-color-grey-50: #f7f9fd; --gemini-color-grey-100: #f0f3f8; --gemini-color-grey-200: #d2d8e4; --gemini-color-grey-300: #b7becf; --gemini-color-grey-400: #939db6; --gemini-color-grey-500: #828fb1; --gemini-color-grey-600: #2f3543; --gemini-color-grey-700: #1b212d; --gemini-color-grey-800: #161823; --gemini-color-grey-900: #060606; --gemini-color-black: rgb(0 0 0); --gemini-color-gemini-peach: #FFDDB7; --gemini-color-gemini-blue: #368EFE; --gemini-color-gemini-cyan: #4FABFF; --gemini-color-gemini-light-blue: #B1C5FF; --gemini-color-gemini-white: var(--gemini-color-white); --gemini-color-gemini-grey-700: #5F6368; --gemini-color-gemini-grey-900: #202124; --gemini-color-blue: #368efe; --gemini-color-purple-100: #ac87eb; --gemini-color-red-200: #ee4d5d; --gemini-color-green-800: #137333; --gemini-color-blue-800: #185ABC; --gemini-color-blue-gradient: linear-gradient(61deg, #64b8fb 6.28%, #217bfe 76.97%); --gemini-color-pink-gradient: linear-gradient(90deg, #a485fa -104.88%, var(--gemini-color-red-200) 198.78%); --gemini-color-logo-gradient: linear-gradient(90deg, #217bfe 0%, #078efb 33.53%, #ac87eb 70%, #ee4d5d 100%); --gemini-color-primary-button-gradient: linear-gradient(52deg, #0844ff 11.5%, #64b8fb 129.52%); --gemini-color-chart-gradient: linear-gradient(105deg, #446eff 18.71%, #2e96ff 49.8%, #b1c5ff 90.55%); --gemini-color-foreground: var(--gemini-color-white); --gemini-color-background: var(--gemini-color-grey-900); --gemini-branding-button-gradient: linear-gradient(15deg, #217BFE 1.02%, #078EFB 28.51%, #A190FF 80.14%, #BD99FE 102.85%); --gemini-branding-text-gradient: linear-gradient(90deg, #217BFE 0%, #078EFB 33.53%, #AC87EB 67.74%, #EE4D5D 100%); --gemini-gradient-linear-colors: var(--gemini-color-gemini-blue) 5.96%, var(--gemini-color-gemini-cyan) 56.89%, var(--gemini-color-gemini-light-blue) 93.53%; --gemini-gradient-linear: linear-gradient(53deg, #0260FF 9.29%, #40A2FF 48.23%, #A8BEFF 82.56%); --gemini-text-gradient-light-blue: linear-gradient(69deg, #AABDF4 16.42%, #FFF 77.56%, #A8BEFF 124.91%); } .gemini-page .gemini-text-color-grey-300 { color: var(--gemini-color-grey-300); } .gemini-page .gemini-text-color-grey-400 { color: var(--gemini-color-grey-400); } .gemini-page .gemini-text-color-grey-500 { color: var(--gemini-color-grey-500); } .gemini-page { --gemini-font-primary: "Google Sans", Arial, Helvetica, sans-serif; --gemini-font-secondary: "Roboto Mono", Courier, monospace; --gemini-font-tertiary: "Google Sans Text", Arial, Helvetica, sans-serif; --gemini-font-size-base: 16px; --gemini-size-grid-margin: 20px; --gemini-size-max-width: calc(1440px + var(--gemini-size-grid-margin) * 2); --gemini-size-grid-gap: 8px; --devsite-main-content-padding-top: 40px; } @media (min-width: 600px) { .gemini-page { --gemini-size-grid-margin: 40px; --gemini-size-grid-gap: 20px; } } @media (min-width: 1440px) { .gemini-page { --gemini-size-grid-margin: 80px; } } .gemini-page { --gemini-border-radius-d16: 8px; --gemini-border-radius-d24: 16px; --gemini-border-radius-d32: 24px; } @media (min-width: 834px) { .gemini-page { --gemini-border-radius-d16: 16px; --gemini-border-radius-d24: 24px; --gemini-border-radius-d32: 32px; } } .gemini-page { --gemini-ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --gemini-ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --gemini-ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --gemini-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --gemini-ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --gemini-ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --gemini-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --gemini-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --gemini-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --gemini-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --gemini-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --gemini-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); --gemini-ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --gemini-ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --gemini-ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --gemini-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --gemini-ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --gemini-ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); --gemini-ease-out-back: cubic-bezier(0.34, 1.85, 0.64, 1); --gemini-viewport-height: 100vh; --gemini-100vh: var(--gemini-viewport-height, 100vh); } .gemini-center-wrapper { display: flex; justify-content: center; align-items: center; } .gemini-page .gemini-type-d1, .gemini-page .gemini-type-d2, .gemini-page .gemini-type-d3, .gemini-page .gemini-type-d4 { font-family: var(--gemini-font-primary); line-height: 100%; font-weight: 400; } .gemini-page .gemini-type-d1 { font-size: 3.5rem; letter-spacing: -0.025862069em; } .gemini-page .gemini-type-d2 { font-size: 3rem; letter-spacing: -0.021em; } .gemini-page .gemini-type-d3 { font-size: 2.75rem; letter-spacing: -0.05rem; line-height: 105%; } .gemini-page .gemini-type-d4 { font-size: 2.25rem; line-height: 110%; letter-spacing: -0.05rem; } @media (min-width: 834px) { .gemini-page .gemini-type-d4 { font-size: 4rem; letter-spacing: -0.0125em; } } .gemini-page .gemini-type-h1, .gemini-page .gemini-type-h2, .gemini-page .gemini-type-h3, .gemini-page .gemini-type-h4 { font-family: var(--gemini-font-primary); line-height: 120%; font-weight: 400; } .gemini-page .gemini-type-h1 { font-size: 1.625rem; letter-spacing: -0.03125rem; } .gemini-page .gemini-type-h2 { font-size: 1.625rem; letter-spacing: -0.03125rem; } .gemini-page .gemini-type-h3 { font-size: 1.5rem; line-height: 120%; letter-spacing: -0.03125rem; } .gemini-page .gemini-type-h4 { font-size: 1.375rem; } .gemini-page .gemini-type-t1-medium, .gemini-page .gemini-type-t1, .gemini-page .gemini-type-t2, .gemini-page .gemini-type-t3 { font-family: var(--gemini-font-primary); } .gemini-page .gemini-type-t1-medium { font-size: 1rem; font-weight: 500; line-height: 140%; } .gemini-page .gemini-type-t1 { font-size: 1rem; font-weight: 400; line-height: 140%; } .gemini-page .gemini-type-t2 { font-size: 0.875rem; font-weight: 500; line-height: 140%; } .gemini-page .gemini-type-t3 { font-size: 0.75rem; font-weight: 500; line-height: 140%; } .gemini-page .gemini-type-b1, .gemini-page .gemini-type-b2 { font-family: var(--gemini-font-primary); font-weight: 400; line-height: 160%; } .gemini-page .gemini-type-b1 { font-size: 0.875rem; } .gemini-page .gemini-type-b2 { font-size: 0.875rem; line-height: 160%; } .gemini-page .gemini-type-btn { font-family: var(--gemini-font-primary); font-size: 0.875rem; font-weight: 500; line-height: 1.625em; } .gemini-page .gemini-type-btn-secondary { font-size: 0.875rem; } .gemini-page .gemini-type-code, .gemini-page .gemini-type-code pre { font-family: var(--gemini-font-secondary); font-size: 0.75rem; font-weight: 400; line-height: 1.666em; padding: 0; } .gemini-page .gemini-type-l1, .gemini-page .gemini-type-l2 { font-family: var(--gemini-font-primary); text-transform: uppercase; font-weight: 700; line-height: 140%; letter-spacing: 0.0416666667em; } .gemini-page .gemini-type-l1 { font-size: 0.75rem; } .gemini-page .gemini-type-l2 { font-size: 0.75rem; } .gemini-page .gemini-type-l3 { font-size: 0.75rem; font-weight: 500; letter-spacing: 0; } @media (min-width: 834px) { .gemini-page .gemini-type-h3 { font-size: 2rem; letter-spacing: auto; } .gemini-page .gemini-type-h4 { font-size: 1.75rem; } .gemini-page .gemini-type-t1-medium { font-size: 1.25rem; } .gemini-page .gemini-type-t1 { font-size: 1.25rem; } .gemini-page .gemini-type-t2 { font-size: 1rem; line-height: 160%; } .gemini-page .gemini-type-t3 { font-size: 0.875rem; } .gemini-page .gemini-type-b1 { font-size: 1rem; } .gemini-page .gemini-type-b2 { font-size: 0.875rem; line-height: 160%; } .gemini-page .gemini-type-btn { font-size: 1rem; } .gemini-page .gemini-type-code, .gemini-page .gemini-type-code pre { line-height: 1.666em; font-size: 1rem; } .gemini-page .gemini-type-l1 { font-size: 0.875rem; } .gemini-page .gemini-type-l2 { font-size: 0.75rem; } .gemini-page .gemini-type-l3 { font-size: 0.75rem; } .gemini-page .gemini-type-d1 { font-size: 6.75rem; /*letter-spacing: -0.1875rem;*/ } .gemini-page .gemini-type-d2 { font-size: 6rem; } .gemini-page .gemini-type-d3 { font-size: 4.5rem; letter-spacing: -0.0111111111em; line-height: 110%; } .gemini-page .gemini-type-h1 { font-size: 2.8125rem; } .gemini-page .gemini-type-h2 { font-size: 2.25rem; } } .gemini-page { --gemini-space-8: 8px; --gemini-space-12: 12px; --gemini-space-16: 16px; --gemini-space-24: 24px; --gemini-space-32: 32px; --gemini-space-40: 40px; --gemini-space-48: 48px; --gemini-space-56: 56px; --gemini-space-64: 64px; --gemini-space-72: 72px; --gemini-space-80: 80px; --gemini-space-88: 88px; --gemini-space-96: 96px; --gemini-space-120: 120px; --gemini-space-140: 140px; --gemini-space-164: 164px; --gemini-space-180: 180px; --gemini-space-200: 200px; --gemini-space-220: 220px; --gemini-space-240: 240px; --gemini-space-264: 264px; --gemini-space-280: 280px; --gemini-space-320: 320px; --gemini-space-360: 360px; --gemini-space-440: 400px; --gemini-space-d8: var(--gemini-space-8); --gemini-space-d12: var(--gemini-space-12); --gemini-space-d16: var(--gemini-space-16); --gemini-space-d24: var(--gemini-space-16); --gemini-space-d32: var(--gemini-space-24); --gemini-space-d40: var(--gemini-space-32); --gemini-space-d48: var(--gemini-space-40); --gemini-space-d64: var(--gemini-space-48); --gemini-space-d72: var(--gemini-space-56); --gemini-space-d80: var(--gemini-space-40); --gemini-space-d88: var(--gemini-space-64); --gemini-space-d80: var(--gemini-space-40); --gemini-space-d120: var(--gemini-space-88); --gemini-space-d140: var(--gemini-space-120); --gemini-space-d180: var(--gemini-space-120); --gemini-space-d220: var(--gemini-space-180); --gemini-space-d264: var(--gemini-space-180); --gemini-space-d280: var(--gemini-space-200); --gemini-space-d320: var(--gemini-space-220); --gemini-space-d360: var(--gemini-space-240); --gemini-space-d440: var(--gemini-space-264); } @media (min-width: 834px) { .gemini-page { --gemini-space-d8: var(--gemini-space-8); --gemini-space-d12: var(--gemini-space-12); --gemini-space-d16: var(--gemini-space-16); --gemini-space-d24: var(--gemini-space-24); --gemini-space-d32: var(--gemini-space-32); --gemini-space-d40: var(--gemini-space-40); --gemini-space-d48: var(--gemini-space-48); --gemini-space-d64: var(--gemini-space-64); --gemini-space-d72: var(--gemini-space-72); --gemini-space-d80: var(--gemini-space-80); --gemini-space-d88: var(--gemini-space-88); --gemini-space-d120: var(--gemini-space-120); --gemini-space-d140: var(--gemini-space-140); --gemini-space-d180: var(--gemini-space-180); --gemini-space-d220: var(--gemini-space-220); --gemini-space-d264: var(--gemini-space-264); --gemini-space-d280: var(--gemini-space-280); --gemini-space-d320: var(--gemini-space-320); --gemini-space-d360: var(--gemini-space-360); --gemini-space-d440: var(--gemini-space-440); } } .gemini-page .gemini-space-d8 { margin-block-end: var(--gemini-space-d8); } .gemini-page .gemini-space-d12 { margin-block-end: var(--gemini-space-d12); } .gemini-page .gemini-space-d16 { margin-block-end: var(--gemini-space-d16); } .gemini-page .gemini-space-d24 { margin-block-end: var(--gemini-space-d24); } .gemini-page .gemini-space-d32 { margin-block-end: var(--gemini-space-d32); } .gemini-page .gemini-space-d40 { margin-block-end: var(--gemini-space-d40); } .gemini-page .gemini-space-d48 { margin-block-end: var(--gemini-space-d48); } .gemini-page .gemini-space-d64 { margin-block-end: var(--gemini-space-d64); } .gemini-page .gemini-space-d72 { margin-block-end: var(--gemini-space-d72); } .gemini-page .gemini-space-d80 { margin-block-end: var(--gemini-space-d80); } .gemini-page .gemini-space-d88 { margin-block-end: var(--gemini-space-d88); } .gemini-page .gemini-space-d120 { margin-block-end: var(--gemini-space-d120); } .gemini-page .gemini-space-d140 { margin-block-end: var(--gemini-space-d140); } .gemini-page .gemini-space-d164 { margin-block-end: var(--gemini-space-d164); } .gemini-page .gemini-space-d180 { margin-block-end: var(--gemini-space-d180); } .gemini-page .gemini-space-d220 { margin-block-end: var(--gemini-space-d220); } .gemini-page .gemini-space-d264 { margin-block-end: var(--gemini-space-d264); } .gemini-page .gemini-space-d280 { margin-block-end: var(--gemini-space-d280); } body[theme=googledevai-theme][layout=full] .devsite-main-content { max-width: none; padding-bottom: 0; background-color: #060606; } body[theme=googledevai-theme][layout=full] .devsite-article-body { margin-top: 0; background-color: var(--gemini-color-background); } body[theme=googledevai-theme] .devsite-banner-announcement { position: relative; z-index: 10; } devsite-header .devsite-product-id-row { display: none; } .gemini-page .gemini-decoration-link { text-decoration: underline; color: var(--gemini-color-blue-400); display: inline-flex; align-items: center; gap: var(--gemini-space-8); } .gemini-page .gemini-layout-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gemini-size-grid-gap); } .gemini-page .gemini-layout-max-width { max-inline-size: var(--gemini-size-max-width); padding-inline: var(--gemini-size-grid-margin); margin-inline: auto; } .gemini-page .gemini-layout-zstack { display: grid; } .gemini-page .gemini-layout-zstack > * { grid-area: 1/-1; } .gemini-page .gemini-layout-inline { display: inline-flex; flex-direction: row; align-items: center; gap: var(--gemini-space, 8px); } .gemini-page .gemini-layout-stack { display: flex; flex-direction: column; justify-content: flex-start; } .gemini-page .gemini-layout-stack > * { margin-block: 0; } .gemini-page .gemini-layout-stack > * + * { margin-block-start: var(--gemini-space, 1rem); } .gemini-page .gemini-shape-box { border-radius: var(--gemini-corner-radius-medium); } .gemini-page .gemini-shape-rounded-container { border-radius: 24px; } .gemini-page .gemini-shape-pill-label { display: inline-flex; align-items: center; background: var(--gemini-shape-pill-background, rgba(7, 110, 255, 0.2)); color: var(--gemini-label-color, #b1c5ff); padding: 6px 11px; border-radius: 99em; } @media (min-width: 834px) { .gemini-page .gemini-layout-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (min-width: 1024px) { .gemini-page .gemini-layout-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } /** Gemini: Gradient Text */ .gemini-gradient-text { --gemini-_gradient: var(--gemini-text-gradient, var(--gemini-color-blue-gradient)); } .gemini-gradient-text span { background: var(--gemini-_gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } /** Gemini: Youtube Video */ .gemini-youtube { position: relative; inline-size: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; border: 4px solid var(--gemini-color-grey-800); transition: border 0.2s var(--gemini-ease-in-out-quad); --gemini-hover-scale: 0.1; } .gemini-youtube:has(:hover) { border: 4px solid var(--gemini-color-blue); } .gemini-youtube:has(:hover) .gemini-youtube__play-button { transform: scale(calc(1 + var(--gemini-hover-scale))); } @media (min-width: 834px) { .gemini-youtube { border-radius: 32px; } } .gemini-youtube-poster { cursor: pointer; line-height: 0; } .gemini-youtube-poster :is(img, video) { height: 100%; width: 100%; } .gemini-video-overlay { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 12px; cursor: pointer; background-color: rgba(0, 0, 0, 0.05); pointer-events: none; } @media (min-width: 834px) { .gemini-video-overlay { gap: 48px; } } .gemini-video-overlay:hover { --gemini-hover-scale: 0.1; } .gemini-video-overlay:hover .gemini-youtube__play-button { transform: scale(calc(1 + var(--gemini-hover-scale))); } .gemini-youtube__title { max-width: 214px; display: inline-block; text-align: center; position: relative; z-index: 5; } @media (min-width: 834px) { .gemini-youtube__title { max-width: 620px; } } @media (max-width: 834px) { .gemini-youtube__title { font-size: 26px !important; } } .gemini-youtube__play-button { all: unset; height: 32px; width: 32px; border-radius: 50%; background: var(--gemini-color-white); display: grid; place-items: center; position: relative; z-index: 5; transition: transform 0.3s var(--gemini-ease-in-out-quad); box-shadow: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px 0 rgba(60, 64, 67, 0.32); } @media (min-width: 834px) { .gemini-youtube__play-button { height: 64px; width: 64px; } } .gemini-youtube__play-button svg { height: 16px; width: 16px; } @media (min-width: 834px) { .gemini-youtube__play-button svg { height: 28px; width: 28px; } } @media (min-width: 834px) { .gemini-anchor-padding { padding-block-start: 40px; } } @media (min-width: 834px) { .gemini-only-mobile { display: none; } } .gemini-only-desktop { display: none; } @media (min-width: 834px) { .gemini-only-desktop { display: block; } } /* Spinner */ .gemini-spinner { block-size: 48px; inline-size: 48px; flex-shrink: 0; animation: gemini-spinner-animation 1.6s linear infinite; } @keyframes gemini-spinner-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Gemini: Item grid */ .gemini-page .gemini-card-grid { row-gap: 8px; } @media (min-width: 834px) { .gemini-page .gemini-card-grid { row-gap: var(--gemini-size-grid-gap); } } .gemini-page .gemini-card-grid > * { grid-column: -1/1; } @media screen and (min-width: 834px) { .gemini-page .gemini-card-grid > * { grid-column: span 4/span 8; } } @media screen and (min-width: 1024px) { .gemini-page .gemini-card-grid > * { grid-column: span 4/span 12; } } .gemini-page .gemini-layout-small-card { align-items: flex-start; display: flex; padding: 24px; block-size: 100%; } @media screen and (min-width: 600px) { .gemini-page .gemini-layout-small-card { padding-block: 32px; padding-inline: 32px 40px; } } .gemini-page .gemini-layout-small-card.gemini-has-icon { gap: 24px; } @media screen and (min-width: 600px) { .gemini-page .gemini-layout-small-card.gemini-has-icon { gap: 32px; } } .gemini-page .gemini-layout-small-card.gemini-has-icon .gemini-icon { flex-shrink: 0; inline-size: 32px; line-height: 0; } .gemini-page a.gemini-reset-link { text-decoration: none; color: inherit; } .gemini-page .gemini-lottie-lines svg path { vector-effect: non-scaling-stroke; stroke-width: 1.5px !important; } /* ARROW LINK */ .gemini-arrow-link { color: var(--gemini-link-color, var(--gemini-color-white)); display: inline-flex; position: relative; text-decoration: none; text-underline-offset: 3px; justify-content: center; } .gemini-arrow-link .gemini-arrow { display: inline-block; inline-size: 16px; inset-block-start: calc(50% - 8px); inset-inline-start: calc(100% + 3px); line-height: 0; position: absolute; } .gemini-arrow-link:hover { text-decoration: underline; } /* Gemini Pill Button */ .gemini-page .gemini-btn { --gemini-_border: var(--gemini-button-border, var(--gemini-color-grey-600)); --gemini-_background: var(--gemini-button-fill, transparent); --gemini-_text: var(--gemini-button-text, inherit); border: 0; appearance: none; text-decoration: none; position: relative; cursor: pointer; color: var(--gemini-_text); background-color: var(--gemini-_background); user-select: none; display: inline-flex; justify-content: center; align-items: center; border-radius: 99em; padding: 15px 24px; leading-trim: both; height: auto; } .gemini-page .gemini-btn span { position: relative; z-index: 1; } .gemini-page .gemini-btn::before { position: absolute; content: ""; inset: 0; border-radius: inherit; will-change: opacity; transition-property: opacity; transition-duration: 0.25s; opacity: 0; } .gemini-page .gemini-btn:hover::before { opacity: 1; } .gemini-page .gemini-btn.gemini-disabled { pointer-events: none; opacity: 0.5; } .gemini-page .gemini-btn.gemini-has--icon > span { display: inline-flex; align-items: center; gap: var(--gemini-icon-gap, 12px); } /* Gemini Primary Button */ .gemini-page .gemini-btn.gemini-primary { --gemini-_text: var(--gemini-button-text, var(--gemini-color-white)); --gemini-_text-hover: var(--gemini-button-text-hover, var(--gemini-color-blue)); --gemini-_background: var(--gemini-button-fill, var(--gemini-color-grey-700)); --gemini-_background-hover: var(--gemini-button-fill-hover, var(--gemini-color-white)); transition: color 0.2s ease-in-out; } .gemini-page .gemini-btn.gemini-primary::before { background-color: var(--gemini-_background-hover); color: var(--gemini-_text-hover); box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); } .gemini-page .gemini-btn.gemini-primary:hover { color: var(--gemini-_text-hover); } .gemini-page .gemini-btn.gemini-primary:hover::before { opacity: 1; } /* Gemini Secondary Button */ .gemini-page .gemini-btn.gemini-secondary { border: 1px solid var(--gemini-_border); transition: color 0.18s ease-in-out, background 0.2s ease-in-out; } .gemini-page .gemini-btn.gemini-secondary::before { background-color: var(--gemini-button-hover, rgba(255, 255, 255, 0.09)); } /* Gemini Tertiary Button */ .gemini-page .gemini-btn.gemini-tertiary { --gemini-_text: var(--gemini-button-text, var(--gemini-color-white)); padding-inline: 20px; padding-block: 10px; transition: transform 0.18s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out; border: 1px solid var(--gemini-_border); } .gemini-page .gemini-btn.gemini-tertiary:hover { background: var(--gemini-button-hover-background, var(--gemini-color-white)); color: var(--gemini-button-hover-text, var(--gemini-color-black)); } .gemini-page .gemini-btn.gemini-tertiary.gemini-has--icon { padding-inline: 18px 20px; } .gemini-page .gemini-btn.gemini-tertiary.gemini-has--icon > span { gap: 8px; } .gemini-page .gemini-btn.gemini-tertiary::before { background-color: var(--gemini-button-hover); } /* Gemini Gradient Button */ .gemini-page .gemini-btn.gemini-gradient { position: relative; --gemini-_background: var( --gemini-button-fill, var(--gemini-color-primary-button-gradient) ); background-image: var(--gemini-_background); transition: color 0.18s; } .gemini-page .gemini-btn.gemini-gradient::before { background: var(--gemini-button-hover-background, var(--gemini-color-white)); } .gemini-page .gemini-btn.gemini-gradient:hover { color: var(--gemini-button-hover-color, var(--gemini-color-blue, #368efe)); } .gemini-page .gemini-btn.gemini-gradient:hover::before { opacity: 1; } @media (min-width: 834px) { .gemini-page .gemini-btn { padding-block: 16px; } } /* CARD LIST */ .gemini-card-list { display: flex; flex-direction: column; row-gap: 12px; } @media screen and (min-width: 834px) { .gemini-card-list { row-gap: 16px; } } /* CARD GRID */ .gemini-cards-wrapper { display: grid; gap: 12px; grid-template-columns: repeat(1, 1fr); } @media screen and (min-width: 834px) { .gemini-cards-wrapper { gap: var(--gemini-size-grid-gap); } } @media screen and (min-width: 834px) { .gemini-cards-wrapper.gemini-row-of-two { grid-template-columns: repeat(2, 1fr); } } .gemini-cards-wrapper.gemini-row-of-two > * { grid-column: 1 span/auto; } /* GEMINI CARD GRID LIST */ .gemini-card-grid-list { --_gemini-colunm-amount: var(--gemini-grid-colunm-amount, 1); display: grid; gap: 12px; grid-template-columns: repeat(var(--_gemini-colunm-amount), 1fr); } @media screen and (min-width: 1024px) { .gemini-card-grid-list { --_gemini-colunm-amount: var(--gemini-grid-colunm-amount, 2); gap: var(--gemini-size-grid-gap); } .gemini-card-grid-list.gemini-row-of-three { --gemini-grid-colunm-amount: 3; } .gemini-card-grid-list > * { grid-column: 1 span/auto; } } /* GUIDE CARD LIST */ .gemini-card-guides { align-items: stretch; display: flex; flex-direction: column; gap: 12px; } .gemini-card-guides > * { flex-basis: 100%; inline-size: 100%; } @media screen and (min-width: 1024px) { .gemini-card-guides { flex-direction: row; flex-wrap: wrap; gap: var(--gemini-size-grid-gap); justify-content: center; } .gemini-card-guides > * { flex-basis: calc(33.3333333333% - var(--gemini-size-grid-gap) * 2); flex-grow: 1; min-width: 250px; } } /* BACKGROUND WRAPPER */ .gemini-background-wrapper { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: var(--gemini-border-radius-d32); display: block; inline-size: 100%; overflow: hidden; padding-block: var(--gemini-wrapper-padding-top, var(--gemini-space-d120)); padding-inline: 24px; position: relative; } @media (min-width: 1024px) { .gemini-background-wrapper { padding-inline: 0; } } .gemini-background-wrapper.gemini-background-dark { --gemini-section-copy-color: var(--gemini-color-grey-400); background-image: url("/images/system/wrapper-background-dark.jpg"); border: 1px solid var(--gemini-wrapper-border-color, var(--gemini-color-grey-700)); } .gemini-background-wrapper.gemini-background-dark .gemini-gradient-CTA_wrapper { background-image: none; background-color: var(--gemini-color-grey-800); } .gemini-background-wrapper.gemini-background-light-blue { --gemini-section-copy-color: var(--gemini-color-white); --gemini-section-title-color: var(--gemini-color-white); background-image: url("/images/system/wrapper-background-light-blue.jpg"); } .gemini-background-wrapper.gemini-background-green { --gemini-section-copy-color: var(--gemini-color-white); --gemini-section-copy-color: var(--gemini-color-grey-400); background-image: url("/images/system/wrapper-background-green.jpg"); border: 1px solid var(--gemini-wrapper-border-color, var(--gemini-color-green-800)); } .gemini-background-wrapper.gemini-background-dark-blue { --gemini-section-copy-color: var(--gemini-color-white); --gemini-section-copy-color: var(--gemini-color-grey-400); background-image: url("/images/system/wrapper-background-dark-blue.jpg"); border: 1px solid var(--gemini-wrapper-border-color, var(--gemini-color-blue-800)); } /* GEMINI TEXT LIST */ .gemini-text-list.gemini-layout-grid { row-gap: 0; } .gemini-text-list.gemini-has-animation .gemini-text-list-headline, .gemini-text-list.gemini-has-animation .gemini-text-list-item { opacity: 0; transform: translateY(20px); will-change: transform; transition-property: opacity, transform; transition-duration: 0.5s, 0.6s; transition-delay: calc(var(--gemini-text-animation-delay) * 0.12s + 0.3s); transition-timing-function: var(--gemini-ease-out-quad); } .gemini-text-list.gemini-has-animation.gemini-onscreen .gemini-text-list-headline, .gemini-text-list.gemini-has-animation.gemini-onscreen .gemini-text-list-item { opacity: 1; transform: translateY(0); } .gemini-text-list .gemini-text-list-headline, .gemini-text-list .gemini-text-list-wrapper { grid-column: 1/-1; } @media (min-width: 834px) { .gemini-text-list .gemini-text-list-headline, .gemini-text-list .gemini-text-list-wrapper { grid-column: 2/span 6; } } @media (min-width: 1024px) { .gemini-text-list .gemini-text-list-headline, .gemini-text-list .gemini-text-list-wrapper { grid-column: 3/span 8; } } .gemini-text-list .gemini-text-list-headline { text-align: center; } .gemini-text-list .gemini-text-list-item { display: grid; grid-template-columns: repeat(8, 1fr); padding-block: 16px 32px; border-top: 1px solid var(--gemini-color-grey-700); column-gap: var(--gemini-size-grid-gap); row-gap: 8px; } @media (min-width: 834px) { .gemini-text-list .gemini-text-list-item { padding-block: 24px 40px; } } .gemini-text-list .gemini-text-list-item .gemini-title-wrapper { grid-column: 1/-1; } @media (min-width: 834px) { .gemini-text-list .gemini-text-list-item .gemini-title-wrapper { grid-column: span 3/auto; } .gemini-text-list .gemini-text-list-item .gemini-title-wrapper > * { max-inline-size: 202px; } } .gemini-text-list .gemini-text-list-item .gemini-description-wrapper { grid-column: 1/-1; } .gemini-text-list .gemini-text-list-item .gemini-description-wrapper > * { max-inline-size: 450px; color: var(--gemini-color-grey-400); } @media (min-width: 834px) { .gemini-text-list .gemini-text-list-item .gemini-description-wrapper { grid-column: span 5/auto; } } /* GEMINI CARD GRID ITEM */ .gemini-card-grid-item .gemini-card-content { --_gemini-card-arrow-color: var(--gemini-card-arrow-color, var(--gemini-color-blue)); --_gemini-copy-color: var(--gemini-card-description-color, var(--gemini-color-grey-400)); align-items: flex-start; color: inherit; display: flex; flex-direction: column; gap: 16px; position: relative; text-decoration: none; } @media (min-width: 834px) { .gemini-card-grid-item .gemini-card-content { gap: 24px; } } .gemini-card-grid-item .gemini-card-content.gemini-card-layout-default { --_gemini-card-logo-size: 64px; flex-direction: column; padding: 24px; } .gemini-card-grid-item .gemini-card-content.gemini-card-layout-default .gemini-card-link-decorator { inset-block-start: 24px; inset-inline-end: 24px; } @media (min-width: 834px) { .gemini-card-grid-item .gemini-card-content.gemini-card-layout-default { --_gemini-card-logo-size: 126px; align-items: center; flex-direction: row; padding-block: 16px; padding-inline: 16px 32px; } .gemini-card-grid-item .gemini-card-content.gemini-card-layout-default .gemini-card-link-decorator { inset-block-start: 16px; inset-inline-end: 16px; } } .gemini-card-grid-item .gemini-card-content.gemini-card-layout-compact { --_gemini-card-logo-size: 44px; align-items: center; flex-direction: row; padding-block: 16px; padding-inline: 16px 24px; } @media (min-width: 834px) { .gemini-card-grid-item .gemini-card-content.gemini-card-layout-compact { --_gemini-card-logo-size: 86px; padding-inline-end: 32px; } } .gemini-card-grid-item .gemini-card-content.gemini-theme-light-blue { --gemini-card-description-color: var(--gemini-color-grey-100); --gemini-card-arrow-color: var(--gemini-color-white); } .gemini-card-grid-item .gemini-card-link-decorator { inset-block-start: 16px; inset-inline-end: 16px; position: absolute; color: var(--_gemini-card-arrow-color); } .gemini-card-grid-item figure { display: inline-block; flex-shrink: 0; inline-size: var(--_gemini-card-logo-size); line-height: 0; } .gemini-card-grid-item figure img { max-inline-size: 100%; } .gemini-card-grid-item .gemini-card-description { color: var(--_gemini-copy-color); } .gemini-value-card { text-align: center; } .gemini-value-card.gemini-with-background { background-image: url("/images/system/value-card-background-dark.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: var(--gemini-border-radius-d24); overflow: hidden; padding-block: 40px; padding-inline: 24px; } @media (min-width: 834px) { .gemini-value-card.gemini-with-background { padding-inline: 40px; padding-block: 64px; } .gemini-value-card.gemini-with-background.gemini-with-icon { padding-block: 48px 64px; } } .gemini-value-card.gemini-with-background .gemini-card-icon { inline-size: 40px; margin-inline: auto; } @media (min-width: 834px) { .gemini-value-card.gemini-with-background .gemini-card-icon { inline-size: 48px; } } .gemini-value-card .gemini-card-description { color: var(--gemini-color-grey-400); } .gemini-feature-card { --_gemini-icon-size: 44px; } @media screen and (min-width: 834px) { .gemini-feature-card { --_gemini-icon-size: 64px; } } .gemini-feature-card .gemini-card-icon { inline-size: var(--gemini-card-icon-size, var(--_gemini-icon-size)); margin-inline: auto; } /* GUIDE CARD CENTERED ITEM */ .gemini-card-centered { --gemini-button-border: var(--gemini-color-grey-700); align-items: center; color: var(--gemini-color-white); display: flex; flex-direction: column; overflow: hidden; padding: 24px; text-align: center; text-decoration: none; } @media (min-width: 834px) { .gemini-card-centered { padding: 32px 24px; block-size: 100%; } } .gemini-card-centered.gemini-theme-light-blue { --gemini-card-description-color: var(--gemini-color-grey-100); --gemini-card-arrow-color: var(--gemini-color-white); --gemini-button-border: rgba(246, 248, 250, 0.5); } .gemini-card-centered .gemini-card-icon { align-items: center; block-size: 40px; inline-size: 40px; line-height: 0; } @media screen and (min-width: 834px) { .gemini-card-centered .gemini-card-icon { block-size: 56px; inline-size: 56px; } } .gemini-card-centered .gemini-card-title { color: var(--gemini-color-white); padding-inline: 26px; } .gemini-card-centered .gemini-card-content { color: var(--gemini-card-description-color, var(--gemini-color-grey-400)); } .gemini-card-centered .gemini-btn { --gemini-button-fill: transparent; --gemini-button-text: var(--gemini-color-white); margin-top: auto; } .gemini-card-centered:hover .gemini-btn { background: var(--gemini-color-white); color: var(--gemini-color-grey-900); } /** Gemini Section: CTA */ .gemini-section-cta { --gemini-_subtitle-color: var( --gemini-section-subtitle-color, var(--gemini-color-grey-300) ); --gemini-_text-alignment: var(--gemini-section-text-alignment, center); --gemini-_section-margin: var(--gemini-section-margin, 0 auto); --gemini-_title-color: var(--gemini-section-title-color, var(--gemini-color-grey-100)); --devsite-heading-color: var(--gemini-_title-color); --gemini-_copy-color: var(--gemini-section-copy-color, var(--gemini-color-grey-400)); --gemini-animation-ease: var(--gemini-ease-out-quad); --gemini-animation-duration: 0.5s; --gemini-animation-stagger: 0.16s; --gemini-animation-delay: 0s; --gemini-_title-order: calc(var(--gemini-animation-title-order, 2) - 1); --gemini-_copy-order: calc(var(--gemini-animation-copy-order, 3) - 1); --gemini-_buttons-order: calc(var(--gemini-animation-buttons-order, 4) - 1); --gemini-_heading-max-width: var(--gemini-heading-max-width, 630px); --gemini-_copy-max-width: var(--gemini-copy-max-width, 630px); } .gemini-section-cta.gemini-large { --gemini-_heading-max-width: var(--gemini-heading-max-width, 750px); --gemini-_copy-max-width: var(--gemini-copy-max-width, 750px); } .gemini-section-cta .gemini-cta { text-align: var(--gemini-_text-alignment); } .gemini-section { outline: none; } .gemini-section-cta .gemini-section { margin: var(--gemini-_section-margin); } .gemini-section-cta .gemini-section__subtitle { color: var(--gemini-_subtitle-color); clip-path: fill-box; } .gemini-section-cta .gemini-section__subtitle > * { display: block; transform: translateY(100px); opacity: 0; transition: transform var(--gemini-animation-duration) calc(var(--gemini-animation-stagger) + var(--gemini-animation-delay)) var(--gemini-animation-ease), opacity 0.1s linear; } .gemini-section-cta .gemini-onscreen .gemini-section__subtitle > * { transform: translateY(0%); opacity: 1; } .gemini-section-cta .gemini-section__title { color: var(--gemini-_title-color); clip-path: fill-box; max-inline-size: var(--gemini-_heading-max-width); } .gemini-section-cta .gemini-section__title h1:first-of-type { display: block; } .gemini-section-cta .gemini-section__title > * { display: block; transform: translateY(100%); transition: transform var(--gemini-animation-duration) calc(var(--gemini-animation-stagger) * var(--gemini-_title-order) + var(--gemini-animation-delay)) var(--gemini-animation-ease); padding-block-end: 0.04em; } .gemini-section-cta .gemini-onscreen .gemini-section__title > * { transform: translateY(0%); } .gemini-section-cta .gemini-section__copy { color: var(--gemini-_copy-color); max-inline-size: var(--gemini-_copy-max-width); transform: translateY(60px); opacity: 0; transition: transform var(--gemini-animation-duration) calc(var(--gemini-animation-stagger) * var(--gemini-_copy-order) + var(--gemini-animation-delay)) var(--gemini-animation-ease), opacity 0.05s calc(var(--gemini-animation-stagger) * var(--gemini-_copy-order) + var(--gemini-animation-delay)) linear; } .gemini-section-cta .gemini-onscreen .gemini-section__copy { transform: translateY(0%); opacity: 1; } .gemini-section-cta .gemini-section__buttons { display: flex; gap: 12px; align-items: center; flex-direction: column; transform: translateY(60px); opacity: 0; transition: transform 0.5s calc(var(--gemini-animation-stagger) * var(--gemini-_buttons-order)) var(--gemini-animation-ease), opacity 0.15s calc(var(--gemini-animation-stagger) * var(--gemini-_buttons-order)) linear; } .gemini-section-cta .gemini-onscreen .gemini-section__buttons { transform: translateY(0%); opacity: 1; } @media (min-width: 768px) { .gemini-section-cta .gemini-section__buttons { justify-content: center; flex-direction: row; } } /** Gemini: Animated Rings */ .gemini-animated-rings-element { --gemini-_large-ring-size: min( max( var(--gemini-large-ring-size, 87.5vw), var(--gemini-large-ring-min-size, 872px) ), var(--gemini-large-ring-max-size, 1260px) ); --gemini-_small-ring-size: min( max( var(--gemini-small-ring-size, 77.5vw), var(--gemini-small-ring-min-size, 770px) ), var(--gemini-small-ring-max-size, 1116px) ); --gemini-_small-ring-animation-duration: var(--gemini-small-ring-animation-duration, 16s); --gemini-_large-ring-animation-duration: var(--gemini-large-ring-animation-duration, 10s); } .gemini-animated-rings-element { display: block; block-size: 10px; inline-size: 10px; pointer-events: none; position: absolute; inset-block-start: calc(50% - 1px); inset-inline-start: calc(50% - 1px); } .gemini-animated-rings-element .gemini-small-ring { display: block; inline-size: var(--gemini-_small-ring-size); block-size: var(--gemini-_small-ring-size); position: absolute; inset-inline-start: calc(var(--gemini-_small-ring-size) * -0.5); inset-block-start: calc(var(--gemini-_small-ring-size) * -0.5); transform: scale(0); transition: transform 1.6s 0.1s var(--gemini-ease-out-quart); } .gemini-animated-rings-element .gemini-small-ring > * { display: block; animation: gemini-animated-rings-spin var(--gemini-_small-ring-animation-duration) linear infinite; } .gemini-animated-rings-element .gemini-large-ring { inline-size: var(--gemini-_large-ring-size); block-size: var(--gemini-_large-ring-size); position: absolute; inset-inline-start: calc(var(--gemini-_large-ring-size) * -0.5); inset-block-start: calc(var(--gemini-_large-ring-size) * -0.5); transform: scale(0); transition: transform 1.6s var(--gemini-ease-out-quart); } .gemini-animated-rings-element .gemini-large-ring > * { display: block; animation: gemini-animated-rings-spin var(--gemini-_large-ring-animation-duration) linear infinite reverse; } .gemini-animated-rings-element .gemini-onscreen .gemini-small-ring, .gemini-animated-rings-element .gemini-onscreen .gemini-large-ring { transform: scale(1); } @keyframes gemini-animated-rings-spin { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } .gemini-section-ring-container { --_gemini-rings-offset-y: var(--gemini-rings-section-offset-y, -50%); block-size: 100vw; inline-size: 100vw; left: 50%; max-height: 1300px; max-width: 1300px; min-height: 872px; overflow: hidden; position: absolute; top: 50%; transform: translate(-50%, var(--_gemini-rings-offset-y)); z-index: 0; display: none; } @media (min-width: 600px) { .gemini-section-ring-container { display: block; } } @media (min-width: 834px) { .gemini-section-ring-container { inline-size: calc(100vw - 20px); block-size: calc(100vw - 20px); } } .gemini-section-ring-container .gemini-rings { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } /* RING GRADIENT COVER */ .gemini-has-ring { position: relative; z-index: 4; } .gemini-gradient-cover--top, .gemini-gradient-cover--bottom { position: relative; z-index: 7; background: var(--gemini-color-background); } .gemini-gradient-cover--top *, .gemini-gradient-cover--bottom * { position: relative; z-index: 7; } .gemini-gradient-cover--top:before, .gemini-gradient-cover--bottom:after { content: ""; position: absolute; inset-inline-start: 50%; block-size: var(--gemini-gradient-height, 300px); inline-size: 97vw; max-inline-size: 1440px; pointer-events: none; z-index: 1; display: none; } @media (min-width: 600px) { .gemini-gradient-cover--top:before, .gemini-gradient-cover--bottom:after { display: block; } } @media (min-width: 834px) { .gemini-gradient-cover--top:before, .gemini-gradient-cover--bottom:after { block-size: var(--gemini-gradient-height, 450px); } } .gemini-gradient-cover--top:before { inset-block-start: 0; transform: translate(-50%, var(--gemini-gradient-y, -60%)); background: linear-gradient(0, #060606 50%, rgba(6, 6, 6, 0) 100%); /*#060606*/ } .gemini-gradient-cover--bottom:after { inset-block-end: 0; transform: translate(-50%, var(--gemini-gradient-y, 50%)); background: linear-gradient(180deg, #060606 50%, rgba(6, 6, 6, 0) 100%); /*#060606*/ } /** Gradient Box */ .gemini-gradient-box { --_gemini-box-radius: var(--gemini-gradient-box-radius, 16px); --_gemini-border-width: var(--gemini-gradient-box-border-width, 2px); --_box-border-color: var(--gradient-box-border-color, linear-gradient( 93deg, #076eff 0%, #0c0c0d 33%, #076eff 68.5%, #0c0c0d 98.75% )); background: var(--_box-border-color); border-radius: var(--_gemini-box-radius); bottom: 0; content: ""; display: block; left: 0; margin: 0; position: relative; right: 0; top: 0; transition: background 0.3s ease; } @media (min-width: 834px) { .gemini-gradient-box { --_gemini-box-radius: var(--gemini-gradient-box-radius, 32px); } } .gemini-gradient-box_wrapper { background-clip: padding-box; background-color: #060606; background-image: var(--_gemini-gradient-background); background-position: center center; background-repeat: no-repeat; background-size: 110% 110%; border-radius: var(--_gemini-box-radius); border: solid var(--_gemini-border-width) transparent; box-sizing: border-box; height: 100%; margin: 0; padding: 2px; position: relative; transform: translate3d(0, 0, 0); width: 100%; } .gemini-gradient-box__inner { border-radius: var(--_gemini-box-radius); height: 100%; width: 100%; } .gemini-gradient-box--custom { --_box-border-color: var(--gradient-box-border-color); --_gemini-gradient-background: var(--gemini-box-gradient-background); } .gemini-gradient-box--blue { --_gemini-gradient-background: var( --gemini-box-gradient-background, url("/images/gradient-box-blue.jpg") ); --_box-border-color: var(--gradient-box-border-color, linear-gradient(320deg, #2E64DE -17.73%, #3C8FE3 50.43%)); --gemini-text-gradient: linear-gradient(61deg, #64B8FB 6.28%, #217BFE 76.97%); } .gemini-gradient-box--pink { --_gemini-gradient-background: var( --gemini-box-gradient-background, url("/images/gradient-box-pink.jpg") ); --_box-border-color: var(--gradient-box-border-color, linear-gradient(313deg, #987BE9 -24.05%, #BE6EAE 92.91%)); --gemini-text-gradient: linear-gradient(90deg, #A485FA -104.88%, #EE4D5D 198.78%); } .gemini-gradient-box--w1 { --_gemini-border-width: 1px; } .gemini-gradient-box--grey { --_gemini-gradient-background: var( --gemini-box-gradient-background, url("/images/gradient-box-grey.png") ); --_box-border-color: var(--gradient-box-border-color, linear-gradient(299deg, #B1C5FF 10.12%, #D2DEFF 82.36%)); --gemini-text-gradient: var(--gemini-text-gradient-light-blue); } /* Gradient CTA */ .gemini-gradient-CTA { --_gemini-box-radius: var(--gemini-gradient-CTA-radius, 16px); --_box-border-color: none; --_gemini-border-width: 1px; background: var(--gemini-gradient-CTA-idle-border-color, linear-gradient(140deg, #151515 0.72%, #060606 100%)); border-radius: var(--_gemini-box-radius); bottom: 0; content: ""; display: block; left: 0; margin: 0; position: relative; right: 0; top: 0; } .gemini-gradient-CTA.gemini-with-hover { cursor: pointer; transition: background 0.3s ease; } @media (min-width: 834px) { .gemini-gradient-CTA { --_gemini-box-radius: var(--gemini-gradient-CTA-radius, 24px); --_gemini-border-width: 1px; } } @media (hover: hover) { .gemini-gradient-CTA.gemini-with-hover:hover .gemini-gradient-CTA_wrapper { border: var(--_gemini-border-width) solid transparent; transition: border 0.3s ease-out, background 0.3s ease-out; } .gemini-gradient-CTA.gemini-with-hover:hover::before { opacity: 0.9; transition: opacity 0.3s ease-out; } } .gemini-gradient-CTA::before { background: var(--_box-border-color); border-radius: var(--_gemini-box-radius); content: ""; height: 100%; opacity: 0; position: absolute; top: 0; transition: opacity 0.3s ease-out; width: 100%; } .gemini-gradient-CTA .gemini-gradient-CTA_wrapper::after { content: ""; position: absolute; block-size: 100%; inline-size: 100%; inset-block-start: 0; inset-inline-start: 0; border-radius: var(--_gemini-box-radius); transition: opacity 0.3s ease-out; z-index: 1; opacity: 0; background-image: var(--_gemini-gradient-hover-background); background-repeat: no-repeat; background-size: 110% 110%; background-position: center center; } .gemini-gradient-CTA_wrapper { --_gemini-gradient-background: var(--gemini-gradient-background, none); --_gemini-gradient-hover-background: var(--gemini-gradient-hover-background, none); transform: translate3d(0, 0, 0); margin: 0; width: 100%; height: 100%; position: relative; box-sizing: border-box; background-clip: padding-box; border: var(--_gemini-border-width) solid var(--gemini-gradient-CTA-idle-border-color, var(--gemini-color-grey-700, #202228)); border-radius: var(--_gemini-box-radius); transition: border 0.3s ease-out, background, 0.4s; background-image: var(--_gemini-gradient-background); background-repeat: no-repeat; background-size: 110% 110%; background-position: center center; } .gemini-gradient-CTA__inner { width: 100%; height: 100%; border-radius: calc(var(--_gemini-box-radius) - 2px); background: linear-gradient(121deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 101.29%); position: relative; z-index: 5; } .gemini-gradient-CTA--blue { --gemini-gradient-background: url("/images/system/card-list-item-background-dark.jpg"); --gemini-gradient-hover-background: url("/images/system/card-list-item-hover-dark.jpg"); --_box-border-color: var(--gradient-CTA-border-color, var(--gemini-color-blue-gradient)); } .gemini-gradient-CTA--blue.gemini-with-hover:hover .gemini-gradient-CTA_wrapper:after { opacity: 1; } .gemini-gradient-CTA--blue .gemini-gradient-CTA__inner { background: none; } .gemini-gradient-CTA--light-blue { --_box-border-color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.08) 100%); --gemini-gradient-CTA-idle-border-color: #7aa3ff; } .gemini-gradient-CTA--light-blue::before { border: var(--_gemini-border-width) solid var(--gemini-color-white); } /** Gemini: Partner Container */ .gemini-partner-container-element { display: block; } .gemini-partner-container-element section { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /** Gemini: Partner Item */ .gemini-partner-item .gemini-item { --gemini-_size: var(--gemini-partner-item-size, 160px); --gemini-border-width: 1; --gemini-border-radius: 8; --gemini-hover-alpha: 0.2; block-size: var(--gemini-_size); inline-size: var(--gemini-_size); text-decoration: none; user-select: none; position: relative; border-radius: calc(var(--gemini-border-radius) * 1px); display: grid; place-items: center; white-space: nowrap; } @media (min-width: 834px) { .gemini-partner-item .gemini-item { --gemini-_size: var(--gemini-partner-item-size, 170px); } } .gemini-partner-item .gemini-item::before { content: ""; position: absolute; inset: 0; border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); -webkit-mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%)); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in, xor; mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%)); mask-clip: padding-box, border-box; mask-composite: intersect; z-index: 2; } .gemini-partner-item .gemini-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(255 255 255/var(--gemini-hover-alpha)), transparent); border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); z-index: 1; opacity: 0; transition: opacity 0.35s ease-in-out; } .gemini-partner-item .gemini-item:hover .gemini-spark, .gemini-partner-item .gemini-item:focus-visible .gemini-spark { opacity: 1; } .gemini-partner-item .gemini-item:hover .gemini-spark::before, .gemini-partner-item .gemini-item:focus-visible .gemini-spark::before { opacity: 1; animation: gemini-item-spin 0.82s linear forwards; } .gemini-partner-item .gemini-item:hover::after, .gemini-partner-item .gemini-item:focus-visible::after { opacity: 1; } .gemini-partner-item .gemini-item.gemini-link { cursor: pointer; } .gemini-partner-item .gemini-item.gemini-link:after { background: linear-gradient(127deg, #1C213A 2.9%, #060606 100%); } .gemini-partner-item .gemini-item.gemini-link .gemini-label .gemini-text, .gemini-partner-item .gemini-item.gemini-link .gemini-label .gemini-arrow { transition-property: transform, opacity; transition-duration: 0.15s; will-change: transform, opacity; } .gemini-partner-item .gemini-item.gemini-link .gemini-label .gemini-text { /*transform: translateX(calc(var(--gemini-offset) * -1));*/ } .gemini-partner-item .gemini-item.gemini-link .gemini-label .gemini-arrow { display: block; /*opacity: 0;*/ /*transform: translateX(calc(var(--gemini-offset) * -1));*/ } .gemini-partner-item .gemini-item.gemini-link:hover .gemini-label .gemini-text, .gemini-partner-item .gemini-item.gemini-link:hover .gemini-label .gemini-text, .gemini-partner-item .gemini-item.gemini-link:focus-visible .gemini-label .gemini-text { /*transform: translateX(0);*/ } .gemini-partner-item .gemini-item.gemini-link:hover .gemini-label .gemini-arrow, .gemini-partner-item .gemini-item.gemini-link:focus-visible .gemini-label .gemini-arrow { /*opacity: 1;*/ /*transition-delay: 0.05s;*/ transform: translateX(0); } .gemini-partner-item .gemini-item.gemini-dark { --gemini-glow: rgb(255 255 255 / 0.4); --gemini-hover-alpha: 0.1; background: linear-gradient(135deg, #10121B 0%, #060606 100%); } .gemini-partner-item .gemini-item.gemini-dark::before { background: var(--gemini-color-grey-700); } .gemini-partner-item .gemini-item.gemini-dark .gemini-label { color: var(--gemini-color-grey-100); } .gemini-partner-item .gemini-item.gemini-light { --gemini-glow: rgb(255 255 255 / 0.6); --gemini-hover-alpha: 0.2; background: linear-gradient(113deg, rgba(255, 255, 255, 0.27) -7.22%, rgba(255, 255, 255, 0) 99.63%); } .gemini-partner-item .gemini-item.gemini-light::before { background: rgba(255, 255, 255, 0.1); } .gemini-partner-item .gemini-item.gemini-light .gemini-label { color: var(--gemini-color-white); } .gemini-partner-item .gemini-sparks { container-type: size; position: absolute; inset: 0; pointer-events: none; z-index: 2; mask-image: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; -webkit-mask-image: linear-gradient(transparent, transparent), linear-gradient(white, white); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in, xor; border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); } .gemini-partner-item .gemini-sparks .gemini-spark { position: absolute; inset: 0; overflow: visible; opacity: 0; transition: opacity 0.15s ease-in-out; } .gemini-partner-item .gemini-sparks .gemini-spark::before { --gemini-spread: 110; --gemini-glow-spread: calc(var(--gemini-spread) * 1deg); content: ""; position: absolute; inset: -100%; background: conic-gradient(from calc(270deg - var(--gemini-glow-spread) * 0.5), var(--gemini-glow) 0, var(--gemini-glow) var(--gemini-glow-spread), transparent var(--gemini-glow-spread)); background-repeat: no-repeat; border-radius: calc(var(--gemini-border-radius) * 1px); opacity: 0; transition: opacity 0.2s ease-in-out; } .gemini-partner-item .gemini-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--gemini-space-8); block-size: 100%; inline-size: 100%; z-index: 2; } @media (min-width: 834px) { .gemini-partner-item .content { gap: var(--gemini-space-16); } } .gemini-partner-item .gemini-content img { aspect-ratio: 106/74; inline-size: 100%; max-inline-size: 63%; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease-in-out; } .gemini-partner-item .gemini-content .gemini-label { --gemini-offset: 0.6em; flex-shrink: 0; flex-direction: column; justify-content: flex-end; text-align: center; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--gemini-offset); } .gemini-partner-item .gemini-content .gemini-label .gemini-arrow { display: none; } @keyframes gemini-item-spin { 0% { rotate: 0deg; opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; rotate: 560deg; } } /* Gemini: Spark box */ .gemini-spark-box .gemini-spark-box-item { --gemini-_size: var(--gemini-spark-box-item-size, 106px); --gemini-_block-size: var(--gemini-spark-box-item-block-size, var(--gemini-_size)); --gemini-_inline-size: var(--gemini-spark-box-item-inline-size, var(--gemini-_size)); --gemini-border-width: 1; --gemini-border-radius: 8; --gemini-hover-alpha: 0.2; block-size: var(--gemini-_block-size); inline-size: var(--gemini-_inline-size); text-decoration: none; user-select: none; position: relative; border-radius: calc(var(--gemini-border-radius) * 1px); overflow: hidden; } @media (min-width: 834px) { .gemini-spark-box .gemini-spark-box-item { --gemini-_size: var(--gemini-spark-box-item-size, 170px); } } .gemini-spark-box .gemini-spark-box-item::before { content: ""; position: absolute; inset: 0; border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); -webkit-mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%)); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in, xor; mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%)); mask-clip: padding-box, border-box; mask-composite: intersect; z-index: 2; } .gemini-spark-box .gemini-spark-box-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(255 255 255/var(--gemini-hover-alpha)), transparent); border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); z-index: 1; opacity: 0; transition: opacity 0.35s ease-in-out; } .gemini-spark-box .gemini-spark-box-item:hover .gemini-spark, .gemini-spark-box .gemini-spark-box-item:focus-visible .gemini-spark { opacity: 1; } .gemini-spark-box .gemini-spark-box-item:hover .gemini-spark::before, .gemini-spark-box .gemini-spark-box-item:focus-visible .gemini-spark::before { opacity: 1; animation: gemini-spark-box-spin 0.82s linear forwards; } .gemini-spark-box .gemini-spark-box-item:hover::after, .gemini-spark-box .gemini-spark-box-item:focus-visible::after { opacity: 1; } .gemini-spark-box .gemini-spark-box-item.gemini-dark { --gemini-glow: rgb(255 255 255 / 0.4); --gemini-hover-alpha: 0.1; background: linear-gradient(121deg, rgba(255, 255, 255, 0.07) -12.02%, rgba(255, 255, 255, 0.01) 87.55%); } .gemini-spark-box .gemini-spark-box-item.gemini-dark::before { background: var(--gemini-color-grey-700); } .gemini-spark-box-item .gemini-sparks { container-type: size; position: absolute; inset: 0; pointer-events: none; z-index: 2; mask-image: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; -webkit-mask-image: linear-gradient(transparent, transparent), linear-gradient(white, white); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in, xor; border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); } .gemini-spark-box-item .gemini-sparks .gemini-spark { position: absolute; inset: 0; overflow: visible; opacity: 0; transition: opacity 0.15s ease-in-out; } .gemini-spark-box-item .gemini-sparks .gemini-spark::before { --gemini-spread: 110; --gemini-glow-spread: calc(var(--gemini-spread) * 1deg); content: ""; position: absolute; inset: -100%; background: conic-gradient(from calc(270deg - var(--gemini-glow-spread) * 0.5), var(--gemini-glow) 0, var(--gemini-glow) var(--gemini-glow-spread), transparent var(--gemini-glow-spread)); background-repeat: no-repeat; border-radius: calc(var(--gemini-border-radius) * 1px); opacity: 0; transition: opacity 0.2s ease-in-out; } .gemini-spark-box-item .gemini-content { block-size: 100%; inline-size: 100%; z-index: 2; } @media (min-width: 834px) { .gemini-spark-box .gemini-spark-box-item .content { gap: var(--gemini-space-16); } } @keyframes gemini-spark-box-spin { 0% { rotate: 0deg; opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; rotate: 560deg; } } /* Sticky Nav */ .gemini-sticky-nav:not(.gemini-no-sticky) { --gemini-nav-bottom-padding: 20px; --gemini-nav-height: 36px; --_gemini-nav-background: var(--gemini-color-grey-700); --_gemini-nav-item-color: var(--gemini-color-grey-400); --_gemini-nav-item-active: var(--gemini-color-grey-600); --_gemini-nav-item-color-hover: var(--gemini-color-white); position: sticky; top: calc(100vh - var(--gemini-nav-height) - var(--gemini-nav-bottom-padding)); padding-bottom: var(--gemini-nav-bottom-padding); left: 0; justify-content: flex-start; z-index: 11; display: none; height: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s 0.3s, visibility 0.6s 0.3s; } @media (min-width: 1024px) { .gemini-sticky-nav:not(.gemini-no-sticky) { display: flex; justify-content: center; --gemini-nav-height: 48px; --gemini-nav-bottom-padding: 32px; } } .gemini-sticky-nav:not(.gemini-no-sticky).gemini-onscreen { opacity: 1; visibility: visible; } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav { display: flex; background-color: var(--gemini-nav-background, var(--_gemini-nav-background)); padding: 6px; border-radius: 56px; max-width: 335px; position: absolute; inset-block-end: 0; inset-inline-start: 0; block-size: var(--gemini-nav-height); } @media (min-width: 834px) { .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav { max-width: 100%; position: relative; } } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item { padding-inline: 24px; flex-shrink: 0; border-radius: 56px; transition: background-color 0.3s var(--gemini-ease-out-cubic); } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item a { text-decoration: none; color: var(--gemini-nav-item-color, var(--_gemini-nav-item-color)); display: inline-flex; align-items: center; justify-content: center; min-height: 36px; transition: color 0.2s var(--gemini-ease-out-cubic); } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item a:hover { color: var(--gemini-nav-item-color-hover, var(--_gemini-nav-item-color-hover)); } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item.gemini-link--active { background: var(--gemini-nav-item-active-background, var(--_gemini-nav-item-active)); } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item.gemini-link--active a { color: var(--gemini-color-white); } .gemini-sticky-nav:not(.gemini-no-sticky).gemini-light-theme { --_gemini-nav-background: var(--gemini-color-white); --_gemini-nav-item-active: linear-gradient(61deg, #64b8fb 6.28%, #217bfe 76.97%); --_gemini-nav-item-color: var(--gemini-color-grey-600); --_gemini-nav-item-color-hover: var(--gemini-color-grey-900); } /** Gemini Section: Details */ .gemini-section-details-element { --gemini-animation-buttons-order: 3; display: block; position: relative; z-index: 4; } .gemini-section-details-element .gemini-section--details { position: relative; } .gemini-section-details-element .gemini-details__header { display: grid; place-items: center; position: relative; } .gemini-section-details-element .gemini-header__inner { --gemini-copy-max-width: 730px; --gemini-heading-max-width: 320px; } @media (min-width: 834px) { .gemini-section-details-element .gemini-header__inner { --gemini-heading-max-width: 550px; } } .gemini-section-details-element .gemini-details__body { text-align: center; position: relative; z-index: 5; } .gemini-section-details-element .gemini-details { grid-column: 1/-1; } @media (min-width: 1024px) { .gemini-section-details-element .gemini-details { grid-column: 2/span 10; } } .gemini-details-rings-container { --gemini-rings-section-offset-y: -28%; } @media (min-width: 600px) { .gemini-details-rings-container { display: block; } } /** Gemini: Module Code */ .gemini-module-code-element { display: block; } .gemini-module-code-element .gemini-module--code { width: 100%; --space: var(--gemini-space-d40); } .gemini-module-code-element .gemini-code__wrapper { transform: scale(1.2); transition: 0.8s var(--gemini-ease-out-quad); } .gemini-module-code-element .gemini-onscreen .gemini-code__wrapper { transform: scale(1); } /** Gemini: Code Preview */ .gemini-code-preview-element article { display: flex; flex-direction: column; gap: var(--gemini-space-40); } @media (min-width: 834px) { .gemini-code-preview-element article { gap: var(--gemini-space-48); } } .gemini-code-preview-element .gemini-window { --gemini-padding-inline: 24px; --gemini-padding-block: 24px; --gemini-border-radius: 16px; --gemini-line-height: 180%; --gemini-gap: 20px; } @media (min-width: 834px) { .gemini-code-preview-element .gemini-window { --gemini-padding-inline: 48px; --gemini-padding-block: 40px; --gemini-border-radius: 24px; --gemini-gap: 40px; } } .gemini-code-preview-element .gemini-tabs { background-color: var(--gemini-color-grey-800); border-radius: var(--gemini-border-radius) var(--gemini-border-radius) 0 0; user-select: none; overflow-x: auto; display: flex; justify-content: space-between; align-items: center; } .gemini-code-preview-element .gemini-tabs__links { display: flex; gap: var(--gemini-gap); padding-inline: var(--gemini-padding-inline); overflow-y: hidden; } .gemini-code-preview-element .gemini-tabs__links button { position: relative !important; all: unset; cursor: pointer; display: grid; padding-block: 16px; white-space: nowrap; } .gemini-code-preview-element .gemini-tabs__links button:focus-visible { outline: 1px solid var(--gemini-color-blue); } .gemini-code-preview-element .gemini-tabs__links button span:nth-child(1) { color: var(--gemini-color-grey-500); } .gemini-code-preview-element .gemini-tabs__links button span:nth-child(2) { background: var(--gemini-color-blue-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transition: opacity 0.2s var(--gemini-ease-in-out); } .gemini-code-preview-element .gemini-tabs__links button:hover span:nth-child(2) { opacity: 1; } .gemini-code-preview-element .gemini-tabs__links button::before { content: ""; display: block; position: absolute; inset-block-end: 0; inset-inline-start: -8px; block-size: 3px; inline-size: calc(100% + 16px); border-radius: 3px 3px 0 0; background: var(--gemini-color-blue-gradient); transition-property: opacity, transform; transition-duration: 0.25s; transition-timing-function: ease-in-out; opacity: 0; transform: translateY(100%); } .gemini-code-preview-element .gemini-tabs__links button.gemini-active::before { opacity: 1; transform: translateY(0); } .gemini-code-preview-element .gemini-tabs__links button.gemini-active span:nth-child(2) { opacity: 1; } .gemini-code-preview-element .gemini-editor { display: grid; grid-template-columns: auto 1fr; background-color: var(--gemini-color-grey-600); border-radius: 0 0 var(--gemini-border-radius) var(--gemini-border-radius); padding-inline: 0 24px; padding-block: var(--gemini-padding-block); font-family: var(--gemini-font-secondary); text-align: start; overflow-x: auto; } .gemini-code-preview-element .gemini-editor__numbers { line-height: var(--gemini-line-height); color: var(--gemini-color-grey-500); user-select: none; } .gemini-code-preview-element pre.gemini-editor__code { background-color: var(--gemini-color-grey-600); tab-size: 1em; margin-inline-start: 0; line-height: var(--gemini-line-height); color: var(--gemini-color-grey-100); } @media (min-width: 1024px) { .gemini-code-preview-element pre.gemini-editor__code { margin-inline-start: 0; } } .gemini-code-preview-element .gemini-highlight { color: var(--gemini-color-blue); } .gemini-code-preview-element .gemini-details-cta { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; } @media (min-width: 738px) { .gemini-code-preview-element .gemini-details-cta { flex-direction: row; } } /* CARD ARROW */ .gemini-card-arrow { display: grid; align-items: stretch; } .gemini-card-arrow .gemini-gradient-CTA__inner { display: grid; } .gemini-card-arrow .gemini-card-inner { display: flex; position: relative; flex-direction: column; } @media screen and (min-width: 834px) { .gemini-card-arrow .gemini-card-inner { row-gap: 0; } } .gemini-card-arrow .gemini-media-wrapper { aspect-ratio: 738/413; inline-size: 100%; background: var(--gemini-color-grey-700); overflow: hidden; border-top-left-radius: 24px; border-top-right-radius: 24px; flex-shrink: 0; } .gemini-card-arrow .gemini-media-wrapper > * { background-size: cover; inline-size: 100%; } .gemini-card-arrow .gemini-text-wrapper { position: relative; padding: 24px; flex: 1; display: flex; row-gap: 16px; flex-direction: column; } @media screen and (min-width: 836px) { .gemini-card-arrow .gemini-text-wrapper { padding: 32px; column-gap: 32px; flex-direction: row; } } .gemini-card-arrow .gemini-icon-wrapper { flex-shrink: 0; } .gemini-card-arrow .gemini-card-copy { display: flex; flex-direction: column; max-inline-size: 234px; } @media screen and (min-width: 836px) { .gemini-card-arrow .gemini-card-copy { max-inline-size: var(--gemini-card-copy-max-width, 382px); } } .gemini-card-arrow .gemini-model-copy { color: var(--gemini-color-grey-400); } .gemini-card-arrow .gemini-arrow-link { position: absolute; inset-inline-end: 16px; inset-block-start: 16px; } @media screen and (min-width: 836px) { .gemini-card-arrow.gemini-layout-compact .gemini-card-inner { flex-direction: row; } } /* BLOG */ .gemini-blog-layout { row-gap: var(--gemini-size-grid-gap); } .gemini-blog-layout > * { grid-column: 1/-1; } @media screen and (min-width: 1024px) { .gemini-blog-layout > *:nth-child(1) { grid-area: 1/1/span 3/span 7; } .gemini-blog-layout > *:nth-child(2) { grid-area: 1/8/span 1/span 5; } .gemini-blog-layout > *:nth-child(3) { grid-area: 2/8/span 1/span 5; } .gemini-blog-layout > *:nth-child(4) { grid-area: 3/8/span 1/span 5; } } .gemini-blog-layout .article > * { block-size: 100%; } .gemini-blog-layout .article:first-of-type { --gemini-card-copy-max-width: 490px; } .gemini-blog-layout .article .gemini-card-arrow .gemini-model-copy { margin-top: auto; } .gemini-form-page { padding-top: 120px; padding-bottom: 120px; } /* GEMINI FORM MODULE */ .gemini-form-module .gemini-form .gemini-error-message { color: var(--gemini-color-red-200); } .gemini-form-module .gemini-form .gemini-recaptcha-invalid { display: none; } .gemini-form-module .gemini-form.gemini-form-recaptcha-invalid .gemini-recaptcha-invalid { display: block; } .gemini-form-module .gemini-form .gemini-form-error-message { margin-block-start: 12px; display: none; } .gemini-form-module .gemini-form.gemini-form-error .gemini-form-error-message { display: block; } .gemini-form-module fieldset { border: none; margin-inline: 0; padding: 0; } .gemini-form-module .gemini-form-row .gemini-star { grid-column: -1/1; display: flex; justify-content: center; margin-block-end: 24px; } @media screen and (min-width: 834px) { .gemini-form-module .gemini-form-row .gemini-star { grid-column: 1/1; display: block; } } .gemini-form-module .gemini-form-row .gemini-form-header, .gemini-form-module .gemini-form-row .gemini-row-label { grid-column: -1/1; } @media screen and (min-width: 600px) { .gemini-form-module .gemini-form-row .gemini-form-header, .gemini-form-module .gemini-form-row .gemini-row-label { grid-column: 2/span 4; } } @media screen and (min-width: 834px) { .gemini-form-module .gemini-form-row .gemini-form-header, .gemini-form-module .gemini-form-row .gemini-row-label { grid-column: 1/span 4; } } @media screen and (min-width: 1024px) { .gemini-form-module .gemini-form-row .gemini-form-header, .gemini-form-module .gemini-form-row .gemini-row-label { grid-column: 2/span 4; } } .gemini-form-module .gemini-form-row .gemini-form-header { --gemini-section-text-alignment: center; margin-block-end: 32px; } @media screen and (min-width: 834px) { .gemini-form-module .gemini-form-row .gemini-form-header { --gemini-section-text-alignment: left; } } .gemini-form-module .gemini-form-row .gemini-row-body { grid-column: 1/-1; } @media screen and (min-width: 600px) { .gemini-form-module .gemini-form-row .gemini-row-body { grid-column: 2/span 4; } } @media screen and (min-width: 834px) { .gemini-form-module .gemini-form-row .gemini-row-body { grid-column: 5/span 5; } } @media screen and (min-width: 1024px) { .gemini-form-module .gemini-form-row .gemini-row-body { grid-column: 7/span 5; } } .gemini-form-module .gemini-form-row .gemini-form-main-inputs { display: flex; flex-direction: column; gap: var(--gemini-space-d32); } .gemini-form-module .gemini-input-wrapper { background: var(--gemini-color-grey-800); block-size: 62px; border-radius: 12px; border: 1px solid var(--gemini-color-grey-600); display: grid; inline-size: 100%; --gemini-text-shift: 50%; overflow: hidden; } .gemini-form-module .gemini-input-wrapper label { grid-area: 1/-1; align-self: center; padding-inline: 24px; transform-origin: center left; transition: opacity 0.2s linear, transform 0.3s; color: var(--gemini-color-grey-300); position: relative; z-index: 6; } .gemini-form-module .gemini-input-wrapper input { background: none; block-size: 100%; border: none; box-sizing: border-box; color: var(--gemini-color-white); display: block; font-family: inherit; font-size: inherit; grid-area: 1/-1; inline-size: 100%; line-height: 1; margin: 0; outline: none; padding: 0; padding-inline: 24px; white-space: nowrap; --devsite-input-border-bottom-focus: 0; --devsite-input-padding-bottom-focus: 0; transition: transform 0.3s; position: relative; z-index: 5; } .gemini-form-module .gemini-input-wrapper input:-internal-autofill-selected { background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: var(--gemini-color-white) !important; box-shadow: inset 0 0 0 50px var(--gemini-color-grey-700) !important; color: var(--gemini-color-white) !important; } .gemini-form-module .gemini-input-wrapper .gemini-input-text { margin: 0; block-size: calc(100% + var(--gemini-text-shift)); align-self: center; transform: translateY(calc(var(--gemini-text-shift) * 0.22)); } .gemini-form-module .gemini-input-wrapper .gemini-input-text:focus { transform: translateY(0); } .gemini-form-module .gemini-input-wrapper[data-state=typing], .gemini-form-module .gemini-input-wrapper:focus { border-color: var(--color-white); } .gemini-form-module .gemini-input-wrapper[data-state=typing] label, .gemini-form-module .gemini-input-wrapper:focus label { opacity: 0; transform: translate(0.2rem, -0.7rem) scale(0.9); } .gemini-form-module .gemini-input-wrapper[data-state=filled] label { transform: translate(0.2rem, -0.5rem) scale(0.85); } .gemini-form-module .gemini-input-select-wrapper { position: relative; --devsite-select-max-width: 100%; } .gemini-form-module .gemini-input-select-wrapper select { appearance: none; background: var(--gemini-color-grey-800); border: 0; color: var(--gemini-color-grey-300); padding-block: 10px; padding-inline: 24px; display: flex; align-items: center; block-size: 100%; inline-size: 100%; } .gemini-form-module .gemini-input-select-wrapper:after { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--gemini-color-grey-500); } .gemini-form-module .gemini-input-select-wrapper select:focus { outline: none; } .gemini-form-module .gemini-input-select-wrapper[data-state=choosing] { border-color: var(--gemini-color-white); } .gemini-form-module .gemini-input-select-wrapper[data-state=choosing] select { color: var(--gemini-color-white); } .gemini-form-module .gemini-input-select-wrapper[data-state=selected] select { color: var(--gemini-color-white); } .gemini-form-module .gemini-checkbox-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .gemini-form-module .gemini-checkbox-group > * { grid-column: 1/-1; } @media screen and (min-width: 834px) { .gemini-form-module .gemini-checkbox-group > * { grid-column: span 1/auto; } } .gemini-form-module .gemini-checkbox-wrapper { align-items: center; cursor: pointer; display: flex; gap: 16px; color: var(--gemini-color-white); } .gemini-form-module .gemini-checkbox-wrapper input[type=checkbox] { appearance: none; background: var(--gemini-color-grey-800); block-size: 20px; border-radius: 4px; border: 1px solid var(--gemini-color-grey-600); flex-shrink: 0; inline-size: 20px; margin-block-start: 2px; position: relative; } .gemini-form-module .gemini-checkbox-wrapper input[type=checkbox]:before { background: var(--gemini-color-white); block-size: 6px; border-radius: 2px; content: ""; display: block; inline-size: 6px; inset-block-start: 50%; inset-inline-start: 50%; opacity: 0; position: absolute; transform: translate3d(-50%, -50%, 0); } .gemini-form-module .gemini-checkbox-wrapper input[type=checkbox]:checked { border-color: var(--gemini-color-white); } .gemini-form-module .gemini-checkbox-wrapper input[type=checkbox]:checked:before { opacity: 1; } .gemini-form-module .gemini-checkbox-wrapper input[type=checkbox]:after { display: none; } .gemini-form-module .gemini-checkbox-wrapper input[type=checkbox]:focus { outline: none; border-color: var(--gemini-color-white); } .gemini-form-module .gemini-form-submit-btn .gemini-processing-text { display: none; } .gemini-form-module .gemini-form-submit-btn.gemini-processing .gemini-default-text { display: none; } .gemini-form-module .gemini-form-submit-btn.gemini-processing .gemini-processing-text { display: inline-block; } /* CARD WITH BUTTON */ .gemini-card-with-button { display: grid; --_gemini-padding: 32px; } @media screen and (min-width: 834px) { .gemini-card-with-button { --_gemini-padding: 40px; } } .gemini-card-with-button .gemini-card-content { border-radius: var(--gemini-border-radius-d24); color: inherit; display: flex; height: 100%; padding: var(--_gemini-padding); position: relative; text-decoration: none; } .gemini-card-with-button .gemini-card-copy { display: flex; align-items: flex-start; flex-direction: column; gap: 24px; inline-size: 100%; } .gemini-card-with-button .gemini-model-copy { color: var(--gemini-color-grey-400); max-inline-size: 420px; } .gemini-card-with-button .gemini-btn.gemini-tertiary { --gemini-button-fill: transparent; --gemini-button-text: var(--gemini-color-white); border: 1px solid var(--gemini-color-grey-600); flex-shrink: 0; inline-size: auto; } .gemini-card-with-button .gemini-card-content:hover .gemini-btn.gemini-tertiary { background: var(--gemini-color-white); color: var(--gemini-color-grey-900); } @media screen and (min-width: 834px) { .gemini-card-with-button.gemini-layout-large, .gemini-card-with-button.gemini-layout-inside-box { --_gemini-padding: 48px 48px; } .gemini-card-with-button.gemini-layout-large .gemini-card-copy, .gemini-card-with-button.gemini-layout-inside-box .gemini-card-copy { justify-content: space-between; flex-direction: row; align-items: flex-start; gap: 24px; } .gemini-card-with-button.gemini-layout-large .gemini-card-copy > div:nth-child(1), .gemini-card-with-button.gemini-layout-inside-box .gemini-card-copy > div:nth-child(1) { flex: 1; } .gemini-card-with-button.gemini-layout-large .gemini-model-copy, .gemini-card-with-button.gemini-layout-inside-box .gemini-model-copy { width: 100%; max-inline-size: 610px; } } .gemini-card-with-button.gemini-layout-compact .gemini-card-copy { flex-direction: column; } @media screen and (min-width: 834px) { .gemini-card-with-button.gemini-layout-compact .gemini-card-copy { gap: 32px; } } .gemini-card-with-button.gemini-layout-compact .gemini-btn.gemini-tertiary { margin-block-start: auto; } @media screen and (max-width: 834px) { .gemini-card-with-button.gemini-layout-inside-box { --_gemini-padding: 40px 24px; } } .gemini-card-with-button.gemini-image-direction-column .gemini-card-content { flex-direction: column; row-gap: 40px; } .gemini-card-with-button.gemini-image-direction-column .gemini-card-image { inline-size: 100%; } .gemini-card-with-button.gemini-image-direction-column .gemini-card-image img { inline-size: 100%; } .gemini-card-with-button .gemini-card-image { border-radius: var(--gemini-border-radius-d16); clip-path: fill-box; line-height: 0; } /* Dialog */ .gemini-dialog { background: transparent; block-size: 100%; border: none; color: inherit; inline-size: 100%; max-block-size: none; max-inline-size: none; padding: 0; inset-block-start: 0; inset-inline-start: 0; position: fixed; z-index: 100; } .gemini-dialog::backdrop { background: transparent; } .gemini-dialog.gemini-dialog--active .gemini-dialog__backdrop { opacity: 0.8; } .gemini-dialog.gemini-dialog--active .gemini-dialog__content { opacity: 1; } .gemini-dialog__close-button { align-items: center; all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: center; position: absolute; z-index: 10; } .gemini-dialog__backdrop { background: #000; inset: 0; opacity: 0; outline: none; position: absolute; transition: opacity 0.2s ease-out; z-index: 1; } .gemini-dialog__content { opacity: 0; position: relative; transition: opacity 0.4s ease-out; } .gemini-dialog-wysiwyg h3 { margin-block-end: 4px; } .gemini-dialog-wysiwyg h2 { margin-block-end: 4px; } .gemini-dialog-wysiwyg p { color: var(--gemini-color-grey-300); } .gemini-dialog-wysiwyg b { color: var(--gemini-color-grey-200); font-weight: 500; } .gemini-side-dialog { overflow: hidden; } .gemini-side-dialog .gemini-dialog__content { position: absolute; z-index: 5; background: var(--gemini-color-grey-700); max-width: 600px; padding-block: 104px 46px; padding-inline: 20px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--gemini-color-white) transparent; height: 100%; inset-block-start: 0; inset-inline-end: 0; } @media (min-width: 768px) { .gemini-side-dialog .gemini-dialog__content { padding-block: 140px 24px; padding-inline: 64px; } } .gemini-side-dialog .gemini-dialog__eyebrow { color: var(--gemini-color-grey-400); } .gemini-side-dialog .gemini-dialog__close-button { inset-block-start: 48px; inset-inline-end: 20px; block-size: 48px; inline-size: 48px; border: 1px solid var(--gemini-color-grey-600); border-radius: 50%; background: transparent; transition: background 0.3s linear; } @media (min-width: 834px) { .gemini-side-dialog .gemini-dialog__close-button { inset-inline-end: 64px; } } .gemini-side-dialog .gemini-dialog__close-button svg { max-inline-size: 14px; } .gemini-side-dialog .gemini-dialog__close-button:hover, .gemini-side-dialog .gemini-dialog__close-button:focus-visible { background: var(--gemini-color-grey-600); } .gemini-side-dialog .gemini-dialog__close-button:focus-visible { outline: 1px solid var(--gemini-color-white); } .gemini-modal-dialog .gemini-dialog__close-button { block-size: 24px; inline-size: 24px; inset-block-start: 20px; inset-inline-end: 20px; transition: opacity 0.2s linear; background: transparent; } @media (min-width: 834px) { .gemini-modal-dialog .gemini-dialog__close-button { inset-block-start: 24px; inset-inline-end: 24px; } } .gemini-modal-dialog .gemini-dialog__close-button:hover { opacity: 0.7; } .gemini-modal-dialog .gemini-dialog__close-button:focus-visible { outline: 1px solid var(--gemini-color-white); } .gemini-modal-dialog .gemini-dialog-inner { align-items: center; block-size: 100%; display: flex; inline-size: 100%; justify-content: center; pointer-events: none; position: relative; z-index: 10; } @media (min-width: 834px) { .gemini-modal-dialog .gemini-dialog-inner { padding-block: 24px; } } .gemini-modal-dialog .gemini-dialog__content { background: var(--gemini-color-grey-700); block-size: var(--gemini-dialog-height, 100%); display: flex; flex-direction: column; inline-size: 100%; margin: auto auto; max-block-size: 100%; max-inline-size: var(--gemini-dialog-max-width, 846px); padding-block: 32px 20px; padding-inline: 20px; pointer-events: all; border: 1px solid var(--gemini-color-grey-600); } @media (min-width: 834px) { .gemini-modal-dialog .gemini-dialog__content { max-block-size: var(--gemini-dialog-max-height, 620px); border-radius: 24px; padding-block: 48px; padding-inline: 40px; } } .gemini-modal-dialog .gemini-dialog-header { flex-shrink: 0; margin-inline: auto; max-inline-size: 420px; text-align: center; } .gemini-modal-dialog .gemini-dialog-body { flex-grow: 1; overflow: hidden; padding-inline: 0 0; } .gemini-modal-dialog .gemini-dialog-block { background: var(--gemini-color-grey-800); border-radius: 12px; border: 1px solid var(--gemini-color-grey-600); } .gemini-modal-dialog .gemini-dialog-actions { display: flex; align-items: center; gap: 12px; } .gemini-scroller { height: 100%; overflow: auto; padding-block: 32px; padding-inline: 24px 40px; scrollbar-color: var(--gemini-color-white) transparent; scrollbar-width: thin; } .gemini-video-dialog .gemini-dialog-inner { align-items: center; block-size: 100%; display: flex; inline-size: 100%; justify-content: center; position: relative; z-index: 10; padding-inline: 20px; } @media screen and (min-width: 834px) { .gemini-video-dialog .gemini-dialog-inner { padding-inline: 60px; } } .gemini-video-dialog .gemini-dialog__close-button { position: absolute; background: var(--gemini-color-white); block-size: 40px; inline-size: 40px; inset-block-start: -60px; inset-inline-end: 0; border-radius: 50%; } @media screen and (min-width: 834px) { .gemini-video-dialog .gemini-dialog__close-button { inset-block-start: -40px; inset-inline-end: -40px; } } .gemini-video-dialog .gemini-dialog__close-button svg { width: 24px; } .gemini-video-dialog .gemini-dialog__content { inline-size: 100%; aspect-ratio: 559/315; position: relative; } @media screen and (min-width: 834px) { .gemini-video-dialog .gemini-dialog__content { min-inline-size: 700px; max-inline-size: 1200px; inline-size: 80%; } } .gemini-video-dialog .gemini-dialog__content .gemini-dialog-body { block-size: 100%; line-height: 0; border: var(--gemini-color-grey-600) 1px solid; border-radius: 16px; overflow: hidden; background: var(--gemini-color-grey-600); } .gemini-dialog-link { all: unset; cursor: pointer; color: var(--gemini-dialog-link-cta, #368efe); } /* Case study preview */ .gemini-case-study-preview { border-radius: 8px; transition: background-color 0.3s var(--gemini-ease-out-quad); } .gemini-case-study-preview:hover { background-color: var(--gemini-color-white); --geminin-case-preview-title-color: var(--gemini-color-black); --geminin-case-preview-copy-color: var(--gemini-color-grey-600); } .gemini-case-study-preview:hover .gemini-preview-thumbnail { transform: scale(0.98, 0.975); transition-duration: 0.3s; } .gemini-case-study-preview:hover .gemini-preview-description .gemini-arrow-link { opacity: 1; transform: translateX(0); } .gemini-case-study-preview .gemini-preview-thumbnail { overflow: hidden; border-radius: 8px; line-height: 0; transition: transform 0.18s var(--gemini-ease-out-quad); aspect-ratio: 826/586; } .gemini-case-study-preview .gemini-preview-thumbnail img { height: 100%; width: 100%; object-fit: cover; } .gemini-case-study-preview .gemini-preview-description { color: var(--geminin-case-preview-title-color, var(--gemini-color-white)); position: relative; padding-inline: 16px 48px; } @media screen and (min-width: 834px) { .gemini-case-study-preview .gemini-preview-description { padding-inline: 16px 48px; padding-block-end: 32px; } } .gemini-case-study-preview .gemini-preview-description .gemini-arrow-link { position: absolute; top: 1px; right: 24px; transition-property: opacity, transform; transition-duration: 0.1s, 0.3s; transition-timing-function: var(--gemini-ease-out-quad); transform: translateX(-6px); opacity: 1; } @media screen and (min-width: 834px) { .gemini-case-study-preview .gemini-preview-description .gemini-arrow-link { opacity: 0; } } .gemini-case-study-preview .gemini-preview-description p { transition: color 0.1s var(--gemini-ease-out-quad); } .gemini-case-study-preview .gemini-preview-description p:nth-of-type(2) { color: var(--geminin-case-preview-copy-color, var(--gemini-color-grey-300)); max-width: 374px; } </style><style> /* Styles inlined from /css/landing-v2.css */ body[theme=googledevai-theme][layout=full] { --devsite-banner-margin: 0; } body[theme=googledevai-theme][layout=full] .devsite-main-content { --devsite-main-content-padding: 0; } .gemini-page.gemini-landing-v2 { --devsite-banner-margin: 0; background-size: 100% 100vh; background-repeat: no-repeat; background-image: url(/images/landing/gemini-start-building-bg.jpg); } [data-viewport] { opacity: 0; transform: scale(.94); transition: 1.4s opacity, 1.4s transform; } [data-viewport].gemini-onscreen { opacity: 1; transform: scale(1); } .gemini-hero { --devsite-heading-color: var(--gemini-color-white); overflow: hidden; } .gemini-new-notification { position: relative; display: inline-flex; align-items: center; gap: 5px; border-radius: 12px; padding: 10px 15px; color: var(--gemini-color-white); text-decoration: none; margin-bottom: 100px; background: transparent; transition: 0.35s background-color; width: 100%; } @media only screen and (min-width: 834px) { .gemini-new-notification { margin-bottom: 130px; } } .gemini-new-notification .gemini-gradient-text { background: var(--gemini-_gradient); background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; display: block; flex: 1; margin-right: 4px; } @media only screen and (min-width: 834px) { .gemini-new-notification .gemini-gradient-text { display: inline; } } @media only screen and (min-width: 834px) { .gemini-new-notification { width: auto; padding: 7px 17px; } } .gemini-new-notification:hover { background-color: #152848; } .gemini-new-notification .gemini-new-notification-text { flex: 1; } .gemini-new-notification svg { margin-left: 10px; } .gemini-new-notification::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(0deg, #29519F, #6499D1); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .gemini-hero-content { position: relative; padding-top: 35px; padding-bottom: 0; } @media only screen and (min-width: 834px) { .gemini-hero-content { padding-top: 50px; padding-bottom: 150px; } } @media only screen and (min-width: 1024px) { .gemini-hero-content { padding-top: 35px; } } .gemini-hero-description { color: var(--gemini-color-grey-200); max-width: 570px; } .gemini-hero-text { position: relative; z-index: 1; } .gemini-page .gemini-hero-image { width: 100%; margin-top: -10px; max-inline-size: none; pointer-events: none; } @media only screen and (min-width: 834px) { .gemini-page .gemini-hero-image { position: absolute; margin-top: 48px; top: 0; left: 50%; width: 800px; } } .gemini-btn.gemini-secondary { background-color: var(--gemini-color-white); color: var(--gemini-color-black); --gemini-button-border: var(--gemini-color-white); } .gemini-building-top-wrapper { position: relative; padding: 0 0 50px 0; } .gemini-building-top-wrapper .gemini-lottie-lines { position: absolute; top: 0; height: 100%; display: none; } .gemini-building-top-wrapper .gemini-lottie-lines.gemini-lines-left { left: 0; } .gemini-building-top-wrapper .gemini-lottie-lines.gemini-lines-right { right: 0; } @media only screen and (min-width: 834px) { .gemini-building-top-wrapper { padding: 88px 0; } .gemini-building-top-wrapper .gemini-lottie-lines { display: block; } } .gemini-start-building-panel { position: relative; border-radius: 32px; padding: 50px 0 20px 0; background-color: #11131c; background-size: cover; background-repeat: no-repeat; } .gemini-start-building-panel:not(.gemini-start-building-panel-models) { margin-top: 32px; } @media only screen and (min-width: 834px) { .gemini-start-building-panel:not(.gemini-start-building-panel-models) { margin-top: 60px; } } @media only screen and (min-width: 834px) { .gemini-start-building-panel { padding-bottom: 80px; border-radius: 40px; } } .gemini-start-building-panel-models { background-image: url(/images/landing/gemini-start-building-panel1-bg.png); } .gemini-start-building-panel-gemma { background-image: url(/images/landing/gemini-start-building-panel2-bg.png); } .gemini-start-building-panel-edge .gemini-start-building-image { max-width: 650px; } .gemini-start-building-panel-responsible .gemini-start-building-image { max-width: 650px; } .gemini-start-building-panel-edge, .gemini-start-building-panel-responsible { background-image: url(/images/landing/gemini-start-building-panel3-4-bg.png); } .gemini-start-building-title-wrapper { max-width: 90%; margin: 0 auto; text-align: center; } .gemini-start-building-title-wrapper p { color: var(--gemini-color-grey-200); } .gemini-start-building-panel-top { display: flex; flex-direction: column-reverse; gap: 0; padding: 0 24px; } @media only screen and (min-width: 834px) { .gemini-start-building-panel-top { padding: 0 0 0 88px; gap: 60px; flex-direction: row; } } .gemini-start-building-title { padding-top: 50px; max-width: 500px; } .gemini-start-building-image { margin-left: auto; margin-top: -64px; } @media only screen and (min-width: 834px) { .gemini-start-building-image { margin-right: 24px; } } .gemini-start-building-subtitle { max-width: 420px; color: var(--gemini-color-grey-300); } .gemini-start-building-cards { display: flex; flex-direction: column; gap: 20px; margin-top: 50px; padding: 0 24px 32px 24px; } @media only screen and (min-width: 1024px) { .gemini-start-building-cards { flex-direction: row; margin-top: 8px; padding: 0 88px; } } .gemini-start-building-card { position: relative; display: flex; flex-direction: row; align-items: center; border-radius: 24px; background-image: url(/images/landing/gemini-guide-card-bg-horiz.png); background-size: cover; padding: 10px; gap: 24px; min-height: 225px; flex-basis: 100%; color: var(--gemini-color-white); text-decoration: none; transition: all 0.25s cubic-bezier(0.42, 0, 0.58, 1); } @media only screen and (max-width: 680px) { .gemini-start-building-card { flex-direction: column; } .gemini-start-building-card .gemini-start-building-card-image { height: 160px; width: 100%; } .gemini-start-building-card .gemini-start-building-card-text { padding: 0 14px 14px; } .gemini-start-building-card.gemini-narrow { flex-direction: column; } .gemini-start-building-card.gemini-narrow .gemini-start-building-card-image { height: 160px; width: 100%; } .gemini-start-building-card.gemini-narrow .gemini-start-building-card-text { padding: 0 10px 10px 10px; } } @media only screen and (min-width: 1024px) { .gemini-start-building-card.gemini-narrow { flex-direction: column; } .gemini-start-building-card.gemini-narrow .gemini-start-building-card-image { height: 160px; width: 100%; } .gemini-start-building-card.gemini-narrow .gemini-start-building-card-text { padding: 0 10px 10px 10px; } } .gemini-start-building-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0; background: var(--gemini-color-blue-gradient); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; transition: inherit; } .gemini-start-building-card:hover { transform: translateY(-15px); transition: all 0.5s cubic-bezier(0.22, 0.17, 0.04, 0.99); } .gemini-start-building-card:hover .gemini-start-building-card-image img { transform: scale(1.07); } .gemini-start-building-card:hover::before { opacity: 1; } .gemini-start-building-card-subtitle { color: var(--gemini-color-grey-400); flex: 1; margin-bottom: 20px; margin-right: 14px; } .gemini-start-building-card-image { display: flex; background-color: var(--gemini-color-black); width: 150px; border-radius: 15px; flex-shrink: 0; align-self: stretch; align-items: center; justify-content: center; padding: 15px; transition: inherit; } .gemini-start-building-card-image img { max-height: 100%; transition: inherit; filter: drop-shadow(0px 0px 30px rgba(7,110,255,0.7)); } .gemini-start-building-card-text { display: flex; flex-direction: column; height: 100%; padding: 16px 0; } .gemini-landing-boost-productivity { --gemini-heading-max-width: 780px; } .gemini-landing-boost-productivity .gemini-section-header { grid-column: 1/-1; } .gemini-landing-boost-productivity .gemini-tabs-component { grid-column: 1/-1; } .gemini-landing-boost-productivity .gemini-tabs { display: flex; align-items: center; justify-content: flex-start; overflow: auto; padding-bottom: 10px; } @media screen and (min-width: 834px) { .gemini-landing-boost-productivity .gemini-tabs { justify-content: center; overflow: hidden; padding-bottom: 0; } } .gemini-landing-boost-productivity .gemini-tabs .gemini-tab-button { background: transparent; border: none; color: var(--gemini-color-grey-500); height: 55px; opacity: 0.5; padding-inline: 29px; border-radius: 32px; transition-property: background, border-color, color; transition-duration: 0.3s, 0.3s, 0.2s; transition-timing-function: var(--gemini-ease-out-quad); border: 1px solid transparent; } @media screen and (min-width: 834px) { .gemini-landing-boost-productivity .gemini-tabs .gemini-tab-button { height: 65px; padding-inline: 32px; } } .gemini-landing-boost-productivity .gemini-tabs .gemini-tab-button:not(.gemini-active) { cursor: pointer; } .gemini-landing-boost-productivity .gemini-tabs .gemini-tab-button:has(:hover):not(.gemini-active) { opacity: 1; color: var(--gemini-color-grey-200); } .gemini-landing-boost-productivity .gemini-tabs .gemini-tab-button.gemini-active { opacity: 1; color: var(--gemini-color-white); border-color: var(--gemini-color-blue); background: url("/images/landing/tab-button-bg.jpg") no-repeat; background-position: center; background-size: cover; } .gemini-landing-boost-productivity .gemini-tab { white-space: nowrap; } .gemini-landing-boost-productivity .gemini-tabs-sections { inline-size: 100%; } .gemini-landing-boost-productivity .gemini-productivity-section { background: var(--gemini-color-grey-800) url("/images/landing/productivity/tab-background.jpg") no-repeat; background-size: cover; background-position: center 100%; display: flex; flex-direction: column; border-radius: 32px; justify-content: space-between; padding: 33px 25px 0 25px; gap: 24px; } @media screen and (min-width: 834px) { .gemini-landing-boost-productivity .gemini-productivity-section { border-radius: 40px; } } .gemini-landing-boost-productivity .gemini-productivity-section .gemini-section-copy { display: flex; flex-direction: column; justify-content: center; } .gemini-landing-boost-productivity .gemini-productivity-section .gemini-section-copy .gemini-section-description { color: var(--gemini-color-grey-200); } @media screen and (min-width: 500px) { .gemini-landing-boost-productivity .gemini-productivity-section { padding: 88px 80px 20px 80px; } } @media screen and (min-width: 834px) { .gemini-landing-boost-productivity .gemini-productivity-section { flex-direction: row; padding: 0 88px; } .gemini-landing-boost-productivity .gemini-productivity-section .gemini-section-copy { max-inline-size: 500px; } } .gemini-landing-boost-productivity .gemini-productivity-section .gemini-section-media { min-inline-size: 40%; max-inline-size: 460px; inline-size: 100%; } @media screen and (min-width: 1600px) { .gemini-landing-boost-productivity .gemini-productivity-section .gemini-section-media { max-inline-size: 630px; } } .gemini-landing-boost-productivity .gemini-productivity-section .gemini-section-media .gemini-media-inner { border-radius: 32px; aspect-ratio: 530/590; inline-size: 100%; } .gemini-landing-boost-productivity .gemini-productivity-section .gemini-section-media img { display: block; inline-size: 100%; } .gemini-landing-boost-productivity .gemini-partner-list { display: flex; gap: 8px; flex-wrap: wrap; overflow: hidden; } .gemini-landing-boost-productivity .gemini-partner-item { --gemini-partner-item-size: calc(50vw - (var(--gemini-size-grid-margin) + 5px)); } @media screen and (min-width: 440px) { .gemini-landing-boost-productivity .gemini-partner-item { --gemini-partner-item-size: calc(33vw - (var(--gemini-size-grid-margin) - 2px)); } } @media screen and (min-width: 600px) { .gemini-landing-boost-productivity .gemini-partner-item { --gemini-partner-item-size: 150px; } } .gemini-developer-showcase .gemini-showcase-slider { padding-inline-start: 20px; } @media screen and (min-width: 834px) { .gemini-developer-showcase .gemini-showcase-slider { padding-inline-start: max(80px, (100vw - 1600px) / 2 + 80px); } } .gemini-developer-showcase .gemini-showcase-slider devsite-carousel[data-items-per-slide=auto] { --devsite-carousel-slideshow-padding-inline: 0; --devsite-carousel-slideshow-scroll-padding: 0; --devsite-carousel-markers-display: none; --devsite-carousel-next-grid-column: 3; --devsite-carousel-next-place-self: start; --devsite-carousel-slideshow-scroll-padding: 0; --devsite-carousel-prev-next-hidden-opacity: 0.5; --devsite-carousel-button-size: 60px; --devsite-carousel-gap: 32px 8px; --devsite-carousel-button-icon-size: 32px; } .gemini-developer-showcase .gemini-showcase-slide { inline-size: calc(100% - 20px); max-inline-size: 720px; background: var(--gemini-color-grey-800) url("/images/landing/slide-bg.jpg") no-repeat; background-size: cover; border-radius: 24px; } @media screen and (min-width: 834px) { .gemini-developer-showcase .gemini-showcase-slide { inline-size: 33%; max-inline-size: 480px; min-inline-size: 320px; } } .gemini-developer-showcase .gemini-showcase-slide .gemini-slide-media-wrapper { padding: 8px 8px 0; } .gemini-developer-showcase .gemini-showcase-slide .gemini-slide-media-wrapper .gemini-slide-media { overflow: hidden; border-radius: 24px; } .gemini-developer-showcase .gemini-showcase-slide .gemini-slide-media-wrapper .gemini-slide-media img { display: block; } .gemini-developer-showcase .gemini-showcase-slide .gemini-slide-copy { max-inline-size: 388px; } .gemini-developer-showcase .gemini-showcase-slide .gemini-slide-excerpt { color: var(--gemini-color-grey-300); } .gemini-developer-showcase .gemini-showcase-slide .gemini-slide-content { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; } .gemini-developer-showcase .gemini-showcase-slide .gemini-slide-content .gemini-slide-cta { flex-shrink: 0; } .gemini-landing-community { position: relative; display: grid; place-items: center; } .gemini-landing-community > * { grid-area: 1/1; } .gemini-landing-community .gemini-lottie-lines { aspect-ratio: 1440/266; } .gemini-landing-community .gemini-section-hero { margin-block: 100px; } @media screen and (min-width: 834px) { .gemini-landing-community .gemini-section-hero { margin-block: 200px; } } .gemini-landing-community .gemini-section__copy { padding: 0 20px; } </style><style> /* Styles inlined from /site-assets/css/landing.css */ .devsite-banner-message-text { margin: auto; } </style> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://ai.google.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google AI for Developers" > Google AI for Developers </a> </li> </ul> </div> <devsite-feedback position="header" project-name="Google AI for Developers" product-id="5292923" bucket="documentation" context="" version="t-devsite-webserver-20250311-r00-rc00.467585266104203283" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="header" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/touchicon-180-new.png" > <button> Send feedback </button> </devsite-feedback> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix devsite-no-page-title"> <devsite-gemini-page class="gemini-page gemini-landing-v2"> <section class="gemini-hero gemini-space-d64" data-viewport="in" > <div class="gemini-hero-content"> <div class="gemini-hero-text gemini-layout-max-width"> <a href="https://developers.googleblog.com/en/start-building-with-the-gemini-2-0-flash-family/" data-category="content_click" data-label="https://developers.googleblog.com/en/start-building-with-the-gemini-2-0-flash-family/" data-action="Start building with Gemini 2.0 Flash and Flash-Lite" class="gemini-new-notification"> <div class="gemini-new-notification-text"> <span class="gemini-gradient-text gemini-type-l2">New</span> <span class="gemini-type-t2">Start building with Gemini 2.0 Flash and Flash-Lite</span> </div> <svg width="7" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m.06 10.393.94.94L6.333 6 1 .667l-.94.94L4.447 6" fill="#fff"/></svg> </a> <h1 class="gemini-type-d1 gemini-space-d32 gemini-hero-title" id="ai-for-everydeveloper" data-text="AI for everydeveloper" tabindex="-1">AI for every<br>developer</h1> <p class="gemini-type-t1 gemini-space-d48 gemini-hero-description">Unlock AI models to build innovative apps and transform development workflows with tools across platforms.</p> <a class="gemini-btn gemini-gradient gemini-type-btn gc-analytics-event" data-category="content_click" data-label="https://aistudio.google.com" data-action="Explore models in Google AI Studio" href="https://aistudio.google.com" rel="" > <span>Explore models in Google AI Studio</span> </a> </div> <img class="gemini-hero-image" src="/static/images/landing/gemini-landing-bg.png" alt="AI for every developer"> </div> </section> <section class="gemini-start-building gemini-layout-max-width gemini-space-d180"> <div class="gemini-building-top-wrapper"> <div class="gemini-svg gemini-lottie-lines gemini-lines-left" data-lottie="/lottie/start-building-left.json" data-lottie-name="start-building-left"></div> <div class="gemini-section-cta gemini-section-header gemini-default" style=""> <article class="gemini-cta " data-viewport="once" data-viewport-threshold="0.3" > <div class="gemini-section gemini-section__subtitle"> </div> <div class="gemini-section gemini-section__title"> <h2 class="gemini-type-d4 gemini-space-d24" id="start-building" data-text="Start building" tabindex="-1">Start building</h2> </div> <div class="gemini-section gemini-section__copy"> <p class="gemini-type-t1">Get started building with cutting-edge AI models and tools</p> </div> <div class="gemini-section gemini-section__buttons"> </div> </article> </div> <div class="gemini-svg gemini-lottie-lines gemini-lines-right" data-lottie="/lottie/start-building-right.json" data-lottie-name="start-building-left"></div> </div> <div class="gemini-start-building-panel gemini-start-building-panel-models" data-viewport="in"> <div class="gemini-start-building-panel-top"> <div class="gemini-start-building-text"> <h3 class="gemini-type-h1 gemini-space-d24 gemini-start-building-title" id="integrate-google-ai-models-with-an-api-key" data-text="Integrate Google AI models with an API key" tabindex="-1">Integrate Google AI models with an API key</h3> <p class="gemini-type-b1 gemini-start-building-subtitle gemini-space-d32">Build with cutting-edge AI models, like Gemini, from Google DeepMind.</p> <a class="gemini-btn gemini-gradient gemini-type-btn gc-analytics-event" data-category="content_click" data-label="https://ai.google.dev/gemini-api/docs" data-action="View Gemini API docs" href="https://ai.google.dev/gemini-api/docs" rel="" > <span>View Gemini API docs</span> </a> </div> <div class="gemini-start-building-image"> <img src="/static/images/landing/gemini-start-building-code.png" alt="Integrate Google AI models with an API key" width="570px"> </div> </div> <div class="gemini-start-building-cards"> <a href="https://ai.google.dev/gemini-api/docs" class="gemini-start-building-card "> <div class="gemini-start-building-card-image"> <img src="/static/images/landing/gemini-start-building-card-integrate.svg" alt="Integrate models into apps"> </div> <div class="gemini-start-building-card-text"> <h5 class="gemini-type-t2 gemini-space-d8" id="integrate-models-into-apps" data-text="Integrate models into apps" tabindex="-1">Integrate models into apps</h5> <p class="gemini-type-b1 gemini-start-building-card-subtitle">Unlock AI capabilities for your apps with a simple call to the Gemini API.</p> <div class="gemini-start-building-card-button"> <div class="gemini-btn gemini-tertiary gemini-has--icon gemini-type-t3"> <span> <svg width="17" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.737 8.352a8.121 8.121 0 0 1-3.224-.647 8.622 8.622 0 0 1-2.652-1.796 8.62 8.62 0 0 1-1.796-2.652A8.121 8.121 0 0 1 8.418.033a.033.033 0 1 0-.066 0c0 1.15-.225 2.212-.668 3.224A8.33 8.33 0 0 1 5.909 5.91a8.619 8.619 0 0 1-2.652 1.796 8.123 8.123 0 0 1-3.224.647.033.033 0 1 0 0 .066c1.15 0 2.213.225 3.224.668a8.332 8.332 0 0 1 2.652 1.775 8.33 8.33 0 0 1 1.775 2.652 7.9 7.9 0 0 1 .668 3.224.033.033 0 1 0 .066 0c0-1.15.218-2.213.647-3.223a8.619 8.619 0 0 1 1.796-2.653 8.326 8.326 0 0 1 2.652-1.775 7.902 7.902 0 0 1 3.224-.668.033.033 0 0 0 0-.066Z" fill="url(#paint0_linear_36169_4483)"/><defs><linearGradient id="paint0_linear_36169_4483" x1="5.219" y1="10.84" x2="12.805" y2="4.444" gradientUnits="userSpaceOnUse"><stop stop-color="#217BFE"/><stop offset=".27" stop-color="#078EFB"/><stop offset=".777" stop-color="#A190FF"/><stop offset="1" stop-color="#BD99FE"/></linearGradient></defs></svg> Gemini API docs</span> </div> </div> </div> </a> <a href="https://aistudio.google.com/" class="gemini-start-building-card "> <div class="gemini-start-building-card-image"> <img src="/static/images/landing/gemini-start-building-card-explore.svg" alt="Explore AI models"> </div> <div class="gemini-start-building-card-text"> <h5 class="gemini-type-t2 gemini-space-d8" id="explore-ai-models" data-text="Explore AI models" tabindex="-1">Explore AI models</h5> <p class="gemini-type-b1 gemini-start-building-card-subtitle">Quickly evaluate AI models, develop prompts, and transform ideas into code.</p> <div class="gemini-start-building-card-button"> <div class="gemini-btn gemini-tertiary gemini-has--icon gemini-type-t3"> <span> <svg width="17" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.737 8.352a8.121 8.121 0 0 1-3.224-.647 8.622 8.622 0 0 1-2.652-1.796 8.62 8.62 0 0 1-1.796-2.652A8.121 8.121 0 0 1 8.418.033a.033.033 0 1 0-.066 0c0 1.15-.225 2.212-.668 3.224A8.33 8.33 0 0 1 5.909 5.91a8.619 8.619 0 0 1-2.652 1.796 8.123 8.123 0 0 1-3.224.647.033.033 0 1 0 0 .066c1.15 0 2.213.225 3.224.668a8.332 8.332 0 0 1 2.652 1.775 8.33 8.33 0 0 1 1.775 2.652 7.9 7.9 0 0 1 .668 3.224.033.033 0 1 0 .066 0c0-1.15.218-2.213.647-3.223a8.619 8.619 0 0 1 1.796-2.653 8.326 8.326 0 0 1 2.652-1.775 7.902 7.902 0 0 1 3.224-.668.033.033 0 0 0 0-.066Z" fill="url(#paint0_linear_36169_4483)"/><defs><linearGradient id="paint0_linear_36169_4483" x1="5.219" y1="10.84" x2="12.805" y2="4.444" gradientUnits="userSpaceOnUse"><stop stop-color="#217BFE"/><stop offset=".27" stop-color="#078EFB"/><stop offset=".777" stop-color="#A190FF"/><stop offset="1" stop-color="#BD99FE"/></linearGradient></defs></svg> Google AI Studio</span> </div> </div> </div> </a> </div> </div> <div class="gemini-start-building-panel gemini-start-building-panel-gemma" data-viewport="in"> <div class="gemini-start-building-panel-top"> <div class="gemini-start-building-text"> <h3 class="gemini-type-h1 gemini-space-d24 gemini-start-building-title" id="own-your-ai-with-gemma-open-models" data-text="Own your AI with Gemma open models" tabindex="-1">Own your AI with Gemma open models</h3> <p class="gemini-type-b1 gemini-start-building-subtitle gemini-space-d32">Build custom AI solutions and retain complete control. Tailor Gemma models, built from the same research and technology as Gemini, with your own data.</p> <a class="gemini-btn gemini-gradient gemini-type-btn gc-analytics-event" data-category="content_click" data-label="https://ai.google.dev/gemma" data-action="Build with Gemma" href="https://ai.google.dev/gemma" rel="" > <span>Build with Gemma</span> </a> </div> <div class="gemini-start-building-image"> <img src="/static/images/landing/gemini-start-building-gemma.png" alt="Own your AI with Gemma open models" width="570px"> </div> </div> <div class="gemini-start-building-cards"> <a href="https://www.kaggle.com/" class="gemini-start-building-card gemini-narrow"> <div class="gemini-start-building-card-image"> <img src="/static/images/landing/gemini-start-building-card-ai.svg" alt="Download AI models"> </div> <div class="gemini-start-building-card-text"> <h5 class="gemini-type-t2 gemini-space-d8" id="download-ai-models" data-text="Download AI models" tabindex="-1">Download AI models</h5> <p class="gemini-type-b1 gemini-start-building-card-subtitle">Explore Gemma and community open models, datasets, and code on Kaggle.</p> <div class="gemini-start-building-card-button"> <div class="gemini-btn gemini-tertiary gemini-has--icon gemini-type-t3"> <span> <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icons"><path id="Vector" d="m14.333 17.19-4.375-5.308 4.195-3.963c.078-.08.05-.308-.16-.308h-2.076c-.105 0-.21.053-.315.156l-3.97 3.916V2.72c0-.147-.075-.22-.225-.22H5.85c-.15 0-.225.073-.225.22v14.557c0 .147.075.22.225.22h1.557c.15 0 .225-.073.225-.22v-3.192l.925-.859 3.315 4.119a.41.41 0 0 0 .316.155h2.007c.105 0 .165-.03.18-.088l-.042-.223Z" fill="#20BEFF"/></g></svg> Kaggle</span> </div> </div> </div> </a> <a href="https://keras.io/keras_3/" class="gemini-start-building-card gemini-narrow"> <div class="gemini-start-building-card-image"> <img src="/static/images/landing/gemini-start-building-card-train.svg" alt="Train AI models"> </div> <div class="gemini-start-building-card-text"> <h5 class="gemini-type-t2 gemini-space-d8" id="train-ai-models" data-text="Train AI models" tabindex="-1">Train AI models</h5> <p class="gemini-type-b1 gemini-start-building-card-subtitle">Build with Keras, the flexible framework for TensorFlow, PyTorch, and JAX.</p> <div class="gemini-start-building-card-button"> <div class="gemini-btn gemini-tertiary gemini-has--icon gemini-type-t3"> <span> <svg width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="22" height="22" rx="11" fill="#D00000"/><path d="M6.465 16.433c0 .016.009.037.02.047l.342.343c.01.01.032.02.047.02h1.172a.076.076 0 0 0 .047-.02l.342-.343c.011-.01.02-.032.02-.047v-3.72c0-.014.009-.035.02-.046l1.489-1.422a.022.022 0 0 1 .035.004l3.763 5.57a.058.058 0 0 0 .043.024h1.66a.05.05 0 0 0 .04-.025l.302-.584a.05.05 0 0 0-.003-.047l-4.401-6.38a.034.034 0 0 1 .003-.042l4.049-4.029c.01-.01.02-.032.02-.047v-.074a.162.162 0 0 0-.012-.053l-.233-.537A.046.046 0 0 0 15.19 5H13.55a.077.077 0 0 0-.047.02l-5.029 5.047c-.01.01-.019.007-.019-.008v-4.63a.08.08 0 0 0-.019-.048L8.1 5.02A.072.072 0 0 0 8.054 5h-1.18a.072.072 0 0 0-.046.02l-.345.37a.08.08 0 0 0-.018.048v10.994Z" fill="#fff"/></svg> Keras</span> </div> </div> </div> </a> <a href="https://colab.sandbox.google.com/github/google/generative-ai-docs/blob/main/site/en/gemma/docs/lora_tuning.ipynb" class="gemini-start-building-card gemini-narrow"> <div class="gemini-start-building-card-image"> <img src="/static/images/landing/gemini-start-building-card-tune.svg" alt="Fine-tune AI models"> </div> <div class="gemini-start-building-card-text"> <h5 class="gemini-type-t2 gemini-space-d8" id="fine-tune-ai-models" data-text="Fine-tune AI models" tabindex="-1">Fine-tune AI models</h5> <p class="gemini-type-b1 gemini-start-building-card-subtitle">Fine-tune Gemma open models in Python, within your browser in Colab.</p> <div class="gemini-start-building-card-button"> <div class="gemini-btn gemini-tertiary gemini-has--icon gemini-type-t3"> <span> <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.958 4.167a5.625 5.625 0 1 0 0 11.25 5.625 5.625 0 0 0 0-11.25Zm0 8.333a2.708 2.708 0 1 1 0-5.417 2.708 2.708 0 0 1 0 5.417Z" fill="#FFB300"/><path d="M7.976 11.688v-.002a2.708 2.708 0 1 1 .01-3.78l1.561-2.51a5.598 5.598 0 0 0-3.505-1.23 5.625 5.625 0 1 0 0 11.25A5.6 5.6 0 0 0 9.53 14.2l-1.553-2.512Z" fill="#FFB300"/><path d="M3.334 9.792c0-.745.3-1.42.787-1.909L2.098 5.784a5.605 5.605 0 0 0-1.68 4.008c0 1.562.637 2.975 1.665 3.994l2.056-2.069a2.7 2.7 0 0 1-.805-1.925ZM15.888 7.892a2.708 2.708 0 1 1-3.869 3.788l-2.083 2.04a5.606 5.606 0 0 0 4.023 1.697 5.625 5.625 0 0 0 4.012-9.565l-2.083 2.04Z" fill="#F57C00"/></svg> Colab</span> </div> </div> </div> </a> </div> </div> <div class="gemini-start-building-panel gemini-start-building-panel-edge" data-viewport="in"> <div class="gemini-start-building-panel-top"> <div class="gemini-start-building-text"> <h3 class="gemini-type-h1 gemini-space-d24 gemini-start-building-title" id="run-ai-models-on-device-with-google-ai-edge" data-text="Run AI models on-device with Google AI Edge" tabindex="-1">Run AI models on-device with Google AI Edge</h3> <p class="gemini-type-b1 gemini-start-building-subtitle gemini-space-d32">Build and deploy edge ML solutions across mobile, web, and embedded applications, from simple APIs to custom pipelines, with support across all major frameworks.</p> <a class="gemini-btn gemini-gradient gemini-type-btn gc-analytics-event" data-category="content_click" data-label="https://ai.google.dev/edge" data-action="Explore Google AI Edge" href="https://ai.google.dev/edge" rel="" > <span>Explore Google AI Edge</span> </a> </div> <div class="gemini-start-building-image"> <img src="/static/images/landing/gemini-start-building-edge.png" alt="Run AI models on-device with Google AI Edge" width="570px"> </div> </div> <div class="gemini-start-building-cards"> <a href="https://developer.android.com/ai/gemini-nano" class="gemini-start-building-card "> <div class="gemini-start-building-card-image"> <img src="/static/images/landing/gemini-start-building-card-nano.svg" alt="Gemini Nano on Android"> </div> <div class="gemini-start-building-card-text"> <h5 class="gemini-type-t2 gemini-space-d8" id="gemini-nano-on-android" data-text="Gemini Nano on Android" tabindex="-1">Gemini Nano on Android</h5> <p class="gemini-type-b1 gemini-start-building-card-subtitle">Unlock low latency and cost effective generative AI features while keeping data on-device.</p> <div class="gemini-start-building-card-button"> <div class="gemini-btn gemini-tertiary gemini-has--icon gemini-type-t3"> <span> <svg width="19" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_36986_5382)"><mask id="mask0_36986_5382" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="19" height="12"><path d="M.057.569h18.875v10.876H.057V.569Z" fill="#fff"/></mask><g mask="url(#mask0_36986_5382)"><path d="M18.878 11.033a9.277 9.277 0 0 0-1.65-4.018 9.492 9.492 0 0 0-2.715-2.526l.01-.018.572-.976.559-.953.4-.685a.856.856 0 0 0 .112-.528.854.854 0 0 0-.418-.64.882.882 0 0 0-.97.055.859.859 0 0 0-.224.252l-.4.684-.56.953-.571.976c-.02.036-.042.072-.063.107l-.086-.033a9.553 9.553 0 0 0-3.477-.613 9.56 9.56 0 0 0-3.35.64 1370.455 1370.455 0 0 0-.63-1.076l-.56-.953-.4-.685a.862.862 0 0 0-.825-.424.87.87 0 0 0-.764.634.852.852 0 0 0 .088.652l.401.684.559.954.572.976.004.008a9.521 9.521 0 0 0-2.731 2.536 9.301 9.301 0 0 0-1.705 4.43h18.875a9.495 9.495 0 0 0-.054-.412h.002Z" fill="#34A853"/><path d="M14.404 8.863c.377-.249.432-.824.122-1.286-.31-.46-.867-.633-1.245-.384-.377.249-.432.824-.122 1.285.31.461.867.634 1.245.385ZM5.846 8.48c.31-.461.255-1.037-.123-1.286-.378-.248-.935-.076-1.245.385-.31.461-.255 1.037.123 1.285.377.25.935.077 1.245-.384Z" fill="#202124"/></g></g><defs><clipPath id="clip0_36986_5382"><path fill="#fff" transform="translate(0 .5)" d="M0 0h19v11H0z"/></clipPath></defs></svg> Android docs</span> </div> </div> </div> </a> <a href="https://developer.chrome.com/docs/ai/built-in" class="gemini-start-building-card "> <div class="gemini-start-building-card-image"> <img src="/static/images/landing/gemini-start-building-card-apps.svg" alt="AI features for web apps"> </div> <div class="gemini-start-building-card-text"> <h5 class="gemini-type-t2 gemini-space-d8" id="ai-features-for-web-apps" data-text="AI features for web apps" tabindex="-1">AI features for web apps</h5> <p class="gemini-type-b1 gemini-start-building-card-subtitle">Integrate AI models like Gemini Nano into web apps with Chrome's built-in web platform APIs.</p> <div class="gemini-start-building-card-button"> <div class="gemini-btn gemini-tertiary gemini-has--icon gemini-type-t3"> <span> <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_36986_5416)"><path d="M9 13.498a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z" fill="#fff"/><path d="M9 4.5h7.793a8.998 8.998 0 0 0-15.586.001l3.896 6.749h.004A4.494 4.494 0 0 1 9 4.5Z" fill="url(#paint0_linear_36986_5416)"/><path d="M9 12.563a3.563 3.563 0 1 0 0-7.126 3.563 3.563 0 0 0 0 7.125Z" fill="#1A73E8"/><path d="M12.896 11.251 9 18A8.997 8.997 0 0 0 16.792 4.5H9v.004a4.495 4.495 0 0 1 3.897 6.746Z" fill="url(#paint1_linear_36986_5416)"/><path d="M5.103 11.251 1.207 4.502A8.998 8.998 0 0 0 9.001 18l3.897-6.749-.003-.002a4.494 4.494 0 0 1-7.792.002Z" fill="url(#paint2_linear_36986_5416)"/></g><defs><linearGradient id="paint0_linear_36986_5416" x1="1.207" y1="5.625" x2="16.793" y2="5.625" gradientUnits="userSpaceOnUse"><stop stop-color="#D93025"/><stop offset="1" stop-color="#EA4335"/></linearGradient><linearGradient id="paint1_linear_36986_5416" x1="7.77" y1="17.88" x2="15.563" y2="4.381" gradientUnits="userSpaceOnUse"><stop stop-color="#FCC934"/><stop offset="1" stop-color="#FBBC04"/></linearGradient><linearGradient id="paint2_linear_36986_5416" x1="9.975" y1="17.438" x2="2.181" y2="3.94" gradientUnits="userSpaceOnUse"><stop stop-color="#1E8E3E"/><stop offset="1" stop-color="#34A853"/></linearGradient><clipPath id="clip0_36986_5416"><path fill="#fff" d="M0 0h18v18H0z"/></clipPath></defs></svg> AI on Chrome</span> </div> </div> </div> </a> </div> </div> <div class="gemini-start-building-panel gemini-start-building-panel-responsible" data-viewport="in"> <div class="gemini-start-building-panel-top"> <div class="gemini-start-building-text"> <h3 class="gemini-type-h1 gemini-space-d24 gemini-start-building-title" id="build-with-ai-responsibly" data-text="Build with AI responsibly" tabindex="-1">Build with AI responsibly</h3> <p class="gemini-type-b1 gemini-start-building-subtitle gemini-space-d32">Build trusted and secure AI with guidance for responsible design, development, and deployment of models and applications.</p> <a class="gemini-btn gemini-gradient gemini-type-btn gc-analytics-event" data-category="content_click" data-label="https://ai.google.dev/responsible/" data-action="Build Responsible AI" href="https://ai.google.dev/responsible/" rel="" > <span>Build Responsible AI</span> </a> </div> <div class="gemini-start-building-image"> <img src="/static/images/landing/gemini-start-building-responsible.png" alt="Build with AI responsibly" width="570px"> </div> </div> <div class="gemini-start-building-cards"> <a href="https://ai.google.dev/responsible" class="gemini-start-building-card "> <div class="gemini-start-building-card-image"> <img src="/static/images/landing/gemini-start-building-card-models.svg" alt="Gemini Nano on Android"> </div> <div class="gemini-start-building-card-text"> <h5 class="gemini-type-t2 gemini-space-d8" id="build-responsible-models" data-text="Build responsible models" tabindex="-1">Build responsible models</h5> <p class="gemini-type-b1 gemini-start-building-card-subtitle">Tools and guidance to design, build, and evaluate open AI models responsibly.</p> <div class="gemini-start-building-card-button"> <div class="gemini-btn gemini-tertiary gemini-has--icon gemini-type-t3"> <span> <svg width="21" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_36986_5538)"><path d="M10.477 5.971a1.79 1.79 0 0 0 1-.71c.263-.362.396-.768.396-1.218V2.976l-1.396-.52-1.395.52v1.067c0 .45.133.856.397 1.218.264.363.596.6.998.71Z" fill="url(#paint0_linear_36986_5538)"/><path d="M4.426-.058v16.343h12.151V-.058H4.427Zm10.871 15.066h-9.59V1.219h9.587v13.789h.003Z" fill="url(#paint1_linear_36986_5538)"/><path d="M14.007 7.22H6.946v1.277h7.06V7.22Z" fill="url(#paint2_linear_36986_5538)"/><path d="M14.007 9.74H6.946v1.277h7.06V9.74Z" fill="url(#paint3_linear_36986_5538)"/><path d="M10.729 12.258H6.946v1.277h3.783v-1.277Z" fill="url(#paint4_linear_36986_5538)"/></g><defs><linearGradient id="paint0_linear_36986_5538" x1="9.261" y1="5.76" x2="11.832" y2="4.61" gradientUnits="userSpaceOnUse"><stop stop-color="#64B8FB"/><stop offset="1" stop-color="#217BFE"/></linearGradient><linearGradient id="paint1_linear_36986_5538" x1="5.206" y1="15.301" x2="16.632" y2="10.514" gradientUnits="userSpaceOnUse"><stop stop-color="#64B8FB"/><stop offset="1" stop-color="#217BFE"/></linearGradient><linearGradient id="paint2_linear_36986_5538" x1="7.4" y1="8.42" x2="8.128" y2="6.149" gradientUnits="userSpaceOnUse"><stop stop-color="#64B8FB"/><stop offset="1" stop-color="#217BFE"/></linearGradient><linearGradient id="paint3_linear_36986_5538" x1="7.4" y1="10.94" x2="8.128" y2="8.67" gradientUnits="userSpaceOnUse"><stop stop-color="#64B8FB"/><stop offset="1" stop-color="#217BFE"/></linearGradient><linearGradient id="paint4_linear_36986_5538" x1="7.189" y1="13.458" x2="8.293" y2="11.615" gradientUnits="userSpaceOnUse"><stop stop-color="#64B8FB"/><stop offset="1" stop-color="#217BFE"/></linearGradient><clipPath id="clip0_36986_5538"><path fill="#fff" d="M0 0h21v16.227H0z"/></clipPath></defs></svg> Responsible GenAI Toolkit</span> </div> </div> </div> </a> <a href="https://saif.google/" class="gemini-start-building-card "> <div class="gemini-start-building-card-image"> <img src="/static/images/landing/gemini-start-building-card-security.svg" alt="Develop secure AI systems"> </div> <div class="gemini-start-building-card-text"> <h5 class="gemini-type-t2 gemini-space-d8" id="develop-secure-ai-systems" data-text="Develop secure AI systems" tabindex="-1">Develop secure AI systems</h5> <p class="gemini-type-b1 gemini-start-building-card-subtitle">Build and deploy secure, responsible AI applications with the help of Google's Secure AI Framework (SAIF).</p> <div class="gemini-start-building-card-button"> <div class="gemini-btn gemini-tertiary gemini-has--icon gemini-type-t3"> <span> <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="url(#pattern0_36986_5572)" d="M0 0h20v20H0z"/><defs><pattern id="pattern0_36986_5572" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#image0_36986_5572" transform="scale(.00962)"/></pattern><image id="image0_36986_5572" width="104" height="104" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABoCAYAAAAdHLWhAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAaKADAAQAAAABAAAAaAAAAAB/U1sRAAAOcUlEQVR4Ae1dCXQURRr+q2dyEAghQCYJhxIwXAkZLxQVWFnF5Sm6i+LqijnwhKeuT1bX9XkA+3BXV3fX91CRGK7EC7wQ1xUEFxESESOoiGhERK6ZSUICCYZkZrpr/05omBmS7p6q7p4Opt6bdHVX1X99XdV/nQHoCl0W6LJAlwW6LNBlgdhYgMSGrbFcMwo+mQPUfysF6EG6pX5JCNSJFEqri/NWGsvJemqdFqDMwk+mISj3UzGYB5QKiulIskuJAlCoo0CXUwlKfSXuzScTOk+sUwGUVvDZOQ7S8jcQAxNAEhPaM3MYQGEZ6PeUkjK/kyyte37UvrAkG9/YHqD0/HKXINDHQRSvo1IwVa4WaqFjgNpKUaxShNBNEjaBYjBhee3i4Y1q9GKdZk+A5qx3Zu5O/DMF/+0QDA7SAiXUiFoAheZFrJspgVVUImW+/rmrYQ4JhqXb4MZWALlurvidQAIPY/N1LlDpxHclGjtFBVAIYUppDRrjVZBIqack7/OQpJhGYw5QxvSPR4IkPEGCgYmUiom81mAFKJQvNqLfYFNYJgbjS7EJPBiaZnU8JgD1vHVH76Rg/TysKdfjB7+vkUobAZAiDwIlYfP6ETaFpfQYvOErc/+spFl1tRAgKrjyK+4TQJwJUmAwusam8DYSoDAQKG0CQt7G2l7m6Z+zFr9XCJ75wRQjhYrdr7D8ColKc7GmjMbviiM0zYy4aQCFCIvNnwdr1itEEhZ5SkbtDEkyPGoKQP0LvhgahMYniCT+BqRgkuFSqxC0AqBQ9gjWVwCklApSme8Fd3VomhFxQwHKKNj0DwCxCIKBNCOEY6FhNUARMq6VJGGx78Xc1yKeM98aAlB6UcVNQsBfQmmwG7MkBhWMMUCtWsheIH6gbqtemPcJr1pMfY1QpukF5YuIv+llO4ATKlcs4/jWjxQolGfeuX0GrxxcAGUUbCwlwWO38ApxOpbHEXXEiS5Iv3P7PTz6sTdxd1QmpR89cpTg0BaPAEaXtUMTF6FTvacluR8szWqOeK7rlrkGpTc3L7QbOLo0tj5TamZ8YyErW2aAsMM5lpXpL60cOg2XserMDBCVaMjMGCv7X0y5XFZNmQHCUYF4Vqa/tHL4Kchk1ZkdIFaOXeWisoAzqtw2ynxJTl+Y4HbBiDOToW/PBCBC27vmShbAUx8A3xE/eA8HYP8hP3xzoBkqd/8MjcdEG2mgT5ROBVDe4BS486rBkN2/Jw5/dezdZ6bGgfyLDDsPHIPNVY2wfHM9+BC8zhA6BUBDBybDozeNgPTefOOuI/p3A/k3fYILXt98CBatr7U9ULYGqHfPePj7raMgKyPZ8Jf9+jF9QP4tWFsNxesMH4Q2TF7bAjTBnQZ/+cMIbMnM9WNmTnRBzoBEePDlfdAcwB6LzYK52jMqW3jFIHhoWo7p4CjijR/RE1699yzolWT6fKLCUvfVdjVo5uQhMGXcQBxn1K2DIRnLv2uEw0328/JsVYOKsOZcK4NjcXit4hA8/a7XYq762NkGoAuG94Zplw1irjiy100lCb7c0wT7sO/TovN7suyjGnjyHVxiYNNgmybur4WjoganqTkA23YdhmVr98Aeb9uKqNDphjPTEsB9RhL8dnQvODer+ykQLF5fDfNX29eDkwW2BUDz7z4bBKHjjmekZf0BEZ5d+T2srlRvln6qaQH5t+rzeph8Xir8aXLGCUfgxQ+r4fkP7A2OLQC6EJu2YQN7RWLQ4f33+4/AXfO3dZjeUcJ/ECTZEXh4SiZUeVps3fcJ1SHmNeiPU7JD5VGNl39dA3PLdqjmUUusPxqE+8s6zc6TVlVi6iQMHZAMab30LQSSaw4POGrA2TktpgDdceVgXbaRnQGWZk0XcZtniilAuVn6vj2zl7I3aza3v6Z4MQNocGYPXZ7bPt9R+PLHw5qKnK4ZYgbQ1RfqmwV+dtUPp6vtdekVMy9u2IAemgJKuJF02656zXyhGbY9ybw+I5RMWHz2igOtfamwhxbdMNcgHMvU37NsR5m0VG3vbY/PHvt7B/Q5dXa2HZU6fESBtHSYqJHADBCiwzX0mxCvPbRfc9ivIb41ya4UPoBQSuY3jRkgXKXBtSNaZUnBCavXHmF+8U7QMCLSLZ7dTDJ/3PZvPUDYxHGtusCFj5q2C+B5LnYIvABhE2c9QDgVzfV66zG+q1eiHfDBMzQ4XxQaiyYOaNv4PqMJW/zaLWQaf9vPKF14sWN+3v3CtC6cov479saVCFxj9TW4sFAr9Ot76hyOVhkz0mtxkJUrEMJ81gJ7P4iS/Sj0hayC7/YcxVWhKarFuyc6oU9KPBzSAaZC6IW1PiWq6zp2eDLkDkxSzbv/ENfnFiciyQFVBiqJ7AA5yQ88jvb7n3nhqjH9VURrSyqamAX/fOM7zXxKhoXrapSorutF2dpr7nZ5mfZeneAvSCC/zEyBvYmT4FsmjscLVe1vBBHXEGiFieena2VhTpeXWbkHqdcemfg3uGSYJ1CHwFyD2AECuoVHaLns7oPa3qeACxcfu3kkL6t2y8+4XHuLk7wIpZnTSRAF2NuuADoeMgPkXTZ2B3ZWufzPlRX6vp3jRrng4pw+OtTRnyXLlQBTL+qtWWDd1w2aeVQzUHq45vkc9cUTKgSYAZJp4pYPrnmAtZ/7QF4AohXkt2B2fi6c4dJujrRoKenzbhwADh0LVdZ8dUQpwnTF0wO/YCp4vBAXQJQ4dvMwl8suXqOPBMGxoZJZo2HS+RlcLJO7OWDJzCwYibsctMIHCE7NET4PDnls1eKjls4HEAib1IjrSXtr4wFobNLuE7XSQpBmXT8cnrvnHEhNjn4H5pXn9II3Z2XD2YP09a9KN9TqUUE9D4XN6hnUU7kAcjqdy9XJ60t9+vUqfRmP58oekAIrHrkY5hbkQl/sJ6kFefFi4aVpsPL+bHgcm7W0nvp6Fu/iMq0d+/m8N1muIDi5XmKuOR1ZgIxp/wsacczYrKlDYdLofjLJqIOv/hjUNbQNDVb5guBCEORhInmzVmp3fYCEMq3GZu2GZ3ZxL6bHYzZ/9Ba7B4fSjjYevfQRHIjDuYsG/cMiHkd9+683qiC7Xw8YIm9vjDKk4+Sf/JPDr3K5GoXWNd33LdvLDU6rMATWtF45/vBpg4wl4vwvB/+wonc9uxWaWzjHvcIoRncjT7E/+PJe7o6pwhWHeFYrcdYrN0ABwflvVuaR5eSBhcKntmDHUNv1jixrxP1jrx+EDTu1O8+6eOGRz9BE1+nKq5KJG6C6JRfsA0dcdANgKgLVN/rhmkc3QoNez06FVjRJj+HCkPe2RrdARY0+np/+nhGH0HIDJAtJhLhVasKypE2dWwGf7jTAzdVgXtMQhKIFu0H22gwNgrDCCHrcXpwsRJ8ZFf3jGpr2GyFQJI2z0HGYXZBzwgmITI+8lw+y0Bte2lgLxR/WmHHABdcRZKHyGwKQTDAjf+N2EFuMX5R2XNrzslPhgd8Pg9491afBtQA6WO+HdyoPw9tb6kCuPaYECk94ivMeMoK2YQBlFpaPp4FjG4wQSo1GemoizLx6COQOSoGU7nHyZFhY9vYAkudzKn84Cut3HIUteDUz4LcnCP6kft4l2YZ8l8O145Q8I3+DB8/H5hssi1KGgX2TcANYDxiQlgQDcTDV0yhAbUMADrae1xOAvbVtHdgoyTJnx2Oal3mL84qYCUQU5O6ohtIjJOEBCoGy0Gdmx/fV4qZh/CkhdI+q8syqK4JDRdExz0h++r+oOrh6Sse8RAUn3/i8Dj62zULo2zWLcnYZKZ+hALUK5ox7wEgBOwstufYQUXjEaHkNB8i39JIXweGMbmmN0VrFht4SM/6Pg+EAybaRHIn5nJsfYmNidq4tAiQ8yF6845KmAFS9dMxacMZ/2jHb0yyFwkMHi4eZMuxhCkCy+b2J3X4NDoe1Pm4scKdQgZ1SwwaMI1UwDSAoPr+JOuKLIhmeTvfoGDS2SPQGM3UyDyCUGh2G12hc4gdmKhBL2oSSu+pK3KaMQSp6GTqSoBANv1KScfOGBvxHTz3Cn5tzZ1VHFaez38Tp7KnmaHGSqqk1qI0NoTTOcTkA3yLHkyLbIrbPn5B0ixWSWAAQNnVLxn0qxHe71wqFzOaBiygbAgKdWDc/m3PJqT5JLQFIFuXg0ovmQ1zSC/rEsmcubNZEItLJtQvc31kloWUAyQp5l108E5wJpk9JmGY8Ard4StwbTaPfDmFLAZL5e0vHXYqd2K/akcXWjyRKb/cudJdaLaTlAMkKekvHu7EmfWu1sqz8sL9zt6/YXcJanqdcTACSBcaaNKJTgETpfTgB9xyPkXnKxgygEyA54rfxKGBWWfTWcBkjLfQUu58xi4ceujEFSBbQWzb+XKxJa/QIa1Ue9NYCOLtzTSy+OZE6xhwgWSBs7iaBM/FpO0xRYM3xAnVc4i0e9V6ksWJxb8FQj3610gu3XEbEn98HSWQ+vYhnqAedgQ04rzPVrKkD/ZY4mdNWAMlipeeXuwgRKyHoH3hSTP0xVoBwWfg838K8R/Vzsian7QBS1E4v2PQWEZunRHscfbQA4ffmCP6r3ut8C90fKrztdLXFN6g9g/hKx14L8d2LQCD4cpsV6Da/UxhlV3BkrW1bgxRIMqZ/PBJEsgqCLUOUZ2pXvTUInYG/ehfmzVajZYc02wOkGCmjsHw6CQaeozTYtpVOSYi4agGEfZu3SDBulmfRyJ8iitryttMApFgP14C/QgPNN+I/o2lX9g4BorSKgmOGtzh3vUKrM1zbVdLugve9ozLT2dz0Lnp650XKegpAlDZJRJjny8x9CuYQk7YzREph3H2nBEhRX+43CVLzCir6eyvPwgGia1pEuM3sdQMKbzOunRogxSBpRRWTHKKEC/fFYUJSqnzI01YcSHvHV5y3XcnTde2yQJcFuizQZYEuC3RZIDoL/B81p2GolmcSQwAAAABJRU5ErkJggg=="/></defs></svg> Secure AI Framework</span> </div> </div> </div> </a> </div> </div> </section> <section class="gemini-space-d180"> <section class="gemini-landing-boost-productivity"> <div class="gemini-layout-max-width gemini-layout-grid"> <div class="gemini-section-cta gemini-section-header gemini-space-d72 gemini-default" style=""> <article class="gemini-cta " data-viewport="once" data-viewport-threshold="0.3" > <div class="gemini-section gemini-section__subtitle"> </div> <div class="gemini-section gemini-section__title"> <h2 class="gemini-type-d4" id="boost-productivity-with-ai-code-assistance" data-text="Boost productivity with AI code assistance" tabindex="-1">Boost productivity with AI code assistance</h2> </div> <div class="gemini-section gemini-section__copy"> </div> <div class="gemini-section gemini-section__buttons"> </div> </article> </div> <div class="gemini-tabs-component" data-viewport="in"> <ul class="gemini-tabs gemini-space-d24"> <li class="gemini-tab"> <button class="gemini-tab-button gemini-type-t1-medium" data-tab="agents" > <p>Agents</p> </button> </li> <li class="gemini-tab"> <button class="gemini-tab-button gemini-type-t1-medium" data-tab="analysis-and-insights" > <p>Analysis and insights</p> </button> </li> <li class="gemini-tab"> <button class="gemini-tab-button gemini-type-t1-medium" data-tab="code-generation" > <p>Code generation</p> </button> </li> <li class="gemini-tab"> <button class="gemini-tab-button gemini-type-t1-medium" data-tab="code-chat" > <p>Code chat</p> </button> </li> </ul> <div class="gemini-tabs-sections gemini-tabs-data"> <div data-tab="agents" hidden > <div class="gemini-productivity-section gemini-space-d24"> <div class="gemini-section-copy"> <h3 class="gemini-type-h3 gemini-space-d16" id="agents" data-text="Agents" tabindex="-1">Agents</h3> <p class="gemini-section-description gemini-type-b1">Gemini empowers you to be more productive by acting as your coding agent. It can plan and execute tasks, freeing you to focus on what matters most.</p> </div> <div class="gemini-section-media"> <div class="gemini-media-inner"> <picture> <img src="/static/images/landing/productivity/agent-image.png"> </picture> </div> </div> </div> <div class="gemini-section-partners"> <div class="gemini-partner-list"> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="http://labs.google.com/jules" data-category="content_click" data-label="http://labs.google.com/jules" data-action="Jules"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Jules" src="/static/images/partners/jules.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Jules</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://colab.google/" data-category="content_click" data-label="https://colab.google/" data-action="Colab"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Colab" src="/static/images/partners/colab.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Colab</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> </div> </div> </div> <div data-tab="analysis-and-insights" hidden > <div class="gemini-productivity-section gemini-space-d24"> <div class="gemini-section-copy"> <h3 class="gemini-type-h3 gemini-space-d16" id="analysis-and-insights" data-text="Analysis and insights" tabindex="-1">Analysis and insights</h3> <p class="gemini-section-description gemini-type-b1">Improve code quality and fix issues with code analysis. Get insights, suggestions, and code snippets within your existing development environment.</p> </div> <div class="gemini-section-media"> <div class="gemini-media-inner"> <picture> <img src="/static/images/landing/productivity/analysis-image.png"> </picture> </div> </div> </div> <div class="gemini-section-partners"> <div class="gemini-partner-list"> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://developer.android.com/gemini-in-android" data-category="content_click" data-label="https://developer.android.com/gemini-in-android" data-action="Android Studio"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Android Studio" src="/static/images/partners/android-studio.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Android Studio</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://developer.chrome.com/docs/devtools/console/understand-messages" data-category="content_click" data-label="https://developer.chrome.com/docs/devtools/console/understand-messages" data-action="Chrome DevTools"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Chrome Devtools" src="/static/images/partners/logo-chrome-devtools.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Chrome DevTools</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://firebase.google.com/products/generative-ai" data-category="content_click" data-label="https://firebase.google.com/products/generative-ai" data-action="Firebase"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Firebase" src="/static/images/partners/firebase-icon.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Firebase</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://cloud.google.com/products/gemini/code-assist" data-category="content_click" data-label="https://cloud.google.com/products/gemini/code-assist" data-action="Google Cloud"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Google Cloud" src="/static/images/partners/logo-gcloud.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Google Cloud</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://plugins.jetbrains.com/plugin/8079-gemini--google-cloud-code" data-category="content_click" data-label="https://plugins.jetbrains.com/plugin/8079-gemini--google-cloud-code" data-action="JetBrains IDEs"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for JetBrains IDEs" src="/static/images/partners/logo-intellij.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">JetBrains IDEs</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode" data-category="content_click" data-label="https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode" data-action="VS Code"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Vs Code" src="/static/images/partners/logo-vscode.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">VS Code</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> </div> </div> </div> <div data-tab="code-generation" hidden > <div class="gemini-productivity-section gemini-space-d24"> <div class="gemini-section-copy"> <h3 class="gemini-type-h3 gemini-space-d16" id="code-generation" data-text="Code generation" tabindex="-1">Code generation</h3> <p class="gemini-section-description gemini-type-b1">Gemini adds AI-powered code completion with natural language understanding to create entire code blocks from your descriptions, revolutionizing your development workflow.</p> </div> <div class="gemini-section-media"> <div class="gemini-media-inner"> <picture> <img src="/static/images/landing/productivity/code-generation-image.png"> </picture> </div> </div> </div> <div class="gemini-section-partners"> <div class="gemini-partner-list"> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://developer.android.com/gemini-in-android" data-category="content_click" data-label="https://developer.android.com/gemini-in-android" data-action="Android Studio"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Android Studio" src="/static/images/partners/android-studio.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Android Studio</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://colab.google/" data-category="content_click" data-label="https://colab.google/" data-action="Colab"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Colab" src="/static/images/partners/colab.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Colab</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://firebase.google.com/products/generative-ai" data-category="content_click" data-label="https://firebase.google.com/products/generative-ai" data-action="Firebase"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Firebase" src="/static/images/partners/firebase-icon.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Firebase</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://cloud.google.com/products/gemini/code-assist" data-category="content_click" data-label="https://cloud.google.com/products/gemini/code-assist" data-action="Google Cloud"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Google Cloud" src="/static/images/partners/logo-gcloud.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Google Cloud</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://plugins.jetbrains.com/plugin/8079-gemini--google-cloud-code" data-category="content_click" data-label="https://plugins.jetbrains.com/plugin/8079-gemini--google-cloud-code" data-action="JetBrains IDEs"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for JetBrains IDEs" src="/static/images/partners/logo-intellij.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">JetBrains IDEs</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://developers.google.com/idx/guides/code-with-idx-ai" data-category="content_click" data-label="https://developers.google.com/idx/guides/code-with-idx-ai" data-action="Project IDX"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Project IDX" src="/static/images/partners/idx.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Project IDX</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode" data-category="content_click" data-label="https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode" data-action="VS Code"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Vs Code" src="/static/images/partners/logo-vscode.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">VS Code</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> </div> </div> </div> <div data-tab="code-chat" hidden > <div class="gemini-productivity-section gemini-space-d24"> <div class="gemini-section-copy"> <h3 class="gemini-type-h3 gemini-space-d16" id="code-chat" data-text="Code chat" tabindex="-1">Code chat</h3> <p class="gemini-section-description gemini-type-b1">Ask development questions and receive responses that help you reduce errors, solve problems, and become a better developer. Gemini understands the context of your environment to give you the best responses for your questions.</p> </div> <div class="gemini-section-media"> <div class="gemini-media-inner"> <picture> <img src="/static/images/landing/productivity/code-chat-image.png"> </picture> </div> </div> </div> <div class="gemini-section-partners"> <div class="gemini-partner-list"> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://developer.android.com/gemini-in-android" data-category="content_click" data-label="https://developer.android.com/gemini-in-android" data-action="Android Studio"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Android Studio" src="/static/images/partners/android-studio.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Android Studio</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://colab.google/" data-category="content_click" data-label="https://colab.google/" data-action="Colab"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Colab" src="/static/images/partners/colab.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Colab</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://firebase.google.com/products/generative-ai" data-category="content_click" data-label="https://firebase.google.com/products/generative-ai" data-action="Firebase"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Firebase" src="/static/images/partners/firebase-icon.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Firebase</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://cloud.google.com/products/gemini/code-assist" data-category="content_click" data-label="https://cloud.google.com/products/gemini/code-assist" data-action="Google Cloud"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Google Cloud" src="/static/images/partners/logo-gcloud.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Google Cloud</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://plugins.jetbrains.com/plugin/8079-gemini--google-cloud-code" data-category="content_click" data-label="https://plugins.jetbrains.com/plugin/8079-gemini--google-cloud-code" data-action="JetBrains IDEs"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for JetBrains IDEs" src="/static/images/partners/logo-intellij.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">JetBrains IDEs</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://developers.google.com/idx/guides/code-with-idx-ai" data-category="content_click" data-label="https://developers.google.com/idx/guides/code-with-idx-ai" data-action="Project IDX"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Project IDX" src="/static/images/partners/idx.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">Project IDX</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> <a class="gemini-partner-item gc-analytics-event gemini-reset-link" href="https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode" data-category="content_click" data-label="https://marketplace.visualstudio.com/items?itemName=GoogleCloudTools.cloudcode" data-action="VS Code"> <article class="gemini-item gemini-link gemini-dark"> <div class="gemini-sparks" inert> <span class="gemini-spark"></span> </div> <div class="gemini-content"> <img alt="Partner logo for Vs Code" src="/static/images/partners/logo-vscode.svg"> <div class="gemini-label gemini-type-t3"> <span class="gemini-text">VS Code</span> <svg class="gemini-arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="#fff" d="m1.13 7.674 5.266-5.266V7.01c0 .368.302.67.67.67a.664.664 0 0 0 .664-.665V.801a.664.664 0 0 0-.665-.665H.852a.664.664 0 1 0 0 1.33h4.601L.187 6.73a.669.669 0 0 0 0 .943c.26.26.684.26.943 0Z"/></svg> </div> </div> </article> </a> </div> </div> </div> </div> </div> </div> </section> </section> <section class="gemini-space-d88"> <section class="gemini-developer-showcase"> <div class="gemini-layout-max-width"> <div class="gemini-section-cta gemini-default" style=""> <article class="gemini-cta " data-viewport="once" data-viewport-threshold="0.3" > <div class="gemini-section gemini-section__subtitle"> </div> <div class="gemini-section gemini-section__title"> <h2 class="gemini-space-d64 gemini-type-d4" id="explore-apps-built-with-the-gemini-api" data-text="Explore apps built with the Gemini API" tabindex="-1">Explore apps built with the Gemini API</h2> </div> <div class="gemini-section gemini-section__copy"> </div> <div class="gemini-section gemini-section__buttons"> </div> </article> </div> </div> <div class="gemini-showcase-slider" data-viewport="in"> <devsite-carousel data-items-per-slide="auto"> <div role="list"> <div class="gemini-showcase-slide" role="listitem"> <div class="gemini-slide-media-wrapper"> <div class="gemini-slide-media"> <img src="/static/images/showcase/tldraw/thumbnail.jpg" alt="Tldraw showcase preview"> </div> </div> <div class="gemini-slide-content"> <div class="gemini-slide-copy"> <p class="gemini-type-t1 gemini-space-d12">Tldraw</p> <p class="gemini-type-b1 gemini-slide-excerpt">Prototyping a new natural language computing experience on an infinite canvas with Gemini 2.0</p> </div> <div class="gemini-slide-cta"> <a class="gemini-btn gemini-primary gemini-type-btn gc-analytics-event" data-category="content_click" href="/showcase/tldraw" rel="" > <span>View</span> </a> </div> </div> </div> <div class="gemini-showcase-slide" role="listitem"> <div class="gemini-slide-media-wrapper"> <div class="gemini-slide-media"> <img src="/static/images/showcase/rooms/thumbnail.jpg" alt="Rooms showcase preview"> </div> </div> <div class="gemini-slide-content"> <div class="gemini-slide-copy"> <p class="gemini-type-t1 gemini-space-d12">Rooms</p> <p class="gemini-type-b1 gemini-slide-excerpt">Unlocking richer avatar interactions with Gemini 2.0 text and audio capabilities</p> </div> <div class="gemini-slide-cta"> <a class="gemini-btn gemini-primary gemini-type-btn gc-analytics-event" data-category="content_click" href="/showcase/rooms" rel="" > <span>View</span> </a> </div> </div> </div> <div class="gemini-showcase-slide" role="listitem"> <div class="gemini-slide-media-wrapper"> <div class="gemini-slide-media"> <img src="/static/images/showcase/toonsutra/thumbnail.jpg" alt="Toonsutra showcase preview"> </div> </div> <div class="gemini-slide-content"> <div class="gemini-slide-copy"> <p class="gemini-type-t1 gemini-space-d12">Toonsutra</p> <p class="gemini-type-b1 gemini-slide-excerpt">Leveraging contextual multilingual translation abilities of Gemini 2.0 to make comics and webtoons accessible to audiences in India across regional languages.</p> </div> <div class="gemini-slide-cta"> <a class="gemini-btn gemini-primary gemini-type-btn gc-analytics-event" data-category="content_click" href="/showcase/toonsutra" rel="" > <span>View</span> </a> </div> </div> </div> <div class="gemini-showcase-slide" role="listitem"> <div class="gemini-slide-media-wrapper"> <div class="gemini-slide-media"> <img src="/static/images/showcase/viggle/thumbnail.jpg" alt="Viggle showcase preview"> </div> </div> <div class="gemini-slide-content"> <div class="gemini-slide-copy"> <p class="gemini-type-t1 gemini-space-d12">Viggle</p> <p class="gemini-type-b1 gemini-slide-excerpt">Experimenting with Gemini 2.0 to create virtual characters and audio narration for their AI powered video platform</p> </div> <div class="gemini-slide-cta"> <a class="gemini-btn gemini-primary gemini-type-btn gc-analytics-event" data-category="content_click" href="/showcase/viggle" rel="" > <span>View</span> </a> </div> </div> </div> <div class="gemini-showcase-slide" role="listitem"> <div class="gemini-slide-media-wrapper"> <div class="gemini-slide-media"> <img src="/static/images/showcase/sublayer/thumbnail.jpg" alt="Sublayer showcase preview"> </div> </div> <div class="gemini-slide-content"> <div class="gemini-slide-copy"> <p class="gemini-type-t1 gemini-space-d12">Sublayer</p> <p class="gemini-type-b1 gemini-slide-excerpt">See how the Ruby-based AI agent framework empowers developer teams to be more productive with the power of Gemini models.</p> </div> <div class="gemini-slide-cta"> <a class="gemini-btn gemini-primary gemini-type-btn gc-analytics-event" data-category="content_click" href="/showcase/sublayer" rel="" > <span>View</span> </a> </div> </div> </div> <div class="gemini-showcase-slide" role="listitem"> <div class="gemini-slide-media-wrapper"> <div class="gemini-slide-media"> <img src="/static/images/showcase/sourcegraph/thumbnail.jpg" alt="Sourcegraph showcase preview"> </div> </div> <div class="gemini-slide-content"> <div class="gemini-slide-copy"> <p class="gemini-type-t1 gemini-space-d12">Sourcegraph</p> <p class="gemini-type-b1 gemini-slide-excerpt">Learn how Cody AI saw big quality gains using Gemini's massive context window.</p> </div> <div class="gemini-slide-cta"> <a class="gemini-btn gemini-primary gemini-type-btn gc-analytics-event" data-category="content_click" href="/showcase/sourcegraph" rel="" > <span>View</span> </a> </div> </div> </div> <div class="gemini-showcase-slide" role="listitem"> <div class="gemini-slide-media-wrapper"> <div class="gemini-slide-media"> <img src="/static/images/showcase/agentops/thumbnail.jpg" alt="AgentOps showcase preview"> </div> </div> <div class="gemini-slide-content"> <div class="gemini-slide-copy"> <p class="gemini-type-t1 gemini-space-d12">AgentOps</p> <p class="gemini-type-b1 gemini-slide-excerpt">Explore how AgentOps provides cost-effective and powerful LLM-powered agent observability for enterprises using Gemini API.</p> </div> <div class="gemini-slide-cta"> <a class="gemini-btn gemini-primary gemini-type-btn gc-analytics-event" data-category="content_click" href="/showcase/agentops" rel="" > <span>View</span> </a> </div> </div> </div> </div> </devsite-carousel> </div> </section> </section> <section class="gemini-landing-community"> <div class="gemini-layer"> <div class="gemini-block gemini-block--start"> <div class="gemini-svg gemini-lottie-lines" data-lottie="/lottie/gemma/community-top.json" data-lottie-name="community-top"></div> </div> <div class="gemini-block gemini-block--end"> <div class="gemini-svg gemini-lottie-lines" data-lottie="/lottie/gemma/community-bottom.json" data-lottie-name="community-bottom"></div> </div> </div> <div class="gemini-section-hero"> <div class="gemini-section-cta gemini-default" style=""> <article class="gemini-cta " data-viewport="once" data-viewport-threshold="0.3" > <div class="gemini-section gemini-section__subtitle"> </div> <div class="gemini-section gemini-section__title"> <h2 class="gemini-type-d4 gemini-space-d24" id="join-the-community" data-text="Join the community" tabindex="-1">Join the community</h2> </div> <div class="gemini-section gemini-section__copy"> <p class="gemini-type-t1 gemini-space-d48">Tap into the power of our community forum. Get answers, build together, and be part of the conversation.</p> </div> <div class="gemini-section gemini-section__buttons"> <a class="gemini-btn gemini-primary gemini-type-btn gc-analytics-event" data-category="content_click" href="https://discuss.ai.google.dev/" rel="" > <span>Google AI Forum</span> </a> </div> </article> </div> </div> </section> </devsite-gemini-page> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Google AI for Developers" product-id="5292923" bucket="documentation" context="" version="t-devsite-webserver-20250311-r00-rc00.467585266104203283" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/touchicon-180-new.png" > <button> Need to tell us more? </button> </devsite-feedback> </template> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="sq" >Shqip</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-TC2MQKS8", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "marketing", "projectName": "Google AI for Developers", "signedIn": "False", "tenant": "googledevai", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="Db/csA+JzFiAFaKCw32J/kbcI0d0F+"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/js/app_loader.js', '[59,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861","https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai","https://googledevai-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/googledevai/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/favicon-new.png","https://www.gstatic.com/devrel-devsite/prod/v6bfb74446ce17cd0d3af9b93bf26e056161cb79c5a6475bd6a9c25286fcb7861/googledevai/images/lockup-new.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","ai.google.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Profiles__enable_completecodelab_endpoint","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_view_transitions","MiscFeatureFlags__enable_framebox_badge_methods","Cloud__enable_legacy_calculator_redirect","Profiles__enable_page_saving","Profiles__enable_awarding_url","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_dashboard_curated_recommendations","MiscFeatureFlags__enable_variable_operator","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloud_shell_fte_user_flow","OnSwitch__enable","Analytics__enable_clearcut_logging","MiscFeatureFlags__emergency_css","BookNav__enable_tenant_cache_key","Search__enable_dynamic_content_confidential_banner","Profiles__enable_release_notes_notifications","Cloud__enable_free_trial_server_call","Cloud__enable_cloud_dlp_service","CloudShell__cloud_code_overflow_menu","TpcFeatures__enable_unmirrored_page_left_nav","MiscFeatureFlags__developers_footer_image","Profiles__enable_recognition_badges","Profiles__enable_stripe_subscription_management","Experiments__reqs_query_experiments","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__enable_variable_operator_index_yaml","Profiles__enable_profile_collections","Search__enable_ai_eligibility_checks","Cloud__enable_cloudx_experiment_ids","Cloud__enable_cloudx_ping","Cloud__enable_llm_concierge_chat","Search__enable_suggestions_from_borg","Cloud__enable_cloud_shell","Concierge__enable_pushui","DevPro__enable_developer_subscriptions","MiscFeatureFlags__enable_explain_this_code","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_join_program_group_endpoint","CloudShell__cloud_shell_button","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_project_variables","Profiles__require_profile_eligibility_for_signin","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_cloud_facet_chat","Profiles__enable_completequiz_endpoint","Search__enable_page_map"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[59,"googledevai","Google AI for Developers","ai.google.dev",null,"googledevai-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,1,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1],[1,1,null,1,1]],null,[73,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,1,1,1,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme-new.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[44,2,4,6,7,12,14,15,17,18,20,21,22,23,28,29,32,37,39,40,43],null,[[],[1,1],null,1],[[null,null,null,null,null,["GTM-TC2MQKS8"],null,null,null,null,null,[["GTM-TC2MQKS8",1]],1]],null,4],null,null,1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Gemini Developer API | Gemma open models | Google AI for Developers