/* defuss-shadcn - optional shape utilities.
 * A catalog of reusable silhouettes to mix a design up: radius scale,
 * organic + asymmetric corners, cut/notch/scoop corners (native
 * corner-shape where supported, clip-path/mask fallback), shape-*
 * silhouettes, section edges, a shadow scale plus stylized shadows,
 * frames and background patterns.
 *
 * Every class is :where() (zero specificity) inside @layer utilities, so it
 * beats component styles (@layer components) without specificity fights,
 * and any author rule overrides it. Colors come only from the tweakcn token
 * set; per-instance knobs are optional custom properties with fallbacks
 * (set them inline or on an ancestor - they inherit):
 *
 *   --shape-cut     cut / notch / scoop / ticket size   (default 0.75rem)
 *   --shape-round   organic corner radius               (default 2rem)
 *   --shape-slant   parallelogram / chevron / arrow run (default 1.5rem)
 *   --shape-edge    section edge depth                  (default 2.5rem)
 *   --shape-tail    speech-bubble tail height           (default 0.75rem)
 *   --shape-ink     shadow / frame / pattern color      (per family)
 *   --shape-pattern pattern tile size                   (default 16px)
 *   --shape-duration one aura turn                      (default 4s)
 *
 * Silhouettes are shape-* (the names follow DaisyUI's mask-* set where it
 * has one: shape-hexagon is pointy-top, shape-hexagon-2 flat-top,
 * shape-triangle-2/-3/-4 point down/left/right). The v0.9 clip-* names stay
 * as aliases of the same rules - clip-hexagon is shape-hexagon-2.
 *
 * Clip-path and mask cut the element's own box-shadow and border: pair a
 * clipped shape with drop-shadow-* on a WRAPPER element.
 */
@layer components, utilities;

