@arclux/arc-ui-html 1.0.0

package/css/arc-ui.css

@@ -0,0 +1,3045 @@
+/* Auto-generated by @arclux/prism — do not edit manually */
+
+/* Design Tokens */
+:root {
+
+  /* ── Backgrounds ── */
+  --bg-deep:      rgb(3, 3, 7);
+  --bg-surface:   rgb(10, 10, 15);
+  --bg-base:      rgb(10, 10, 15);
+  --bg-card:      rgb(13, 13, 18);
+  --bg-elevated:  rgb(17, 17, 22);
+
+  /* ── Text ── */
+  --text-primary:   rgb(232, 232, 236);
+  --text-secondary: rgb(138, 138, 150);
+  --text-muted:     rgb(124, 124, 137);
+  --text-ghost:     rgb(107, 107, 128);
+
+  /* ── Borders ── */
+  --border-subtle:  rgb(24, 24, 30);
+  --border-default: rgb(34, 34, 41);
+  --border-bright:  rgb(51, 51, 64);
+
+  /* ── Accent ── */
+  --accent-primary:   rgb(77, 126, 247);
+  --accent-secondary: rgb(139, 92, 246);
+
+  /* RGB channels (for alpha compositing) */
+  --accent-primary-rgb:   77, 126, 247;
+  --accent-secondary-rgb: 139, 92, 246;
+  --text-primary-rgb:  232, 232, 236;
+  --text-muted-rgb:    124, 124, 137;
+  --color-error-rgb:   239, 68, 68;
+  --white-rgb:         255, 255, 255;
+  --black-rgb:         0, 0, 0;
+
+  /* Accent alpha variants */
+  --accent-primary-subtle:   rgba(var(--accent-primary-rgb), 0.06);
+  --accent-primary-border:   rgba(var(--accent-primary-rgb), 0.12);
+  --accent-primary-glow:     rgba(var(--accent-primary-rgb), 0.2);
+  --accent-primary-ring:     rgba(var(--accent-primary-rgb), 0.15);
+  --accent-secondary-subtle: rgba(var(--accent-secondary-rgb), 0.06);
+  --accent-secondary-border: rgba(var(--accent-secondary-rgb), 0.12);
+  --accent-secondary-glow:   rgba(var(--accent-secondary-rgb), 0.2);
+
+  /* Feedback */
+  --color-success:      rgb(52, 211, 153);
+  --color-success-rgb:  52, 211, 153;
+  --color-error:        rgb(239, 68, 68);
+  --color-error-subtle: rgba(var(--color-error-rgb), 0.1);
+  --color-warning:      rgb(245, 158, 11);
+  --color-warning-rgb:  245, 158, 11;
+  --color-warning-subtle: rgba(245, 158, 11, 0.1);
+  --color-info:         rgb(59, 130, 246);
+  --color-info-rgb:     59, 130, 246;
+  --color-info-subtle:  rgba(59, 130, 246, 0.1);
+
+  /* ── Shadows ── */
+  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-sm:      0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
+  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
+  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
+  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.15);
+  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.4);
+
+  /* ── Z-Index ── */
+  --z-base:      0;
+  --z-dropdown:  100;
+  --z-sticky:    200;
+  --z-drawer:    300;
+  --z-modal:     400;
+  --z-popover:   500;
+  --z-toast:     600;
+  --z-tooltip:   700;
+  --z-max:       9999;
+
+  /* ── Breakpoints ── */
+  --breakpoint-xs:  480px;
+  --breakpoint-sm:  640px;
+  --breakpoint-md:  768px;
+  --breakpoint-lg:  1024px;
+  --breakpoint-xl:  1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* ── Opacity ── */
+  --opacity-disabled: 0.5;
+  --opacity-muted:    0.6;
+  --opacity-hover:    0.8;
+  --opacity-visible:  1;
+
+  /* ── Typography ── */
+  --font-body:    'Host Grotesk', system-ui, sans-serif;
+  --font-accent:  'Tektur', system-ui, sans-serif;
+  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
+
+  --display-xl-size:    var(--text-3xl);
+  --display-xl-weight:  500;
+  --display-xl-spacing: -1px;
+
+  --heading-size:   var(--text-xl);
+  --heading-weight: 500;
+
+  /* ── Type scale ── */
+  --text-xs:  12px;   /* uppercase labels, badges, counters — decorative only */
+  --text-sm:  14px;   /* minimum readable size — captions, hints, metadata */
+  --text-md:  15px;   /* body text */
+  --text-lg:  clamp(18px, 1.5vw, 20px);
+  --text-xl:  clamp(22px, 2.5vw, 26px);
+  --text-2xl: clamp(28px, 3vw, 36px);
+  --text-3xl: clamp(36px, 5vw, 52px);
+
+  --body-size:   var(--text-md);
+  --body-weight: 500;
+  --body-lh:     1.7;
+
+  --wordmark-size:    clamp(20px, 2.5vw, 28px);
+  --wordmark-weight:  500;
+  --wordmark-spacing: clamp(8px, 1.2vw, 14px);
+
+  --section-title-size:    var(--text-xs);
+  --section-title-weight:  600;
+  --section-title-spacing: 4px;
+
+  --ui-accent-size:    16px;
+  --ui-accent-weight:  600;
+  --ui-accent-spacing: 1px;
+
+  --code-size: var(--text-sm);
+  --code-lh:   1.8;
+
+  --label-inline-size:    var(--text-xs);
+  --label-inline-spacing: 3px;
+
+  /* ── Interactive ── */
+  --touch-min:   24px;
+  --touch-pad:   4px;
+
+  /* ── Spacing ── */
+  --space-xs:  4px;
+  --space-sm:  8px;
+  --space-md:  16px;
+  --space-lg:  24px;
+  --space-xl:  40px;
+  --space-2xl: 64px;
+  --space-3xl: 96px;
+  --space-4xl: 128px;
+
+  /* ── Radii ── */
+  --radius-sm:   4px;
+  --radius-md:   10px;
+  --radius-lg:   14px;
+  --radius-xl:   20px;
+  --radius-full: 9999px;
+
+  /* ── Transitions ── */
+  --transition-fast: 120ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 400ms ease;
+
+  /* ── Motion ── */
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-enter: 500ms;
+  --duration-exit:  300ms;
+
+  /* ── Gradients ── */
+  --gradient-display-text: linear-gradient(135deg, rgb(232, 232, 236) 0%, rgb(124, 124, 137) 100%);
+  --gradient-accent-text:  linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+  --gradient-divider:      linear-gradient(90deg, transparent, var(--border-subtle), transparent);
+  --gradient-divider-glow: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.2), rgba(var(--accent-secondary-rgb),0.12), transparent);
+  --gradient-page-ambient: radial-gradient(ellipse, rgba(var(--white-rgb),0.015) 0%, transparent 70%);
+
+  /* ── Glow ── */
+  --glow-white:
+    0 0 6px rgba(var(--text-primary-rgb),0.6),
+    0 0 18px rgba(var(--text-primary-rgb),0.25),
+    0 0 40px rgba(var(--text-primary-rgb),0.1);
+
+  --glow-primary:
+    0 0 8px rgba(var(--accent-primary-rgb),0.9),
+    0 0 20px rgba(var(--accent-primary-rgb),0.5),
+    0 0 44px rgba(var(--accent-primary-rgb),0.25),
+    0 0 80px rgba(var(--accent-primary-rgb),0.1);
+
+  --glow-secondary:
+    0 0 8px rgba(var(--accent-secondary-rgb),0.9),
+    0 0 20px rgba(var(--accent-secondary-rgb),0.4),
+    0 0 40px rgba(var(--accent-secondary-rgb),0.15);
+
+  --glow-line-white:    linear-gradient(90deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
+  --glow-line-blue:     linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.7), transparent);
+  --glow-line-gradient: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary), transparent);
+
+  /* ── Card / Ambient Glow ── */
+  --glow-card-hover:  0 0 20px rgba(var(--accent-primary-rgb),0.08), 0 0 40px rgba(var(--accent-secondary-rgb),0.04);
+  --gradient-border-glow: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.15), rgba(var(--accent-secondary-rgb),0.1), rgba(var(--accent-primary-rgb),0.05));
+  --gradient-ambient: radial-gradient(circle at 15% 85%, rgba(var(--accent-primary-rgb),0.04) 0%, transparent 50%),
+                      radial-gradient(circle at 85% 15%, rgba(var(--accent-secondary-rgb),0.03) 0%, transparent 50%);
+
+  /* ── Focus ── */
+  --focus-ring: 0 0 0 1px rgba(var(--accent-primary-rgb),0.25);
+  --focus-glow: 0 0 0 1px rgba(var(--accent-primary-rgb),0.2), 0 0 6px rgba(var(--accent-primary-rgb),0.35), 0 0 16px rgba(var(--accent-primary-rgb),0.2), 0 0 40px rgba(var(--accent-secondary-rgb),0.12);
+
+  /* ── Layout ── */
+  --max-width:    1120px;
+  --max-width-sm: 720px;
+  --nav-height:   64px;
+
+  /* ── Utility ── */
+  --bg-hover:         rgba(var(--white-rgb), 0.04);
+  --overlay-backdrop: rgba(var(--black-rgb), 0.6);
+
+}
+
+/* arc-animated-number */
+.arc-animated-number {
+        display: inline-block;
+        font-family: var(--font-mono);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .arc-animated-number .value {
+        white-space: nowrap;
+      }
+
+/* arc-aspect-ratio */
+.arc-aspect-ratio { display: block; }
+
+      .arc-aspect-ratio .aspect-ratio {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        border-radius: var(--radius-md);
+      }
+
+      .arc-aspect-ratio .aspect-ratio__inner {
+        width: 100%;
+        height: 100%;
+      }
+
+      ::slotted(*) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+
+/* arc-avatar-group */
+.arc-avatar-group { display: inline-flex; }
+
+      .arc-avatar-group .group {
+        display: flex;
+        align-items: center;
+      }
+
+      ::slotted(*) {
+        position: relative;
+        box-sizing: border-box;
+        box-shadow: 0 0 0 3px var(--bg-deep);
+        border-radius: var(--radius-full);
+        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+      }
+
+      ::slotted(:hover) {
+        transform: translateY(-2px) scale(1.08);
+        z-index: 100 !important;
+        box-shadow: 0 0 0 3px var(--bg-deep), 0 4px 12px rgba(0, 0, 0, 0.3);
+      }
+
+      .arc-avatar-group .group__overflow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-sm);
+        letter-spacing: 0.5px;
+        color: var(--text-ghost);
+        user-select: none;
+        padding-left: var(--space-sm);
+      }
+
+      .arc-avatar-group[data-overlap="sm"] .group__overflow { padding-left: var(--space-xs); }
+      .arc-avatar-group[data-overlap="lg"] .group__overflow { padding-left: var(--space-md); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-avatar-group *,
+        .arc-avatar-group *::before,
+        .arc-avatar-group *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-avatar */
+.arc-avatar { display: inline-flex; }
+
+      .arc-avatar .avatar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-full);
+        border: 1px solid var(--border-default);
+        overflow: hidden;
+        background: var(--bg-elevated);
+        transition: border-color var(--transition-base), box-shadow var(--transition-base);
+      }
+
+      .arc-avatar .avatar:hover {
+        border-color: var(--border-bright);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.15);
+      }
+
+      .arc-avatar[data-size="sm"] .avatar { width: 32px; height: 32px; }
+      .arc-avatar[data-size="md"] .avatar { width: 40px; height: 40px; }
+      .arc-avatar[data-size="lg"] .avatar { width: 56px; height: 56px; }
+
+      .arc-avatar .avatar__img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: var(--radius-full);
+      }
+
+      .arc-avatar .avatar__initials {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        color: var(--text-primary);
+        text-transform: uppercase;
+        user-select: none;
+      }
+
+      .arc-avatar[data-size="sm"] .avatar__initials { font-size: var(--text-xs); }
+      .arc-avatar[data-size="md"] .avatar__initials { font-size: var(--text-sm); }
+      .arc-avatar[data-size="lg"] .avatar__initials { font-size: var(--text-lg); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-avatar *,
+        .arc-avatar *::before,
+        .arc-avatar *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-badge */
+.arc-badge { display: inline-flex; }
+
+      .arc-badge .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        padding: var(--space-xs) var(--space-sm);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        background: var(--bg-hover);
+        transition: box-shadow 200ms ease, border-color 200ms ease;
+        line-height: 1.4;
+      }
+
+      .arc-badge[data-variant="primary"] .badge {
+        border-color: var(--accent-primary-border);
+        color: var(--accent-primary);
+        background: rgba(var(--accent-primary-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="secondary"] .badge {
+        border-color: var(--accent-secondary-border);
+        color: var(--accent-secondary);
+        background: rgba(var(--accent-secondary-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="success"] .badge {
+        border-color: rgba(var(--color-success-rgb), 0.2);
+        color: var(--color-success);
+        background: rgba(var(--color-success-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="warning"] .badge {
+        border-color: rgba(var(--color-warning-rgb), 0.2);
+        color: var(--color-warning);
+        background: rgba(var(--color-warning-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="error"] .badge {
+        border-color: rgba(var(--color-error-rgb), 0.2);
+        color: var(--color-error);
+        background: rgba(var(--color-error-rgb), 0.06);
+      }
+
+      .arc-badge[data-variant="info"] .badge {
+        border-color: rgba(var(--color-info-rgb), 0.2);
+        color: var(--color-info);
+        background: rgba(var(--color-info-rgb), 0.06);
+      }
+
+      .arc-badge:hover .badge { border-color: var(--border-bright); }
+      .arc-badge[data-variant="primary"]:hover .badge { box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.15); }
+      .arc-badge[data-variant="secondary"]:hover .badge { box-shadow: 0 0 12px rgba(var(--accent-secondary-rgb), 0.15); }
+      .arc-badge[data-variant="success"]:hover .badge { box-shadow: 0 0 12px rgba(var(--color-success-rgb), 0.15); }
+      .arc-badge[data-variant="warning"]:hover .badge { box-shadow: 0 0 12px rgba(var(--color-warning-rgb), 0.15); }
+      .arc-badge[data-variant="error"]:hover .badge { box-shadow: 0 0 12px rgba(var(--color-error-rgb), 0.15); }
+      .arc-badge[data-variant="info"]:hover .badge { box-shadow: 0 0 12px rgba(var(--color-info-rgb), 0.15); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-badge *,
+        .arc-badge *::before,
+        .arc-badge *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-callout */
+.arc-callout { display: block; }
+
+      .arc-callout .callout {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+        padding: var(--space-md) var(--space-lg);
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-default);
+        background: var(--bg-card);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.7;
+        color: var(--text-secondary);
+      }
+
+      .arc-callout .callout__header {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .arc-callout .callout__icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      .arc-callout .callout__label {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+      }
+
+      .arc-callout .callout__content {
+        min-width: 0;
+      }
+
+      /* ── Info ── */
+      .arc-callout[data-variant="info"] .callout {
+        border-color: rgba(var(--accent-primary-rgb), 0.12);
+        background: rgba(var(--accent-primary-rgb), 0.04);
+      }
+      .arc-callout[data-variant="info"] .callout__icon { color: var(--accent-primary); }
+      .arc-callout[data-variant="info"] .callout__label { color: var(--accent-primary); }
+
+      /* ── Warning ── */
+      .arc-callout[data-variant="warning"] .callout {
+        border-color: rgba(var(--color-warning-rgb), 0.15);
+        background: rgba(var(--color-warning-rgb), 0.04);
+      }
+      .arc-callout[data-variant="warning"] .callout__icon { color: var(--color-warning); }
+      .arc-callout[data-variant="warning"] .callout__label { color: var(--color-warning); }
+
+      /* ── Tip ── */
+      .arc-callout[data-variant="tip"] .callout {
+        border-color: rgba(var(--color-success-rgb), 0.15);
+        background: rgba(var(--color-success-rgb), 0.04);
+      }
+      .arc-callout[data-variant="tip"] .callout__icon { color: var(--color-success); }
+      .arc-callout[data-variant="tip"] .callout__label { color: var(--color-success); }
+
+      /* ── Danger ── */
+      .arc-callout[data-variant="danger"] .callout {
+        border-color: rgba(var(--color-error-rgb), 0.15);
+        background: rgba(var(--color-error-rgb), 0.04);
+      }
+      .arc-callout[data-variant="danger"] .callout__icon { color: var(--color-error); }
+      .arc-callout[data-variant="danger"] .callout__label { color: var(--color-error); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-callout *,
+        .arc-callout *::before,
+        .arc-callout *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-card */
+.arc-card { display: block; }
+
+      .arc-card .card {
+        position: relative;
+        border-radius: var(--radius-lg);
+        padding: 1px;
+        background: var(--border-subtle);
+        transition: background var(--transition-slow);
+        text-decoration: none;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .arc-card[href] .card:hover {
+        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
+      }
+
+      .arc-card .card__inner {
+        position: relative;
+        background: var(--bg-card);
+        border-radius: calc(var(--radius-lg) - 1px);
+        padding: var(--space-xl) var(--space-lg);
+        flex: 1;
+        min-height: 0;
+        transition: box-shadow var(--transition-slow);
+      }
+
+      .arc-card .card:hover .card__inner {
+        box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
+      }
+
+      .arc-card .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
+
+      @media (max-width: 768px) {
+        .arc-card .card__inner { padding: var(--space-lg) var(--space-md); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-card *,
+        .arc-card *::before,
+        .arc-card *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-code-block */
+.arc-code-block { display: block; }
+
+      .arc-code-block .code-block {
+        background: var(--bg-surface);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        overflow: hidden;
+      }
+
+      .arc-code-block .code-block__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-xs) var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+        background: var(--bg-card);
+      }
+
+      .arc-code-block .code-block__filename {
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+      }
+
+      .arc-code-block .code-block__lang {
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+      }
+
+      .arc-code-block .code-block__copy {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        background: none;
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        color: var(--text-muted);
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        padding: var(--space-xs) var(--space-sm);
+        cursor: pointer;
+        transition: color var(--transition-fast), border-color var(--transition-fast);
+      }
+
+      .arc-code-block .code-block__copy:hover {
+        color: var(--text-primary);
+        border-color: var(--border-bright);
+      }
+
+      .arc-code-block .code-block__copy[data-copied] {
+        color: var(--color-success);
+        border-color: var(--color-success);
+      }
+
+      .arc-code-block .code-block__body {
+        padding: var(--space-md);
+        overflow-x: auto;
+      }
+
+      .arc-code-block .code-block__pre {
+        margin: 0;
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        line-height: var(--code-lh);
+        color: var(--text-primary);
+        white-space: pre;
+        tab-size: 2;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-code-block *,
+        .arc-code-block *::before,
+        .arc-code-block *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-color-swatch */
+.arc-color-swatch { display: inline-flex; }
+
+      .arc-color-swatch .swatch {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .arc-color-swatch .swatch__color {
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border-default);
+        transition: border-color var(--transition-base), box-shadow var(--transition-base);
+      }
+
+      .arc-color-swatch .swatch__color:hover {
+        border-color: var(--border-bright);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.1);
+      }
+
+      .arc-color-swatch[data-size="sm"] .swatch__color { width: 32px; height: 32px; border-radius: var(--radius-sm); }
+      .arc-color-swatch[data-size="md"] .swatch__color { width: 48px; height: 48px; }
+      .arc-color-swatch[data-size="lg"] .swatch__color { width: 64px; height: 64px; border-radius: var(--radius-lg); }
+
+      .arc-color-swatch .swatch__label {
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+        text-align: center;
+        max-width: 80px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-color-swatch *,
+        .arc-color-swatch *::before,
+        .arc-color-swatch *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-divider */
+.arc-divider { display: block; width: 100%; }
+
+      .arc-divider .divider { width: 100%; height: 1px; }
+
+      .arc-divider:not([data-variant]) .divider,
+      .arc-divider[data-variant="subtle"] .divider { background: var(--gradient-divider); }
+
+      .arc-divider[data-variant="glow"] .divider {
+        position: relative;
+        background: var(--gradient-divider-glow);
+        box-shadow: 0 0 6px rgba(var(--accent-primary-rgb),0.08);
+      }
+      .arc-divider[data-variant="glow"] .divider::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-secondary-rgb),0.4) 50%, transparent 100%);
+        background-size: 200% 100%;
+        animation: divider-shimmer 6s ease-in-out infinite;
+        mix-blend-mode: screen;
+      }
+
+      .arc-divider[data-variant="line-white"] .divider,
+      .arc-divider[data-variant="line-primary"] .divider,
+      .arc-divider[data-variant="line-gradient"] .divider {
+        height: 2px;
+        margin-inline: auto;
+      }
+      .arc-divider[data-variant="line-white"] .divider {
+        max-width: 160px;
+        background: linear-gradient(90deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
+      }
+      .arc-divider[data-variant="line-primary"] .divider {
+        max-width: 200px;
+        background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.7), transparent);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.3);
+      }
+      .arc-divider[data-variant="line-gradient"] .divider {
+        max-width: 240px;
+        background: var(--glow-line-gradient);
+        box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.25);
+      }
+
+      /* Alignment — rewrite gradients to originate from one edge */
+      .arc-divider[data-align="left"] .divider { margin-inline: 0; }
+      .arc-divider[data-align="right"] .divider { margin-left: auto; margin-right: 0; }
+
+      .arc-divider([align="left"]:not([variant])) .divider,
+      .arc-divider([align="left"][variant="subtle"]) .divider {
+        background: linear-gradient(90deg, var(--border-default), transparent);
+      }
+      .arc-divider([align="right"]:not([variant])) .divider,
+      .arc-divider([align="right"][variant="subtle"]) .divider {
+        background: linear-gradient(90deg, transparent, var(--border-default));
+      }
+
+      .arc-divider([align="left"][variant="glow"]) .divider {
+        background: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0.5), rgba(var(--accent-secondary-rgb),0.3), transparent);
+      }
+      .arc-divider([align="right"][variant="glow"]) .divider {
+        background: linear-gradient(90deg, transparent, rgba(var(--accent-secondary-rgb),0.3), rgba(var(--accent-primary-rgb),0.5));
+      }
+
+      .arc-divider([align="left"][variant="line-white"]) .divider {
+        background: linear-gradient(90deg, rgba(var(--text-primary-rgb),0.35), transparent);
+      }
+      .arc-divider([align="right"][variant="line-white"]) .divider {
+        background: linear-gradient(90deg, transparent, rgba(var(--text-primary-rgb),0.35));
+      }
+
+      .arc-divider([align="left"][variant="line-primary"]) .divider {
+        background: linear-gradient(90deg, rgba(var(--accent-primary-rgb),0.7), transparent);
+      }
+      .arc-divider([align="right"][variant="line-primary"]) .divider {
+        background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb),0.7));
+      }
+
+      .arc-divider([align="left"][variant="line-gradient"]) .divider {
+        background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), transparent);
+      }
+      .arc-divider([align="right"][variant="line-gradient"]) .divider {
+        background: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary));
+      }
+
+      /* ── Vertical ── */
+      .arc-divider[vertical] { display: inline-flex; width: auto; height: 100%; }
+      .arc-divider[vertical] .divider { width: 1px; height: 100%; }
+
+      .arc-divider([vertical]:not([variant])) .divider,
+      .arc-divider([vertical][variant="subtle"]) .divider {
+        background: linear-gradient(180deg, transparent, var(--border-default), transparent);
+      }
+
+      .arc-divider([vertical][variant="glow"]) .divider {
+        background: linear-gradient(180deg, transparent, rgba(var(--accent-primary-rgb),0.5), rgba(var(--accent-secondary-rgb),0.3), transparent);
+      }
+
+      .arc-divider([vertical][variant="line-gradient"]) .divider {
+        width: 2px;
+        max-width: none;
+        background: linear-gradient(180deg, transparent, var(--accent-primary), var(--accent-secondary), transparent);
+        box-shadow: 0 0 10px rgba(var(--accent-primary-rgb),0.25);
+      }
+
+      .arc-divider([vertical][variant="line-primary"]) .divider {
+        width: 2px;
+        max-width: none;
+        background: linear-gradient(180deg, transparent, rgba(var(--accent-primary-rgb),0.7), transparent);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.3);
+      }
+
+      .arc-divider([vertical][variant="line-white"]) .divider {
+        width: 2px;
+        max-width: none;
+        background: linear-gradient(180deg, transparent, rgba(var(--text-primary-rgb),0.35), transparent);
+      }
+
+      @keyframes divider-shimmer {
+        0%, 100% { background-position: 200% 0; }
+        50% { background-position: -100% 0; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-divider[data-variant="glow"] .divider::after { animation: none; }
+      }
+
+/* arc-empty-state */
+.arc-empty-state { display: block; }
+
+      .arc-empty-state .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding: var(--space-2xl) var(--space-xl);
+        border: 1px dashed var(--border-default);
+        border-radius: var(--radius-lg);
+        background: var(--bg-card);
+      }
+
+      .arc-empty-state .empty__icon {
+        margin-bottom: var(--space-lg);
+        color: var(--text-ghost);
+        font-size: 40px; /* icon size, not text */
+      }
+
+      .arc-empty-state .empty__heading {
+        margin: 0 0 var(--space-sm);
+        font-family: var(--font-body);
+        font-size: var(--heading-size);
+        font-weight: var(--heading-weight);
+        color: var(--text-primary);
+      }
+
+      .arc-empty-state .empty__desc {
+        margin: 0 0 var(--space-lg);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        line-height: var(--body-lh);
+        color: var(--text-muted);
+        max-width: 360px;
+      }
+
+      .arc-empty-state .empty__actions {
+        display: flex;
+        gap: var(--space-sm);
+      }
+
+/* arc-feature-card */
+.arc-feature-card { display: block; height: 100%; }
+
+      .arc-feature-card .card {
+        position: relative;
+        border-radius: var(--radius-lg);
+        height: 100%;
+        padding: 1px;
+        background: var(--border-subtle);
+        transition: background var(--transition-slow);
+        text-decoration: none;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .arc-feature-card .card:hover {
+        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.3), rgba(var(--accent-secondary-rgb),0.15), var(--border-default));
+      }
+
+      .arc-feature-card .card__inner {
+        position: relative;
+        background: var(--bg-card);
+        border-radius: calc(var(--radius-lg) - 1px);
+        padding: var(--space-xl) var(--space-lg);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+        flex: 1;
+        transition: box-shadow var(--transition-slow);
+        z-index: 1;
+      }
+
+      .arc-feature-card .card:hover .card__inner {
+        box-shadow: inset 0 1px 0 var(--bg-hover), var(--glow-card-hover);
+      }
+
+      .arc-feature-card .card__icon {
+        width: 44px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-md);
+        background: var(--accent-primary-subtle);
+        border: 1px solid var(--accent-primary-border);
+        color: var(--accent-primary);
+        font-size: 20px; /* icon size, not text */
+        transition: box-shadow var(--transition-slow), border-color var(--transition-slow), transform var(--transition-slow);
+      }
+
+      .arc-feature-card .card:hover .card__icon {
+        border-color: rgba(var(--accent-primary-rgb),0.3);
+        box-shadow: 0 0 20px var(--accent-primary-glow), 0 0 6px var(--accent-primary-border);
+        transform: translateY(-2px);
+      }
+
+      .arc-feature-card .card__title {
+        font-size: 17px; /* heading size, keep hardcoded */
+        font-weight: 600;
+        color: var(--text-primary);
+        transition: color var(--transition-slow);
+        margin: 0;
+      }
+
+      .arc-feature-card .card:hover .card__title { color: var(--text-primary); }
+
+      .arc-feature-card .card__desc {
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.7;
+        flex: 1;
+        margin: 0;
+      }
+
+      .arc-feature-card .card__rule {
+        width: 32px;
+        height: 1px;
+        background: linear-gradient(90deg, var(--accent-primary), transparent);
+        opacity: 0;
+        transition: opacity var(--transition-slow), width var(--transition-slow);
+      }
+
+      .arc-feature-card .card:hover .card__rule { opacity: 0.5; width: 48px; }
+
+      .arc-feature-card .card:focus-visible { outline: none; box-shadow: var(--focus-glow); border-radius: var(--radius-lg); }
+
+      @media (max-width: 768px) {
+        .arc-feature-card .card__inner { padding: var(--space-lg) var(--space-md); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-feature-card *,
+        .arc-feature-card *::before,
+        .arc-feature-card *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-highlight */
+.arc-highlight { display: inline; }
+
+      mark {
+        background: var(--accent-primary-subtle);
+        color: var(--accent-primary);
+        border-radius: var(--radius-sm);
+        padding: 1px var(--space-xs); /* cosmetic 1px vertical for inline highlight */
+        font-style: inherit;
+        font-weight: inherit;
+      }
+
+/* arc-icon */
+.arc-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: currentColor;
+        vertical-align: middle;
+      }
+
+      .arc-icon[data-size="xs"] { width: 12px; height: 12px; }
+      .arc-icon:not([data-size]),
+      .arc-icon[data-size="sm"] { width: 16px; height: 16px; }
+      .arc-icon[data-size="md"] { width: 20px; height: 20px; }
+      .arc-icon[data-size="lg"] { width: 24px; height: 24px; }
+      .arc-icon[data-size="xl"] { width: 32px; height: 32px; }
+
+      .arc-icon .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      ::slotted(svg) {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+      }
+
+/* arc-kbd */
+.arc-kbd { display: inline; }
+
+      .arc-kbd .kbd {
+        display: inline-flex;
+        align-items: center;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        line-height: 1;
+        color: var(--text-secondary);
+        background: var(--bg-elevated);
+        border: 1px solid var(--border-default);
+        border-bottom-width: 2px;
+        border-radius: var(--radius-sm);
+        padding: 2px calc(var(--space-xs) + 2px); /* cosmetic 2px vertical for kbd element */
+        white-space: nowrap;
+        user-select: none;
+        vertical-align: baseline;
+      }
+
+/* arc-markdown */
+.arc-markdown { display: block; }
+
+      .arc-markdown .markdown {
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: var(--body-weight);
+        line-height: var(--body-lh);
+        color: var(--text-secondary);
+      }
+
+      .arc-markdown .markdown h1,
+      .arc-markdown .markdown h2,
+      .arc-markdown .markdown h3,
+      .arc-markdown .markdown h4,
+      .arc-markdown .markdown h5,
+      .arc-markdown .markdown h6 {
+        font-family: var(--font-body);
+        color: var(--text-primary);
+        line-height: 1.3;
+        margin-top: var(--space-xl);
+        margin-bottom: var(--space-md);
+      }
+
+      .arc-markdown .markdown h1 { font-size: var(--text-3xl); font-weight: 600; }
+      .arc-markdown .markdown h2 { font-size: var(--heading-size); font-weight: 600; }
+      .arc-markdown .markdown h3 { font-size: var(--text-lg); font-weight: 600; }
+      .arc-markdown .markdown h4 { font-size: var(--body-size); font-weight: 600; }
+      .arc-markdown .markdown h5 { font-size: var(--body-size); font-weight: 500; }
+      .arc-markdown .markdown h6 { font-size: var(--code-size); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
+
+      .arc-markdown .markdown h1:first-child,
+      .arc-markdown .markdown h2:first-child,
+      .arc-markdown .markdown h3:first-child,
+      .arc-markdown .markdown h4:first-child,
+      .arc-markdown .markdown h5:first-child,
+      .arc-markdown .markdown h6:first-child { margin-top: 0; }
+
+      .arc-markdown .markdown p {
+        margin: 0 0 var(--space-md) 0;
+      }
+
+      .arc-markdown .markdown p:last-child { margin-bottom: 0; }
+
+      .arc-markdown .markdown strong { color: var(--text-primary); font-weight: 600; }
+
+      .arc-markdown .markdown em { font-style: italic; }
+
+      .arc-markdown .markdown a {
+        color: var(--accent-primary);
+        text-decoration: none;
+        transition: color var(--transition-fast);
+      }
+
+      .arc-markdown .markdown a:hover {
+        text-decoration: underline;
+      }
+
+      .arc-markdown .markdown code {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        color: var(--accent-secondary);
+        background: var(--bg-surface);
+        padding: 2px calc(var(--space-xs) + 2px); /* cosmetic 2px vertical for inline code */
+        border-radius: var(--radius-sm);
+      }
+
+      .arc-markdown .markdown pre {
+        background: var(--bg-surface);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+        padding: var(--space-md);
+        overflow-x: auto;
+        margin: 0 0 var(--space-md) 0;
+      }
+
+      .arc-markdown .markdown pre code {
+        background: none;
+        padding: 0;
+        border-radius: 0;
+        font-size: var(--code-size);
+        line-height: var(--code-lh);
+        color: var(--text-primary);
+      }
+
+      .arc-markdown .markdown blockquote {
+        margin: 0 0 var(--space-md) 0;
+        padding: var(--space-sm) var(--space-md);
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+      }
+
+      .arc-markdown .markdown blockquote p:last-child { margin-bottom: 0; }
+
+      .arc-markdown .markdown ul,
+      .arc-markdown .markdown ol {
+        margin: 0 0 var(--space-md) 0;
+        padding-left: var(--space-lg);
+        color: var(--text-secondary);
+      }
+
+      .arc-markdown .markdown li {
+        margin-bottom: var(--space-xs);
+      }
+
+      .arc-markdown .markdown li:last-child { margin-bottom: 0; }
+
+      .arc-markdown .markdown hr {
+        border: none;
+        height: 1px;
+        background: var(--border-subtle);
+        margin: var(--space-xl) 0;
+      }
+
+      .arc-markdown .markdown img {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--radius-md);
+        margin: var(--space-sm) 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-markdown *,
+        .arc-markdown *::before,
+        .arc-markdown *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-meter */
+.arc-meter { display: block; }
+
+      .arc-meter .meter {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+      }
+
+      .arc-meter .meter__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .arc-meter .meter__label {
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        color: var(--text-secondary);
+        user-select: none;
+      }
+
+      .arc-meter .meter__value {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        color: var(--text-muted);
+      }
+
+      .arc-meter .meter__track {
+        position: relative;
+        width: 100%;
+        height: 8px;
+        background: var(--bg-elevated);
+        border-radius: var(--radius-full);
+        overflow: hidden;
+      }
+
+      .arc-meter .meter__fill {
+        height: 100%;
+        border-radius: var(--radius-full);
+        transition: width var(--transition-base), background var(--transition-base);
+        min-width: 0;
+      }
+
+      .arc-meter .meter__fill--success { background: var(--color-success); }
+      .arc-meter .meter__fill--warning { background: var(--color-warning); }
+      .arc-meter .meter__fill--error   { background: var(--color-error); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-meter *,
+        .arc-meter *::before,
+        .arc-meter *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-scroll-area */
+.arc-scroll-area {
+        display: block;
+        position: relative;
+      }
+
+      .arc-scroll-area .scroll-area {
+        overflow: hidden;
+        scroll-behavior: smooth;
+        border-radius: inherit;
+      }
+
+      /* Orientation variants */
+      .arc-scroll-area[data-orientation="vertical"] .scroll-area,
+      .arc-scroll-area:not([data-orientation]) .scroll-area {
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      .arc-scroll-area[data-orientation="horizontal"] .scroll-area {
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+
+      .arc-scroll-area[data-orientation="both"] .scroll-area {
+        overflow: auto;
+      }
+
+      /* Webkit scrollbar styling */
+      .arc-scroll-area .scroll-area::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      .arc-scroll-area .scroll-area::-webkit-scrollbar-track {
+        background: var(--bg-elevated);
+        border-radius: var(--radius-full);
+      }
+
+      .arc-scroll-area .scroll-area::-webkit-scrollbar-thumb {
+        background: var(--border-bright);
+        border-radius: var(--radius-full);
+        transition: background var(--transition-fast);
+      }
+
+      .arc-scroll-area .scroll-area::-webkit-scrollbar-thumb:hover {
+        background: var(--text-ghost);
+      }
+
+      .arc-scroll-area .scroll-area::-webkit-scrollbar-corner {
+        background: var(--bg-elevated);
+      }
+
+      /* Firefox scrollbar styling */
+      .arc-scroll-area .scroll-area {
+        scrollbar-width: thin;
+        scrollbar-color: var(--border-bright) var(--bg-elevated);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-scroll-area *,
+        .arc-scroll-area *::before,
+        .arc-scroll-area *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-skeleton */
+.arc-skeleton { display: block; }
+
+      @keyframes shimmer {
+        0%   { background-position: -200% 0; }
+        100% { background-position: 200% 0; }
+      }
+
+      .arc-skeleton .skeleton {
+        background: linear-gradient(
+          90deg,
+          var(--bg-elevated) 25%,
+          var(--border-subtle) 37%,
+          var(--bg-elevated) 63%
+        );
+        background-size: 200% 100%;
+        animation: shimmer 1.8s ease-in-out infinite;
+      }
+
+      .arc-skeleton[data-variant="text"] .skeleton {
+        width: 100%;
+        height: 1em;
+        border-radius: var(--radius-sm);
+      }
+
+      .arc-skeleton[data-variant="circle"] .skeleton {
+        border-radius: var(--radius-full);
+      }
+
+      .arc-skeleton[data-variant="rect"] .skeleton {
+        border-radius: var(--radius-md);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-skeleton *,
+        .arc-skeleton *::before,
+        .arc-skeleton *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-spinner */
+.arc-spinner { display: inline-flex; }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+
+      .arc-spinner .spinner {
+        border-radius: var(--radius-full);
+        border-style: solid;
+        border-color: var(--accent-primary);
+        border-top-color: transparent;
+        animation: spin 0.75s linear infinite;
+        box-sizing: border-box;
+      }
+
+      .arc-spinner[data-size="sm"] .spinner { width: 16px; height: 16px; border-width: 2px; }
+      .arc-spinner[data-size="md"] .spinner { width: 24px; height: 24px; border-width: 2.5px; }
+      .arc-spinner[data-size="lg"] .spinner { width: 40px; height: 40px; border-width: 3px; }
+
+      .arc-spinner[data-variant="primary"] .spinner {
+        border-color: var(--accent-primary);
+        border-top-color: transparent;
+      }
+
+      .arc-spinner[data-variant="secondary"] .spinner {
+        border-color: var(--accent-secondary);
+        border-top-color: transparent;
+      }
+
+      .arc-spinner[data-variant="white"] .spinner {
+        border-color: var(--text-primary);
+        border-top-color: transparent;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-spinner *,
+        .arc-spinner *::before,
+        .arc-spinner *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-stack */
+.arc-stack {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-md);
+        align-items: stretch;
+        justify-content: flex-start;
+      }
+
+      /* Direction */
+      .arc-stack[data-direction="horizontal"] { flex-direction: row; }
+      .arc-stack[data-direction="vertical"]   { flex-direction: column; }
+
+      /* Gap */
+      .arc-stack[data-gap="xs"]  { gap: var(--space-xs); }
+      .arc-stack[data-gap="sm"]  { gap: var(--space-sm); }
+      .arc-stack[data-gap="md"]  { gap: var(--space-md); }
+      .arc-stack[data-gap="lg"]  { gap: var(--space-lg); }
+      .arc-stack[data-gap="xl"]  { gap: var(--space-xl); }
+      .arc-stack[data-gap="2xl"] { gap: var(--space-2xl); }
+
+      /* Align */
+      .arc-stack[data-align="start"]   { align-items: flex-start; }
+      .arc-stack[data-align="center"]  { align-items: center; }
+      .arc-stack[data-align="end"]     { align-items: flex-end; }
+      .arc-stack[data-align="stretch"] { align-items: stretch; }
+
+      /* Justify */
+      .arc-stack[data-justify="start"]   { justify-content: flex-start; }
+      .arc-stack[data-justify="center"]  { justify-content: center; }
+      .arc-stack[data-justify="end"]     { justify-content: flex-end; }
+      .arc-stack[data-justify="between"] { justify-content: space-between; }
+      .arc-stack[data-justify="around"]  { justify-content: space-around; }
+
+      /* Wrap */
+      .arc-stack[wrap] { flex-wrap: wrap; }
+
+/* arc-stat */
+.arc-stat { display: block; }
+
+      .arc-stat .stat {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-sm);
+        text-align: center;
+        padding: var(--space-lg) var(--space-md);
+      }
+
+      .arc-stat .stat__value {
+        font-size: clamp(32px, 4.5vw, 48px);
+        font-weight: 200;
+        letter-spacing: -1px;
+        line-height: 1;
+        background: var(--gradient-accent-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        filter: drop-shadow(0 0 16px rgba(var(--accent-primary-rgb),0.3))
+                drop-shadow(0 0 40px rgba(var(--accent-secondary-rgb),0.12));
+      }
+
+      .arc-stat .stat__rule {
+        width: 24px;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
+        opacity: 0.4;
+      }
+
+      .arc-stat .stat__label {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--label-inline-size);
+        letter-spacing: var(--label-inline-spacing);
+        text-transform: uppercase;
+        color: var(--text-muted);
+      }
+
+/* arc-stepper */
+.arc-stepper { display: block; }
+
+      .arc-stepper .stepper {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--space-xs);
+      }
+
+      .arc-stepper .step {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        position: relative;
+        padding: 0 var(--space-sm);
+      }
+
+      .arc-stepper .step__header {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        position: relative;
+      }
+
+      .arc-stepper .step__circle {
+        width: 36px;
+        height: 36px;
+        border-radius: var(--radius-full);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--font-accent);
+        font-size: var(--text-sm);
+        font-weight: 700;
+        letter-spacing: 1px;
+        flex-shrink: 0;
+        position: relative;
+        z-index: 1;
+        transition: background var(--transition-base),
+                    color var(--transition-base),
+                    border-color var(--transition-base),
+                    box-shadow var(--transition-base);
+        margin: 0 auto;
+        box-sizing: border-box;
+      }
+
+      /* Upcoming (default) */
+      .arc-stepper .step__circle {
+        background: var(--bg-elevated);
+        color: var(--text-ghost);
+        border: 1px solid var(--border-default);
+      }
+
+      /* Active */
+      .arc-stepper .step--active .step__circle {
+        background: transparent;
+        color: var(--accent-primary);
+        border: 2px solid var(--accent-primary);
+        box-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.25);
+      }
+
+      /* Completed */
+      .arc-stepper .step--completed .step__circle {
+        background: var(--accent-primary);
+        color: var(--text-primary);
+        border: 2px solid var(--accent-primary);
+      }
+
+      .arc-stepper .step__line {
+        position: absolute;
+        top: 50%;
+        height: 1px;
+        background: var(--border-default);
+        transform: translateY(-50%);
+      }
+
+      .arc-stepper .step__line--left {
+        left: calc(-1 * var(--space-xs) - var(--space-sm));
+        right: calc(50% + 20px);
+      }
+
+      .arc-stepper .step__line--right {
+        left: calc(50% + 20px);
+        right: calc(-1 * var(--space-xs) - var(--space-sm));
+      }
+
+      .arc-stepper .step--completed .step__line--left,
+      .arc-stepper .step--active .step__line--left {
+        background: var(--accent-primary);
+      }
+
+      .arc-stepper .step--completed .step__line--right {
+        background: var(--accent-primary);
+      }
+
+      .arc-stepper .step__label {
+        margin-top: var(--space-md);
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        text-align: center;
+        transition: color var(--transition-base);
+      }
+
+      .arc-stepper .step--active .step__label {
+        color: var(--text-primary);
+      }
+
+      .arc-stepper .step--completed .step__label {
+        color: var(--text-secondary);
+      }
+
+      .arc-stepper .step__check {
+        font-size: var(--text-sm);
+        line-height: 1;
+      }
+
+      .arc-stepper .stepper__slot-host { display: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-stepper *,
+        .arc-stepper *::before,
+        .arc-stepper *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-table */
+.arc-table {
+        display: block;
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+      }
+
+      .arc-table .table-wrap {
+        overflow-x: auto;
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: var(--text-sm);
+        color: var(--text-primary);
+      }
+
+      thead {
+        background: var(--bg-elevated);
+      }
+
+      th {
+        text-align: left;
+        padding: var(--space-sm) var(--space-md);
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--text-xs);
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+        border-bottom: 1px solid var(--border-default);
+        white-space: nowrap;
+      }
+
+      .arc-table[compact] th {
+        padding: var(--space-xs) var(--space-sm);
+      }
+
+      td {
+        padding: var(--space-sm) var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+        color: var(--text-secondary);
+        line-height: 1.5;
+        font-size: var(--text-sm);
+      }
+
+      .arc-table[compact] td {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: var(--text-sm);
+      }
+
+      tr:last-child td {
+        border-bottom: none;
+      }
+
+      .arc-table[striped] tbody tr:nth-child(odd) {
+        background: var(--bg-surface);
+      }
+
+      .arc-table[striped] tbody tr:nth-child(even) {
+        background: var(--bg-card);
+      }
+
+      tbody tr {
+        transition: background var(--transition-fast);
+      }
+
+      tbody tr:hover {
+        background: var(--bg-hover);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-table *,
+        .arc-table *::before,
+        .arc-table *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-text */
+.arc-text { display: block; }
+      .arc-text[data-variant="accent"],
+      .arc-text[data-variant="code"] { display: inline; }
+
+      .arc-text .text--display {
+        font-size: var(--display-xl-size);
+        font-weight: var(--display-xl-weight);
+        letter-spacing: var(--display-xl-spacing);
+        line-height: 1.2;
+        padding-bottom: 0.1em;
+        background: var(--gradient-display-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      .arc-text .text--heading {
+        font-size: var(--heading-size);
+        font-weight: var(--heading-weight);
+        color: var(--text-primary);
+        line-height: 1.4;
+        text-wrap: balance;
+        margin-bottom: var(--space-md);
+      }
+
+      .arc-text .text--body {
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: var(--body-weight);
+        line-height: var(--body-lh);
+        text-wrap: balance;
+      }
+
+      .arc-text .text--muted { color: var(--text-muted); }
+      .arc-text .text--ghost { color: var(--text-ghost); }
+
+      .arc-text .text--accent {
+        font-family: var(--font-accent);
+        font-weight: var(--ui-accent-weight);
+        font-size: var(--ui-accent-size);
+        letter-spacing: var(--ui-accent-spacing);
+        background: var(--gradient-accent-text);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        filter: drop-shadow(0 0 12px var(--accent-primary-glow));
+      }
+
+      .arc-text .text--label {
+        font-family: var(--font-accent);
+        font-weight: var(--section-title-weight);
+        font-size: var(--section-title-size);
+        letter-spacing: var(--section-title-spacing);
+        text-transform: uppercase;
+        color: var(--text-muted);
+      }
+
+      .arc-text .text--wordmark {
+        font-weight: var(--wordmark-weight);
+        font-size: var(--wordmark-size);
+        letter-spacing: var(--wordmark-spacing);
+        text-transform: uppercase;
+        color: var(--text-primary);
+        text-shadow: 0 0 30px var(--accent-primary-glow);
+      }
+
+      .arc-text .text--code {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        line-height: var(--code-lh);
+        color: var(--accent-secondary);
+        text-shadow: 0 0 14px rgba(var(--accent-secondary-rgb),0.3);
+      }
+
+/* arc-timeline */
+.arc-timeline { display: block; }
+
+      .arc-timeline .timeline {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+      }
+
+      .arc-timeline .timeline__item {
+        display: flex;
+        gap: var(--space-lg);
+        position: relative;
+        padding-bottom: var(--space-xl);
+      }
+
+      .arc-timeline .timeline__item:last-child { padding-bottom: 0; }
+
+      .arc-timeline .timeline__marker {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex-shrink: 0;
+        width: 24px;
+        position: relative;
+      }
+
+      .arc-timeline .timeline__dot {
+        width: 12px;
+        height: 12px;
+        border-radius: var(--radius-full);
+        background: var(--accent-primary);
+        border: 2px solid var(--bg-deep);
+        box-shadow:
+          0 0 0 1px rgba(var(--accent-primary-rgb), 0.3),
+          0 0 8px rgba(var(--accent-primary-rgb), 0.25);
+        flex-shrink: 0;
+        z-index: 1;
+        position: relative;
+        transition: box-shadow var(--transition-fast), transform var(--transition-fast);
+      }
+
+      .arc-timeline .timeline__item:hover .timeline__dot {
+        box-shadow:
+          0 0 0 2px rgba(var(--accent-primary-rgb), 0.4),
+          0 0 14px rgba(var(--accent-primary-rgb), 0.4);
+        transform: scale(1.2);
+      }
+
+      .arc-timeline .timeline__line {
+        position: absolute;
+        top: 16px;
+        bottom: calc(-1 * var(--space-xl));
+        left: 50%;
+        width: 1px;
+        transform: translateX(-50%);
+        background: linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0.4), var(--border-default) 40%);
+      }
+
+      .arc-timeline .timeline__item:last-child .timeline__line { display: none; }
+
+      .arc-timeline .timeline__content {
+        flex: 1;
+        min-width: 0;
+        padding-top: 0;
+      }
+
+      .arc-timeline .timeline__title {
+        margin: 0;
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        color: var(--text-primary);
+        line-height: 1.4;
+        transition: color var(--transition-fast);
+      }
+
+      .arc-timeline .timeline__item:hover .timeline__title {
+        color: var(--accent-primary);
+      }
+
+      .arc-timeline .timeline__desc {
+        margin: var(--space-sm) 0 0;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.6;
+        color: var(--text-muted);
+      }
+
+      .arc-timeline .timeline__date {
+        margin: var(--space-sm) 0 0;
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--text-ghost);
+      }
+
+      .arc-timeline .timeline__slot-host { display: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-timeline *,
+        .arc-timeline *::before,
+        .arc-timeline *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-value-card */
+.arc-value-card { display: flex; flex-direction: column; height: 100%; }
+
+      .arc-value-card .card {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        gap: var(--space-lg);
+        padding: var(--space-lg);
+        flex: 1;
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-lg);
+        transition: border-color var(--transition-base), box-shadow var(--transition-base);
+      }
+
+      .arc-value-card .card:hover {
+        border-color: var(--border-bright);
+        box-shadow: 0 0 20px rgba(var(--accent-secondary-rgb),0.06);
+      }
+
+      .arc-value-card .card__icon {
+        flex-shrink: 0;
+        color: var(--accent-secondary);
+        font-size: 24px; /* icon size, not text */
+        line-height: 1;
+        padding-top: 2px;
+      }
+
+      .arc-value-card .card__text {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+      }
+
+      .arc-value-card .card__title {
+        font-size: 17px; /* heading size, keep hardcoded */
+        font-weight: 600;
+        color: var(--text-primary);
+        margin: 0;
+      }
+
+      .arc-value-card .card__desc {
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        line-height: 1.7;
+        margin: 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-value-card *,
+        .arc-value-card *::before,
+        .arc-value-card *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-button */
+.arc-button { display: inline-flex; }
+      .arc-button[disabled] { pointer-events: none; }
+
+      .arc-button .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-sm);
+        font-family: var(--font-accent);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        border: 1px solid transparent;
+        border-radius: var(--radius-md);
+        cursor: pointer;
+        transition:
+          background var(--transition-base),
+          border-color var(--transition-base),
+          box-shadow var(--transition-base),
+          color var(--transition-base),
+          transform var(--transition-fast);
+        text-decoration: none;
+        white-space: nowrap;
+        box-sizing: border-box;
+        min-height: var(--touch-min);
+      }
+
+      /* Sizes */
+      .arc-button[data-size="sm"] .btn { font-size: var(--text-xs); padding: var(--space-xs) var(--space-md); }
+      .arc-button:not([data-size]) .btn,
+      .arc-button[data-size="md"] .btn { font-size: var(--text-xs); padding: var(--space-sm) var(--space-lg); }
+      .arc-button[data-size="lg"] .btn { font-size: var(--text-xs); padding: var(--space-md) var(--space-xl); letter-spacing: 3px; }
+
+      /* Primary */
+      .arc-button:not([data-variant]) .btn,
+      .arc-button[data-variant="primary"] .btn {
+        background: var(--accent-primary);
+        color: var(--bg-deep);
+        border-color: var(--accent-primary);
+      }
+      .arc-button:not([data-variant]) .btn:hover,
+      .arc-button[data-variant="primary"] .btn:hover { box-shadow: var(--glow-primary); }
+      .arc-button:not([data-variant]) .btn:active,
+      .arc-button[data-variant="primary"] .btn:active { transform: scale(0.97); box-shadow: 0 0 8px rgba(var(--accent-primary-rgb),0.5); }
+
+      /* Secondary */
+      .arc-button[data-variant="secondary"] .btn {
+        background: transparent;
+        color: var(--text-primary);
+        border-color: var(--border-default);
+      }
+      .arc-button[data-variant="secondary"] .btn:hover {
+        border-color: var(--accent-primary);
+        color: var(--accent-primary);
+        box-shadow: 0 0 20px var(--accent-primary-ring);
+      }
+      .arc-button[data-variant="secondary"] .btn:active {
+        transform: scale(0.97);
+        background: rgba(var(--accent-primary-rgb),0.05);
+      }
+
+      /* Ghost */
+      .arc-button[data-variant="ghost"] .btn {
+        background: transparent;
+        color: var(--text-muted);
+        border-color: transparent;
+      }
+      .arc-button[data-variant="ghost"] .btn:hover {
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+      .arc-button[data-variant="ghost"] .btn:active {
+        transform: scale(0.97);
+        background: var(--bg-elevated);
+      }
+
+      /* Focus */
+      .arc-button .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
+
+      /* Disabled */
+      .arc-button[disabled] .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-button *,
+        .arc-button *::before,
+        .arc-button *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-icon-button */
+.arc-icon-button { display: inline-flex; }
+      .arc-icon-button[disabled] { pointer-events: none; }
+
+      .arc-icon-button .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-xs);
+        border: 1px solid transparent;
+        border-radius: var(--radius-md);
+        cursor: pointer;
+        transition:
+          background var(--transition-base),
+          border-color var(--transition-base),
+          box-shadow var(--transition-base),
+          color var(--transition-base),
+          transform var(--transition-fast);
+        text-decoration: none;
+        box-sizing: border-box;
+        color: inherit;
+      }
+
+      /* Icon-only (square) */
+      .arc-icon-button .btn:not(.btn--has-text) { aspect-ratio: 1; }
+
+      /* With text */
+      .arc-icon-button .btn--has-text {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        white-space: nowrap;
+      }
+
+      .arc-icon-button .btn__text {
+        line-height: 1;
+      }
+
+      /* Sizes — icon-only */
+      .arc-icon-button[data-size="xs"] .btn:not(.btn--has-text) { width: 28px; height: 28px; border-radius: var(--radius-sm); }
+      .arc-icon-button[data-size="sm"] .btn:not(.btn--has-text) { width: 32px; height: 32px; }
+      .arc-icon-button:not([data-size]) .btn:not(.btn--has-text),
+      .arc-icon-button[data-size="md"] .btn:not(.btn--has-text) { width: 36px; height: 36px; }
+      .arc-icon-button[data-size="lg"] .btn:not(.btn--has-text) { width: 44px; height: 44px; }
+
+      /* Sizes — with text */
+      .arc-icon-button[data-size="xs"] .btn--has-text { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
+      .arc-icon-button[data-size="sm"] .btn--has-text { padding: calc(var(--space-xs) + 2px) calc(var(--space-sm) + 2px); font-size: var(--text-xs); }
+      .arc-icon-button:not([data-size]) .btn--has-text,
+      .arc-icon-button[data-size="md"] .btn--has-text { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
+      .arc-icon-button[data-size="lg"] .btn--has-text { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); }
+
+      /* Ghost (default) */
+      .arc-icon-button:not([data-variant]) .btn,
+      .arc-icon-button[data-variant="ghost"] .btn {
+        background: transparent;
+        color: var(--text-muted);
+        border-color: transparent;
+      }
+      .arc-icon-button:not([data-variant]) .btn:hover,
+      .arc-icon-button[data-variant="ghost"] .btn:hover {
+        color: var(--text-primary);
+        background: var(--bg-hover);
+      }
+      .arc-icon-button:not([data-variant]) .btn:active,
+      .arc-icon-button[data-variant="ghost"] .btn:active {
+        transform: scale(0.93);
+        background: var(--bg-elevated);
+      }
+
+      /* Secondary */
+      .arc-icon-button[data-variant="secondary"] .btn {
+        background: transparent;
+        color: var(--text-secondary);
+        border-color: var(--border-default);
+      }
+      .arc-icon-button[data-variant="secondary"] .btn:hover {
+        border-color: var(--accent-primary);
+        color: var(--accent-primary);
+        box-shadow: 0 0 16px var(--accent-primary-ring);
+      }
+      .arc-icon-button[data-variant="secondary"] .btn:active {
+        transform: scale(0.93);
+        background: rgba(var(--accent-primary-rgb), 0.05);
+      }
+
+      /* Primary */
+      .arc-icon-button[data-variant="primary"] .btn {
+        background: var(--accent-primary);
+        color: var(--bg-deep);
+        border-color: var(--accent-primary);
+      }
+      .arc-icon-button[data-variant="primary"] .btn:hover {
+        box-shadow: var(--glow-primary);
+      }
+      .arc-icon-button[data-variant="primary"] .btn:active {
+        transform: scale(0.93);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.5);
+      }
+
+      /* Focus */
+      .arc-icon-button .btn:focus-visible { outline: none; box-shadow: var(--focus-glow); }
+
+      /* Disabled */
+      .arc-icon-button[disabled] .btn { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-icon-button *,
+        .arc-icon-button *::before,
+        .arc-icon-button *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-footer */
+.arc-footer {
+        display: block;
+        background: var(--bg-deep);
+        color: var(--text-secondary);
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+      }
+
+      .arc-footer[border] .footer {
+        border-top: 1px solid var(--border-subtle);
+      }
+
+      .arc-footer .footer {
+        padding: var(--space-2xl) var(--space-xl) var(--space-xl);
+      }
+
+      .arc-footer[compact] .footer {
+        padding: var(--space-lg) var(--space-md) var(--space-md);
+      }
+
+      .arc-footer .footer__brand {
+        margin-bottom: var(--space-xl);
+      }
+
+      .arc-footer[compact] .footer__brand {
+        margin-bottom: var(--space-md);
+      }
+
+      .arc-footer .footer__columns {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: var(--space-xl);
+        margin-bottom: var(--space-xl);
+      }
+
+      .arc-footer[compact] .footer__columns {
+        gap: var(--space-md);
+        margin-bottom: var(--space-md);
+      }
+
+      .arc-footer .footer__social {
+        display: flex;
+        align-items: center;
+        gap: var(--space-md);
+        margin-bottom: var(--space-lg);
+      }
+
+      .arc-footer[compact] .footer__social {
+        margin-bottom: var(--space-sm);
+      }
+
+      .arc-footer .footer__legal {
+        padding-top: var(--space-md);
+        border-top: 1px solid var(--border-subtle);
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+      }
+
+/* arc-link */
+.arc-link { display: inline; }
+
+      .arc-link .link {
+        font-family: var(--font-body);
+        font-size: inherit;
+        color: var(--accent-primary);
+        text-decoration: none;
+        cursor: pointer;
+        transition:
+          color var(--transition-fast),
+          opacity var(--transition-fast);
+        border: none;
+        background: none;
+        padding: 0;
+        min-height: var(--touch-min);
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .arc-link .link:hover {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      .arc-link[data-variant="muted"] .link {
+        color: var(--text-muted);
+      }
+      .arc-link[data-variant="muted"] .link:hover {
+        color: var(--text-primary);
+      }
+
+      .arc-link[data-variant="nav"] .link {
+        color: var(--text-secondary);
+        font-size: var(--text-sm);
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+      }
+      .arc-link[data-variant="nav"] .link:hover {
+        color: var(--text-primary);
+        text-decoration: none;
+      }
+
+      .arc-link[active] .link {
+        color: var(--accent-primary);
+      }
+
+      .arc-link .link:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+        border-radius: var(--radius-xs);
+      }
+
+      .arc-link .link__external-icon {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-left: 2px; /* cosmetic micro-spacing for external icon */
+        vertical-align: middle;
+        opacity: 0.6;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-link *,
+        .arc-link *::before,
+        .arc-link *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-top-bar */
+.arc-top-bar {
+        display: block;
+        width: 100%;
+        z-index: 100;
+      }
+
+      .arc-top-bar[fixed] {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+      }
+
+      .arc-top-bar .topbar {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: var(--nav-height);
+        padding: 0 var(--space-lg);
+        background: color-mix(in srgb, var(--bg-deep) 85%, transparent);
+        backdrop-filter: blur(12px) saturate(130%);
+        -webkit-backdrop-filter: blur(12px) saturate(130%);
+        border-bottom: 1px solid var(--border-subtle);
+        gap: var(--space-md);
+      }
+
+      .arc-top-bar .topbar__glow {
+        position: absolute;
+        bottom: -1px;
+        left: 20%;
+        right: 20%;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, rgba(var(--accent-secondary-rgb), 0.2), rgba(var(--accent-primary-rgb), 0.15), transparent);
+        opacity: 0;
+        transition: opacity var(--transition-slow);
+        pointer-events: none;
+      }
+
+      .arc-top-bar[scrolled] .topbar__glow {
+        opacity: 1;
+      }
+
+      .arc-top-bar .topbar__brand {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        color: var(--text-primary);
+        text-decoration: none;
+        flex: 0 0 auto;
+        overflow: visible;
+      }
+
+      .arc-top-bar .topbar__heading {
+        font-family: var(--font-body);
+        font-size: var(--wordmark-size);
+        font-weight: var(--wordmark-weight);
+        letter-spacing: var(--wordmark-spacing);
+        text-transform: uppercase;
+      }
+
+      .arc-top-bar .topbar__center {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .arc-top-bar .topbar__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .arc-top-bar .topbar__menu-btn {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        min-width: 36px;
+        aspect-ratio: 1;
+        background: none;
+        border: 1px solid var(--border-subtle);
+        color: var(--text-primary);
+        cursor: pointer;
+        padding: 0;
+        border-radius: var(--radius-sm);
+        transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
+      }
+
+      .arc-top-bar .topbar__menu-btn:hover {
+        background: var(--bg-hover);
+        border-color: var(--border-default);
+      }
+
+      .arc-top-bar .topbar__menu-btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .arc-top-bar .topbar__menu-btn--open {
+        border-color: rgba(var(--accent-primary-rgb), 0.3);
+        background: rgba(var(--accent-primary-rgb), 0.06);
+      }
+
+      .arc-top-bar .topbar__hamburger {
+        width: 16px;
+        height: 12px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      .arc-top-bar .topbar__hamburger-line {
+        display: block;
+        width: 100%;
+        height: 1.5px;
+        background: currentColor;
+        border-radius: 1px; /* cosmetic rounding on 1.5px hamburger lines -- intentionally not tokenized */
+        transition: transform 400ms var(--ease-out-expo), opacity 250ms ease, width 400ms var(--ease-out-expo);
+        transform-origin: center;
+      }
+
+      .arc-top-bar .topbar__hamburger-line:nth-child(2) {
+        width: 100%;
+      }
+
+      .arc-top-bar .topbar__menu-btn--open .topbar__hamburger-line:nth-child(1) {
+        transform: translateY(5.25px) rotate(45deg);
+      }
+
+      .arc-top-bar .topbar__menu-btn--open .topbar__hamburger-line:nth-child(2) {
+        opacity: 0;
+        width: 0;
+      }
+
+      .arc-top-bar .topbar__menu-btn--open .topbar__hamburger-line:nth-child(3) {
+        transform: translateY(-5.25px) rotate(-45deg);
+      }
+
+      @media (max-width: 900px) {
+        .arc-top-bar .topbar__menu-btn { display: flex; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-top-bar *,
+        .arc-top-bar *::before,
+        .arc-top-bar *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+
+/* arc-auth-shell */
+.arc-auth-shell {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      /* Centered variant */
+      .arc-auth-shell .auth-shell--centered {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        background: var(--bg-surface);
+        padding: var(--space-xl) var(--space-lg);
+        box-sizing: border-box;
+      }
+
+      .arc-auth-shell .auth-shell--centered .logo {
+        margin-bottom: var(--space-xl);
+        text-align: center;
+      }
+
+      .arc-auth-shell .auth-shell--centered .card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        padding: var(--space-xl);
+        width: 100%;
+        max-width: 420px;
+        box-sizing: border-box;
+      }
+
+      .arc-auth-shell .auth-shell--centered .footer {
+        margin-top: var(--space-lg);
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+        text-align: center;
+      }
+
+      /* Split variant */
+      .arc-auth-shell .auth-shell--split {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        min-height: 100vh;
+        box-sizing: border-box;
+      }
+
+      .arc-auth-shell .auth-shell--split .form-side {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-surface);
+        padding: var(--space-xl) var(--space-lg);
+      }
+
+      .arc-auth-shell .auth-shell--split .logo {
+        margin-bottom: var(--space-xl);
+        text-align: center;
+      }
+
+      .arc-auth-shell .auth-shell--split .card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        padding: var(--space-xl);
+        width: 100%;
+        max-width: 420px;
+        box-sizing: border-box;
+      }
+
+      .arc-auth-shell .auth-shell--split .footer {
+        margin-top: var(--space-lg);
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+        text-align: center;
+      }
+
+      .arc-auth-shell .auth-shell--split .aside-side {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-deep);
+        padding: var(--space-xl);
+      }
+
+      @media (max-width: 768px) {
+        .arc-auth-shell .auth-shell--split {
+          grid-template-columns: 1fr;
+        }
+
+        .arc-auth-shell .auth-shell--split .aside-side {
+          display: none;
+        }
+      }
+
+/* arc-container */
+.arc-container { display: block; }
+
+      .arc-container .container {
+        width: 100%;
+        max-width: var(--max-width);
+        margin-inline: auto;
+        padding-inline: var(--space-lg);
+      }
+
+      .arc-container[narrow] .container {
+        max-width: var(--max-width-sm);
+      }
+
+/* arc-dashboard-grid */
+.arc-dashboard-grid {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .arc-dashboard-grid .dashboard-grid {
+        display: grid;
+        grid-template-columns: repeat(
+          auto-fill,
+          minmax(var(--min-col, 280px), 1fr)
+        );
+        gap: var(--gap, var(--space-lg));
+        padding: var(--space-lg);
+      }
+
+      .arc-dashboard-grid[data-explicit-columns] .dashboard-grid {
+        grid-template-columns: repeat(var(--columns, 3), 1fr);
+      }
+
+/* arc-page-header */
+.arc-page-header {
+        display: block;
+        font-family: var(--font-body);
+      }
+
+      .arc-page-header .page-header {
+        padding: var(--space-lg) 0 var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .arc-page-header .page-header__breadcrumb {
+        margin-bottom: var(--space-sm);
+      }
+
+      .arc-page-header .page-header__title-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-md);
+        flex-wrap: wrap;
+      }
+
+      .arc-page-header .page-header__heading {
+        margin: 0;
+        font-family: var(--font-body);
+        font-size: 28px; /* size-variant, keep hardcoded */
+        font-weight: 700;
+        color: var(--text-primary);
+        line-height: 1.2;
+      }
+
+      .arc-page-header .page-header__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .arc-page-header .page-header__description {
+        margin-top: var(--space-sm);
+        color: var(--text-secondary);
+        font-size: var(--body-size);
+        line-height: 1.5;
+      }
+
+      .arc-page-header .page-header__tabs {
+        margin-top: var(--space-md);
+      }
+
+      .arc-page-header .page-header__content {
+        margin-top: var(--space-md);
+      }
+
+/* arc-page-layout */
+.arc-page-layout {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .arc-page-layout .page-layout {
+        padding: var(--space-xl) var(--space-lg);
+        gap: var(--gap);
+        min-height: 100%;
+        box-sizing: border-box;
+      }
+
+      /* Centered layout */
+      .arc-page-layout([layout='centered']) .page-layout {
+        display: block;
+        max-width: var(--max-width);
+        margin: 0 auto;
+      }
+
+      /* Wide layout */
+      .arc-page-layout([layout='wide']) .page-layout {
+        display: block;
+      }
+
+      /* Sidebar left layout */
+      .arc-page-layout([layout='sidebar-left']) .page-layout {
+        display: grid;
+        grid-template-columns: 240px 1fr;
+      }
+
+      /* Sidebar right layout */
+      .arc-page-layout([layout='sidebar-right']) .page-layout {
+        display: grid;
+        grid-template-columns: 1fr 300px;
+      }
+
+      .arc-page-layout .sidebar {
+        display: none;
+      }
+
+      .arc-page-layout([layout='sidebar-left']) .sidebar {
+        display: block;
+      }
+
+      .arc-page-layout .aside {
+        display: none;
+      }
+
+      .arc-page-layout([layout='sidebar-right']) .aside {
+        display: block;
+      }
+
+      .arc-page-layout .main {
+        min-width: 0;
+      }
+
+      @media (max-width: 768px) {
+        .arc-page-layout([layout='sidebar-left']) .page-layout,
+        .arc-page-layout([layout='sidebar-right']) .page-layout {
+          grid-template-columns: 1fr;
+        }
+      }
+
+/* arc-section */
+.arc-section { display: block; }
+
+      .arc-section .section {
+        width: 100%;
+        max-width: var(--max-width);
+        margin-inline: auto;
+        padding: var(--space-3xl) var(--space-lg);
+        scroll-margin-top: var(--space-md);
+      }
+
+      @media (max-width: 768px) {
+        .arc-section .section { padding: var(--space-2xl) var(--space-md); }
+      }
+
+      .arc-section .section__label {
+        display: block;
+        font-family: var(--font-accent);
+        font-weight: var(--section-title-weight);
+        font-size: var(--section-title-size);
+        letter-spacing: var(--section-title-spacing);
+        text-transform: uppercase;
+        color: var(--text-muted);
+        margin-bottom: var(--space-lg);
+      }
+
+/* arc-settings-layout */
+.arc-settings-layout {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      /* Left nav layout */
+      .arc-settings-layout .settings-layout--left {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        min-height: 100%;
+      }
+
+      .arc-settings-layout .settings-layout--left .nav {
+        padding: var(--space-lg);
+        background: var(--bg-card);
+        border-right: 1px solid var(--border-subtle);
+      }
+
+      .arc-settings-layout .settings-layout--left .content {
+        padding: var(--space-xl);
+        flex: 1;
+      }
+
+      /* Top nav layout */
+      .arc-settings-layout .settings-layout--top {
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+      }
+
+      .arc-settings-layout .settings-layout--top .nav {
+        padding: var(--space-lg);
+        background: var(--bg-card);
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .arc-settings-layout .settings-layout--top .content {
+        padding: var(--space-xl);
+        flex: 1;
+      }
+
+      @media (max-width: 768px) {
+        .arc-settings-layout .settings-layout--left {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .arc-settings-layout .settings-layout--left .nav {
+          border-right: none;
+          border-bottom: 1px solid var(--border-subtle);
+        }
+      }
+
+/* arc-status-bar */
+.arc-status-bar {
+        display: block;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+      }
+
+      .arc-status-bar([position='fixed']) {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+      }
+
+      .arc-status-bar .status-bar {
+        display: flex;
+        align-items: center;
+        height: 28px;
+        padding: 0 var(--space-sm);
+        background: var(--bg-deep);
+        border-top: 1px solid var(--border-subtle);
+        gap: var(--space-sm);
+      }
+
+      .arc-status-bar .status-bar__left {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .arc-status-bar .status-bar__center {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex: 1;
+        justify-content: center;
+      }
+
+      .arc-status-bar .status-bar__right {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+        margin-left: auto;
+      }
+
+/* arc-toolbar */
+.arc-toolbar {
+        display: block;
+        font-family: var(--font-body);
+      }
+
+      .arc-toolbar[sticky] {
+        position: sticky;
+        top: 0;
+        z-index: 50;
+      }
+
+      .arc-toolbar .toolbar {
+        display: flex;
+        align-items: center;
+        height: 48px;
+        padding: 0 var(--space-md);
+        background: var(--bg-card);
+        gap: var(--space-sm);
+      }
+
+      .arc-toolbar([size='sm']) .toolbar {
+        height: 36px;
+        padding: 0 var(--space-sm);
+      }
+
+      .arc-toolbar[border] .toolbar {
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .arc-toolbar .toolbar__start {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .arc-toolbar .toolbar__center {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex: 1;
+        justify-content: center;
+      }
+
+      .arc-toolbar .toolbar__end {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+        margin-left: auto;
+      }
+
+/* arc-progress */
+.arc-progress { display: block; }
+
+      .arc-progress .progress__label {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--label-inline-size);
+        letter-spacing: var(--label-inline-spacing);
+        text-transform: uppercase;
+        color: var(--text-muted);
+        margin-bottom: var(--space-xs);
+        display: block;
+      }
+
+      /* Bar */
+      .arc-progress .progress__track {
+        width: 100%;
+        border-radius: var(--radius-full);
+        background: var(--border-subtle);
+        overflow: hidden;
+      }
+
+      .arc-progress[data-size="sm"] .progress__track { height: 4px; }
+      .arc-progress:not([data-size]) .progress__track,
+      .arc-progress[data-size="md"] .progress__track { height: 8px; }
+      .arc-progress[data-size="lg"] .progress__track { height: 12px; }
+
+      .arc-progress .progress__fill {
+        height: 100%;
+        border-radius: var(--radius-full);
+        background: var(--gradient-accent-text);
+        transition: width var(--transition-base);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.3);
+      }
+
+      .arc-progress[indeterminate] .progress__fill {
+        width: 30% !important;
+        animation: progress-indeterminate 1.5s ease-in-out infinite;
+      }
+
+      /* Spinner */
+      .arc-progress .progress__spinner {
+        display: inline-block;
+      }
+
+      .arc-progress[data-size="sm"] .progress__spinner { width: 20px; height: 20px; }
+      .arc-progress:not([data-size]) .progress__spinner,
+      .arc-progress[data-size="md"] .progress__spinner { width: 32px; height: 32px; }
+      .arc-progress[data-size="lg"] .progress__spinner { width: 48px; height: 48px; }
+
+      .arc-progress .progress__spinner svg {
+        width: 100%;
+        height: 100%;
+        animation: spinner-rotate 1.4s linear infinite;
+      }
+
+      .arc-progress .progress__spinner-track {
+        fill: none;
+        stroke: var(--border-subtle);
+        stroke-width: 3;
+      }
+
+      .arc-progress .progress__spinner-fill {
+        fill: none;
+        stroke: var(--accent-primary);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-dasharray: 80, 200;
+        stroke-dashoffset: 0;
+        animation: spinner-dash 1.4s ease-in-out infinite;
+      }
+
+      @keyframes progress-indeterminate {
+        0%   { transform: translateX(-100%); }
+        100% { transform: translateX(400%); }
+      }
+
+      @keyframes spinner-rotate {
+        100% { transform: rotate(360deg); }
+      }
+
+      @keyframes spinner-dash {
+        0%   { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
+        50%  { stroke-dasharray: 80, 200; stroke-dashoffset: -35; }
+        100% { stroke-dasharray: 80, 200; stroke-dashoffset: -125; }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-progress .progress__fill,
+        .arc-progress .progress__spinner svg,
+        .arc-progress .progress__spinner-fill {
+          animation: none;
+        }
+      }
+
+/* arc-tooltip */
+.arc-tooltip {
+        display: inline-block;
+        position: relative;
+      }
+
+      .arc-tooltip .tooltip__trigger {
+        display: inline-block;
+      }
+
+      .arc-tooltip .tooltip__popup {
+        position: absolute;
+        z-index: 1000;
+        background: var(--bg-elevated);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-sm);
+        padding: var(--space-xs) var(--space-sm);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        color: var(--text-primary);
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity var(--transition-fast);
+        box-shadow: var(--shadow-overlay);
+      }
+
+      .arc-tooltip .tooltip__popup.is-visible {
+        opacity: 1;
+      }
+
+      /* Arrow */
+      .arc-tooltip .tooltip__arrow {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: var(--bg-elevated);
+        border: 1px solid var(--border-default);
+        transform: rotate(45deg);
+      }
+
+      /* Positions */
+      .arc-tooltip:not([data-position]) .tooltip__popup,
+      .arc-tooltip[data-position="top"] .tooltip__popup {
+        bottom: calc(100% + 8px);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .arc-tooltip:not([data-position]) .tooltip__arrow,
+      .arc-tooltip[data-position="top"] .tooltip__arrow {
+        bottom: -5px;
+        left: 50%;
+        transform: translateX(-50%) rotate(45deg);
+        border-top: none;
+        border-left: none;
+      }
+
+      .arc-tooltip[data-position="bottom"] .tooltip__popup {
+        top: calc(100% + 8px);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .arc-tooltip[data-position="bottom"] .tooltip__arrow {
+        top: -5px;
+        left: 50%;
+        transform: translateX(-50%) rotate(45deg);
+        border-bottom: none;
+        border-right: none;
+      }
+
+      .arc-tooltip[data-position="left"] .tooltip__popup {
+        right: calc(100% + 8px);
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      .arc-tooltip[data-position="left"] .tooltip__arrow {
+        right: -5px;
+        top: 50%;
+        transform: translateY(-50%) rotate(45deg);
+        border-bottom: none;
+        border-left: none;
+      }
+
+      .arc-tooltip[data-position="right"] .tooltip__popup {
+        left: calc(100% + 8px);
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      .arc-tooltip[data-position="right"] .tooltip__arrow {
+        left: -5px;
+        top: 50%;
+        transform: translateY(-50%) rotate(45deg);
+        border-top: none;
+        border-right: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .arc-tooltip *,
+        .arc-tooltip *::before,
+        .arc-tooltip *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }