.visual-system{--visual-bg:var(--syn-surface-black);--visual-panel:var(--syn-surface-gray);min-height:100%;padding:var(--syn-space-32);color:var(--syn-white);background:var(--visual-bg)}.visual-system h1{font-size:var(--type-heading-1-size);margin:0}.visual-system h2{margin:0 0 var(--syn-space-16);font-size:var(--type-heading-2-size)}.visual-system p{font-size:var(--type-body-m-size);line-height:var(--type-body-m-line)}.visual-section{margin-top:var(--syn-space-32);padding-top:var(--syn-space-24);border-top:1px solid #ffffff24}.visual-row{gap:var(--syn-space-12);flex-wrap:wrap;align-items:center;display:flex}.v-button,.v-tab{min-height:var(--candidate-control-height);padding:0 var(--syn-space-20);border-radius:var(--candidate-control-radius);font-size:var(--type-action-m-size);border:0;font-weight:700}.v-button.primary{color:var(--syn-ink);background:var(--syn-neon-gold)}.v-button.secondary,.v-tab{color:var(--syn-white);background:var(--syn-surface-gray)}.v-button.outline{color:var(--syn-white);border:1px solid var(--syn-silver);background:0 0}.v-button.danger{color:var(--syn-white);background:var(--syn-error)}.v-tab.active{color:var(--syn-ink);background:var(--syn-white)}.v-field{gap:var(--syn-space-6);min-width:260px;color:var(--syn-silver);font-size:var(--type-body-s-size);display:grid}.v-field input{height:40px;padding:0 var(--syn-space-16);color:var(--syn-white);background:var(--syn-surface-gray);border:1px solid #555;border-radius:12px;outline:none}.v-field input:focus{border-color:var(--syn-neon-gold)}.v-card-grid{gap:var(--syn-space-section-sm);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.v-card{min-height:260px;color:var(--syn-white);background:var(--syn-surface-gray);border-radius:16px;overflow:hidden}.v-card-media{background:var(--card-accent,var(--syn-neon-cyan));height:150px}.v-card-body{padding:var(--syn-space-16)}.v-card-body h3{margin:0 0 var(--syn-space-8);font-size:var(--type-heading-3-size)}.v-card-body p{color:var(--syn-silver);font-size:var(--type-body-s-size);line-height:var(--type-body-s-line);margin:0}.v-badge{min-height:24px;padding:0 var(--syn-space-12);color:var(--syn-ink);background:var(--badge-color,var(--syn-neon-gold));font-size:var(--type-action-s-size);border-radius:999px;align-items:center;font-weight:700;display:inline-flex}.v-palette{gap:var(--syn-space-12);grid-template-columns:repeat(7,minmax(70px,1fr));display:grid}.v-swatch{min-height:78px;padding:var(--syn-space-8);color:var(--syn-ink);background:var(--swatch);border-radius:12px;align-items:end;font-size:10px;font-weight:700;display:flex}@media (width<=900px){.v-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v-palette{grid-template-columns:repeat(4,minmax(70px,1fr))}}@media (width<=560px){.visual-system{padding:var(--syn-space-20)}.v-card-grid{grid-template-columns:1fr}.v-palette{grid-template-columns:repeat(2,minmax(70px,1fr))}}.responsive-reference-page{--reference-canvas:#fff;--reference-top-bar:#ebebeb;--reference-content:#d6fe89;--reference-utility:#acffd6;box-sizing:border-box;color:#000;background:var(--reference-canvas);margin:0;font-family:OPPOSans,PingFang SC,Microsoft YaHei,sans-serif;font-weight:700;position:relative}.responsive-reference-page,.responsive-reference-page *{box-sizing:border-box}.responsive-reference-navigation,.responsive-reference-top-bar,.responsive-reference-content,.responsive-reference-utility{position:absolute}.responsive-reference-navigation-header{height:60px}.responsive-reference-navigation-body{height:calc(100% - 60px);position:relative}.responsive-reference-navigation-copy,.responsive-reference-center-copy{text-align:center;gap:22px;width:max-content;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.responsive-reference-navigation-copy{gap:26px}.responsive-reference-navigation-copy strong{font-size:34px;line-height:1}.responsive-reference-navigation-copy span{font-size:28px;line-height:1}.responsive-reference-top-bar{background:var(--reference-top-bar);justify-content:center;align-items:center;gap:48px;display:flex}.responsive-reference-top-bar strong{font-size:34px;line-height:1}.responsive-reference-top-bar span{font-size:28px;line-height:1}.responsive-reference-content{background:var(--reference-content)}.responsive-reference-utility{background:var(--reference-utility)}.responsive-reference-center-copy strong{font-size:52px;line-height:1}.responsive-reference-center-copy span{font-size:28px;line-height:1}.responsive-reference-measure{z-index:2;white-space:nowrap;font-size:24px;line-height:1;display:block;position:absolute}.responsive-reference-measure-content-top,.responsive-reference-measure-utility-top,.responsive-reference-measure-bottom{transform:translate(-50%)}.responsive-reference-measure-content-top{font-size:16px;top:63px}.responsive-reference-measure-left{left:2px;transform:translateY(-50%)}.responsive-reference-measure-gap{justify-content:center;display:flex}.responsive-reference-measure-utility-top{top:88px}.responsive-reference-measure-right{right:3px}.responsive-reference-measure-bottom{bottom:4px}html:has(.responsive-reference-page){background:#fff;width:max-content;min-width:100%;min-height:100%;margin:0;overflow:auto}body:has(.responsive-reference-page){background:#fff;width:max-content;min-width:100%;min-height:100%;margin:0;overflow:auto}#root:has(.responsive-reference-page){background:#fff;width:max-content;min-width:100%;min-height:100%;margin:0;overflow:auto}:root{--syn-motion-instant:80ms;--syn-motion-feedback:.12s;--syn-motion-component:.18s;--syn-motion-content:.2s;--syn-motion-settle:.22s;--syn-motion-container:.24s;--syn-motion-shared:.28s;--syn-motion-success:.32s;--syn-motion-reward:.56s;--syn-motion-milestone:.76s;--syn-motion-easter-egg:.9s;--syn-motion-maximum:1s;--syn-motion-tab-content:.16s;--syn-motion-toast-exit:.14s;--syn-motion-node-dock:.44s;--syn-motion-data-fold:.52s;--syn-motion-data-stitch:.62s;--syn-motion-notification-sway:1.08s;--syn-motion-publish-accent:1.2s;--syn-motion-like-wave-front:1.7s;--syn-motion-like-wave-rear:2.3s;--syn-motion-distance-xs:2px;--syn-motion-distance-sm:4px;--syn-motion-distance-md:8px;--syn-motion-distance-lg:12px;--syn-motion-distance-card-lift:3px;--syn-motion-scale-opening:.86;--syn-motion-scale-press:.98;--syn-motion-scale-hover:1.006;--syn-motion-scale-media:1.012;--syn-motion-scale-pop:1.03;--syn-motion-rotate-opening:6deg;--syn-motion-rotate-xs:4deg;--syn-motion-rotate-sm:6deg;--syn-motion-rotate-disclosure:180deg;--syn-motion-ease-enter:cubic-bezier(.22, 1, .36, 1);--syn-motion-ease-settle:cubic-bezier(.16, 1, .3, 1);--syn-motion-ease-standard:cubic-bezier(.2, 0, 0, 1);--syn-motion-ease-exit:ease-in;--syn-feedback-hidden-size:1px;--syn-agent-trace-min-width:88px;--syn-agent-trace-min-height:var(--syn-line-28);--syn-agent-trace-radius:var(--syn-space-8);--syn-agent-trace-color:var(--syn-ink);--syn-agent-trace-font-size:var(--type-body-s-size);--syn-agent-trace-sweep-width:var(--syn-space-24);--syn-data-stitch-height:var(--syn-space-2);--syn-feedback-version-color:#ff8a1f;--syn-feedback-node-size:var(--syn-space-8);--syn-feedback-fold-width:var(--syn-space-72);--syn-feedback-line-height:var(--syn-space-2);--syn-feedback-seal-min-width:44px;--syn-feedback-seal-radius:var(--syn-space-8);--syn-feedback-seal-color:#101014;--syn-feedback-seal-font-size:var(--type-body-s-size);--syn-feedback-circuit-width:76px;--syn-feedback-circuit-height:34px;--syn-feedback-circuit-border:var(--syn-space-2) solid currentColor;--syn-feedback-relay-width:var(--syn-space-72);--syn-feedback-relay-height:var(--syn-space-12);--syn-feedback-relay-line-width:var(--syn-space-56);--syn-feedback-echo-size:var(--syn-space-6)}html[data-runtime-view-transition],html[data-runtime-view-transition] body,html[data-runtime-motion],html[data-runtime-motion] body{background-color:#222}::view-transition-old(root){mix-blend-mode:normal;background-color:#222;animation:none}::view-transition-new(root){mix-blend-mode:normal;background-color:#222;animation:none}::view-transition-group(*){animation-duration:var(--syn-motion-shared);animation-timing-function:var(--syn-motion-ease-settle)}.syn-toggle-button[data-motion-tone=pulse] img,.syn-selection-button__indicator{transition:transform var(--syn-motion-component) var(--syn-motion-ease-enter)}.syn-feedback-anchor{position:relative;overflow:visible}.syn-feedback-anchor--span{flex:none;place-items:center;display:inline-grid}.syn-feedback-live-region{width:var(--syn-feedback-hidden-size);height:var(--syn-feedback-hidden-size);clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;position:fixed;overflow:hidden}.syn-agent-trace{min-width:var(--syn-agent-trace-min-width);min-height:var(--syn-agent-trace-min-height);border-radius:var(--syn-agent-trace-radius);color:var(--syn-agent-trace-color);background:color-mix(in srgb, var(--syn-color-accent-cyan,#42e8e0) 28%, #f4f4ef);font-family:var(--syn-type-label-family);font-size:var(--syn-agent-trace-font-size);font-weight:var(--syn-type-label-weight);justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:hidden}.syn-agent-trace>i{width:var(--syn-agent-trace-sweep-width);background:color-mix(in srgb, var(--syn-color-accent-cyan,#42e8e0) 68%, transparent);animation:syn-agent-trace var(--syn-motion-reward) var(--syn-motion-ease-standard) both;position:absolute;inset:0 auto 0 -24px}.syn-agent-trace>span{position:relative}@keyframes syn-agent-trace{0%{transform:translate(0)}to{transform:translate(112px)}}:where([data-motion-tone],[data-navigation-motion=tab],.figma-context-menu__row,.figma-context-popover__trigger,.figma-share-popover__action,.syn-content-tabs button,.syn-navigation-item,.syn-segmented-control button,.syn-selection-button,.syn-switch__control,.syn-track-tab-bar a){transform-origin:50%;transition:transform var(--syn-motion-feedback) var(--syn-motion-ease-enter)}:where([data-motion-tone],[data-navigation-motion=tab],.figma-context-menu__row,.figma-context-popover__trigger,.figma-share-popover__action,.syn-content-tabs button,.syn-navigation-item,.syn-segmented-control button,.syn-selection-button,.syn-switch__control,.syn-track-tab-bar a):active:not(:disabled):not([aria-disabled=true]){transform:scale(var(--syn-motion-scale-press))}.syn-icon-morph{place-items:center;width:100%;height:100%;display:inline-grid;position:relative}.syn-icon-morph__state{transition:opacity var(--syn-motion-tab-content) var(--syn-motion-ease-standard), transform var(--syn-motion-component) var(--syn-motion-ease-enter);place-items:center;display:grid;position:absolute;inset:0}.syn-icon-morph__state--active,.syn-icon-morph[data-active=true] .syn-icon-morph__state--default{opacity:0;transform:scale(.92)rotate(-5deg)}.syn-icon-morph[data-active=true] .syn-icon-morph__state--active{opacity:1;transform:scale(1)rotate(0)}.syn-toggle-button[data-motion-tone=pulse][aria-pressed=true] img{animation:syn-toggle-confirm var(--syn-motion-settle) var(--syn-motion-ease-enter)}@keyframes syn-toggle-confirm{45%{transform:scale(var(--syn-motion-scale-pop))}75%{transform:scale(.98)}}.syn-motion-count{display:inline-block}.syn-motion-count[data-direction=up]{animation:syn-motion-count-up var(--syn-motion-settle) var(--syn-motion-ease-enter)}.syn-motion-count[data-direction=down]{animation:syn-motion-count-down var(--syn-motion-tab-content) var(--syn-motion-ease-standard)}@keyframes syn-motion-count-up{0%{opacity:.3;transform:translateY(var(--syn-motion-distance-sm))}}@keyframes syn-motion-count-down{0%{opacity:.4;transform:translateY(calc(-1 * var(--syn-motion-distance-sm)))}}.syn-pulse-toast{z-index:120;box-sizing:border-box;align-items:center;gap:var(--syn-space-8);min-height:40px;padding:var(--syn-space-8) var(--syn-space-16) var(--syn-space-8) var(--syn-space-10);color:#00000e;font-family:var(--syn-type-label-family);font-size:var(--syn-type-label-size);line-height:var(--syn-type-label-line);pointer-events:none;transform-origin:50%;background:#bbfd3b;border-radius:999px;display:flex;position:fixed;top:76px;left:50%}.syn-pulse-toast__status{color:#bbfd3b;width:24px;height:24px;font-size:var(--syn-type-label-size);line-height:var(--syn-type-label-line);background:#00000e;border-radius:50%;place-items:center;display:grid;position:relative}.syn-pulse-toast[data-tone=info] .syn-pulse-toast__status{color:#00000e;background:var(--syn-color-accent-cyan,#42e8e0)}.syn-pulse-toast[data-tone=warning] .syn-pulse-toast__status{color:#00000e;background:var(--syn-color-accent-lime,#b5ff2d)}.syn-pulse-toast__message{z-index:1;position:relative}.syn-creation-spark{z-index:0;pointer-events:none;width:1px;height:1px;position:absolute;inset:50% auto auto 50%}.syn-creation-spark__particle{opacity:0;width:6px;height:6px;animation:syn-creation-spark-burst var(--syn-motion-reward) var(--syn-motion-ease-settle) both;animation-delay:var(--spark-delay);background:#fff6a5;position:absolute;top:-3px;left:-3px;transform:translate(0)rotate(0)scale(.45)}.syn-creation-spark__particle[data-shape="0"]{border-radius:50%}.syn-creation-spark__particle[data-shape="1"]{clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);background:var(--syn-color-accent-cyan,#42e8e0);width:7px;height:7px}.syn-creation-spark__particle[data-shape="2"]{background:#bbfd3b;border-radius:99px;width:8px;height:3px}.syn-data-stitch{z-index:1200;height:var(--syn-data-stitch-height);pointer-events:none;transform-origin:0;background:var(--syn-color-accent-cyan,#42e8e0);position:fixed}.syn-data-stitch[data-tone=collaboration],.syn-data-stitch[data-tone=success]{background:var(--syn-color-accent-lime,#b5ff2d)}.syn-data-stitch[data-tone=version]{background:var(--syn-feedback-version-color)}.syn-feedback-preset{z-index:1;width:var(--syn-feedback-hidden-size);height:var(--syn-feedback-hidden-size);color:var(--syn-color-accent-lime,#b5ff2d);pointer-events:none;position:absolute;inset:50% auto auto 50%}.syn-feedback-preset[data-tone=ai]{color:var(--syn-color-accent-cyan,#42e8e0)}.syn-feedback-preset[data-tone=version]{color:var(--syn-feedback-version-color)}.syn-feedback-preset--node-dock>i{width:var(--syn-feedback-node-size);height:var(--syn-feedback-node-size);animation:syn-node-dock var(--syn-motion-node-dock) var(--syn-motion-ease-settle) both;background:currentColor;border-radius:50%;position:absolute;top:-4px;left:-4px}.syn-feedback-preset--data-fold>i{width:var(--syn-feedback-fold-width);height:var(--syn-feedback-line-height);transform-origin:50%;animation:syn-data-fold var(--syn-motion-data-fold) var(--syn-motion-ease-settle) both;background:currentColor;position:absolute;left:-36px}.syn-feedback-preset--data-fold>i:first-child{top:-18px}.syn-feedback-preset--data-fold>i:last-child{top:16px}.syn-feedback-preset--version-seal>span{min-width:var(--syn-feedback-seal-min-width);padding:var(--syn-space-4) var(--syn-space-8);border-radius:var(--syn-feedback-seal-radius);color:var(--syn-feedback-seal-color);font-family:var(--syn-type-action-family);font-size:var(--syn-feedback-seal-font-size);font-weight:var(--syn-type-action-weight);text-align:center;animation:syn-version-seal var(--syn-motion-easter-egg) var(--syn-motion-ease-settle) both;background:currentColor;position:absolute;bottom:12px;left:0;transform:translate(-50%)}.syn-feedback-preset--team-circuit{width:var(--syn-feedback-circuit-width);height:var(--syn-feedback-circuit-height);border-bottom:var(--syn-feedback-circuit-border);animation:syn-circuit-line var(--syn-motion-maximum) var(--syn-motion-ease-enter) both;translate:-38px -17px}.syn-feedback-preset--team-circuit>i{width:var(--syn-feedback-node-size);height:var(--syn-feedback-node-size);animation:syn-circuit-node var(--syn-motion-maximum) var(--syn-motion-ease-settle) both;background:currentColor;border-radius:50%;position:absolute;bottom:-5px}.syn-feedback-preset--team-circuit>i:first-child{left:0}.syn-feedback-preset--team-circuit>i:nth-child(2){animation-delay:90ms;left:34px}.syn-feedback-preset--team-circuit>i:nth-child(3){animation-delay:.18s;right:0}.syn-feedback-preset--stage-relay{width:var(--syn-feedback-relay-width);height:var(--syn-feedback-relay-height);translate:-36px -6px}.syn-feedback-preset--stage-relay>i{width:var(--syn-feedback-node-size);height:var(--syn-feedback-node-size);background:currentColor;border-radius:50%;position:absolute;top:2px}.syn-feedback-preset--stage-relay>i:first-child{left:0}.syn-feedback-preset--stage-relay>i:last-child{animation:syn-relay-arrival var(--syn-motion-maximum) var(--syn-motion-ease-settle) both;right:0}.syn-feedback-preset--stage-relay>b{width:var(--syn-feedback-relay-line-width);height:var(--syn-feedback-line-height);transform-origin:0;animation:syn-relay-line var(--syn-motion-maximum) var(--syn-motion-ease-enter) both;background:currentColor;position:absolute;top:5px;left:8px}.syn-feedback-preset--discovery-echo>i{width:var(--syn-feedback-echo-size);height:var(--syn-feedback-echo-size);animation:syn-discovery-echo var(--syn-motion-easter-egg) var(--syn-motion-ease-settle) both;background:currentColor;border-radius:50%;position:absolute;top:-3px;left:-3px}.syn-feedback-preset--discovery-echo>i:first-child{--echo-x:-34px;--echo-y:-18px}.syn-feedback-preset--discovery-echo>i:nth-child(2){--echo-x:30px;--echo-y:-24px;animation-delay:70ms}.syn-feedback-preset--discovery-echo>i:nth-child(3){--echo-x:24px;--echo-y:28px;animation-delay:.14s}@keyframes syn-node-dock{0%{opacity:0;transform:translateY(8px)scale(.7)}48%{opacity:1;transform:translateY(0)scale(1.16)}to{opacity:0;transform:translateY(0)scale(1)}}@keyframes syn-data-fold{0%{opacity:0;transform:scaleX(1)}45%{opacity:.9;transform:scaleX(.36)}to{opacity:0;transform:scaleX(0)}}@keyframes syn-version-seal{0%{opacity:0;transform:translate(-50%,-8px)scale(.96)}34%{opacity:1;transform:translate(-50%)scale(1)}76%{opacity:1}to{opacity:0}}@keyframes syn-circuit-line{0%{opacity:0;transform:scaleX(0)}36%{opacity:.8;transform:scaleX(1)}to{opacity:0;transform:scaleX(1)}}@keyframes syn-circuit-node{0%,18%{opacity:0;transform:scale(.5)}42%,72%{opacity:1;transform:scale(1.18)}to{opacity:0;transform:scale(1)}}@keyframes syn-relay-line{0%{opacity:0;transform:scaleX(0)}45%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(1)}}@keyframes syn-relay-arrival{0%,40%{opacity:.4;transform:scale(.7)}62%{opacity:1;transform:scale(1.24)}to{opacity:0;transform:scale(1)}}@keyframes syn-discovery-echo{0%{opacity:0;transform:translate(0)scale(.5)}42%{opacity:.9;transform:translate(var(--echo-x), var(--echo-y)) scale(1)}to{opacity:0;transform:translate(var(--echo-x), var(--echo-y)) scale(.7)}}@keyframes syn-creation-spark-burst{0%{opacity:0;transform:translate(0)rotate(-8deg)scale(.45)}18%{opacity:1}68%{opacity:.95;transform:translate(var(--spark-x), var(--spark-y)) rotate(28deg) scale(1)}to{opacity:0;transform:translate(var(--spark-x), var(--spark-y)) rotate(45deg) scale(.35)}}.syn-pulse-toast[data-state=visible]{animation:syn-pulse-toast-in var(--syn-motion-success) var(--syn-motion-ease-enter) both}.syn-pulse-toast[data-state=hidden]{animation:syn-pulse-toast-out var(--syn-motion-toast-exit) var(--syn-motion-ease-exit) both}@keyframes syn-pulse-toast-in{0%{opacity:0;transform:translate(-50%, var(--syn-motion-distance-md)) scale(var(--syn-motion-scale-press))}68%{opacity:1;transform:translate(-50%, calc(-1 * var(--syn-motion-distance-xs))) scale(var(--syn-motion-scale-media))}to{opacity:1;transform:translate(-50%)scale(1)}}@keyframes syn-pulse-toast-out{0%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%, calc(-1 * var(--syn-motion-distance-sm))) scale(.99)}}html[data-feedback-mode=quiet] :where([data-motion-tone],[data-navigation-motion=tab],.figma-context-menu__row,.figma-context-popover__trigger,.figma-share-popover__action,.syn-content-tabs button,.syn-navigation-item,.syn-segmented-control button,.syn-selection-button,.syn-switch__control,.syn-track-tab-bar a){transition-duration:1ms!important}html[data-feedback-mode=quiet] :where([data-motion-tone],[data-navigation-motion=tab],.figma-context-menu__row,.figma-context-popover__trigger,.figma-share-popover__action,.syn-content-tabs button,.syn-navigation-item,.syn-segmented-control button,.syn-selection-button,.syn-switch__control,.syn-track-tab-bar a):active:not(:disabled):not([aria-disabled=true]){transform:none}html[data-feedback-mode=quiet] :where(.syn-creation-spark,.syn-feedback-preset,.syn-data-stitch,.syn-agent-trace>i){display:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}::view-transition-old(root){animation-duration:1ms!important}::view-transition-new(root){animation-duration:1ms!important}::view-transition-group(*){animation-duration:1ms!important}.syn-toggle-button[data-motion-tone=pulse] img,.syn-selection-button__indicator{transition-duration:1ms!important}.syn-toggle-button[data-motion-tone=pulse][aria-pressed=true] img{animation:none}.syn-motion-count,.syn-icon-morph__state,.syn-pulse-toast,.syn-creation-spark__particle,.syn-feedback-preset,.syn-data-stitch{animation-duration:1ms!important}.syn-creation-spark,.syn-feedback-preset,.syn-data-stitch,.syn-agent-trace>i{display:none}:where([data-motion-tone],[data-navigation-motion=tab],.figma-context-menu__row,.figma-context-popover__trigger,.figma-share-popover__action,.syn-content-tabs button,.syn-navigation-item,.syn-segmented-control button,.syn-selection-button,.syn-switch__control,.syn-track-tab-bar a):active:not(:disabled):not([aria-disabled=true]),.syn-icon-morph__state,.syn-icon-morph[data-active=true] .syn-icon-morph__state--active{transform:none}}.syn-product-opening{z-index:2147483000;color:#fff;isolation:isolate;transition:opacity var(--syn-motion-feedback) var(--syn-motion-ease-exit), visibility var(--syn-motion-feedback) step-end;background:radial-gradient(circle at 50% 46%,#bbfd3b1a,#0000 31%),#222;place-content:center;justify-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.syn-product-opening[data-phase=exiting]{visibility:hidden;opacity:0}.syn-product-opening__status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.syn-product-opening__stage{place-items:center;width:108px;height:108px;display:grid;position:relative}.syn-product-opening__mark{z-index:2;width:64px;height:64px;animation:syn-product-opening-mark var(--syn-motion-milestone) var(--syn-motion-ease-enter) both;position:relative}.syn-product-opening__orbit,.syn-product-opening__pulse{pointer-events:none;border-radius:50%;position:absolute}.syn-product-opening__orbit{border:2px solid #ffffff1f;border-top-color:var(--syn-neon-gold);animation:syn-product-opening-orbit var(--syn-motion-easter-egg) var(--syn-motion-ease-settle) both;border-right-color:#bbfd3b94;inset:5px}.syn-product-opening__pulse{animation:syn-product-opening-pulse var(--syn-motion-reward) var(--syn-motion-ease-enter) 1 both;border:1px solid #bbfd3b75;inset:18px}.syn-product-opening__wordmark{margin-top:var(--syn-space-12);color:#fff;font-family:var(--syn-type-display-family);font-size:clamp(30px,5vw,46px);font-weight:var(--syn-type-display-weight);letter-spacing:-.045em;line-height:var(--syn-leading-none);animation:syn-product-opening-copy var(--syn-motion-reward) var(--syn-motion-ease-enter) both;overflow:hidden}.syn-product-opening__wordmark span{color:var(--syn-neon-gold)}.syn-product-opening__tagline{margin:var(--syn-space-12) 0 0;color:#ffffffc7;font-family:var(--syn-type-label-family);font-size:var(--type-body-s-size);font-weight:var(--syn-type-label-weight);letter-spacing:.28em;animation:syn-product-opening-tagline var(--syn-motion-milestone) var(--syn-motion-ease-enter) both}@keyframes syn-product-opening-mark{0%{opacity:0;transform:translateY(var(--syn-motion-distance-md)) scale(var(--syn-motion-scale-opening)) rotate(calc(-1 * var(--syn-motion-rotate-opening)))}56%{opacity:1;transform:translateY(0) scale(var(--syn-motion-scale-pop)) rotate(1deg)}to{opacity:1;transform:translateY(0)scale(1)rotate(0)}}@keyframes syn-product-opening-orbit{0%{opacity:0;transform:rotate(-100deg)scale(.78)}35%{opacity:1}to{opacity:.86;transform:rotate(155deg)scale(1)}}@keyframes syn-product-opening-pulse{0%{opacity:0;transform:scale(.72)}40%{opacity:.72}to{opacity:0;transform:scale(1.42)}}@keyframes syn-product-opening-copy{0%,20%{opacity:0;transform:translateY(var(--syn-motion-distance-lg));clip-path:inset(100% 0 0)}to{opacity:1;clip-path:inset(0);transform:translateY(0)}}@keyframes syn-product-opening-tagline{0%,20%{opacity:0;transform:translateY(var(--syn-motion-distance-sm))}45%{opacity:.72;transform:translateY(var(--syn-motion-distance-xs))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.syn-product-opening,.syn-product-opening__mark,.syn-product-opening__orbit,.syn-product-opening__pulse,.syn-product-opening__wordmark,.syn-product-opening__tagline{transition-duration:1ms;animation:none}}