@layer utilities {
  /* ── Radius scale (token-derived) ─────────────────────────── */
  :where(.rounded-none) { border-radius: 0; }
  :where(.rounded-sm) { border-radius: var(--radius-sm); }
  :where(.rounded-md) { border-radius: var(--radius-md); }
  :where(.rounded-lg) { border-radius: var(--radius-lg); }
  :where(.rounded-xl) { border-radius: var(--radius-xl); }
  :where(.rounded-2xl) { border-radius: calc(var(--radius) + 12px); }
  :where(.rounded-full) { border-radius: 9999px; }

  /* ── Organic + asymmetric corners (border-radius: borders and
        box-shadows follow the curve) ──────────────────────────── */
  :where(.corner-leaf) { border-radius: var(--shape-round, 2rem) 0; }
  :where(.corner-leaf-reverse) { border-radius: 0 var(--shape-round, 2rem); }
  :where(.corner-tab) { border-radius: var(--shape-round, 2rem) var(--shape-round, 2rem) 0 0; }
  :where(.corner-tab-bottom) { border-radius: 0 0 var(--shape-round, 2rem) var(--shape-round, 2rem); }
  :where(.corner-bubble) { border-radius: var(--shape-round, 2rem) var(--shape-round, 2rem) var(--shape-round, 2rem) 0; }
  :where(.corner-bubble-end) { border-radius: var(--shape-round, 2rem) var(--shape-round, 2rem) 0 var(--shape-round, 2rem); }
  :where(.corner-drop) { border-radius: 50% 50% 50% 0; }
  :where(.corner-arch) { border-radius: 9999px 9999px 0 0; }
  :where(.corner-pill-end) { border-radius: 0 9999px 9999px 0; }
  :where(.corner-blob) { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
  :where(.corner-blob-2) { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  :where(.corner-blob-3) { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  :where(.corner-blob-4) { border-radius: 58% 42% 38% 62% / 42% 55% 45% 58%; }
  :where(.corner-blob-5) { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
  :where(.corner-egg) { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
  :where(.corner-lens) { border-radius: 100% 0; }
  :where(.corner-quarter) { border-radius: 100% 0 0 0; }
  :where(.corner-half) { border-radius: 100% 100% 0 0 / 100% 100% 0 0; }
  /* hand-drawn wobble - pair with a border (frame-sketch does both) */
  :where(.corner-sketch) { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }

  /* ── Organic silhouettes (mask of overlapping circles: work best on a
        square box - aspect-ratio: 1) ─────────────────────────────── */
  :where(.shape-flower) {
    mask:
      radial-gradient(25% 25% at 50% 26%, #000 98%, #0000 100%), radial-gradient(25% 25% at 74% 50%, #000 98%, #0000 100%),
      radial-gradient(25% 25% at 50% 74%, #000 98%, #0000 100%), radial-gradient(25% 25% at 26% 50%, #000 98%, #0000 100%),
      radial-gradient(28% 28% at 50% 50%, #000 98%, #0000 100%);
  }
  :where(.shape-flower-6) {
    mask:
      radial-gradient(22% 22% at 50% 24%, #000 98%, #0000 100%), radial-gradient(22% 22% at 72.5% 37%, #000 98%, #0000 100%),
      radial-gradient(22% 22% at 72.5% 63%, #000 98%, #0000 100%), radial-gradient(22% 22% at 50% 76%, #000 98%, #0000 100%),
      radial-gradient(22% 22% at 27.5% 63%, #000 98%, #0000 100%), radial-gradient(22% 22% at 27.5% 37%, #000 98%, #0000 100%),
      radial-gradient(26% 26% at 50% 50%, #000 98%, #0000 100%);
  }
  :where(.shape-daisy) {
    mask:
      radial-gradient(15% 15% at 50% 17%, #000 98%, #0000 100%), radial-gradient(15% 15% at 73.3% 26.7%, #000 98%, #0000 100%),
      radial-gradient(15% 15% at 83% 50%, #000 98%, #0000 100%), radial-gradient(15% 15% at 73.3% 73.3%, #000 98%, #0000 100%),
      radial-gradient(15% 15% at 50% 83%, #000 98%, #0000 100%), radial-gradient(15% 15% at 26.7% 73.3%, #000 98%, #0000 100%),
      radial-gradient(15% 15% at 17% 50%, #000 98%, #0000 100%), radial-gradient(15% 15% at 26.7% 26.7%, #000 98%, #0000 100%),
      radial-gradient(24% 24% at 50% 50%, #000 98%, #0000 100%);
  }
  /* two lobes + a 90° wedge tangent to them */
  :where(.shape-heart) {
    mask:
      radial-gradient(25% 25% at 30% 32%, #000 98%, #0000 100%), radial-gradient(25% 25% at 70% 32%, #000 98%, #0000 100%),
      conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 75.86% / 100% 42% no-repeat; /* spans 44%..86% */
  }
  :where(.shape-cloud) {
    mask:
      radial-gradient(22% 22% at 28% 60%, #000 98%, #0000 100%), radial-gradient(28% 28% at 52% 46%, #000 98%, #0000 100%),
      radial-gradient(20% 20% at 75% 60%, #000 98%, #0000 100%), radial-gradient(40% 14% at 51% 68%, #000 98%, #0000 100%);
  }

  /* ── Cut, notch, scoop, squircle corners ──────────────────────
     Native corner-shape (Chromium 139+) keeps borders and shadows on the
     silhouette; elsewhere clip-path / mask draw the same outline. */
  :where(.corner-squircle) { border-radius: var(--shape-round, 2rem); }
  :where(.cut-corners) {
    --_c: var(--shape-cut, 0.75rem);
    clip-path: polygon(var(--_c) 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% calc(100% - var(--_c)),
      calc(100% - var(--_c)) 100%, var(--_c) 100%, 0 calc(100% - var(--_c)), 0 var(--_c));
  }
  :where(.notch-corners) {
    --_c: var(--shape-cut, 0.75rem);
    clip-path: polygon(var(--_c) 0, calc(100% - var(--_c)) 0, calc(100% - var(--_c)) var(--_c), 100% var(--_c),
      100% calc(100% - var(--_c)), calc(100% - var(--_c)) calc(100% - var(--_c)), calc(100% - var(--_c)) 100%,
      var(--_c) 100%, var(--_c) calc(100% - var(--_c)), 0 calc(100% - var(--_c)), 0 var(--_c), var(--_c) var(--_c));
  }
  :where(.scoop-corners) {
    --_c: var(--shape-cut, 0.75rem);
    mask:
      radial-gradient(circle at 0 0, #0000 var(--_c), #000 calc(var(--_c) + 0.5px)) 0 0 / 51% 51% no-repeat,
      radial-gradient(circle at 100% 0, #0000 var(--_c), #000 calc(var(--_c) + 0.5px)) 100% 0 / 51% 51% no-repeat,
      radial-gradient(circle at 0 100%, #0000 var(--_c), #000 calc(var(--_c) + 0.5px)) 0 100% / 51% 51% no-repeat,
      radial-gradient(circle at 100% 100%, #0000 var(--_c), #000 calc(var(--_c) + 0.5px)) 100% 100% / 51% 51% no-repeat;
  }
  :where(.corner-superellipse) { border-radius: var(--shape-round, 2rem); }
  /* round + bevel alternating (fallback: radius on two corners, cuts on two) */
  :where(.corner-mixed) {
    --_c: var(--shape-round, 2rem);
    border-radius: var(--_c) 0 var(--_c) 0;
    clip-path: polygon(0 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% 100%, var(--_c) 100%, 0 calc(100% - var(--_c)));
  }
  @supports (corner-shape: bevel) {
    :where(.corner-squircle) { corner-shape: squircle; }
    :where(.corner-superellipse) { corner-shape: superellipse(4); }
    :where(.corner-mixed) { clip-path: none; border-radius: var(--_c); corner-shape: round bevel; }
    :where(.cut-corners) { clip-path: none; border-radius: var(--_c); corner-shape: bevel; }
    :where(.notch-corners) { clip-path: none; border-radius: var(--_c); corner-shape: notch; }
    :where(.scoop-corners) { mask: none; border-radius: var(--_c); corner-shape: scoop; }
  }

  /* single / diagonal cuts (clip-path everywhere - corner-shape would need
     per-corner radii the author may already use) */
  :where(.cut-corner-tl) { --_c: var(--shape-cut, 0.75rem); clip-path: polygon(var(--_c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--_c)); }
  :where(.cut-corner-tr) { --_c: var(--shape-cut, 0.75rem); clip-path: polygon(0 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% 100%, 0 100%); }
  :where(.cut-corner-br) { --_c: var(--shape-cut, 0.75rem); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%, 0 100%); }
  :where(.cut-corner-bl) { --_c: var(--shape-cut, 0.75rem); clip-path: polygon(0 0, 100% 0, 100% 100%, var(--_c) 100%, 0 calc(100% - var(--_c))); }
  :where(.cut-corners-diagonal) {
    --_c: var(--shape-cut, 0.75rem);
    clip-path: polygon(var(--_c) 0, 100% 0, 100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%, 0 100%, 0 var(--_c));
  }
  :where(.cut-corners-top) {
    --_c: var(--shape-cut, 0.75rem);
    clip-path: polygon(var(--_c) 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% 100%, 0 100%, 0 var(--_c));
  }
  :where(.cut-corners-bottom) {
    --_c: var(--shape-cut, 0.75rem);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%, var(--_c) 100%, 0 calc(100% - var(--_c)));
  }
  :where(.notch-corner-tr) {
    --_c: var(--shape-cut, 0.75rem);
    clip-path: polygon(0 0, calc(100% - var(--_c)) 0, calc(100% - var(--_c)) var(--_c), 100% var(--_c), 100% 100%, 0 100%);
  }
  :where(.scoop-corner-tr) {
    --_c: var(--shape-cut, 0.75rem);
    mask: radial-gradient(circle at 100% 0, #0000 var(--_c), #000 calc(var(--_c) + 0.5px));
  }
  /* folder tab along the top edge */
  :where(.corner-folder) {
    --_c: var(--shape-cut, 0.75rem);
    clip-path: polygon(0 0, 40% 0, calc(40% + var(--_c)) var(--_c), 100% var(--_c), 100% 100%, 0 100%);
  }
  /* folded page corner: the cut plus a shaded flap (background-image) */
  :where(.dog-ear) {
    --_c: calc(var(--shape-cut, 0.75rem) * 2);
    clip-path: polygon(0 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% 100%, 0 100%);
    background-image: linear-gradient(225deg, #0000 50%, rgb(0 0 0 / 0.22) 50%);
    background-position: 100% 0;
    background-size: var(--_c) var(--_c);
    background-repeat: no-repeat;
  }
  /* postage stamp: half-circle perforation on every edge */
  :where(.stamp) {
    --_r: calc(var(--shape-cut, 0.75rem) / 2);
    mask:
      radial-gradient(var(--_r) at var(--_r) var(--_r), #0000 97%, #000)
        calc(-1 * var(--_r)) calc(-1 * var(--_r)) / calc(3 * var(--_r)) calc(3 * var(--_r)) round,
      linear-gradient(#000 0 0) 50% / calc(100% - 3 * var(--_r)) calc(100% - 3 * var(--_r)) no-repeat;
  }
  :where(.ticket-vertical) {
    --_c: var(--shape-cut, 0.75rem);
    mask:
      radial-gradient(circle at 50% 0, #0000 var(--_c), #000 calc(var(--_c) + 0.5px)) 0 0 / 100% 51% no-repeat,
      radial-gradient(circle at 50% 100%, #0000 var(--_c), #000 calc(var(--_c) + 0.5px)) 0 100% / 100% 51% no-repeat;
  }
  /* ticket: half-circle bites out of both sides */
  :where(.ticket) {
    --_c: var(--shape-cut, 0.75rem);
    mask:
      radial-gradient(circle at 0 50%, #0000 var(--_c), #000 calc(var(--_c) + 0.5px)) 0 0 / 51% 100% no-repeat,
      radial-gradient(circle at 100% 50%, #0000 var(--_c), #000 calc(var(--_c) + 0.5px)) 100% 0 / 51% 100% no-repeat;
  }

  /* ── Clip-path silhouettes ─────────────────────────────────── */
  /* a true squircle silhouette (superellipse), not rounded corners */
  :where(.shape-squircle) {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  :where(.shape-hexagon) { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  :where(.shape-decagon) { clip-path: polygon(50% 0, 79.39% 9.55%, 97.55% 34.55%, 97.55% 65.45%, 79.39% 90.45%, 50% 100%, 20.61% 90.45%, 2.45% 65.45%, 2.45% 34.55%, 20.61% 9.55%); }
  /* bold five-point star: a fuller inner radius than shape-star */
  :where(.shape-star-2) { clip-path: polygon(50% 0, 65.87% 28.16%, 97.55% 34.55%, 75.68% 58.34%, 79.39% 90.45%, 50% 77%, 20.61% 90.45%, 24.32% 58.34%, 2.45% 34.55%, 34.13% 28.16%); }
  :where(.shape-circle, .clip-circle) { clip-path: circle(50%); }
  :where(.shape-ellipse, .clip-ellipse) { clip-path: ellipse(50% 50%); }
  :where(.shape-triangle, .clip-triangle) { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  :where(.shape-triangle-down, .shape-triangle-2, .clip-triangle-down) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
  :where(.shape-triangle-left, .shape-triangle-3, .clip-triangle-left) { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
  :where(.shape-triangle-right, .shape-triangle-4, .clip-triangle-right) { clip-path: polygon(0 0, 100% 50%, 0 100%); }
  :where(.shape-kite, .clip-kite) { clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); }
  :where(.shape-heptagon, .clip-heptagon) { clip-path: polygon(50% 0, 90% 20%, 100% 62%, 75% 100%, 25% 100%, 0 62%, 10% 20%); }
  :where(.shape-star-4, .clip-star-4) { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
  :where(.shape-star-6, .clip-star-6) { clip-path: polygon(50% 0, 63% 25%, 93% 25%, 76% 50%, 93% 75%, 63% 75%, 50% 100%, 37% 75%, 7% 75%, 24% 50%, 7% 25%, 37% 25%); }
  /* a close / multiply mark */
  :where(.shape-x, .clip-x) {
    clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
  }
  :where(.shape-diamond, .clip-diamond) { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  :where(.shape-pentagon, .clip-pentagon) { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
  :where(.shape-hexagon-2, .clip-hexagon) { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
  :where(.shape-octagon, .clip-octagon) { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
  :where(.shape-star, .clip-star) { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
  :where(.shape-burst, .clip-burst) {
    clip-path: polygon(50% 0, 59% 17%, 75% 7%, 76% 25%, 93% 25%, 83% 41%, 100% 50%, 83% 59%, 93% 75%, 76% 75%,
      75% 93%, 59% 83%, 50% 100%, 41% 83%, 25% 93%, 24% 75%, 7% 75%, 17% 59%, 0 50%, 17% 41%, 7% 25%, 24% 25%, 25% 7%, 41% 17%);
  }
  :where(.shape-cross, .clip-cross) { clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
  :where(.shape-shield, .clip-shield) { clip-path: polygon(50% 0, 100% 14%, 100% 52%, 50% 100%, 0 52%, 0 14%); }
  :where(.shape-parallelogram, .clip-parallelogram) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(var(--_s) 0, 100% 0, calc(100% - var(--_s)) 100%, 0 100%);
  }
  :where(.shape-trapezoid, .clip-trapezoid) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(var(--_s) 0, calc(100% - var(--_s)) 0, 100% 100%, 0 100%);
  }
  :where(.shape-arrow, .clip-arrow) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(0 0, calc(100% - var(--_s)) 0, 100% 50%, calc(100% - var(--_s)) 100%, 0 100%);
  }
  :where(.shape-chevron, .clip-chevron) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(0 0, calc(100% - var(--_s)) 0, 100% 50%, calc(100% - var(--_s)) 100%, 0 100%, var(--_s) 50%);
  }
  :where(.shape-ribbon, .clip-ribbon) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--_s)) 50%, 100% 100%, 0 100%);
  }
  /* speech bubble: the transparent bottom border reserves the tail's room
     (the background still paints under it), clip-path draws the tail */
  :where(.shape-message, .clip-message) {
    --_t: var(--shape-tail, 0.75rem);
    border-block-end: var(--_t) solid transparent;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_t)), calc(1.5rem + var(--_t)) calc(100% - var(--_t)),
      1.25rem 100%, 1.25rem calc(100% - var(--_t)), 0 calc(100% - var(--_t)));
  }
  :where(.shape-message-end, .clip-message-end) {
    --_t: var(--shape-tail, 0.75rem);
    border-block-end: var(--_t) solid transparent;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_t)), calc(100% - 1.25rem) calc(100% - var(--_t)),
      calc(100% - 1.25rem) 100%, calc(100% - 1.5rem - var(--_t)) calc(100% - var(--_t)), 0 calc(100% - var(--_t)));
  }
  :where(.shape-message-top, .clip-message-top) {
    --_t: var(--shape-tail, 0.75rem);
    border-block-start: var(--_t) solid transparent;
    clip-path: polygon(0 var(--_t), 1.25rem var(--_t), 1.25rem 0, calc(1.5rem + var(--_t)) var(--_t), 100% var(--_t), 100% 100%, 0 100%);
  }
  /* callout pointing left (at the vertical middle) */
  :where(.shape-callout-left, .clip-callout-left) {
    --_t: var(--shape-tail, 0.75rem);
    border-left: var(--_t) solid transparent;
    clip-path: polygon(var(--_t) 0, 100% 0, 100% 100%, var(--_t) 100%, var(--_t) calc(50% + var(--_t)), 0 50%, var(--_t) calc(50% - var(--_t)));
  }
  :where(.shape-arrow-left, .clip-arrow-left) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(var(--_s) 0, 100% 0, 100% 100%, var(--_s) 100%, 0 50%);
  }
  :where(.shape-chevron-left, .clip-chevron-left) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(var(--_s) 0, 100% 0, calc(100% - var(--_s)) 50%, 100% 100%, var(--_s) 100%, 0 50%);
  }
  :where(.shape-arrow-both, .clip-arrow-both) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(var(--_s) 0, calc(100% - var(--_s)) 0, 100% 50%, calc(100% - var(--_s)) 100%, var(--_s) 100%, 0 50%);
  }
  :where(.shape-arrow-down, .clip-arrow-down) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_s)), 50% 100%, 0 calc(100% - var(--_s)));
  }
  :where(.shape-chevron-down, .clip-chevron-down) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(0 0, 50% var(--_s), 100% 0, 100% calc(100% - var(--_s)), 50% 100%, 0 calc(100% - var(--_s)));
  }
  :where(.shape-arrow-up, .clip-arrow-up) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(50% 0, 100% var(--_s), 100% 100%, 0 100%, 0 var(--_s));
  }
  :where(.shape-chevron-up, .clip-chevron-up) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(50% 0, 100% var(--_s), 100% 100%, 50% calc(100% - var(--_s)), 0 100%, 0 var(--_s));
  }
  /* price tag: pointed start with a punched hole */
  :where(.shape-tag, .clip-tag) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(var(--_s) 0, 100% 0, 100% 100%, var(--_s) 100%, 0 50%);
    mask: radial-gradient(circle at calc(var(--_s) * 0.8) 50%, #0000 0.2rem, #000 calc(0.2rem + 0.5px));
  }
  /* swallowtail at both ends */
  :where(.shape-banner, .clip-banner) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--_s)) 50%, 100% 100%, 0 100%, var(--_s) 50%);
  }
  :where(.shape-bookmark, .clip-bookmark) {
    --_s: var(--shape-slant, 1.5rem);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--_s)), 0 100%);
  }
  :where(.shape-pennant, .clip-pennant) { clip-path: polygon(0 0, 100% 50%, 0 100%); }

  /* ── More silhouettes ────────────────────────────────────────── */
  :where(.shape-house, .clip-house) { clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); }
  :where(.shape-bolt, .clip-bolt) { clip-path: polygon(62% 0, 14% 58%, 44% 58%, 34% 100%, 86% 38%, 56% 38%, 72% 0); }
  :where(.shape-frame, .clip-frame) {
    clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 22% 22%, 22% 78%, 78% 78%, 78% 22%, 22% 22%);
  }
  :where(.shape-donut, .clip-donut) { mask: radial-gradient(closest-side, #0000 52%, #000 53% 98%, #0000 100%); }
  :where(.shape-moon, .clip-moon) {
    clip-path: circle(50%);
    mask: radial-gradient(circle at 72% 30%, #0000 36%, #000 36.5%);
  }

  /* ── 3D silhouettes: clip-path + light/shadow facets painted as
        background-image over YOUR background-color (set the color with
        background-color, not the background shorthand). Designed for a
        square box. ──────────────────────────────────────────────── */
  :where(.shape-cube, .clip-cube) {
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background-image: conic-gradient(from -63.43deg at 50% 50%,
      rgb(255 255 255 / 0.32) 0 126.87deg, rgb(0 0 0 / 0.3) 0 243.43deg, rgb(0 0 0 / 0.08) 0);
  }
  :where(.shape-pyramid, .clip-pyramid) {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-image: linear-gradient(90deg, rgb(255 255 255 / 0.22) 50%, rgb(0 0 0 / 0.28) 50%);
  }
  :where(.shape-diamond-3d, .clip-diamond-3d) {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background-image: conic-gradient(rgb(255 255 255 / 0.12) 0 90deg, rgb(0 0 0 / 0.32) 0 180deg,
      rgb(0 0 0 / 0.15) 0 270deg, rgb(255 255 255 / 0.3) 0);
  }
  :where(.shape-hexagon-3d, .clip-hexagon-3d) {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background-image: conic-gradient(from -26.57deg at 50% 50%,
      rgb(255 255 255 / 0.32) 0 53.13deg, rgb(255 255 255 / 0.1) 0 116.57deg, rgb(0 0 0 / 0.2) 0 180deg,
      rgb(0 0 0 / 0.34) 0 233.13deg, rgb(0 0 0 / 0.14) 0 296.57deg, rgb(255 255 255 / 0.2) 0);
  }
  /* each point: one lit half, one shaded half */
  :where(.shape-star-3d, .clip-star-3d) {
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background-image: repeating-conic-gradient(from 0deg at 50% 51%, rgb(255 255 255 / 0.28) 0 36deg, rgb(0 0 0 / 0.24) 0 72deg);
  }
  /* cut gem: lit crown band over a faceted pavilion */
  :where(.shape-gem, .clip-gem) {
    clip-path: polygon(22% 0, 78% 0, 100% 32%, 50% 100%, 0 32%);
    background-image:
      linear-gradient(90deg, rgb(255 255 255 / 0.22) 0 22%, rgb(255 255 255 / 0.45) 22% 50%, rgb(255 255 255 / 0.3) 50% 78%, rgb(255 255 255 / 0.1) 78%),
      conic-gradient(from -36.3deg at 50% 100%, rgb(0 0 0 / 0.08) 0 18deg, rgb(255 255 255 / 0.14) 0 36deg,
        rgb(0 0 0 / 0.24) 0 54deg, rgb(0 0 0 / 0.4) 0 72.6deg, #0000 0);
    background-size: 100% 32%, 100% 100%;
    background-repeat: no-repeat;
  }
  :where(.shape-sphere, .clip-sphere) {
    clip-path: circle(50%);
    background-image:
      radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 28%),
      radial-gradient(circle at 50% 50%, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.45) 72%);
  }
  :where(.shape-cylinder, .clip-cylinder) {
    border-radius: 50% / 14%;
    background-image:
      radial-gradient(50% 14% at 50% 14%, rgb(255 255 255 / 0.3) 98%, #0000 100%),
      linear-gradient(90deg, rgb(0 0 0 / 0.3), rgb(255 255 255 / 0.25) 30%, rgb(0 0 0 / 0.05) 55%, rgb(0 0 0 / 0.38));
  }
  :where(.shape-coin, .clip-coin) {
    clip-path: circle(50%);
    background-image:
      radial-gradient(closest-side, #0000 76%, rgb(0 0 0 / 0.2) 77% 81%, #0000 82%),
      radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.5), #0000 40%),
      linear-gradient(135deg, rgb(255 255 255 / 0.2), rgb(0 0 0 / 0.3));
  }

  /* ── Section edges (hero / band dividers) ───────────────────── */
  :where(.edge-slant-bottom-reverse) { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--shape-edge, 2.5rem))); }
  :where(.edge-skew) {
    clip-path: polygon(0 var(--shape-edge, 2.5rem), 100% 0, 100% calc(100% - var(--shape-edge, 2.5rem)), 0 100%);
  }
  :where(.edge-notch-bottom) {
    --_e: var(--shape-edge, 2.5rem);
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + var(--_e)) 100%, 50% calc(100% - var(--_e)), calc(50% - var(--_e)) 100%, 0 100%);
  }
  :where(.edge-concave-bottom) {
    mask: radial-gradient(60% var(--shape-edge, 2.5rem) at 50% 100%, #0000 98%, #000 100%);
  }
  :where(.edge-torn-bottom) {
    --_e: var(--shape-edge, 2.5rem);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--_e) * 0.5), 95% calc(100% - var(--_e) * 0.1),
      90% calc(100% - var(--_e) * 0.7), 86% calc(100% - var(--_e) * 0.2), 81% calc(100% - var(--_e) * 0.9),
      76% calc(100% - var(--_e) * 0.3), 71% calc(100% - var(--_e) * 0.6), 66% 100%, 60% calc(100% - var(--_e) * 0.8),
      55% calc(100% - var(--_e) * 0.2), 50% calc(100% - var(--_e) * 0.7), 45% calc(100% - var(--_e) * 0.1),
      39% calc(100% - var(--_e) * 0.9), 34% calc(100% - var(--_e) * 0.4), 29% calc(100% - var(--_e) * 0.8), 24% 100%,
      18% calc(100% - var(--_e) * 0.6), 13% calc(100% - var(--_e) * 0.2), 8% calc(100% - var(--_e) * 0.9),
      4% calc(100% - var(--_e) * 0.3), 0 calc(100% - var(--_e) * 0.6));
  }
  /* square battlements */
  :where(.edge-crenel-bottom) {
    --_e: calc(var(--shape-edge, 2.5rem) / 2);
    mask:
      linear-gradient(#000 0 0) top / 100% calc(100% - var(--_e) + 1px) no-repeat,
      linear-gradient(90deg, #000 50%, #0000 0) bottom / calc(2 * var(--_e)) var(--_e) round no-repeat;
  }
  :where(.edge-zigzag-top) {
    --_e: calc(var(--shape-edge, 2.5rem) / 2);
    mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--_e)) 100% round no-repeat;
  }
  :where(.edge-scallop-top) {
    --_e: calc(var(--shape-edge, 2.5rem) / 3);
    mask:
      linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--_e) + 1px) no-repeat,
      radial-gradient(circle var(--_e) at 50% 100%, #000 98%, #0000) top / calc(2 * var(--_e)) var(--_e) round no-repeat;
  }
  :where(.edge-wave-top) {
    --_e: calc(var(--shape-edge, 2.5rem) / 2);
    mask:
      linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--_e) + 1px) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10H40V5Q30 10 20 5T0 5Z'/%3E%3C/svg%3E")
        top / calc(4 * var(--_e)) var(--_e) round no-repeat;
  }
  :where(.edge-slant-bottom) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--shape-edge, 2.5rem)), 0 100%); }
  :where(.edge-slant-top) { clip-path: polygon(0 var(--shape-edge, 2.5rem), 100% 0, 100% 100%, 0 100%); }
  :where(.edge-point-bottom) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--shape-edge, 2.5rem)), 50% 100%, 0 calc(100% - var(--shape-edge, 2.5rem))); }
  :where(.edge-point-top) { clip-path: polygon(0 var(--shape-edge, 2.5rem), 50% 0, 100% var(--shape-edge, 2.5rem), 100% 100%, 0 100%); }
  :where(.edge-notch-top) {
    --_e: var(--shape-edge, 2.5rem);
    clip-path: polygon(0 0, calc(50% - var(--_e)) 0, 50% var(--_e), calc(50% + var(--_e)) 0, 100% 0, 100% 100%, 0 100%);
  }
  :where(.edge-concave-top) {
    mask: radial-gradient(60% var(--shape-edge, 2.5rem) at 50% 0, #0000 98%, #000 100%);
  }
  :where(.edge-torn-top) {
    --_e: var(--shape-edge, 2.5rem);
    clip-path: polygon(0 calc(var(--_e) * 0.6), 4% calc(var(--_e) * 0.3), 8% calc(var(--_e) * 0.9), 13% calc(var(--_e) * 0.2),
      18% calc(var(--_e) * 0.6), 24% 0, 29% calc(var(--_e) * 0.8), 34% calc(var(--_e) * 0.4), 39% calc(var(--_e) * 0.9),
      45% calc(var(--_e) * 0.1), 50% calc(var(--_e) * 0.7), 55% calc(var(--_e) * 0.2), 60% calc(var(--_e) * 0.8), 66% 0,
      71% calc(var(--_e) * 0.6), 76% calc(var(--_e) * 0.3), 81% calc(var(--_e) * 0.9), 86% calc(var(--_e) * 0.2),
      90% calc(var(--_e) * 0.7), 95% calc(var(--_e) * 0.1), 100% calc(var(--_e) * 0.5), 100% 100%, 0 100%);
  }
  /* paint drips running off the bottom edge */
  :where(.edge-drip-bottom) {
    --_e: var(--shape-edge, 2.5rem);
    mask:
      linear-gradient(#000 0 0) top / 100% calc(100% - var(--_e) + 1px) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H60V5C57 5 56 7 56 10 56 13 54 14 52 14 50 14 48 13 48 10 48 7 47 5 44 5H32C29 5 28 8 28 13 28 17 26 20 23 20 20 20 18 17 18 13 18 8 17 5 14 5H0Z'/%3E%3C/svg%3E")
        bottom / calc(3 * var(--_e)) var(--_e) round no-repeat;
  }
  :where(.edge-curve-bottom) {
    border-end-start-radius: 50% var(--shape-edge, 2.5rem);
    border-end-end-radius: 50% var(--shape-edge, 2.5rem);
  }
  :where(.edge-curve-top) {
    border-start-start-radius: 50% var(--shape-edge, 2.5rem);
    border-start-end-radius: 50% var(--shape-edge, 2.5rem);
  }
  :where(.edge-zigzag-bottom) {
    --_e: calc(var(--shape-edge, 2.5rem) / 2);
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--_e)) 100% round no-repeat;
  }
  :where(.edge-scallop-bottom) {
    --_e: calc(var(--shape-edge, 2.5rem) / 3);
    /* the solid part overlaps the scallop row by 1px - no hairline seam */
    mask:
      linear-gradient(#000 0 0) top / 100% calc(100% - var(--_e) + 1px) no-repeat,
      radial-gradient(circle var(--_e) at 50% 0, #000 98%, #0000) bottom / calc(2 * var(--_e)) var(--_e) round no-repeat;
  }
  /* one sine period per tile (4 × depth wide), stretched by the SVG */
  :where(.edge-wave-bottom) {
    --_e: calc(var(--shape-edge, 2.5rem) / 2);
    mask:
      linear-gradient(#000 0 0) top / 100% calc(100% - var(--_e) + 1px) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H40V5Q30 0 20 5T0 5Z'/%3E%3C/svg%3E")
        bottom / calc(4 * var(--_e)) var(--_e) round no-repeat;
  }

  /* ── Shadow scale (the theme's own tokens) ─────────────────── */
  :where(.shadow-none) { box-shadow: none; }
  :where(.shadow-2xs) { box-shadow: var(--shadow-2xs); }
  :where(.shadow-xs) { box-shadow: var(--shadow-xs); }
  :where(.shadow-sm) { box-shadow: var(--shadow-sm); }
  :where(.shadow) { box-shadow: var(--shadow); }
  :where(.shadow-md) { box-shadow: var(--shadow-md); }
  :where(.shadow-lg) { box-shadow: var(--shadow-lg); }
  :where(.shadow-xl) { box-shadow: var(--shadow-xl); }
  :where(.shadow-2xl) { box-shadow: var(--shadow-2xl); }

  /* ── Stylized shadows ─────────────────────────────────────── */
  /* hard offset (brutalist): --shape-ink recolors, the size is the class */
  :where(.shadow-hard-sm) { box-shadow: 2px 2px 0 0 var(--shape-ink, var(--foreground)); }
  :where(.shadow-hard) { box-shadow: 4px 4px 0 0 var(--shape-ink, var(--foreground)); }
  :where(.shadow-hard-lg) { box-shadow: 8px 8px 0 0 var(--shape-ink, var(--foreground)); }
  /* paper stack: two offset sheets behind the element */
  :where(.shadow-stack) {
    box-shadow:
      6px 6px 0 -1px var(--background), 6px 6px 0 0 var(--shape-ink, var(--border)),
      12px 12px 0 -1px var(--background), 12px 12px 0 0 var(--shape-ink, var(--border));
  }
  /* smooth layered depth (five doubling layers) */
  :where(.shadow-layered) {
    --_k: color-mix(in oklch, var(--foreground) 6%, transparent);
    box-shadow: 0 1px 1px var(--_k), 0 2px 2px var(--_k), 0 4px 4px var(--_k), 0 8px 8px var(--_k), 0 16px 16px var(--_k);
  }
  /* floating: large soft shadow pulled under the element */
  :where(.shadow-float) {
    box-shadow:
      0 30px 60px -12px color-mix(in oklch, var(--foreground) 22%, transparent),
      0 18px 36px -18px color-mix(in oklch, var(--foreground) 30%, transparent);
  }
  :where(.shadow-inner) { box-shadow: inset 0 2px 6px 0 color-mix(in oklch, var(--foreground) 14%, transparent); }
  :where(.shadow-glow) {
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--shape-ink, var(--primary)) 35%, transparent),
      0 0 28px 4px color-mix(in oklch, var(--shape-ink, var(--primary)) 40%, transparent);
  }
  :where(.shadow-ring) { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--shape-ink, var(--ring)); }
  /* 3D key / pressable edge */
  :where(.shadow-edge) { box-shadow: 0 4px 0 0 color-mix(in oklch, var(--shape-ink, var(--foreground)) 75%, var(--background)); }
  /* long diagonal (flat design) */
  :where(.shadow-long) {
    --_k: color-mix(in oklch, var(--shape-ink, var(--foreground)) 16%, transparent);
    box-shadow: 1px 1px 0 var(--_k), 2px 2px 0 var(--_k), 3px 3px 0 var(--_k), 4px 4px 0 var(--_k), 5px 5px 0 var(--_k),
      6px 6px 0 var(--_k), 7px 7px 0 var(--_k), 8px 8px 0 var(--_k), 9px 9px 0 var(--_k), 10px 10px 0 var(--_k);
  }
  /* soft UI: light top-left, dark bottom-right (best on --muted / --background) */
  :where(.shadow-neu) {
    box-shadow:
      6px 6px 14px light-dark(color-mix(in oklch, var(--foreground) 16%, transparent), color-mix(in oklch, black 55%, transparent)),
      -6px -6px 14px light-dark(color-mix(in oklch, var(--background) 70%, white), color-mix(in oklch, white 7%, transparent));
  }
  :where(.shadow-neu-inset) {
    box-shadow:
      inset 5px 5px 10px light-dark(color-mix(in oklch, var(--foreground) 14%, transparent), color-mix(in oklch, black 55%, transparent)),
      inset -5px -5px 10px light-dark(color-mix(in oklch, var(--background) 70%, white), color-mix(in oklch, white 7%, transparent));
  }
  /* lifts on hover / keyboard focus */
  :where(.shadow-lift) {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, translate 0.2s ease;
  }
  :where(.shadow-lift):hover,
  :where(.shadow-lift):focus-visible,
  :where(.shadow-lift):focus-within {
    box-shadow: var(--shadow-xl);
    translate: 0 -3px;
  }
  /* filter shadows follow the painted silhouette - put them on a WRAPPER of
     a clip-path / mask shape (the clip would cut its own filter) */
  :where(.drop-shadow) { filter: drop-shadow(0 10px 14px color-mix(in oklch, var(--foreground) 25%, transparent)); }
  :where(.drop-shadow-hard) { filter: drop-shadow(4px 4px 0 var(--shape-ink, var(--foreground))); }
  /* six stacked 1px drop-shadows compound into a solid 6px extrusion -
     turns any clip-path silhouette into a 3D block */
  :where(.drop-shadow-extrude) {
    --_k: var(--shape-ink, color-mix(in oklch, var(--foreground) 60%, var(--background)));
    filter: drop-shadow(1px 1px 0 var(--_k)) drop-shadow(1px 1px 0 var(--_k)) drop-shadow(1px 1px 0 var(--_k))
      drop-shadow(1px 1px 0 var(--_k)) drop-shadow(1px 1px 0 var(--_k)) drop-shadow(1px 1px 0 var(--_k));
  }
  :where(.drop-shadow-float) { filter: drop-shadow(0 22px 14px color-mix(in oklch, var(--foreground) 24%, transparent)); }

  /* more stylized box-shadows */
  :where(.shadow-outline-offset) {
    box-shadow: 6px 6px 0 -2px var(--background), 6px 6px 0 0 var(--shape-ink, var(--foreground));
  }
  :where(.shadow-retro) { box-shadow: 4px 4px 0 0 var(--chart-1), 8px 8px 0 0 var(--chart-2); }
  :where(.shadow-rainbow) {
    box-shadow: 3px 3px 0 0 var(--chart-1), 6px 6px 0 0 var(--chart-2), 9px 9px 0 0 var(--chart-3),
      12px 12px 0 0 var(--chart-4), 15px 15px 0 0 var(--chart-5);
  }
  /* solid 3D block (eight 1px steps) */
  :where(.shadow-extrude) {
    --_k: var(--shape-ink, color-mix(in oklch, var(--foreground) 70%, var(--background)));
    box-shadow: 1px 1px 0 var(--_k), 2px 2px 0 var(--_k), 3px 3px 0 var(--_k), 4px 4px 0 var(--_k), 5px 5px 0 var(--_k),
      6px 6px 0 var(--_k), 7px 7px 0 var(--_k), 8px 8px 0 var(--_k);
  }
  :where(.shadow-colored) { box-shadow: 0 14px 30px -10px color-mix(in oklch, var(--shape-ink, var(--primary)) 60%, transparent); }
  :where(.shadow-bottom) { box-shadow: 0 14px 12px -12px color-mix(in oklch, var(--foreground) 40%, transparent); }
  :where(.shadow-hairline) { box-shadow: 0 0 0 1px var(--shape-ink, var(--border)); }
  :where(.shadow-inner-hard) { box-shadow: inset 4px 4px 0 0 color-mix(in oklch, var(--shape-ink, var(--foreground)) 16%, transparent); }
  /* raised bevel: lit top-left edge, shaded bottom-right edge */
  :where(.shadow-bevel) { box-shadow: inset 2px 2px 0 rgb(255 255 255 / 0.4), inset -2px -2px 0 rgb(0 0 0 / 0.25); }
  :where(.shadow-neon) {
    --_k: var(--shape-ink, var(--primary));
    box-shadow: 0 0 2px var(--_k), 0 0 8px var(--_k), 0 0 22px color-mix(in oklch, var(--_k) 70%, transparent),
      inset 0 0 8px color-mix(in oklch, var(--_k) 55%, transparent);
  }
  /* die-cut sticker: a background-colored rim + soft drop */
  :where(.shadow-sticker) {
    box-shadow: 0 0 0 5px var(--background), 0 10px 18px -4px color-mix(in oklch, var(--foreground) 40%, transparent);
  }
  /* two sheets peeking out underneath */
  :where(.shadow-paper-stack) {
    --_k: color-mix(in oklch, var(--foreground) 22%, transparent);
    box-shadow: 0 1px 1px var(--_k), 0 10px 0 -5px var(--background), 0 10px 1px -4px var(--_k),
      0 20px 0 -10px var(--background), 0 20px 1px -9px var(--_k);
  }

  /* ── Stacks: sheets behind an element ───────────────────────────
     Three sheets drawn as box-shadows (so they follow the element's radius
     and need no extra markup), each one step further out. The direction
     class picks where they peek out: stack-top / -bottom / -left / -right
     are CENTERED and TAPER (each sheet narrower - the toast pile),
     stack-top-left / -top-right / -bottom-left / -bottom-right offset
     diagonally. Modifiers: stack-tight / stack-loose (step 4 / 14px,
     default 8px), stack-outline (hollow sheets, strong edge) /
     stack-filled (solid sheets, no edge; the default is card sheets with a
     border), stack-fade (each sheet further out fades toward --background -
     opaque, so the pile never shows through itself). --shape-ink colors the
     edge (outline) or the sheets (filled). A stack IS the box-shadow: it
     replaces a shadow-* on the same element; leave room around it. Not to
     be confused with the layout module's .stack (a flex column). */
  :where(.stack-top, .stack-bottom, .stack-left, .stack-right, .stack-top-left, .stack-top-right, .stack-bottom-left, .stack-bottom-right) {
    --_sx: 0;
    --_sy: 1;
    --_st: 0;
    --_sk: 1;
    --_sd: 8px;
    --_sf: var(--card);
    --_se: var(--shape-ink, var(--border));
    --_sa: 0%;
    box-shadow:
      calc(var(--_sx) * var(--_sk) * var(--_sd) * 1) calc(var(--_sy) * var(--_sk) * var(--_sd) * 1) 0 calc(calc(var(--_st) * var(--_sd) * -1) - 1px) color-mix(in oklch, var(--_sf) calc(100% - var(--_sa) * 1), var(--background)),
      calc(var(--_sx) * var(--_sk) * var(--_sd) * 1) calc(var(--_sy) * var(--_sk) * var(--_sd) * 1) 0 calc(var(--_st) * var(--_sd) * -1) color-mix(in oklch, var(--_se) calc(100% - var(--_sa) * 1), var(--background)),
      calc(var(--_sx) * var(--_sk) * var(--_sd) * 2) calc(var(--_sy) * var(--_sk) * var(--_sd) * 2) 0 calc(calc(var(--_st) * var(--_sd) * -2) - 1px) color-mix(in oklch, var(--_sf) calc(100% - var(--_sa) * 2), var(--background)),
      calc(var(--_sx) * var(--_sk) * var(--_sd) * 2) calc(var(--_sy) * var(--_sk) * var(--_sd) * 2) 0 calc(var(--_st) * var(--_sd) * -2) color-mix(in oklch, var(--_se) calc(100% - var(--_sa) * 2), var(--background)),
      calc(var(--_sx) * var(--_sk) * var(--_sd) * 3) calc(var(--_sy) * var(--_sk) * var(--_sd) * 3) 0 calc(calc(var(--_st) * var(--_sd) * -3) - 1px) color-mix(in oklch, var(--_sf) calc(100% - var(--_sa) * 3), var(--background)),
      calc(var(--_sx) * var(--_sk) * var(--_sd) * 3) calc(var(--_sy) * var(--_sk) * var(--_sd) * 3) 0 calc(var(--_st) * var(--_sd) * -3) color-mix(in oklch, var(--_se) calc(100% - var(--_sa) * 3), var(--background));
  }
  /* centered + tapered: every sheet shrinks by half a step per side and
     moves 1.5 steps out - so it still peeks out one full step */
  :where(.stack-bottom) { --_sx: 0; --_sy: 1; --_st: 0.5; --_sk: 1.5; }
  :where(.stack-top) { --_sx: 0; --_sy: -1; --_st: 0.5; --_sk: 1.5; }
  :where(.stack-right) { --_sx: 1; --_sy: 0; --_st: 0.5; --_sk: 1.5; }
  :where(.stack-left) { --_sx: -1; --_sy: 0; --_st: 0.5; --_sk: 1.5; }
  /* diagonal: full-size sheets, offset toward the corner */
  :where(.stack-bottom-right) { --_sx: 1; --_sy: 1; --_st: 0; }
  :where(.stack-bottom-left) { --_sx: -1; --_sy: 1; --_st: 0; }
  :where(.stack-top-right) { --_sx: 1; --_sy: -1; --_st: 0; }
  :where(.stack-top-left) { --_sx: -1; --_sy: -1; --_st: 0; }
  /* density */
  :where(.stack-tight) { --_sd: 4px; }
  :where(.stack-loose) { --_sd: 14px; }
  /* fill */
  :where(.stack-outline) { --_sf: var(--background); --_se: var(--shape-ink, var(--foreground)); }
  :where(.stack-filled) { --_sf: var(--shape-ink, var(--muted-foreground)); --_se: var(--shape-ink, var(--muted-foreground)); }
  /* diminishing toward the outside: 28% more background per sheet */
  :where(.stack-fade) { --_sa: 28%; }

  /* ── Aura: animated light around an element ───────────────────
     A WRAPPER (DaisyUI's aura, same class names): its background is the
     light - a conic gradient turning on the typed @property angle below -
     and the wrapped element covers the middle, so a ring of light shows
     through the wrapper's padding. aura-glow blurs the same light into a
     halo BEHIND the element instead of a ring. Styles swap the light,
     sizes the ring width. Knobs: --shape-ink (the light for aura / dual /
     glow, default --primary), --shape-round (the wrapped element's radius,
     default --radius-xl - set --radius-md around a button), --shape-duration
     (one turn, default 4s). Rainbow, holo, gold and silver are materials:
     fixed colors, the same in every theme. */
  :where(.aura) {
    --_aura-w: 3px;
    --_aura-light: conic-gradient(from var(--shape-aura-angle), transparent 0 55%, color-mix(in oklch, var(--shape-ink, var(--primary)) 60%, transparent) 72%, var(--shape-ink, var(--primary)) 86%, transparent 100%);
    --_aura-track: color-mix(in oklch, var(--shape-ink, var(--primary)) 16%, transparent);
    position: relative;
    isolation: isolate;
    display: grid;
    padding: var(--_aura-w);
    border-radius: calc(var(--shape-round, var(--radius-xl)) + var(--_aura-w));
    background: var(--_aura-light), linear-gradient(var(--_aura-track) 0 0);
    animation: shape-aura-spin var(--shape-duration, 4s) linear infinite;
  }
  :where(.aura-dual) {
    --_aura-light: conic-gradient(from var(--shape-aura-angle), transparent 0 15%, var(--shape-ink, var(--primary)) 35%, transparent 50% 65%, var(--shape-ink, var(--primary)) 85%, transparent 100%);
  }
  :where(.aura-rainbow) {
    --_aura-light: conic-gradient(from var(--shape-aura-angle), oklch(0.68 0.22 25), oklch(0.78 0.17 70), oklch(0.88 0.18 105), oklch(0.75 0.2 145), oklch(0.72 0.14 200), oklch(0.6 0.2 260), oklch(0.58 0.24 305), oklch(0.68 0.22 25));
    --_aura-track: transparent;
  }
  :where(.aura-holo) {
    --_aura-light: conic-gradient(from var(--shape-aura-angle), oklch(0.86 0.1 350), oklch(0.88 0.08 300), oklch(0.88 0.09 230), oklch(0.9 0.1 175), oklch(0.93 0.1 110), oklch(0.88 0.09 50), oklch(0.86 0.1 350));
    --_aura-track: transparent;
  }
  :where(.aura-gold) {
    --_aura-light: conic-gradient(from var(--shape-aura-angle), oklch(0.62 0.12 65), oklch(0.86 0.13 90), oklch(0.97 0.06 98), oklch(0.78 0.14 82), oklch(0.56 0.11 60), oklch(0.84 0.13 88), oklch(0.62 0.12 65));
    --_aura-track: transparent;
  }
  :where(.aura-silver) {
    --_aura-light: conic-gradient(from var(--shape-aura-angle), oklch(0.62 0.01 250), oklch(0.86 0.005 250), oklch(0.99 0 0), oklch(0.74 0.01 250), oklch(0.55 0.015 250), oklch(0.9 0.005 250), oklch(0.62 0.01 250));
    --_aura-track: transparent;
  }
  /* the halo: no ring - the light, blurred, turns behind the element */
  :where(.aura-glow) {
    padding: 0;
    border-radius: var(--shape-round, var(--radius-xl));
    background: none;

    &::before {
      content: '';
      position: absolute;
      inset: calc(var(--_aura-w) * -1);
      z-index: -1;
      border-radius: inherit;
      background: var(--_aura-light);
      filter: blur(calc(var(--_aura-w) * 4));
      opacity: 0.9;
    }
  }
  :where(.aura-xs) { --_aura-w: 1px; }
  :where(.aura-sm) { --_aura-w: 2px; }
  :where(.aura-md) { --_aura-w: 3px; }
  :where(.aura-lg) { --_aura-w: 5px; }
  :where(.aura-xl) { --_aura-w: 8px; }

  /* ── Frames ───────────────────────────────────────────────── */
  :where(.frame-double) { border: 4px double var(--shape-ink, var(--foreground)); }
  :where(.frame-dashed) { border: 2px dashed var(--shape-ink, var(--border)); }
  :where(.frame-offset) { outline: 1px solid var(--shape-ink, var(--foreground)); outline-offset: 6px; }
  :where(.frame-stitched) {
    outline: 2px dashed color-mix(in oklch, var(--shape-ink, currentColor) 45%, transparent);
    outline-offset: -8px;
  }
  /* L-shaped corner brackets (background-image only: background-color stays yours) */
  :where(.frame-corners) {
    --_i: var(--shape-ink, var(--foreground));
    --_l: 1rem;
    background-image:
      linear-gradient(var(--_i) 0 0), linear-gradient(var(--_i) 0 0), linear-gradient(var(--_i) 0 0), linear-gradient(var(--_i) 0 0),
      linear-gradient(var(--_i) 0 0), linear-gradient(var(--_i) 0 0), linear-gradient(var(--_i) 0 0), linear-gradient(var(--_i) 0 0);
    background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
    background-size: var(--_l) 2px, 2px var(--_l), var(--_l) 2px, 2px var(--_l), var(--_l) 2px, 2px var(--_l), var(--_l) 2px, 2px var(--_l);
    background-repeat: no-repeat;
  }
  /* gradient border over the card surface (chart palette) */
  :where(.frame-gradient) {
    border: 2px solid transparent;
    background:
      linear-gradient(var(--card), var(--card)) padding-box,
      linear-gradient(135deg, var(--chart-1), var(--chart-2), var(--chart-3), var(--chart-4)) border-box;
  }
  :where(.frame-conic) {
    border: 3px solid transparent;
    background:
      linear-gradient(var(--card), var(--card)) padding-box,
      conic-gradient(var(--chart-1), var(--chart-2), var(--chart-3), var(--chart-4), var(--chart-5), var(--chart-1)) border-box;
  }
  :where(.frame-dotted) { border: 3px dotted var(--shape-ink, var(--foreground)); }
  :where(.frame-thick) { border: 4px solid var(--shape-ink, var(--foreground)); }
  :where(.frame-ridge) { border: 6px ridge var(--shape-ink, var(--muted-foreground)); }
  :where(.frame-groove) { border: 6px groove var(--shape-ink, var(--muted-foreground)); }
  /* hairline border + an inner rule 4px inside it */
  :where(.frame-inset) {
    border: 1px solid var(--shape-ink, var(--foreground));
    box-shadow: inset 0 0 0 4px var(--background), inset 0 0 0 5px var(--shape-ink, var(--foreground));
  }
  :where(.frame-sketch) {
    border: 2px solid var(--shape-ink, var(--foreground));
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  }
  :where(.frame-accent) { border-inline-start: 4px solid var(--shape-ink, var(--primary)); }
  :where(.frame-underline) { border-block-end: 3px solid var(--shape-ink, var(--primary)); }
  /* instant photo: a thick bottom rim */
  :where(.frame-polaroid) {
    border: 10px solid var(--card);
    border-bottom-width: 2.75rem;
    box-shadow: var(--shadow-md);
  }
  /* app window: title bar with traffic lights (in a transparent border, so
     background-color stays yours) */
  :where(.frame-window) {
    border: 1px solid var(--border);
    border-top: 1.75rem solid transparent;
    background-image:
      radial-gradient(circle, #ff5f57 4px, #0000 4.5px), radial-gradient(circle, #febc2e 4px, #0000 4.5px),
      radial-gradient(circle, #28c840 4px, #0000 4.5px), linear-gradient(var(--muted), var(--muted));
    background-origin: border-box;
    background-position: 10px 8px, 28px 8px, 46px 8px, 0 0;
    background-size: 12px 12px, 12px 12px, 12px 12px, 100% 1.75rem;
    background-repeat: no-repeat;
  }
  /* film strip: sprocket holes punched through two dark bands */
  :where(.frame-film) {
    --_k: var(--shape-ink, var(--foreground));
    border-block: 16px solid transparent;
    background-image:
      linear-gradient(90deg, var(--background) 8px, #0000 8px), linear-gradient(90deg, var(--background) 8px, #0000 8px),
      linear-gradient(var(--_k), var(--_k)), linear-gradient(var(--_k), var(--_k));
    background-origin: border-box;
    background-position: 4px 4px, 4px calc(100% - 4px), 0 0, 0 100%;
    background-size: 16px 8px, 16px 8px, 100% 16px, 100% 16px;
    background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  }
  /* postage stamp: perforated edge punched through the element itself */
  :where(.frame-stamp) {
    --_p: 6px;
    mask:
      radial-gradient(circle var(--_p) at center, #0000 96%, #000) calc(var(--_p) * -1) calc(var(--_p) * -1) / calc(var(--_p) * 2) calc(var(--_p) * 2) round,
      linear-gradient(#000 0 0) var(--_p) var(--_p) / calc(100% - var(--_p) * 2) calc(100% - var(--_p) * 2) no-repeat;
  }
  /* two strips of tape across the top corners (::before / ::after - the
     element becomes a positioning context, and tape overhangs its edge, so
     overflow stays visible even on components that clip) */
  :where(.frame-tape) { position: relative; overflow: visible; }
  :where(.frame-tape)::before,
  :where(.frame-tape)::after {
    content: '';
    position: absolute;
    top: 0.4rem;
    width: 5rem;
    height: 1.25rem;
    background: color-mix(in oklch, var(--shape-ink, var(--chart-4)) 45%, transparent);
    pointer-events: none;
  }
  :where(.frame-tape)::before { left: -1.4rem; rotate: -40deg; }
  :where(.frame-tape)::after { right: -1.4rem; rotate: 40deg; }
  /* neon-style border: a crisp line plus its halo */
  :where(.frame-glow) {
    border: 1px solid var(--shape-ink, var(--primary));
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--shape-ink, var(--primary)) 35%, transparent),
      0 0 18px color-mix(in oklch, var(--shape-ink, var(--primary)) 45%, transparent);
  }
  /* ruled paper with a margin line (background-image only). The rules start
     at the content box and repeat every line, so text sits on them. */
  :where(.frame-notebook) {
    padding-inline-start: 3rem;
    line-height: 1.5rem;
    background-image:
      linear-gradient(90deg, #0000 2.25rem, color-mix(in oklch, var(--destructive) 55%, transparent) 2.25rem 2.35rem, #0000 0),
      repeating-linear-gradient(#0000 0 1.45rem, color-mix(in oklch, var(--primary) 18%, transparent) 1.45rem 1.5rem);
    background-origin: border-box, content-box;
  }
  /* animated dashed border (static under reduced motion) */
  :where(.frame-marching-ants) {
    --_k: var(--shape-ink, var(--foreground));
    background-image:
      linear-gradient(90deg, var(--_k) 50%, #0000 0), linear-gradient(90deg, var(--_k) 50%, #0000 0),
      linear-gradient(0deg, var(--_k) 50%, #0000 0), linear-gradient(0deg, var(--_k) 50%, #0000 0);
    background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    animation: shape-march 0.6s linear infinite;
  }

  /* ── Background patterns (background-image only) ─────────── */
  :where(.pattern-dots) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 22%, transparent));
    background-image: radial-gradient(var(--_i) 1.25px, transparent 1.75px);
    background-size: var(--shape-pattern, 16px) var(--shape-pattern, 16px);
  }
  :where(.pattern-grid) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 14%, transparent));
    background-image: linear-gradient(var(--_i) 1px, transparent 1px), linear-gradient(90deg, var(--_i) 1px, transparent 1px);
    background-size: var(--shape-pattern, 16px) var(--shape-pattern, 16px);
  }
  :where(.pattern-lines) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 14%, transparent));
    background-image: repeating-linear-gradient(-45deg, var(--_i) 0 1px, transparent 1px calc(var(--shape-pattern, 16px) / 2));
  }
  :where(.pattern-checker) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 8%, transparent));
    background-image: conic-gradient(var(--_i) 25%, transparent 0 50%, var(--_i) 0 75%, transparent 0);
    background-size: var(--shape-pattern, 16px) var(--shape-pattern, 16px);
  }
  :where(.pattern-zigzag) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 14%, transparent));
    --_p: var(--shape-pattern, 16px);
    background-image:
      linear-gradient(135deg, var(--_i) 25%, transparent 25%), linear-gradient(225deg, var(--_i) 25%, transparent 25%);
    background-size: var(--_p) var(--_p);
    background-position: 0 0, 0 0;
  }
  :where(.pattern-crosshatch) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 14%, transparent));
    --_p: calc(var(--shape-pattern, 16px) / 2);
    background-image:
      repeating-linear-gradient(45deg, var(--_i) 0 1px, transparent 1px var(--_p)),
      repeating-linear-gradient(-45deg, var(--_i) 0 1px, transparent 1px var(--_p));
  }
  :where(.pattern-lines-horizontal) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 16%, transparent));
    background-image: repeating-linear-gradient(to bottom, var(--_i) 0 1px, transparent 1px calc(var(--shape-pattern, 16px) / 2));
  }
  :where(.pattern-lines-vertical) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 16%, transparent));
    background-image: repeating-linear-gradient(to right, var(--_i) 0 1px, transparent 1px calc(var(--shape-pattern, 16px) / 2));
  }
  /* bold diagonal hazard stripes */
  :where(.pattern-stripes) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 10%, transparent));
    background-image: repeating-linear-gradient(-45deg, var(--_i) 0 calc(var(--shape-pattern, 16px) / 2), transparent 0 var(--shape-pattern, 16px));
  }
  :where(.pattern-triangles) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 10%, transparent));
    background-image: linear-gradient(45deg, var(--_i) 50%, transparent 50%);
    background-size: var(--shape-pattern, 16px) var(--shape-pattern, 16px);
  }
  /* four ink corners per tile leave a diamond grid */
  :where(.pattern-diamonds) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 10%, transparent));
    background-image:
      linear-gradient(135deg, var(--_i) 25%, transparent 25%), linear-gradient(225deg, var(--_i) 25%, transparent 25%),
      linear-gradient(315deg, var(--_i) 25%, transparent 25%), linear-gradient(45deg, var(--_i) 25%, transparent 25%);
    background-size: var(--shape-pattern, 16px) var(--shape-pattern, 16px);
  }
  :where(.pattern-chevrons) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 12%, transparent));
    --_p: var(--shape-pattern, 16px);
    background-image:
      linear-gradient(135deg, var(--_i) 25%, transparent 25%), linear-gradient(225deg, var(--_i) 25%, transparent 25%),
      linear-gradient(315deg, var(--_i) 25%, transparent 25%), linear-gradient(45deg, var(--_i) 25%, transparent 25%);
    background-size: var(--_p) var(--_p);
    background-position: calc(var(--_p) / -2) 0, calc(var(--_p) / -2) 0, 0 0, 0 0;
  }
  /* interlocking half-moons */
  :where(.pattern-rings) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 14%, transparent));
    --_p: var(--shape-pattern, 16px);
    background-image:
      radial-gradient(circle at 100% 50%, transparent 20%, var(--_i) 21% 34%, transparent 35%),
      radial-gradient(circle at 0 50%, transparent 20%, var(--_i) 21% 34%, transparent 35%);
    background-size: calc(var(--_p) * 1.5) calc(var(--_p) * 3);
  }
  /* concentric ripples out of the top-left corner */
  :where(.pattern-ripples) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 16%, transparent));
    background-image: repeating-radial-gradient(circle at 0 0, var(--_i) 0 1px, transparent 1px calc(var(--shape-pattern, 16px) * 0.75));
  }
  :where(.pattern-polka) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 14%, transparent));
    --_p: var(--shape-pattern, 16px);
    background-image: radial-gradient(var(--_i) 20%, transparent 21%), radial-gradient(var(--_i) 20%, transparent 21%);
    background-size: var(--_p) var(--_p);
    background-position: 0 0, calc(var(--_p) / 2) calc(var(--_p) / 2);
  }
  :where(.pattern-plaid) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 8%, transparent));
    --_p: calc(var(--shape-pattern, 16px) * 2);
    background-image:
      repeating-linear-gradient(90deg, var(--_i) 0 calc(var(--_p) * 0.25), transparent 0 calc(var(--_p) * 0.5),
        var(--_i) 0 calc(var(--_p) * 0.56), transparent 0 var(--_p)),
      repeating-linear-gradient(0deg, var(--_i) 0 calc(var(--_p) * 0.25), transparent 0 calc(var(--_p) * 0.5),
        var(--_i) 0 calc(var(--_p) * 0.56), transparent 0 var(--_p));
  }
  /* running-bond bricks: mortar lines + joints that shift every row */
  :where(.pattern-bricks) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 16%, transparent));
    --_p: var(--shape-pattern, 16px);
    background-image:
      linear-gradient(var(--_i) 1px, transparent 1px),
      conic-gradient(from 270deg at 1px 50%, var(--_i) 0 90deg, transparent 0),
      conic-gradient(from 270deg at 1px 50%, var(--_i) 0 90deg, transparent 0);
    background-size: calc(var(--_p) * 2) var(--_p), calc(var(--_p) * 2) calc(var(--_p) * 2), calc(var(--_p) * 2) calc(var(--_p) * 2);
    background-position: 0 0, 0 0, var(--_p) var(--_p);
  }
  /* minor + major grid */
  :where(.pattern-blueprint) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 18%, transparent));
    --_m: color-mix(in oklch, var(--_i) 60%, transparent);
    --_p: var(--shape-pattern, 16px);
    background-image:
      linear-gradient(var(--_i) 1px, transparent 1px), linear-gradient(90deg, var(--_i) 1px, transparent 1px),
      linear-gradient(var(--_m) 1px, transparent 1px), linear-gradient(90deg, var(--_m) 1px, transparent 1px);
    background-size: calc(var(--_p) * 5) calc(var(--_p) * 5), calc(var(--_p) * 5) calc(var(--_p) * 5), var(--_p) var(--_p), var(--_p) var(--_p);
  }
  :where(.pattern-sunburst) {
    --_i: var(--shape-ink, color-mix(in oklch, currentColor 8%, transparent));
    background-image: repeating-conic-gradient(from 0deg at 50% 50%, var(--_i) 0 6deg, transparent 0 12deg);
  }
  /* soft chart-color gradient mesh (hero / card backdrops) */
  :where(.pattern-mesh) {
    background-image:
      radial-gradient(at 15% 20%, color-mix(in oklch, var(--chart-1) 45%, transparent), transparent 55%),
      radial-gradient(at 85% 15%, color-mix(in oklch, var(--chart-2) 40%, transparent), transparent 50%),
      radial-gradient(at 75% 85%, color-mix(in oklch, var(--chart-3) 40%, transparent), transparent 55%),
      radial-gradient(at 20% 90%, color-mix(in oklch, var(--chart-4) 35%, transparent), transparent 50%);
  }
  /* film grain (SVG turbulence, mid-gray: reads on light and dark) */
  :where(.pattern-grain) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* the aura's turning angle: typed, so the conic gradient animates */
