@layer bricks {.brxe-icon{font-size:60px}svg.brxe-icon{font-size:inherit}}@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}}.bdemo { background: #f6f3f8; }.bdemo__wrap { gap: 28px; }.bdemo__intro { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; }.bdemo__eyebrow { font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }.bdemo__title { font-size: clamp(30px, 5vw, 44px); line-height: 1.05; margin: 0; }.bdemo__lead { color: #5b5563; font-size: 16px; }.bdemo__option { width: 100%; background: #fff; border: 1px solid #e3dbe8; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }.bdemo__meta { padding: 24px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid #e3dbe8; min-width: 0; }.bdemo__tag { align-self: flex-start; font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; background: var(--color-secondary); color: var(--color-primary); padding: 2px 8px; }.bdemo__name { font-size: 26px; line-height: 1.1; margin: 0; }.bdemo__desc { color: #5b5563; font-size: 14px; line-height: 1.55; }.bdemo__spec { color: #18181b; font-size: 13px; line-height: 1.5; }.bdemo__stage { display: flex; flex-direction: column; min-width: 0; }.bdemo__surface { padding: 36px 28px; display: flex; flex-wrap: wrap; gap: 22px 26px; align-items: center; }.bdemo__surface--light { background: #fff; }.bdemo__surface--brand { background: var(--color-primary); }.bdemo__label { flex-basis: 100%; font-family: "Roboto Condensed", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5b5563; margin-bottom: -8px; }.bdemo__surface--brand .bdemo__label { color: rgba(255,255,255,.75); }.bdemo__note { border-left: 4px solid var(--color-secondary); background: #fff; padding: 16px 20px; font-size: 14px; color: #5b5563; max-width: 80ch; }@media (max-width: 767px) { .bdemo__option { grid-template-columns: 1fr; } .bdemo__meta { border-right: 0; border-bottom: 1px solid #e3dbe8; } .bdemo__surface { padding: 28px 20px; }}.bdemo-btn { --btn-bg: var(--color-primary); --btn-fg: #fff; --btn-border: var(--color-primary); --hover-bg: var(--color-primary); --hover-fg: #fff; --sweep: var(--color-secondary); --sweep-fg: var(--color-primary); --pop: var(--color-secondary); --glow: rgba(123,70,149,.45); --mark: var(--color-primary); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 26px; margin: 0; font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .02em; line-height: 1.2; color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-border); border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .3s, background-color .3s, border-color .3s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);}.bdemo-btn > * { position: relative; z-index: 1; }.bdemo-btn i { font-size: 16px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }.bdemo-btn:focus-visible { outline: 2px solid var(--btn-border); outline-offset: 4px; }.bdemo-btn--primary-outline { --btn-bg: transparent; --btn-fg: var(--color-primary); --hover-bg: var(--color-primary); --hover-fg: #fff; --sweep: var(--color-primary); --sweep-fg: #fff; --pop: var(--color-primary); }.bdemo-btn--secondary { --btn-bg: var(--color-secondary); --btn-fg: var(--color-primary); --btn-border: var(--color-secondary); --hover-bg: var(--color-secondary); --hover-fg: var(--color-primary); --sweep: var(--color-primary); --sweep-fg: var(--color-secondary); --pop: var(--color-primary); --glow: rgba(242,223,13,.55); }.bdemo-btn--secondary-outline { --btn-bg: transparent; --btn-fg: var(--color-secondary); --btn-border: var(--color-secondary); --hover-bg: var(--color-secondary); --hover-fg: var(--color-primary); --sweep: var(--color-secondary); --sweep-fg: var(--color-primary); --pop: var(--color-secondary); --glow: rgba(242,223,13,.45); --mark: var(--color-secondary); }.bdemo__surface--brand .bdemo-btn--secondary { --pop: var(--color-black); --mark: var(--color-secondary); }.bdemo-fx-sweep .bdemo-btn { overflow: hidden; }.bdemo-fx-sweep .bdemo-btn::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--sweep); transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.7,0,.2,1); }.bdemo-fx-sweep .bdemo-btn:is(:hover, :focus, :active) { color: var(--sweep-fg); }.bdemo-fx-sweep .bdemo-btn:is(:hover, :focus, :active)::before { transform: scaleX(1); transform-origin: left center; }.bdemo-fx-sweep .bdemo-btn:is(:hover, :focus, :active) i { transform: translateX(5px); }.bdemo-fx-pop .bdemo-btn { box-shadow: 4px 4px 0 0 var(--pop); }.bdemo-fx-pop .bdemo-btn:is(:hover, :focus) { background: var(--hover-bg); color: var(--hover-fg); transform: translate(-3px, -3px); box-shadow: 7px 7px 0 0 var(--pop); }.bdemo-fx-pop .bdemo-btn:is(:hover, :focus) i { transform: rotate(-45deg); }.bdemo-fx-pop .bdemo-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--pop); transition-duration: .08s; }.bdemo-fx-shine .bdemo-btn { overflow: hidden; }.bdemo-fx-shine .bdemo-btn::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: 0; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); transform: translateX(-160%) skewX(-18deg); }.bdemo-fx-shine .bdemo-btn:is(:hover, :focus, :active) { background: var(--hover-bg); color: var(--hover-fg); transform: translateY(-3px); box-shadow: 0 14px 26px -10px var(--glow); }.bdemo-fx-shine .bdemo-btn:is(:hover, :focus, :active)::after { transform: translateX(330%) skewX(-18deg); transition: transform .75s ease; }.bdemo-fx-shine .bdemo-btn:is(:hover, :focus, :active) i { transform: scale(1.15) rotate(8deg); }.bdemo-fx-crop .bdemo-btn::before { content: ""; position: absolute; inset: -9px; z-index: 0; pointer-events: none; --l: 10px; --t: 2px; background: linear-gradient(var(--mark) 0 0) left top / var(--l) var(--t), linear-gradient(var(--mark) 0 0) left top / var(--t) var(--l), linear-gradient(var(--mark) 0 0) right top / var(--l) var(--t), linear-gradient(var(--mark) 0 0) right top / var(--t) var(--l), linear-gradient(var(--mark) 0 0) left bottom / var(--l) var(--t), linear-gradient(var(--mark) 0 0) left bottom / var(--t) var(--l), linear-gradient(var(--mark) 0 0) right bottom / var(--l) var(--t), linear-gradient(var(--mark) 0 0) right bottom / var(--t) var(--l); background-repeat: no-repeat; opacity: 0; transform: scale(.82); transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); }.bdemo-fx-crop .bdemo-btn:is(:hover, :focus, :active) { background: var(--hover-bg); color: var(--hover-fg); }.bdemo-fx-crop .bdemo-btn:is(:hover, :focus, :active)::before { opacity: 1; transform: scale(1); }.bdemo-fx-crop .bdemo-btn:is(:hover, :focus, :active) i { transform: translateX(4px); }.bdemo-fx-crop .bdemo-btn:focus-visible { outline: none; }@media (prefers-reduced-motion: reduce) { .bdemo-btn, .bdemo-btn i, .bdemo-btn::before, .bdemo-btn::after { transition: color .2s, background-color .2s !important; } .bdemo-btn:is(:hover, :focus, :active), .bdemo-btn:is(:hover, :focus, :active) i { transform: none !important; } .bdemo-fx-shine .bdemo-btn::after { display: none; }}