@duskmoon-dev/core 1.19.2 → 1.19.3

package/dist/standalone/duskmoonui-themes.css

@@ -1,5 +1,5 @@
 /**
- * @duskmoon-dev/core v1.19.2
+ * @duskmoon-dev/core v1.19.3
  * Built-in DuskMoonUI themes
  * https://github.com/duskmoon-dev/duskmoonui
  * @license MIT

package/dist/standalone/duskmoonui.css

@@ -1,6 +1,6 @@
 /**
- * @duskmoon-dev/core v1.19.2
- * @duskmoon-dev/css-art v1.19.2
+ * @duskmoon-dev/core v1.19.3
+ * @duskmoon-dev/css-art v1.19.3
  * Complete standalone DuskMoonUI styles
  * https://github.com/duskmoon-dev/duskmoonui
  * @license MIT
@@ -16764,6 +16764,411 @@ html {
   }
 }
 
+/**
+ * Footer Composition Primitive
+ * Responsive, content-neutral groups on an MD3 surface.
+ */
+
+@layer components {
+  .footer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+    gap: var(--footer-gap, 2rem);
+    width: 100%;
+    padding: var(--footer-padding, 2rem);
+    background-color: var(--color-surface-container-low);
+    color: var(--color-on-surface);
+  }
+
+  .footer > :where(nav, section, div):not(.footer-horizontal):not(.footer-vertical) {
+    display: grid;
+    align-content: start;
+    gap: 0.75rem;
+  }
+
+  .footer-title {
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .footer-center {
+    place-items: center;
+    text-align: center;
+  }
+
+  .footer-horizontal {
+    grid-template-columns: none;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .footer-vertical {
+    grid-template-columns: minmax(0, 1fr);
+    grid-auto-flow: row;
+  }
+}
+
+/**
+ * Hero Composition Primitive
+ * Layers a content region and an optional presentation-neutral overlay.
+ */
+
+@layer components {
+  .hero {
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    place-items: center;
+    isolation: isolate;
+  }
+
+  .hero > * {
+    grid-area: 1 / 1;
+  }
+
+  .hero-content {
+    z-index: 1;
+    display: flex;
+    width: min(100%, var(--hero-content-max-width, 80rem));
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hero-overlay {
+    z-index: 0;
+    align-self: stretch;
+    justify-self: stretch;
+    pointer-events: none;
+  }
+
+  .hero-center {
+    justify-items: center;
+    text-align: center;
+  }
+
+  .hero-start {
+    justify-items: start;
+    text-align: start;
+  }
+
+  .hero-end {
+    justify-items: end;
+    text-align: end;
+  }
+
+  .hero-start > .hero-content {
+    justify-content: flex-start;
+  }
+
+  .hero-end > .hero-content {
+    justify-content: flex-end;
+  }
+}
+
+/**
+ * Indicator Composition Primitive
+ * Positions arbitrary content around an inline-sized anchor.
+ */
+
+@layer components {
+  .indicator {
+    position: relative;
+    display: inline-grid;
+    width: max-content;
+    max-width: 100%;
+  }
+
+  .indicator-item {
+    --indicator-block: 0%;
+    --indicator-inline: 0%;
+    --indicator-x: 50%;
+    --indicator-y: -50%;
+    position: absolute;
+    z-index: 1;
+    inset-block-start: var(--indicator-block);
+    inset-inline-end: var(--indicator-inline);
+    translate: var(--indicator-x) var(--indicator-y);
+  }
+
+  .indicator-top {
+    --indicator-block: 0%;
+    --indicator-y: -50%;
+  }
+
+  .indicator-middle {
+    --indicator-block: 50%;
+    --indicator-y: -50%;
+  }
+
+  .indicator-bottom {
+    --indicator-block: 100%;
+    --indicator-y: -50%;
+  }
+
+  .indicator-start {
+    --indicator-inline: 100%;
+    --indicator-x: 50%;
+  }
+
+  .indicator-center {
+    --indicator-inline: 50%;
+    --indicator-x: 50%;
+  }
+
+  .indicator-end {
+    --indicator-inline: 0%;
+    --indicator-x: 50%;
+  }
+
+  :dir(rtl) .indicator-item {
+    --indicator-x: -50%;
+  }
+
+  :dir(rtl) .indicator-start {
+    --indicator-x: -50%;
+  }
+}
+
+/**
+ * Join Composition Primitive
+ * Visually connects arbitrary adjacent controls.
+ */
+
+@layer components {
+  .join {
+    display: inline-flex;
+    align-items: stretch;
+    flex-direction: row;
+    width: max-content;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+
+  .join > .join-item {
+    position: relative;
+    flex: 0 1 auto;
+  }
+
+  .join > .join-item:hover,
+  .join > .join-item:focus,
+  .join > .join-item:focus-within {
+    z-index: 1;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:not(:first-child) {
+    margin-inline-start: -1px;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:first-child:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  .join-vertical {
+    flex-direction: column;
+  }
+
+  .join-vertical > .join-item {
+    margin-inline-start: 0;
+  }
+
+  .join-vertical > .join-item:not(:first-child) {
+    margin-block-start: -1px;
+  }
+
+  .join-vertical > .join-item:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  .join-vertical > .join-item:first-child:not(:last-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .join-vertical > .join-item:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+}
+
+/**
+ * Mask Composition Primitive
+ * Small, dependency-free catalog of reusable clipping shapes.
+ */
+
+@layer components {
+  .mask {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    vertical-align: middle;
+    object-fit: cover;
+  }
+
+  .mask-circle {
+    clip-path: circle(50% at 50% 50%);
+  }
+
+  .mask-squircle {
+    clip-path: inset(0 round 28%);
+  }
+
+  .mask-square {
+    clip-path: inset(0);
+  }
+
+  .mask-diamond {
+    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  }
+
+  .mask-hexagon {
+    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
+  }
+
+  .mask-triangle {
+    clip-path: polygon(50% 0, 100% 100%, 0 100%);
+  }
+}
+
+/**
+ * Sidebar Layout Composition Primitive
+ * Persistent, responsive sidebar + content grid; application code owns state.
+ */
+
+@layer components {
+  .sidebar-layout {
+    --sidebar-layout-width: 17.5rem;
+    --sidebar-layout-compact-width: 5rem;
+    container-type: inline-size;
+    container-name: sidebar-layout;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas: "sidebar content";
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    background-color: var(--color-surface);
+    color: var(--color-on-surface);
+  }
+
+  .sidebar-layout-sidebar {
+    display: none;
+    grid-area: sidebar;
+    width: var(--sidebar-layout-width);
+    min-width: 0;
+    overflow: hidden;
+    background-color: var(--color-surface-container-low);
+    color: var(--color-on-surface);
+    border-inline-end: 1px solid var(--color-outline-variant);
+  }
+
+  .sidebar-layout-content {
+    grid-area: content;
+    min-width: 0;
+  }
+
+  .sidebar-layout-start {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas: "sidebar content";
+  }
+
+  .sidebar-layout-end {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "content sidebar";
+  }
+
+  .sidebar-layout-end > .sidebar-layout-sidebar {
+    border-inline-start: 1px solid var(--color-outline-variant);
+    border-inline-end: 0;
+  }
+
+  @container sidebar-layout (min-width: 48rem) {
+    .sidebar-layout-sidebar {
+      display: block;
+    }
+  }
+
+  .sidebar-layout-compact > .sidebar-layout-sidebar {
+    width: var(--sidebar-layout-compact-width);
+  }
+
+  .sidebar-layout-hidden > .sidebar-layout-sidebar {
+    display: none;
+  }
+}
+
+/**
+ * Stack Composition Primitive
+ * Overlaps arbitrary children in one intrinsic CSS Grid area.
+ */
+
+@layer components {
+  .stack {
+    --stack-inline-offset: 0;
+    --stack-block-offset: 0.375rem;
+    display: inline-grid;
+    place-items: stretch;
+    isolation: isolate;
+  }
+
+  .stack > * {
+    grid-area: 1 / 1;
+    position: relative;
+    min-width: 0;
+  }
+
+  .stack > :first-child {
+    z-index: 3;
+  }
+
+  .stack > :nth-child(2) {
+    z-index: 2;
+    inset-inline-start: var(--stack-inline-offset);
+    inset-block-start: var(--stack-block-offset);
+  }
+
+  .stack > :nth-child(n + 3) {
+    z-index: 1;
+    inset-inline-start: calc(var(--stack-inline-offset) * 2);
+    inset-block-start: calc(var(--stack-block-offset) * 2);
+  }
+
+  .stack-top {
+    --stack-inline-offset: 0;
+    --stack-block-offset: -0.375rem;
+  }
+
+  .stack-bottom {
+    --stack-inline-offset: 0;
+    --stack-block-offset: 0.375rem;
+  }
+
+  .stack-start {
+    --stack-inline-offset: -0.375rem;
+    --stack-block-offset: 0;
+  }
+
+  .stack-end {
+    --stack-inline-offset: 0.375rem;
+    --stack-block-offset: 0;
+  }
+}
+
 /**
  * Home Page Layout
  * App-bar-led public application shell driven by its containing width.

package/dist/standalone/duskmoonui.js

@@ -1,6 +1,6 @@
 /**
- * @duskmoon-dev/core v1.19.2
- * @duskmoon-dev/css-art v1.19.2
+ * @duskmoon-dev/core v1.19.3
+ * @duskmoon-dev/css-art v1.19.3
  * Standalone Tailwind CSS v4 plugin bundle
  * https://github.com/duskmoon-dev/duskmoonui
  * @license MIT
@@ -240,7 +240,7 @@ var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem",
       var(--color-outline-variant) 20%,
       var(--color-outline-variant) 80%,
       transparent
-    )` } }, ".divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-compact": { "@layer components": { margin: "0.25rem 0" } }, ".divider-compact:not(:empty)": { "@layer components": { gap: "0.5rem" } }, ".divider-compact.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-comfortable": { "@layer components": { margin: "1.5rem 0" } }, ".divider-comfortable.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-spacious": { "@layer components": { margin: "2rem 0" } }, ".divider-spacious:not(:empty)": { "@layer components": { gap: "1.5rem" } }, ".divider-spacious.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-none": { "@layer components": { margin: "0" } }, ".divider-xs": { "@layer components": { margin: "0.25rem 0" } }, ".divider-xs.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-sm": { "@layer components": { margin: "0.5rem 0" } }, ".divider-sm.divider-vertical": { "@layer components": { margin: "0 0.5rem" } }, ".divider-lg": { "@layer components": { margin: "1.5rem 0" } }, ".divider-lg.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-xl": { "@layer components": { margin: "2rem 0" } }, ".divider-xl.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-inset": { "@layer components": { paddingLeft: "4rem" } }, ".divider-inset-right": { "@layer components": { paddingRight: "4rem" } }, ".divider-inset-both": { "@layer components": { paddingLeft: "4rem", paddingRight: "4rem" } }, ".divider-list": { "@layer components": { margin: "0", paddingLeft: "1rem" } }, ".divider-card": { "@layer components": { margin: "0", marginLeft: "-1rem", marginRight: "-1rem" } }, ".divider-text": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider-text:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider-text::before, \n  .divider-text::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-text-left::before, \n  .divider-text-left.divider-text::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-text-right::after, \n  .divider-text-right.divider-text::after": { "@layer components": { flex: "0 0 2rem" } }, ".home-page": { "@layer components": { containerType: "inline-size", containerName: "home-page", width: "100%", minWidth: "0", minHeight: "var(--home-page-min-height, 100dvh)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".home-page-frame": { "@layer components": { display: "grid", minHeight: "inherit", gridTemplateRows: "auto minmax(0, 1fr) auto" } }, ".home-page-header": { "@layer components": { zIndex: 10 } }, ".home-page-nav": [{ "@layer components": { display: "none", alignItems: "center", gap: "0.25rem" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "flex" } } }], ".home-page-actions": [{ "@layer components": { display: "none", alignItems: "center", gap: "0.25rem" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "flex" } } }], ".home-page-menu-trigger": [{ "@layer components": { display: "inline-flex" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "none" } } }], ".home-page-mobile-menu": [{ "@layer components": { maxWidth: "min(20rem, calc(100cqi - 2rem))" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "none" } } }], ".home-page-main": { "@layer components": { minWidth: "0" } }, ".home-page-content": [{ "@layer components": { width: "min(100%, 80rem)", marginInline: "auto", padding: "clamp(1rem, 5cqi, 3rem)" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { paddingInline: "clamp(2rem, 5cqi, 5rem)" } } }], ".home-page-hero": [{ "@layer components": { display: "grid", alignItems: "center", gridTemplateColumns: "minmax(0, 1fr)", gap: "clamp(2rem, 5cqi, 4rem)" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { gridTemplateColumns: "minmax(0, 1fr) minmax(18rem, 0.8fr)" } } }], ".home-page-footer": { "@layer components": { borderTop: "1px solid var(--color-outline-variant)", backgroundColor: "var(--color-surface-container-low)" } }, ".sign-page": { "@layer components": { containerType: "inline-size", containerName: "sign-page", width: "100%", minWidth: "0", minHeight: "var(--sign-page-min-height, 100dvh)", overflow: "hidden", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".sign-page-frame": [{ "@layer components": { display: "grid", minHeight: "inherit", gridTemplateColumns: "minmax(0, 1fr)" } }, { "@layer components": { "@container sign-page (min-width: 48rem)": { gridTemplateColumns: "minmax(20rem, 1.15fr) minmax(24rem, 0.85fr)" } } }], ".sign-page-aside": [{ "@layer components": { display: "none", position: "relative", isolation: "isolate", overflow: "hidden", padding: "clamp(2rem, 6cqi, 5rem)", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, { "@layer components": { "@container sign-page (min-width: 48rem)": { display: "flex", flexDirection: "column", justifyContent: "space-between" } } }], ".sign-page-aside::before, \n  .sign-page-aside::after": { "@layer components": { content: '""', position: "absolute", zIndex: -1, borderRadius: "var(--radius-full)", background: "color-mix(in oklch, var(--color-tertiary) 24%, transparent)", filter: "blur(1px)" } }, ".sign-page-aside::before": { "@layer components": { width: "22rem", height: "22rem", inset: "-8rem -6rem auto auto" } }, ".sign-page-aside::after": { "@layer components": { width: "15rem", height: "15rem", inset: "auto auto -5rem -4rem", background: "color-mix(in oklch, var(--color-secondary) 22%, transparent)" } }, ".sign-page-main": { "@layer components": { display: "grid", placeItems: "center", minWidth: "0", padding: "clamp(1rem, 6cqi, 4rem)", backgroundColor: "var(--color-surface)" } }, ".sign-page-content": { "@layer components": { width: "min(100%, 30rem)" } }, ".bottom-nav": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", zIndex: 1000, display: "flex", alignItems: "stretch", justifyContent: "space-around", minHeight: "5rem", paddingBottom: "env(safe-area-inset-bottom, 0)", backgroundColor: "var(--color-surface)", boxShadow: "0 -1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-item": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1, minWidth: "4rem", maxWidth: "10rem", padding: "0.75rem 0.25rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "color 150ms ease-in-out", textDecoration: "none", gap: "0.25rem" } }, ".bottom-nav-item:hover": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-item:focus-visible": { "@layer components": { outline: "none" } }, ".bottom-nav-item:focus-visible .bottom-nav-indicator": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".bottom-nav-item.active": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-indicator": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "4rem", height: "2rem", borderRadius: "var(--radius-lg)", transition: "background-color 150ms ease-in-out" } }, ".bottom-nav-item:hover .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".bottom-nav-icon": { "@layer components": { fontSize: "1.5rem", lineHeight: 1, transition: "font-size 150ms ease-in-out" } }, ".bottom-nav-label": { "@layer components": { fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" } }, ".bottom-nav-item.active .bottom-nav-label": { "@layer components": { fontWeight: 600 } }, ".bottom-nav-badge": { "@layer components": { position: "absolute", top: "0", right: "0.5rem", minWidth: "1rem", height: "1rem", padding: "0 0.25rem", fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", color: "var(--color-error-content)", backgroundColor: "var(--color-error)", borderRadius: "var(--radius-full)", textAlign: "center" } }, ".bottom-nav-badge-dot": { "@layer components": { minWidth: "0.5rem", width: "0.5rem", height: "0.5rem", padding: "0", top: "0.125rem", right: "0.75rem" } }, ".bottom-nav-elevated": { "@layer components": { boxShadow: "0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-bordered": { "@layer components": { boxShadow: "none", borderTop: "1px solid var(--color-outline-variant)" } }, ".bottom-nav-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-primary .bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".bottom-nav-primary .bottom-nav-item.active": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".bottom-nav-icons-only .bottom-nav-label": { "@layer components": { display: "none" } }, ".bottom-nav-icons-only .bottom-nav-item": { "@layer components": { padding: "1rem 0.25rem" } }, ".bottom-nav-labels-active .bottom-nav-label": { "@layer components": { opacity: 0, maxHeight: "0", overflow: "hidden", transition: "opacity 150ms ease-in-out, max-height 150ms ease-in-out" } }, ".bottom-nav-labels-active .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, maxHeight: "1rem" } }, ".bottom-nav-shifting .bottom-nav-item": { "@layer components": { flex: "0 1 4rem", transition: "flex 200ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active": { "@layer components": { flex: "1 1 6rem" } }, ".bottom-nav-shifting .bottom-nav-label": { "@layer components": { opacity: 0, transform: "translateY(0.5rem)", transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, transform: "translateY(0)" } }, ".nav-rail": { "@layer components": { position: "fixed", left: "0", top: "0", bottom: "0", zIndex: 1000, display: "flex", flexDirection: "column", alignItems: "center", width: "5rem", padding: "1rem 0", backgroundColor: "var(--color-surface)", borderRight: "1px solid var(--color-outline-variant)" } }, ".nav-rail .bottom-nav-item": { "@layer components": { width: "100%", padding: "0.5rem", margin: "0.25rem 0" } }, ".nav-rail .bottom-nav-indicator": { "@layer components": { width: "3.5rem", height: "2rem" } }, ".bottom-nav-responsive": { "@layer components": { "@media (min-width: 768px)": { position: "relative", bottom: "auto", justifyContent: "flex-start", gap: "0.5rem", minHeight: "3rem", padding: "0 1rem", boxShadow: "none", borderBottom: "1px solid var(--color-outline-variant)" } } }, ".bottom-nav-responsive .bottom-nav-item": { "@layer components": { "@media (min-width: 768px)": { flex: "0 0 auto", flexDirection: "row", gap: "0.5rem", padding: "0.75rem 1rem" } } }, ".bottom-nav-responsive .bottom-nav-indicator": { "@layer components": { "@media (min-width: 768px)": { width: "auto", height: "auto", backgroundColor: "transparent !important" } } }, ".bottom-nav-responsive .bottom-nav-item.active": { "@layer components": { "@media (min-width: 768px)": { borderBottom: "2px solid var(--color-primary)" } } }, ".bottom-nav-item, \n    .bottom-nav-indicator, \n    .bottom-nav-icon, \n    .bottom-nav-label, \n    .bottom-nav-shifting .bottom-nav-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".circle-menu": { "@layer components": { "--circle-menu-size": "3rem", "--circle-menu-item-size": "3rem", "--circle-menu-radius": "5.5rem", "--circle-menu-icon-size": "1.25rem", "--circle-menu-bar-width": "1.125rem", "--circle-menu-bar-height": "0.1875rem", "--circle-menu-bar-gap": "0.375rem", "--circle-menu-btn-bg": "var(--color-primary-container)", "--circle-menu-bar-color": "var(--color-on-primary-container)", "--circle-menu-item-bg": "var(--color-primary-container)", "--circle-menu-item-color": "var(--color-on-primary-container)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-primary) 30%, transparent)", position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)" } }, ".circle-menu-toggler": { "@layer components": { position: "absolute", inset: "0", margin: "auto", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", zIndex: 10, opacity: 0, cursor: "pointer" } }, ".circle-menu-label": [{ "@layer components": { position: "absolute", inset: "0", margin: "auto", display: "block", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-btn-bg)", zIndex: 1, pointerEvents: "none", transition: "background-color 0.3s ease" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".circle-menu-label::before": { "@layer components": { content: "''", position: "absolute", top: "50%", left: "50%", width: "var(--circle-menu-bar-width)", height: "var(--circle-menu-bar-height)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-bar-color)", boxShadow: `0 var(--circle-menu-bar-gap) 0 var(--circle-menu-bar-color),
+    )` } }, ".divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-compact": { "@layer components": { margin: "0.25rem 0" } }, ".divider-compact:not(:empty)": { "@layer components": { gap: "0.5rem" } }, ".divider-compact.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-comfortable": { "@layer components": { margin: "1.5rem 0" } }, ".divider-comfortable.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-spacious": { "@layer components": { margin: "2rem 0" } }, ".divider-spacious:not(:empty)": { "@layer components": { gap: "1.5rem" } }, ".divider-spacious.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-none": { "@layer components": { margin: "0" } }, ".divider-xs": { "@layer components": { margin: "0.25rem 0" } }, ".divider-xs.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-sm": { "@layer components": { margin: "0.5rem 0" } }, ".divider-sm.divider-vertical": { "@layer components": { margin: "0 0.5rem" } }, ".divider-lg": { "@layer components": { margin: "1.5rem 0" } }, ".divider-lg.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-xl": { "@layer components": { margin: "2rem 0" } }, ".divider-xl.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-inset": { "@layer components": { paddingLeft: "4rem" } }, ".divider-inset-right": { "@layer components": { paddingRight: "4rem" } }, ".divider-inset-both": { "@layer components": { paddingLeft: "4rem", paddingRight: "4rem" } }, ".divider-list": { "@layer components": { margin: "0", paddingLeft: "1rem" } }, ".divider-card": { "@layer components": { margin: "0", marginLeft: "-1rem", marginRight: "-1rem" } }, ".divider-text": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider-text:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider-text::before, \n  .divider-text::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-text-left::before, \n  .divider-text-left.divider-text::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-text-right::after, \n  .divider-text-right.divider-text::after": { "@layer components": { flex: "0 0 2rem" } }, ".footer": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(12rem, 100%), 1fr))", gap: "var(--footer-gap, 2rem)", width: "100%", padding: "var(--footer-padding, 2rem)", backgroundColor: "var(--color-surface-container-low)", color: "var(--color-on-surface)" } }, ".footer > :where(nav, section, div):not(.footer-horizontal):not(.footer-vertical)": { "@layer components": { display: "grid", alignContent: "start", gap: "0.75rem" } }, ".footer-title": { "@layer components": { color: "var(--color-on-surface-variant)", fontSize: "0.75rem", fontWeight: 600, lineHeight: "1rem", letterSpacing: "0.08em", textTransform: "uppercase" } }, ".footer-center": { "@layer components": { placeItems: "center", textAlign: "center" } }, ".footer-horizontal": { "@layer components": { gridTemplateColumns: "none", gridAutoFlow: "column", gridAutoColumns: "minmax(0, 1fr)", alignItems: "start" } }, ".footer-vertical": { "@layer components": { gridTemplateColumns: "minmax(0, 1fr)", gridAutoFlow: "row" } }, ".hero": { "@layer components": { display: "grid", width: "100%", minWidth: "0", placeItems: "center", isolation: "isolate" } }, ".hero > *": { "@layer components": { gridArea: "1 / 1" } }, ".hero-content": { "@layer components": { zIndex: 1, display: "flex", width: "min(100%, var(--hero-content-max-width, 80rem))", minWidth: "0", alignItems: "center", justifyContent: "center" } }, ".hero-overlay": { "@layer components": { zIndex: 0, alignSelf: "stretch", justifySelf: "stretch", pointerEvents: "none" } }, ".hero-center": { "@layer components": { justifyItems: "center", textAlign: "center" } }, ".hero-start": { "@layer components": { justifyItems: "start", textAlign: "start" } }, ".hero-end": { "@layer components": { justifyItems: "end", textAlign: "end" } }, ".hero-start > .hero-content": { "@layer components": { justifyContent: "flex-start" } }, ".hero-end > .hero-content": { "@layer components": { justifyContent: "flex-end" } }, ".indicator": { "@layer components": { position: "relative", display: "inline-grid", width: "max-content", maxWidth: "100%" } }, ".indicator-item": { "@layer components": { "--indicator-block": "0%", "--indicator-inline": "0%", "--indicator-x": "50%", "--indicator-y": "-50%", position: "absolute", zIndex: 1, insetBlockStart: "var(--indicator-block)", insetInlineEnd: "var(--indicator-inline)", translate: "var(--indicator-x) var(--indicator-y)" } }, ".indicator-top": { "@layer components": { "--indicator-block": "0%", "--indicator-y": "-50%" } }, ".indicator-middle": { "@layer components": { "--indicator-block": "50%", "--indicator-y": "-50%" } }, ".indicator-bottom": { "@layer components": { "--indicator-block": "100%", "--indicator-y": "-50%" } }, ".indicator-start": { "@layer components": { "--indicator-inline": "100%", "--indicator-x": "50%" } }, ".indicator-center": { "@layer components": { "--indicator-inline": "50%", "--indicator-x": "50%" } }, ".indicator-end": { "@layer components": { "--indicator-inline": "0%", "--indicator-x": "50%" } }, ":dir(rtl) .indicator-item": { "@layer components": { "--indicator-x": "-50%" } }, ":dir(rtl) .indicator-start": { "@layer components": { "--indicator-x": "-50%" } }, ".join": { "@layer components": { display: "inline-flex", alignItems: "stretch", flexDirection: "row", width: "max-content", maxWidth: "100%", verticalAlign: "middle" } }, ".join > .join-item": { "@layer components": { position: "relative", flex: "0 1 auto" } }, ".join > .join-item:hover, \n  .join > .join-item:focus, \n  .join > .join-item:focus-within": { "@layer components": { zIndex: 1 } }, ":is(.join, .join-horizontal) > .join-item:not(:first-child)": { "@layer components": { marginInlineStart: "-1px" } }, ":is(.join, .join-horizontal) > .join-item:not(:first-child):not(:last-child)": { "@layer components": { borderRadius: "0" } }, ":is(.join, .join-horizontal) > .join-item:first-child:not(:last-child)": { "@layer components": { borderStartEndRadius: "0", borderEndEndRadius: "0" } }, ":is(.join, .join-horizontal) > .join-item:last-child:not(:first-child)": { "@layer components": { borderStartStartRadius: "0", borderEndStartRadius: "0" } }, ".join-vertical": { "@layer components": { flexDirection: "column" } }, ".join-vertical > .join-item": { "@layer components": { marginInlineStart: "0" } }, ".join-vertical > .join-item:not(:first-child)": { "@layer components": { marginBlockStart: "-1px" } }, ".join-vertical > .join-item:not(:first-child):not(:last-child)": { "@layer components": { borderRadius: "0" } }, ".join-vertical > .join-item:first-child:not(:last-child)": { "@layer components": { borderEndStartRadius: "0", borderEndEndRadius: "0" } }, ".join-vertical > .join-item:last-child:not(:first-child)": { "@layer components": { borderStartStartRadius: "0", borderStartEndRadius: "0" } }, ".mask": { "@layer components": { display: "inline-block", maxWidth: "100%", overflow: "hidden", verticalAlign: "middle", objectFit: "cover" } }, ".mask-circle": { "@layer components": { clipPath: "circle(50% at 50% 50%)" } }, ".mask-squircle": { "@layer components": { clipPath: "inset(0 round 28%)" } }, ".mask-square": { "@layer components": { clipPath: "inset(0)" } }, ".mask-diamond": { "@layer components": { clipPath: "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)" } }, ".mask-hexagon": { "@layer components": { clipPath: "polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%)" } }, ".mask-triangle": { "@layer components": { clipPath: "polygon(50% 0, 100% 100%, 0 100%)" } }, ".sidebar-layout": { "@layer components": { "--sidebar-layout-width": "17.5rem", "--sidebar-layout-compact-width": "5rem", containerType: "inline-size", containerName: "sidebar-layout", display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", gridTemplateAreas: '"sidebar content"', width: "100%", minWidth: "0", minHeight: "0", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".sidebar-layout-sidebar": [{ "@layer components": { display: "none", gridArea: "sidebar", width: "var(--sidebar-layout-width)", minWidth: "0", overflow: "hidden", backgroundColor: "var(--color-surface-container-low)", color: "var(--color-on-surface)", borderInlineEnd: "1px solid var(--color-outline-variant)" } }, { "@layer components": { "@container sidebar-layout (min-width: 48rem)": { display: "block" } } }], ".sidebar-layout-content": { "@layer components": { gridArea: "content", minWidth: "0" } }, ".sidebar-layout-start": { "@layer components": { gridTemplateColumns: "auto minmax(0, 1fr)", gridTemplateAreas: '"sidebar content"' } }, ".sidebar-layout-end": { "@layer components": { gridTemplateColumns: "minmax(0, 1fr) auto", gridTemplateAreas: '"content sidebar"' } }, ".sidebar-layout-end > .sidebar-layout-sidebar": { "@layer components": { borderInlineStart: "1px solid var(--color-outline-variant)", borderInlineEnd: "0" } }, ".sidebar-layout-compact > .sidebar-layout-sidebar": { "@layer components": { width: "var(--sidebar-layout-compact-width)" } }, ".sidebar-layout-hidden > .sidebar-layout-sidebar": { "@layer components": { display: "none" } }, ".stack": { "@layer components": { "--stack-inline-offset": "0", "--stack-block-offset": "0.375rem", display: "inline-grid", placeItems: "stretch", isolation: "isolate" } }, ".stack > *": { "@layer components": { gridArea: "1 / 1", position: "relative", minWidth: "0" } }, ".stack > :first-child": { "@layer components": { zIndex: 3 } }, ".stack > :nth-child(2)": { "@layer components": { zIndex: 2, insetInlineStart: "var(--stack-inline-offset)", insetBlockStart: "var(--stack-block-offset)" } }, ".stack > :nth-child(n + 3)": { "@layer components": { zIndex: 1, insetInlineStart: "calc(var(--stack-inline-offset) * 2)", insetBlockStart: "calc(var(--stack-block-offset) * 2)" } }, ".stack-top": { "@layer components": { "--stack-inline-offset": "0", "--stack-block-offset": "-0.375rem" } }, ".stack-bottom": { "@layer components": { "--stack-inline-offset": "0", "--stack-block-offset": "0.375rem" } }, ".stack-start": { "@layer components": { "--stack-inline-offset": "-0.375rem", "--stack-block-offset": "0" } }, ".stack-end": { "@layer components": { "--stack-inline-offset": "0.375rem", "--stack-block-offset": "0" } }, ".home-page": { "@layer components": { containerType: "inline-size", containerName: "home-page", width: "100%", minWidth: "0", minHeight: "var(--home-page-min-height, 100dvh)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".home-page-frame": { "@layer components": { display: "grid", minHeight: "inherit", gridTemplateRows: "auto minmax(0, 1fr) auto" } }, ".home-page-header": { "@layer components": { zIndex: 10 } }, ".home-page-nav": [{ "@layer components": { display: "none", alignItems: "center", gap: "0.25rem" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "flex" } } }], ".home-page-actions": [{ "@layer components": { display: "none", alignItems: "center", gap: "0.25rem" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "flex" } } }], ".home-page-menu-trigger": [{ "@layer components": { display: "inline-flex" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "none" } } }], ".home-page-mobile-menu": [{ "@layer components": { maxWidth: "min(20rem, calc(100cqi - 2rem))" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "none" } } }], ".home-page-main": { "@layer components": { minWidth: "0" } }, ".home-page-content": [{ "@layer components": { width: "min(100%, 80rem)", marginInline: "auto", padding: "clamp(1rem, 5cqi, 3rem)" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { paddingInline: "clamp(2rem, 5cqi, 5rem)" } } }], ".home-page-hero": [{ "@layer components": { display: "grid", alignItems: "center", gridTemplateColumns: "minmax(0, 1fr)", gap: "clamp(2rem, 5cqi, 4rem)" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { gridTemplateColumns: "minmax(0, 1fr) minmax(18rem, 0.8fr)" } } }], ".home-page-footer": { "@layer components": { borderTop: "1px solid var(--color-outline-variant)", backgroundColor: "var(--color-surface-container-low)" } }, ".sign-page": { "@layer components": { containerType: "inline-size", containerName: "sign-page", width: "100%", minWidth: "0", minHeight: "var(--sign-page-min-height, 100dvh)", overflow: "hidden", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".sign-page-frame": [{ "@layer components": { display: "grid", minHeight: "inherit", gridTemplateColumns: "minmax(0, 1fr)" } }, { "@layer components": { "@container sign-page (min-width: 48rem)": { gridTemplateColumns: "minmax(20rem, 1.15fr) minmax(24rem, 0.85fr)" } } }], ".sign-page-aside": [{ "@layer components": { display: "none", position: "relative", isolation: "isolate", overflow: "hidden", padding: "clamp(2rem, 6cqi, 5rem)", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, { "@layer components": { "@container sign-page (min-width: 48rem)": { display: "flex", flexDirection: "column", justifyContent: "space-between" } } }], ".sign-page-aside::before, \n  .sign-page-aside::after": { "@layer components": { content: '""', position: "absolute", zIndex: -1, borderRadius: "var(--radius-full)", background: "color-mix(in oklch, var(--color-tertiary) 24%, transparent)", filter: "blur(1px)" } }, ".sign-page-aside::before": { "@layer components": { width: "22rem", height: "22rem", inset: "-8rem -6rem auto auto" } }, ".sign-page-aside::after": { "@layer components": { width: "15rem", height: "15rem", inset: "auto auto -5rem -4rem", background: "color-mix(in oklch, var(--color-secondary) 22%, transparent)" } }, ".sign-page-main": { "@layer components": { display: "grid", placeItems: "center", minWidth: "0", padding: "clamp(1rem, 6cqi, 4rem)", backgroundColor: "var(--color-surface)" } }, ".sign-page-content": { "@layer components": { width: "min(100%, 30rem)" } }, ".bottom-nav": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", zIndex: 1000, display: "flex", alignItems: "stretch", justifyContent: "space-around", minHeight: "5rem", paddingBottom: "env(safe-area-inset-bottom, 0)", backgroundColor: "var(--color-surface)", boxShadow: "0 -1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-item": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1, minWidth: "4rem", maxWidth: "10rem", padding: "0.75rem 0.25rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "color 150ms ease-in-out", textDecoration: "none", gap: "0.25rem" } }, ".bottom-nav-item:hover": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-item:focus-visible": { "@layer components": { outline: "none" } }, ".bottom-nav-item:focus-visible .bottom-nav-indicator": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".bottom-nav-item.active": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-indicator": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "4rem", height: "2rem", borderRadius: "var(--radius-lg)", transition: "background-color 150ms ease-in-out" } }, ".bottom-nav-item:hover .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".bottom-nav-icon": { "@layer components": { fontSize: "1.5rem", lineHeight: 1, transition: "font-size 150ms ease-in-out" } }, ".bottom-nav-label": { "@layer components": { fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" } }, ".bottom-nav-item.active .bottom-nav-label": { "@layer components": { fontWeight: 600 } }, ".bottom-nav-badge": { "@layer components": { position: "absolute", top: "0", right: "0.5rem", minWidth: "1rem", height: "1rem", padding: "0 0.25rem", fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", color: "var(--color-error-content)", backgroundColor: "var(--color-error)", borderRadius: "var(--radius-full)", textAlign: "center" } }, ".bottom-nav-badge-dot": { "@layer components": { minWidth: "0.5rem", width: "0.5rem", height: "0.5rem", padding: "0", top: "0.125rem", right: "0.75rem" } }, ".bottom-nav-elevated": { "@layer components": { boxShadow: "0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-bordered": { "@layer components": { boxShadow: "none", borderTop: "1px solid var(--color-outline-variant)" } }, ".bottom-nav-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-primary .bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".bottom-nav-primary .bottom-nav-item.active": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".bottom-nav-icons-only .bottom-nav-label": { "@layer components": { display: "none" } }, ".bottom-nav-icons-only .bottom-nav-item": { "@layer components": { padding: "1rem 0.25rem" } }, ".bottom-nav-labels-active .bottom-nav-label": { "@layer components": { opacity: 0, maxHeight: "0", overflow: "hidden", transition: "opacity 150ms ease-in-out, max-height 150ms ease-in-out" } }, ".bottom-nav-labels-active .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, maxHeight: "1rem" } }, ".bottom-nav-shifting .bottom-nav-item": { "@layer components": { flex: "0 1 4rem", transition: "flex 200ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active": { "@layer components": { flex: "1 1 6rem" } }, ".bottom-nav-shifting .bottom-nav-label": { "@layer components": { opacity: 0, transform: "translateY(0.5rem)", transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, transform: "translateY(0)" } }, ".nav-rail": { "@layer components": { position: "fixed", left: "0", top: "0", bottom: "0", zIndex: 1000, display: "flex", flexDirection: "column", alignItems: "center", width: "5rem", padding: "1rem 0", backgroundColor: "var(--color-surface)", borderRight: "1px solid var(--color-outline-variant)" } }, ".nav-rail .bottom-nav-item": { "@layer components": { width: "100%", padding: "0.5rem", margin: "0.25rem 0" } }, ".nav-rail .bottom-nav-indicator": { "@layer components": { width: "3.5rem", height: "2rem" } }, ".bottom-nav-responsive": { "@layer components": { "@media (min-width: 768px)": { position: "relative", bottom: "auto", justifyContent: "flex-start", gap: "0.5rem", minHeight: "3rem", padding: "0 1rem", boxShadow: "none", borderBottom: "1px solid var(--color-outline-variant)" } } }, ".bottom-nav-responsive .bottom-nav-item": { "@layer components": { "@media (min-width: 768px)": { flex: "0 0 auto", flexDirection: "row", gap: "0.5rem", padding: "0.75rem 1rem" } } }, ".bottom-nav-responsive .bottom-nav-indicator": { "@layer components": { "@media (min-width: 768px)": { width: "auto", height: "auto", backgroundColor: "transparent !important" } } }, ".bottom-nav-responsive .bottom-nav-item.active": { "@layer components": { "@media (min-width: 768px)": { borderBottom: "2px solid var(--color-primary)" } } }, ".bottom-nav-item, \n    .bottom-nav-indicator, \n    .bottom-nav-icon, \n    .bottom-nav-label, \n    .bottom-nav-shifting .bottom-nav-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".circle-menu": { "@layer components": { "--circle-menu-size": "3rem", "--circle-menu-item-size": "3rem", "--circle-menu-radius": "5.5rem", "--circle-menu-icon-size": "1.25rem", "--circle-menu-bar-width": "1.125rem", "--circle-menu-bar-height": "0.1875rem", "--circle-menu-bar-gap": "0.375rem", "--circle-menu-btn-bg": "var(--color-primary-container)", "--circle-menu-bar-color": "var(--color-on-primary-container)", "--circle-menu-item-bg": "var(--color-primary-container)", "--circle-menu-item-color": "var(--color-on-primary-container)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-primary) 30%, transparent)", position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)" } }, ".circle-menu-toggler": { "@layer components": { position: "absolute", inset: "0", margin: "auto", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", zIndex: 10, opacity: 0, cursor: "pointer" } }, ".circle-menu-label": [{ "@layer components": { position: "absolute", inset: "0", margin: "auto", display: "block", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-btn-bg)", zIndex: 1, pointerEvents: "none", transition: "background-color 0.3s ease" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".circle-menu-label::before": { "@layer components": { content: "''", position: "absolute", top: "50%", left: "50%", width: "var(--circle-menu-bar-width)", height: "var(--circle-menu-bar-height)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-bar-color)", boxShadow: `0 var(--circle-menu-bar-gap) 0 var(--circle-menu-bar-color),
       0 calc(-1 * var(--circle-menu-bar-gap)) 0 var(--circle-menu-bar-color)`, transform: "translate(-50%, -50%)", transition: `transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
       box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1)` } }, ".circle-menu-label::after": { "@layer components": { content: "''", position: "absolute", top: "50%", left: "50%", width: "var(--circle-menu-bar-width)", height: "var(--circle-menu-bar-height)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-bar-color)", transform: "translate(-50%, -50%) rotate(-45deg)", opacity: 0, transition: "opacity 0.25s ease" } }, ".circle-menu-toggler:hover + .circle-menu-label": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--circle-menu-btn-bg) 80%, var(--circle-menu-bar-color))" } }, ".circle-menu-toggler:focus-visible + .circle-menu-label": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px var(--circle-menu-item-ring)" } }, ".circle-menu-toggler:checked + .circle-menu-label::before": { "@layer components": { boxShadow: "none", transform: "translate(-50%, -50%) rotate(45deg)" } }, ".circle-menu-toggler:checked + .circle-menu-label::after": { "@layer components": { opacity: 1 } }, ".circle-menu-list": { "@layer components": { position: "absolute", inset: "0", margin: "0", padding: "0", listStyle: "none", pointerEvents: "none" } }, ".circle-menu-item": [{ "@layer components": { position: "absolute", inset: "0", margin: "auto", width: "var(--circle-menu-item-size)", height: "var(--circle-menu-item-size)", opacity: 0, transition: `transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
       opacity 0.3s ease` } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".circle-menu-item a, \n  .circle-menu-item button": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", borderRadius: "var(--radius-full)", textDecoration: "none", fontSize: "var(--circle-menu-icon-size)", color: "var(--circle-menu-item-color)", backgroundColor: "var(--circle-menu-item-bg)", border: "none", cursor: "pointer", pointerEvents: "none", transition: `box-shadow 0.2s ease,