@property --shape-aura-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}
@keyframes shape-aura-spin {
  to { --shape-aura-angle: 360deg; }
}

@keyframes shape-march {
  to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; }
}

/* Accessibility: lift + marching ants are decoration - no motion when reduced */
@media (prefers-reduced-motion: reduce) {
  @layer utilities {
    :where(.shadow-lift) { transition: none; }
    :where(.shadow-lift):hover,
    :where(.shadow-lift):focus-visible,
    :where(.shadow-lift):focus-within { translate: none; }
    :where(.frame-marching-ants) { animation: none; }
    /* the aura stays - a still light, no turning */
    :where(.aura) { animation: none; }
  }
}

/* Forced colors drop box-shadows and background images: shadow-only and
   pattern-only silhouettes keep a visible system-color outline */
@media (forced-colors: active) {
  @layer utilities {
    :where(.shadow-hard-sm, .shadow-hard, .shadow-hard-lg, .shadow-stack, .shadow-layered, .shadow-float,
      .shadow-glow, .shadow-ring, .shadow-edge, .shadow-long, .shadow-neu, .shadow-neu-inset, .shadow-lift,
      .shadow-outline-offset, .shadow-retro, .shadow-rainbow, .shadow-extrude, .shadow-colored, .shadow-bottom,
      .shadow-hairline, .shadow-inner-hard, .shadow-bevel, .shadow-neon, .shadow-sticker, .shadow-paper-stack,
      .frame-corners, .frame-gradient, .frame-conic, .frame-inset, .frame-window, .frame-film, .frame-marching-ants,
      .frame-glow, .frame-notebook, .aura,
      .stack-top, .stack-bottom, .stack-left, .stack-right, .stack-top-left, .stack-top-right, .stack-bottom-left, .stack-bottom-right) {
      outline: 1px solid CanvasText;
    }
  }
}