@layer components{.styleguide{& .styleguide__admin-banner{background-color:var(--color-contrast-strongest,#1a202c);color:var(--color-bg-medium,#fff);border-bottom:2px solid var(--color-accent-main-3,#ed8936);font-size:var(--font-size-sm,.9rem);padding-block:.85rem}& .styleguide__admin-banner-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex;& code{color:var(--color-accent-main-3,#ed8936);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}}& .styleguide__header{margin-bottom:var(--space-xl,2.5rem)}& .styleguide__bento-top{gap:var(--space-md,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));display:grid}& .sg-bento-card{background-color:var(--color-bg-medium,#fff);border:1px solid var(--color-contrast-border,#e2e8f0);border-radius:calc(var(--border-radius,8px) * 1.5);flex-direction:column;display:flex;overflow:hidden;box-shadow:0 10px 28px -10px #1a202c12}& .sg-bento-card__header{background-color:var(--color-bg-strong,#f7fafc);border-bottom:1px solid var(--color-contrast-border,#e2e8f0);justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 1.35rem;display:flex}& .sg-bento-card__label{color:var(--color-contrast-strongest,#1a202c);font-size:.9rem;font-weight:700}& .sg-bento-card__meta{color:var(--color-contrast-subtle,#718096);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem}& .sg-bento-card__stage{padding:var(--space-lg,2rem);flex-direction:column;flex:auto;justify-content:center;min-height:210px;display:flex}& .sg-bento-card__stage--centered{text-align:center;align-items:center;gap:1rem}& .sg-bento-card__stage--buttons{align-items:stretch;gap:.85rem}& .sg-brand-preview__logo{width:auto;max-height:64px}& .sg-brand-preview__title{font-family:var(--font-heading,sans-serif);font-size:var(--font-size-xl,2rem);color:var(--color-contrast-strongest,#1a202c);font-weight:800}& .sg-brand-preview__caption{color:var(--color-contrast-medium,#4a5568);background-color:var(--color-bg-strongest,#edf2f7);border-radius:999px;padding:.25rem .75rem;font-size:.85rem;font-weight:600}& .sg-browser-mockup{border:1px solid var(--color-contrast-border,#e2e8f0);background-color:var(--color-bg-strongest,#edf2f7);border-radius:10px;width:100%;max-width:320px;overflow:hidden;box-shadow:0 8px 20px -6px #1a202c1a}& .sg-browser-mockup__bar{align-items:center;gap:.65rem;padding:.55rem .75rem 0;display:flex}& .sg-browser-mockup__dots{gap:5px;padding-bottom:.45rem;display:inline-flex;& span{background-color:#cbd5e1;border-radius:999px;width:9px;height:9px}& span:first-child{background-color:#fc8181}& span:nth-child(2){background-color:#f6ad55}& span:nth-child(3){background-color:#68d391}}& .sg-browser-mockup__tab{background-color:var(--color-bg-medium,#fff);color:var(--color-contrast-strongest,#1a202c);border-radius:8px 8px 0 0;flex:auto;align-items:center;gap:.5rem;min-width:0;padding:.42rem .85rem;font-size:.8rem;font-weight:600;display:inline-flex}& .sg-browser-mockup__favicon{flex-shrink:0;width:16px;height:16px}& .sg-browser-mockup__tab-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}& .sg-browser-mockup__tab-close{opacity:.5;margin-left:auto}& .sg-browser-mockup__address{background-color:var(--color-bg-medium,#fff);color:var(--color-contrast-subtle,#718096);border-top:1px solid var(--color-contrast-border,#e2e8f0);align-items:center;gap:.4rem;padding:.55rem .85rem;font-size:.76rem;display:flex}& .sg-color-columns{gap:var(--space-md,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));display:grid}& .sg-color-column__header{border-bottom:2px solid var(--color-contrast-border,#e2e8f0);justify-content:space-between;align-items:baseline;margin-bottom:1rem;padding-bottom:.5rem;display:flex}& .sg-color-column__title{font-size:1.15rem;font-weight:800}& .sg-color-column__code{color:var(--color-contrast-subtle,#718096);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem}& .sg-color-column__list{gap:1rem;display:grid}& .sg-color-card{background-color:var(--color-bg-medium,#fff);border:1px solid var(--color-contrast-border,#e2e8f0);border-radius:var(--border-radius,8px);overflow:hidden;box-shadow:0 4px 12px -4px #1a202c0d}& .sg-color-card__swatch{border-bottom:1px solid var(--color-contrast-border,#e2e8f0);min-height:112px;font-family:var(--font-body,system-ui, sans-serif);flex-direction:column;justify-content:space-between;gap:.5rem;padding:.75rem .85rem;display:flex}& .sg-color-card__sample{font-size:var(--font-size-base,1rem);font-weight:500;line-height:1.35}& .sg-color-card__wcag{letter-spacing:.01em;font-size:.72rem;font-weight:700}& .sg-color-card__body{gap:.55rem;padding:.85rem;display:grid}& .sg-color-card__row{justify-content:space-between;align-items:center;gap:.5rem;display:flex}& .sg-color-card__name{color:var(--color-contrast-strongest,#1a202c);font-size:.92rem}& .sg-color-card__hex{color:var(--color-contrast-medium,#4a5568);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;font-weight:600}& .sg-copy-btn{background-color:var(--color-bg-strong,#f7fafc);border:1px solid var(--color-contrast-border,#e2e8f0);cursor:pointer;text-align:left;border-radius:6px;justify-content:space-between;align-items:center;gap:.5rem;width:100%;padding:.42rem .65rem;transition:border-color .15s,background-color .15s;display:flex}& .sg-copy-btn:hover{border-color:var(--color-accent-main-1,#2b6cb0);background-color:var(--color-bg-strongest,#edf2f7)}& .sg-copy-btn__code{color:var(--color-accent-main-1,#2b6cb0);text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;overflow:hidden}& .sg-copy-btn__label{color:var(--color-contrast-subtle,#718096);flex-shrink:0;font-size:.7rem;font-weight:700}& .sg-typo-application{gap:var(--space-lg,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start;display:grid}& .sg-panel{background-color:var(--color-bg-medium,#fff);border:1px solid var(--color-contrast-border,#e2e8f0);border-radius:calc(var(--border-radius,8px) * 1.5);padding:var(--space-lg,2rem);box-shadow:0 8px 24px -8px #1a202c0d}& .sg-typo-application__headings{gap:1.35rem;display:grid}& .sg-heading-sample{border-bottom:1px solid var(--color-contrast-border,#e2e8f0);padding-bottom:1rem}& .sg-heading-sample:last-child{border-bottom:none;padding-bottom:0}& .sg-heading-sample__tag{color:var(--color-contrast-subtle,#718096);margin-bottom:.35rem;font-size:.75rem;font-weight:700;display:inline-block;& code{color:var(--color-accent-main-1,#2b6cb0);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}}& .sg-blockquote{border-left:4px solid var(--color-accent-main-1,#2b6cb0);background-color:var(--color-bg-strong,#f7fafc);border-radius:0 var(--border-radius,8px) var(--border-radius,8px) 0;font-family:var(--font-heading,sans-serif);font-size:var(--font-size-md,1.25rem);color:var(--color-contrast-strongest,#1a202c);margin-block:1.5rem;padding:1.25rem 1.5rem;font-weight:700}& .sg-scale-list,& .sg-spacing-list{gap:1rem;display:grid}& .sg-scale-row,& .sg-spacing-row{background-color:var(--color-bg-medium,#fff);border:1px solid var(--color-contrast-border,#e2e8f0);border-radius:var(--border-radius,8px);gap:.85rem;padding:1.25rem 1.5rem;display:grid}@media (width>=860px){& .sg-spacing-row{grid-template-columns:360px 1fr;align-items:center}}& .sg-scale-row__meta,& .sg-spacing-row__info{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.65rem;display:flex}& .sg-scale-row__badges{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}& .sg-badge{border-radius:6px;align-items:center;gap:.35rem;width:auto;padding:.25rem .65rem;font-size:.78rem;font-weight:700;display:inline-flex}& .sg-badge--primary{background-color:var(--color-accent-main-1,#2b6cb0);color:#fff}& .sg-badge--code{background-color:var(--color-bg-strong,#f7fafc);color:var(--color-contrast-strong,#2d3748);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}& .sg-badge--px{background-color:var(--color-accent-main-3,#ed8936);color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}& .sg-scale-row__formula{color:var(--color-contrast-subtle,#718096);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}& .sg-scale-row__preview{font-family:var(--font-heading,sans-serif);color:var(--color-contrast-strongest,#1a202c);overflow-wrap:anywhere;font-weight:800;line-height:1.15}& .sg-spacing-row__visual{background-color:var(--color-bg-strong,#f7fafc);border:1px dashed var(--color-contrast-border,#e2e8f0);border-radius:6px;align-items:center;padding:.75rem;display:flex}& .sg-spacing-box{background-color:var(--color-contrast-subtle,#718096);border:2px solid var(--color-accent-main-1,#2b6cb0);border-radius:4px;transition:width 80ms linear,height 80ms linear}& .sg-forms-notices-grid{gap:var(--space-lg,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));align-items:start;display:grid}& .sg-notices-stack{gap:1rem;display:grid}}}