layout-style-css 1.0.0

package/dist/layout-style-y2k.css

@@ -0,0 +1,72 @@
+/*
+  Layout style: y2k.
+  Centered hub shell with floating-window rhythm and in-flow support regions.
+  Visual identity remains owned by ui-style-kit-css.
+*/
+
+@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);
+    }
+  }
+}

package/dist/layout-ui-style-kit-bridge.css

@@ -0,0 +1,55 @@
+/*
+  Compatibility bridge for ui-style-kit-css.
+  This bridge intentionally does not map color, type, border, or shadow tokens.
+  ui-style-kit-css owns those visuals; layout-style-library owns structure.
+*/
+
+@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;
+  }
+}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "layout-style-css",
+  "version": "1.0.0",
+  "description": "Shell-first CSS layout primitives that complement ui-style-kit-css@2.0.1.",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/Foscat/layout-style-css#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Foscat/layout-style-css.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Foscat/layout-style-css/issues"
+  },
+  "keywords": [
+    "css",
+    "layout",
+    "design-system",
+    "ui-style-kit-css",
+    "responsive-layout",
+    "shell-layouts"
+  ],
+  "main": "dist/layout-style-css.css",
+  "style": "dist/layout-style-css.min.css",
+  "unpkg": "dist/layout-style-css.min.css",
+  "jsdelivr": "dist/layout-style-css.min.css",
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "pages:build": "node scripts/build-pages.mjs",
+    "lint": "stylelint \"styles/**/*.css\"",
+    "test": "node test/layout-css-contract.test.mjs && node test/demo-smoke.test.mjs && node test/pages-artifact.test.mjs",
+    "check": "npm run build && npm run lint && npm test && npm run pack:dry-run",
+    "pack:dry-run": "npm pack --dry-run --ignore-scripts",
+    "publish:dry-run": "npm publish --dry-run --access public",
+    "release:verify": "npm run check && npm run publish:dry-run",
+    "prepack": "npm run check",
+    "prepublishOnly": "npm run check"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "interactive-surface-css": "1.2.5",
+    "ui-style-kit-css": "2.0.1"
+  },
+  "peerDependenciesMeta": {
+    "interactive-surface-css": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.61.1",
+    "interactive-surface-css": "1.2.5",
+    "stylelint": "17.14.0",
+    "ui-style-kit-css": "2.0.1"
+  },
+  "exports": {
+    ".": "./dist/layout-style-css.css",
+    "./css": "./dist/layout-style-css.css",
+    "./css.css": "./dist/layout-style-css.css",
+    "./min": "./dist/layout-style-css.min.css",
+    "./min.css": "./dist/layout-style-css.min.css",
+    "./dist/layout-style-css.css": "./dist/layout-style-css.css",
+    "./dist/layout-style-css.min.css": "./dist/layout-style-css.min.css",
+    "./base.css": "./dist/layout-base.css",
+    "./bridge.css": "./dist/layout-ui-style-kit-bridge.css",
+    "./all.css": "./dist/layout-all.css",
+    "./all-with-ui-kit.css": "./dist/layout-all-with-ui-kit.css",
+    "./all-with-ui-kit-and-interactive-surface.css": "./dist/layout-all-with-ui-kit-and-interactive-surface.css",
+    "./minimal-saas.css": "./dist/layout-style-minimal-saas.css",
+    "./bento.css": "./dist/layout-style-bento.css",
+    "./maximalist.css": "./dist/layout-style-maximalist.css",
+    "./bauhaus.css": "./dist/layout-style-bauhaus.css",
+    "./tactile.css": "./dist/layout-style-tactile.css",
+    "./neumorphism.css": "./dist/layout-style-neumorphism.css",
+    "./retrofuturism.css": "./dist/layout-style-retrofuturism.css",
+    "./brutalism.css": "./dist/layout-style-brutalism.css",
+    "./cyberpunk.css": "./dist/layout-style-cyberpunk.css",
+    "./y2k.css": "./dist/layout-style-y2k.css",
+    "./retro-glass.css": "./dist/layout-style-retro-glass.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "demo/index.html",
+    "demo/assets/apple-touch-icon.svg",
+    "demo/assets/favicon.svg",
+    "demo/assets/social-card.svg",
+    "demo/browserconfig.xml",
+    "demo/robots.txt",
+    "demo/site.webmanifest",
+    "demo/sitemap.xml",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/styles/layout-base.css

@@ -0,0 +1,472 @@
+/*
+  Layout Style Library base primitives.
+  This file owns spatial composition only. Visual paint, typography, borders,
+  shadows, and theme color are intentionally delegated to ui-style-kit-css.
+*/
+
+@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 {
+    /* Keep wrappers resilient during viewport resizing without owning visual paint. */
+    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) {
+    /*
+      Fixed support tracks are capped against their container so nested layouts
+      can compress instead of forcing horizontal page overflow.
+    */
+    .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; }
+  }
+}