html body .codelab--home .practice-select__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);margin:0;padding:0;list-style:none}@media (min-width:640px){html body .codelab--home .practice-select__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){html body .codelab--home .practice-select__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}html body .codelab--home .codelab-area-card{gap:var(--space-3);min-height:0;box-shadow:none;color:inherit;font:inherit;text-align:start;cursor:pointer;transform:none;transition:transform var(--duration-base) ease,border-color var(--duration-base) ease,box-shadow var(--duration-base) ease}html body .codelab--home .codelab-area-card:hover{transform:translateY(-2px);border-color:var(--color-brand-muted);box-shadow:0 10px 28px color-mix(in srgb,var(--color-brand) 14%,transparent)}html body .codelab--home .codelab-area-card:focus-visible{outline:2px solid var(--color-brand);outline-offset:var(--space-1);border-color:var(--color-brand-muted)}@media (max-width:639px){html body .codelab--home .codelab-area-card{padding:var(--space-4)}}@media (prefers-reduced-motion:reduce){html body .codelab--home .codelab-area-card{transition:none}html body .codelab--home .codelab-area-card:focus-visible,html body .codelab--home .codelab-area-card:hover{transform:none}}html body .codelab--home .codelab-area-card .ed-card__title{font-weight:var(--fw-bold)}html body .codelab .codelab-preview__area .codelab-area__desc,html body .codelab--home .codelab-area__desc{-webkit-line-clamp:3}html body .codelab .codelab-preview__area .codelab-area__top,html body .codelab--home .codelab-area__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}html body .codelab .codelab-preview__area .codelab-area__tile,html body .codelab--home .codelab-area__tile{width:3rem;height:3rem}html body .codelab .codelab-preview__area .codelab-area__pill,html body .codelab--home .codelab-area__pill{flex:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-brand-soft);color:var(--color-brand);font-size:var(--fs-label);font-weight:var(--fw-bold);white-space:nowrap}html body .codelab .codelab-preview__area .codelab-area__stats,html body .codelab--home .codelab-area__stats{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:0;color:var(--color-text-secondary);font-size:var(--fs-caption)}html body .codelab .codelab-preview__area .codelab-area__stat,html body .codelab--home .codelab-area__stat{display:inline-flex;align-items:center;gap:var(--space-1)}html body .codelab--home .codelab-area__progress{display:grid;gap:var(--space-1)}html body .codelab--home .codelab-area__progress-text{color:var(--color-text-muted);font-size:var(--fs-caption)}html body .codelab--home .codelab-area__foot{display:flex;justify-content:flex-end;padding-top:var(--space-3)}html body .codelab--home .codelab-area__open{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--color-brand);font-size:var(--fs-caption);font-weight:var(--fw-medium)}html body .codelab--home:not(.codelab--guest) .ed-head{display:grid;gap:var(--space-3);margin-bottom:var(--space-6)}html body .codelab--home .ed-head .practice-ed__steps{position:absolute;inline-size:0;block-size:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%);margin:0;padding:0}html body .codelab--home:not(.codelab--guest) .ed-section{display:grid;gap:var(--space-6);align-content:start;margin-top:0}html body .codelab--home .practice-select__grid{align-items:stretch}html body .codelab--home .practice-select__grid>li{display:flex;min-width:0}html body .codelab--home .codelab-area-card{display:flex;flex-direction:column;gap:var(--space-4);width:100%;height:100%;padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-panel);background:var(--surface-card)}html body .codelab--home .codelab-area-card .ed-card__title{margin:0;font-size:var(--fs-h3)}html body .codelab--home .codelab-area-card .codelab-area__desc,html body .codelab--home.codelab--guest .codelab-preview__area .codelab-area__desc{margin:0;color:var(--color-text-secondary);font-size:var(--fs-sm)}html body .codelab--home .codelab-area__stats,html body .codelab--home.codelab--guest .codelab-preview__area .codelab-area__stats{color:var(--color-text-secondary);font-size:var(--fs-caption)}html body .codelab--home .codelab-area__foot{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--color-border-soft)}html body .codelab--home.codelab--guest .codelab-preview__cards{display:grid;gap:var(--space-4)}html body .codelab--home.codelab--guest .codelab-preview__area{display:flex;flex-direction:column;gap:var(--space-4);height:100%;margin:0;padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-panel);background:var(--surface-card)}html body .codelab--home.codelab--guest .codelab-preview__area .ed-card__title{margin:0;font-size:var(--fs-h3)}html body .codelab--home.codelab--guest .codelab-preview__titles{margin:0;padding:0;list-style:none}html body .codelab--home.codelab--guest .codelab-preview__sample{align-items:center;min-height:2.75rem;padding:var(--space-2) 0}html body .codelab--home.codelab--guest .codelab-preview__sample-meta{flex:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-brand-soft);color:var(--color-brand);font-size:var(--fs-caption);font-weight:var(--fw-semibold);white-space:nowrap}html body .codelab--home.codelab--guest .codelab-preview__area>.codelab-preview__samples{margin-top:auto}html body .codelab--home.codelab--guest .codelab-guest__code{min-width:0;max-width:100%}html body .codelab--home.codelab--guest .codelab-guest__code .topic-code-block__pre{overflow-x:auto;overflow-y:auto;max-width:100%;max-height:calc(var(--space-16) * 6);font-size:var(--fs-sm)}@media (max-width:639px){html body .codelab--home .codelab-area-card,html body .codelab--home.codelab--guest .codelab-preview__area{padding:var(--space-4)}}@media (min-width:1024px){html body .codelab--home.codelab--guest .codelab-guest__layout{grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"head side" "preview preview";align-items:start}html body .codelab--home.codelab--guest .codelab-guest__main{display:contents}html body .codelab--home.codelab--guest .codelab-guest__main>.ed-head{grid-area:head;min-width:0}html body .codelab--home.codelab--guest .codelab-guest__main>.codelab-preview{grid-area:preview;min-width:0}html body .codelab--home.codelab--guest .codelab-guest__side{grid-area:side;min-width:0}html body .codelab--home.codelab--guest .codelab-preview__cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}html body .codelab--home.codelab--guest .codelab-preview__cards>li{display:flex;min-width:0}html body .codelab--home.codelab--guest .codelab-preview__cards>li>.codelab-preview__area{height:auto}html body .codelab--home.codelab--guest .codelab-preview__sample-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;overflow-wrap:anywhere}html body .codelab--home.codelab--guest .codelab-preview__samples>summary{white-space:nowrap}html body .codelab--home.codelab--guest .codelab-guest__side{position:static}html body .codelab--home.codelab--guest .codelab-guest__code .topic-code-block__pre{max-height:none}}html body .codelab--home.codelab--guest .codelab-preview__error{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-panel);background:var(--color-surface)}html body .codelab--home.codelab--guest .codelab-preview__error-text{margin:0;color:var(--color-text-secondary);font-size:var(--fs-caption)}