@layer bricks {.brxe-button{width:auto}}@layer bricks {:where(.brxe-divider){align-items:center;display:flex;font-size:30px;gap:30px}:where(.brxe-divider).horizontal{width:100%}:where(.brxe-divider).horizontal .line{border-top:1px solid}:where(.brxe-divider).vertical{flex-direction:column}:where(.brxe-divider).vertical .line{border-right:1px solid;width:auto}:where(.brxe-divider) .line{position:relative;width:100%}:where(.brxe-divider) .icon{flex-shrink:0;position:relative}:where(.brxe-divider) a{display:inline-flex}}@layer bricks {.brxe-code{width:100%}}@layer bricks {:where(.brxe-heading).has-separator{align-items:center;display:inline-flex;gap:20px}:where(.brxe-heading)>[contenteditable]{display:inline-block;text-decoration:inherit}:where(.brxe-heading) .separator{border-top:1px solid;flex-grow:1;flex-shrink:0;height:1px}}:root {  --ratio: 1.414; --text-base: 1rem;  --text-fluid-sm: clamp( calc(var(--text-base) / var(--ratio)), 0.5vw + 0.6rem, var(--text-base) ); --text-fluid-base: clamp( var(--text-base), 1vw + 0.75rem, calc(var(--text-base) * var(--ratio)) ); --text-fluid-lg: clamp( calc(var(--text-base) * var(--ratio)), 1.5vw + 0.9rem, calc(var(--text-base) * var(--ratio) * var(--ratio)) ); --text-fluid-xl: clamp( calc(var(--text-base) * var(--ratio) * var(--ratio)), 2.5vw + 1.2rem, calc(var(--text-base) * var(--ratio) * var(--ratio) * var(--ratio)) ); --text-fluid-2xl: clamp( calc(var(--text-base) * var(--ratio) * var(--ratio) * var(--ratio)), 3.5vw + 1.5rem, calc(var(--text-base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)) ); --text-fluid-3xl: clamp( calc(var(--text-base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)), 5vw + 2rem, calc(var(--text-base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)) ); --text-fluid-4xl: clamp( calc(var(--text-base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)), 7vw + 2.5rem, calc(var(--text-base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)) );  --spacing-fluid-xs: clamp(0.5rem, 1vw, 1rem); --spacing-fluid-sm: clamp(1rem, 2vw, 1.5rem); --spacing-fluid-md: clamp(1.5rem, 3vw, 2.5rem); --spacing-fluid-lg: clamp(2rem, 4vw, 4rem); --spacing-fluid-xl: clamp(3rem, 6vw, 6rem); --spacing-fluid-2xl: clamp(4rem, 8vw, 8rem);  --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a;  --color-primary: var(--color-primary-500); --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a;  --color-secondary: var(--color-secondary-500); --color-secondary-50: #f0fdfa; --color-secondary-100: #ccfbf1; --color-secondary-200: #99f6e4; --color-secondary-300: #5eead4; --color-secondary-400: #2dd4bf; --color-secondary-500: #14b8a6; --color-secondary-600: #0d9488; --color-secondary-700: #0f766e; --color-secondary-800: #115e59; --color-secondary-900: #134e4a;  --color-accent: var(--color-accent-500); --color-accent-50: #fffbeb; --color-accent-100: #fef3c7; --color-accent-200: #fde68a; --color-accent-300: #fcd34d; --color-accent-400: #fbbf24; --color-accent-500: #f59e0b; --color-accent-600: #d97706; --color-accent-700: #b45309; --color-accent-800: #92400e; --color-accent-900: #78350f;  --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --spacing: 0.25rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; }  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: ui-sans-serif, system-ui, sans-serif; font-size: var(--text-fluid-base); line-height: var(--leading-normal); color: var(--color-neutral-900); background: var(--color-neutral-50); }  .sg-wrapper { max-width: 1200px; margin-inline: auto; padding: var(--spacing-fluid-lg) var(--spacing-fluid-md); } .sg-header { border-bottom: 2px solid var(--color-neutral-200); padding-bottom: var(--spacing-fluid-md); margin-bottom: var(--spacing-fluid-xl); } .sg-section { margin-bottom: var(--spacing-fluid-xl); } .sg-section-title { font-size: var(--text-fluid-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--color-neutral-800); border-left: 4px solid var(--color-accent-500); padding-left: 0.75rem; margin-bottom: var(--spacing-fluid-md); } .sg-sub-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-neutral-500); margin-bottom: 0.75rem; margin-top: 1.5rem; }  .sg-color-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .sg-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; width: 72px; } .sg-swatch-box { width: 72px; height: 48px; border-radius: var(--radius-md); border: 1px solid rgba(0,0,0,0.07); box-shadow: var(--shadow-sm); } .sg-swatch-label { font-size: 0.6rem; text-align: center; color: var(--color-neutral-500); line-height: 1.3; } .sg-swatch-hex { font-size: 0.6rem; font-family: ui-monospace, monospace; color: var(--color-neutral-400); }  .sg-type-row { display: flex; align-items: baseline; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-neutral-100); } .sg-type-label { font-size: 0.65rem; font-family: ui-monospace, monospace; color: var(--color-neutral-400); min-width: 140px; flex-shrink: 0; } .sg-type-sample { color: var(--color-neutral-800); }  .sg-spacing-row { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-neutral-100); } .sg-spacing-bar-wrap { flex: 1; } .sg-spacing-bar { height: 24px; background: var(--color-primary-200); border-radius: var(--radius-sm); border: 1px solid var(--color-primary-300); } .sg-spacing-label { font-size: 0.65rem; font-family: ui-monospace, monospace; color: var(--color-neutral-400); min-width: 160px; flex-shrink: 0; } .sg-spacing-desc { font-size: 0.7rem; color: var(--color-neutral-500); min-width: 120px; flex-shrink: 0; }  .sg-radius-group { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; } .sg-radius-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .sg-radius-box { background: var(--color-secondary-100); border: 2px solid var(--color-secondary-400); width: 72px; height: 48px; } .sg-radius-label { font-size: 0.65rem; font-family: ui-monospace, monospace; color: var(--color-neutral-500); text-align: center; }  .sg-shadow-group { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end; padding: 1rem 0; } .sg-shadow-item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .sg-shadow-box { background: #fff; border-radius: var(--radius-lg); width: 80px; height: 56px; } .sg-shadow-label { font-size: 0.65rem; font-family: ui-monospace, monospace; color: var(--color-neutral-500); }  .sg-button-group { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.6em 1.4em; font-size: var(--text-fluid-sm); font-weight: 600; border-radius: var(--radius-md); border: none; cursor: pointer; transition: opacity 0.15s; text-decoration: none; } .btn:hover { opacity: 0.85; } .btn-primary { background: var(--color-primary-500); color: #fff; } .btn-secondary { background: var(--color-secondary-500); color: #fff; } .btn-accent { background: var(--color-accent-500); color: #fff; } .btn-outline { background: transparent; border: 2px solid var(--color-primary-500); color: var(--color-primary-500); } .btn-ghost { background: var(--color-neutral-100); color: var(--color-neutral-700); }  .sg-card-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; } .card-img { width: 100%; height: 140px; background: linear-gradient(135deg, var(--color-primary-200), var(--color-secondary-200)); } .card-body { padding: 1.25rem; } .card-tag { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-600); background: var(--color-accent-50); border-radius: var(--radius-sm); padding: 0.2em 0.5em; margin-bottom: 0.5rem; } .card-title { font-size: var(--text-fluid-base); font-weight: 700; line-height: var(--leading-tight); color: var(--color-neutral-800); margin-bottom: 0.5rem; } .card-text { font-size: var(--text-fluid-sm); color: var(--color-neutral-500); line-height: var(--leading-relaxed); }  .sg-alert-group { display: flex; flex-direction: column; gap: 0.75rem; } .alert { padding: 0.875rem 1.125rem; border-radius: var(--radius-lg); font-size: var(--text-fluid-sm); border-left: 4px solid; } .alert-info { background: var(--color-primary-50); border-color: var(--color-primary-400); color: var(--color-primary-800); } .alert-success { background: var(--color-secondary-50); border-color: var(--color-secondary-400); color: var(--color-secondary-800); } .alert-warning { background: var(--color-accent-50); border-color: var(--color-accent-400); color: var(--color-accent-800); } .alert-neutral { background: var(--color-neutral-100); border-color: var(--color-neutral-400); color: var(--color-neutral-700); }  .sg-divider { border: none; border-top: 1px solid var(--color-neutral-200); margin: var(--spacing-fluid-lg) 0; }  .sg-badge-group { display: flex; flex-wrap: wrap; gap: 0.5rem; } .badge { display: inline-flex; align-items: center; padding: 0.25em 0.75em; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; } .badge-primary { background: var(--color-primary-100); color: var(--color-primary-700); } .badge-secondary { background: var(--color-secondary-100); color: var(--color-secondary-700); } .badge-accent { background: var(--color-accent-100); color: var(--color-accent-700); } .badge-neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }#brxe-1a9e38 {font-size: var(--text-fluid-sm); color: var(--color-neutral-400); font-family: "ui-monospace,monospace"; margin-bottom: 0.25rem}#brxe-bc2a78 {font-size: var(--text-fluid-3xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: -0.03em; color: var(--color-neutral-900)}#brxe-84c50c {font-size: 0.8em; background-color: var(--color-neutral-100); padding-top: 0.1em; padding-right: 0.4em; padding-bottom: 0.1em; padding-left: 0.4em}#brxe-466fb9 {margin-top: 0.5rem; color: var(--color-neutral-500); font-size: var(--text-fluid-sm)}#brxe-5d0235 {background-color: var(--color-neutral-50)}#brxe-edec5b {background-color: var(--color-neutral-100)}#brxe-8a560e {background-color: var(--color-neutral-200)}#brxe-44813e {background-color: var(--color-neutral-300)}#brxe-a7fb89 {background-color: var(--color-neutral-400)}#brxe-bc3730 {background-color: var(--color-neutral-500)}#brxe-1e9d18 {background-color: var(--color-neutral-600)}#brxe-bcd56e {background-color: var(--color-neutral-700)}#brxe-94d43c {background-color: var(--color-neutral-800)}#brxe-6217b6 {background-color: var(--color-neutral-900)}#brxe-624f5e {background-color: var(--color-primary-50)}#brxe-31d864 {background-color: var(--color-primary-100)}#brxe-4b63a4 {background-color: var(--color-primary-200)}#brxe-e06139 {background-color: var(--color-primary-300)}#brxe-b0e19c {background-color: var(--color-primary-400)}#brxe-c6d252 {background-color: var(--color-primary-500)}#brxe-9101b8 {background-color: var(--color-primary-600)}#brxe-b5a3d9 {background-color: var(--color-primary-700)}#brxe-e8cfbb {background-color: var(--color-primary-800)}#brxe-e6a779 {background-color: var(--color-primary-900)}#brxe-e9bf4f {background-color: var(--color-secondary-50)}#brxe-6ae953 {background-color: var(--color-secondary-100)}#brxe-15736d {background-color: var(--color-secondary-200)}#brxe-3bd762 {background-color: var(--color-secondary-300)}#brxe-f393c9 {background-color: var(--color-secondary-400)}#brxe-b6225c {background-color: var(--color-secondary-500)}#brxe-823cbc {background-color: var(--color-secondary-600)}#brxe-1d52d1 {background-color: var(--color-secondary-700)}#brxe-c6866d {background-color: var(--color-secondary-800)}#brxe-a5978d {background-color: var(--color-secondary-900)}#brxe-38bac9 {background-color: var(--color-accent-50)}#brxe-fecb49 {background-color: var(--color-accent-100)}#brxe-5a730d {background-color: var(--color-accent-200)}#brxe-4e9b83 {background-color: var(--color-accent-300)}#brxe-d8a44b {background-color: var(--color-accent-400)}#brxe-ce65d9 {background-color: var(--color-accent-500)}#brxe-453da6 {background-color: var(--color-accent-600)}#brxe-c22305 {background-color: var(--color-accent-700)}#brxe-1904a5 {background-color: var(--color-accent-800)}#brxe-588875 {background-color: var(--color-accent-900)}#brxe-ac0b2a {font-size: var(--text-fluid-4xl); font-weight: 800; line-height: var(--leading-tight)}#brxe-7a1285 {font-size: var(--text-fluid-3xl); font-weight: 800; line-height: var(--leading-tight)}#brxe-ef1a6a {font-size: var(--text-fluid-2xl); font-weight: 700; line-height: var(--leading-tight)}#brxe-df17ad {font-size: var(--text-fluid-xl); font-weight: 700; line-height: var(--leading-snug)}#brxe-9a6be6 {font-size: var(--text-fluid-lg); font-weight: 600; line-height: var(--leading-snug)}#brxe-8ccb14 {font-size: var(--text-fluid-base); line-height: var(--leading-normal)}#brxe-759612 {font-size: var(--text-fluid-sm); color: var(--color-neutral-600); line-height: var(--leading-relaxed)}#brxe-5eaeae {margin-top: 2rem}#brxe-d0dd9f {font-size: 0.65rem; font-family: "ui-monospace,monospace"; color: var(--color-neutral-400); margin-bottom: 0.25rem}#brxe-13f038 {font-size: var(--text-fluid-sm); line-height: var(--leading-tight); color: var(--color-neutral-700)}#brxe-665354 {font-size: 0.65rem; font-family: "ui-monospace,monospace"; color: var(--color-neutral-400); margin-bottom: 0.25rem}#brxe-376256 {font-size: var(--text-fluid-sm); line-height: var(--leading-normal); color: var(--color-neutral-700)}#brxe-f2e581 {font-size: 0.65rem; font-family: "ui-monospace,monospace"; color: var(--color-neutral-400); margin-bottom: 0.25rem}#brxe-f7589a {font-size: var(--text-fluid-sm); line-height: var(--leading-relaxed); color: var(--color-neutral-700)}#brxe-dcc60f {font-size: 0.65rem; font-family: "ui-monospace,monospace"; color: var(--color-neutral-400); margin-bottom: 0.25rem}#brxe-dc51ee {font-size: var(--text-fluid-sm); line-height: var(--leading-loose); color: var(--color-neutral-700)}#brxe-4a52a1 {display: flex; flex-wrap: wrap}#brxe-119915 {width: var(--spacing-fluid-xs)}#brxe-6e1bd3 {width: var(--spacing-fluid-sm)}#brxe-36c48f {width: var(--spacing-fluid-md)}#brxe-4609e8 {width: var(--spacing-fluid-lg)}#brxe-c6afbc {width: var(--spacing-fluid-xl)}#brxe-a3a287 {width: var(--spacing-fluid-2xl)}#brxe-8fd00f {margin-top: 2rem}#brxe-6d5a23 {background-color: linear-gradient(135deg,var(--color-accent-200),var(--color-primary-200))}#brxe-da5736 {background-color: linear-gradient(135deg,var(--color-secondary-200),var(--color-neutral-200))}#brxe-e054f1 {font-size: 0.85em; background-color: var(--color-neutral-100); padding-top: 0.1em; padding-right: 0.4em; padding-bottom: 0.1em; padding-left: 0.4em}#brxe-7cc8b0 {text-align: center; color: var(--color-neutral-400); font-size: var(--text-fluid-sm); padding-top: var(--spacing-fluid-md); padding-right: 0; padding-bottom: var(--spacing-fluid-md); padding-left: 0}