From 04fd4a9f34f411167c601c0c370073d84ac15d1a Mon Sep 17 00:00:00 2001 From: Foscat Date: Wed, 8 Jul 2026 01:52:54 -0500 Subject: [PATCH] Strengthen layout ecosystem bridge contracts Add the ecosystem design spec and bridge smoke coverage for UI Style Kit and Interactive Surface composition. Rebuild the distributed layout bridge assets so package output matches the authored contract. --- dist/layout-style-css.css | 10 + dist/layout-style-css.min.css | 2 +- dist/layout-ui-style-kit-bridge.css | 10 + ...interactive-layout-lab-ecosystem-design.md | 445 ++++++++++++++++++ styles/layout-ui-style-kit-bridge.css | 10 + test/demo-smoke.test.mjs | 27 ++ 6 files changed, 503 insertions(+), 1 deletion(-) create mode 100644 docs/superpowers/specs/2026-07-07-interactive-layout-lab-ecosystem-design.md diff --git a/dist/layout-style-css.css b/dist/layout-style-css.css index fa8d7c3..9484466 100644 --- a/dist/layout-style-css.css +++ b/dist/layout-style-css.css @@ -551,6 +551,16 @@ @layer ly.bridge { :where(.ly-root[data-ui][data-theme][data-mode], [data-ui][data-theme][data-mode] .ly-root) { --ly-ui-style-kit-bridge: 1; + + /* + Normalize UI kit root background geometry without redefining its paint. + Patterned theme layers should fill the viewport once instead of tiling. + */ + min-block-size: 100svh; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; } :where(.ly-root[data-ui="minimal-saas"], [data-ui="minimal-saas"] .ly-root) { diff --git a/dist/layout-style-css.min.css b/dist/layout-style-css.min.css index 65b9f3c..a3c38e0 100644 --- a/dist/layout-style-css.min.css +++ b/dist/layout-style-css.min.css @@ -1 +1 @@ -@layer ly.tokens{:where(.ly-root){--ly-space-0:0;--ly-space-1:0.25rem;--ly-space-2:0.5rem;--ly-space-3:0.75rem;--ly-space-4:1rem;--ly-space-5:1.5rem;--ly-space-6:2rem;--ly-space-7:3rem;--ly-space-8:4rem;--ly-space-9:6rem;--ly-container-sm:40rem;--ly-container-md:56rem;--ly-container-lg:72rem;--ly-container-xl:88rem;--ly-container-wide:112rem;--ly-container-max:var(--ly-container-lg);--ly-content-readable:68ch;--ly-page-padding-inline:clamp(1rem,4vw,3rem);--ly-section-padding-block:clamp(3rem,7vw,6rem);--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-grid-columns:12;--ly-grid-min:16rem;--ly-card-grid-min:16rem;--ly-card-size-sm:10rem;--ly-card-size-md:14rem;--ly-card-size-lg:18rem;--ly-gallery-min:12rem;--ly-carousel-item-min:16rem;--ly-carousel-item-max:28rem;--ly-sidebar-min:14rem;--ly-sidebar-width:18rem;--ly-sidebar-max:22rem;--ly-pane-fixed:22rem;--ly-header-height:4.5rem;--ly-radius-sm:0.5rem;--ly-radius:0.875rem;--ly-radius-lg:1.5rem;--ly-radius-xl:2.25rem;--ly-z-header:20;--ly-z-sidebar:10}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){min-width:0;margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas){max-width:100%}}@layer ly.layout{.ly-page{min-height:100svh}.ly-header,.ly-footer,.ly-main,.ly-wrapper,.ly-section,.ly-surface{min-width:0}.ly-header{min-height:var(--ly-header-height)}.ly-header--sticky{position:sticky;top:0;z-index:var(--ly-z-header)}.ly-container,.ly-wrapper{width:min(100% - (var(--ly-page-padding-inline) * 2),var(--ly-container-max));margin-inline:auto}.ly-container--sm,.ly-wrapper--sm{--ly-container-max:var(--ly-container-sm)}.ly-container--md,.ly-wrapper--md{--ly-container-max:var(--ly-container-md)}.ly-container--lg,.ly-wrapper--lg{--ly-container-max:var(--ly-container-lg)}.ly-container--xl,.ly-wrapper--xl{--ly-container-max:var(--ly-container-xl)}.ly-container--wide,.ly-wrapper--wide{--ly-container-max:var(--ly-container-wide)}.ly-container--fluid,.ly-wrapper--fluid{width:100%;max-width:none;padding-inline:var(--ly-page-padding-inline)}.ly-wrapper--readable{--ly-container-max:var(--ly-content-readable)}.ly-readable{max-width:var(--ly-content-readable)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{--ly-section-padding-block:var(--ly-space-7)}.ly-section--flush{--ly-section-padding-block:0}.ly-stack{display:flex;flex-direction:column;gap:var(--ly-stack-gap)}.ly-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-button-group>*{flex:0 1 auto;min-width:min(100%,var(--ly-button-min,8rem))}.ly-grid{display:grid;grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr));gap:var(--ly-grid-gap)}.ly-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr))}.ly-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr));gap:var(--ly-grid-gap)}.ly-card-grid>*{min-width:0}.ly-card-sm{min-block-size:var(--ly-card-size-sm)}.ly-card-md{min-block-size:var(--ly-card-size-md)}.ly-card-lg{min-block-size:var(--ly-card-size-lg)}.ly-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr));gap:var(--ly-grid-gap)}.ly-gallery>*{min-width:0}.ly-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,var(--ly-carousel-item-min)),var(--ly-carousel-item-max));gap:var(--ly-grid-gap);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}.ly-carousel>*{min-width:0;scroll-snap-align:start}.ly-row{display:flex;flex-wrap:wrap;margin-inline:calc(var(--ly-gutter,var(--ly-gap)) * -0.5)}.ly-col{flex:1 1 0;min-width:0;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-sidebar-layout{display:grid;grid-template-columns:1fr;gap:var(--ly-gap)}.ly-sidebar-layout>*{min-width:0}.ly-sidebar{min-width:0}.ly-content{min-width:0}.ly-split{display:grid;grid-template-columns:1fr;gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-split>*{min-width:0}.ly-panes{display:grid;grid-template-columns:1fr;gap:var(--ly-gap)}.ly-panes>*{min-width:0}.ly-surface{border-radius:var(--ly-radius)}.ly-surface--raised{border-radius:var(--ly-radius-lg)}.ly-divider{min-height:1px;margin-block:var(--ly-space-5)}.ly-frame{aspect-ratio:var(--ly-frame-ratio,16 / 9);overflow:hidden}.ly-frame>*{width:100%;height:100%;object-fit:cover}.ly-scroll-area{min-height:0;overflow:auto}.ly-app-shell{min-height:100svh;display:grid;grid-template-areas:"header" "main";grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.ly-app-header{grid-area:header;min-width:0}.ly-app-sidebar{grid-area:sidebar;display:none;min-width:0}.ly-app-main{grid-area:main;min-width:0}.ly-visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}@layer ly.responsive{@media (min-width:48rem){.ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,var(--ly-sidebar-min)),var(--ly-sidebar-width)) minmax(0,1fr)}.ly-app-sidebar{display:block;position:sticky;top:0;z-index:var(--ly-z-sidebar);height:100svh;overflow:auto}.ly-sidebar-layout{grid-template-columns:minmax(min(100%,var(--ly-sidebar-min)),var(--ly-sidebar-max)) minmax(0,1fr);align-items:start}.ly-sidebar-layout--right{grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-sidebar-min)),var(--ly-sidebar-max))}.ly-split{grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}.ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-pane-fixed)),0.7fr)}}@media (min-width:64rem){.ly-panes--three{grid-template-columns:minmax(min(100%,14rem),0.35fr) minmax(0,1fr) minmax(min(100%,14rem),0.35fr)}}}@layer ly.utilities{.ly-cols-1{--ly-grid-columns:1}.ly-cols-2{--ly-grid-columns:2}.ly-cols-3{--ly-grid-columns:3}.ly-cols-4{--ly-grid-columns:4}.ly-cols-5{--ly-grid-columns:5}.ly-cols-6{--ly-grid-columns:6}.ly-cols-7{--ly-grid-columns:7}.ly-cols-8{--ly-grid-columns:8}.ly-cols-9{--ly-grid-columns:9}.ly-cols-10{--ly-grid-columns:10}.ly-cols-11{--ly-grid-columns:11}.ly-cols-12{--ly-grid-columns:12}.ly-cols-16{--ly-grid-columns:16}.ly-span-1{grid-column:span 1}.ly-span-2{grid-column:span 2}.ly-span-3{grid-column:span 3}.ly-span-4{grid-column:span 4}.ly-span-5{grid-column:span 5}.ly-span-6{grid-column:span 6}.ly-span-7{grid-column:span 7}.ly-span-8{grid-column:span 8}.ly-span-9{grid-column:span 9}.ly-span-10{grid-column:span 10}.ly-span-11{grid-column:span 11}.ly-span-12{grid-column:span 12}.ly-span-13{grid-column:span 13}.ly-span-14{grid-column:span 14}.ly-span-15{grid-column:span 15}.ly-span-16{grid-column:span 16}.ly-span-full{grid-column:1 / -1}.ly-col-1{flex:0 0 auto;width:8.333333%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-2{flex:0 0 auto;width:16.666667%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-3{flex:0 0 auto;width:25%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-4{flex:0 0 auto;width:33.333333%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-5{flex:0 0 auto;width:41.666667%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-6{flex:0 0 auto;width:50%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-7{flex:0 0 auto;width:58.333333%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-8{flex:0 0 auto;width:66.666667%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-9{flex:0 0 auto;width:75%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-10{flex:0 0 auto;width:83.333333%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-11{flex:0 0 auto;width:91.666667%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-12{flex:0 0 auto;width:100%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-gap-0{--ly-gap:var(--ly-space-0);--ly-grid-gap:var(--ly-space-0);--ly-stack-gap:var(--ly-space-0);--ly-cluster-gap:var(--ly-space-0)}.ly-gap-1{--ly-gap:var(--ly-space-1);--ly-grid-gap:var(--ly-space-1);--ly-stack-gap:var(--ly-space-1);--ly-cluster-gap:var(--ly-space-1)}.ly-gap-2{--ly-gap:var(--ly-space-2);--ly-grid-gap:var(--ly-space-2);--ly-stack-gap:var(--ly-space-2);--ly-cluster-gap:var(--ly-space-2)}.ly-gap-3{--ly-gap:var(--ly-space-3);--ly-grid-gap:var(--ly-space-3);--ly-stack-gap:var(--ly-space-3);--ly-cluster-gap:var(--ly-space-3)}.ly-gap-4{--ly-gap:var(--ly-space-4);--ly-grid-gap:var(--ly-space-4);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-4)}.ly-gap-5{--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-space-5);--ly-stack-gap:var(--ly-space-5);--ly-cluster-gap:var(--ly-space-5)}.ly-gap-6{--ly-gap:var(--ly-space-6);--ly-grid-gap:var(--ly-space-6);--ly-stack-gap:var(--ly-space-6);--ly-cluster-gap:var(--ly-space-6)}.ly-gap-7{--ly-gap:var(--ly-space-7);--ly-grid-gap:var(--ly-space-7);--ly-stack-gap:var(--ly-space-7);--ly-cluster-gap:var(--ly-space-7)}.ly-gap-8{--ly-gap:var(--ly-space-8);--ly-grid-gap:var(--ly-space-8);--ly-stack-gap:var(--ly-space-8);--ly-cluster-gap:var(--ly-space-8)}.ly-gap-9{--ly-gap:var(--ly-space-9);--ly-grid-gap:var(--ly-space-9);--ly-stack-gap:var(--ly-space-9);--ly-cluster-gap:var(--ly-space-9)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-1{padding:var(--ly-space-1)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-3{padding:var(--ly-space-3)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-5{padding:var(--ly-space-5)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-7{padding:var(--ly-space-7)}.ly-pad-8{padding:var(--ly-space-8)}.ly-pad-9{padding:var(--ly-space-9)}.ly-px-4{padding-inline:var(--ly-space-4)}.ly-px-6{padding-inline:var(--ly-space-6)}.ly-px-8{padding-inline:var(--ly-space-8)}.ly-py-4{padding-block:var(--ly-space-4)}.ly-py-6{padding-block:var(--ly-space-6)}.ly-py-8{padding-block:var(--ly-space-8)}.ly-mx-auto{margin-inline:auto}.ly-w-full{width:100%}.ly-h-full{height:100%}.ly-min-h-screen{min-height:100svh}.ly-bleed{width:100vw;margin-inline:calc(50% - 50vw)}.ly-overflow-auto{overflow:auto}.ly-overflow-hidden{overflow:hidden}.ly-items-start{align-items:flex-start}.ly-items-center{align-items:center}.ly-items-end{align-items:flex-end}.ly-items-stretch{align-items:stretch}.ly-justify-start{justify-content:flex-start}.ly-justify-center{justify-content:center}.ly-justify-end{justify-content:flex-end}.ly-justify-between{justify-content:space-between}.ly-frame-1x1{--ly-frame-ratio:1 / 1}.ly-frame-2x1{--ly-frame-ratio:2 / 1}.ly-frame-3x2{--ly-frame-ratio:3 / 2}.ly-frame-4x3{--ly-frame-ratio:4 / 3}.ly-frame-16x9{--ly-frame-ratio:16 / 9}.ly-frame-21x9{--ly-frame-ratio:21 / 9}.ly-hidden{display:none !important}.ly-show-md-up,.ly-show-lg-up{display:none !important}@media (min-width:48rem){.ly-md-cols-1{--ly-grid-columns:1}.ly-md-cols-2{--ly-grid-columns:2}.ly-md-cols-3{--ly-grid-columns:3}.ly-md-cols-4{--ly-grid-columns:4}.ly-md-cols-6{--ly-grid-columns:6}.ly-md-cols-8{--ly-grid-columns:8}.ly-md-cols-12{--ly-grid-columns:12}.ly-md-cols-16{--ly-grid-columns:16}.ly-show-md-up{display:revert !important}}@media (min-width:64rem){.ly-lg-cols-1{--ly-grid-columns:1}.ly-lg-cols-2{--ly-grid-columns:2}.ly-lg-cols-3{--ly-grid-columns:3}.ly-lg-cols-4{--ly-grid-columns:4}.ly-lg-cols-6{--ly-grid-columns:6}.ly-lg-cols-8{--ly-grid-columns:8}.ly-lg-cols-12{--ly-grid-columns:12}.ly-lg-cols-16{--ly-grid-columns:16}.ly-show-lg-up{display:revert !important}}}@layer ly.bridge{:where(.ly-root[data-ui][data-theme][data-mode],[data-ui][data-theme][data-mode] .ly-root){--ly-ui-style-kit-bridge:1}:where(.ly-root[data-ui="minimal-saas"],[data-ui="minimal-saas"] .ly-root){--ly-ui-style-kit-bridge-style:minimal-saas}:where(.ly-root[data-ui="bento"],[data-ui="bento"] .ly-root){--ly-ui-style-kit-bridge-style:bento}:where(.ly-root[data-ui="maximalist"],[data-ui="maximalist"] .ly-root){--ly-ui-style-kit-bridge-style:maximalist}:where(.ly-root[data-ui="bauhaus"],[data-ui="bauhaus"] .ly-root){--ly-ui-style-kit-bridge-style:bauhaus}:where(.ly-root[data-ui="tactile"],[data-ui="tactile"] .ly-root){--ly-ui-style-kit-bridge-style:tactile}:where(.ly-root[data-ui="neumorphism"],[data-ui="neumorphism"] .ly-root){--ly-ui-style-kit-bridge-style:neumorphism}:where(.ly-root[data-ui="retrofuturism"],[data-ui="retrofuturism"] .ly-root){--ly-ui-style-kit-bridge-style:retrofuturism}:where(.ly-root[data-ui="brutalism"],[data-ui="brutalism"] .ly-root){--ly-ui-style-kit-bridge-style:brutalism}:where(.ly-root[data-ui="cyberpunk"],[data-ui="cyberpunk"] .ly-root){--ly-ui-style-kit-bridge-style:cyberpunk}:where(.ly-root[data-ui="y2k"],[data-ui="y2k"] .ly-root){--ly-ui-style-kit-bridge-style:y2k}:where(.ly-root[data-ui="retro-glass"],[data-ui="retro-glass"] .ly-root){--ly-ui-style-kit-bridge-style:retro-glass}:where(.saas-container,.bento-container,.max-container,.bau-container,.tactile-container,.neo-container,.retro-container,.brutal-container,.cyber-container,.y2k-container,.rg-container){width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max));margin-inline:auto}:where(.saas-section,.bento-section,.max-section,.bau-section,.tactile-section,.neo-section,.retro-section,.brutal-section,.cyber-section,.y2k-section,.rg-section){padding-block:var(--ly-section-padding-block)}:where(.saas-stack,.bento-stack,.max-stack,.bau-stack,.tactile-stack,.neo-stack,.retro-stack,.brutal-stack,.cyber-stack,.y2k-stack,.rg-stack){display:flex;flex-direction:column;gap:var(--ly-stack-gap)}:where(.saas-cluster,.bento-cluster,.max-cluster,.bau-cluster,.tactile-cluster,.neo-cluster,.retro-cluster,.brutal-cluster,.cyber-cluster,.y2k-cluster,.rg-cluster){display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}:where(.saas-grid,.bento-grid,.max-grid,.bau-grid,.tactile-grid,.neo-grid,.retro-grid,.brutal-grid,.cyber-grid,.y2k-grid,.rg-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr));gap:var(--ly-grid-gap)}:where(.saas-split,.bento-split,.max-split,.bau-split,.tactile-split,.neo-split,.retro-split,.brutal-split,.cyber-split,.y2k-split,.rg-split){display:grid;grid-template-columns:1fr;gap:var(--ly-gap);align-items:var(--ly-split-align,center)}:where(.saas-split,.bento-split,.max-split,.bau-split,.tactile-split,.neo-split,.retro-split,.brutal-split,.cyber-split,.y2k-split,.rg-split)>*{min-width:0}:where(.saas-button-group,.bento-button-group,.max-button-group,.bau-button-group,.tactile-button-group,.neo-button-group,.retro-button-group,.brutal-button-group,.cyber-button-group,.y2k-button-group,.rg-button-group){display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}:where(.saas-button-group,.bento-button-group,.max-button-group,.bau-button-group,.tactile-button-group,.neo-button-group,.retro-button-group,.brutal-button-group,.cyber-button-group,.y2k-button-group,.rg-button-group)>*{flex:0 1 auto;min-width:min(100%,var(--ly-button-min,8rem))}:where(.saas-card-grid,.bento-card-grid,.max-card-grid,.bau-card-grid,.tactile-card-grid,.neo-card-grid,.retro-card-grid,.brutal-card-grid,.cyber-card-grid,.y2k-card-grid,.rg-card-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr));gap:var(--ly-grid-gap)}:where(.saas-card-grid,.bento-card-grid,.max-card-grid,.bau-card-grid,.tactile-card-grid,.neo-card-grid,.retro-card-grid,.brutal-card-grid,.cyber-card-grid,.y2k-card-grid,.rg-card-grid)>*{min-width:0}:where(.saas-card-sm,.bento-card-sm,.max-card-sm,.bau-card-sm,.tactile-card-sm,.neo-card-sm,.retro-card-sm,.brutal-card-sm,.cyber-card-sm,.y2k-card-sm,.rg-card-sm){min-block-size:var(--ly-card-size-sm)}:where(.saas-card-md,.bento-card-md,.max-card-md,.bau-card-md,.tactile-card-md,.neo-card-md,.retro-card-md,.brutal-card-md,.cyber-card-md,.y2k-card-md,.rg-card-md){min-block-size:var(--ly-card-size-md)}:where(.saas-card-lg,.bento-card-lg,.max-card-lg,.bau-card-lg,.tactile-card-lg,.neo-card-lg,.retro-card-lg,.brutal-card-lg,.cyber-card-lg,.y2k-card-lg,.rg-card-lg){min-block-size:var(--ly-card-size-lg)}:where(.saas-gallery,.bento-gallery,.max-gallery,.bau-gallery,.tactile-gallery,.neo-gallery,.retro-gallery,.brutal-gallery,.cyber-gallery,.y2k-gallery,.rg-gallery){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr));gap:var(--ly-grid-gap)}:where(.saas-gallery,.bento-gallery,.max-gallery,.bau-gallery,.tactile-gallery,.neo-gallery,.retro-gallery,.brutal-gallery,.cyber-gallery,.y2k-gallery,.rg-gallery)>*{min-width:0}:where(.saas-carousel,.bento-carousel,.max-carousel,.bau-carousel,.tactile-carousel,.neo-carousel,.retro-carousel,.brutal-carousel,.cyber-carousel,.y2k-carousel,.rg-carousel){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,var(--ly-carousel-item-min)),var(--ly-carousel-item-max));gap:var(--ly-grid-gap);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}:where(.saas-carousel,.bento-carousel,.max-carousel,.bau-carousel,.tactile-carousel,.neo-carousel,.retro-carousel,.brutal-carousel,.cyber-carousel,.y2k-carousel,.rg-carousel)>*{min-width:0;scroll-snap-align:start}@media (min-width:48rem){:where(.saas-split,.bento-split,.max-split,.bau-split,.tactile-split,.neo-split,.retro-split,.brutal-split,.cyber-split,.y2k-split,.rg-split){grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}}}@layer ly.styles.minimal_saas{:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas){--ly-container-max:88rem;--ly-page-padding-inline:clamp(1rem,3vw,2.5rem);--ly-section-padding-block:clamp(2rem,5vw,4rem);--ly-sidebar-width:clamp(15rem,18vw,19rem);--ly-grid-min:16rem;--ly-gap:clamp(1rem,2vw,1.75rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.875rem,1.6vw,1.35rem)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-app-main{padding-block:clamp(1rem,2vw,2rem)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-container,:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,14rem),var(--ly-sidebar-width)) minmax(0,1fr)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,1fr)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-split,:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,18rem),0.44fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-panes--three{grid-template-columns:minmax(min(100%,13rem),0.22fr) minmax(0,1fr) minmax(min(100%,16rem),0.32fr)}}}@layer ly.styles.bento{:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento){--ly-container-max:104rem;--ly-page-padding-inline:clamp(1rem,3.5vw,3rem);--ly-section-padding-block:clamp(2rem,6vw,5rem);--ly-sidebar-width:clamp(13rem,16vw,17rem);--ly-grid-min:14rem;--ly-gap:clamp(1rem,2.5vw,2rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2vw,1.75rem)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-app-main{padding-block:clamp(1rem,3vw,2.5rem)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-container,:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,13rem),0.26fr) minmax(0,1fr)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-app-sidebar{display:block;position:sticky;top:var(--ly-space-3);height:calc(100svh - (var(--ly-space-3) * 2));margin:var(--ly-space-3) 0 var(--ly-space-3) var(--ly-space-3);overflow:auto}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-grid--auto>:nth-child(4n + 1){grid-column:span 2;min-height:14rem}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,12rem),0.3fr) minmax(0,1fr)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-split{grid-template-columns:minmax(0,0.78fr) minmax(min(100%,18rem),1.22fr)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-panes--two{grid-template-columns:minmax(0,1.18fr) minmax(min(100%,18rem),0.82fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-panes--three{grid-template-columns:minmax(min(100%,12rem),0.6fr) minmax(0,1.4fr) minmax(min(100%,14rem),0.8fr)}}}@layer ly.styles.maximalist{:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist){--ly-container-max:102rem;--ly-page-padding-inline:clamp(1rem,6vw,5.5rem);--ly-section-padding-block:clamp(4rem,13vw,10rem);--ly-sidebar-width:clamp(13rem,18vw,20rem);--ly-grid-min:14rem;--ly-gap:clamp(1.25rem,4vw,3rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1.5rem,4vw,3.5rem)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-app-main{padding-block:clamp(1rem,3vw,3rem)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-container,:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-section{padding-block:clamp(3.5rem,11vw,8rem)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-split{align-items:stretch}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-grid--auto{grid-auto-rows:minmax(10rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-split{grid-template-columns:1fr}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-grid--auto>:nth-child(5n + 1){grid-column:span 2;min-height:24rem}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-grid--auto>:nth-child(5n + 3){transform:translateY(var(--ly-space-7))}}@media (min-width:56rem){:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,13rem),0.28fr)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-app-sidebar{display:block;position:sticky;top:calc(var(--ly-gap) * 1.5);height:max-content;margin-block:clamp(2rem,8vw,7rem);transform:translateX(calc(var(--ly-gap) * -0.35));overflow:auto}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-sidebar-layout{grid-template-columns:minmax(0,1.55fr) minmax(min(100%,15rem),0.45fr)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-split{grid-template-columns:minmax(0,1.62fr) minmax(min(100%,16rem),0.54fr);gap:clamp(1.5rem,6vw,5rem)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-panes--two{grid-template-columns:minmax(min(100%,16rem),0.44fr) minmax(0,1.56fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-panes--three{grid-template-columns:minmax(min(100%,14rem),0.34fr) minmax(0,1.28fr) minmax(min(100%,18rem),0.58fr)}}}@layer ly.styles.bauhaus{:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus){--ly-container-max:92rem;--ly-page-padding-inline:clamp(1rem,2vw,2rem);--ly-section-padding-block:clamp(2.5rem,5vw,4.5rem);--ly-sidebar-width:clamp(8rem,12vw,12rem);--ly-grid-min:13rem;--ly-gap:clamp(0.75rem,1.6vw,1.25rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.75rem,1.5vw,1.25rem)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-app-main{padding-block:clamp(0.75rem,2vw,1.5rem)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-container,:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-grid--auto{grid-auto-rows:minmax(7rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,7rem),0.18fr) minmax(0,1fr)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,8rem),0.22fr) minmax(0,1fr)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,12rem),0.5fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-panes--three{grid-template-columns:minmax(min(100%,10rem),0.25fr) minmax(0,1fr) minmax(min(100%,10rem),0.25fr)}}}@layer ly.styles.tactile{:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile){--ly-container-max:98rem;--ly-page-padding-inline:clamp(1rem,3vw,2.75rem);--ly-section-padding-block:clamp(2rem,5vw,4rem);--ly-sidebar-width:clamp(18rem,22vw,24rem);--ly-grid-min:15rem;--ly-gap:clamp(1rem,2.2vw,1.75rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2vw,1.75rem)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-app-main{padding-block:clamp(1rem,2.5vw,2rem)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-container,:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,18rem),var(--ly-sidebar-width)) minmax(0,1fr)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,18rem),0.42fr) minmax(0,1fr)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-split{grid-template-columns:minmax(0,1.18fr) minmax(min(100%,18rem),0.82fr)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,20rem),0.62fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-panes--three{grid-template-columns:minmax(min(100%,17rem),0.4fr) minmax(0,1fr) minmax(min(100%,18rem),0.46fr)}}}@layer ly.styles.neumorphism{:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism){--ly-container-max:86rem;--ly-page-padding-inline:clamp(1.25rem,5vw,4rem);--ly-section-padding-block:clamp(3rem,8vw,6rem);--ly-sidebar-width:clamp(16rem,20vw,20rem);--ly-grid-min:16rem;--ly-gap:clamp(1.25rem,3vw,2.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1.25rem,2.5vw,2rem)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-app-main{padding-block:clamp(2rem,5vw,4rem)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-container,:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:56rem){:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),0.34fr);align-items:start}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-app-sidebar{display:block;position:sticky;top:clamp(1rem,3vw,2rem);max-height:calc(100svh - clamp(2rem,6vw,4rem));margin:clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem) 0;overflow:auto}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-sidebar-layout{grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),0.42fr)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-split{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.5fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-panes--three{grid-template-columns:minmax(min(100%,15rem),0.38fr) minmax(0,1fr) minmax(min(100%,15rem),0.38fr)}}}@layer ly.styles.retrofuturism{:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism){--ly-container-max:110rem;--ly-page-padding-inline:clamp(1rem,4vw,4rem);--ly-section-padding-block:clamp(3rem,8vw,7rem);--ly-sidebar-width:clamp(12rem,14vw,16rem);--ly-grid-min:15rem;--ly-gap:clamp(1rem,3vw,2.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2.4vw,2rem)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-app-main{padding-block:clamp(1.5rem,4vw,3rem)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-container,:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:56rem){:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-app-shell{grid-template-areas:"header header header" "sidebar main main";grid-template-columns:minmax(min(100%,12rem),0.24fr) minmax(0,1fr) minmax(min(100%,12rem),0.24fr)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-app-sidebar{display:block;position:sticky;top:clamp(1rem,2vw,1.5rem);height:calc(100svh - clamp(2rem,4vw,3rem));margin:clamp(1rem,2vw,1.5rem) 0 clamp(1rem,2vw,1.5rem) clamp(1rem,2vw,1.5rem);overflow:auto}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,12rem),0.32fr) minmax(0,1fr)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-split{grid-template-columns:minmax(0,1.35fr) minmax(min(100%,16rem),0.65fr)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-panes--two{grid-template-columns:minmax(min(100%,14rem),0.44fr) minmax(0,1.2fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-panes--three{grid-template-columns:minmax(min(100%,12rem),0.44fr) minmax(0,1.4fr) minmax(min(100%,12rem),0.44fr)}}}@layer ly.styles.brutalism{:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism){--ly-container-max:100vw;--ly-page-padding-inline:clamp(0.75rem,3vw,3rem);--ly-section-padding-block:clamp(2rem,6vw,5rem);--ly-sidebar-width:clamp(12rem,15vw,16rem);--ly-grid-min:12rem;--ly-gap:clamp(0.75rem,2vw,1.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.75rem,2vw,1.5rem)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-app-main{padding-block:0}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-container,:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-wrapper{width:min(100%,var(--ly-container-max))}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-grid--auto{grid-auto-rows:minmax(7rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,12rem),0.22fr)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-sidebar-layout{grid-template-columns:minmax(0,1.55fr) minmax(min(100%,12rem),0.45fr)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-split{grid-template-columns:minmax(0,1.7fr) minmax(min(100%,12rem),0.3fr)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-panes--two{grid-template-columns:minmax(min(100%,12rem),0.35fr) minmax(0,1.65fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-panes--three{grid-template-columns:minmax(min(100%,11rem),0.28fr) minmax(0,1.42fr) minmax(min(100%,14rem),0.4fr)}}}@layer ly.styles.cyberpunk{:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk){--ly-container-max:104rem;--ly-page-padding-inline:clamp(0.75rem,2vw,2rem);--ly-section-padding-block:clamp(2rem,5vw,4rem);--ly-sidebar-width:clamp(10rem,12vw,12.5rem);--ly-grid-min:12rem;--ly-gap:clamp(0.75rem,1.8vw,1.25rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.75rem,1.5vw,1.25rem)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-app-main{padding-block:clamp(0.75rem,2vw,1.5rem)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-container,:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-grid--auto{grid-auto-rows:minmax(7rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,var(--ly-sidebar-width)),var(--ly-sidebar-width)) minmax(0,1fr)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,10rem),0.24fr) minmax(0,1fr)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-split{grid-template-columns:minmax(0,1.2fr) minmax(min(100%,16rem),0.8fr)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,15rem),0.38fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-panes--three{grid-template-columns:minmax(min(100%,10rem),0.24fr) minmax(0,1fr) minmax(min(100%,16rem),0.38fr)}}}@layer ly.styles.y2k{:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k){--ly-container-max:84rem;--ly-page-padding-inline:clamp(1rem,5vw,4rem);--ly-section-padding-block:clamp(3rem,8vw,6rem);--ly-sidebar-width:clamp(17rem,22vw,21rem);--ly-grid-min:16rem;--ly-gap:clamp(1.25rem,3vw,2.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2.5vw,2rem)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-app-main{padding-block:clamp(2rem,6vw,4rem)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-container,:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:54rem){:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.34fr);align-items:start}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-app-sidebar{display:block;position:sticky;top:clamp(1rem,4vw,3rem);max-height:calc(100svh - clamp(2rem,8vw,6rem));margin:clamp(3rem,8vw,6rem) clamp(1rem,5vw,3rem) clamp(2rem,6vw,4rem) 0;overflow:auto}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-sidebar-layout{grid-template-columns:minmax(0,0.92fr) minmax(min(100%,16rem),1.08fr)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-split{grid-template-columns:minmax(0,0.86fr) minmax(min(100%,18rem),1.14fr)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.56fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-panes--three{grid-template-columns:minmax(min(100%,16rem),0.5fr) minmax(0,1fr) minmax(min(100%,16rem),0.5fr)}}}@layer ly.styles.retro_glass{:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass){--ly-container-max:96rem;--ly-page-padding-inline:clamp(1rem,4vw,3rem);--ly-section-padding-block:clamp(3rem,8vw,6rem);--ly-sidebar-width:18rem;--ly-grid-min:15rem;--ly-gap:clamp(1rem,2.6vw,2rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2vw,1.75rem)}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-app-main{padding:clamp(1rem,3vw,2rem)}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-container,:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-wrapper{width:min(100%,var(--ly-container-max))}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-section{padding-block:clamp(2rem,6vw,5rem)}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-split{align-items:stretch}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-split{grid-template-columns:1fr}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),0.62fr)}}@media (min-width:56rem){:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),var(--ly-sidebar-width))}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-app-sidebar{display:block;position:sticky;top:var(--ly-space-4);height:calc(100svh - (var(--ly-space-4) * 2));margin:var(--ly-space-4) var(--ly-space-4) var(--ly-space-4) 0;overflow:auto}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-sidebar-layout{grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),0.48fr)}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-split{grid-template-columns:minmax(0,1.1fr) minmax(min(100%,18rem),0.9fr)}}@media (min-width:78rem){:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-panes--three{grid-template-columns:minmax(min(100%,15rem),0.4fr) minmax(0,1fr) minmax(min(100%,18rem),0.52fr)}}}@layer ly.styles.f_pattern{:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern){--ly-container-max:94rem;--ly-page-padding-inline:clamp(1rem,3vw,2.75rem);--ly-section-padding-block:clamp(2rem,5vw,4.5rem);--ly-sidebar-width:clamp(13rem,19vw,20rem);--ly-grid-min:15rem;--ly-gap:clamp(1rem,2.25vw,1.85rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.875rem,1.8vw,1.45rem)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-app-main{padding-block:clamp(0.75rem,2vw,2rem)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-container,:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-app-shell{grid-template-areas:"header header" "sidebar main";grid-template-columns:minmax(min(100%,13rem),0.3fr) minmax(0,1fr);grid-template-rows:auto 1fr}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-grid--auto>:nth-child(3n + 1){grid-column:span 2;min-height:13rem}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,14rem),0.34fr) minmax(0,1fr)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-split{grid-template-columns:minmax(0,1.35fr) minmax(min(100%,18rem),0.65fr)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-panes--two{grid-template-columns:minmax(min(100%,15rem),0.38fr) minmax(0,1fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-panes--three{grid-template-columns:minmax(min(100%,13rem),0.28fr) minmax(0,1.28fr) minmax(min(100%,16rem),0.44fr)}}}@layer ly.styles.z_pattern{:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern){--ly-container-max:100rem;--ly-page-padding-inline:clamp(1rem,3.4vw,3rem);--ly-section-padding-block:clamp(2rem,5.5vw,5rem);--ly-sidebar-width:clamp(14rem,20vw,21rem);--ly-grid-min:15rem;--ly-gap:clamp(1rem,2.4vw,2rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.875rem,1.9vw,1.5rem)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-app-main{padding-block:clamp(1rem,2.6vw,2.5rem)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-container,:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1.18fr) minmax(min(100%,15rem),0.42fr)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-app-sidebar{display:block;position:sticky;top:var(--ly-space-4);height:calc(100svh - (var(--ly-space-4) * 2));overflow:auto}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-grid--auto>:nth-child(4n + 2){grid-column:span 2;min-height:12rem}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-sidebar-layout{grid-template-columns:minmax(0,1fr) minmax(min(100%,15rem),0.36fr)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-split{grid-template-columns:minmax(0,0.92fr) minmax(min(100%,19rem),1.08fr);align-items:end}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-panes--two{grid-template-columns:minmax(0,1.25fr) minmax(min(100%,17rem),0.75fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-panes--three{grid-template-columns:minmax(0,1.1fr) minmax(min(100%,15rem),0.55fr) minmax(min(100%,14rem),0.35fr)}}}@layer ly.styles.split_screen{:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen){--ly-container-max:100vw;--ly-page-padding-inline:clamp(0.875rem,2.5vw,2rem);--ly-section-padding-block:clamp(1.5rem,4vw,3.5rem);--ly-sidebar-width:50vw;--ly-grid-min:14rem;--ly-gap:clamp(0.875rem,2vw,1.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.875rem,1.6vw,1.25rem)}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-app-main{padding-block:0}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-container,:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-wrapper{width:min(100%,var(--ly-container-max))}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-app-sidebar{display:block;min-height:100%;overflow:auto}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-sidebar-layout,:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-split,:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-panes--three{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}}@layer ly.styles.mondrian{:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian){--ly-container-max:108rem;--ly-page-padding-inline:clamp(0.75rem,2.5vw,2rem);--ly-section-padding-block:clamp(1.75rem,4.5vw,4rem);--ly-sidebar-width:clamp(11rem,16vw,17rem);--ly-grid-min:11rem;--ly-gap:clamp(0.75rem,1.6vw,1.25rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.75rem,1.5vw,1.2rem)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-app-main{padding-block:clamp(0.75rem,1.8vw,1.5rem)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-container,:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-grid--auto{grid-auto-rows:minmax(7rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-app-shell{grid-template-areas:"sidebar header header" "sidebar main main";grid-template-columns:minmax(min(100%,11rem),0.28fr) minmax(0,0.86fr) minmax(0,1.14fr);grid-template-rows:auto 1fr}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-app-sidebar{display:block;position:sticky;top:var(--ly-space-3);height:calc(100svh - (var(--ly-space-3) * 2));overflow:auto}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-grid--auto>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2;min-height:15rem}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,11rem),0.25fr) minmax(0,1fr)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-split{grid-template-columns:minmax(0,0.7fr) minmax(min(100%,20rem),1.3fr)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-panes--two{grid-template-columns:minmax(min(100%,13rem),0.46fr) minmax(0,1.54fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-panes--three{grid-template-columns:minmax(min(100%,11rem),0.28fr) minmax(0,1.44fr) minmax(min(100%,13rem),0.28fr)}}}@layer ly.styles.synthwave{:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave){--ly-container-max:112rem;--ly-page-padding-inline:clamp(1rem,4vw,3.5rem);--ly-section-padding-block:clamp(2.5rem,7vw,6rem);--ly-sidebar-width:clamp(14rem,18vw,20rem);--ly-grid-min:14rem;--ly-gap:clamp(1rem,2.8vw,2.25rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2.2vw,1.8rem);--ly-carousel-item-min:18rem;--ly-carousel-item-max:34rem}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-main{padding-block:clamp(1rem,3vw,3rem)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-container,:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-shell{grid-template-areas:"header header" "main main" "sidebar sidebar";grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-sidebar{display:block;overflow:auto}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-sidebar-layout{grid-template-columns:minmax(0,1.2fr) minmax(min(100%,17rem),0.8fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-split{grid-template-columns:minmax(0,1fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-panes--two{grid-template-columns:minmax(0,1.35fr) minmax(min(100%,17rem),0.65fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1.52fr) minmax(min(100%,17rem),0.48fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-sidebar{position:sticky;top:var(--ly-space-5);height:calc(100svh - (var(--ly-space-5) * 2))}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-split{grid-template-columns:minmax(0,1.42fr) minmax(min(100%,20rem),0.58fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-panes--three{grid-template-columns:minmax(min(100%,14rem),0.36fr) minmax(0,1.28fr) minmax(min(100%,16rem),0.36fr)}}} +@layer ly.tokens{:where(.ly-root){--ly-space-0:0;--ly-space-1:0.25rem;--ly-space-2:0.5rem;--ly-space-3:0.75rem;--ly-space-4:1rem;--ly-space-5:1.5rem;--ly-space-6:2rem;--ly-space-7:3rem;--ly-space-8:4rem;--ly-space-9:6rem;--ly-container-sm:40rem;--ly-container-md:56rem;--ly-container-lg:72rem;--ly-container-xl:88rem;--ly-container-wide:112rem;--ly-container-max:var(--ly-container-lg);--ly-content-readable:68ch;--ly-page-padding-inline:clamp(1rem,4vw,3rem);--ly-section-padding-block:clamp(3rem,7vw,6rem);--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-grid-columns:12;--ly-grid-min:16rem;--ly-card-grid-min:16rem;--ly-card-size-sm:10rem;--ly-card-size-md:14rem;--ly-card-size-lg:18rem;--ly-gallery-min:12rem;--ly-carousel-item-min:16rem;--ly-carousel-item-max:28rem;--ly-sidebar-min:14rem;--ly-sidebar-width:18rem;--ly-sidebar-max:22rem;--ly-pane-fixed:22rem;--ly-header-height:4.5rem;--ly-radius-sm:0.5rem;--ly-radius:0.875rem;--ly-radius-lg:1.5rem;--ly-radius-xl:2.25rem;--ly-z-header:20;--ly-z-sidebar:10}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){min-width:0;margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas){max-width:100%}}@layer ly.layout{.ly-page{min-height:100svh}.ly-header,.ly-footer,.ly-main,.ly-wrapper,.ly-section,.ly-surface{min-width:0}.ly-header{min-height:var(--ly-header-height)}.ly-header--sticky{position:sticky;top:0;z-index:var(--ly-z-header)}.ly-container,.ly-wrapper{width:min(100% - (var(--ly-page-padding-inline) * 2),var(--ly-container-max));margin-inline:auto}.ly-container--sm,.ly-wrapper--sm{--ly-container-max:var(--ly-container-sm)}.ly-container--md,.ly-wrapper--md{--ly-container-max:var(--ly-container-md)}.ly-container--lg,.ly-wrapper--lg{--ly-container-max:var(--ly-container-lg)}.ly-container--xl,.ly-wrapper--xl{--ly-container-max:var(--ly-container-xl)}.ly-container--wide,.ly-wrapper--wide{--ly-container-max:var(--ly-container-wide)}.ly-container--fluid,.ly-wrapper--fluid{width:100%;max-width:none;padding-inline:var(--ly-page-padding-inline)}.ly-wrapper--readable{--ly-container-max:var(--ly-content-readable)}.ly-readable{max-width:var(--ly-content-readable)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{--ly-section-padding-block:var(--ly-space-7)}.ly-section--flush{--ly-section-padding-block:0}.ly-stack{display:flex;flex-direction:column;gap:var(--ly-stack-gap)}.ly-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-button-group>*{flex:0 1 auto;min-width:min(100%,var(--ly-button-min,8rem))}.ly-grid{display:grid;grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr));gap:var(--ly-grid-gap)}.ly-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr))}.ly-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr));gap:var(--ly-grid-gap)}.ly-card-grid>*{min-width:0}.ly-card-sm{min-block-size:var(--ly-card-size-sm)}.ly-card-md{min-block-size:var(--ly-card-size-md)}.ly-card-lg{min-block-size:var(--ly-card-size-lg)}.ly-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr));gap:var(--ly-grid-gap)}.ly-gallery>*{min-width:0}.ly-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,var(--ly-carousel-item-min)),var(--ly-carousel-item-max));gap:var(--ly-grid-gap);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}.ly-carousel>*{min-width:0;scroll-snap-align:start}.ly-row{display:flex;flex-wrap:wrap;margin-inline:calc(var(--ly-gutter,var(--ly-gap)) * -0.5)}.ly-col{flex:1 1 0;min-width:0;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-sidebar-layout{display:grid;grid-template-columns:1fr;gap:var(--ly-gap)}.ly-sidebar-layout>*{min-width:0}.ly-sidebar{min-width:0}.ly-content{min-width:0}.ly-split{display:grid;grid-template-columns:1fr;gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-split>*{min-width:0}.ly-panes{display:grid;grid-template-columns:1fr;gap:var(--ly-gap)}.ly-panes>*{min-width:0}.ly-surface{border-radius:var(--ly-radius)}.ly-surface--raised{border-radius:var(--ly-radius-lg)}.ly-divider{min-height:1px;margin-block:var(--ly-space-5)}.ly-frame{aspect-ratio:var(--ly-frame-ratio,16 / 9);overflow:hidden}.ly-frame>*{width:100%;height:100%;object-fit:cover}.ly-scroll-area{min-height:0;overflow:auto}.ly-app-shell{min-height:100svh;display:grid;grid-template-areas:"header" "main";grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.ly-app-header{grid-area:header;min-width:0}.ly-app-sidebar{grid-area:sidebar;display:none;min-width:0}.ly-app-main{grid-area:main;min-width:0}.ly-visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}@layer ly.responsive{@media (min-width:48rem){.ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,var(--ly-sidebar-min)),var(--ly-sidebar-width)) minmax(0,1fr)}.ly-app-sidebar{display:block;position:sticky;top:0;z-index:var(--ly-z-sidebar);height:100svh;overflow:auto}.ly-sidebar-layout{grid-template-columns:minmax(min(100%,var(--ly-sidebar-min)),var(--ly-sidebar-max)) minmax(0,1fr);align-items:start}.ly-sidebar-layout--right{grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-sidebar-min)),var(--ly-sidebar-max))}.ly-split{grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}.ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-pane-fixed)),0.7fr)}}@media (min-width:64rem){.ly-panes--three{grid-template-columns:minmax(min(100%,14rem),0.35fr) minmax(0,1fr) minmax(min(100%,14rem),0.35fr)}}}@layer ly.utilities{.ly-cols-1{--ly-grid-columns:1}.ly-cols-2{--ly-grid-columns:2}.ly-cols-3{--ly-grid-columns:3}.ly-cols-4{--ly-grid-columns:4}.ly-cols-5{--ly-grid-columns:5}.ly-cols-6{--ly-grid-columns:6}.ly-cols-7{--ly-grid-columns:7}.ly-cols-8{--ly-grid-columns:8}.ly-cols-9{--ly-grid-columns:9}.ly-cols-10{--ly-grid-columns:10}.ly-cols-11{--ly-grid-columns:11}.ly-cols-12{--ly-grid-columns:12}.ly-cols-16{--ly-grid-columns:16}.ly-span-1{grid-column:span 1}.ly-span-2{grid-column:span 2}.ly-span-3{grid-column:span 3}.ly-span-4{grid-column:span 4}.ly-span-5{grid-column:span 5}.ly-span-6{grid-column:span 6}.ly-span-7{grid-column:span 7}.ly-span-8{grid-column:span 8}.ly-span-9{grid-column:span 9}.ly-span-10{grid-column:span 10}.ly-span-11{grid-column:span 11}.ly-span-12{grid-column:span 12}.ly-span-13{grid-column:span 13}.ly-span-14{grid-column:span 14}.ly-span-15{grid-column:span 15}.ly-span-16{grid-column:span 16}.ly-span-full{grid-column:1 / -1}.ly-col-1{flex:0 0 auto;width:8.333333%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-2{flex:0 0 auto;width:16.666667%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-3{flex:0 0 auto;width:25%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-4{flex:0 0 auto;width:33.333333%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-5{flex:0 0 auto;width:41.666667%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-6{flex:0 0 auto;width:50%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-7{flex:0 0 auto;width:58.333333%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-8{flex:0 0 auto;width:66.666667%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-9{flex:0 0 auto;width:75%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-10{flex:0 0 auto;width:83.333333%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-11{flex:0 0 auto;width:91.666667%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-col-12{flex:0 0 auto;width:100%;padding-inline:calc(var(--ly-gutter,var(--ly-gap)) * 0.5)}.ly-gap-0{--ly-gap:var(--ly-space-0);--ly-grid-gap:var(--ly-space-0);--ly-stack-gap:var(--ly-space-0);--ly-cluster-gap:var(--ly-space-0)}.ly-gap-1{--ly-gap:var(--ly-space-1);--ly-grid-gap:var(--ly-space-1);--ly-stack-gap:var(--ly-space-1);--ly-cluster-gap:var(--ly-space-1)}.ly-gap-2{--ly-gap:var(--ly-space-2);--ly-grid-gap:var(--ly-space-2);--ly-stack-gap:var(--ly-space-2);--ly-cluster-gap:var(--ly-space-2)}.ly-gap-3{--ly-gap:var(--ly-space-3);--ly-grid-gap:var(--ly-space-3);--ly-stack-gap:var(--ly-space-3);--ly-cluster-gap:var(--ly-space-3)}.ly-gap-4{--ly-gap:var(--ly-space-4);--ly-grid-gap:var(--ly-space-4);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-4)}.ly-gap-5{--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-space-5);--ly-stack-gap:var(--ly-space-5);--ly-cluster-gap:var(--ly-space-5)}.ly-gap-6{--ly-gap:var(--ly-space-6);--ly-grid-gap:var(--ly-space-6);--ly-stack-gap:var(--ly-space-6);--ly-cluster-gap:var(--ly-space-6)}.ly-gap-7{--ly-gap:var(--ly-space-7);--ly-grid-gap:var(--ly-space-7);--ly-stack-gap:var(--ly-space-7);--ly-cluster-gap:var(--ly-space-7)}.ly-gap-8{--ly-gap:var(--ly-space-8);--ly-grid-gap:var(--ly-space-8);--ly-stack-gap:var(--ly-space-8);--ly-cluster-gap:var(--ly-space-8)}.ly-gap-9{--ly-gap:var(--ly-space-9);--ly-grid-gap:var(--ly-space-9);--ly-stack-gap:var(--ly-space-9);--ly-cluster-gap:var(--ly-space-9)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-1{padding:var(--ly-space-1)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-3{padding:var(--ly-space-3)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-5{padding:var(--ly-space-5)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-7{padding:var(--ly-space-7)}.ly-pad-8{padding:var(--ly-space-8)}.ly-pad-9{padding:var(--ly-space-9)}.ly-px-4{padding-inline:var(--ly-space-4)}.ly-px-6{padding-inline:var(--ly-space-6)}.ly-px-8{padding-inline:var(--ly-space-8)}.ly-py-4{padding-block:var(--ly-space-4)}.ly-py-6{padding-block:var(--ly-space-6)}.ly-py-8{padding-block:var(--ly-space-8)}.ly-mx-auto{margin-inline:auto}.ly-w-full{width:100%}.ly-h-full{height:100%}.ly-min-h-screen{min-height:100svh}.ly-bleed{width:100vw;margin-inline:calc(50% - 50vw)}.ly-overflow-auto{overflow:auto}.ly-overflow-hidden{overflow:hidden}.ly-items-start{align-items:flex-start}.ly-items-center{align-items:center}.ly-items-end{align-items:flex-end}.ly-items-stretch{align-items:stretch}.ly-justify-start{justify-content:flex-start}.ly-justify-center{justify-content:center}.ly-justify-end{justify-content:flex-end}.ly-justify-between{justify-content:space-between}.ly-frame-1x1{--ly-frame-ratio:1 / 1}.ly-frame-2x1{--ly-frame-ratio:2 / 1}.ly-frame-3x2{--ly-frame-ratio:3 / 2}.ly-frame-4x3{--ly-frame-ratio:4 / 3}.ly-frame-16x9{--ly-frame-ratio:16 / 9}.ly-frame-21x9{--ly-frame-ratio:21 / 9}.ly-hidden{display:none !important}.ly-show-md-up,.ly-show-lg-up{display:none !important}@media (min-width:48rem){.ly-md-cols-1{--ly-grid-columns:1}.ly-md-cols-2{--ly-grid-columns:2}.ly-md-cols-3{--ly-grid-columns:3}.ly-md-cols-4{--ly-grid-columns:4}.ly-md-cols-6{--ly-grid-columns:6}.ly-md-cols-8{--ly-grid-columns:8}.ly-md-cols-12{--ly-grid-columns:12}.ly-md-cols-16{--ly-grid-columns:16}.ly-show-md-up{display:revert !important}}@media (min-width:64rem){.ly-lg-cols-1{--ly-grid-columns:1}.ly-lg-cols-2{--ly-grid-columns:2}.ly-lg-cols-3{--ly-grid-columns:3}.ly-lg-cols-4{--ly-grid-columns:4}.ly-lg-cols-6{--ly-grid-columns:6}.ly-lg-cols-8{--ly-grid-columns:8}.ly-lg-cols-12{--ly-grid-columns:12}.ly-lg-cols-16{--ly-grid-columns:16}.ly-show-lg-up{display:revert !important}}}@layer ly.bridge{:where(.ly-root[data-ui][data-theme][data-mode],[data-ui][data-theme][data-mode] .ly-root){--ly-ui-style-kit-bridge:1;min-block-size:100svh;background-attachment:fixed;background-position:center;background-repeat:no-repeat;background-size:100% 100%}:where(.ly-root[data-ui="minimal-saas"],[data-ui="minimal-saas"] .ly-root){--ly-ui-style-kit-bridge-style:minimal-saas}:where(.ly-root[data-ui="bento"],[data-ui="bento"] .ly-root){--ly-ui-style-kit-bridge-style:bento}:where(.ly-root[data-ui="maximalist"],[data-ui="maximalist"] .ly-root){--ly-ui-style-kit-bridge-style:maximalist}:where(.ly-root[data-ui="bauhaus"],[data-ui="bauhaus"] .ly-root){--ly-ui-style-kit-bridge-style:bauhaus}:where(.ly-root[data-ui="tactile"],[data-ui="tactile"] .ly-root){--ly-ui-style-kit-bridge-style:tactile}:where(.ly-root[data-ui="neumorphism"],[data-ui="neumorphism"] .ly-root){--ly-ui-style-kit-bridge-style:neumorphism}:where(.ly-root[data-ui="retrofuturism"],[data-ui="retrofuturism"] .ly-root){--ly-ui-style-kit-bridge-style:retrofuturism}:where(.ly-root[data-ui="brutalism"],[data-ui="brutalism"] .ly-root){--ly-ui-style-kit-bridge-style:brutalism}:where(.ly-root[data-ui="cyberpunk"],[data-ui="cyberpunk"] .ly-root){--ly-ui-style-kit-bridge-style:cyberpunk}:where(.ly-root[data-ui="y2k"],[data-ui="y2k"] .ly-root){--ly-ui-style-kit-bridge-style:y2k}:where(.ly-root[data-ui="retro-glass"],[data-ui="retro-glass"] .ly-root){--ly-ui-style-kit-bridge-style:retro-glass}:where(.saas-container,.bento-container,.max-container,.bau-container,.tactile-container,.neo-container,.retro-container,.brutal-container,.cyber-container,.y2k-container,.rg-container){width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max));margin-inline:auto}:where(.saas-section,.bento-section,.max-section,.bau-section,.tactile-section,.neo-section,.retro-section,.brutal-section,.cyber-section,.y2k-section,.rg-section){padding-block:var(--ly-section-padding-block)}:where(.saas-stack,.bento-stack,.max-stack,.bau-stack,.tactile-stack,.neo-stack,.retro-stack,.brutal-stack,.cyber-stack,.y2k-stack,.rg-stack){display:flex;flex-direction:column;gap:var(--ly-stack-gap)}:where(.saas-cluster,.bento-cluster,.max-cluster,.bau-cluster,.tactile-cluster,.neo-cluster,.retro-cluster,.brutal-cluster,.cyber-cluster,.y2k-cluster,.rg-cluster){display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}:where(.saas-grid,.bento-grid,.max-grid,.bau-grid,.tactile-grid,.neo-grid,.retro-grid,.brutal-grid,.cyber-grid,.y2k-grid,.rg-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr));gap:var(--ly-grid-gap)}:where(.saas-split,.bento-split,.max-split,.bau-split,.tactile-split,.neo-split,.retro-split,.brutal-split,.cyber-split,.y2k-split,.rg-split){display:grid;grid-template-columns:1fr;gap:var(--ly-gap);align-items:var(--ly-split-align,center)}:where(.saas-split,.bento-split,.max-split,.bau-split,.tactile-split,.neo-split,.retro-split,.brutal-split,.cyber-split,.y2k-split,.rg-split)>*{min-width:0}:where(.saas-button-group,.bento-button-group,.max-button-group,.bau-button-group,.tactile-button-group,.neo-button-group,.retro-button-group,.brutal-button-group,.cyber-button-group,.y2k-button-group,.rg-button-group){display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}:where(.saas-button-group,.bento-button-group,.max-button-group,.bau-button-group,.tactile-button-group,.neo-button-group,.retro-button-group,.brutal-button-group,.cyber-button-group,.y2k-button-group,.rg-button-group)>*{flex:0 1 auto;min-width:min(100%,var(--ly-button-min,8rem))}:where(.saas-card-grid,.bento-card-grid,.max-card-grid,.bau-card-grid,.tactile-card-grid,.neo-card-grid,.retro-card-grid,.brutal-card-grid,.cyber-card-grid,.y2k-card-grid,.rg-card-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr));gap:var(--ly-grid-gap)}:where(.saas-card-grid,.bento-card-grid,.max-card-grid,.bau-card-grid,.tactile-card-grid,.neo-card-grid,.retro-card-grid,.brutal-card-grid,.cyber-card-grid,.y2k-card-grid,.rg-card-grid)>*{min-width:0}:where(.saas-card-sm,.bento-card-sm,.max-card-sm,.bau-card-sm,.tactile-card-sm,.neo-card-sm,.retro-card-sm,.brutal-card-sm,.cyber-card-sm,.y2k-card-sm,.rg-card-sm){min-block-size:var(--ly-card-size-sm)}:where(.saas-card-md,.bento-card-md,.max-card-md,.bau-card-md,.tactile-card-md,.neo-card-md,.retro-card-md,.brutal-card-md,.cyber-card-md,.y2k-card-md,.rg-card-md){min-block-size:var(--ly-card-size-md)}:where(.saas-card-lg,.bento-card-lg,.max-card-lg,.bau-card-lg,.tactile-card-lg,.neo-card-lg,.retro-card-lg,.brutal-card-lg,.cyber-card-lg,.y2k-card-lg,.rg-card-lg){min-block-size:var(--ly-card-size-lg)}:where(.saas-gallery,.bento-gallery,.max-gallery,.bau-gallery,.tactile-gallery,.neo-gallery,.retro-gallery,.brutal-gallery,.cyber-gallery,.y2k-gallery,.rg-gallery){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr));gap:var(--ly-grid-gap)}:where(.saas-gallery,.bento-gallery,.max-gallery,.bau-gallery,.tactile-gallery,.neo-gallery,.retro-gallery,.brutal-gallery,.cyber-gallery,.y2k-gallery,.rg-gallery)>*{min-width:0}:where(.saas-carousel,.bento-carousel,.max-carousel,.bau-carousel,.tactile-carousel,.neo-carousel,.retro-carousel,.brutal-carousel,.cyber-carousel,.y2k-carousel,.rg-carousel){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,var(--ly-carousel-item-min)),var(--ly-carousel-item-max));gap:var(--ly-grid-gap);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}:where(.saas-carousel,.bento-carousel,.max-carousel,.bau-carousel,.tactile-carousel,.neo-carousel,.retro-carousel,.brutal-carousel,.cyber-carousel,.y2k-carousel,.rg-carousel)>*{min-width:0;scroll-snap-align:start}@media (min-width:48rem){:where(.saas-split,.bento-split,.max-split,.bau-split,.tactile-split,.neo-split,.retro-split,.brutal-split,.cyber-split,.y2k-split,.rg-split){grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}}}@layer ly.styles.minimal_saas{:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas){--ly-container-max:88rem;--ly-page-padding-inline:clamp(1rem,3vw,2.5rem);--ly-section-padding-block:clamp(2rem,5vw,4rem);--ly-sidebar-width:clamp(15rem,18vw,19rem);--ly-grid-min:16rem;--ly-gap:clamp(1rem,2vw,1.75rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.875rem,1.6vw,1.35rem)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-app-main{padding-block:clamp(1rem,2vw,2rem)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-container,:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,14rem),var(--ly-sidebar-width)) minmax(0,1fr)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,1fr)}:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-split,:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,18rem),0.44fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="minimal-saas"],.ly-root[layout-style="minimal-saas"],.ly-root.ly-layout-minimal-saas,.ly-root.ly-style-minimal-saas) .ly-panes--three{grid-template-columns:minmax(min(100%,13rem),0.22fr) minmax(0,1fr) minmax(min(100%,16rem),0.32fr)}}}@layer ly.styles.bento{:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento){--ly-container-max:104rem;--ly-page-padding-inline:clamp(1rem,3.5vw,3rem);--ly-section-padding-block:clamp(2rem,6vw,5rem);--ly-sidebar-width:clamp(13rem,16vw,17rem);--ly-grid-min:14rem;--ly-gap:clamp(1rem,2.5vw,2rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2vw,1.75rem)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-app-main{padding-block:clamp(1rem,3vw,2.5rem)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-container,:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,13rem),0.26fr) minmax(0,1fr)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-app-sidebar{display:block;position:sticky;top:var(--ly-space-3);height:calc(100svh - (var(--ly-space-3) * 2));margin:var(--ly-space-3) 0 var(--ly-space-3) var(--ly-space-3);overflow:auto}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-grid--auto>:nth-child(4n + 1){grid-column:span 2;min-height:14rem}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,12rem),0.3fr) minmax(0,1fr)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-split{grid-template-columns:minmax(0,0.78fr) minmax(min(100%,18rem),1.22fr)}:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-panes--two{grid-template-columns:minmax(0,1.18fr) minmax(min(100%,18rem),0.82fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="bento"],.ly-root[layout-style="bento"],.ly-root.ly-layout-bento,.ly-root.ly-style-bento) .ly-panes--three{grid-template-columns:minmax(min(100%,12rem),0.6fr) minmax(0,1.4fr) minmax(min(100%,14rem),0.8fr)}}}@layer ly.styles.maximalist{:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist){--ly-container-max:102rem;--ly-page-padding-inline:clamp(1rem,6vw,5.5rem);--ly-section-padding-block:clamp(4rem,13vw,10rem);--ly-sidebar-width:clamp(13rem,18vw,20rem);--ly-grid-min:14rem;--ly-gap:clamp(1.25rem,4vw,3rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1.5rem,4vw,3.5rem)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-app-main{padding-block:clamp(1rem,3vw,3rem)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-container,:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-section{padding-block:clamp(3.5rem,11vw,8rem)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-split{align-items:stretch}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-grid--auto{grid-auto-rows:minmax(10rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-split{grid-template-columns:1fr}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-grid--auto>:nth-child(5n + 1){grid-column:span 2;min-height:24rem}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-grid--auto>:nth-child(5n + 3){transform:translateY(var(--ly-space-7))}}@media (min-width:56rem){:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,13rem),0.28fr)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-app-sidebar{display:block;position:sticky;top:calc(var(--ly-gap) * 1.5);height:max-content;margin-block:clamp(2rem,8vw,7rem);transform:translateX(calc(var(--ly-gap) * -0.35));overflow:auto}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-sidebar-layout{grid-template-columns:minmax(0,1.55fr) minmax(min(100%,15rem),0.45fr)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-split{grid-template-columns:minmax(0,1.62fr) minmax(min(100%,16rem),0.54fr);gap:clamp(1.5rem,6vw,5rem)}:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-panes--two{grid-template-columns:minmax(min(100%,16rem),0.44fr) minmax(0,1.56fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="maximalist"],.ly-root[layout-style="maximalist"],.ly-root.ly-layout-maximalist,.ly-root.ly-style-maximalist) .ly-panes--three{grid-template-columns:minmax(min(100%,14rem),0.34fr) minmax(0,1.28fr) minmax(min(100%,18rem),0.58fr)}}}@layer ly.styles.bauhaus{:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus){--ly-container-max:92rem;--ly-page-padding-inline:clamp(1rem,2vw,2rem);--ly-section-padding-block:clamp(2.5rem,5vw,4.5rem);--ly-sidebar-width:clamp(8rem,12vw,12rem);--ly-grid-min:13rem;--ly-gap:clamp(0.75rem,1.6vw,1.25rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.75rem,1.5vw,1.25rem)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-app-main{padding-block:clamp(0.75rem,2vw,1.5rem)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-container,:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-grid--auto{grid-auto-rows:minmax(7rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,7rem),0.18fr) minmax(0,1fr)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,8rem),0.22fr) minmax(0,1fr)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,12rem),0.5fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="bauhaus"],.ly-root[layout-style="bauhaus"],.ly-root.ly-layout-bauhaus,.ly-root.ly-style-bauhaus) .ly-panes--three{grid-template-columns:minmax(min(100%,10rem),0.25fr) minmax(0,1fr) minmax(min(100%,10rem),0.25fr)}}}@layer ly.styles.tactile{:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile){--ly-container-max:98rem;--ly-page-padding-inline:clamp(1rem,3vw,2.75rem);--ly-section-padding-block:clamp(2rem,5vw,4rem);--ly-sidebar-width:clamp(18rem,22vw,24rem);--ly-grid-min:15rem;--ly-gap:clamp(1rem,2.2vw,1.75rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2vw,1.75rem)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-app-main{padding-block:clamp(1rem,2.5vw,2rem)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-container,:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,18rem),var(--ly-sidebar-width)) minmax(0,1fr)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,18rem),0.42fr) minmax(0,1fr)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-split{grid-template-columns:minmax(0,1.18fr) minmax(min(100%,18rem),0.82fr)}:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,20rem),0.62fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="tactile"],.ly-root[layout-style="tactile"],.ly-root.ly-layout-tactile,.ly-root.ly-style-tactile) .ly-panes--three{grid-template-columns:minmax(min(100%,17rem),0.4fr) minmax(0,1fr) minmax(min(100%,18rem),0.46fr)}}}@layer ly.styles.neumorphism{:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism){--ly-container-max:86rem;--ly-page-padding-inline:clamp(1.25rem,5vw,4rem);--ly-section-padding-block:clamp(3rem,8vw,6rem);--ly-sidebar-width:clamp(16rem,20vw,20rem);--ly-grid-min:16rem;--ly-gap:clamp(1.25rem,3vw,2.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1.25rem,2.5vw,2rem)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-app-main{padding-block:clamp(2rem,5vw,4rem)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-container,:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:56rem){:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),0.34fr);align-items:start}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-app-sidebar{display:block;position:sticky;top:clamp(1rem,3vw,2rem);max-height:calc(100svh - clamp(2rem,6vw,4rem));margin:clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem) 0;overflow:auto}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-sidebar-layout{grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),0.42fr)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-split{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.5fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="neumorphism"],.ly-root[layout-style="neumorphism"],.ly-root.ly-layout-neumorphism,.ly-root.ly-style-neumorphism) .ly-panes--three{grid-template-columns:minmax(min(100%,15rem),0.38fr) minmax(0,1fr) minmax(min(100%,15rem),0.38fr)}}}@layer ly.styles.retrofuturism{:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism){--ly-container-max:110rem;--ly-page-padding-inline:clamp(1rem,4vw,4rem);--ly-section-padding-block:clamp(3rem,8vw,7rem);--ly-sidebar-width:clamp(12rem,14vw,16rem);--ly-grid-min:15rem;--ly-gap:clamp(1rem,3vw,2.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2.4vw,2rem)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-app-main{padding-block:clamp(1.5rem,4vw,3rem)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-container,:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:56rem){:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-app-shell{grid-template-areas:"header header header" "sidebar main main";grid-template-columns:minmax(min(100%,12rem),0.24fr) minmax(0,1fr) minmax(min(100%,12rem),0.24fr)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-app-sidebar{display:block;position:sticky;top:clamp(1rem,2vw,1.5rem);height:calc(100svh - clamp(2rem,4vw,3rem));margin:clamp(1rem,2vw,1.5rem) 0 clamp(1rem,2vw,1.5rem) clamp(1rem,2vw,1.5rem);overflow:auto}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,12rem),0.32fr) minmax(0,1fr)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-split{grid-template-columns:minmax(0,1.35fr) minmax(min(100%,16rem),0.65fr)}:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-panes--two{grid-template-columns:minmax(min(100%,14rem),0.44fr) minmax(0,1.2fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="retrofuturism"],.ly-root[layout-style="retrofuturism"],.ly-root.ly-layout-retrofuturism,.ly-root.ly-style-retrofuturism) .ly-panes--three{grid-template-columns:minmax(min(100%,12rem),0.44fr) minmax(0,1.4fr) minmax(min(100%,12rem),0.44fr)}}}@layer ly.styles.brutalism{:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism){--ly-container-max:100vw;--ly-page-padding-inline:clamp(0.75rem,3vw,3rem);--ly-section-padding-block:clamp(2rem,6vw,5rem);--ly-sidebar-width:clamp(12rem,15vw,16rem);--ly-grid-min:12rem;--ly-gap:clamp(0.75rem,2vw,1.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.75rem,2vw,1.5rem)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-app-main{padding-block:0}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-container,:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-wrapper{width:min(100%,var(--ly-container-max))}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-grid--auto{grid-auto-rows:minmax(7rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,12rem),0.22fr)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-sidebar-layout{grid-template-columns:minmax(0,1.55fr) minmax(min(100%,12rem),0.45fr)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-split{grid-template-columns:minmax(0,1.7fr) minmax(min(100%,12rem),0.3fr)}:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-panes--two{grid-template-columns:minmax(min(100%,12rem),0.35fr) minmax(0,1.65fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="brutalism"],.ly-root[layout-style="brutalism"],.ly-root.ly-layout-brutalism,.ly-root.ly-style-brutalism) .ly-panes--three{grid-template-columns:minmax(min(100%,11rem),0.28fr) minmax(0,1.42fr) minmax(min(100%,14rem),0.4fr)}}}@layer ly.styles.cyberpunk{:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk){--ly-container-max:104rem;--ly-page-padding-inline:clamp(0.75rem,2vw,2rem);--ly-section-padding-block:clamp(2rem,5vw,4rem);--ly-sidebar-width:clamp(10rem,12vw,12.5rem);--ly-grid-min:12rem;--ly-gap:clamp(0.75rem,1.8vw,1.25rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.75rem,1.5vw,1.25rem)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-app-main{padding-block:clamp(0.75rem,2vw,1.5rem)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-container,:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-grid--auto{grid-auto-rows:minmax(7rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-app-shell{grid-template-areas:"sidebar header" "sidebar main";grid-template-columns:minmax(min(100%,var(--ly-sidebar-width)),var(--ly-sidebar-width)) minmax(0,1fr)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,10rem),0.24fr) minmax(0,1fr)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-split{grid-template-columns:minmax(0,1.2fr) minmax(min(100%,16rem),0.8fr)}:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,15rem),0.38fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="cyberpunk"],.ly-root[layout-style="cyberpunk"],.ly-root.ly-layout-cyberpunk,.ly-root.ly-style-cyberpunk) .ly-panes--three{grid-template-columns:minmax(min(100%,10rem),0.24fr) minmax(0,1fr) minmax(min(100%,16rem),0.38fr)}}}@layer ly.styles.y2k{:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k){--ly-container-max:84rem;--ly-page-padding-inline:clamp(1rem,5vw,4rem);--ly-section-padding-block:clamp(3rem,8vw,6rem);--ly-sidebar-width:clamp(17rem,22vw,21rem);--ly-grid-min:16rem;--ly-gap:clamp(1.25rem,3vw,2.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2.5vw,2rem)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-app-main{padding-block:clamp(2rem,6vw,4rem)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-container,:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:54rem){:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.34fr);align-items:start}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-app-sidebar{display:block;position:sticky;top:clamp(1rem,4vw,3rem);max-height:calc(100svh - clamp(2rem,8vw,6rem));margin:clamp(3rem,8vw,6rem) clamp(1rem,5vw,3rem) clamp(2rem,6vw,4rem) 0;overflow:auto}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-sidebar-layout{grid-template-columns:minmax(0,0.92fr) minmax(min(100%,16rem),1.08fr)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-split{grid-template-columns:minmax(0,0.86fr) minmax(min(100%,18rem),1.14fr)}:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.56fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="y2k"],.ly-root[layout-style="y2k"],.ly-root.ly-layout-y2k,.ly-root.ly-style-y2k) .ly-panes--three{grid-template-columns:minmax(min(100%,16rem),0.5fr) minmax(0,1fr) minmax(min(100%,16rem),0.5fr)}}}@layer ly.styles.retro_glass{:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass){--ly-container-max:96rem;--ly-page-padding-inline:clamp(1rem,4vw,3rem);--ly-section-padding-block:clamp(3rem,8vw,6rem);--ly-sidebar-width:18rem;--ly-grid-min:15rem;--ly-gap:clamp(1rem,2.6vw,2rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2vw,1.75rem)}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-app-main{padding:clamp(1rem,3vw,2rem)}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-container,:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-wrapper{width:min(100%,var(--ly-container-max))}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-section{padding-block:clamp(2rem,6vw,5rem)}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-split{align-items:stretch}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-split{grid-template-columns:1fr}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),0.62fr)}}@media (min-width:56rem){:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),var(--ly-sidebar-width))}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-app-sidebar{display:block;position:sticky;top:var(--ly-space-4);height:calc(100svh - (var(--ly-space-4) * 2));margin:var(--ly-space-4) var(--ly-space-4) var(--ly-space-4) 0;overflow:auto}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-sidebar-layout{grid-template-columns:minmax(0,1fr) minmax(min(100%,16rem),0.48fr)}:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-split{grid-template-columns:minmax(0,1.1fr) minmax(min(100%,18rem),0.9fr)}}@media (min-width:78rem){:where(.ly-root[data-layout="retro-glass"],.ly-root[layout-style="retro-glass"],.ly-root.ly-layout-retro-glass,.ly-root.ly-style-retro-glass) .ly-panes--three{grid-template-columns:minmax(min(100%,15rem),0.4fr) minmax(0,1fr) minmax(min(100%,18rem),0.52fr)}}}@layer ly.styles.f_pattern{:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern){--ly-container-max:94rem;--ly-page-padding-inline:clamp(1rem,3vw,2.75rem);--ly-section-padding-block:clamp(2rem,5vw,4.5rem);--ly-sidebar-width:clamp(13rem,19vw,20rem);--ly-grid-min:15rem;--ly-gap:clamp(1rem,2.25vw,1.85rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.875rem,1.8vw,1.45rem)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-app-main{padding-block:clamp(0.75rem,2vw,2rem)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-container,:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-app-shell{grid-template-areas:"header header" "sidebar main";grid-template-columns:minmax(min(100%,13rem),0.3fr) minmax(0,1fr);grid-template-rows:auto 1fr}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-app-sidebar{display:block;position:sticky;top:0;height:100svh;overflow:auto}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-grid--auto>:nth-child(3n + 1){grid-column:span 2;min-height:13rem}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,14rem),0.34fr) minmax(0,1fr)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-split{grid-template-columns:minmax(0,1.35fr) minmax(min(100%,18rem),0.65fr)}:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-panes--two{grid-template-columns:minmax(min(100%,15rem),0.38fr) minmax(0,1fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="f-pattern"],.ly-root[layout-style="f-pattern"],.ly-root.ly-layout-f-pattern,.ly-root.ly-style-f-pattern) .ly-panes--three{grid-template-columns:minmax(min(100%,13rem),0.28fr) minmax(0,1.28fr) minmax(min(100%,16rem),0.44fr)}}}@layer ly.styles.z_pattern{:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern){--ly-container-max:100rem;--ly-page-padding-inline:clamp(1rem,3.4vw,3rem);--ly-section-padding-block:clamp(2rem,5.5vw,5rem);--ly-sidebar-width:clamp(14rem,20vw,21rem);--ly-grid-min:15rem;--ly-gap:clamp(1rem,2.4vw,2rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.875rem,1.9vw,1.5rem)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-app-main{padding-block:clamp(1rem,2.6vw,2.5rem)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-container,:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-grid--auto{grid-auto-rows:minmax(8rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1.18fr) minmax(min(100%,15rem),0.42fr)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-app-sidebar{display:block;position:sticky;top:var(--ly-space-4);height:calc(100svh - (var(--ly-space-4) * 2));overflow:auto}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-grid--auto>:nth-child(4n + 2){grid-column:span 2;min-height:12rem}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-sidebar-layout{grid-template-columns:minmax(0,1fr) minmax(min(100%,15rem),0.36fr)}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-split{grid-template-columns:minmax(0,0.92fr) minmax(min(100%,19rem),1.08fr);align-items:end}:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-panes--two{grid-template-columns:minmax(0,1.25fr) minmax(min(100%,17rem),0.75fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="z-pattern"],.ly-root[layout-style="z-pattern"],.ly-root.ly-layout-z-pattern,.ly-root.ly-style-z-pattern) .ly-panes--three{grid-template-columns:minmax(0,1.1fr) minmax(min(100%,15rem),0.55fr) minmax(min(100%,14rem),0.35fr)}}}@layer ly.styles.split_screen{:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen){--ly-container-max:100vw;--ly-page-padding-inline:clamp(0.875rem,2.5vw,2rem);--ly-section-padding-block:clamp(1.5rem,4vw,3.5rem);--ly-sidebar-width:50vw;--ly-grid-min:14rem;--ly-gap:clamp(0.875rem,2vw,1.5rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.875rem,1.6vw,1.25rem)}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-app-main{padding-block:0}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-container,:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-wrapper{width:min(100%,var(--ly-container-max))}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-app-sidebar{display:block;min-height:100%;overflow:auto}:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-sidebar-layout,:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-split,:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-panes--two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="split-screen"],.ly-root[layout-style="split-screen"],.ly-root.ly-layout-split-screen,.ly-root.ly-style-split-screen) .ly-panes--three{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}}}@layer ly.styles.mondrian{:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian){--ly-container-max:108rem;--ly-page-padding-inline:clamp(0.75rem,2.5vw,2rem);--ly-section-padding-block:clamp(1.75rem,4.5vw,4rem);--ly-sidebar-width:clamp(11rem,16vw,17rem);--ly-grid-min:11rem;--ly-gap:clamp(0.75rem,1.6vw,1.25rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(0.75rem,1.5vw,1.2rem)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-app-main{padding-block:clamp(0.75rem,1.8vw,1.5rem)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-container,:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-grid--auto{grid-auto-rows:minmax(7rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-app-shell{grid-template-areas:"sidebar header header" "sidebar main main";grid-template-columns:minmax(min(100%,11rem),0.28fr) minmax(0,0.86fr) minmax(0,1.14fr);grid-template-rows:auto 1fr}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-app-sidebar{display:block;position:sticky;top:var(--ly-space-3);height:calc(100svh - (var(--ly-space-3) * 2));overflow:auto}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-grid--auto>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2;min-height:15rem}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-sidebar-layout{grid-template-columns:minmax(min(100%,11rem),0.25fr) minmax(0,1fr)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-split{grid-template-columns:minmax(0,0.7fr) minmax(min(100%,20rem),1.3fr)}:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-panes--two{grid-template-columns:minmax(min(100%,13rem),0.46fr) minmax(0,1.54fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="mondrian"],.ly-root[layout-style="mondrian"],.ly-root.ly-layout-mondrian,.ly-root.ly-style-mondrian) .ly-panes--three{grid-template-columns:minmax(min(100%,11rem),0.28fr) minmax(0,1.44fr) minmax(min(100%,13rem),0.28fr)}}}@layer ly.styles.synthwave{:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave){--ly-container-max:112rem;--ly-page-padding-inline:clamp(1rem,4vw,3.5rem);--ly-section-padding-block:clamp(2.5rem,7vw,6rem);--ly-sidebar-width:clamp(14rem,18vw,20rem);--ly-grid-min:14rem;--ly-gap:clamp(1rem,2.8vw,2.25rem);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:clamp(1rem,2.2vw,1.8rem);--ly-carousel-item-min:18rem;--ly-carousel-item-max:34rem}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-main{padding-block:clamp(1rem,3vw,3rem)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-container,:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-wrapper{width:min(100% - var(--ly-page-padding-inline),var(--ly-container-max))}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-section{padding-block:var(--ly-section-padding-block)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-grid--auto{grid-auto-rows:minmax(9rem,auto)}@media (min-width:48rem){:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-shell{grid-template-areas:"header header" "main main" "sidebar sidebar";grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-sidebar{display:block;overflow:auto}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-sidebar-layout{grid-template-columns:minmax(0,1.2fr) minmax(min(100%,17rem),0.8fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-split{grid-template-columns:minmax(0,1fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-panes--two{grid-template-columns:minmax(0,1.35fr) minmax(min(100%,17rem),0.65fr)}}@media (min-width:80rem){:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-shell{grid-template-areas:"header header" "main sidebar";grid-template-columns:minmax(0,1.52fr) minmax(min(100%,17rem),0.48fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-app-sidebar{position:sticky;top:var(--ly-space-5);height:calc(100svh - (var(--ly-space-5) * 2))}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-split{grid-template-columns:minmax(0,1.42fr) minmax(min(100%,20rem),0.58fr)}:where(.ly-root[data-layout="synthwave"],.ly-root[layout-style="synthwave"],.ly-root.ly-layout-synthwave,.ly-root.ly-style-synthwave) .ly-panes--three{grid-template-columns:minmax(min(100%,14rem),0.36fr) minmax(0,1.28fr) minmax(min(100%,16rem),0.36fr)}}} diff --git a/dist/layout-ui-style-kit-bridge.css b/dist/layout-ui-style-kit-bridge.css index 1ccea91..94cd7e5 100644 --- a/dist/layout-ui-style-kit-bridge.css +++ b/dist/layout-ui-style-kit-bridge.css @@ -7,6 +7,16 @@ @layer ly.bridge { :where(.ly-root[data-ui][data-theme][data-mode], [data-ui][data-theme][data-mode] .ly-root) { --ly-ui-style-kit-bridge: 1; + + /* + Normalize UI kit root background geometry without redefining its paint. + Patterned theme layers should fill the viewport once instead of tiling. + */ + min-block-size: 100svh; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; } :where(.ly-root[data-ui="minimal-saas"], [data-ui="minimal-saas"] .ly-root) { diff --git a/docs/superpowers/specs/2026-07-07-interactive-layout-lab-ecosystem-design.md b/docs/superpowers/specs/2026-07-07-interactive-layout-lab-ecosystem-design.md new file mode 100644 index 0000000..865ec76 --- /dev/null +++ b/docs/superpowers/specs/2026-07-07-interactive-layout-lab-ecosystem-design.md @@ -0,0 +1,445 @@ +# Interactive Layout Lab And CSS Ecosystem Design + +## Status + +Approved direction for planning. This document describes the design for the +first implementation pass in `layout-style-css` and the coordinated follow-up +updates for `ui-style-kit-css` and `interactive-surface-css`. + +## Context + +`layout-style-css` is currently a structural CSS package with wrappers, app +shells, grids, panes, sidebars, layout recipes, layout personalities, a static +demo, versioned wiki docs, package contract tests, Playwright demo smoke checks, +and GitHub Pages artifact verification. + +The library is intended to stay layout-only. It should own spatial behavior: +shells, wrappers, panes, grids, spacing, sizing, scroll containment, and layout +personalities. It should not own color, typography, component paint, borders, +shadows, or theme modes. + +The broader ecosystem has three independent libraries: + +- `layout-style-css`: structural layout primitives and layout personalities. +- `ui-style-kit-css`: visual theme, component paint, typography, native controls, + surfaces, focus treatment, and modes. +- `interactive-surface-css`: interactive affordances and surface states such as + hover, focus, active, selected, disabled, and pressed. + +The product goal is to make each package valuable on its own while making the +three-package stack feel intentional, tested, and easy to adopt. + +## Recommendation + +Use a hub-and-spoke rollout. + +The first implementation pass should happen in `layout-style-css` because layout +is the easiest place for developers to see all three libraries working together. +The existing demo should become an Interactive Layout Lab, and the reliability +contracts should expand to prove both standalone layout behavior and integrated +ecosystem behavior. + +After the `layout-style-css` lab is designed and implemented, coordinated +follow-up specs should be created for `ui-style-kit-css` and +`interactive-surface-css`. Those follow-up updates should mirror the same +principles: standalone quality first, ecosystem alignment second. + +## Goals + +1. Replace the current showcase-style demo with a useful developer lab. +2. Demonstrate `layout-style-css` standalone, paired with `ui-style-kit-css`, and + paired with both `ui-style-kit-css` and `interactive-surface-css`. +3. Preserve the structural-only contract for package CSS. +4. Make copyable imports and markup match the active lab state. +5. Expand reliability checks around viewport behavior, scroll containment, + package exports, generated output, Pages output, and ecosystem import modes. +6. Document a clear ecosystem story: use one library, use any two, or use all + three. +7. Include coordinated follow-up updates for the other two packages so the + ecosystem becomes polished without making this package absorb their + responsibilities. + +## Non-Goals + +1. Do not add visual theme ownership to `layout-style-css`. +2. Do not require developers to install all three packages. +3. Do not add public `ly-*` classes only to satisfy demo chrome. +4. Do not create framework-specific wrappers in this pass. +5. Do not make the first pass depend on publishing new versions of the other two + libraries. +6. Do not replace the package docs with the lab. The lab should teach by doing; + docs should remain the durable reference. + +## Ecosystem Contract + +Each package must remain useful alone: + +- `layout-style-css` should render stable app shells, wrappers, grids, panes, + recipes, and layout personalities without the other libraries. +- `ui-style-kit-css` should render visual components, themes, modes, native + controls, and accessible paint without layout primitives. +- `interactive-surface-css` should provide meaningful interaction states without + requiring the other packages. + +Combined usage should add value, not hide requirements: + +- `layout-style-css` plus `ui-style-kit-css` gives structure plus visual identity. +- `ui-style-kit-css` plus `interactive-surface-css` gives visual identity plus + interaction affordances. +- `layout-style-css` plus `interactive-surface-css` gives structure plus + interaction states, with minimal local paint. +- all three together give a complete layout, visual, and interaction system. + +The lab and docs should make these combinations explicit instead of presenting +the all-three setup as the only polished path. + +## Interactive Layout Lab Design + +The lab remains a static demo under `demo/index.html` and continues to be +published through the existing GitHub Pages artifact flow. + +The first screen should be the lab itself, not a marketing page. It should feel +like a quiet developer tool: dense enough for repeated use, organized around +controls and preview output, and visually restrained so the library behavior is +easy to inspect. + +### Controls + +The lab should provide controls for: + +- UI style: values supported by `ui-style-kit-css`. +- Layout style: values supported by `layout-style-css`. +- Theme: values supported by the UI kit. +- Mode: light, dark, contrast, and any currently supported automatic mode. +- Library mode: + - layout only + - layout plus UI + - layout plus UI plus interaction +- Recipe: + - dashboard + - docs page + - admin shell + - list detail + - split hero + - gallery + - card grid +- Viewport preset: + - mobile + - tablet + - desktop + - wide +- Density: + - compact + - default + - spacious + +Density should be implemented through layout variables where practical. It +should not introduce visual paint decisions into the package CSS. + +### Preview + +The preview should use realistic app content so developers can evaluate real +layout behavior. It should include repeated surfaces, navigation, action groups, +bounded scroll regions, form-like controls, media frames, cards, and support +panes. + +The preview should make library mode visibly understandable: + +- Layout-only mode should still be usable and structurally clear, even if it is + visually plain. +- Layout plus UI mode should show visual identity and component paint. +- Layout plus UI plus interaction mode should show interaction affordances + without changing the structural markup contract. + +### Copy Output + +The lab should produce copyable snippets for: + +- CSS import setup. +- Root attributes. +- Recipe markup. + +The snippets should match the current lab state. Query parameters should encode +the selected lab state so a configuration can be linked, revisited, and tested. + +Copy controls are part of the demo UI, not the package API. They may use local +demo JavaScript and local demo CSS. + +### Demo CSS Boundary + +Local demo CSS may style the lab shell and controls when needed. That local CSS +must stay narrow and should not be copied into the package source. The authored +package CSS remains in `styles/`, and generated output remains in `dist/`. + +Any new public `ly-*` class must meet at least one of these conditions: + +- It solves a repeated layout problem beyond the lab. +- It composes existing primitives in a stable, framework-neutral way. +- It can be documented as a package primitive or recipe without relying on UI + paint. + +## Reliability Contract Expansion + +Reliability work should prove current behavior rather than merely checking that +files exist. + +### Static Contract Tests + +Static tests should verify: + +- Every package export resolves to an intended file. +- Every documented package import is exported. +- `styles/` is the authored source and matching `dist/` files are generated. +- Flattened and minified bundles are generated from source files. +- Layout CSS does not introduce visual ownership such as colors, typography, + borders, shadows, component paint, or visual theme tokens. +- Package files and npm pack dry-run contents stay intentional. +- Versioned docs and wiki files remain part of the package surface. + +### Rendered Contract Tests + +Rendered Playwright tests should verify: + +- The lab renders without page errors or console errors. +- Key lab controls are visible and usable at mobile, tablet, desktop, and wide + viewport sizes. +- Every layout style can render at the major viewport sizes. +- Every recipe avoids meaningful horizontal page overflow. +- App sidebars, local sidebars, panes, and scroll areas remain bounded. +- Sticky regions do not block access to content. +- Background layers do not visibly repeat or restart while scrolling. +- Copyable snippets are present and match the selected lab state. +- Query-parameter state restores the same lab configuration. +- Library modes render correctly: + - layout only + - layout plus UI + - layout plus UI plus interaction + +Rendered tests should focus on behavior and layout correctness. Full pixel-level +visual regression is optional and should not become a release blocker unless the +project later adopts a stable visual snapshot workflow. + +### Pages Contract Tests + +Pages tests should verify: + +- `output/github-pages/index.html` is generated from the demo. +- static demo assets are copied. +- generated CSS is included. +- demo paths are rewritten for the Pages root. +- canonical and metadata values remain intentional. + +## Documentation Updates + +Documentation should explain the ecosystem without making it feel mandatory. + +Required docs updates: + +- README: add the Interactive Layout Lab and ecosystem adoption paths. +- `docs/wiki/Home.md`: add ecosystem positioning and lab entry point. +- `docs/wiki/Getting-Started.md`: add standalone, two-library, and three-library + setup paths. +- `docs/wiki/Installation-And-CDN.md`: add import order and CDN examples for + one, two, and three packages. +- `docs/wiki/Layout-Recipes.md`: connect recipes to lab copy output. +- `docs/wiki/UI-Style-Kit-Compatibility.md`: clarify visual ownership and + layout ownership. +- `docs/wiki/Release-And-Publishing.md`: add lab and ecosystem verification to + release readiness. +- `docs/wiki/Security-And-Support.md`: add package-surface and supply-chain + verification notes. + +## Follow-Up Spec: `ui-style-kit-css` + +The `ui-style-kit-css` follow-up should improve the visual package as both a +standalone library and an ecosystem participant. + +### Objectives + +1. Add or improve a standalone style and theme lab. +2. Publish a documented style matrix for UI styles, themes, and modes. +3. Document standalone use, pairing with `layout-style-css`, pairing with + `interactive-surface-css`, and all-three usage. +4. Verify that visual ownership remains inside `ui-style-kit-css`. +5. Align README, docs, and demo examples with the ecosystem import order. + +### Candidate Deliverables + +- A theme/style lab with style, theme, mode, component, and native-control + previews. +- A machine-readable or documented style manifest that lists supported UI style + names, theme names, and mode values. +- Contract tests for readable contrast across supported modes. +- Contract tests for root background behavior, including non-repeating + full-viewport backgrounds where appropriate. +- Contract tests that component paint stays in the UI kit and does not require + layout classes. +- Docs that explain how the UI kit behaves alone and how it layers with + `layout-style-css`. + +### Boundaries + +The UI kit follow-up should not absorb layout primitives. It can document layout +integration, but it should keep visual responsibility focused on component +appearance, themes, native controls, and modes. + +## Follow-Up Spec: `interactive-surface-css` + +The `interactive-surface-css` follow-up should improve the interaction package as +both a standalone library and an ecosystem participant. + +### Objectives + +1. Add or improve an interaction-state lab. +2. Show hover, focus, active, selected, disabled, loading, and pressed states + with realistic surfaces. +3. Document standalone use, pairing with `layout-style-css`, pairing with + `ui-style-kit-css`, and all-three usage. +4. Verify that interactive affordances layer without destroying visual or layout + ownership. +5. Align README, docs, and demo examples with the ecosystem import order. + +### Candidate Deliverables + +- An interaction-state lab with keyboard and pointer state examples. +- Contract tests for state classes, data attributes, focus visibility, disabled + handling, and selected/pressed semantics. +- Rendered tests for keyboard focus movement and visible state changes. +- Docs that distinguish structural layout, visual paint, and interactive state + responsibilities. +- Examples that show `interactive-surface-css` alone and with the other two + packages. + +### Boundaries + +The interaction package should not become a theme system or layout system. It +should provide state affordances that layer over plain markup, UI kit visuals, or +layout-style surfaces without requiring any one of them. + +## Ecosystem Documentation Contract + +The three packages should share a consistent ecosystem story: + +- One library: + - layout only + - visual only + - interaction only +- Two libraries: + - layout plus visual + - visual plus interaction + - layout plus interaction +- Three libraries: + - layout plus visual plus interaction + +Each package should include: + +- a compatibility matrix +- supported version combinations +- recommended import order +- standalone examples +- combined examples +- release notes that identify whether a change affects standalone use, + ecosystem use, or both + +The preferred import order for the full ecosystem should be documented and +verified. The current expected order is: + +```js +import "ui-style-kit-css/with-bridge.css"; +import "interactive-surface-css/interactive-surface.css"; +import "layout-style-css/bridge.css"; +import "layout-style-css"; +``` + +If implementation testing proves a different order is more reliable, the docs +and tests should adopt the proven order consistently. + +## Rollout Plan + +### Phase 1: `layout-style-css` Lab And Contracts + +- Redesign `demo/index.html` into the Interactive Layout Lab. +- Add library mode, recipe, viewport, density, UI style, layout style, theme, and + mode controls. +- Add copyable import and markup snippets. +- Encode lab state in query parameters. +- Expand static package contract tests. +- Expand Playwright lab smoke tests. +- Update README and wiki docs. +- Keep existing generated output rules intact. + +### Phase 2: `ui-style-kit-css` Follow-Up Spec + +- Inspect the current UI kit repo state. +- Write a focused design spec for its style/theme lab and ecosystem docs. +- Implement only after that spec is reviewed. +- Verify standalone visual behavior and ecosystem layering. + +### Phase 3: `interactive-surface-css` Follow-Up Spec + +- Inspect the current interaction package repo state. +- Write a focused design spec for its interaction-state lab and ecosystem docs. +- Implement only after that spec is reviewed. +- Verify standalone interaction behavior and ecosystem layering. + +### Phase 4: Coordinated Release Readiness + +- Confirm compatible package versions. +- Confirm each package can pass its standalone release gate. +- Confirm ecosystem examples use published or intentionally local versions. +- Prepare release notes that separate standalone improvements from ecosystem + integration improvements. + +## Risks And Mitigations + +### Risk: Demo Needs Leak Into Public API + +Mitigation: keep lab chrome local to `demo/index.html`; require a documented +repeated layout need before adding a public `ly-*` class. + +### Risk: All-Three Stack Becomes The Only Good Path + +Mitigation: test and document standalone paths for each package and library mode. + +### Risk: Cross-Repo Scope Becomes Too Large + +Mitigation: implement the layout lab first, then write separate follow-up specs +for the other two packages before touching them. + +### Risk: Rendered Tests Become Slow + +Mitigation: keep the default matrix focused on representative combinations and +allow an exhaustive matrix through an environment variable or separate command. + +### Risk: Import Order Becomes Fragile + +Mitigation: document the chosen import order and test it through fixture pages or +lab modes. + +## Acceptance Criteria + +The `layout-style-css` implementation is ready when: + +- The lab is the first meaningful screen of the demo. +- Developers can switch library mode, UI style, layout style, theme, mode, + recipe, viewport preset, and density. +- Developers can copy imports and markup that match the current state. +- Query parameters can restore a lab state. +- Standalone layout mode is useful without `ui-style-kit-css` or + `interactive-surface-css`. +- Combined modes show clear ecosystem value. +- Static contract tests prove package exports, docs, generated output, package + contents, and visual-ownership boundaries. +- Rendered tests prove no meaningful horizontal overflow, usable controls, + bounded scroll regions, non-repeating backgrounds, and visible previews across + representative viewport and recipe combinations. +- Pages artifact tests prove the lab is publishable as a static site. +- README and wiki docs describe standalone, two-library, and three-library + adoption paths. +- Follow-up tracks for `ui-style-kit-css` and `interactive-surface-css` are + documented with objectives, deliverables, and boundaries. + +The ecosystem design objective is satisfied when this spec is reviewed and the +subsequent implementation plan includes both the `layout-style-css` lab work and +the coordinated follow-up updates for the other two packages. + diff --git a/styles/layout-ui-style-kit-bridge.css b/styles/layout-ui-style-kit-bridge.css index 1ccea91..94cd7e5 100644 --- a/styles/layout-ui-style-kit-bridge.css +++ b/styles/layout-ui-style-kit-bridge.css @@ -7,6 +7,16 @@ @layer ly.bridge { :where(.ly-root[data-ui][data-theme][data-mode], [data-ui][data-theme][data-mode] .ly-root) { --ly-ui-style-kit-bridge: 1; + + /* + Normalize UI kit root background geometry without redefining its paint. + Patterned theme layers should fill the viewport once instead of tiling. + */ + min-block-size: 100svh; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; } :where(.ly-root[data-ui="minimal-saas"], [data-ui="minimal-saas"] .ly-root) { diff --git a/test/demo-smoke.test.mjs b/test/demo-smoke.test.mjs index d007c55..727bd32 100644 --- a/test/demo-smoke.test.mjs +++ b/test/demo-smoke.test.mjs @@ -80,6 +80,15 @@ async function verifyDemoState(page, path, expectedState, viewport) { }; const routeHandler = (route) => route.fulfill({ path: uiKitCssPath, contentType: "text/css" }); + const assertBackgroundLayers = (value, expected, message) => { + const layers = value.split(",").map((layer) => layer.trim()).filter(Boolean); + + assert( + layers.length > 0 && layers.every((layer) => layer === expected), + `${message}; received "${value}"` + ); + }; + page.on("console", onConsole); page.on("pageerror", onPageError); await page.route(routeUrl, routeHandler); @@ -103,6 +112,9 @@ async function verifyDemoState(page, path, expectedState, viewport) { wrappers: document.querySelectorAll(".ly-wrapper").length, recipes: document.querySelectorAll("#recipes article").length, surfaces: document.querySelectorAll(".ly-surface").length, + rootBackgroundAttachment: getComputedStyle(document.body).backgroundAttachment, + rootBackgroundRepeat: getComputedStyle(document.body).backgroundRepeat, + rootBackgroundSize: getComputedStyle(document.body).backgroundSize, uiButtonClasses: document.querySelector("[data-ui-kit~='button']")?.className, uiSurfaceClasses: document.querySelector("[data-ui-kit~='card'], [data-ui-kit~='panel']")?.className })); @@ -135,6 +147,21 @@ async function verifyDemoState(page, path, expectedState, viewport) { state.horizontalOverflow <= 4, `Demo should not create meaningful horizontal overflow; received ${state.horizontalOverflow}px` ); + assertBackgroundLayers( + state.rootBackgroundAttachment, + "fixed", + "Demo root backgrounds should stay anchored while scrolling" + ); + assertBackgroundLayers( + state.rootBackgroundRepeat, + "no-repeat", + "Demo root backgrounds should not tile" + ); + assertBackgroundLayers( + state.rootBackgroundSize, + "100% 100%", + "Demo root backgrounds should cover the viewport once" + ); assert.deepEqual(consoleErrors, [], "Demo should not log console errors"); assert.deepEqual(pageErrors, [], "Demo should not throw page errors"); } finally {