layout-style-css 1.0.0

package/dist/layout-style-css.min.css

@@ -0,0 +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-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-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-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}}@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)}}}

package/dist/layout-style-cyberpunk.css

@@ -0,0 +1,70 @@
+/*
+  Layout style: cyberpunk.
+  Narrow utility rail with dense command workspace and compact gutters. Visual
+  identity remains owned by ui-style-kit-css.
+*/
+
+@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);
+    }
+  }
+}

package/dist/layout-style-maximalist.css

@@ -0,0 +1,93 @@
+/*
+  Layout style: maximalist.
+  Editorial shell with oversized hero splits and staggered supporting regions.
+  Visual identity remains owned by ui-style-kit-css.
+*/
+
+@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 {
+      /* Keep the editorial stage stacked until the wider shell can carry the oversized rhythm. */
+      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);
+    }
+  }
+}

package/dist/layout-style-minimal-saas.css

@@ -0,0 +1,67 @@
+/*
+  Layout style: minimal-saas.
+  Steady left-rail SaaS shell with conservative content widths and predictable
+  workspace rhythm. Visual identity remains owned by ui-style-kit-css.
+*/
+
+@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);
+    }
+  }
+}

package/dist/layout-style-neumorphism.css

@@ -0,0 +1,72 @@
+/*
+  Layout style: neumorphism.
+  Centered island shell with detached support regions. Visual identity remains
+  owned by ui-style-kit-css.
+*/
+
+@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);
+    }
+  }
+}

package/dist/layout-style-retro-glass.css

@@ -0,0 +1,82 @@
+/*
+  Layout style: retro-glass.
+  Top-framed content shell with a floating right utility rail. Visual identity
+  remains owned by ui-style-kit-css.
+*/
+
+@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 {
+      /* Keep glass feature panels stacked until the floating rail has enough horizontal room. */
+      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);
+    }
+  }
+}

package/dist/layout-style-retrofuturism.css

@@ -0,0 +1,71 @@
+/*
+  Layout style: retrofuturism.
+  Panoramic bridge shell with symmetric pods and a wide central stage. Visual
+  identity remains owned by ui-style-kit-css.
+*/
+
+@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);
+    }
+  }
+}

package/dist/layout-style-tactile.css

@@ -0,0 +1,70 @@
+/*
+  Layout style: tactile.
+  Instrument-panel shell with a heavier support dock and dense controls. Visual
+  identity remains owned by ui-style-kit-css.
+*/
+
+@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);
+    }
+  }
+}