.sd-category-hero-development{--sd-space-category-hero-development-overhang-top:70px;--sd-space-category-hero-development-strip-pad:calc(var(--sd-space-1) + 0.5px) var(--sd-space-3);--sd-space-category-hero-development-footer-pad:var(--sd-space-2) calc(var(--sd-space-4) - 1px);--sd-space-category-hero-development-action-pad:calc(var(--sd-space-1) - 2px) var(--sd-space-3);--sd-space-category-hero-development-action-primary-pad:calc(var(--sd-space-1) - 3px) var(--sd-space-3);--sd-space-category-hero-development-cursor-pad:calc(var(--sd-space-1) - 2px) calc(var(--sd-space-3) - 1px);--sd-font-category-hero-development-code:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;--sd-type-category-hero-development-code-line-height:23px;--sd-type-category-hero-development-domain-label-size:11px;--sd-type-category-hero-development-domain-url-size:10px;--sd-type-category-hero-development-domain-meta-size:8px;--sd-type-category-hero-development-action-size:7px;--sd-type-category-hero-development-action-publish-weight:800;--sd-type-category-hero-development-panel-line-height:20px;--sd-category-hero-development-frame-shadow:0 1px 2px rgba(0,0,0,0.05);--sd-category-hero-development-seal-blue:#0084ff;--sd-category-hero-development-icon-grey:#737373;position:relative;flex:0 1 587px;min-width:0;max-width:587px;padding-top:var(--sd-space-category-hero-development-overhang-top);padding-bottom:var(--sd-space-12)}.sd-category-hero-development__stage{position:relative}.sd-category-hero-development__frame{position:relative;width:100%;border:1px solid var(--sd-color-border);border-radius:var(--sd-radius-card-12);overflow:hidden;background:var(--sd-color-background);box-shadow:var(--sd-category-hero-development-frame-shadow);isolation:isolate}.sd-category-hero-development__shot{position:relative;width:100%;aspect-ratio:585/372}.sd-category-hero-development__shot-img{object-fit:cover;object-position:top center}.sd-category-hero-development .sd-browser-chrome__url{font-size:var(--sd-type-caption-size);font-weight:var(--sd-type-paragraph-xs-regular-weight);line-height:var(--sd-type-browser-chrome-url-compact-line-height);letter-spacing:var(--sd-type-letter-spacing-body)}.sd-category-hero-development__code-card{position:absolute;bottom:-48px;left:-48px;z-index:2;width:240px;overflow:hidden;border-radius:var(--sd-radius-card-8);background:var(--sd-color-background)}.sd-category-hero-development__code-header{height:32px;background:var(--sd-color-page-muted)}.sd-category-hero-development__code-body{display:flex;flex-direction:column;gap:var(--sd-space-1);padding:var(--sd-space-3) var(--sd-space-4)}.sd-category-hero-development__code-row{display:flex;gap:var(--sd-space-4);font-family:var(--sd-font-category-hero-development-code);font-size:var(--sd-type-caption-size);font-weight:var(--sd-type-paragraph-xs-regular-weight);line-height:var(--sd-type-category-hero-development-code-line-height);letter-spacing:var(--sd-type-letter-spacing-body);white-space:nowrap}.sd-category-hero-development__code-num{flex:none;color:var(--sd-color-muted)}.sd-category-hero-development__code-text{color:var(--sd-color-foreground)}.sd-category-hero-development__publish-panel{position:absolute;top:calc(-1 * var(--sd-space-category-hero-development-overhang-top));right:-24px;z-index:2;width:187px;overflow:hidden;border-radius:var(--sd-radius-card-12);background:var(--sd-color-background)}.sd-category-hero-development__domain-row{border-bottom:1px solid var(--sd-color-border)}.sd-category-hero-development__domain-label{display:block;padding:var(--sd-space-category-hero-development-strip-pad);background:var(--sd-color-page-muted);color:var(--sd-color-foreground);font-size:var(--sd-type-category-hero-development-domain-label-size);font-weight:var(--sd-type-paragraph-large-semibold-weight);line-height:var(--sd-type-category-hero-development-panel-line-height);letter-spacing:var(--sd-type-letter-spacing-tight)}.sd-category-hero-development__domain-main{display:flex;gap:var(--sd-space-2);padding:var(--sd-space-1) var(--sd-space-3)}.sd-category-hero-development__seal{flex:none;width:11px;height:15px}.sd-category-hero-development__domain-copy{display:flex;min-width:0;flex-direction:column}.sd-category-hero-development__domain-url{display:flex;align-items:center;min-width:0;gap:var(--sd-space-2);color:var(--sd-color-foreground);font-size:var(--sd-type-category-hero-development-domain-url-size);font-weight:var(--sd-type-body-weight);line-height:var(--sd-type-caption-line-height);letter-spacing:var(--sd-type-letter-spacing-tight)}.sd-category-hero-development__domain-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-category-hero-development__external{flex:none;width:12px;height:12px;color:var(--sd-category-hero-development-icon-grey)}.sd-category-hero-development__domain-meta{display:flex;align-items:center;min-width:0;gap:var(--sd-space-1);color:var(--sd-color-muted);font-size:var(--sd-type-category-hero-development-domain-meta-size);font-weight:var(--sd-type-body-weight);line-height:var(--sd-type-category-hero-development-panel-line-height);letter-spacing:var(--sd-type-letter-spacing-tight)}.sd-category-hero-development__publish-actions{display:flex;align-items:center;gap:var(--sd-space-2);padding:var(--sd-space-category-hero-development-footer-pad)}.sd-category-hero-development__publish-action{display:inline-flex;align-items:center;justify-content:center;padding:var(--sd-space-category-hero-development-action-pad);border-radius:var(--sd-radius-card-8);background:var(--sd-color-page-muted);color:var(--sd-color-foreground);font-size:var(--sd-type-category-hero-development-action-size);font-weight:var(--sd-type-section-title-weight);line-height:var(--sd-type-category-hero-development-panel-line-height);letter-spacing:var(--sd-type-letter-spacing-tight);white-space:nowrap}.sd-category-hero-development__publish-action--primary{flex:1 1 auto;padding:var(--sd-space-category-hero-development-action-primary-pad);border:.5px solid var(--sd-color-muted);background:transparent;font-weight:var(--sd-type-category-hero-development-action-publish-weight)}.sd-category-hero-development__cursor{position:absolute;right:-14px;bottom:17px;z-index:3;display:inline-flex;align-items:center;padding:var(--sd-space-category-hero-development-cursor-pad);border-radius:var(--sd-radius-card-8);background:var(--sd-color-development);color:var(--sd-color-on-light-button);font-size:var(--sd-type-body-size);font-weight:var(--sd-type-section-title-weight);line-height:var(--sd-type-canvas-cursor-line-height);letter-spacing:var(--sd-type-letter-spacing-tight)}.sd-category-hero-development__cursor-arrow{position:absolute;top:-23px;left:-23px;width:19px;height:23px;color:var(--sd-color-on-light-button);stroke:var(--sd-color-on-accent)}@media (min-width:750px) and (max-width:959px){.sd-page--development .sd-design-hero__inner{flex-direction:column;align-items:stretch;gap:var(--sd-space-10)}.sd-page--development .sd-design-hero__text{width:100%;max-width:556px}}@media (max-width:1049px){.sd-category-hero-development{flex:none;align-self:center;width:100%;max-width:587px}}@media (max-width:749px){.sd-category-hero-development__publish-panel{right:0}.sd-category-hero-development__code-card{left:0}.sd-category-hero-development__cursor{right:0}}.sd-page--development .sd-design-hero{--sd-space-design-hero-padding-top:57px;--sd-space-design-hero-padding-bottom:calc(var(--sd-section-y) - 30px)}@media (min-width:1050px){.sd-page--development .sd-design-hero__text{margin-bottom:var(--sd-space-4)}}