@layer bricks {:where(.brxe-svg){height:auto;width:auto}:where(.brxe-svg) svg{height:auto;max-width:100%;overflow:visible;width:auto}}@layer bricks {.brxe-text-link{gap:5px}.brxe-text-link,.brxe-text-link span{align-items:center;display:inline-flex}.brxe-text-link span{justify-content:center}.brxe-text-link .icon{flex-shrink:0}}@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}}.mock { position: absolute; left: 0; top: 0; width: 600px; height: 500px; padding: 36px; display: grid; justify-items: center; align-content: center; transform-origin: 0 0; transform: scale(var(--mock-s, 1)); }.mock__wrap { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) 34px; animation: viewport 15s var(--ease-io) infinite; animation-play-state: paused; }.is-live .mock__wrap { animation-play-state: running; }@keyframes viewport { 0%, 16% { width: 100%; } 42%, 62% { width: 38%; } 88%, 100% { width: 100%; } }.mock__frame { display: flex; flex-direction: column; overflow: hidden; min-height: 0; background: var(--white); border-radius: 12px; box-shadow: 0 1px 0 var(--line-paper), 0 30px 60px -34px color-mix(in oklab, var(--tertiary) 55%, transparent); }.mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--paper-2); flex: none; }.mock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-3); flex: none; }.mock__url { margin-left: 8px; height: 16px; flex: 1; max-width: 210px; border-radius: 8px; background: var(--light); font-size: 10px; line-height: 16px; padding-inline: 8px; color: var(--text-body); white-space: nowrap; overflow: hidden; }.mock__page { container-type: inline-size; flex: 1; min-height: 0; overflow: hidden; padding: 16px 18px; display: grid; gap: 18px; align-content: start; }.m-nav { display: flex; align-items: center; justify-content: space-between; }.m-logo { display: flex; align-items: center; gap: 6px; }.m-logo__mark { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--tertiary); }.m-logo__word { width: 46px; height: 7px; border-radius: 4px; background: var(--text-title); }.m-links { display: flex; gap: 10px; }.m-link { width: 26px; height: 5px; border-radius: 3px; background: var(--paper-3); }.m-burger { display: none; width: 16px; height: 10px; border-block: 2px solid var(--text-title); position: relative; }.m-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--text-title); }.m-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: center; }.m-copy { display: grid; gap: 7px; }.m-h { height: 13px; border-radius: 3px; background: var(--text-title); }.m-h--short { width: 72%; }.m-t { height: 5px; border-radius: 3px; background: var(--paper-3); }.m-h--short + .m-t { margin-top: 6px; }.m-t--short { width: 60%; }.m-btn { margin-top: 8px; width: 64px; height: 18px; border-radius: 9px 2px; background: var(--primary); }.m-img { aspect-ratio: 1; border-radius: 6px; background: var(--tertiary); position: relative; overflow: hidden; }.m-img::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; border-top-right-radius: 100%; background: var(--secondary); }.m-img::after { content: ""; position: absolute; right: 14%; top: 14%; width: 22%; height: 22%; border-radius: 50%; background: var(--light); }.m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.m-card { display: grid; gap: 5px; padding: 10px; border-radius: 6px; background: var(--light); }.m-card::before { content: ""; height: 26px; border-radius: 4px; background: var(--paper-3); }.m-card__h { height: 6px; width: 70%; border-radius: 3px; background: var(--text-title); }.m-card__t { height: 4px; border-radius: 2px; background: var(--paper-3); }@container (max-width: 330px) { .m-links { display: none; } .m-burger { display: block; } .m-hero { grid-template-columns: 1fr; } .m-img { order: -1; aspect-ratio: 16 / 10; } .m-cards { grid-template-columns: 1fr; }}.mock__dim { position: relative; display: grid; place-items: center; }.mock__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 9px; transform: translateY(-50%); border-inline: 1px solid var(--text-body); background: linear-gradient(var(--text-body), var(--text-body)) center / 100% 1px no-repeat; opacity: .55; }.mock__width { position: relative; padding: 0 10px; background: var(--paper-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text-body); }.brand-svg { position: absolute; inset: 0; width: 100%; height: 100%; }.brand-svg .guide { fill: none; stroke: var(--text-body); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .4; }.brand-svg .shape { transform-box: fill-box; }.brand-svg .spec { fill: var(--text-title); }.brand-svg .hex { font-size: 10.5px; font-weight: 600; fill: var(--text-body); letter-spacing: .03em; font-variant-numeric: tabular-nums; }.is-pending .brand-svg .guide { stroke-dashoffset: 1; opacity: 0; }.is-pending .brand-svg .shape, .is-pending .brand-svg .swatch, .is-pending .brand-svg .spec-g { opacity: 0; }.is-live .brand-svg .guide { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.4s var(--ease-io) both, guideRest .8s ease 2.6s forwards; }.is-live .brand-svg .guide:nth-child(2n) { animation-delay: .12s, 2.6s; }.is-live .brand-svg .guide:nth-child(3n) { animation-delay: .24s, 2.6s; }.is-live .brand-svg .shape { animation: grow 1s var(--ease-out) both; }.is-live .brand-svg .s1 { transform-origin: 0% 100%; animation-delay: 1.2s; }.is-live .brand-svg .s2 { transform-origin: 50% 50%; animation-delay: 1.4s; }.is-live .brand-svg .s3 { transform-origin: 0% 50%; animation-delay: 1.55s; }.is-live .brand-svg .s4 { transform-origin: 50% 50%; animation-delay: 1.9s; animation-name: dotIn; }.is-live .brand-svg .spec-g { animation: fadeIn 1s var(--ease-out) 2.1s both; }.is-live .brand-svg .swatch { animation: fadeIn .8s var(--ease-out) both; }.is-live .brand-svg .sw1 { animation-delay: 2.3s; }.is-live .brand-svg .sw2 { animation-delay: 2.4s; }.is-live .brand-svg .sw3 { animation-delay: 2.5s; }.is-live .brand-svg .sw4 { animation-delay: 2.6s; }@keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }@keyframes dotIn { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }@keyframes draw { from { stroke-dashoffset: 1; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }@keyframes guideRest { to { opacity: .4; } }.ux-svg { position: absolute; inset: 0; width: 100%; height: 100%; }.fold { position: absolute; inset: 0; display: grid; place-items: center; perspective: 900px; }.fold__sheet { display: flex; flex-direction: row; width: 66%; aspect-ratio: 2.1 / 1; transform-style: preserve-3d; transform: rotateX(18deg) rotateZ(-4deg); }.fold__panel { position: relative; flex: 1; background: var(--white); padding: 9% 8%; display: grid; gap: 6px; align-content: start; transform-style: preserve-3d; box-shadow: 0 18px 30px -22px color-mix(in oklab, var(--tertiary) 70%, transparent); }.fold__panel::after { content: ""; position: absolute; inset: 0; background: var(--tertiary); opacity: 0; pointer-events: none; }.f-h { height: 7px; border-radius: 2px; background: var(--text-title); width: 80%; }.f-t { height: 3px; border-radius: 2px; background: var(--paper-3); }.f-t--short { width: 70%; }.f-art { aspect-ratio: 1; width: 100%; border-radius: 2px; background: var(--quaternary); position: relative; overflow: hidden; margin-bottom: 4px; }.f-art::before { content: ""; position: absolute; inset: 0 0 0 50%; background: var(--tertiary); }.f-art::after { content: ""; position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 50%; background: var(--primary); }.fold__panel--l { transform-origin: 100% 50%; animation: foldL 8s var(--ease-io) infinite; animation-play-state: paused; }.fold__panel--r { transform-origin: 0% 50%; animation: foldR 8s var(--ease-io) infinite; animation-play-state: paused; }.fold__panel--l::after, .fold__panel--r::after { animation: foldShade 8s var(--ease-io) infinite; animation-play-state: paused; }.is-live .fold__panel--l, .is-live .fold__panel--r, .is-live .fold__panel--l::after, .is-live .fold__panel--r::after { animation-play-state: running; }@keyframes foldL { 0%, 12% { transform: rotateY(8deg); } 45%, 62% { transform: rotateY(62deg); } 95%, 100% { transform: rotateY(8deg); } }@keyframes foldR { 0%, 12% { transform: rotateY(-8deg); } 45%, 62% { transform: rotateY(-62deg); } 95%, 100% { transform: rotateY(-8deg); } }@keyframes foldShade { 0%, 12% { opacity: .02; } 45%, 62% { opacity: .16; } 95%, 100% { opacity: .02; } }.wave { position: absolute; inset: 0; }.wave canvas { display: block; width: 100%; height: 100%; }.timecode { position: absolute; left: 20px; bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--text-body); }@media (prefers-reduced-motion: reduce) { .mock__wrap, .fold__panel { animation: none !important; }}.process__visual svg text { font-family: inherit; }.process__visual .pr-pop { transform-box: fill-box; transform-origin: center; }.process__visual .pr-gx { transform-box: fill-box; transform-origin: left center; }.process__visual .pr-draw { stroke-dasharray: 1; }.process__visual .pr-dim { opacity: .3; }.process__visual .pr-mv-down { transform: translateY(30px); }.process__visual .pr-mv-up { transform: translateY(-30px); }@media (prefers-reduced-motion: no-preference) { .process__visual:not(.is-live) .pr-pop { opacity: 0; transform: scale(.4); } .process__visual:not(.is-live) .pr-fade { opacity: 0; } .process__visual:not(.is-live) .pr-draw { stroke-dashoffset: 1; opacity:0; } .process__visual:not(.is-live) .pr-gx { transform: scaleX(0); } .process__visual:not(.is-live) .pr-rise { opacity: 0; transform: translateY(20px); } .process__visual:not(.is-live) .pr-dim { opacity: 1; } .process__visual:not(.is-live) .pr-mv-down, .process__visual:not(.is-live) .pr-mv-up { transform: none; }}.is-live .pr-pop { transition: opacity .35s, transform .6s var(--ease-out); }.is-live .pr-fade, .is-live .pr-dim { transition: opacity .5s; }.is-live .pr-draw { transition: stroke-dashoffset .8s var(--ease-io), opacity 0s; }.is-live .pr-gx { transition: transform .7s var(--ease-out); }.is-live .pr-rise { transition: opacity .5s, transform 1s var(--ease-io); }.is-live .pr-mv-down, .is-live .pr-mv-up { transition: transform 1s var(--ease-io) 4.4s; }.is-live .pr-draw.pr-slow { transition-duration: 1.4s, 0s; }.is-live .pr-t2 { transition-delay: 0.2s; }.is-live .pr-t3 { transition-delay: 0.3s; }.is-live .pr-t5 { transition-delay: 0.5s; }.is-live .pr-t6 { transition-delay: 0.6s; }.is-live .pr-t9 { transition-delay: 0.9s; }.is-live .pr-t10 { transition-delay: 1s; }.is-live .pr-t12 { transition-delay: 1.2s; }.is-live .pr-t14 { transition-delay: 1.4s; }.is-live .pr-t15 { transition-delay: 1.5s; }.is-live .pr-t16 { transition-delay: 1.6s; }.is-live .pr-t18 { transition-delay: 1.8s; }.is-live .pr-t21 { transition-delay: 2.1s; }.is-live .pr-t22 { transition-delay: 2.2s; }.is-live .pr-t23 { transition-delay: 2.3s; }.is-live .pr-t26 { transition-delay: 2.6s; }.is-live .pr-t27 { transition-delay: 2.7s; }.is-live .pr-t30 { transition-delay: 3s; }.is-live .pr-t31 { transition-delay: 3.1s; }.is-live .pr-t34 { transition-delay: 3.4s; }.is-live .pr-t38 { transition-delay: 3.8s; }.is-live .pr-t39 { transition-delay: 3.9s; }.is-live .pr-t41 { transition-delay: 4.1s; }.is-live .pr-t43 { transition-delay: 4.3s; }.is-live .pr-t52 { transition-delay: 5.2s; }#brxe-3ajpdp {margin-left: -20px}