:root{--codelab-chevron-size:1rem;--codelab-preview-measure:46rem}.codelab>.ed-page{max-width:none}.codelab .ed-head{max-width:var(--ed-lead-measure)}.codelab .ed-head .practice-ed__steps{margin-bottom:var(--space-5)}.codelab .ed-section{margin-top:var(--space-8)}.codelab .practice-select__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.codelab .practice-select__grid>li{display:flex;min-width:0}.codelab .codelab-area-card{min-height:calc(var(--space-16) * 2);width:100%;height:100%;border-radius:var(--radius-control);font:inherit;text-align:start;cursor:pointer;color:inherit;transform:none}.codelab .codelab-area-card:focus-visible,.codelab .codelab-area-card:hover{transform:none}.codelab .codelab-area-card--selected{border-color:var(--color-brand-muted)}.codelab--home>.ed-page{padding:0}.codelab--home .ed-head{max-width:none;gap:var(--space-3);margin-bottom:var(--space-8)}.codelab-home__meta{margin:0;max-width:var(--measure-prose);color:var(--color-text-secondary);font-size:var(--lead-size);line-height:1.6}.codelab--home .practice-select__grid{gap:0 var(--space-8);margin:0;padding:0;list-style:none}.codelab--home .codelab-area-card{display:grid;align-content:start;gap:var(--space-3);min-height:0;padding:var(--space-5) var(--space-4);border:0;border-top:1px solid var(--color-border-soft);border-radius:0;background:transparent;box-shadow:none}.codelab--home .codelab-area-card--selected{background:color-mix(in srgb,var(--color-brand-soft) 35%,var(--color-surface))}.codelab--home .codelab-area-card:focus-visible{outline:2px solid var(--color-brand);outline-offset:var(--space-1)}.codelab-area-card__head,.codelab-preview__area-head{display:flex;align-items:center;gap:var(--space-3);min-width:0}.codelab-area-card__icon{flex:none;color:var(--color-brand)}.codelab-area-card__arrow{flex:none;margin-inline-start:auto;color:var(--color-text-muted)}.codelab .codelab-preview__area .ed-card__title,.codelab--home .ed-card__title{margin:0;font-size:var(--fs-body);line-height:1.5;overflow-wrap:anywhere}.codelab .codelab-level__head{margin:0}.codelab .codelab-levels{border-top:1px solid var(--color-border)}.codelab .codelab-level{margin:0;border-bottom:1px solid var(--color-border)}.codelab .codelab-level__trigger{display:flex;align-items:baseline;gap:var(--space-2);width:100%;padding:var(--space-4) 0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}.codelab .codelab-level__trigger:focus-visible{outline:none;box-shadow:var(--focus-ring)}.codelab .codelab-level__title{flex:none}.codelab .codelab-level__meta{color:var(--color-text-muted);font-size:var(--fs-caption);font-weight:var(--fw-regular)}.codelab .codelab-level__panel{padding:0 0 var(--space-3)}.codelab .codelab-level__chevron{flex:none;align-self:center;width:var(--codelab-chevron-size);height:var(--codelab-chevron-size);margin-left:auto;color:var(--color-text-muted);transition:transform var(--duration-base) ease}.codelab .codelab-level--open .codelab-level__chevron{transform:rotate(180deg)}.codelab .codelab-row{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-3);padding-bottom:var(--space-3);color:inherit;text-decoration:none}.codelab .codelab-row:focus-visible{outline:none;box-shadow:var(--focus-ring)}.codelab .codelab-row__copy{display:grid;gap:var(--space-1);min-width:0}.codelab .codelab-row__title{color:var(--color-text-primary);font-size:var(--fs-sm);font-weight:var(--fw-medium)}.codelab .codelab-row:hover .codelab-row__title{color:var(--color-brand)}.codelab .codelab-row__meta,.codelab .codelab-row__no{color:var(--color-text-muted);font-size:var(--fs-caption)}.codelab .codelab-row__no{flex:none;font-variant-numeric:tabular-nums}.codelab .codelab-row__desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--color-text-muted);font-size:var(--fs-caption)}.codelab .codelab-row__check,.codelab .codelab-row__open{flex:none;color:var(--color-text-muted)}.codelab .codelab-row__open{margin-left:auto;font-size:var(--fs-caption);white-space:nowrap}.codelab .codelab-back,.codelab .codelab-row:hover .codelab-row__open{color:var(--color-brand)}.codelab .codelab-back{display:inline-flex;align-items:center;min-height:2.75rem;padding:0;border:0;background:none;font-size:var(--fs-caption);font-weight:var(--fw-medium);text-decoration:none;cursor:pointer}.codelab .codelab-back:hover{text-decoration:underline}.codelab .codelab-back:focus-visible{outline:none;box-shadow:var(--focus-ring)}.account-signin-gate:has(>.codelab){width:100%;align-items:stretch;min-height:0;gap:var(--space-8);padding:0 0 var(--space-12)}.account-signin-gate:has(>.codelab)>.account-signin-gate__card{max-width:var(--codelab-preview-measure);margin:0;padding:0;border:0;background:transparent;text-align:start}.account-signin-gate:has(>.codelab) .signin-card__brand,.account-signin-gate:has(>.codelab) .signin-gate__eyebrow{display:none}.account-signin-gate:has(>.codelab) .signin-gate__title{margin:0}.account-signin-gate:has(>.codelab) .signin-gate__lead{margin-top:var(--space-3);font-size:var(--lead-size)}.account-signin-gate:has(>.codelab) .signin-card__action{width:auto;max-width:20rem}.account-signin-gate:has(>.codelab) .signin-gate__links{justify-content:flex-start}.codelab .codelab-preview{gap:var(--space-6);padding-top:var(--space-8);border-top:1px solid var(--color-border)}.codelab .codelab-guest__layout,.codelab .codelab-preview{display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0}.codelab .codelab-guest__layout{gap:var(--space-8);align-items:start}.codelab .codelab-guest__main{display:grid;gap:var(--space-8);min-width:0}.codelab .codelab-guest__side{min-width:0}@media (min-width:1024px){.codelab .codelab-guest__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.codelab .codelab-guest__side{position:sticky;top:calc(var(--header-height) + var(--space-4))}}.codelab .codelab-preview__intro{display:grid;gap:var(--space-2)}.codelab .codelab-preview__intro :where(h2,p){margin:0}.codelab,.codelab .codelab-guest__code,.codelab .codelab-guest__layout,.codelab .codelab-guest__main,.codelab .codelab-guest__side,.codelab .codelab-preview__area,.codelab .codelab-preview__cards,.codelab .codelab-preview__cards>li,.codelab .codelab-preview__intro,.codelab .codelab-preview__titles{min-width:0;max-width:100%}.codelab .codelab-preview__sample-title{min-width:0;overflow-wrap:anywhere}.codelab .codelab-preview__area{height:100%;padding:var(--space-4) 0;border:0;border-top:1px solid var(--color-border-soft);border-radius:0;background:transparent;box-shadow:none;transform:none}.codelab .codelab-preview__cards{gap:0 var(--space-6)}.codelab .codelab-preview__area{display:flex;flex-direction:column}.codelab .codelab-preview__area>.codelab-preview__samples{margin-top:auto;padding-top:var(--space-3)}.codelab-preview__samples{margin-top:var(--space-3)}.codelab-preview__samples>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:2.75rem;padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--fs-caption);cursor:pointer;list-style:none;transition:border-color var(--duration-fast) ease,color var(--duration-fast) ease}.codelab-preview__samples>summary:hover{border-color:var(--color-brand-muted);color:var(--color-brand)}.codelab-preview__samples>summary::-webkit-details-marker{display:none}.codelab-preview__samples>summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}.codelab-preview__samples[open]>summary>svg{transform:rotate(180deg)}.codelab .codelab-preview__area .ed-card__meta{margin-top:0;padding-top:0}.codelab .codelab-preview__area .ed-card__text{margin-top:var(--space-2);margin-bottom:0}.codelab .codelab-preview__titles{display:grid;margin:var(--space-3) 0 0;padding:0;list-style:none;font-size:var(--fs-caption)}.codelab .codelab-preview__sample{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);min-width:0;padding:var(--space-2) 0;border-top:1px solid var(--color-border-soft)}.codelab .codelab-preview__sample-title{color:var(--color-text-primary)}.codelab .codelab-preview__sample-meta{flex:none;color:var(--color-text-muted);white-space:nowrap}.codelab .codelab-guest__side-title{margin:0 0 var(--space-3);font-size:var(--fs-body);line-height:1.5}.codelab .codelab-guest__code{margin-bottom:0}@media (max-width:767px){.codelab .practice-select__grid{grid-template-columns:1fr}.account-signin-gate:has(>.codelab){gap:var(--space-6);padding-block:0 var(--space-10)}.codelab .codelab-preview{padding-top:var(--space-6)}}@media (prefers-reduced-motion:reduce){.codelab .codelab-level__chevron{transition:none}.codelab .codelab-level--open .codelab-level__chevron{transform:none}}