@layer reset,tokens,base;@layer components{.mobile-demo-notice-copy{gap:var(--fx-space-4);line-height:1.5;display:grid}.mobile-demo-notice-copy p{margin:0}.canvas-stage.marketing-demo-fallback{padding:0;position:relative;overflow:clip}.marketing-demo-fallback>.demo-loading{position:absolute;inset:0}.demo-loading{box-sizing:border-box;align-content:center;justify-items:center;gap:var(--fx-space-5);block-size:100%;inline-size:100%;padding:var(--fx-space-5);background:radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--fx-accent) 6%, transparent), transparent 60%), var(--fx-bg);text-align:center;font-family:var(--fx-font-body);font-size:var(--fx-font);color:var(--fx-text);display:grid}.demo-loading-mark{isolation:isolate;block-size:6rem;inline-size:6rem;border:var(--fx-border-width) solid color-mix(in srgb, var(--fx-accent) 30%, var(--fx-line));border-radius:var(--fx-radius-workspace);background:var(--fx-panel);color:var(--fx-accent);box-shadow:var(--fx-shadow-raised);place-items:center;margin-block-end:var(--fx-space-4);display:grid;position:relative}.demo-loading-mark svg{block-size:2.75rem;inline-size:2.75rem}.demo-loading-copy{gap:var(--fx-space-2);inline-size:min(100%,28rem);display:grid}.demo-loading-title,.demo-loading-description{margin:0;line-height:1.5}.demo-loading-title{font-weight:600}.demo-loading-description{color:var(--fx-muted)}.demo-loading-activity{gap:var(--fx-space-2);color:var(--fx-accent);display:flex}.demo-loading-activity span{opacity:.4;background:currentColor;border-radius:50%;block-size:.3rem;inline-size:.3rem}@media (prefers-reduced-motion:no-preference){.demo-loading-activity span{animation:.9s ease-in-out infinite alternate demo-loading-pulse}.demo-loading-activity span:nth-child(2){animation-delay:.15s}.demo-loading-activity span:nth-child(3){animation-delay:.3s}}@keyframes demo-loading-pulse{to{opacity:1}}.demo-toolbar-actions .demo-info-trigger,.demo-toolbar-actions .demo-product-action{min-block-size:var(--fx-rail-target-size,44px)}.demo-toolbar-actions .demo-info-trigger{min-inline-size:var(--fx-rail-target-size,44px)}.demo-product-action{padding-inline:var(--fx-control-space-3);gap:var(--fx-control-space-2);white-space:nowrap;font-weight:600}.demo-product-label-compact,.fx-studio-topbar[data-compact-captions] .demo-product-action :is(.demo-product-label,.marketing-platform-icons){display:none}.fx-studio-topbar[data-compact-captions] .demo-product-label-compact{display:inline}.demo-info-content,.demo-info-copy{gap:var(--fx-space-5);min-inline-size:0;font-family:var(--fx-font-body);font-size:var(--fx-font);overflow-wrap:anywhere;line-height:1.65;display:grid}.demo-info-content :where(p,h2),.demo-info-copy :where(p,h2){margin:0}.demo-info-copy h2{font-size:var(--fx-font);font-weight:600;line-height:1.5}.demo-info-copy a{color:var(--fx-text);text-underline-offset:.2em}.demo-info-artwork{inline-size:min(8rem,100%)}}@layer layouts{.shell:has(.demo-page){width:100%}.demo-workspace{box-sizing:border-box;flex-direction:column;block-size:100svh;min-block-size:0;padding:.5rem 1rem;display:flex}@media (scripting:enabled){:root:has(main>.demo-page){scrollbar-gutter:auto;overflow:hidden}body:has(main>.demo-page){block-size:100dvh;inline-size:100%;margin:0;overflow:hidden}body:has(main>.demo-page)>.shell,body:has(main>.demo-page) main,body:has(main>.demo-page) .demo-page{block-size:100%;min-block-size:0;inline-size:100%}body:has(main>.demo-page) main{block-size:100dvh;inline-size:100%;position:fixed;inset:0;overflow:hidden}body:has(main>.demo-page) .demo-workspace{block-size:100%;inline-size:100%;padding:0}body:has(main>.demo-page) .canvas-stage{border:0;border-radius:0}}.demo-stage,.demo-editor{flex-direction:column;flex:1 1 0;min-block-size:0;min-inline-size:0;display:flex}.demo-editor{position:relative}.demo-page .canvas-stage{flex:1 1 0;height:auto;min-height:0;margin:0;position:relative}.demo-page .canvas-stage>.fx-studio{position:absolute;inset:0}.demo-page .marketing-demo-fallback{inline-size:100%}.demo-editor .fx-studio{min-height:0}.demo-title{overflow-wrap:anywhere;font-size:1.25rem;line-height:1.4}.demo-page-heading{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.demo-noscript{gap:1.5rem;width:min(65ch,100% - 3rem);margin-inline:auto;padding-block:2rem;display:grid}@media (scripting:none){.demo-workspace{display:none}}.demo-action-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.demo-toolbar-actions{align-items:center;gap:var(--fx-space-5);display:flex}.demo-toolbar-actions>[data-demo-group]+[data-demo-group]{position:relative}.demo-toolbar-actions>[data-demo-group]+[data-demo-group]:before{content:"";inline-size:var(--fx-border-width);background:var(--fx-line);pointer-events:none;block-size:1.25rem;position:absolute;inset-block-start:50%;inset-inline-start:calc(var(--fx-space-5) / -2);translate:0 -50%}html.demo-fill{overflow:hidden}.demo-editor:fullscreen,html.demo-fill .demo-editor{background:var(--fx-bg);flex-direction:column;width:100%;height:100dvh;margin:0;display:flex}html.demo-fill .demo-editor{z-index:30;position:fixed;inset:0}.demo-editor:fullscreen .canvas-stage,html.demo-fill .demo-editor .canvas-stage{flex:1 1 0;min-height:0;margin:0}}@layer skins,density,utilities;