html{font-family:var(--font-body);font-size:var(--font-size-body-1);line-height:1.5;font-weight:var(--font-weight-body);color:var(--page-text);background:radial-gradient(circle at top left, color-mix(in srgb, var(--page-surface-decorative) 100%, transparent), transparent 34%), radial-gradient(circle at bottom right, color-mix(in srgb, var(--page-surface-active-secondary) 28%, transparent), transparent 30%), linear-gradient(180deg, var(--color-white) 0%, var(--page-surface-decorative) 100%);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;color:var(--page-text);margin:0}main{display:block}#app{min-height:100vh;padding:var(--space-m);display:block}.shell{gap:var(--space-m);width:min(100%,1160px);margin:0 auto;display:grid}.section-card{border:1px solid var(--page-border);border-radius:var(--radius-block);background:var(--page-surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--page-shadow);padding:56px}.hero{gap:var(--space-m);grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);align-items:end;display:grid}.hero-copy{min-width:0}.eyebrow{font-family:var(--font-label);font-size:var(--font-size-body-4);font-weight:var(--font-weight-label-medium);letter-spacing:.18em;text-transform:uppercase;color:var(--color-secondary-5);margin:0 0 16px}h1{max-width:12ch;font-family:var(--font-display);font-size:var(--font-size-display-1);letter-spacing:-.05em;margin:0;line-height:.96}h2,h3,p{margin:0}h2{font-family:var(--font-title);font-size:var(--font-size-title-2);line-height:1.1;font-weight:var(--font-weight-title-bold)}h3{font-family:var(--font-title);font-size:var(--font-size-title-3);line-height:1.15;font-weight:var(--font-weight-title-medium)}.intro{max-width:44rem;margin:var(--space-m) 0 0;font-size:var(--font-size-body-1);color:var(--page-text-variant)}.actions{margin-top:var(--space-l);align-items:center;gap:var(--space-s);flex-wrap:wrap;display:flex}.hero-aside{min-height:100%}.metric-card{gap:var(--space-s);--md-filled-card-container-color:var(--page-surface-strong);padding:28px;display:grid}.metric-label,.type-label,.carousel-kicker,.section-copy,code{color:var(--page-text-variant);font-size:var(--font-size-body-3)}.metric-value{font-family:var(--font-title);font-size:var(--font-size-title-1);font-weight:var(--font-weight-title-bold)}.metric-copy{max-width:28ch}.showcase-grid{gap:var(--space-m);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.full-span{grid-column:1/-1}.section-heading{gap:var(--space-xs);margin-bottom:var(--space-m);display:grid}.token-grid{gap:var(--space-s);grid-template-columns:minmax(0,1fr);display:grid}.token-card{align-items:center;column-gap:var(--space-s);border-radius:var(--radius-interactive);background:var(--page-surface-strong);border:1px solid var(--page-border);grid-template-columns:96px minmax(0,1fr);row-gap:2px;padding:18px;display:grid}.token-swatch{border-radius:calc(var(--radius-small) * 1.5);border:1px solid var(--page-border);grid-row:1/span 2;width:100%;height:72px}.token-swatch-dark{border-color:var(--page-border)}code{font-family:var(--font-body)}.type-stack,.control-stack,.feedback-stack{gap:var(--space-m);display:grid}.type-display{font-family:var(--font-display);font-size:var(--font-size-display-2);line-height:1}.type-title{font-family:var(--font-title);font-size:var(--font-size-title-1);font-weight:var(--font-weight-title-bold)}.control-line span,.form-actions,.section-heading,.token-card strong{font-family:var(--font-label)}.control-line span,.token-card strong{font-weight:var(--font-weight-label-medium)}.intro,.metric-copy,.type-body,.progress-copy,.section-copy,.carousel-card p,.token-card code{font-family:var(--font-body);font-weight:var(--font-weight-body)}.type-body{font-size:var(--font-size-body-1)}.component-row{align-items:center;gap:var(--space-s);display:flex}.wrap{flex-wrap:wrap}.control-line{color:var(--page-text);align-items:center;gap:12px;display:inline-flex}.radio-group,.form-stack{gap:var(--space-s);display:grid}.demo-form{gap:var(--space-s);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;display:grid}.full-span-row{grid-column:1/-1}.form-actions{gap:var(--space-s);flex-wrap:wrap;display:flex}.progress-inline{align-items:center;gap:var(--space-s);display:flex}.progress-copy{color:var(--page-text-variant)}.carousel{gap:var(--space-s);padding-bottom:var(--space-xs);scroll-snap-type:x proximity;grid-auto-columns:minmax(260px,320px);grid-auto-flow:column;display:grid;overflow-x:auto}.carousel-card{align-content:start;gap:var(--space-s);scroll-snap-align:start;min-height:220px;padding:24px;display:grid}.accent-card{--md-filled-card-container-color:color-mix(in srgb, var(--page-promo-surface) 72%, var(--color-white))}.usage-grid{gap:var(--space-s);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.usage-card{align-content:start;gap:var(--space-s);min-height:220px;padding:24px;display:grid}.usage-tag{border-radius:var(--radius-button);width:fit-content;font-family:var(--font-label);font-size:var(--font-size-body-4);font-weight:var(--font-weight-label-bold);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;display:inline-flex}.promotion-card{--md-filled-card-container-color:color-mix(in srgb, var(--page-promo-surface) 72%, var(--color-white))}.promotion-card .usage-tag{background:var(--page-promo);color:var(--color-white)}.error-card{--md-outlined-card-outline-color:var(--page-error)}.error-card .usage-tag{background:var(--page-error-surface);color:var(--page-error)}md-tabs{margin-top:var(--space-m)}md-outlined-text-field,md-filled-text-field,md-outlined-select,md-linear-progress{width:100%}md-circular-progress{flex:none}@media (width<=720px){#app{padding:var(--space-s)}.section-card{padding:32px 24px}.hero,.showcase-grid,.demo-form,.token-grid,.usage-grid,.token-card{grid-template-columns:1fr}.token-swatch{grid-row:auto}.intro{font-size:var(--font-size-body-2)}.progress-inline{align-items:flex-start}}
