@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}}.ab { position: absolute; inset: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: clamp(14px, 4%, 30px) clamp(14px, 4%, 30px) clamp(14px, 4%, 30px) 0; }.ab__rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }.ab__tool { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--on-dark-muted); transition: background-color .3s, color .3s; }.ab__tool::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }.ab__tool[data-tool="select"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2v11l3-2.6 2.2 4.6 1.8-.8-2.1-4.5H12Z'/%3E%3C/svg%3E"); }.ab__tool[data-tool="frame"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1v14M12 1v14M1 4h14M1 12h14' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); }.ab__tool[data-tool="text"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3h10v2.4h-1.4V4.6H8.8v7.8h1.6V14H5.6v-1.6h1.6V4.6H4.4v.8H3Z'/%3E%3C/svg%3E"); }.ab__tool[data-tool="colour"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3C/svg%3E"); }.ab__tool.is-active { background: var(--ink-3); color: var(--on-dark); }.ab__page { position: relative; container-type: inline-size; background: var(--white); border-radius: 10px; box-shadow: 0 40px 80px -40px color-mix(in oklab, black 70%, transparent); }.ab__page > * { position: absolute; }.ab__cols { inset: 0 6%; pointer-events: none; background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--secondary) 16%, transparent) 0 6.5%, transparent 6.5% 8.5%); }.ab__nav { left: 6%; right: 6%; top: 5%; height: 6%; display: flex; align-items: center; justify-content: space-between; }.ab__logo { width: 4.2cqi; height: 4.2cqi; border-radius: 50% 50% 50% 0; background: var(--tertiary); }.ab__links { display: flex; gap: 2.4cqi; }.ab__link { width: 5.6cqi; height: 0.9cqi; border-radius: 1cqi; background: var(--paper-3); }.ab__img { left: 54%; top: 19%; width: 40%; height: 54%; border-radius: 1.2cqi; overflow: hidden; background: var(--paper-2); }.ab__art { position: absolute; inset: 0; background: var(--tertiary); transition: opacity .6s var(--ease-out); }.ab__art::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; border-top-right-radius: 100%; background: var(--secondary); }.ab__art::after { content: ""; position: absolute; right: 13%; top: 11%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--light); }.ab[data-sample="b"] .ab__art { background: var(--quaternary); }.ab[data-sample="b"] .ab__art::before { width: 50%; height: 100%; left: auto; right: 0; border-radius: 0; background: var(--tertiary); }.ab[data-sample="b"] .ab__art::after { left: 25%; right: auto; top: 25%; width: 50%; background: var(--primary); }.ab__title { left: 6%; top: 22%; width: 44%; margin: 0; font-size: 6.3cqi; font-weight: 780; line-height: 0.95; font-stretch: 80%; letter-spacing: -0.035em; color: var(--text-title); text-wrap: balance; }.ab__caret { display: none; width: 0.07em; height: 0.82em; margin-left: 0.04em; background: var(--primary); vertical-align: -0.06em; animation: blink 1s steps(1) infinite; }.ab__title.is-typing .ab__caret { display: inline-block; }@keyframes blink { 50% { opacity: 0; } }.ab__lines { left: 6%; top: 57%; width: 38%; display: grid; gap: 1.3cqi; }.ab__line { height: 1cqi; border-radius: 1cqi; background: var(--paper-3); }.ab__line:last-child { width: 68%; }.ab__btn { left: 6%; top: 69%; padding: 1.5cqi 2.8cqi 1.6cqi; font-size: 2.1cqi; font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap; color: var(--white); background: var(--primary); border-radius: 2.2cqi 0.5cqi; transition: background-color .5s var(--ease-out), opacity .5s var(--ease-out), transform .6s var(--ease-out); }.ab__btn.is-indigo { background: var(--tertiary); }.ab__cards { left: 6%; right: 6%; top: 82%; bottom: 6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqi; }.ab__card { background: var(--light); border-radius: 1cqi; }.ab__sel { border: 1.5px solid var(--secondary); border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity .3s, left .5s var(--ease-out), top .5s var(--ease-out), width .5s var(--ease-out), height .5s var(--ease-out); }.ab__sel::before, .ab__sel::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--white); border: 1.5px solid var(--secondary); }.ab__sel::before { left: -4px; top: -4px; }.ab__sel::after { right: -4px; bottom: -4px; }.ab__sel.is-on { opacity: 1; }.ab__size { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 7px); padding: 3px 6px 4px; border-radius: 4px; background: var(--secondary); color: var(--dark); font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }.ab__cursor { width: 15px; height: 19px; left: 82%; top: 88%; z-index: 3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M1 1v15l4-3.4 3 6.4 2.6-1.1-2.9-6.2H13Z' fill='%2319132e' stroke='white' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 2px 3px color-mix(in oklab, black 30%, transparent)); }.ab__cursor.is-on { opacity: 1; }.ab.is-run .ab__el { opacity: 0; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), clip-path .9s var(--ease-io), background-color .5s var(--ease-out); }.ab.is-run .ab__el.is-on { opacity: 1; }.ab.is-run .ab__img { clip-path: inset(0 100% 100% 0 round 1.2cqi); box-shadow: inset 0 0 0 1.5px var(--secondary); }.ab.is-run .ab__img.is-on { clip-path: inset(0 0 0 0 round 1.2cqi); }.ab.is-run .ab__img .ab__art { opacity: 0; }.ab.is-run .ab__img.is-art .ab__art { opacity: 1; }.ab.is-run .ab__btn { transform: scale(.6); transform-origin: 0 50%; }.ab.is-run .ab__btn.is-on { transform: none; }.ab.is-run .ab__cards { transform: translateY(8px); }.ab.is-run .ab__cards.is-on { transform: none; }.ab.is-clear .ab__el { opacity: 0 !important; transition-duration: .5s; }@media (max-width: 478px) { .ab { grid-template-columns: 40px minmax(0, 1fr); } .ab__tool { width: 26px; height: 26px; }}.sitemap { position: absolute; left: 0; right: 0; top: 4%; height: 80%; }.sitemap svg { display: block; width: 100%; height: 100%; }.sitemap .edge { fill: none; stroke: var(--text-body); stroke-width: 1.2; }.sitemap .node rect { fill: var(--white); }.sitemap .node text { font-size: 11px; font-weight: 600; fill: var(--text-title); }.sitemap .node--home rect { fill: var(--tertiary); }.sitemap .node--home text { fill: var(--white); }.sitemap .node--shop rect { fill: var(--secondary); }.sitemap .node--child rect { fill: var(--paper-3); }.sitemap .node--shopchild rect { fill: color-mix(in oklab, var(--secondary) 45%, var(--white)); }.seg { position: absolute; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 4px; width: max-content; max-width: calc(100% - 32px); padding: 4px; border-radius: 999px; background: var(--white); box-shadow: 0 1px 0 var(--line-paper); }.seg__btn { font: inherit; font-size: var(--text-xs); font-weight: 600; line-height: 1; letter-spacing: .01em; padding: 0.65em 1em; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--text-body); transition: background-color .3s, color .3s; }.seg__btn:hover { color: var(--text-title); }.seg__btn[aria-pressed="true"] { background: var(--text-title); color: var(--light); }.sitemap__count { position: absolute; right: 20px; top: 18px; font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-body); }@media (max-width: 478px) { .seg { left: 10px; bottom: 10px; max-width: calc(100% - 20px); } .seg__btn { font-size: var(--text-2xs); padding: 0.6em 0.8em; }}.ba { --pos: 50%; container-type: inline-size; touch-action: pan-y; }.ba__layer { position: absolute; inset: 7%; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -36px color-mix(in oklab, var(--tertiary) 60%, transparent); }.ba__layer > svg { display: block; width: 100%; height: 100%; }.ba__after { clip-path: inset(0 0 0 var(--pos)); }.ba__tag { position: absolute; bottom: calc(7% + 12px); z-index: 2; padding: 0.4em 0.75em 0.45em; border-radius: 999px; font-size: var(--text-2xs); font-weight: 600; line-height: 1.2; letter-spacing: .01em; background: color-mix(in oklab, var(--dark) 78%, transparent); color: var(--on-dark); pointer-events: none; }.ba__tag--before { left: calc(7% + 12px); }.ba__tag--after { right: calc(7% + 12px); }.ba__handle { position: absolute; top: 7%; bottom: 7%; left: calc(7% + var(--pos) * 0.86); width: 2px; margin-left: -1px; background: var(--white); z-index: 2; pointer-events: none; box-shadow: 0 0 0 1px color-mix(in oklab, var(--dark) 12%, transparent); }.ba__handle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--white); box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--dark) 50%, transparent); }.ba__handle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 10px; transform: translate(-50%, -50%); background: var(--text-title); clip-path: polygon(0 50%, 6px 0, 6px 50%, calc(100% - 6px) 50%, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, calc(100% - 6px) 50%, 6px 50%, 6px 100%); }.ba:has(.ba__range:focus-visible) .ba__handle::before { outline: 2px solid var(--secondary); outline-offset: 3px; }.ba__range { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }.hub-stage > .hub { position: absolute; inset: 0; width: 100%; height: 100%; }.hub text { font-family: inherit; letter-spacing: .005em; }.is-pending .gs-climb { transform: translateY(96px); }.is-pending .gs-drop { transform: translateY(-48px); }.is-pending .gs-tab { transform: translateX(-131px); }.process__visual .gs-out { opacity: 0; }.is-pending .gs-out { opacity: 1; }.is-live .gs-climb, .is-live .gs-drop, .is-live .gs-tab { transition: transform .8s var(--ease-io); }.is-live .gs-out { transition: opacity .4s ease; }@media (min-width: 992px) { .standards__list > .std--scene:nth-child(3n+2) > .process__visual { --sd: .3s; } .standards__list > .std--scene:nth-child(3n) > .process__visual { --sd: .6s; }}@media (min-width: 768px) and (max-width: 991px) { .standards__list > .std--scene:nth-child(2n) > .process__visual { --sd: .3s; }}