@techfides/ui-library-design 0.1.0

package/css/theme.css

@@ -0,0 +1,1640 @@
+:root,
+[data-brand='techfides'] {
+  --tf-accent: #0075c9;
+  --tf-accent-ceiling: 0.169;
+}
+
+[data-brand='tech-it-out'] {
+  --tf-accent: #84bd23;
+  --tf-accent-ceiling: 0.158;
+}
+
+[data-brand='rtsg'] {
+  --tf-accent: #eb7500;
+  --tf-accent-ceiling: 0.152;
+}
+
+[data-brand='digital-boost-group'] {
+  --tf-accent: #995fd2;
+  --tf-accent-ceiling: 0.275;
+}
+
+@layer base {
+  html {
+    background-color: var(--color-tf-bg);
+    color: var(--color-tf-fg);
+    color-scheme: dark;
+    font-family: var(--font-tf-body);
+    scrollbar-gutter: stable;
+  }
+}
+
+@theme static inline {
+  --ceiling-tf-accent: var(--tf-accent-ceiling);
+
+  --color-tf-accent: var(--tf-accent);
+  --color-tf-accent-hi: oklch(from var(--tf-accent) 0.73 c h);
+  --color-tf-accent-surface: oklch(from var(--tf-accent) 0.55 c h);
+  --color-tf-accent-deep: oklch(from var(--tf-accent) 0.45 c h);
+  --color-tf-on-accent: #ffffff;
+
+  --color-tf-accent-tint: color-mix(
+    in oklab,
+    var(--tf-accent) var(--tf-tint),
+    var(--color-tf-surface)
+  );
+  --color-tf-accent-edge: color-mix(
+    in oklab,
+    var(--tf-accent) var(--tf-edge),
+    var(--color-tf-surface)
+  );
+}
+
+@theme static {
+  --color-tf-bg: #08090e;
+  --color-tf-surface: #14161d;
+  --color-tf-panel: rgb(255 255 255 / 6.5%);
+  --color-tf-panel-2: rgb(255 255 255 / 3%);
+  --color-tf-panel-hi: rgb(255 255 255 / 8.5%);
+  --color-tf-glass: rgb(255 255 255 / 6.5%);
+
+  --color-tf-sunken: rgb(0 0 0 / 26%);
+  --color-tf-sunken-hi: rgb(0 0 0 / 20%);
+  --color-tf-sunken-quiet: rgb(0 0 0 / 34%);
+  --color-tf-control: rgb(255 255 255 / 9%);
+  --color-tf-control-hi: rgb(255 255 255 / 12%);
+
+  --color-tf-surface-hi: color-mix(in oklab, #fff 4.5%, var(--color-tf-surface));
+  --color-tf-surface-quiet: color-mix(in oklab, var(--color-tf-bg) 55%, var(--color-tf-surface));
+  --color-tf-shade-under: color-mix(in oklab, var(--color-tf-bg) 38%, transparent);
+  --color-tf-shade-deep: color-mix(in oklab, var(--color-tf-bg) 62%, transparent);
+  --color-tf-scrim: color-mix(in oklab, var(--color-tf-bg) 54%, transparent);
+  --color-tf-line: rgb(255 255 255 / 11%);
+  --color-tf-line-2: rgb(255 255 255 / 6.5%);
+  --color-tf-line-hi: rgb(255 255 255 / 18%);
+  --color-tf-fg: #eef1f6;
+  --color-tf-fg-held: color-mix(in oklab, #eef1f6 82%, var(--color-tf-bg));
+  --color-tf-muted: #98a1b2;
+
+  --color-tf-success: oklch(0.55 0.19 133);
+  --color-tf-success-hi: oklch(0.73 0.195 133);
+  --color-tf-warning: oklch(0.6 0.13 70);
+  --color-tf-warning-hi: oklch(0.73 0.158 70);
+  --color-tf-info: oklch(0.55 0.196 243);
+  --color-tf-info-hi: oklch(0.73 0.156 243);
+  --color-tf-danger: oklch(0.55 0.241 27);
+  --color-tf-danger-hi: oklch(0.73 0.17 27);
+  --color-tf-on-semantic: #ffffff;
+
+  --ceiling-tf-success: 0.169;
+  --ceiling-tf-warning: 0.13;
+  --ceiling-tf-info: 0.145;
+  --ceiling-tf-danger: 0.244;
+
+  --tf-tint: 15%;
+  --tf-edge: 32%;
+  --tf-edge-rest: 32%;
+
+  --tf-rest-angle: 110deg;
+  --tf-rest-waist: 33%;
+  --tf-mixed-angle: 150deg;
+  --tf-mixed-waist: 24%;
+  --tf-milk-reach: 34%;
+  --tf-pressed-angle: 124deg;
+  --tf-fall-angle: 180deg;
+
+  --tf-glass-flat:
+    linear-gradient(var(--color-tf-glass), var(--color-tf-glass)), var(--color-tf-bg);
+  --tf-rise-angle: 290deg;
+
+  --color-tf-success-tint: color-mix(
+    in oklab,
+    var(--color-tf-success) var(--tf-tint),
+    var(--color-tf-surface)
+  );
+  --color-tf-success-edge: color-mix(
+    in oklab,
+    var(--color-tf-success) var(--tf-edge),
+    var(--color-tf-surface)
+  );
+  --color-tf-warning-tint: color-mix(
+    in oklab,
+    var(--color-tf-warning) var(--tf-tint),
+    var(--color-tf-surface)
+  );
+  --color-tf-warning-edge: color-mix(
+    in oklab,
+    var(--color-tf-warning) var(--tf-edge),
+    var(--color-tf-surface)
+  );
+  --color-tf-info-tint: color-mix(
+    in oklab,
+    var(--color-tf-info) var(--tf-tint),
+    var(--color-tf-surface)
+  );
+  --color-tf-info-edge: color-mix(
+    in oklab,
+    var(--color-tf-info) var(--tf-edge),
+    var(--color-tf-surface)
+  );
+  --color-tf-danger-tint: color-mix(
+    in oklab,
+    var(--color-tf-danger) var(--tf-tint),
+    var(--color-tf-surface)
+  );
+  --color-tf-danger-wash: color-mix(in oklab, var(--color-tf-danger) var(--tf-tint), transparent);
+  --color-tf-danger-edge: color-mix(
+    in oklab,
+    var(--color-tf-danger) var(--tf-edge),
+    var(--color-tf-surface)
+  );
+
+  --font-tf-display: 'Poppins', system-ui, sans-serif;
+  --font-tf-body: 'Inter Variable', 'Inter', system-ui, sans-serif;
+
+  --text-tf-display: clamp(38px, 4.5vw, 54px);
+  --text-tf-display--line-height: 1.04;
+  --text-tf-h1: clamp(32px, 4vw, 44px);
+  --text-tf-h1--line-height: 1.05;
+  --text-tf-h2: 28px;
+  --text-tf-h2--line-height: 1.08;
+  --text-tf-h3: 23px;
+  --text-tf-h3--line-height: 1.12;
+  --text-tf-h4: 20px;
+  --text-tf-h4--line-height: 1.2;
+  --text-tf-figure: clamp(22px, 9cqw, 31px);
+  --text-tf-figure--line-height: 1.15;
+  --text-tf-unit: clamp(14px, 5cqw, 17px);
+  --text-tf-unit--line-height: 1.4;
+  --text-tf-lead: 18px;
+  --text-tf-lead--line-height: 1.65;
+  --text-tf-body: 15px;
+  --text-tf-body--line-height: 1.7;
+  --text-tf-body-sm: 14px;
+  --text-tf-body-sm--line-height: 1.7;
+  --text-tf-caption: 13px;
+  --text-tf-caption--line-height: 1.6;
+  --text-tf-caption-sm: 12px;
+  --text-tf-caption-sm--line-height: 1.6;
+
+  --tracking-tf-tight: -0.022em;
+  --tracking-tf-eyebrow: 0.12em;
+
+  --breakpoint-*: initial;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+
+  --container-*: initial;
+  --max-width-*: initial;
+  --container-tf-panel: 24rem;
+  --container-tf-list: 26rem;
+  --container-tf-measure: 65ch;
+  --container-tf-page: 56rem;
+  --container-tf-canvas: 100rem;
+
+  --spacing-tf-hairline: 1px;
+
+  --spacing-tf-control-2xs: 1.5rem;
+  --spacing-tf-control-xs: 2rem;
+  --spacing-tf-control-sm: 2.5rem;
+  --spacing-tf-control-md: 3rem;
+  --spacing-tf-control-lg: 3.5rem;
+
+  --spacing-tf-row: 2.25rem;
+  --spacing-tf-chip-sm: 1.5rem;
+  --spacing-tf-target: 3rem;
+
+  --spacing-tf-menu: 12rem;
+  --spacing-tf-sidebar: 17rem;
+  --spacing-tf-rail: 5rem;
+
+  --spacing-tf-icon-2xs: 0.875rem;
+  --spacing-tf-icon-xs: 1rem;
+  --spacing-tf-icon-sm: 1.125rem;
+  --spacing-tf-icon-md: 1.25rem;
+  --spacing-tf-icon-lg: 1.375rem;
+
+  --spacing-tf-icon-solo-xs: 1rem;
+  --spacing-tf-icon-solo-sm: 1.25rem;
+  --spacing-tf-icon-solo-md: 1.375rem;
+  --spacing-tf-icon-solo-lg: 1.5rem;
+
+  --spacing-tf-mark-glyph: 0.875rem;
+  --spacing-tf-mark-dot: 0.625rem;
+  --spacing-tf-mark-track: 0.375rem;
+  --spacing-tf-mark-inset: 0.1875rem;
+
+  --tf-mark-path: 23;
+  --tf-icon-stroke: 2.75;
+  --tf-icon-stroke-solo: 3;
+
+  --blur-tf-panel: 16px;
+  --blur-tf-glass: 16px;
+  --blur-tf-scrim: 6px;
+  --blur-tf-cloud-md: 14px;
+  --blur-tf-cloud-tight: 10px;
+  --blur-tf-cloud-wide: 32px;
+
+  --radius-tf-none: 0;
+  --radius-tf-inline: 0.375rem;
+  --radius-tf-control: 0.625rem;
+  --radius-tf-block: 0.75rem;
+  --radius-tf-card: 1rem;
+  --radius-tf-pill: 9999px;
+
+  --shadow-tf-float: 0 18px 44px -18px rgb(0 0 0 / 88%);
+  --shadow-tf-mark: 0 1px 2px rgb(0 0 0 / 40%);
+
+  --ease-tf: cubic-bezier(0.16, 0.8, 0.3, 1);
+  --ease-tf-spring: cubic-bezier(0.34, 1.56, 0.5, 1);
+  --ease-tf-glide: cubic-bezier(0.45, 0.05, 0.35, 1);
+  --ease-tf-settle: cubic-bezier(0.32, 1.36, 0.58, 1);
+
+  --tf-z-raised: 10;
+  --tf-z-dropdown: 20;
+  --tf-z-tooltip: 30;
+  --tf-z-modal: 40;
+  --tf-z-toast: 50;
+
+  --tf-duration-1: 140ms;
+  --tf-duration-2: 240ms;
+  --tf-duration-3: 600ms;
+  --tf-duration-4: 700ms;
+
+  --tf-marquee-pace: calc(var(--spacing-tf-icon-solo-lg) * (1s / var(--tf-duration-3)));
+
+  --tf-sweep-duration: calc(var(--tf-duration-3) * 30);
+  --tf-twinkle-duration: calc(var(--tf-duration-3) * 26);
+  --tf-pulse-duration: calc(var(--tf-duration-3) * 3);
+
+  --tf-timing-quick: var(--tf-duration-1) var(--ease-tf);
+  --tf-timing-glide: var(--tf-duration-2) var(--ease-tf-glide);
+  --tf-timing-drift: var(--tf-duration-3) var(--ease-tf-glide);
+  --tf-timing-trail: var(--tf-duration-4) var(--ease-tf-glide);
+  --tf-timing-spring: var(--tf-duration-2) var(--ease-tf-spring);
+  --tf-timing-settle: var(--tf-duration-2) var(--ease-tf-settle);
+
+  --tf-blend-timing: var(--tf-timing-glide);
+  --tf-shadow-timing: var(--tf-timing-glide);
+  --tf-move-timing: var(--tf-timing-quick);
+  --tf-weather-timing: var(--tf-timing-drift);
+  --tf-ink-timing: var(--tf-timing-quick);
+
+  --tf-cloud-blur: var(--blur-tf-cloud-md);
+
+  --animate-tf-blend-in: tf-blend-in var(--tf-duration-2) var(--ease-tf-glide);
+  --animate-tf-arrive: tf-arrive var(--tf-duration-2) var(--ease-tf) both;
+  --animate-tf-depart: tf-depart var(--tf-duration-1) var(--ease-tf) both;
+  --animate-tf-in: tf-in var(--tf-duration-2) var(--ease-tf) both;
+  --animate-tf-out: tf-out var(--tf-duration-1) var(--ease-tf) both;
+  --animate-tf-chip-in: tf-chip-in var(--tf-duration-2) var(--ease-tf-glide) both;
+  --animate-tf-chip-out: tf-chip-out var(--tf-duration-2) var(--ease-tf-glide) both;
+  --animate-tf-chip-out-auto: tf-chip-out-auto var(--tf-duration-2) var(--ease-tf-glide) both;
+  --animate-tf-rewind: tf-back var(--tf-duration-2) var(--ease-tf) reverse both;
+  --animate-tf-lift: tf-lift var(--tf-duration-2) var(--ease-tf) both;
+  --animate-tf-lift-rewind: tf-lift-back var(--tf-duration-2) var(--ease-tf) reverse both;
+  --animate-tf-drawer: tf-drawer var(--tf-duration-2) var(--ease-tf) both;
+  --animate-tf-drawer-rewind: tf-drawer-back var(--tf-duration-2) var(--ease-tf) reverse both;
+  --animate-tf-expand: tf-expand var(--tf-duration-2) var(--ease-tf) both;
+  --animate-tf-collapse: tf-collapse var(--tf-duration-1) var(--ease-tf) both;
+  --animate-tf-shake: tf-shake var(--tf-duration-2) var(--ease-tf);
+  --animate-tf-pop: tf-pop var(--tf-duration-2) var(--ease-tf-spring) both;
+  --animate-tf-nudge: tf-nudge var(--tf-duration-2) var(--ease-tf-spring);
+  --animate-tf-fade-in: tf-fade-in var(--tf-duration-2) var(--ease-tf) both;
+  --animate-tf-fade-out: tf-fade-out var(--tf-duration-1) var(--ease-tf) both;
+  --animate-tf-fade-rewind: tf-fade-back var(--tf-duration-2) var(--ease-tf) reverse both;
+  --animate-tf-rise: tf-rise var(--tf-duration-2) var(--ease-tf-glide);
+  --animate-tf-draw: tf-draw var(--tf-duration-2) var(--ease-tf-glide);
+  --animate-tf-page: tf-page var(--tf-duration-2) var(--ease-tf-glide);
+  --animate-tf-page-again: tf-page-again var(--tf-duration-2) var(--ease-tf-glide);
+}
+
+@keyframes tf-blend-in {
+  0% {
+    --tf-blend-lead: var(--tf-rest-lead);
+    --tf-blend-mid: var(--tf-rest-mid);
+    --tf-blend-trail: var(--tf-rest-trail);
+    --tf-blend-angle: var(--tf-rest-angle);
+    --tf-blend-waist: var(--tf-rest-waist);
+    --tf-milk: transparent;
+  }
+
+  30% {
+    --tf-blend-lead: color-mix(in oklab, var(--tf-flare) 30%, var(--tf-rest-lead));
+    --tf-blend-mid: color-mix(in oklab, var(--tf-vivid) 42%, var(--tf-rest-mid));
+    --tf-blend-trail: color-mix(in oklab, var(--tf-abyss) 30%, var(--tf-rest-trail));
+  }
+
+  65% {
+    --tf-blend-lead: color-mix(in oklab, var(--tf-flare) 72%, var(--tf-rest-lead));
+    --tf-blend-mid: color-mix(in oklab, var(--tf-vivid) 80%, var(--tf-rest-mid));
+    --tf-blend-trail: color-mix(in oklab, var(--tf-abyss) 72%, var(--tf-rest-trail));
+  }
+
+  100% {
+    --tf-blend-lead: var(--tf-flare);
+    --tf-blend-mid: var(--tf-vivid);
+    --tf-blend-trail: var(--tf-abyss);
+    --tf-blend-angle: var(--tf-mixed-angle);
+    --tf-blend-waist: var(--tf-mixed-waist);
+  }
+}
+
+@keyframes tf-sweep {
+  to {
+    --tf-sweep: 360deg;
+  }
+}
+
+@keyframes tf-twinkle {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes tf-marquee {
+  to {
+    translate: var(--marquee-translate);
+  }
+}
+
+@keyframes tf-breathe {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes tf-ring-ping {
+  0% {
+    scale: 1;
+    opacity: 0.55;
+  }
+
+  70%,
+  100% {
+    scale: 2.6;
+    opacity: 0;
+  }
+}
+
+@keyframes tf-edge-pulse {
+  50% {
+    opacity: var(--tf-edge-rest);
+  }
+}
+
+@keyframes tf-in {
+  from {
+    opacity: 0;
+    scale: 0.96;
+  }
+}
+
+@keyframes tf-back {
+  0% {
+    opacity: 0;
+    scale: 0.96;
+  }
+}
+
+@keyframes tf-lift {
+  from {
+    opacity: 0;
+    scale: 0.96;
+    translate: 0 calc(var(--spacing) * 3);
+  }
+}
+
+@keyframes tf-lift-back {
+  0% {
+    opacity: 0;
+    scale: 0.96;
+    translate: 0 calc(var(--spacing) * 3);
+  }
+}
+
+@keyframes tf-drawer {
+  from {
+    opacity: 0;
+    translate: -100% 0;
+  }
+}
+
+@keyframes tf-drawer-back {
+  0% {
+    opacity: 0;
+    translate: -100% 0;
+  }
+}
+
+@keyframes tf-arrive {
+  from {
+    opacity: 0;
+    scale: 0.96;
+    translate: var(--tf-arrive, 0);
+  }
+}
+
+@keyframes tf-depart {
+  to {
+    opacity: 0;
+    scale: 0.96;
+    translate: var(--tf-arrive, 0);
+  }
+}
+
+@keyframes tf-out {
+  to {
+    opacity: 0;
+    scale: 0.96;
+  }
+}
+
+@keyframes tf-chip-in {
+  from {
+    width: 0;
+    padding-inline: 0;
+    margin-inline-end: calc(var(--tf-chip-gap, 0px) * -1);
+    opacity: 0;
+    scale: 0.96;
+    overflow: hidden;
+  }
+
+  99% {
+    overflow: hidden;
+  }
+}
+
+@keyframes tf-chip-out {
+  from {
+    width: var(--tf-chip-width);
+  }
+
+  to {
+    width: 0;
+    padding-inline: 0;
+    margin-inline-end: calc(var(--tf-chip-gap, 0px) * -1);
+    opacity: 0;
+    scale: 0.96;
+  }
+}
+
+@keyframes tf-chip-out-auto {
+  from {
+    width: auto;
+  }
+
+  to {
+    width: 0;
+    padding-inline: 0;
+    margin-inline-end: calc(var(--tf-chip-gap, 0px) * -1);
+    opacity: 0;
+    scale: 0.96;
+  }
+}
+
+@keyframes tf-expand {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+
+  to {
+    height: var(--height);
+    opacity: 1;
+  }
+}
+
+@keyframes tf-collapse {
+  from {
+    height: var(--height);
+    opacity: 1;
+  }
+
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes tf-pop {
+  from {
+    scale: 0.88;
+  }
+}
+
+@keyframes tf-rise {
+  from {
+    translate: 0 calc(var(--spacing) * 1.5);
+  }
+}
+
+@keyframes tf-draw {
+  from {
+    scale: 0 1;
+  }
+}
+
+@keyframes tf-page {
+  from {
+    opacity: 0;
+    translate: var(--tf-page-from, 0) 0;
+  }
+}
+
+@keyframes tf-page-again {
+  from {
+    opacity: 0;
+    translate: var(--tf-page-from, 0) 0;
+  }
+}
+
+@keyframes tf-tally {
+  from {
+    --tf-tally: 0;
+  }
+}
+
+@keyframes tf-nudge {
+  40% {
+    scale: 1.08;
+  }
+}
+
+@keyframes tf-shake {
+  20% {
+    translate: -6px 0;
+  }
+
+  40% {
+    translate: 5px 0;
+  }
+
+  60% {
+    translate: -3px 0;
+  }
+
+  80% {
+    translate: 2px 0;
+  }
+}
+
+@keyframes tf-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes tf-fade-back {
+  0% {
+    opacity: 0;
+  }
+}
+
+@keyframes tf-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --tf-duration-1: 0.01ms;
+    --tf-duration-2: 0.01ms;
+    --tf-duration-3: 0.01ms;
+    --tf-duration-4: 0.01ms;
+  }
+}
+
+@custom-variant interactive (&:not(:disabled):not([aria-disabled='true']):not([data-disabled]));
+
+@custom-variant hovered (&:hover, &[data-hover]);
+
+@custom-variant pressed (&:active, &[data-active]);
+
+@custom-variant focused (&:focus-visible, &[data-focus-visible]);
+
+@custom-variant reached (&:focus-within, &[data-reached]);
+
+@custom-variant asleep (
+  &:has(:placeholder-shown, [data-placeholder-shown]):not(:focus-within):not([data-reached]):not([data-state='open'])
+);
+
+@property --tf-blend-lead {
+  syntax: '<color>';
+  initial-value: transparent;
+  inherits: true;
+}
+
+@property --tf-blend-mid {
+  syntax: '<color>';
+  initial-value: transparent;
+  inherits: true;
+}
+
+@property --tf-blend-trail {
+  syntax: '<color>';
+  initial-value: transparent;
+  inherits: true;
+}
+
+@property --tf-blend-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: true;
+}
+
+@property --tf-blend-waist {
+  syntax: '<percentage>';
+  initial-value: 50%;
+  inherits: true;
+}
+
+@property --tf-weather-near {
+  syntax: '<color>';
+  initial-value: transparent;
+  inherits: true;
+}
+
+@property --tf-weather-far {
+  syntax: '<color>';
+  initial-value: transparent;
+  inherits: true;
+}
+
+@property --tf-weather-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: true;
+}
+
+@property --tf-weather-x {
+  syntax: '<percentage>';
+  initial-value: 50%;
+  inherits: true;
+}
+
+@property --tf-weather-y {
+  syntax: '<percentage>';
+  initial-value: 50%;
+  inherits: true;
+}
+
+@property --tf-milk {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: transparent;
+}
+
+@property --tf-label-lead {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --tf-label-mid {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --tf-label-trail {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --tf-nudge {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --tf-tally {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tf-plate {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --tf-ring-base {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --tf-ring-bloom {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --tf-sweep {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@property --tf-ceiling {
+  syntax: '<number>';
+  initial-value: 0.145;
+  inherits: true;
+}
+
+@property --tf-marquee-run {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: true;
+}
+
+@property --tf-marquee-pace {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: true;
+}
+
+@property --tf-fade-head {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: false;
+}
+
+@property --tf-fade-foot {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: false;
+}
+
+@property --tf-marquee-rate {
+  syntax: '<number>';
+  initial-value: 1;
+  inherits: true;
+}
+
+@utility tf-transition {
+  transition:
+    var(--tf-widen, color var(--tf-ink-timing)),
+    background-color var(--tf-timing-quick),
+    border-color var(--tf-timing-quick),
+    outline-color var(--tf-timing-quick),
+    box-shadow var(--tf-shadow-timing),
+    transform var(--tf-move-timing),
+    scale var(--tf-move-timing),
+    translate var(--tf-slide-timing, var(--tf-move-timing)),
+    rotate var(--tf-move-timing),
+    var(--tf-travel, opacity var(--tf-timing-quick)),
+    --tf-label-lead var(--tf-move-timing),
+    --tf-label-mid var(--tf-move-timing),
+    --tf-label-trail var(--tf-move-timing),
+    --tf-blend-lead var(--tf-blend-timing),
+    --tf-blend-mid var(--tf-blend-timing),
+    --tf-blend-trail var(--tf-blend-timing),
+    --tf-blend-angle var(--tf-blend-timing),
+    --tf-blend-waist var(--tf-blend-timing),
+    --tf-weather-near var(--tf-weather-timing),
+    --tf-weather-far var(--tf-weather-timing),
+    --tf-weather-angle var(--tf-weather-timing),
+    --tf-weather-x var(--tf-weather-timing),
+    --tf-weather-y var(--tf-weather-timing),
+    --tf-nudge var(--tf-timing-quick),
+    --tf-plate var(--tf-timing-glide),
+    --tf-ring-base var(--tf-blend-timing),
+    --tf-ring-bloom var(--tf-blend-timing),
+    --tf-milk var(--tf-blend-timing);
+}
+
+@utility blend-tf-* {
+  --tf-base: --value(--color-tf-*);
+  --tf-ceiling: --value(--ceiling-tf-*);
+}
+
+@utility tf-ramp {
+  --tf-blend-lead: var(--tf-rest-lead);
+  --tf-blend-mid: var(--tf-rest-mid);
+  --tf-blend-trail: var(--tf-rest-trail);
+  --tf-blend-angle: var(--tf-rest-angle);
+  --tf-blend-waist: var(--tf-rest-waist);
+
+  background-image:
+    linear-gradient(var(--tf-blend-angle), var(--tf-milk) 0%, transparent var(--tf-milk-reach)),
+    linear-gradient(
+      var(--tf-blend-angle),
+      var(--tf-blend-lead) 0%,
+      var(--tf-blend-mid) var(--tf-blend-waist),
+      var(--tf-blend-trail) 100%
+    );
+}
+
+@utility tf-fill-scale {
+  --tf-lift: oklch(from var(--tf-base) 0.6 min(calc(var(--tf-c, c) * 1.1), var(--tf-ceiling)) h);
+  --tf-vivid: oklch(
+    from var(--tf-base) 0.51 min(calc(var(--tf-c, c) * 1.05), calc(var(--tf-ceiling) * 0.85)) h
+  );
+  --tf-deep: oklch(from var(--tf-base) 0.42 min(c, calc(var(--tf-ceiling) * 0.7)) h);
+  --tf-flare: oklch(
+    from var(--tf-base) 0.68 min(calc(var(--tf-c, c) * 1.1), calc(var(--tf-ceiling) * 0.77)) h
+  );
+  --tf-abyss: oklch(from var(--tf-base) 0.33 min(c, calc(var(--tf-ceiling) * 0.55)) h);
+}
+
+@utility bg-tf-blend {
+  @apply tf-fill-scale;
+
+  --tf-rest-lead: var(--tf-lift);
+  --tf-rest-mid: color-mix(in oklab, var(--tf-lift) 62%, var(--tf-deep));
+  --tf-rest-trail: var(--tf-deep);
+
+  @apply tf-ramp;
+}
+
+@utility bg-tf-blend-rise {
+  @apply bg-tf-blend;
+
+  --tf-blend-angle: var(--tf-rise-angle);
+}
+
+@utility tf-ink-scale {
+  --tf-lift: oklch(from var(--tf-base) 0.88 calc(var(--tf-c, c) * 1.1) h);
+  --tf-vivid: oklch(from var(--tf-base) 0.82 calc(var(--tf-c, c) * 1.3) h);
+  --tf-deep: oklch(from var(--tf-base) 0.7 c h);
+  --tf-flare: oklch(from var(--tf-base) 0.92 calc(var(--tf-c, c) * 1.15) h);
+  --tf-abyss: oklch(from var(--tf-base) 0.66 calc(var(--tf-c, c) * 1.05) h);
+}
+
+@utility text-tf-blend {
+  @apply tf-ink-scale;
+
+  --tf-rest-lead: var(--color-tf-fg);
+  --tf-rest-mid: var(--color-tf-fg);
+  --tf-rest-trail: var(--color-tf-fg);
+
+  @apply tf-ramp;
+  background-clip: text;
+  color: transparent;
+  text-box-trim: trim-start;
+}
+
+@utility tf-label-ramp {
+  --tf-blend-angle: var(--tf-rest-angle);
+  --tf-blend-waist: var(--tf-rest-waist);
+
+  background-image: linear-gradient(
+    var(--tf-blend-angle),
+    var(--tf-label-lead) 0%,
+    var(--tf-label-mid) var(--tf-blend-waist),
+    var(--tf-label-trail) 100%
+  );
+  background-clip: text;
+  color: transparent;
+  text-box-trim: trim-start;
+}
+
+@utility tf-label-quiet {
+  --tf-label-lead: var(--color-tf-muted);
+  --tf-label-mid: var(--color-tf-muted);
+  --tf-label-trail: var(--color-tf-muted);
+}
+
+@utility tf-label-lit {
+  --tf-label-lead: var(--tf-label-ink, oklch(from var(--tf-base) 0.73 c h));
+  --tf-label-mid: var(--tf-label-ink, oklch(from var(--tf-base) 0.73 c h));
+  --tf-label-trail: var(--tf-label-ink, oklch(from var(--tf-base) 0.73 c h));
+}
+
+@utility tf-label-failed {
+  --tf-label-ink: var(--color-tf-danger-hi);
+}
+
+@utility tf-label-inked {
+  @apply tf-ink-scale;
+
+  --tf-label-lead: var(--tf-flare);
+  --tf-label-mid: var(--tf-vivid);
+  --tf-label-trail: var(--tf-abyss);
+  --tf-blend-angle: var(--tf-mixed-angle);
+  --tf-blend-waist: var(--tf-mixed-waist);
+}
+
+@utility tf-moves-glide {
+  --tf-move-timing: var(--tf-timing-glide);
+}
+
+@utility tf-moves-spring {
+  --tf-move-timing: var(--tf-timing-spring);
+}
+
+@utility tf-slides-spring {
+  --tf-slide-timing: var(--tf-timing-spring);
+}
+
+@utility tf-slides-settle {
+  --tf-slide-timing: var(--tf-timing-settle);
+}
+
+@utility tf-crossfades {
+  transition:
+    opacity var(--tf-timing-glide),
+    visibility var(--tf-timing-glide);
+}
+
+@utility tf-grows {
+  transition: grid-template-rows var(--tf-timing-glide);
+}
+
+@utility tf-arrives {
+  transition: opacity var(--tf-timing-glide);
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+@utility tf-resizes {
+  transition: height var(--tf-timing-glide);
+}
+
+@utility tf-unfolds {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+  transition: grid-template-rows var(--tf-timing-glide);
+
+  & > * {
+    min-height: 0;
+  }
+
+  @starting-style {
+    grid-template-rows: minmax(0, 0fr);
+  }
+}
+
+@utility tf-rails {
+  --tf-widen:
+    width var(--tf-timing-glide), height var(--tf-timing-glide),
+    inset-inline-start var(--tf-timing-glide), inset-inline-end var(--tf-timing-glide),
+    padding-inline-start var(--tf-timing-glide), padding-inline-end var(--tf-timing-glide),
+    column-gap var(--tf-timing-glide), row-gap var(--tf-timing-glide),
+    flex-grow var(--tf-timing-glide), color var(--tf-ink-timing);
+}
+
+@utility tf-travels {
+  --tf-travel:
+    opacity var(--tf-timing-quick), inset-inline-start var(--tf-move-timing),
+    left var(--tf-move-timing), right var(--tf-move-timing);
+}
+
+@utility tf-ink-glide {
+  --tf-ink-timing: var(--tf-timing-glide);
+}
+
+@utility text-tf-unit {
+  @apply text-tf-blend;
+
+  --tf-rest-lead: var(--color-tf-muted);
+  --tf-rest-mid: var(--color-tf-muted);
+  --tf-rest-trail: var(--color-tf-muted);
+}
+
+@utility tf-ink-well {
+  @apply tf-ink-scale;
+
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+@utility stroke-tf-ink {
+  & svg :is(path, circle, rect, line, polyline, polygon, ellipse) {
+    stroke: var(--tf-ink);
+  }
+}
+
+@utility tf-blend-outline {
+  @apply tf-ink-scale;
+
+  @apply tf-ring-scale;
+
+  --tf-outline-lift: var(--tf-ring-lit-bloom);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    padding: 1px;
+    border-radius: inherit;
+    background-image: linear-gradient(
+      var(--tf-blend-angle),
+      var(--tf-outline-lift) 0%,
+      color-mix(in oklab, var(--tf-outline-lift) 83%, var(--tf-deep)) var(--tf-blend-waist),
+      color-mix(in oklab, var(--tf-outline-lift) 67%, var(--tf-deep)) 100%
+    );
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    opacity: var(--tf-edge-rest);
+    transition: opacity var(--tf-duration-3) var(--ease-tf);
+    pointer-events: none;
+  }
+}
+
+@utility tf-scroll-hidden {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+@utility tf-chip-arrives {
+  animation: var(--animate-tf-in);
+
+  @supports (interpolate-size: allow-keywords) {
+    interpolate-size: allow-keywords;
+    animation: var(--animate-tf-chip-in);
+  }
+}
+
+@utility tf-chip-departs {
+  animation: var(--animate-tf-chip-out);
+
+  @supports (interpolate-size: allow-keywords) {
+    interpolate-size: allow-keywords;
+    animation: var(--animate-tf-chip-out-auto);
+  }
+}
+
+@utility tf-scroll-faded {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent var(--tf-fade-head, 0px),
+    #000 calc(var(--tf-fade-head, 0px) + var(--spacing)),
+    #000 calc(100% - var(--tf-fade-foot, 0px)),
+    transparent 100%
+  );
+}
+
+@utility tf-fades {
+  transition:
+    --tf-fade-head var(--tf-timing-glide),
+    --tf-fade-foot var(--tf-timing-glide);
+}
+
+@utility tf-scroll-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-tf-line-hi) transparent;
+
+  &::-webkit-scrollbar {
+    width: calc(var(--spacing) * 1);
+    height: calc(var(--spacing) * 1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: var(--radius-tf-inline);
+    background-color: var(--color-tf-line-hi);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+@utility tf-menu-width {
+  min-width: max(var(--reference-width, 0px), var(--spacing-tf-menu));
+}
+
+@utility tf-glass-plate {
+  background-color: color-mix(in oklab, var(--tf-base) 26%, transparent);
+}
+
+@utility tf-glass-plate-lit {
+  background-color: color-mix(in oklab, var(--tf-base) 38%, transparent);
+}
+
+@utility tf-tinted {
+  background-color: color-mix(in oklab, var(--tf-base) var(--tf-tint), var(--color-tf-surface));
+}
+
+@utility tf-glow {
+  box-shadow:
+    var(--tf-inner-light, 0 0 #0000),
+    var(--tf-cast-shadow, 0 0 #0000),
+    0 0 18px -2px color-mix(in oklab, var(--tf-flare) var(--tf-glow-strength, 42%), transparent);
+}
+
+@utility tf-lit-inside {
+  --tf-inner-light: inset 0 1px 0 rgb(255 255 255 / 20%);
+}
+
+@utility tf-inner-lit {
+  @apply tf-lit-rest;
+
+  box-shadow: var(--tf-inner-light);
+}
+
+@utility tf-raised {
+  --tf-cast-shadow: 0 7px 16px -7px color-mix(in oklab, var(--tf-flare) 55%, transparent);
+  --tf-glow-strength: 30%;
+}
+
+@utility tf-lit-rest {
+  --tf-inner-light: inset 0 1px 0 rgb(255 255 255 / 12%);
+}
+
+@utility tf-settled {
+  --tf-cast-shadow: 0 1px 2px rgb(0 0 0 / 34%), 0 6px 14px -6px rgb(0 0 0 / 46%);
+  --tf-glow-strength: 0%;
+}
+
+@utility tf-settled-quiet {
+  --tf-cast-shadow: 0 1px 2px rgb(0 0 0 / 28%);
+  --tf-glow-strength: 0%;
+}
+
+@utility tf-lifted {
+  --tf-cast-shadow: 0 2px 4px rgb(0 0 0 / 32%), 0 12px 26px -10px rgb(0 0 0 / 50%);
+  --tf-glow-strength: 0%;
+}
+
+@utility tf-pressed {
+  --tf-cast-shadow: 0 1px 1px rgb(0 0 0 / 34%);
+  --tf-glow-strength: 6%;
+}
+
+@utility tf-tilted {
+  --tf-blend-angle: var(--tf-pressed-angle);
+}
+
+@utility tf-ring-scale {
+  --tf-ring-dim: oklch(from var(--tf-base) 0.34 calc(var(--tf-c, c) * 0.34) h);
+  --tf-ring-dim-bloom: oklch(from var(--tf-base) 0.45 calc(var(--tf-c, c) * 0.42) h);
+  --tf-ring-lit: oklch(from var(--tf-base) 0.6 calc(var(--tf-c, c) * 0.85) h);
+  --tf-ring-lit-bloom: oklch(from var(--tf-base) 0.78 c h);
+}
+
+@utility tf-ring-rest {
+  @apply tf-ring-scale;
+
+  --tf-ring-base: var(--tf-ring-dim);
+  --tf-ring-bloom: var(--tf-ring-dim-bloom);
+}
+
+@utility tf-edge-sweep {
+  @apply tf-ring-rest;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    padding: 1px;
+    border-radius: inherit;
+    background-image: conic-gradient(
+      from var(--tf-sweep),
+      var(--tf-ring-base) 0%,
+      var(--tf-ring-bloom) 50%,
+      var(--tf-ring-base) 100%
+    );
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+}
+
+@utility tf-edge-plain {
+  --tf-ring-base: var(--color-tf-line);
+  --tf-ring-bloom: var(--color-tf-line);
+}
+
+@utility tf-edge-lit {
+  @apply tf-ring-scale;
+
+  --tf-ring-base: var(--tf-ring-lit);
+  --tf-ring-bloom: var(--tf-ring-lit-bloom);
+}
+
+@utility tf-edge-milk {
+  --tf-ring-base: rgb(255 255 255 / 6%);
+  --tf-ring-bloom: rgb(255 255 255 / 26%);
+}
+
+@utility tf-swept-top {
+  &::before {
+    --tf-sweep: 180deg;
+  }
+}
+
+@utility tf-writes {
+  caret-color: var(--color-tf-accent-hi);
+
+  &::placeholder {
+    transition: opacity var(--tf-timing-quick);
+  }
+
+  &::selection {
+    background-color: var(--color-tf-accent-surface);
+    color: var(--color-tf-on-accent);
+  }
+
+  &:-webkit-autofill {
+    -webkit-text-fill-color: var(--color-tf-fg);
+    caret-color: var(--color-tf-accent-hi);
+    box-shadow: inset 0 0 0 1000px var(--color-tf-surface);
+  }
+}
+
+@utility tf-mark-edge {
+  --tf-mark-rest: var(--color-tf-line);
+  --tf-mark-bloom: var(--color-tf-line-hi);
+
+  box-shadow: inset 0 0 0 var(--spacing-tf-hairline) var(--tf-mark-ink, var(--tf-mark-rest));
+}
+
+@utility tf-mark-lit {
+  @apply tf-ring-scale;
+
+  --tf-mark-rest: var(--tf-ring-lit);
+  --tf-mark-bloom: var(--tf-ring-lit-bloom);
+}
+
+@utility tf-mark-draws {
+  transition: display var(--tf-timing-glide) allow-discrete;
+
+  & svg path {
+    stroke-dasharray: var(--tf-mark-path);
+    stroke-dashoffset: 0;
+    transition: stroke-dashoffset var(--tf-timing-glide);
+  }
+
+  & [data-part='dash'] {
+    transform-origin: left center;
+    scale: 1 1;
+    transition: scale var(--tf-timing-glide);
+  }
+
+  &[hidden] {
+    transition: display var(--tf-timing-quick) allow-discrete;
+  }
+
+  &[hidden] svg path {
+    stroke-dashoffset: calc(var(--tf-mark-path) * -1);
+    transition: stroke-dashoffset var(--tf-timing-quick);
+  }
+
+  &[hidden] [data-part='dash'] {
+    scale: 0 1;
+    transition: scale var(--tf-timing-quick);
+  }
+
+  @starting-style {
+    & svg path {
+      stroke-dashoffset: calc(var(--tf-mark-path) * -1);
+    }
+
+    & [data-part='dash'] {
+      scale: 0 1;
+    }
+  }
+}
+
+@utility tf-mark-bloomed {
+  --tf-mark-ink: var(--tf-mark-bloom);
+}
+
+@utility tf-mark-glowing {
+  --tf-inner-light: inset 0 0 0 var(--spacing-tf-hairline) var(--tf-mark-ink, var(--tf-mark-rest));
+
+  @apply tf-glow;
+}
+
+@utility tf-mark-failed {
+  --tf-mark-rest: var(--color-tf-danger-hi);
+  --tf-mark-bloom: var(--color-tf-danger-hi);
+}
+
+@utility tf-rule {
+  @apply tf-edge-lit;
+
+  --tf-rest-lead: var(--tf-ring-base);
+  --tf-rest-mid: oklch(from var(--tf-ring-base) l c h / calc(100% - var(--tf-blend-waist)));
+  --tf-rest-trail: oklch(from var(--tf-ring-base) l c h / 0);
+
+  @apply tf-ramp;
+}
+
+@utility tf-rule-quiet {
+  background-image: linear-gradient(
+    var(--tf-rest-angle),
+    transparent 0%,
+    var(--color-tf-line) 50%,
+    transparent 100%
+  );
+}
+
+@utility tf-rule-filled {
+  @apply bg-tf-blend;
+}
+
+@utility tf-rule-fall {
+  @apply tf-rule;
+
+  --tf-blend-angle: var(--tf-fall-angle);
+}
+
+@utility tf-rule-filled-fall {
+  @apply tf-rule-filled;
+
+  --tf-blend-angle: var(--tf-fall-angle);
+}
+
+@utility tf-nebula {
+  --tf-cloud-near: color-mix(in oklab, var(--tf-base) 34%, var(--color-tf-bg));
+  --tf-cloud-far: color-mix(in oklab, var(--tf-base) 17%, var(--color-tf-bg));
+
+  background-image: conic-gradient(
+    from var(--tf-sweep),
+    transparent 0deg,
+    var(--tf-cloud-far) 55deg,
+    var(--tf-cloud-near) 105deg,
+    transparent 165deg,
+    transparent 215deg,
+    var(--tf-cloud-far) 275deg,
+    transparent 335deg
+  );
+  filter: blur(60px);
+}
+
+@utility tf-blend-drift {
+  --tf-blend-timing: var(--tf-timing-drift);
+}
+
+@utility tf-cloud-scale {
+  --tf-haze: oklch(from var(--tf-base) 0.85 c h);
+  --tf-haze-lit: oklch(from var(--tf-base) 0.92 c h);
+  --tf-haze-quiet: oklch(from var(--tf-base) 0.6 c h);
+}
+
+@utility tf-cloud-brand {
+  @apply tf-cloud-scale;
+
+  --tf-cloud-dim: var(--tf-haze);
+  --tf-cloud-lit: var(--tf-haze-lit);
+}
+
+@utility tf-cloud-ink {
+  @apply tf-cloud-scale;
+
+  --tf-cloud-dim: var(--tf-haze-quiet);
+  --tf-cloud-lit: var(--tf-haze-quiet);
+}
+
+@utility tf-cloud-quiet {
+  --tf-cloud-dim: var(--tf-flare);
+  --tf-cloud-lit: var(--tf-flare);
+}
+
+@utility tf-clouded {
+  --tf-weather-near: color-mix(in oklab, var(--tf-cloud-dim) 26%, transparent);
+  --tf-weather-far: color-mix(in oklab, var(--tf-cloud-dim) 10%, transparent);
+  --tf-weather-angle: 0deg;
+  --tf-weather-x: 50%;
+  --tf-weather-y: 50%;
+}
+
+@utility tf-clouding {
+  --tf-weather-near: color-mix(in oklab, var(--tf-cloud-lit) 58%, transparent);
+  --tf-weather-far: color-mix(in oklab, var(--tf-cloud-lit) 26%, transparent);
+  --tf-weather-angle: 52deg;
+  --tf-weather-x: 33%;
+  --tf-weather-y: 64%;
+}
+
+@utility tf-clouded-lifted {
+  --tf-weather-near: color-mix(in oklab, var(--tf-cloud-dim) 26%, transparent);
+  --tf-weather-far: color-mix(in oklab, var(--tf-cloud-dim) 10%, transparent);
+  --tf-weather-angle: 24deg;
+  --tf-weather-x: 22%;
+  --tf-weather-y: 78%;
+}
+
+@utility tf-cloud-* {
+  --tf-cloud-blur: --value(--blur-tf-cloud-*);
+}
+
+@utility tf-cloud-hidden {
+  --tf-weather-near: transparent;
+  --tf-weather-far: transparent;
+  --tf-weather-angle: 0deg;
+  --tf-weather-x: 50%;
+  --tf-weather-y: 50%;
+}
+
+@utility tf-pops {
+  animation: tf-pop var(--tf-duration-2) var(--ease-tf-spring) var(--tf-land, 0ms) both;
+}
+
+@utility tf-lands {
+  animation: tf-in var(--tf-duration-2) var(--ease-tf) var(--tf-land, 0ms) both;
+}
+
+@utility tf-tallies {
+  display: inline-grid;
+  grid-template-areas: 'figure';
+  align-items: baseline;
+  animation: tf-tally var(--tf-duration-4) var(--ease-tf) var(--tf-land, 0ms) both;
+
+  &::before {
+    content: attr(data-tally);
+    grid-area: figure;
+    visibility: hidden;
+  }
+
+  & > * {
+    grid-area: figure;
+    justify-self: start;
+  }
+}
+
+@utility tf-reveals {
+  transition:
+    width var(--tf-timing-quick),
+    opacity var(--tf-timing-quick),
+    scale var(--tf-timing-quick);
+}
+
+@utility tf-nudged {
+  --tf-nudge: var(--spacing);
+}
+
+@utility tf-weather-trail {
+  --tf-weather-timing: var(--tf-timing-trail);
+}
+
+@utility tf-nudge-follow {
+  translate: var(--tf-nudge);
+}
+
+@utility tf-plated {
+  --tf-plate: var(--color-tf-panel-hi);
+}
+
+@utility tf-plated-quiet {
+  --tf-plate: var(--color-tf-panel-2);
+}
+
+@utility tf-nebula-veil {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  border-radius: inherit;
+  background-color: var(--tf-plate);
+  pointer-events: none;
+}
+
+@utility tf-cloud-low {
+  mask-image: linear-gradient(to top, #000 10%, rgb(0 0 0 / 45%) 34%, transparent 66%);
+}
+
+@utility tf-faded-x {
+  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
+}
+
+@utility tf-nebula-cloud {
+  position: absolute;
+  inset: -70%;
+  background-image: conic-gradient(
+    from var(--tf-weather-angle) at var(--tf-weather-x) var(--tf-weather-y),
+    transparent 0deg,
+    var(--tf-weather-far) 55deg,
+    var(--tf-weather-near) 105deg,
+    transparent 165deg,
+    transparent 215deg,
+    var(--tf-weather-far) 275deg,
+    transparent 335deg
+  );
+  filter: blur(var(--tf-cloud-blur));
+}
+
+@utility tf-turning {
+  @variant motion-safe {
+    animation: tf-sweep var(--tf-sweep-duration) linear infinite;
+  }
+}
+
+@utility tf-breathing {
+  @variant motion-safe {
+    animation: tf-breathe var(--tf-pulse-duration) var(--ease-tf-glide) infinite;
+  }
+}
+
+@utility tf-pinging {
+  @variant motion-safe {
+    animation: tf-ring-ping var(--tf-pulse-duration) var(--ease-tf-glide) infinite;
+  }
+}
+
+@utility tf-cloud-breathing {
+  @apply tf-breathing;
+}
+
+@utility tf-twinkling {
+  @variant motion-safe {
+    animation: tf-twinkle var(--tf-twinkle-duration) var(--ease-tf-glide) infinite;
+  }
+}
+
+@utility tf-looping {
+  @variant motion-safe {
+    animation: tf-marquee calc(var(--tf-marquee-run) / var(--tf-marquee-pace) * 1s) linear
+      var(--marquee-delay) var(--marquee-loop-count);
+  }
+}
+
+@utility tf-slows {
+  @variant motion-safe {
+    transition: --tf-marquee-rate var(--tf-timing-drift);
+  }
+}
+
+@utility tf-swept {
+  @variant motion-safe {
+    &::before {
+      animation:
+        tf-sweep var(--tf-sweep-duration) linear infinite,
+        var(--tf-edge-pulse, none) var(--tf-pulse-duration) var(--ease-tf-glide) infinite;
+    }
+  }
+}
+
+@utility tf-pulsing {
+  --tf-edge-pulse: tf-edge-pulse;
+}
+
+@utility tf-milked {
+  --tf-milk: rgb(255 255 255 / 22%);
+}
+
+@utility tf-shaken {
+  animation: var(--animate-tf-lift), var(--animate-tf-shake);
+}
+
+@utility tf-blend-hushed {
+  animation: var(--animate-tf-blend-in);
+
+  --tf-blend-lead: var(--tf-vivid);
+  --tf-blend-mid: var(--tf-deep);
+  --tf-blend-trail: var(--tf-abyss);
+  --tf-blend-angle: var(--tf-mixed-angle);
+  --tf-blend-waist: var(--tf-mixed-waist);
+}
+
+@utility tf-blended {
+  animation: var(--animate-tf-blend-in);
+
+  --tf-blend-lead: var(--tf-flare);
+  --tf-blend-mid: var(--tf-vivid);
+  --tf-blend-trail: var(--tf-abyss);
+  --tf-blend-angle: var(--tf-mixed-angle);
+  --tf-blend-waist: var(--tf-mixed-waist);
+
+  &::before {
+    opacity: 1;
+  }
+}
+
+@utility duration-tf-* {
+  transition-duration: --value(--tf-duration-*);
+}
+
+@utility z-tf-* {
+  z-index: --value(--tf-z-*);
+}
+
+@utility tf-icons-solo {
+  & svg :is(path, line, polyline, polygon, circle, ellipse, rect) {
+    stroke-width: var(--tf-icon-stroke-solo);
+  }
+}
+
+@utility tf-icons {
+  & svg :is(path, line, polyline, polygon, circle, ellipse, rect) {
+    stroke-width: var(--tf-icon-stroke);
+  }
+}
+
+@utility tf-text-trim {
+  @supports (text-box: trim-both text text) {
+    text-box: trim-both text text;
+  }
+}