arekui 1.0.0

package/arekui.css

@@ -0,0 +1,3279 @@
+/*!
+ * ARStyle v1.4.0
+ * A standalone CSS framework by Andika Rekatias.
+ * No dependencies, no build step. Drop in one file.
+ *
+ * MIT License — see LICENSE.
+ */
+
+/* ============================================================
+   1. DESIGN TOKENS
+   ============================================================ */
+:root {
+ --ar-font-sans:
+  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+  sans-serif;
+ --ar-font-serif: "IM Fell English", Georgia, "Times New Roman", serif;
+ --ar-font-mono:
+  ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Courier New",
+  monospace;
+ --ar-base-font: var(--ar-font-serif);
+
+ --ar-s-0: 0;
+ --ar-s-1: 0.25rem;
+ --ar-s-2: 0.5rem;
+ --ar-s-3: 0.75rem;
+ --ar-s-4: 1rem;
+ --ar-s-5: 1.25rem;
+ --ar-s-6: 1.5rem;
+ --ar-s-8: 2rem;
+ --ar-s-10: 2.5rem;
+ --ar-s-12: 3rem;
+ --ar-s-16: 4rem;
+ --ar-s-20: 5rem;
+
+ --ar-radius-field: 0.25rem;
+ --ar-radius-box: 0.5rem;
+ --ar-radius-selector: 2rem;
+ --ar-radius-pill: 9999px;
+
+ --ar-border-width: 1px;
+
+ --ar-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --ar-shadow-md:
+  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --ar-shadow-lg:
+  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+ --ar-shadow-xl:
+  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+ --ar-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+ /* Relative to this stylesheet — override the token if you serve
+     arekui.css from another path or want a different texture. */
+ --ar-texture: url("assets/img/grunge-wall-texture-freepick-kues1.webp");
+
+ --ar-gray-50: #fafafa;
+ --ar-gray-100: #f5f5f5;
+ --ar-gray-200: #e5e5e5;
+ --ar-gray-300: #d4d4d4;
+ --ar-gray-400: #a3a3a3;
+ --ar-gray-500: #737373;
+ --ar-gray-600: #525252;
+ --ar-gray-700: #404040;
+ --ar-gray-800: #262626;
+ --ar-gray-900: #171717;
+
+ /* Dark palette — single source of truth shared by
+     html[data-theme="dark"] and the prefers-color-scheme fallback. */
+ --ar-dark-base-100: oklch(25.33% 0.016 252.42);
+ --ar-dark-base-200: oklch(23.26% 0.014 253.1);
+ --ar-dark-base-300: oklch(21.15% 0.012 254.09);
+ --ar-dark-base-content: oklch(97.807% 0.029 256.847);
+ --ar-dark-primary: oklch(58% 0.233 277.117);
+ --ar-dark-primary-content: oklch(96% 0.018 272.314);
+ --ar-dark-secondary: oklch(65% 0.241 354.308);
+ --ar-dark-secondary-content: oklch(94% 0.028 342.258);
+ --ar-dark-accent: oklch(77% 0.152 181.912);
+ --ar-dark-accent-content: oklch(38% 0.063 188.416);
+ --ar-dark-neutral: oklch(14% 0.005 285.823);
+ --ar-dark-neutral-content: oklch(92% 0.004 286.32);
+ --ar-dark-info: oklch(74% 0.16 232.661);
+ --ar-dark-info-content: oklch(29% 0.066 243.157);
+ --ar-dark-success: oklch(76% 0.177 163.223);
+ --ar-dark-success-content: oklch(37% 0.077 168.94);
+ --ar-dark-warning: oklch(82% 0.189 84.429);
+ --ar-dark-warning-content: oklch(41% 0.112 45.904);
+ --ar-dark-error: oklch(71% 0.194 13.428);
+ --ar-dark-error-content: oklch(27% 0.105 12.094);
+ --ar-dark-bg-img-fill: rgb(152 159 171 / 0.3);
+ --ar-dark-desc-grad: linear-gradient(
+   to left,
+   var(--ar-dark-base-200) 50%,
+   #fafafa 50%
+  )
+  right;
+ --ar-dark-arc: #333333;
+ --ar-dark-gray-50: #1a1a1a;
+ --ar-dark-gray-100: #262626;
+ --ar-dark-gray-200: #333333;
+ --ar-dark-gray-300: #444444;
+ --ar-dark-gray-400: #999999;
+ --ar-dark-gray-500: #aaaaaa;
+ --ar-dark-gray-600: #bbbbbb;
+ --ar-dark-gray-700: #cccccc;
+ --ar-dark-gray-800: #dddddd;
+ --ar-dark-gray-900: #eeeeee;
+ --ar-dark-base-content-80: oklch(97.807% 0.029 256.847 / 0.8);
+
+ /* --------------------------------------------------------
+     NEOBRUTALISM palette — single source of truth.
+     Referenced by html[data-theme="neo"] below.
+     -------------------------------------------------------- */
+ --ar-neo-base-100: #ffffff;
+ --ar-neo-base-200: #f8f8f8;
+ --ar-neo-base-300: #e8e8e8;
+ --ar-neo-base-content: #1e293b;
+ --ar-neo-base-content-80: rgb(30 41 59 / 0.8);
+ --ar-neo-primary: #00aeef;
+ --ar-neo-primary-content: #ffffff;
+ --ar-neo-secondary: #8bc53f;
+ --ar-neo-secondary-content: #ffffff;
+ --ar-neo-accent: #ffd100;
+ --ar-neo-accent-content: #1e293b;
+ --ar-neo-neutral: #1e293b;
+ --ar-neo-neutral-content: #ffffff;
+ --ar-neo-info: #00aeef;
+ --ar-neo-info-content: #ffffff;
+ --ar-neo-success: #8bc53f;
+ --ar-neo-success-content: #ffffff;
+ --ar-neo-warning: #ffd100;
+ --ar-neo-warning-content: #1e293b;
+ --ar-neo-error: #e4002b;
+ --ar-neo-error-content: #ffffff;
+ --ar-neo-bg-img-fill: #1e293b;
+ --ar-neo-desc-grad: linear-gradient(to left, #f8f8f8 50%, #1e293b 50%) right;
+ --ar-neo-arc: #ffffff;
+ --ar-neo-gray-50: #f8f8f8;
+ --ar-neo-gray-100: #f0f0f0;
+ --ar-neo-gray-200: #e0e0e0;
+ --ar-neo-gray-300: #cccccc;
+ --ar-neo-gray-400: #999999;
+ --ar-neo-gray-500: #777777;
+ --ar-neo-gray-600: #555555;
+ --ar-neo-gray-700: #333333;
+ --ar-neo-gray-800: #222222;
+ --ar-neo-gray-900: #111111;
+
+ /* Neobrutalism-specific tokens */
+ --ar-neo-border-width: 3px;
+ --ar-neo-border-color: #1e293b;
+ --ar-neo-shadow-sm: 2px 2px 0px 0px #1e293b;
+ --ar-neo-shadow-md: 4px 4px 0px 0px #1e293b;
+ --ar-neo-shadow-lg: 6px 6px 0px 0px #1e293b;
+ --ar-neo-shadow-xl: 8px 8px 0px 0px #1e293b;
+ --ar-neo-shadow-2xl: 12px 12px 0px 0px #1e293b;
+}
+
+html[data-theme="light"] {
+ color-scheme: light;
+ --ar-base-100: oklch(100% 0 0);
+ --ar-base-200: oklch(97% 0 0);
+ --ar-base-300: oklch(94% 0 0);
+ --ar-base-content: oklch(0% 0 0);
+ --ar-base-content-80: oklch(0% 0 0 / 0.8);
+ --ar-primary: oklch(15.906% 0 0);
+ --ar-primary-content: oklch(100% 0 0);
+ --ar-secondary: oklch(21.455% 0.001 17.278);
+ --ar-secondary-content: oklch(100% 0 0);
+ --ar-accent: oklch(26.861% 0 0);
+ --ar-accent-content: oklch(100% 0 0);
+ --ar-neutral: oklch(0% 0 0);
+ --ar-neutral-content: oklch(100% 0 0);
+ --ar-info: oklch(79.54% 0.103 205.9);
+ --ar-info-content: oklch(15.908% 0.02 205.9);
+ --ar-success: oklch(90.13% 0.153 164.14);
+ --ar-success-content: oklch(18.026% 0.03 164.14);
+ --ar-warning: oklch(88.37% 0.135 79.94);
+ --ar-warning-content: oklch(17.674% 0.027 79.94);
+ --ar-error: oklch(78.66% 0.15 28.47);
+ --ar-error-content: oklch(15.732% 0.03 28.47);
+ --ar-bg-img-fill: transparent;
+ --ar-desc-grad: linear-gradient(
+   to left,
+   var(--ar-base-200) 50%,
+   var(--ar-neutral) 50%
+  )
+  right;
+ --ar-arc: #fafafa;
+}
+
+html[data-theme="dark"] {
+ color-scheme: dark;
+ --ar-base-100: var(--ar-dark-base-100);
+ --ar-base-200: var(--ar-dark-base-200);
+ --ar-base-300: var(--ar-dark-base-300);
+ --ar-base-content: var(--ar-dark-base-content);
+ --ar-base-content-80: var(--ar-dark-base-content-80);
+ --ar-primary: var(--ar-dark-primary);
+ --ar-primary-content: var(--ar-dark-primary-content);
+ --ar-secondary: var(--ar-dark-secondary);
+ --ar-secondary-content: var(--ar-dark-secondary-content);
+ --ar-accent: var(--ar-dark-accent);
+ --ar-accent-content: var(--ar-dark-accent-content);
+ --ar-neutral: var(--ar-dark-neutral);
+ --ar-neutral-content: var(--ar-dark-neutral-content);
+ --ar-info: var(--ar-dark-info);
+ --ar-info-content: var(--ar-dark-info-content);
+ --ar-success: var(--ar-dark-success);
+ --ar-success-content: var(--ar-dark-success-content);
+ --ar-warning: var(--ar-dark-warning);
+ --ar-warning-content: var(--ar-dark-warning-content);
+ --ar-error: var(--ar-dark-error);
+ --ar-error-content: var(--ar-dark-error-content);
+ --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
+ --ar-desc-grad: var(--ar-dark-desc-grad);
+ --ar-arc: var(--ar-dark-arc);
+ --ar-gray-50: var(--ar-dark-gray-50);
+ --ar-gray-100: var(--ar-dark-gray-100);
+ --ar-gray-200: var(--ar-dark-gray-200);
+ --ar-gray-300: var(--ar-dark-gray-300);
+ --ar-gray-400: var(--ar-dark-gray-400);
+ --ar-gray-500: var(--ar-dark-gray-500);
+ --ar-gray-600: var(--ar-dark-gray-600);
+ --ar-gray-700: var(--ar-dark-gray-700);
+ --ar-gray-800: var(--ar-dark-gray-800);
+ --ar-gray-900: var(--ar-dark-gray-900);
+}
+
+@media (prefers-color-scheme: dark) {
+ html:not([data-theme]) {
+  color-scheme: dark;
+  --ar-base-100: var(--ar-dark-base-100);
+  --ar-base-200: var(--ar-dark-base-200);
+  --ar-base-300: var(--ar-dark-base-300);
+  --ar-base-content: var(--ar-dark-base-content);
+  --ar-base-content-80: var(--ar-dark-base-content-80);
+  --ar-primary: var(--ar-dark-primary);
+  --ar-primary-content: var(--ar-dark-primary-content);
+  --ar-secondary: var(--ar-dark-secondary);
+  --ar-secondary-content: var(--ar-dark-secondary-content);
+  --ar-accent: var(--ar-dark-accent);
+  --ar-accent-content: var(--ar-dark-accent-content);
+  --ar-neutral: var(--ar-dark-neutral);
+  --ar-neutral-content: var(--ar-dark-neutral-content);
+  --ar-info: var(--ar-dark-info);
+  --ar-info-content: var(--ar-dark-info-content);
+  --ar-success: var(--ar-dark-success);
+  --ar-success-content: var(--ar-dark-success-content);
+  --ar-warning: var(--ar-dark-warning);
+  --ar-warning-content: var(--ar-dark-warning-content);
+  --ar-error: var(--ar-dark-error);
+  --ar-error-content: var(--ar-dark-error-content);
+  --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
+  --ar-desc-grad: var(--ar-dark-desc-grad);
+  --ar-arc: var(--ar-dark-arc);
+  --ar-gray-50: var(--ar-dark-gray-50);
+  --ar-gray-100: var(--ar-dark-gray-100);
+  --ar-gray-200: var(--ar-dark-gray-200);
+  --ar-gray-300: var(--ar-dark-gray-300);
+  --ar-gray-400: var(--ar-dark-gray-400);
+  --ar-gray-500: var(--ar-dark-gray-500);
+  --ar-gray-600: var(--ar-dark-gray-600);
+  --ar-gray-700: var(--ar-dark-gray-700);
+  --ar-gray-800: var(--ar-dark-gray-800);
+  --ar-gray-900: var(--ar-dark-gray-900);
+ }
+}
+
+html[data-theme="neo"] {
+ color-scheme: light;
+ --ar-base-100: var(--ar-neo-base-100);
+ --ar-base-200: var(--ar-neo-base-200);
+ --ar-base-300: var(--ar-neo-base-300);
+ --ar-base-content: var(--ar-neo-base-content);
+ --ar-base-content-80: var(--ar-neo-base-content-80);
+ --ar-primary: var(--ar-neo-primary);
+ --ar-primary-content: var(--ar-neo-primary-content);
+ --ar-secondary: var(--ar-neo-secondary);
+ --ar-secondary-content: var(--ar-neo-secondary-content);
+ --ar-accent: var(--ar-neo-accent);
+ --ar-accent-content: var(--ar-neo-accent-content);
+ --ar-neutral: var(--ar-neo-neutral);
+ --ar-neutral-content: var(--ar-neo-neutral-content);
+ --ar-info: var(--ar-neo-info);
+ --ar-info-content: var(--ar-neo-info-content);
+ --ar-success: var(--ar-neo-success);
+ --ar-success-content: var(--ar-neo-success-content);
+ --ar-warning: var(--ar-neo-warning);
+ --ar-warning-content: var(--ar-neo-warning-content);
+ --ar-error: var(--ar-neo-error);
+ --ar-error-content: var(--ar-neo-error-content);
+ --ar-bg-img-fill: var(--ar-neo-bg-img-fill);
+ --ar-desc-grad: var(--ar-neo-desc-grad);
+ --ar-arc: var(--ar-neo-arc);
+ --ar-gray-50: var(--ar-neo-gray-50);
+ --ar-gray-100: var(--ar-neo-gray-100);
+ --ar-gray-200: var(--ar-neo-gray-200);
+ --ar-gray-300: var(--ar-neo-gray-300);
+ --ar-gray-400: var(--ar-neo-gray-400);
+ --ar-gray-500: var(--ar-neo-gray-500);
+ --ar-gray-600: var(--ar-neo-gray-600);
+ --ar-gray-700: var(--ar-neo-gray-700);
+ --ar-gray-800: var(--ar-neo-gray-800);
+ --ar-gray-900: var(--ar-neo-gray-900);
+ /* Override design tokens for neobrutalism */
+ --ar-border-width: var(--ar-neo-border-width);
+ --ar-radius-field: 0.5rem;
+ --ar-radius-box: 0.75rem;
+ --ar-shadow-sm: var(--ar-neo-shadow-sm);
+ --ar-shadow-md: var(--ar-neo-shadow-md);
+ --ar-shadow-lg: var(--ar-neo-shadow-lg);
+ --ar-shadow-xl: var(--ar-neo-shadow-xl);
+ --ar-shadow-2xl: var(--ar-neo-shadow-2xl);
+ --ar-base-font: var(--ar-font-sans);
+}
+
+/* ============================================================
+   2. BASE / RESET
+   ============================================================ */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: var(--ar-base-font);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ line-height: 1.2;
+}
+
+p {
+ margin: 0;
+}
+
+a {
+ color: var(--ar-primary);
+ text-decoration: none;
+}
+
+img,
+svg,
+video,
+canvas {
+ max-width: 100%;
+ height: auto;
+ display: block;
+}
+
+button,
+input,
+select,
+textarea {
+ font: inherit;
+}
+
+pre,
+code {
+ white-space: pre-wrap;
+ word-break: break-word;
+ overflow-x: auto;
+ font-family: var(--ar-font-mono);
+}
+
+:focus-visible {
+ outline: 2px solid var(--ar-primary);
+ outline-offset: 2px;
+}
+
+.ar-scroll-smooth {
+ scroll-behavior: smooth;
+}
+
+/* ============================================================
+   3. BUTTONS
+   ============================================================ */
+.ar-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--ar-s-2);
+ border: var(--ar-border-width) solid transparent;
+ border-radius: var(--ar-radius-field);
+ padding: 0.5rem 1rem;
+ font-family: var(--ar-font-sans);
+ font-size: 0.875rem;
+ font-weight: 600;
+ line-height: 1.25;
+ cursor: pointer;
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+ text-decoration: none;
+ transition: all 0.2s ease-out;
+}
+.ar-btn:hover {
+ background: var(--ar-base-300);
+}
+.ar-btn:active {
+ transform: scale(0.97);
+}
+.ar-btn-primary {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-btn-primary:hover {
+ background: var(--ar-neutral);
+}
+.ar-btn-outline {
+ background: transparent;
+ border-color: var(--ar-base-content);
+ color: var(--ar-base-content);
+}
+.ar-btn-outline:hover {
+ background: var(--ar-base-content);
+ color: var(--ar-base-100);
+}
+.ar-btn-ghost {
+ background: transparent;
+ color: var(--ar-base-content);
+}
+.ar-btn-ghost:hover {
+ background: var(--ar-base-200);
+}
+.ar-btn-neutral {
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+}
+.ar-btn-neutral:hover {
+ opacity: 0.85;
+}
+.ar-btn-base-200 {
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+}
+.ar-btn-circle {
+ border-radius: var(--ar-radius-pill);
+ padding: 0.5rem;
+ width: 2.5rem;
+ height: 2.5rem;
+}
+.ar-btn-xs {
+ font-size: 0.7rem;
+ padding: 0.25rem 0.5rem;
+}
+.ar-btn-sm {
+ font-size: 0.8rem;
+ padding: 0.375rem 0.75rem;
+}
+.ar-btn-lg {
+ font-size: 1.125rem;
+ padding: 0.75rem 1.5rem;
+}
+.ar-btn-block {
+ display: flex;
+ width: 100%;
+}
+.ar-btn-disabled,
+.ar-btn[disabled] {
+ opacity: 0.5;
+ pointer-events: none;
+}
+.ar-btn-loading {
+ pointer-events: none;
+}
+.ar-btn-loading::after {
+ content: "";
+ width: 1rem;
+ height: 1rem;
+ border: 2px solid currentColor;
+ border-right-color: transparent;
+ border-radius: var(--ar-radius-pill);
+ animation: ar-spin 0.7s linear infinite;
+}
+@keyframes ar-spin {
+ to {
+  transform: rotate(360deg);
+ }
+}
+
+/* ============================================================
+   4. NAVBAR
+   ============================================================ */
+.ar-navbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--ar-s-4);
+ padding: var(--ar-s-2) var(--ar-s-4);
+ background: var(--ar-base-100);
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-navbar-start {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+ flex: 1;
+}
+.ar-navbar-center {
+ display: none;
+ align-items: center;
+ gap: var(--ar-s-2);
+}
+.ar-navbar-end {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+}
+@media (min-width: 1024px) {
+ .ar-navbar-center {
+  display: flex;
+ }
+}
+.ar-navbar-brand {
+ font-size: 1.875rem;
+ font-weight: 400;
+ color: var(--ar-base-content);
+ text-decoration: none;
+}
+
+/* ============================================================
+   5. MENU & DROPDOWN
+   ============================================================ */
+.ar-menu {
+ display: flex;
+ flex-direction: column;
+ list-style: none;
+ margin: 0;
+ padding: var(--ar-s-2);
+ background: var(--ar-base-100);
+}
+.ar-menu li > a {
+ display: block;
+ padding: 0.5rem 0.75rem;
+ border-radius: var(--ar-radius-field);
+ color: var(--ar-base-content);
+ text-decoration: none;
+}
+.ar-menu li > a:hover {
+ background: var(--ar-base-200);
+}
+.ar-menu-horizontal {
+ flex-direction: row;
+ align-items: center;
+ gap: var(--ar-s-2);
+}
+.ar-menu-sm li > a {
+ font-size: 0.8rem;
+ padding: 0.25rem 0.5rem;
+}
+.ar-dropdown {
+ position: relative;
+ display: inline-block;
+}
+.ar-dropdown-content {
+ display: none;
+ position: absolute;
+ z-index: 20;
+ min-width: 15rem;
+ margin-top: 0.75rem;
+ background: var(--ar-base-100);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-lg);
+ padding: var(--ar-s-2);
+}
+.ar-dropdown:hover .ar-dropdown-content,
+.ar-dropdown:focus-within .ar-dropdown-content,
+.ar-dropdown.ar-dropdown-open .ar-dropdown-content {
+ display: block;
+}
+.ar-dropdown-content::before {
+ content: "";
+ position: absolute;
+ top: -0.75rem;
+ left: 0;
+ right: 0;
+ height: 0.75rem;
+}
+
+/* ============================================================
+   6. SWAP (theme toggle)
+   ============================================================ */
+.ar-swap {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ cursor: pointer;
+}
+.ar-swap > .ar-swap-on,
+.ar-swap > .ar-swap-off {
+ position: absolute;
+ transition:
+  opacity 0.3s ease,
+  transform 0.3s ease;
+}
+.ar-swap > .ar-swap-on {
+ opacity: 0;
+}
+.ar-swap input:checked ~ .ar-swap-on,
+.ar-swap.ar-swap-active > .ar-swap-on {
+ opacity: 1;
+}
+.ar-swap input:checked ~ .ar-swap-off,
+.ar-swap.ar-swap-active > .ar-swap-off {
+ opacity: 0;
+}
+.ar-swap input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+.ar-swap-rotate > .ar-swap-on,
+.ar-swap-rotate > .ar-swap-off {
+ transform: rotate(0deg);
+}
+.ar-swap-rotate input:checked ~ .ar-swap-on,
+.ar-swap-rotate.ar-swap-active > .ar-swap-on {
+ transform: rotate(360deg);
+}
+.ar-swap-rotate input:checked ~ .ar-swap-off,
+.ar-swap-rotate.ar-swap-active > .ar-swap-off {
+ transform: rotate(-360deg);
+}
+
+/* ============================================================
+   7. CARD
+   ============================================================ */
+.ar-card {
+ display: flex;
+ flex-direction: column;
+ background: var(--ar-base-100);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-md);
+ overflow: hidden;
+}
+.ar-card-body {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-2);
+ padding: var(--ar-s-4);
+}
+.ar-card-title {
+ font-size: 1.125rem;
+ font-weight: 700;
+ line-height: 1.3;
+}
+.ar-card-figure img {
+ width: 100%;
+ object-fit: cover;
+}
+
+/* ============================================================
+   8. BADGE
+   ============================================================ */
+.ar-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+ border-radius: var(--ar-radius-selector);
+ padding: 0.125rem 0.625rem;
+ font-size: 0.75rem;
+ font-weight: 600;
+ line-height: 1.5;
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+}
+.ar-badge-outline {
+ background: transparent;
+ border: var(--ar-border-width) solid var(--ar-base-content);
+}
+.ar-badge-primary {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-badge-neutral {
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+}
+.ar-badge-sm {
+ font-size: 0.625rem;
+ padding: 0 0.5rem;
+}
+.ar-badge-xs {
+ font-size: 0.55rem;
+ padding: 0 0.375rem;
+}
+
+/* ============================================================
+   9. MODAL
+   ============================================================ */
+.ar-modal {
+ border: 0;
+ padding: 0;
+ max-width: none;
+ max-height: none;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ background: rgb(0 0 0 / 0.5);
+ display: none;
+ align-items: center;
+ justify-content: center;
+}
+.ar-modal[open] {
+ display: flex;
+}
+.ar-modal::backdrop {
+ background: rgb(0 0 0 / 0.5);
+}
+.ar-modal-box {
+ background: var(--ar-base-100);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-xl);
+ padding: var(--ar-s-6);
+ width: min(92vw, 42rem);
+ max-height: 90vh;
+ overflow-y: auto;
+}
+.ar-modal-backdrop {
+ display: contents;
+}
+
+/* ============================================================
+   10. CAROUSEL
+   ============================================================ */
+.ar-carousel {
+ display: flex;
+ overflow-x: auto;
+ scroll-snap-type: x mandatory;
+}
+.ar-carousel-item {
+ flex: none;
+ width: 100%;
+ scroll-snap-align: start;
+}
+.ar-carousel-item img {
+ width: 100%;
+}
+
+/* ============================================================
+   11. DRAWER
+   ============================================================ */
+.ar-drawer {
+ position: relative;
+ display: flex;
+}
+.ar-drawer-toggle {
+ appearance: none;
+ position: fixed;
+ opacity: 0;
+ pointer-events: none;
+}
+.ar-drawer-content {
+ flex: 1;
+ min-width: 0;
+}
+.ar-drawer-side {
+ position: fixed;
+ inset: 0;
+ z-index: 40;
+ visibility: hidden;
+ pointer-events: none;
+}
+.ar-drawer-side > * {
+ visibility: visible;
+}
+.ar-drawer-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgb(0 0 0 / 0.5);
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+.ar-drawer-side .ar-menu {
+ position: absolute;
+ inset: 0 auto 0 0;
+ width: 20rem;
+ height: 100%;
+ overflow-y: auto;
+ background: var(--ar-base-100);
+ transform: translateX(-100%);
+ transition: transform 0.3s ease;
+}
+.ar-drawer-toggle:checked ~ .ar-drawer-side {
+ visibility: visible;
+ pointer-events: auto;
+}
+.ar-drawer-toggle:checked ~ .ar-drawer-side .ar-drawer-overlay {
+ opacity: 1;
+}
+.ar-drawer-toggle:checked ~ .ar-drawer-side .ar-menu {
+ transform: translateX(0);
+}
+
+/* ============================================================
+   12. FOOTER
+   ============================================================ */
+.ar-footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--ar-s-4);
+ padding: var(--ar-s-10);
+ background: var(--ar-base-200);
+ border-top: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-footer nav {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: var(--ar-s-4);
+}
+.ar-footer a {
+ color: var(--ar-base-content);
+ opacity: 0.8;
+}
+.ar-footer a:hover {
+ opacity: 1;
+}
+.ar-footer-center {
+ text-align: center;
+}
+
+/* ============================================================
+   13. HERO
+   ============================================================ */
+.ar-hero {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--ar-base-200);
+ padding: var(--ar-s-16) var(--ar-s-6);
+}
+.ar-hero-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--ar-s-6);
+ text-align: center;
+ max-width: 64rem;
+}
+@media (min-width: 1024px) {
+ .ar-hero-content {
+  flex-direction: row;
+  text-align: left;
+ }
+}
+
+/* ============================================================
+   14. TOOLTIP
+   ============================================================ */
+.ar-tooltip {
+ position: relative;
+}
+.ar-tooltip[data-tip]::after {
+ content: attr(data-tip);
+ position: absolute;
+ z-index: 30;
+ bottom: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0.25rem 0.625rem;
+ border-radius: var(--ar-radius-field);
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+ font-size: 0.75rem;
+ white-space: nowrap;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.2s;
+}
+.ar-tooltip:hover[data-tip]::after {
+ opacity: 1;
+}
+
+/* ============================================================
+   15. LINK
+   ============================================================ */
+.ar-link {
+ color: var(--ar-primary);
+ text-decoration: underline;
+ cursor: pointer;
+}
+.ar-link-hover {
+ text-decoration: none;
+}
+.ar-link-hover:hover {
+ text-decoration: underline;
+}
+.ar-desc a {
+ text-decoration: underline;
+ background: var(--ar-desc-grad);
+ background-size: 200%;
+ transition:
+  background-position 0.5s ease-out,
+  color 0.5s ease-out;
+}
+.ar-desc a:hover {
+ background-position: left;
+ color: var(--ar-arc);
+}
+
+/* ============================================================
+   16. JOIN
+   ============================================================ */
+.ar-join {
+ display: inline-flex;
+ align-items: stretch;
+ border-radius: var(--ar-radius-field);
+ overflow: hidden;
+}
+.ar-join-item:not(:first-child) {
+ border-left-width: 0;
+}
+.ar-join .ar-btn,
+.ar-join-item {
+ border-radius: 0;
+}
+
+/* ============================================================
+   17. PROSE (article typography)
+   ============================================================ */
+.ar-prose {
+ font-size: 1rem;
+ line-height: 1.75;
+ max-width: 65ch;
+}
+.ar-prose > * + * {
+ margin-top: 1rem;
+}
+.ar-prose h1,
+.ar-prose h2,
+.ar-prose h3,
+.ar-prose h4 {
+ margin-top: 1.5rem;
+ font-weight: 700;
+}
+.ar-prose h1 {
+ font-size: 1.75rem;
+}
+.ar-prose h2 {
+ font-size: 1.375rem;
+}
+.ar-prose h3 {
+ font-size: 1.125rem;
+}
+.ar-prose h4 {
+ font-size: 1rem;
+}
+.ar-prose img {
+ margin: 1rem auto;
+ border-radius: var(--ar-radius-box);
+}
+.ar-prose a {
+ text-decoration: underline;
+}
+.ar-prose blockquote {
+ margin: 1rem 0;
+ border-left: 4px solid var(--ar-base-300);
+ padding-left: 1rem;
+ font-style: italic;
+ color: var(--ar-gray-600);
+}
+.ar-prose ul,
+.ar-prose ol {
+ padding-left: 1.5rem;
+}
+.ar-prose pre {
+ background: var(--ar-base-200);
+ border-radius: var(--ar-radius-box);
+ padding: 1rem;
+ overflow-x: auto;
+}
+.ar-prose code {
+ font-size: 0.875em;
+ background: var(--ar-base-200);
+ border-radius: var(--ar-radius-field);
+ padding: 0.125rem 0.375rem;
+}
+.ar-prose pre code {
+ background: transparent;
+ padding: 0;
+}
+.ar-prose table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.875rem;
+}
+.ar-prose th,
+.ar-prose td {
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ padding: 0.5rem 0.75rem;
+}
+.ar-prose th {
+ background: var(--ar-base-200);
+}
+.ar-prose hr {
+ border: 0;
+ border-top: var(--ar-border-width) solid var(--ar-base-300);
+ margin: 1.5rem 0;
+}
+
+/* ============================================================
+   18. TEXTURED TEXT & ANIMATION
+   ============================================================ */
+.ar-bg-img {
+ color: transparent;
+ background-image: var(--ar-texture);
+ background-size: cover;
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: var(--ar-bg-img-fill, transparent);
+}
+.ar-bounce {
+ animation: ar-bounce 1s infinite;
+}
+@keyframes ar-bounce {
+ 0%,
+ 100% {
+  transform: translateY(0);
+ }
+ 50% {
+  transform: translateY(-0.25rem);
+ }
+}
+.ar-animate-fade-in {
+ animation: ar-fade-in 0.4s ease-out forwards;
+}
+@keyframes ar-fade-in {
+ from {
+  opacity: 0;
+  transform: translateY(1.25rem);
+ }
+ to {
+  opacity: 1;
+  transform: translateY(0);
+ }
+}
+
+/* ============================================================
+   19. FORMS
+   ============================================================ */
+.ar-fieldset {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-2);
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+.ar-label {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+ font-weight: 600;
+}
+.ar-input,
+.ar-select,
+.ar-textarea {
+ width: 100%;
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ padding: 0.5rem 0.75rem;
+}
+.ar-input:focus,
+.ar-select:focus,
+.ar-textarea:focus {
+ outline: 2px solid var(--ar-primary);
+ outline-offset: 0;
+ border-color: transparent;
+}
+.ar-checkbox,
+.ar-radio {
+ accent-color: var(--ar-primary);
+ width: 1.125rem;
+ height: 1.125rem;
+}
+.ar-toggle {
+ position: relative;
+ appearance: none;
+ width: 2.75rem;
+ height: 1.5rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-300);
+ cursor: pointer;
+ transition: background 0.2s;
+}
+.ar-toggle::after {
+ content: "";
+ position: absolute;
+ top: 0.1875rem;
+ left: 0.1875rem;
+ width: 1.125rem;
+ height: 1.125rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-100);
+ transition: transform 0.2s;
+}
+.ar-toggle:checked {
+ background: var(--ar-primary);
+}
+.ar-toggle:checked::after {
+ transform: translateX(1.25rem);
+}
+.ar-range {
+ accent-color: var(--ar-primary);
+ width: 100%;
+}
+
+/* ============================================================
+   20. TABLE
+   ============================================================ */
+.ar-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.875rem;
+}
+.ar-table th,
+.ar-table td {
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+ padding: 0.625rem 0.75rem;
+ text-align: left;
+}
+.ar-table th {
+ font-weight: 700;
+ background: var(--ar-base-200);
+}
+.ar-table-striped tbody tr:nth-child(odd) {
+ background: var(--ar-base-200);
+}
+.ar-table-hover tbody tr:hover {
+ background: var(--ar-base-300);
+}
+
+/* ============================================================
+   21. ALERT
+   ============================================================ */
+.ar-alert {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-3);
+ border-radius: var(--ar-radius-box);
+ padding: var(--ar-s-4);
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+}
+.ar-alert-info {
+ background: var(--ar-info);
+ color: var(--ar-info-content);
+}
+.ar-alert-success {
+ background: var(--ar-success);
+ color: var(--ar-success-content);
+}
+.ar-alert-warning {
+ background: var(--ar-warning);
+ color: var(--ar-warning-content);
+}
+.ar-alert-error {
+ background: var(--ar-error);
+ color: var(--ar-error-content);
+}
+
+/* ============================================================
+   22. TABS
+   ============================================================ */
+.ar-tabs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ar-s-1);
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-tab {
+ padding: 0.625rem 1rem;
+ cursor: pointer;
+ border: 0;
+ background: transparent;
+ color: var(--ar-gray-600);
+ border-bottom: 2px solid transparent;
+ font-family: var(--ar-font-sans);
+ font-weight: 600;
+}
+.ar-tab:hover {
+ color: var(--ar-base-content);
+}
+.ar-tab-active {
+ color: var(--ar-primary);
+ border-bottom-color: var(--ar-primary);
+}
+
+/* ============================================================
+   23. ACCORDION
+   ============================================================ */
+.ar-accordion {
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ border-radius: var(--ar-radius-box);
+ overflow: hidden;
+}
+.ar-accordion details {
+ border-top: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-accordion details:first-child {
+ border-top: 0;
+}
+.ar-accordion summary {
+ list-style: none;
+ cursor: pointer;
+ padding: 1rem;
+ font-weight: 600;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.ar-accordion summary::-webkit-details-marker {
+ display: none;
+}
+.ar-accordion summary::after {
+ content: "+";
+ font-size: 1.25rem;
+}
+.ar-accordion details[open] summary::after {
+ content: "\2212";
+}
+.ar-accordion .ar-accordion-body {
+ padding: 0 1rem 1rem;
+}
+
+/* ============================================================
+   24. PROGRESS
+   ============================================================ */
+.ar-progress {
+ appearance: none;
+ width: 100%;
+ height: 1rem;
+ border-radius: var(--ar-radius-pill);
+ border: 0;
+ overflow: hidden;
+ background: var(--ar-base-300);
+}
+.ar-progress::-webkit-progress-bar {
+ background: var(--ar-base-300);
+}
+.ar-progress::-webkit-progress-value {
+ background: var(--ar-primary);
+}
+.ar-progress::-moz-progress-bar {
+ background: var(--ar-primary);
+}
+
+/* ============================================================
+   25. TIMELINE
+   ============================================================ */
+.ar-timeline {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-4);
+ padding-left: 0;
+ list-style: none;
+}
+.ar-timeline-item {
+ position: relative;
+ padding-left: var(--ar-s-8);
+}
+.ar-timeline-item::before {
+ content: "";
+ position: absolute;
+ left: 0.375rem;
+ top: 0.25rem;
+ width: 0.75rem;
+ height: 0.75rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-primary);
+}
+.ar-timeline-item::after {
+ content: "";
+ position: absolute;
+ left: 0.65625rem;
+ top: 1.25rem;
+ bottom: -1.5rem;
+ width: 2px;
+ background: var(--ar-base-300);
+}
+.ar-timeline-item:last-child::after {
+ display: none;
+}
+
+/* ============================================================
+   26. DIVIDER & STEPPER & AVATAR
+   ============================================================ */
+.ar-divider {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-3);
+ color: var(--ar-gray-600);
+ margin: var(--ar-s-4) 0;
+}
+.ar-divider::before,
+.ar-divider::after {
+ content: "";
+ flex: 1;
+ height: var(--ar-border-width);
+ background: var(--ar-base-300);
+}
+.ar-stepper {
+ display: flex;
+ justify-content: space-between;
+ gap: var(--ar-s-2);
+}
+.ar-step {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--ar-s-1);
+ text-align: center;
+ font-size: 0.75rem;
+ color: var(--ar-gray-600);
+}
+.ar-step::before {
+ content: attr(data-step);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-300);
+ color: var(--ar-base-content);
+ font-weight: 700;
+}
+.ar-step-active::before {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-avatar {
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--ar-radius-pill);
+ overflow: hidden;
+}
+.ar-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* ============================================================
+   27. TOAST / SNACKBAR
+   ============================================================ */
+.ar-toast-container {
+ position: fixed;
+ z-index: 100;
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-2);
+ pointer-events: none;
+}
+.ar-toast-container[data-ar-toast-position="top-left"] {
+ top: var(--ar-s-4);
+ left: var(--ar-s-4);
+}
+.ar-toast-container[data-ar-toast-position="top-center"] {
+ top: var(--ar-s-4);
+ left: 50%;
+ transform: translateX(-50%);
+}
+.ar-toast-container[data-ar-toast-position="top-right"] {
+ top: var(--ar-s-4);
+ right: var(--ar-s-4);
+}
+.ar-toast-container[data-ar-toast-position="bottom-left"] {
+ bottom: var(--ar-s-4);
+ left: var(--ar-s-4);
+}
+.ar-toast-container[data-ar-toast-position="bottom-center"] {
+ bottom: var(--ar-s-4);
+ left: 50%;
+ transform: translateX(-50%);
+}
+.ar-toast-container[data-ar-toast-position="bottom-right"] {
+ bottom: var(--ar-s-4);
+ right: var(--ar-s-4);
+}
+.ar-toast {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-3);
+ min-width: 18rem;
+ max-width: 24rem;
+ padding: var(--ar-s-3) var(--ar-s-4);
+ border-radius: var(--ar-radius-box);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ box-shadow: var(--ar-shadow-lg);
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ pointer-events: auto;
+ opacity: 0;
+ transform: translateY(-0.5rem);
+ animation: ar-toast-in 0.3s ease-out forwards;
+}
+.ar-toast-container[data-ar-toast-position="bottom-left"] .ar-toast,
+.ar-toast-container[data-ar-toast-position="bottom-center"] .ar-toast,
+.ar-toast-container[data-ar-toast-position="bottom-right"] .ar-toast {
+ transform: translateY(0.5rem);
+}
+.ar-toast.ar-toast-out {
+ animation: ar-toast-out 0.2s ease-in forwards;
+}
+.ar-toast-info {
+ background: var(--ar-info);
+ color: var(--ar-info-content);
+ border-color: var(--ar-info);
+}
+.ar-toast-success {
+ background: var(--ar-success);
+ color: var(--ar-success-content);
+ border-color: var(--ar-success);
+}
+.ar-toast-warning {
+ background: var(--ar-warning);
+ color: var(--ar-warning-content);
+ border-color: var(--ar-warning);
+}
+.ar-toast-error {
+ background: var(--ar-error);
+ color: var(--ar-error-content);
+ border-color: var(--ar-error);
+}
+.ar-toast-icon {
+ flex-shrink: 0;
+ width: 1.25rem;
+ height: 1.25rem;
+}
+.ar-toast-message {
+ flex: 1;
+ font-size: 0.875rem;
+ line-height: 1.4;
+}
+.ar-toast-close {
+ flex-shrink: 0;
+ background: transparent;
+ border: 0;
+ color: inherit;
+ opacity: 0.6;
+ cursor: pointer;
+ padding: 0;
+ font-size: 1.125rem;
+ line-height: 1;
+}
+.ar-toast-close:hover {
+ opacity: 1;
+}
+.ar-toast-progress {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 3px;
+ background: currentColor;
+ opacity: 0.4;
+ border-radius: 0 0 var(--ar-radius-box) var(--ar-radius-box);
+ animation: ar-toast-progress linear forwards;
+}
+@keyframes ar-toast-in {
+ to {
+  opacity: 1;
+  transform: translateY(0);
+ }
+}
+@keyframes ar-toast-out {
+ to {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+ }
+}
+@keyframes ar-toast-progress {
+ from {
+  width: 100%;
+ }
+ to {
+  width: 0%;
+ }
+}
+
+/* ============================================================
+   28. SKELETON LOADER
+   ============================================================ */
+.ar-skeleton {
+ background: var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ position: relative;
+ overflow: hidden;
+}
+.ar-skeleton::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+  90deg,
+  transparent 0%,
+  oklch(100% 0 0 / 0.08) 50%,
+  transparent 100%
+ );
+ animation: ar-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+.ar-skeleton-text {
+ height: 1rem;
+ margin-bottom: var(--ar-s-2);
+ width: 100%;
+}
+.ar-skeleton-text:last-child {
+ width: 70%;
+}
+.ar-skeleton-title {
+ height: 1.5rem;
+ width: 60%;
+ margin-bottom: var(--ar-s-3);
+}
+.ar-skeleton-avatar {
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--ar-radius-pill);
+}
+.ar-skeleton-thumbnail {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+}
+.ar-skeleton-btn {
+ height: 2.5rem;
+ width: 8rem;
+ border-radius: var(--ar-radius-field);
+}
+@keyframes ar-skeleton-shimmer {
+ 0% {
+  transform: translateX(-100%);
+ }
+ 100% {
+  transform: translateX(100%);
+ }
+}
+
+/* ============================================================
+   29. BREADCRUMB
+   ============================================================ */
+.ar-breadcrumb {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--ar-s-1);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ font-size: 0.875rem;
+}
+.ar-breadcrumb-item {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+}
+.ar-breadcrumb-item a {
+ color: var(--ar-gray-600);
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+.ar-breadcrumb-item a:hover {
+ color: var(--ar-primary);
+}
+.ar-breadcrumb-item:not(:last-child)::after {
+ content: "/";
+ color: var(--ar-gray-400);
+ margin-left: var(--ar-s-1);
+}
+.ar-breadcrumb-item:last-child {
+ color: var(--ar-base-content);
+ font-weight: 600;
+}
+
+/* ============================================================
+   30. PAGINATION
+   ============================================================ */
+.ar-pagination {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.ar-page-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 2.25rem;
+ height: 2.25rem;
+ padding: 0 var(--ar-s-2);
+ border-radius: var(--ar-radius-field);
+ border: var(--ar-border-width) solid transparent;
+ background: transparent;
+ color: var(--ar-base-content);
+ font-size: 0.875rem;
+ font-weight: 500;
+ text-decoration: none;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+.ar-page-item:hover {
+ background: var(--ar-base-200);
+}
+.ar-page-active {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+ font-weight: 700;
+}
+.ar-page-active:hover {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-page-disabled {
+ opacity: 0.4;
+ pointer-events: none;
+}
+.ar-page-ellipsis {
+ pointer-events: none;
+ color: var(--ar-gray-500);
+}
+
+/* ============================================================
+   31. RATING
+   ============================================================ */
+.ar-rating {
+ display: inline-flex;
+ gap: var(--ar-s-1);
+ direction: rtl;
+}
+.ar-rating input {
+ display: none;
+}
+.ar-rating label {
+ cursor: pointer;
+ color: var(--ar-gray-300);
+ transition:
+  color 0.15s ease,
+  transform 0.15s ease;
+}
+.ar-rating label:hover,
+.ar-rating label:hover ~ label,
+.ar-rating input:checked ~ label {
+ color: var(--ar-warning);
+}
+.ar-rating label:hover {
+ transform: scale(1.15);
+}
+.ar-rating svg {
+ width: 1.5rem;
+ height: 1.5rem;
+ fill: currentColor;
+}
+.ar-rating-readonly label {
+ cursor: default;
+}
+.ar-rating-readonly label:hover,
+.ar-rating-readonly label:hover ~ label,
+.ar-rating-readonly input:checked ~ label {
+ transform: none;
+}
+
+/* ============================================================
+   32. CHAT BUBBLE
+   ============================================================ */
+.ar-chat {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-3);
+ max-width: 48rem;
+}
+.ar-chat-bubble {
+ position: relative;
+ padding: var(--ar-s-3) var(--ar-s-4);
+ border-radius: var(--ar-radius-box);
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+ max-width: 80%;
+ line-height: 1.5;
+ word-wrap: break-word;
+}
+.ar-chat-start {
+ align-self: flex-start;
+}
+.ar-chat-end {
+ align-self: flex-end;
+}
+.ar-chat-start .ar-chat-bubble {
+ border-bottom-left-radius: 0;
+}
+.ar-chat-end .ar-chat-bubble {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+ border-bottom-right-radius: 0;
+}
+.ar-chat-avatar {
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: var(--ar-radius-pill);
+ overflow: hidden;
+ flex-shrink: 0;
+}
+.ar-chat-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.ar-chat-start .ar-chat-header,
+.ar-chat-end .ar-chat-header {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+ margin-bottom: var(--ar-s-1);
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: var(--ar-gray-600);
+}
+.ar-chat-end .ar-chat-header {
+ justify-content: flex-end;
+}
+.ar-chat-footer {
+ font-size: 0.7rem;
+ color: var(--ar-gray-500);
+ margin-top: var(--ar-s-1);
+}
+.ar-chat-start .ar-chat-footer {
+ text-align: left;
+}
+.ar-chat-end .ar-chat-footer {
+ text-align: right;
+}
+.ar-chat-sender {
+ display: flex;
+ align-items: flex-end;
+ gap: var(--ar-s-2);
+}
+.ar-chat-receiver {
+ display: flex;
+ align-items: flex-end;
+ gap: var(--ar-s-2);
+ flex-direction: row-reverse;
+}
+
+/* ============================================================
+   33. TAG / CHIP
+   ============================================================ */
+.ar-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+ padding: 0.25rem 0.75rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+ font-size: 0.8125rem;
+ font-weight: 500;
+ line-height: 1.4;
+ white-space: nowrap;
+}
+.ar-tag-primary {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-tag-secondary {
+ background: var(--ar-secondary);
+ color: var(--ar-secondary-content);
+}
+.ar-tag-accent {
+ background: var(--ar-accent);
+ color: var(--ar-accent-content);
+}
+.ar-tag-neutral {
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+}
+.ar-tag-info {
+ background: var(--ar-info);
+ color: var(--ar-info-content);
+}
+.ar-tag-success {
+ background: var(--ar-success);
+ color: var(--ar-success-content);
+}
+.ar-tag-warning {
+ background: var(--ar-warning);
+ color: var(--ar-warning-content);
+}
+.ar-tag-error {
+ background: var(--ar-error);
+ color: var(--ar-error-content);
+}
+.ar-tag-outline {
+ background: transparent;
+ border: var(--ar-border-width) solid currentColor;
+}
+.ar-tag-outline.ar-tag-primary {
+ color: var(--ar-primary);
+}
+.ar-tag-outline.ar-tag-secondary {
+ color: var(--ar-secondary);
+}
+.ar-tag-outline.ar-tag-accent {
+ color: var(--ar-accent);
+}
+.ar-tag-outline.ar-tag-neutral {
+ color: var(--ar-neutral);
+}
+.ar-tag-outline.ar-tag-info {
+ color: var(--ar-info);
+}
+.ar-tag-outline.ar-tag-success {
+ color: var(--ar-success);
+}
+.ar-tag-outline.ar-tag-warning {
+ color: var(--ar-warning);
+}
+.ar-tag-outline.ar-tag-error {
+ color: var(--ar-error);
+}
+.ar-tag-lg {
+ padding: 0.375rem 1rem;
+ font-size: 0.875rem;
+}
+.ar-tag-sm {
+ padding: 0.125rem 0.5rem;
+ font-size: 0.75rem;
+}
+.ar-tag-close {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 1rem;
+ height: 1rem;
+ border-radius: var(--ar-radius-pill);
+ background: transparent;
+ border: 0;
+ color: inherit;
+ opacity: 0.6;
+ cursor: pointer;
+ padding: 0;
+ font-size: 0.875rem;
+ line-height: 1;
+}
+.ar-tag-close:hover {
+ opacity: 1;
+}
+
+/* ============================================================
+   34. POPOVER
+   ============================================================ */
+.ar-popover {
+ position: relative;
+ display: inline-block;
+}
+.ar-popover-content {
+ position: absolute;
+ z-index: 30;
+ min-width: 14rem;
+ padding: var(--ar-s-3) var(--ar-s-4);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-lg);
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ font-size: 0.875rem;
+ line-height: 1.5;
+ opacity: 0;
+ visibility: hidden;
+ transition:
+  opacity 0.2s ease,
+  visibility 0.2s ease,
+  transform 0.2s ease;
+ pointer-events: none;
+}
+.ar-popover-open .ar-popover-content {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+}
+/* Placement: top (default) */
+.ar-popover-content[data-ar-placement="top"] {
+ bottom: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%) translateY(0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="top"] {
+ transform: translateX(-50%) translateY(0);
+}
+/* Placement: bottom */
+.ar-popover-content[data-ar-placement="bottom"] {
+ top: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%) translateY(-0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="bottom"] {
+ transform: translateX(-50%) translateY(0);
+}
+/* Placement: left */
+.ar-popover-content[data-ar-placement="left"] {
+ right: calc(100% + 0.5rem);
+ top: 50%;
+ transform: translateY(-50%) translateX(0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="left"] {
+ transform: translateY(-50%) translateX(0);
+}
+/* Placement: right */
+.ar-popover-content[data-ar-placement="right"] {
+ left: calc(100% + 0.5rem);
+ top: 50%;
+ transform: translateY(-50%) translateX(-0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="right"] {
+ transform: translateY(-50%) translateX(0);
+}
+.ar-popover-title {
+ font-weight: 600;
+ margin-bottom: var(--ar-s-1);
+}
+
+/* ============================================================
+   35. FILE UPLOAD
+   ============================================================ */
+.ar-file-upload {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: var(--ar-s-2);
+ padding: var(--ar-s-8) var(--ar-s-4);
+ border: 2px dashed var(--ar-base-300);
+ border-radius: var(--ar-radius-box);
+ background: var(--ar-base-200);
+ color: var(--ar-gray-600);
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+.ar-file-upload:hover,
+.ar-file-upload.ar-file-upload-dragover {
+ border-color: var(--ar-primary);
+ background: var(--ar-base-300);
+ color: var(--ar-base-content);
+}
+.ar-file-upload input[type="file"] {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ cursor: pointer;
+}
+.ar-file-upload-icon {
+ width: 2.5rem;
+ height: 2.5rem;
+ opacity: 0.5;
+}
+.ar-file-upload-text {
+ font-size: 0.875rem;
+}
+.ar-file-upload-text strong {
+ color: var(--ar-primary);
+}
+.ar-file-upload-hint {
+ font-size: 0.75rem;
+ opacity: 0.7;
+}
+.ar-file-upload-sm {
+ padding: var(--ar-s-4) var(--ar-s-3);
+}
+.ar-file-upload-sm .ar-file-upload-icon {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+/* ============================================================
+   36. SCROLL TO TOP
+   ============================================================ */
+.ar-scroll-top {
+ position: fixed;
+ bottom: var(--ar-s-6);
+ right: var(--ar-s-6);
+ z-index: 40;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.75rem;
+ height: 2.75rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+ border: 0;
+ cursor: pointer;
+ box-shadow: var(--ar-shadow-lg);
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(0.5rem);
+ transition: all 0.3s ease;
+}
+.ar-scroll-top-visible {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+.ar-scroll-top:hover {
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+ transform: translateY(-0.125rem);
+}
+.ar-scroll-top svg {
+ width: 1.25rem;
+ height: 1.25rem;
+}
+
+/* ============================================================
+   37. NEOBRUTALISM OVERRIDES
+   Activated when html[data-theme="neo"] is set.
+   Hard shadows, thick borders, bold colors — zero blur.
+   ============================================================ */
+html[data-theme="neo"] body {
+ font-family: var(--ar-font-sans);
+}
+
+/* --- Buttons (neo) --- */
+html[data-theme="neo"] .ar-btn {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 0.75rem;
+ box-shadow: var(--ar-neo-shadow-md);
+ font-family: var(--ar-font-sans);
+ font-weight: 700;
+ transition:
+  box-shadow 0.15s ease-out,
+  transform 0.15s ease-out;
+}
+html[data-theme="neo"] .ar-btn:hover {
+ box-shadow: var(--ar-neo-shadow-sm);
+ transform: translate(2px, 2px);
+}
+html[data-theme="neo"] .ar-btn:active {
+ box-shadow: none;
+ transform: translate(4px, 4px);
+}
+html[data-theme="neo"] .ar-btn-primary {
+ background: var(--ar-neo-primary);
+ color: var(--ar-neo-primary-content);
+}
+html[data-theme="neo"] .ar-btn-primary:hover {
+ background: var(--ar-neo-primary);
+}
+html[data-theme="neo"] .ar-btn-outline {
+ background: var(--ar-neo-base-100);
+ border-color: var(--ar-neo-border-color);
+ color: var(--ar-neo-base-content);
+}
+html[data-theme="neo"] .ar-btn-outline:hover {
+ background: var(--ar-neo-base-content);
+ color: var(--ar-neo-base-100);
+}
+html[data-theme="neo"] .ar-btn-ghost {
+ background: transparent;
+ border-color: transparent;
+ box-shadow: none;
+}
+html[data-theme="neo"] .ar-btn-ghost:hover {
+ background: var(--ar-neo-base-200);
+ box-shadow: var(--ar-neo-shadow-sm);
+}
+html[data-theme="neo"] .ar-btn-neutral {
+ background: var(--ar-neo-neutral);
+ color: var(--ar-neo-neutral-content);
+}
+html[data-theme="neo"] .ar-btn-circle {
+ border-radius: var(--ar-radius-pill);
+}
+
+/* --- Card (neo) --- */
+html[data-theme="neo"] .ar-card {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 1rem;
+ box-shadow: var(--ar-neo-shadow-lg);
+ overflow: hidden;
+}
+
+/* --- Badge (neo) --- */
+html[data-theme="neo"] .ar-badge {
+ border: 2px solid var(--ar-neo-border-color);
+ border-radius: var(--ar-radius-pill);
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
+ font-weight: 700;
+}
+
+/* --- Modal (neo) --- */
+html[data-theme="neo"] .ar-modal-box {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 1rem;
+ box-shadow: var(--ar-neo-shadow-xl);
+}
+
+/* --- Alert (neo) --- */
+html[data-theme="neo"] .ar-alert {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 0.75rem;
+ box-shadow: var(--ar-neo-shadow-md);
+ font-weight: 600;
+}
+
+/* --- Table (neo) --- */
+html[data-theme="neo"] .ar-table th,
+html[data-theme="neo"] .ar-table td {
+ border: 2px solid var(--ar-neo-border-color);
+}
+html[data-theme="neo"] .ar-table th {
+ background: var(--ar-neo-base-200);
+ font-weight: 700;
+}
+
+/* --- Tabs (neo) --- */
+html[data-theme="neo"] .ar-tabs {
+ border-bottom: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+}
+html[data-theme="neo"] .ar-tab {
+ border: 2px solid transparent;
+ border-bottom: 0;
+ border-radius: 0.5rem 0.5rem 0 0;
+ font-weight: 700;
+ font-family: var(--ar-font-sans);
+}
+html[data-theme="neo"] .ar-tab-active {
+ border-color: var(--ar-neo-border-color);
+ background: var(--ar-neo-base-100);
+ color: var(--ar-neo-primary);
+}
+
+/* --- Accordion (neo) --- */
+html[data-theme="neo"] .ar-accordion {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 0.75rem;
+ box-shadow: var(--ar-neo-shadow-md);
+}
+html[data-theme="neo"] .ar-accordion details {
+ border-top: 2px solid var(--ar-neo-border-color);
+}
+html[data-theme="neo"] .ar-accordion details:first-child {
+ border-top: 0;
+}
+
+/* --- Progress (neo) --- */
+html[data-theme="neo"] .ar-progress {
+ border: 2px solid var(--ar-neo-border-color);
+ border-radius: var(--ar-radius-pill);
+ overflow: hidden;
+}
+html[data-theme="neo"] .ar-progress::-webkit-progress-value {
+ background: var(--ar-neo-primary);
+}
+
+/* --- Toast (neo) --- */
+html[data-theme="neo"] .ar-toast {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 0.75rem;
+ box-shadow: var(--ar-neo-shadow-lg);
+ font-weight: 600;
+}
+
+/* --- Tag (neo) --- */
+html[data-theme="neo"] .ar-tag {
+ border: 2px solid var(--ar-neo-border-color);
+ border-radius: var(--ar-radius-pill);
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
+ font-weight: 600;
+}
+
+/* --- Chat bubble (neo) --- */
+html[data-theme="neo"] .ar-chat-bubble {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 1rem;
+ box-shadow: var(--ar-neo-shadow-sm);
+}
+html[data-theme="neo"] .ar-chat-end .ar-chat-bubble {
+ background: var(--ar-neo-primary);
+ color: var(--ar-neo-primary-content);
+ border-color: var(--ar-neo-border-color);
+}
+
+/* --- Dropdown (neo) --- */
+html[data-theme="neo"] .ar-dropdown-content {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 0.75rem;
+ box-shadow: var(--ar-neo-shadow-lg);
+}
+
+/* --- Popover (neo) --- */
+html[data-theme="neo"] .ar-popover-content {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 0.75rem;
+ box-shadow: var(--ar-neo-shadow-lg);
+}
+
+/* --- Tooltip (neo) --- */
+html[data-theme="neo"] .ar-tooltip[data-tip]::after {
+ border: 2px solid var(--ar-neo-border-color);
+ border-radius: 0.5rem;
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
+ font-weight: 600;
+}
+
+/* --- Forms (neo) --- */
+html[data-theme="neo"] .ar-input,
+html[data-theme="neo"] .ar-select,
+html[data-theme="neo"] .ar-textarea {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: 0.5rem;
+ box-shadow: var(--ar-neo-shadow-sm);
+ font-family: var(--ar-font-sans);
+ transition:
+  box-shadow 0.15s ease-out,
+  border-color 0.15s ease-out;
+}
+html[data-theme="neo"] .ar-input:focus,
+html[data-theme="neo"] .ar-select:focus,
+html[data-theme="neo"] .ar-textarea:focus {
+ border-color: var(--ar-neo-primary);
+ box-shadow: var(--ar-neo-shadow-md);
+ outline: 0;
+}
+
+/* --- Toggle (neo) --- */
+html[data-theme="neo"] .ar-toggle {
+ border: 2px solid var(--ar-neo-border-color);
+ border-radius: var(--ar-radius-pill);
+}
+
+/* --- Pagination (neo) --- */
+html[data-theme="neo"] .ar-page-item {
+ border: 2px solid var(--ar-neo-border-color);
+ border-radius: 0.5rem;
+ font-weight: 700;
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
+ transition:
+  box-shadow 0.15s ease-out,
+  transform 0.15s ease-out;
+}
+html[data-theme="neo"] .ar-page-item:hover {
+ box-shadow: 1px 1px 0px 0px var(--ar-neo-border-color);
+ transform: translate(1px, 1px);
+}
+html[data-theme="neo"] .ar-page-active {
+ background: var(--ar-neo-primary);
+ color: var(--ar-neo-primary-content);
+ border-color: var(--ar-neo-border-color);
+}
+
+/* --- Stepper (neo) --- */
+html[data-theme="neo"] .ar-step::before {
+ border: 2px solid var(--ar-neo-border-color);
+ box-shadow: 2px 2px 0px 0px var(--ar-neo-border-color);
+}
+
+/* --- Navbar (neo) --- */
+html[data-theme="neo"] .ar-navbar {
+ border-bottom: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ background: var(--ar-neo-base-100);
+}
+
+/* --- Footer (neo) --- */
+html[data-theme="neo"] .ar-footer {
+ border-top: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+}
+
+/* --- Hero (neo) --- */
+html[data-theme="neo"] .ar-hero {
+ background: var(--ar-neo-base-200);
+}
+
+/* --- Scroll to top (neo) --- */
+html[data-theme="neo"] .ar-scroll-top {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+ border-radius: var(--ar-radius-pill);
+ box-shadow: var(--ar-neo-shadow-md);
+}
+html[data-theme="neo"] .ar-scroll-top:hover {
+ box-shadow: var(--ar-neo-shadow-sm);
+ transform: translate(2px, 2px);
+}
+
+/* --- Drawer (neo) --- */
+html[data-theme="neo"] .ar-drawer-side .ar-menu {
+ border-right: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+}
+
+/* --- Skeleton (neo) --- */
+html[data-theme="neo"] .ar-skeleton {
+ border: 2px solid var(--ar-neo-border-color);
+}
+
+/* --- Breadcrumb (neo) --- */
+html[data-theme="neo"] .ar-breadcrumb-item:not(:last-child)::after {
+ color: var(--ar-neo-gray-400);
+}
+
+/* --- File upload (neo) --- */
+html[data-theme="neo"] .ar-file-upload {
+ border: 3px dashed var(--ar-neo-border-color);
+ border-radius: 0.75rem;
+ transition: all 0.2s ease;
+}
+html[data-theme="neo"] .ar-file-upload:hover {
+ border-color: var(--ar-neo-primary);
+ background: rgba(0, 174, 239, 0.05);
+ transform: scale(1.02) rotate(-1deg);
+}
+html[data-theme="neo"] .ar-file-upload.ar-file-upload-dragover {
+ border-color: var(--ar-neo-primary);
+ background: rgba(0, 174, 239, 0.05);
+ transform: scale(1.02);
+}
+
+/* --- Prose (neo) --- */
+html[data-theme="neo"] .ar-prose pre {
+ border: 2px solid var(--ar-neo-border-color);
+ border-radius: 0.75rem;
+ box-shadow: var(--ar-neo-shadow-sm);
+}
+html[data-theme="neo"] .ar-prose code {
+ border: 1px solid var(--ar-neo-border-color);
+}
+html[data-theme="neo"] .ar-prose th {
+ border: 2px solid var(--ar-neo-border-color);
+}
+html[data-theme="neo"] .ar-prose td {
+ border: 2px solid var(--ar-neo-border-color);
+}
+html[data-theme="neo"] .ar-prose blockquote {
+ border-left: 4px solid var(--ar-neo-primary);
+}
+
+/* ============================================================
+   38. UTILITIES — spacing
+   ============================================================ */
+.ar-p-0 {
+ padding: var(--ar-s-0);
+}
+.ar-p-1 {
+ padding: var(--ar-s-1);
+}
+.ar-p-2 {
+ padding: var(--ar-s-2);
+}
+.ar-p-3 {
+ padding: var(--ar-s-3);
+}
+.ar-p-4 {
+ padding: var(--ar-s-4);
+}
+.ar-p-5 {
+ padding: var(--ar-s-5);
+}
+.ar-p-6 {
+ padding: var(--ar-s-6);
+}
+.ar-p-8 {
+ padding: var(--ar-s-8);
+}
+.ar-p-10 {
+ padding: var(--ar-s-10);
+}
+.ar-p-12 {
+ padding: var(--ar-s-12);
+}
+.ar-px-1 {
+ padding-inline: var(--ar-s-1);
+}
+.ar-px-2 {
+ padding-inline: var(--ar-s-2);
+}
+.ar-px-3 {
+ padding-inline: var(--ar-s-3);
+}
+.ar-px-4 {
+ padding-inline: var(--ar-s-4);
+}
+.ar-px-6 {
+ padding-inline: var(--ar-s-6);
+}
+.ar-px-8 {
+ padding-inline: var(--ar-s-8);
+}
+.ar-py-1 {
+ padding-block: var(--ar-s-1);
+}
+.ar-py-2 {
+ padding-block: var(--ar-s-2);
+}
+.ar-py-3 {
+ padding-block: var(--ar-s-3);
+}
+.ar-py-4 {
+ padding-block: var(--ar-s-4);
+}
+.ar-py-6 {
+ padding-block: var(--ar-s-6);
+}
+.ar-py-8 {
+ padding-block: var(--ar-s-8);
+}
+.ar-py-12 {
+ padding-block: var(--ar-s-12);
+}
+.ar-pt-2 {
+ padding-top: var(--ar-s-2);
+}
+.ar-pt-10 {
+ padding-top: var(--ar-s-10);
+}
+.ar-pb-0 {
+ padding-bottom: var(--ar-s-0);
+}
+.ar-pb-2 {
+ padding-bottom: var(--ar-s-2);
+}
+.ar-m-0 {
+ margin: var(--ar-s-0);
+}
+.ar-m-2 {
+ margin: var(--ar-s-2);
+}
+.ar-m-4 {
+ margin: var(--ar-s-4);
+}
+.ar-mt-1 {
+ margin-top: var(--ar-s-1);
+}
+.ar-mt-2 {
+ margin-top: var(--ar-s-2);
+}
+.ar-mt-3 {
+ margin-top: var(--ar-s-3);
+}
+.ar-mt-4 {
+ margin-top: var(--ar-s-4);
+}
+.ar-mt-6 {
+ margin-top: var(--ar-s-6);
+}
+.ar-mt-8 {
+ margin-top: var(--ar-s-8);
+}
+.ar-mb-2 {
+ margin-bottom: var(--ar-s-2);
+}
+.ar-mb-8 {
+ margin-bottom: var(--ar-s-8);
+}
+.ar-my-1 {
+ margin-block: var(--ar-s-1);
+}
+.ar-my-2 {
+ margin-block: var(--ar-s-2);
+}
+.ar-my-4 {
+ margin-block: var(--ar-s-4);
+}
+.ar-my-10 {
+ margin-block: var(--ar-s-10);
+}
+.ar-mx-auto {
+ margin-inline: auto;
+}
+
+/* ============================================================
+   28. UTILITIES — layout & flex & grid
+   ============================================================ */
+.ar-flex {
+ display: flex;
+}
+.ar-inline-flex {
+ display: inline-flex;
+}
+.ar-grid {
+ display: grid;
+}
+.ar-block {
+ display: block;
+}
+.ar-inline-block {
+ display: inline-block;
+}
+.ar-hidden {
+ display: none;
+}
+.ar-flex-col {
+ flex-direction: column;
+}
+.ar-flex-row {
+ flex-direction: row;
+}
+.ar-flex-wrap {
+ flex-wrap: wrap;
+}
+.ar-flex-1 {
+ flex: 1 1 0%;
+}
+.ar-shrink-0 {
+ flex-shrink: 0;
+}
+.ar-items-start {
+ align-items: flex-start;
+}
+.ar-items-center {
+ align-items: center;
+}
+.ar-items-end {
+ align-items: flex-end;
+}
+.ar-justify-start {
+ justify-content: flex-start;
+}
+.ar-justify-center {
+ justify-content: center;
+}
+.ar-justify-between {
+ justify-content: space-between;
+}
+.ar-justify-end {
+ justify-content: flex-end;
+}
+.ar-grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.ar-grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.ar-grid-cols-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.ar-grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.ar-grid-flow-col {
+ grid-auto-flow: column;
+}
+.ar-gap-1 {
+ gap: var(--ar-s-1);
+}
+.ar-gap-2 {
+ gap: var(--ar-s-2);
+}
+.ar-gap-3 {
+ gap: var(--ar-s-3);
+}
+.ar-gap-4 {
+ gap: var(--ar-s-4);
+}
+.ar-gap-6 {
+ gap: var(--ar-s-6);
+}
+.ar-gap-x-2 {
+ column-gap: var(--ar-s-2);
+}
+.ar-gap-x-4 {
+ column-gap: var(--ar-s-4);
+}
+.ar-gap-x-8 {
+ column-gap: var(--ar-s-8);
+}
+.ar-gap-y-8 {
+ row-gap: var(--ar-s-8);
+}
+.ar-gap-y-16 {
+ row-gap: var(--ar-s-16);
+}
+
+/* ============================================================
+   29. UTILITIES — typography
+   ============================================================ */
+.ar-text-xs {
+ font-size: 0.75rem;
+}
+.ar-text-sm {
+ font-size: 0.875rem;
+}
+.ar-text-base {
+ font-size: 1rem;
+}
+.ar-text-lg {
+ font-size: 1.125rem;
+}
+.ar-text-xl {
+ font-size: 1.25rem;
+}
+.ar-text-2xl {
+ font-size: 1.5rem;
+}
+.ar-text-3xl {
+ font-size: 1.875rem;
+}
+.ar-text-4xl {
+ font-size: 2.25rem;
+}
+.ar-text-5xl {
+ font-size: 3rem;
+}
+.ar-text-6xl {
+ font-size: 3.75rem;
+}
+.ar-text-7xl {
+ font-size: 4.5rem;
+}
+.ar-text-8xl {
+ font-size: 6rem;
+}
+.ar-text-9xl {
+ font-size: 8rem;
+}
+.ar-font-thin {
+ font-weight: 100;
+}
+.ar-font-normal {
+ font-weight: 400;
+}
+.ar-font-medium {
+ font-weight: 500;
+}
+.ar-font-semibold {
+ font-weight: 600;
+}
+.ar-font-bold {
+ font-weight: 700;
+}
+.ar-text-left {
+ text-align: left;
+}
+.ar-text-center {
+ text-align: center;
+}
+.ar-text-right {
+ text-align: right;
+}
+.ar-text-pretty {
+ text-wrap: pretty;
+}
+.ar-text-wrap {
+ text-wrap: wrap;
+}
+.ar-leading-tight {
+ line-height: 1.25;
+}
+.ar-leading-6 {
+ line-height: 1.5rem;
+}
+.ar-tracking-wide {
+ letter-spacing: 0.025em;
+}
+.ar-tracking-wider {
+ letter-spacing: 0.05em;
+}
+.ar-underline {
+ text-decoration: underline;
+}
+.ar-no-underline {
+ text-decoration: none;
+}
+.ar-list-none {
+ list-style: none;
+}
+.ar-tabular-nums {
+ font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+   30. UTILITIES — sizing
+   ============================================================ */
+.ar-w-8 {
+ width: var(--ar-s-8);
+}
+.ar-w-40 {
+ width: var(--ar-s-40, 10rem);
+}
+.ar-w-48 {
+ width: var(--ar-s-48, 12rem);
+}
+.ar-w-60 {
+ width: 15rem;
+}
+.ar-w-80 {
+ width: 20rem;
+}
+.ar-w-full {
+ width: 100%;
+}
+.ar-w-1\/3 {
+ width: 33.333333%;
+}
+.ar-w-2\/3 {
+ width: 66.666667%;
+}
+.ar-w-1\/2 {
+ width: 50%;
+}
+.ar-w-11\/12 {
+ width: 91.666667%;
+}
+.ar-h-8 {
+ height: var(--ar-s-8);
+}
+.ar-h-48 {
+ height: 12rem;
+}
+.ar-h-full {
+ height: 100%;
+}
+.ar-min-h-full {
+ min-height: 100%;
+}
+.ar-min-h-screen {
+ min-height: 100vh;
+}
+.ar-max-w-none {
+ max-width: none;
+}
+.ar-max-w-sm {
+ max-width: 24rem;
+}
+.ar-max-w-md {
+ max-width: 28rem;
+}
+.ar-max-w-lg {
+ max-width: 32rem;
+}
+.ar-max-w-xl {
+ max-width: 36rem;
+}
+.ar-max-w-2xl {
+ max-width: 42rem;
+}
+.ar-max-w-3xl {
+ max-width: 48rem;
+}
+.ar-max-w-4xl {
+ max-width: 56rem;
+}
+.ar-max-w-5xl {
+ max-width: 64rem;
+}
+.ar-max-w-6xl {
+ max-width: 72rem;
+}
+.ar-max-w-7xl {
+ max-width: 80rem;
+}
+.ar-aspect-video {
+ aspect-ratio: 16 / 9;
+}
+.ar-object-cover {
+ object-fit: cover;
+}
+.ar-overflow-hidden {
+ overflow: hidden;
+}
+.ar-overflow-x-auto {
+ overflow-x: auto;
+}
+
+/* ============================================================
+   31. UTILITIES — colors
+   ============================================================ */
+.ar-bg-base-100 {
+ background: var(--ar-base-100);
+}
+.ar-bg-base-200 {
+ background: var(--ar-base-200);
+}
+.ar-bg-base-300 {
+ background: var(--ar-base-300);
+}
+.ar-bg-base-content {
+ background: var(--ar-base-content);
+}
+.ar-bg-base-content\/80 {
+ background: var(--ar-base-content-80);
+}
+.ar-bg-neutral {
+ background: var(--ar-neutral);
+}
+.ar-bg-primary {
+ background: var(--ar-primary);
+}
+.ar-bg-gray-100 {
+ background: var(--ar-gray-100);
+}
+.ar-bg-gray-200 {
+ background: var(--ar-gray-200);
+}
+.ar-bg-gray-700 {
+ background: var(--ar-gray-700);
+}
+.ar-text-base-content {
+ color: var(--ar-base-content);
+}
+.ar-text-primary {
+ color: var(--ar-primary);
+}
+.ar-text-primary-content {
+ color: var(--ar-primary-content);
+}
+.ar-text-neutral {
+ color: var(--ar-neutral);
+}
+.ar-text-neutral-content {
+ color: var(--ar-neutral-content);
+}
+.ar-text-white {
+ color: #ffffff;
+}
+.ar-text-black {
+ color: #000000;
+}
+.ar-text-gray-100 {
+ color: var(--ar-gray-100);
+}
+.ar-text-gray-200 {
+ color: var(--ar-gray-200);
+}
+.ar-text-gray-300 {
+ color: var(--ar-gray-300);
+}
+.ar-text-gray-400 {
+ color: var(--ar-gray-400);
+}
+.ar-text-gray-500 {
+ color: var(--ar-gray-500);
+}
+.ar-text-gray-600 {
+ color: var(--ar-gray-600);
+}
+.ar-text-gray-700 {
+ color: var(--ar-gray-700);
+}
+
+/* ============================================================
+   32. UTILITIES — border, radius, shadow, position, misc
+   ============================================================ */
+.ar-border {
+ border: var(--ar-border-width) solid;
+}
+.ar-border-2 {
+ border: 2px solid;
+}
+.ar-border-t {
+ border-top: var(--ar-border-width) solid;
+}
+.ar-border-t-0 {
+ border-top: 0;
+}
+.ar-border-b {
+ border-bottom: var(--ar-border-width) solid;
+}
+.ar-border-base-content {
+ border-color: var(--ar-base-content);
+}
+.ar-border-neutral {
+ border-color: var(--ar-neutral);
+}
+.ar-border-gray-200 {
+ border-color: var(--ar-gray-200);
+}
+.ar-border-gray-300 {
+ border-color: var(--ar-gray-300);
+}
+.ar-border-base-300 {
+ border-color: var(--ar-base-300);
+}
+.ar-rounded {
+ border-radius: var(--ar-radius-field);
+}
+.ar-rounded-lg {
+ border-radius: var(--ar-radius-box);
+}
+.ar-rounded-xl {
+ border-radius: 0.75rem;
+}
+.ar-rounded-box {
+ border-radius: var(--ar-radius-box);
+}
+.ar-rounded-full {
+ border-radius: var(--ar-radius-pill);
+}
+.ar-shadow-sm {
+ box-shadow: var(--ar-shadow-sm);
+}
+.ar-shadow-md {
+ box-shadow: var(--ar-shadow-md);
+}
+.ar-shadow-lg {
+ box-shadow: var(--ar-shadow-lg);
+}
+.ar-shadow-xl {
+ box-shadow: var(--ar-shadow-xl);
+}
+.ar-shadow-2xl {
+ box-shadow: var(--ar-shadow-2xl);
+}
+.ar-relative {
+ position: relative;
+}
+.ar-absolute {
+ position: absolute;
+}
+.ar-fixed {
+ position: fixed;
+}
+.ar-sticky {
+ position: sticky;
+ top: 0;
+ z-index: 50;
+}
+.ar-inset-0 {
+ inset: 0;
+}
+.ar-top-0 {
+ top: 0;
+}
+.ar-bottom-0 {
+ bottom: 0;
+}
+.ar-left-0 {
+ left: 0;
+}
+.ar-right-0 {
+ right: 0;
+}
+.ar-top-1\/2 {
+ top: 50%;
+}
+.ar-left-5 {
+ left: 1.25rem;
+}
+.ar-right-5 {
+ right: 1.25rem;
+}
+.ar-z-10 {
+ z-index: 10;
+}
+.ar-z-20 {
+ z-index: 20;
+}
+.ar-z-50 {
+ z-index: 50;
+}
+.ar-opacity-0 {
+ opacity: 0;
+}
+.ar-opacity-30 {
+ opacity: 0.3;
+}
+.ar-opacity-60 {
+ opacity: 0.6;
+}
+.ar-transition-all {
+ transition: all 0.3s ease;
+}
+.ar-transition-transform {
+ transition: transform 0.3s ease;
+}
+.ar-duration-300 {
+ transition-duration: 0.3s;
+}
+.ar-duration-500 {
+ transition-duration: 0.5s;
+}
+.ar-ease-out {
+ transition-timing-function: ease-out;
+}
+.ar-ease-in-out {
+ transition-timing-function: ease-in-out;
+}
+.ar-cursor-pointer {
+ cursor: pointer;
+}
+.ar-whitespace-nowrap {
+ white-space: nowrap;
+}
+.ar-sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+/* ============================================================
+   33. UTILITIES — hover states
+   ============================================================ */
+.ar-hover-bounce:hover {
+ animation: ar-bounce 1s infinite;
+}
+.ar-hover-scale-110:hover {
+ transform: scale(1.1);
+}
+.ar-hover-shadow-xl:hover {
+ box-shadow: var(--ar-shadow-xl);
+}
+.ar-hover-text-gray-600:hover {
+ color: var(--ar-gray-600);
+}
+.ar-hover-text-neutral:hover {
+ color: var(--ar-neutral);
+}
+.ar-hover-bg-gray-100:hover {
+ background: var(--ar-gray-100);
+}
+.ar-hover-bg-gray-700:hover {
+ background: var(--ar-gray-700);
+}
+.ar-hover-border-gray-400:hover {
+ border-color: var(--ar-gray-400);
+}
+.ar-hover-ring:hover {
+ box-shadow: 0 0 0 1px var(--ar-gray-400);
+ border-color: var(--ar-gray-400);
+}
+.ar-hover-ring-gray-200:hover {
+ box-shadow: 0 0 0 1px var(--ar-gray-200);
+ border-color: var(--ar-gray-400);
+}
+
+/* ============================================================
+   34. UTILITIES — responsive
+   ============================================================ */
+@media (min-width: 768px) {
+ .ar-md\:flex {
+  display: flex;
+ }
+ .ar-md\:flex-col {
+  flex-direction: column;
+ }
+ .ar-md\:flex-row {
+  flex-direction: row;
+ }
+ .ar-md\:hidden {
+  display: none;
+ }
+ .ar-md\:grid {
+  display: grid;
+ }
+ .ar-md\:grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ .ar-md\:items-center {
+  align-items: center;
+ }
+ .ar-md\:w-1\/2 {
+  width: 50%;
+ }
+ .ar-md\:w-1\/3 {
+  width: 33.333333%;
+ }
+ .ar-md\:w-2\/3 {
+  width: 66.666667%;
+ }
+ .ar-md\:max-w-52 {
+  max-width: 13rem;
+ }
+ .ar-md\:p-8 {
+  padding: var(--ar-s-8);
+ }
+ .ar-md\:mx-0 {
+  margin-inline: 0;
+ }
+ .ar-md\:text-left {
+  text-align: left;
+ }
+ .ar-md\:text-center {
+  text-align: center;
+ }
+}
+@media (min-width: 1024px) {
+ .ar-lg\:flex {
+  display: flex;
+ }
+ .ar-lg\:flex-col {
+  flex-direction: column;
+ }
+ .ar-lg\:flex-row {
+  flex-direction: row;
+ }
+ .ar-lg\:hidden {
+  display: none;
+ }
+ .ar-lg\:grid {
+  display: grid;
+ }
+ .ar-lg\:grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ .ar-lg\:grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+ .ar-lg\:grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+ .ar-lg\:items-center {
+  align-items: center;
+ }
+ .ar-lg\:justify-between {
+  justify-content: space-between;
+ }
+ .ar-lg\:gap-8 {
+  gap: var(--ar-s-8);
+ }
+ .ar-lg\:w-1\/2 {
+  width: 50%;
+ }
+ .ar-lg\:w-2\/5 {
+  width: 40%;
+ }
+ .ar-lg\:max-w-none {
+  max-width: none;
+ }
+ .ar-lg\:max-w-lg {
+  max-width: 32rem;
+ }
+ .ar-lg\:p-8 {
+  padding: var(--ar-s-8);
+ }
+ .ar-lg\:p-16 {
+  padding: var(--ar-s-16);
+ }
+ .ar-lg\:mx-0 {
+  margin-inline: 0;
+ }
+ .ar-lg\:text-2xl {
+  font-size: 1.5rem;
+ }
+ .ar-lg\:text-4xl {
+  font-size: 2.25rem;
+ }
+ .ar-lg\:text-6xl {
+  font-size: 3.75rem;
+ }
+ .ar-lg\:text-8xl {
+  font-size: 6rem;
+ }
+ .ar-lg\:text-9xl {
+  font-size: 8rem;
+ }
+ .ar-lg\:leading-tight {
+  line-height: 1.25;
+ }
+ .ar-lg\:text-left {
+  text-align: left;
+ }
+ .ar-lg\:text-center {
+  text-align: center;
+ }
+}
+
+/* ============================================================
+   39. NEOBRUTALISM UTILITIES
+   Explicit classes for neobrutalism styling, usable with any theme.
+   ============================================================ */
+
+/* Hard shadows */
+.ar-neo-shadow-sm {
+ box-shadow: var(--ar-neo-shadow-sm);
+}
+.ar-neo-shadow-md {
+ box-shadow: var(--ar-neo-shadow-md);
+}
+.ar-neo-shadow-lg {
+ box-shadow: var(--ar-neo-shadow-lg);
+}
+.ar-neo-shadow-xl {
+ box-shadow: var(--ar-neo-shadow-xl);
+}
+.ar-neo-shadow-2xl {
+ box-shadow: var(--ar-neo-shadow-2xl);
+}
+
+/* Thick borders */
+.ar-neo-border {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+}
+.ar-neo-border-2 {
+ border: 2px solid var(--ar-neo-border-color);
+}
+
+/* Border radius */
+.ar-neo-rounded {
+ border-radius: 0.5rem;
+}
+.ar-neo-rounded-lg {
+ border-radius: 0.75rem;
+}
+.ar-neo-rounded-xl {
+ border-radius: 1rem;
+}
+
+/* Interactive press effect */
+.ar-neo-press {
+ transition:
+  box-shadow 0.15s ease-out,
+  transform 0.15s ease-out;
+}
+.ar-neo-press:hover {
+ box-shadow: var(--ar-neo-shadow-sm);
+ transform: translate(2px, 2px);
+}
+.ar-neo-press:active {
+ box-shadow: none;
+ transform: translate(4px, 4px);
+}
+
+/* Neo color accents */
+.ar-neo-primary {
+ background: var(--ar-neo-primary);
+ color: var(--ar-neo-primary-content);
+}
+.ar-neo-secondary {
+ background: var(--ar-neo-secondary);
+ color: var(--ar-neo-secondary-content);
+}
+.ar-neo-accent {
+ background: var(--ar-neo-accent);
+ color: var(--ar-neo-accent-content);
+}
+.ar-neo-danger {
+ background: var(--ar-neo-error);
+ color: var(--ar-neo-error-content);
+}
+
+/* Neo text colors */
+.ar-neo-text-primary {
+ color: var(--ar-neo-primary);
+}
+.ar-neo-text-secondary {
+ color: var(--ar-neo-secondary);
+}
+.ar-neo-text-accent {
+ color: var(--ar-neo-accent);
+}
+.ar-neo-text-danger {
+ color: var(--ar-neo-error);
+}
+.ar-neo-text-dark {
+ color: var(--ar-neo-base-content);
+}
+
+/* Playful hover animations */
+.ar-neo-hover-tilt:hover {
+ transform: rotate(-1deg);
+}
+.ar-neo-hover-lift:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--ar-neo-shadow-lg);
+}