@greese/ui 0.0.0-stage → 1.1.0

package/themes/ticket.scss

@@ -0,0 +1,1031 @@
+/**
+ * Ticket: square corners, with a round notch punched in each side of containers, fields and tabs; controls and indicators are tags that point onward, and a control’s point stretches when hovered. Marks are notched like stamps.
+ *
+ * A greese ui shape theme (ADR 0025): radii, and components outlined with one
+ * clip and one border ring each (ADR 0024), in @layer greese.overrides. It
+ * sets no colors and no motion, so it goes with any color or motion theme.
+ * Compile it with Sass's package importer, after greese ui's
+ * styles, or use the compiled ticket.css.
+ *
+ * Generated from apps/site/src/studio/shapes.ts (npm run themes -w site).
+ */
+// Generated by greese ui Theme Studio from greese-theme.json. Edit it there, or in
+// the studio (npm run studio); changes made here are overwritten.
+@use 'pkg:@greese/ui/scss/kit' as greese;
+
+@include greese.tokens((
+  corner: (
+    control: "var(--greese-radius-none)",
+    field: "var(--greese-radius-none)",
+    surface: "var(--greese-radius-none)",
+    panel: "var(--greese-radius-none)",
+    inset: "var(--greese-radius-none)",
+    pill: "var(--greese-radius-none)",
+    round: "var(--greese-radius-none)",
+  ),
+));
+
+@include greese.component(Accordion) {
+  display: grid;
+  gap: var(--greese-space-2);
+  border-block-start: 0;
+}
+
+@include greese.component(AccordionItem) {
+  border-block-end: 0;
+
+  > .greese-Collapsible-content {
+    padding-block-start: var(--greese-space-3);
+  }
+}
+
+@include greese.component(Collapsible) {
+  > .greese-Collapsible-trigger {
+    padding-inline: var(--greese-space-4);
+    background-color: var(--greese-color-surface);
+    border: 1px solid var(--greese-collapsible-border, var(--greese-color-border));
+    border-radius: var(--greese-corner-control);
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: color-mix(in oklab, var(--greese-color-fg) 5%, var(--greese-color-surface));
+      }
+    }
+  }
+
+  &[open] > .greese-Collapsible-trigger {
+    margin-block-end: var(--greese-space-2);
+  }
+
+  > .greese-Collapsible-content {
+    padding-inline: var(--greese-space-4);
+  }
+}
+
+// Shapes (ADR 0024)
+@property --greese-shape-bleed {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+@property --greese-shape-border {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+@property --greese-shape-n {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+@property --greese-shape-r {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+@property --greese-shape-t {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+@property --greese-shape-ring {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.overrides {
+  .greese-shape-ticket-control,
+  .greese-shape-ticket-indicator {
+    --greese-shape-ring: var(--greese-color-border);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-shape-ticket-control::after,
+  .greese-shape-ticket-indicator::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-shape-ticket-control,
+    .greese-shape-ticket-indicator {
+      transition: --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-shape-ticket-control,
+    .greese-shape-ticket-indicator {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-shape-ticket-control::after,
+    .greese-shape-ticket-indicator::after {
+      display: none;
+    }
+  }
+  .greese-shape-ticket-field,
+  .greese-shape-ticket-container,
+  .greese-shape-ticket-small,
+  .greese-shape-ticket-tab {
+    --greese-shape-ring: var(--greese-color-border);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-shape-ticket-field::after,
+  .greese-shape-ticket-container::after,
+  .greese-shape-ticket-small::after,
+  .greese-shape-ticket-tab::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-shape-ticket-field,
+    .greese-shape-ticket-container,
+    .greese-shape-ticket-small,
+    .greese-shape-ticket-tab {
+      transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-shape-ticket-field,
+    .greese-shape-ticket-container,
+    .greese-shape-ticket-small,
+    .greese-shape-ticket-tab {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-shape-ticket-field::after,
+    .greese-shape-ticket-container::after,
+    .greese-shape-ticket-small::after,
+    .greese-shape-ticket-tab::after {
+      display: none;
+    }
+  }
+  .greese-shape-ticket-mark {
+    --greese-shape-ring: var(--greese-color-border);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-shape-ticket-mark::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-shape-ticket-mark {
+      transition: --greese-shape-n var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-shape-ticket-mark {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-shape-ticket-mark::after {
+      display: none;
+    }
+  }
+  .greese-AccordionItem > .greese-Collapsible-content,
+  .greese-Tile {
+    --greese-shape-ring: var(--greese-color-border);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-AccordionItem > .greese-Collapsible-content::after,
+  .greese-Tile::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-AccordionItem > .greese-Collapsible-content,
+    .greese-Tile {
+      transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-AccordionItem > .greese-Collapsible-content,
+    .greese-Tile {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-AccordionItem > .greese-Collapsible-content::after,
+    .greese-Tile::after {
+      display: none;
+    }
+  }
+  .greese-Alert {
+    --greese-shape-ring: color-mix(in oklab, var(--greese-alert-tone) 30%, transparent);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Alert::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Alert {
+      transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-Alert {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Alert::after {
+      display: none;
+    }
+  }
+  .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
+  .greese-Status:not(.greese-Status--pulse) {
+    clip-path: var(--greese-shape-clip) border-box;
+  }
+  @media (forced-colors: active) {
+    .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
+    .greese-Status:not(.greese-Status--pulse) {
+      clip-path: none;
+    }
+  }
+  .greese-Badge {
+    --greese-shape-ring: color-mix(in oklab, var(--greese-badge-tone) 35%, transparent);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Badge::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Badge {
+      transition: --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-Badge {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Badge::after {
+      display: none;
+    }
+  }
+  .greese-Button {
+    --greese-shape-ring: var(--greese-button-border, transparent);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Button::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Button {
+      transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
+        border-color var(--greese-duration-fast) var(--greese-easing-standard),
+        color var(--greese-duration-fast) var(--greese-easing-standard),
+        --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-Button {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Button::after {
+      display: none;
+    }
+  }
+  .greese-Card {
+    --greese-shape-ring: transparent;
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Card::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  .greese-Card.greese-Card--outline {
+    --greese-shape-ring: var(--greese-color-border);
+  }
+  .greese-Card.greese-Card--elevated {
+    --greese-shape-ring: var(--greese-color-border-strong);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Card {
+      transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+    .greese-Card.greese-Card--interactive {
+      transition: --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear,
+        box-shadow var(--greese-duration-normal) var(--greese-easing-standard),
+        border-color var(--greese-duration-normal) var(--greese-easing-standard),
+        translate var(--greese-duration-normal) var(--greese-easing-standard);
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-Card {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Card::after {
+      display: none;
+    }
+  }
+  .greese-Chip {
+    --greese-shape-ring: var(--greese-color-border);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Chip::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Chip {
+      transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
+        color var(--greese-duration-fast) var(--greese-easing-standard),
+        --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-Chip {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Chip::after {
+      display: none;
+    }
+  }
+  .greese-Collapsible-trigger {
+    --greese-shape-ring: var(--greese-collapsible-border, var(--greese-color-border));
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Collapsible-trigger::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Collapsible-trigger {
+      transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
+        --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-Collapsible-trigger {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Collapsible-trigger::after {
+      display: none;
+    }
+  }
+  .greese-Dialog,
+  .greese-Menu,
+  .greese-Popover {
+    --greese-shape-ring: var(--greese-color-border);
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Dialog::after,
+  .greese-Menu::after,
+  .greese-Popover::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (forced-colors: active) {
+    .greese-Dialog,
+    .greese-Menu,
+    .greese-Popover {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Dialog::after,
+    .greese-Menu::after,
+    .greese-Popover::after {
+      display: none;
+    }
+  }
+  .greese-Input,
+  .greese-Select,
+  .greese-Textarea {
+    --greese-shape-ring: var(--greese-color-border-strong);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Input::after,
+  .greese-Select::after,
+  .greese-Textarea::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  .greese-Input:hover,
+  .greese-Select:hover,
+  .greese-Textarea:hover {
+    --greese-shape-ring: var(--greese-color-fg-muted);
+  }
+  .greese-Input[aria-invalid=true], .greese-Input[data-invalid],
+  .greese-Select[aria-invalid=true], .greese-Select[data-invalid],
+  .greese-Textarea[aria-invalid=true], .greese-Textarea[data-invalid] {
+    --greese-shape-ring: var(--greese-color-negative);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Input,
+    .greese-Select,
+    .greese-Textarea {
+      transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
+        --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-Input,
+    .greese-Select,
+    .greese-Textarea {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Input::after,
+    .greese-Select::after,
+    .greese-Textarea::after {
+      display: none;
+    }
+  }
+  .greese-OtpField-slot {
+    --greese-shape-ring: var(--greese-color-border-strong);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-OtpField-slot::before {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  .greese-OtpField[data-invalid] .greese-OtpField-slot {
+    --greese-shape-ring: var(--greese-color-negative);
+  }
+  .greese-OtpField-slot.greese-OtpField-slot--active {
+    --greese-shape-ring: var(--greese-color-focus-ring);
+    --greese-shape-border: 2px;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-OtpField-slot {
+      transition: box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
+        --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-OtpField-slot {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-OtpField-slot::before {
+      display: none;
+    }
+  }
+  .greese-Segment {
+    --greese-shape-ring: transparent;
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Segment::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  .greese-Segment:has(:checked) {
+    --greese-shape-ring: var(--greese-segment-current-ring, transparent);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Segment {
+      transition: background-color var(--greese-duration-fast) var(--greese-easing-standard),
+        color var(--greese-duration-fast) var(--greese-easing-standard),
+        --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-Segment {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Segment::after {
+      display: none;
+    }
+  }
+  .greese-SegmentedControl-track {
+    --greese-shape-ring: var(--greese-color-border);
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-SegmentedControl-track::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-SegmentedControl-track {
+      transition: --greese-shape-t var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-SegmentedControl-track {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-SegmentedControl-track::after {
+      display: none;
+    }
+  }
+  .greese-Tab {
+    --greese-shape-ring: transparent;
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Tab::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  .greese-Tab[aria-selected='true'] {
+    --greese-shape-ring: var(--greese-tab-current-ring, transparent);
+    --greese-shape-border: 1.5px;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Tab {
+      transition: color var(--greese-duration-fast) var(--greese-easing-standard),
+        background-color var(--greese-duration-fast) var(--greese-easing-standard),
+        box-shadow var(--greese-duration-fast) var(--greese-easing-standard),
+        --greese-shape-r var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-border var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-ring var(--greese-duration-normal) var(--greese-easing-standard),
+        --greese-shape-bleed 0s linear;
+    }
+  }
+  @media (forced-colors: active) {
+    .greese-Tab {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Tab::after {
+      display: none;
+    }
+  }
+  .greese-Toast {
+    --greese-shape-ring: color-mix(in oklab, var(--greese-toast-edge) 45%, var(--greese-color-border-strong));
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Toast::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  .greese-Toast {
+    box-shadow: inset 3px 0 0 var(--greese-toast-edge);
+  }
+  .greese-Toast:dir(rtl) {
+    box-shadow: inset -3px 0 0 var(--greese-toast-edge);
+  }
+  @media (forced-colors: active) {
+    .greese-Toast {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Toast::after {
+      display: none;
+    }
+  }
+  .greese-Tooltip {
+    --greese-shape-ring: var(--greese-tooltip-border, transparent);
+    isolation: isolate;
+    border-color: transparent;
+    clip-path: var(--greese-shape-clip) padding-box;
+  }
+  .greese-Tooltip::after {
+    position: absolute;
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    translate: none;
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    background: var(--greese-shape-ring);
+    clip-path: var(--greese-shape-ring-clip);
+  }
+  @media (forced-colors: active) {
+    .greese-Tooltip {
+      clip-path: none;
+      border-color: CanvasText;
+    }
+    .greese-Tooltip::after {
+      display: none;
+    }
+  }
+  .greese-shape-ticket-control,
+  .greese-Button {
+    --greese-shape-t: 10px;
+    --greese-shape-border: 1px;
+    --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-t) + 0.847 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.014 * var(--greese-shape-bleed)) 50%, calc(100% - var(--greese-shape-t) + 0.847 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
+    --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-t)) 0, 100% 50%, calc(100% - var(--greese-shape-t)) 100%, 0 100%, 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-t) - 0.847 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.014 * var(--greese-shape-border)) 50%, calc(100% - var(--greese-shape-t) - 0.847 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
+  }
+  .greese-shape-ticket-control:dir(rtl),
+  .greese-Button:dir(rtl) {
+    --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-t) - 0.847 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.014 * var(--greese-shape-bleed)) 50%, calc(var(--greese-shape-t) - 0.847 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
+    --greese-shape-ring-clip: polygon(evenodd, 100% 100%, calc(var(--greese-shape-t)) 100%, 0 50%, calc(var(--greese-shape-t)) 0, 100% 0, 100% 100%, calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-t) + 0.847 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.014 * var(--greese-shape-border)) 50%, calc(var(--greese-shape-t) + 0.847 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
+  }
+  .greese-Button.greese-Button--size-sm {
+    --greese-shape-t: 7px;
+  }
+  .greese-Button.greese-Button--size-xs {
+    --greese-shape-t: 5px;
+  }
+  .greese-Button.greese-IconButton {
+    --greese-shape-t: 5px;
+  }
+  @media (hover: hover) {
+    .greese-shape-ticket-control:hover,
+    .greese-Button:hover {
+      --greese-shape-t: 15px;
+    }
+    .greese-Button.greese-Button--size-sm:hover {
+      --greese-shape-t: 10.5px;
+    }
+    .greese-Button.greese-Button--size-xs:hover,
+    .greese-Button.greese-IconButton:hover {
+      --greese-shape-t: 7.5px;
+    }
+  }
+  .greese-shape-ticket-control:active,
+  .greese-Button:active {
+    --greese-shape-t: 6px;
+  }
+  .greese-Button.greese-Button--size-sm:active {
+    --greese-shape-t: 4.2px;
+  }
+  .greese-Button.greese-Button--size-xs:active,
+  .greese-Button.greese-IconButton:active {
+    --greese-shape-t: 3px;
+  }
+  .greese-shape-ticket-control:focus-visible {
+    --greese-shape-t: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+  .greese-Button:focus-visible {
+    --greese-shape-t: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+  .greese-shape-ticket-field,
+  .greese-Input,
+  .greese-OtpField-slot,
+  .greese-Select,
+  .greese-Textarea {
+    --greese-shape-r: 5px;
+    --greese-shape-border: 1px;
+    --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-r) + 1.02 * var(--greese-shape-bleed)) 50%, calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(var(--greese-shape-r) - 1.02 * var(--greese-shape-bleed)) 50%, calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)));
+    --greese-shape-ring-clip: polygon(evenodd, 0 0, 100% 0, 100% calc(50% - var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(100% - 0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(100% - var(--greese-shape-r)) 50%, calc(100% - 0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), 100% calc(50% + var(--greese-shape-r)), 100% 100%, 0 100%, 0 calc(50% + var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(var(--greese-shape-r)) 50%, calc(0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), 0 calc(50% - var(--greese-shape-r)), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(var(--greese-shape-r) + 1.02 * var(--greese-shape-border)) 50%, calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(100% - var(--greese-shape-r) - 1.02 * var(--greese-shape-border)) 50%, calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
+  }
+  .greese-Input:has(:focus-visible),
+  .greese-Select:has(:focus-visible),
+  .greese-Textarea:has(:focus-visible) {
+    --greese-shape-border: 3px;
+    --greese-shape-ring: var(--greese-color-focus-ring);
+    outline-color: transparent;
+  }
+  .greese-shape-ticket-field:focus-visible {
+    --greese-shape-r: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+  .greese-shape-ticket-container,
+  .greese-AccordionItem > .greese-Collapsible-content,
+  .greese-Card,
+  .greese-Dialog,
+  .greese-Menu,
+  .greese-Popover,
+  .greese-Tile,
+  .greese-Toast {
+    --greese-shape-r: 12px;
+    --greese-shape-border: 1px;
+    --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-r) + 1.02 * var(--greese-shape-bleed)) 50%, calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(var(--greese-shape-r) - 1.02 * var(--greese-shape-bleed)) 50%, calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)));
+    --greese-shape-ring-clip: polygon(evenodd, 0 0, 100% 0, 100% calc(50% - var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(100% - 0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(100% - var(--greese-shape-r)) 50%, calc(100% - 0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), 100% calc(50% + var(--greese-shape-r)), 100% 100%, 0 100%, 0 calc(50% + var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(var(--greese-shape-r)) 50%, calc(0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), 0 calc(50% - var(--greese-shape-r)), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(var(--greese-shape-r) + 1.02 * var(--greese-shape-border)) 50%, calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(100% - var(--greese-shape-r) - 1.02 * var(--greese-shape-border)) 50%, calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
+  }
+  @media (hover: hover) {
+    .greese-shape-ticket-container:hover,
+    .greese-Card.greese-Card--interactive:hover {
+      --greese-shape-r: 16px;
+    }
+  }
+  .greese-shape-ticket-container:focus-visible,
+  .greese-AccordionItem > .greese-Collapsible-content:focus-visible,
+  .greese-Card:focus-visible,
+  .greese-Tile:focus-visible {
+    --greese-shape-r: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+  .greese-Dialog:focus-visible,
+  .greese-Menu:focus-visible,
+  .greese-Popover:focus-visible,
+  .greese-Toast:focus-visible {
+    --greese-shape-r: 0px;
+    --greese-shape-bleed: 8px;
+  }
+  .greese-shape-ticket-small,
+  .greese-Alert,
+  .greese-Collapsible-trigger,
+  .greese-Tooltip {
+    --greese-shape-r: 7px;
+    --greese-shape-border: 1px;
+    --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-r) + 1.02 * var(--greese-shape-bleed)) 50%, calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(var(--greese-shape-r) - 1.02 * var(--greese-shape-bleed)) 50%, calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)));
+    --greese-shape-ring-clip: polygon(evenodd, 0 0, 100% 0, 100% calc(50% - var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(100% - 0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(100% - var(--greese-shape-r)) 50%, calc(100% - 0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), 100% calc(50% + var(--greese-shape-r)), 100% 100%, 0 100%, 0 calc(50% + var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(var(--greese-shape-r)) 50%, calc(0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), 0 calc(50% - var(--greese-shape-r)), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(var(--greese-shape-r) + 1.02 * var(--greese-shape-border)) 50%, calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(100% - var(--greese-shape-r) - 1.02 * var(--greese-shape-border)) 50%, calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
+  }
+  .greese-shape-ticket-small:focus-visible,
+  .greese-Alert:focus-visible {
+    --greese-shape-r: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+  .greese-Collapsible-trigger:focus-visible {
+    --greese-shape-r: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+  .greese-Tooltip:focus-visible {
+    --greese-shape-r: 0px;
+    --greese-shape-bleed: 8px;
+  }
+  .greese-shape-ticket-indicator,
+  .greese-Badge,
+  .greese-Chip,
+  .greese-Segment,
+  .greese-SegmentedControl-track {
+    --greese-shape-t: 6px;
+    --greese-shape-border: 1px;
+    --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-t) + 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + 1.002 * var(--greese-shape-bleed)) 50%, calc(100% - var(--greese-shape-t) + 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)));
+    --greese-shape-ring-clip: polygon(evenodd, 0 0, calc(100% - var(--greese-shape-t)) 0, 100% 50%, calc(100% - var(--greese-shape-t)) 100%, 0 100%, 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-t) - 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - 1.002 * var(--greese-shape-border)) 50%, calc(100% - var(--greese-shape-t) - 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
+  }
+  .greese-shape-ticket-indicator:dir(rtl),
+  .greese-Badge:dir(rtl),
+  .greese-Chip:dir(rtl),
+  .greese-Segment:dir(rtl),
+  .greese-SegmentedControl-track:dir(rtl) {
+    --greese-shape-clip: polygon(calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-t) - 0.936 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * 1.002 * var(--greese-shape-bleed)) 50%, calc(var(--greese-shape-t) - 0.936 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)));
+    --greese-shape-ring-clip: polygon(evenodd, 100% 100%, calc(var(--greese-shape-t)) 100%, 0 50%, calc(var(--greese-shape-t)) 0, 100% 0, 100% 100%, calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-t) + 0.936 * var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(1.002 * var(--greese-shape-border)) 50%, calc(var(--greese-shape-t) + 0.936 * var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)));
+  }
+  .greese-Segment:has(:focus-visible) {
+    --greese-shape-border: 3px;
+    --greese-shape-ring: var(--greese-color-focus-ring);
+    outline-color: transparent;
+  }
+  .greese-shape-ticket-indicator:focus-visible,
+  .greese-Badge:focus-visible,
+  .greese-SegmentedControl-track:focus-visible {
+    --greese-shape-t: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+  .greese-Chip:focus-visible {
+    --greese-shape-t: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+  .greese-shape-ticket-mark,
+  .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar),
+  .greese-Status:not(.greese-Status--pulse) {
+    --greese-shape-n: 4px;
+    --greese-shape-border: 1px;
+    --greese-shape-clip: polygon(calc(var(--greese-shape-n) - var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)) calc(var(--greese-shape-n) - var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(var(--greese-shape-n) - var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)), calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)) calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)), calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-n) - var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(var(--greese-shape-n) - var(--greese-shape-bleed)) calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% - var(--greese-shape-n) + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(var(--greese-shape-n) - var(--greese-shape-bleed)), calc(var(--greese-shape-n) - var(--greese-shape-bleed)) calc(var(--greese-shape-n) - var(--greese-shape-bleed)));
+    --greese-shape-ring-clip: polygon(evenodd, calc(var(--greese-shape-n)) 0, calc(100% - var(--greese-shape-n)) 0, calc(100% - var(--greese-shape-n)) calc(var(--greese-shape-n)), 100% calc(var(--greese-shape-n)), 100% calc(100% - var(--greese-shape-n)), calc(100% - var(--greese-shape-n)) calc(100% - var(--greese-shape-n)), calc(100% - var(--greese-shape-n)) 100%, calc(var(--greese-shape-n)) 100%, calc(var(--greese-shape-n)) calc(100% - var(--greese-shape-n)), 0 calc(100% - var(--greese-shape-n)), 0 calc(var(--greese-shape-n)), calc(var(--greese-shape-n)) calc(var(--greese-shape-n)), calc(var(--greese-shape-n)) 0, calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(var(--greese-shape-n) + var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-n) + var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-n) - var(--greese-shape-border)), calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(100% - var(--greese-shape-n) - var(--greese-shape-border)), calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-n) - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-n) - var(--greese-shape-border)) calc(100% - var(--greese-shape-n) - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-n) - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-n) + var(--greese-shape-border)), calc(100% - var(--greese-shape-n) - var(--greese-shape-border)) calc(var(--greese-shape-n) + var(--greese-shape-border)), calc(100% - var(--greese-shape-n) - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-n) + var(--greese-shape-border)) calc(var(--greese-shape-border)));
+  }
+  .greese-shape-ticket-mark:focus-visible {
+    --greese-shape-n: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+  .greese-Avatar:not(.greese-AvatarGroup-item > .greese-Avatar):focus-visible,
+  .greese-Status:not(.greese-Status--pulse):focus-visible {
+    --greese-shape-n: 0px;
+    --greese-shape-bleed: 8px;
+  }
+  .greese-shape-ticket-tab,
+  .greese-Tab {
+    --greese-shape-r: 4px;
+    --greese-shape-border: 1px;
+    --greese-shape-clip: polygon(calc(-1 * var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(-1 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(100% - var(--greese-shape-r) + 1.02 * var(--greese-shape-bleed)) 50%, calc(100% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(100% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(100% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(100% + var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(100% + var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% + var(--greese-shape-r) - 0.821 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% + 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% + 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)), calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% + 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)), calc(var(--greese-shape-r) - 1.02 * var(--greese-shape-bleed)) 50%, calc(0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-bleed)) calc(50% - 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-bleed)), calc(0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-bleed)) calc(50% - 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-bleed)), calc(0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-bleed)) calc(50% - 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-bleed)), calc(-1 * var(--greese-shape-bleed)) calc(50% - var(--greese-shape-r) + 0.821 * var(--greese-shape-bleed)));
+    --greese-shape-ring-clip: polygon(evenodd, 0 0, 100% 0, 100% calc(50% - var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(100% - 0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(100% - var(--greese-shape-r)) 50%, calc(100% - 0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(100% - 0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(100% - 0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), 100% calc(50% + var(--greese-shape-r)), 100% 100%, 0 100%, 0 calc(50% + var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% + 0.924 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% + 0.707 * var(--greese-shape-r)), calc(0.924 * var(--greese-shape-r)) calc(50% + 0.383 * var(--greese-shape-r)), calc(var(--greese-shape-r)) 50%, calc(0.924 * var(--greese-shape-r)) calc(50% - 0.383 * var(--greese-shape-r)), calc(0.707 * var(--greese-shape-r)) calc(50% - 0.707 * var(--greese-shape-r)), calc(0.383 * var(--greese-shape-r)) calc(50% - 0.924 * var(--greese-shape-r)), 0 calc(50% - var(--greese-shape-r)), 0 0, calc(var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(var(--greese-shape-r) + 1.02 * var(--greese-shape-border)) 50%, calc(0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(100% - var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% + var(--greese-shape-r) + 0.821 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% + 0.924 * var(--greese-shape-r) + 0.942 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% + 0.707 * var(--greese-shape-r) + 0.721 * var(--greese-shape-border)), calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% + 0.383 * var(--greese-shape-r) + 0.39 * var(--greese-shape-border)), calc(100% - var(--greese-shape-r) - 1.02 * var(--greese-shape-border)) 50%, calc(100% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)) calc(50% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)), calc(100% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)) calc(50% - 0.707 * var(--greese-shape-r) - 0.721 * var(--greese-shape-border)), calc(100% - 0.383 * var(--greese-shape-r) - 0.39 * var(--greese-shape-border)) calc(50% - 0.924 * var(--greese-shape-r) - 0.942 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(50% - var(--greese-shape-r) - 0.821 * var(--greese-shape-border)), calc(100% - var(--greese-shape-border)) calc(var(--greese-shape-border)), calc(var(--greese-shape-border)) calc(var(--greese-shape-border)));
+  }
+  .greese-shape-ticket-tab:focus-visible {
+    --greese-shape-r: 0px;
+    --greese-shape-bleed: 8px;
+    transition-delay: 0s, 0s, 0s, var(--greese-duration-normal);
+  }
+}